Skip to content

Commit f3e0c80

Browse files
jonrohanjonrohan
committed
Move BaseComponents out of Component creations
1 parent 2c65f03 commit f3e0c80

File tree

1 file changed

+91
-74
lines changed

1 file changed

+91
-74
lines changed

‎packages/react/src/PageHeader/PageHeader.tsx‎

Lines changed: 91 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export type PageHeaderProps = {
4949
hasBorder?: boolean
5050
} & SxProp
5151

52+
const RootBaseComponent = toggleSxComponent('div') as React.ComponentType<
53+
React.PropsWithChildren<PageHeaderProps & React.RefAttributes<HTMLDivElement>>
54+
>
5255
const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
5356
({children, className, sx = {}, as = 'div', 'aria-label': ariaLabel, role, hasBorder}, forwardedRef) => {
5457
const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
@@ -104,12 +107,10 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
104107
},
105108
[children, rootRef],
106109
)
107-
const BaseComponent = toggleSxComponent(as) as React.ComponentType<
108-
React.PropsWithChildren<PageHeaderProps & React.RefAttributes<HTMLDivElement>>
109-
>
110110

111111
return (
112-
<BaseComponent
112+
<RootBaseComponent
113+
as={as}
113114
ref={rootRef}
114115
className={clsx(classes.PageHeader, className)}
115116
data-has-border={hasBorder ? 'true' : undefined}
@@ -118,11 +119,14 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
118119
role={role}
119120
>
120121
{children}
121-
</BaseComponent>
122+
</RootBaseComponent>
122123
)
123124
},
124125
) as PolymorphicForwardRefComponent<'div', PageHeaderProps>
125126

127+
const ContextAreaBaseComponent = toggleSxComponent('div') as React.ComponentType<
128+
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
129+
>
126130
// PageHeader.ContextArea : Only visible on narrow viewports by default to provide user context of where they are at their journey. `hidden` prop available
127131
// to manage their custom visibility but consumers should be careful if they choose to hide this on narrow viewports.
128132
// PageHeader.ContextArea Sub Components: PageHeader.ParentLink, PageHeader.ContextBar, PageHeader.ContextAreaActions
@@ -133,13 +137,14 @@ const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
133137
hidden = hiddenOnRegularAndWide,
134138
sx: sxProp = defaultSxProp,
135139
}) => {
136-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
137-
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
138-
>
139140
return (
140-
<BaseComponent className={clsx(classes.ContextArea, className)} sx={sxProp} {...getHiddenDataAttributes(hidden)}>
141+
<ContextAreaBaseComponent
142+
className={clsx(classes.ContextArea, className)}
143+
sx={sxProp}
144+
{...getHiddenDataAttributes(hidden)}
145+
>
141146
{children}
142-
</BaseComponent>
147+
</ContextAreaBaseComponent>
143148
)
144149
}
145150
type LinkProps = Pick<
@@ -189,22 +194,29 @@ ParentLink.displayName = 'ParentLink'
189194
// Generic slot for any component above the title region. Use it for custom breadcrumbs and other navigation elements instead of ParentLink.
190195
// ---------------------------------------------------------------------
191196

197+
const ContextBarBaseComponent = toggleSxComponent('div') as React.ComponentType<
198+
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
199+
>
192200
const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
193201
children,
194202
className,
195203
sx: sxProp = defaultSxProp,
196204
hidden = hiddenOnRegularAndWide,
197205
}) => {
198-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
199-
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
200-
>
201206
return (
202-
<BaseComponent className={clsx(classes.ContextBar, className)} sx={sxProp} {...getHiddenDataAttributes(hidden)}>
207+
<ContextBarBaseComponent
208+
className={clsx(classes.ContextBar, className)}
209+
sx={sxProp}
210+
{...getHiddenDataAttributes(hidden)}
211+
>
203212
{children}
204-
</BaseComponent>
213+
</ContextBarBaseComponent>
205214
)
206215
}
207216

217+
const ContextAreaActionsBaseComponent = toggleSxComponent('div') as React.ComponentType<
218+
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
219+
>
208220
// ContextAreaActions
209221
// ---------------------------------------------------------------------
210222
const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
@@ -213,18 +225,15 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
213225
sx: sxProp = defaultSxProp,
214226
hidden = hiddenOnRegularAndWide,
215227
}) => {
216-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
217-
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
218-
>
219228
return (
220-
<BaseComponent
229+
<ContextAreaActionsBaseComponent
221230
className={clsx(classes.ContextAreaActions, className)}
222231
{...getHiddenDataAttributes(hidden)}
223232
sx={sxProp}
224233
{...getHiddenDataAttributes(hidden)}
225234
>
226235
{children}
227-
</BaseComponent>
236+
</ContextAreaActionsBaseComponent>
228237
)
229238
}
230239

@@ -235,15 +244,15 @@ type TitleAreaProps = {
235244
// PageHeader.TitleArea Sub Components: PageHeader.LeadingVisual, PageHeader.Title, PageTitle.TrailingVisual
236245
// ---------------------------------------------------------------------
237246

247+
const TitleAreaBaseComponent = toggleSxComponent('div') as React.ComponentType<
248+
React.PropsWithChildren<TitleAreaProps & React.RefAttributes<HTMLDivElement>>
249+
>
238250
const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TitleAreaProps>>(
239251
({children, className, sx: sxProp = defaultSxProp, hidden = false, variant = 'medium'}, forwardedRef) => {
240252
const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
241253
const currentVariant = useResponsiveValue(variant, 'medium')
242-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
243-
React.PropsWithChildren<TitleAreaProps & React.RefAttributes<HTMLDivElement>>
244-
>
245254
return (
246-
<BaseComponent
255+
<TitleAreaBaseComponent
247256
className={clsx(classes.TitleArea, className)}
248257
ref={titleAreaRef}
249258
data-component="TitleArea"
@@ -252,12 +261,16 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
252261
{...getHiddenDataAttributes(hidden)}
253262
>
254263
{children}
255-
</BaseComponent>
264+
</TitleAreaBaseComponent>
256265
)
257266
},
258267
) as PolymorphicForwardRefComponent<'div', TitleAreaProps>
259268
TitleArea.displayName = 'TitleArea'
260269

270+
const LeadingActionBaseComponent = toggleSxComponent('div') as React.ComponentType<
271+
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>> &
272+
React.HtmlHTMLAttributes<HTMLDivElement>
273+
>
261274
// PageHeader.LeadingAction and PageHeader.TrailingAction should only be visible on regular viewports.
262275
// So they come as hidden on narrow viewports by default and their visibility can be managed by their `hidden` prop.
263276
const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
@@ -270,45 +283,46 @@ const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
270283
// @ts-ignore sx has height attribute
271284
const {height} = sxProp
272285
if (height) style['--custom-height'] = height
273-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
274-
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>> &
275-
React.HtmlHTMLAttributes<HTMLDivElement>
276-
>
277286
return (
278-
<BaseComponent
287+
<LeadingActionBaseComponent
279288
className={clsx(classes.LeadingAction, className)}
280289
data-component="PH_LeadingAction"
281290
sx={sxProp}
282291
style={style}
283292
{...getHiddenDataAttributes(hidden)}
284293
>
285294
{children}
286-
</BaseComponent>
295+
</LeadingActionBaseComponent>
287296
)
288297
}
289298

299+
const BreadcrumbsBaseComponent = toggleSxComponent('div') as React.ComponentType<
300+
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
301+
>
290302
// This is reserved for only breadcrumbs.
291303
const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
292304
children,
293305
className,
294306
sx: sxProp = defaultSxProp,
295307
hidden = false,
296308
}) => {
297-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
298-
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
299-
>
300309
return (
301-
<BaseComponent
310+
<BreadcrumbsBaseComponent
302311
className={clsx(classes.Breadcrumbs, className)}
303312
data-component="PH_Breadcrumbs"
304313
sx={sxProp}
305314
{...getHiddenDataAttributes(hidden)}
306315
>
307316
{children}
308-
</BaseComponent>
317+
</BreadcrumbsBaseComponent>
309318
)
310319
}
311320

321+
const LeadingVisualBaseComponent = toggleSxComponent('div') as React.ComponentType<
322+
React.PropsWithChildren<
323+
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
324+
>
325+
>
312326
// PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
313327
const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
314328
children,
@@ -320,21 +334,16 @@ const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
320334
// @ts-ignore sx has height attribute
321335
const {height} = sxProp
322336
if (height) style['--custom-height'] = height
323-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
324-
React.PropsWithChildren<
325-
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
326-
>
327-
>
328337
return (
329-
<BaseComponent
338+
<LeadingVisualBaseComponent
330339
className={clsx(classes.LeadingVisual, className)}
331340
data-component="PH_LeadingVisual"
332341
sx={sxProp}
333342
style={style}
334343
{...getHiddenDataAttributes(hidden)}
335344
>
336345
{children}
337-
</BaseComponent>
346+
</LeadingVisualBaseComponent>
338347
)
339348
}
340349

@@ -371,6 +380,11 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
371380
)
372381
}
373382

383+
const TrailingVisualBaseComponent = toggleSxComponent('div') as React.ComponentType<
384+
React.PropsWithChildren<
385+
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
386+
>
387+
>
374388
// PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
375389
const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
376390
children,
@@ -382,24 +396,24 @@ const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
382396
// @ts-ignore sx has height attribute
383397
const {height} = sxProp
384398
if (height) style['--custom-height'] = height
385-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
386-
React.PropsWithChildren<
387-
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
388-
>
389-
>
390399
return (
391-
<BaseComponent
400+
<TrailingVisualBaseComponent
392401
className={clsx(classes.TrailingVisual, className)}
393402
data-component="PH_TrailingVisual"
394403
sx={sxProp}
395404
style={style}
396405
{...getHiddenDataAttributes(hidden)}
397406
>
398407
{children}
399-
</BaseComponent>
408+
</TrailingVisualBaseComponent>
400409
)
401410
}
402411

412+
const TrailingActionBaseComponent = toggleSxComponent('div') as React.ComponentType<
413+
React.PropsWithChildren<
414+
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
415+
>
416+
>
403417
const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
404418
children,
405419
className,
@@ -410,24 +424,24 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
410424
// @ts-ignore sx has height attribute
411425
const {height} = sxProp
412426
if (height) style['--custom-height'] = height
413-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
414-
React.PropsWithChildren<
415-
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
416-
>
417-
>
418427
return (
419-
<BaseComponent
428+
<TrailingActionBaseComponent
420429
className={clsx(classes.TrailingAction, className)}
421430
data-component="PH_TrailingAction"
422431
sx={sxProp}
423432
style={style}
424433
{...getHiddenDataAttributes(hidden)}
425434
>
426435
{children}
427-
</BaseComponent>
436+
</TrailingActionBaseComponent>
428437
)
429438
}
430439

440+
const ActionsBaseComponent = toggleSxComponent('div') as React.ComponentType<
441+
React.PropsWithChildren<
442+
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
443+
>
444+
>
431445
const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
432446
children,
433447
className,
@@ -438,38 +452,38 @@ const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
438452
// @ts-ignore sx has height attribute
439453
const {height} = sxProp
440454
if (height) style['--custom-height'] = height
441-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
442-
React.PropsWithChildren<
443-
ChildrenPropTypes & React.RefAttributes<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement>
444-
>
445-
>
446455
return (
447-
<BaseComponent
456+
<ActionsBaseComponent
448457
className={clsx(classes.Actions, className)}
449458
data-component="PH_Actions"
450459
sx={sxProp}
451460
style={style}
452461
{...getHiddenDataAttributes(hidden)}
453462
>
454463
{children}
455-
</BaseComponent>
464+
</ActionsBaseComponent>
456465
)
457466
}
458467

468+
const DescriptionBaseComponent = toggleSxComponent('div') as React.ComponentType<
469+
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
470+
>
471+
459472
// PageHeader.Description: The description area of the header. Visible on all viewports
460473
const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
461474
children,
462475
className,
463476
sx: sxProp = defaultSxProp,
464477
hidden = false,
465478
}) => {
466-
const BaseComponent = toggleSxComponent('div') as React.ComponentType<
467-
React.PropsWithChildren<ChildrenPropTypes & React.RefAttributes<HTMLDivElement>>
468-
>
469479
return (
470-
<BaseComponent className={clsx(classes.Description, className)} sx={sxProp} {...getHiddenDataAttributes(hidden)}>
480+
<DescriptionBaseComponent
481+
className={clsx(classes.Description, className)}
482+
sx={sxProp}
483+
{...getHiddenDataAttributes(hidden)}
484+
>
471485
{children}
472-
</BaseComponent>
486+
</DescriptionBaseComponent>
473487
)
474488
}
475489

@@ -479,6 +493,10 @@ export type NavigationProps = {
479493
'aria-labelledby'?: React.AriaAttributes['aria-labelledby']
480494
} & ChildrenPropTypes
481495

496+
const NavigationBaseComponent = toggleSxComponent('div') as React.ComponentType<
497+
React.PropsWithChildren<NavigationProps & React.RefAttributes<HTMLDivElement>>
498+
>
499+
482500
// PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
483501
const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
484502
children,
@@ -493,11 +511,10 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
493511
as === 'nav' && !ariaLabel && !ariaLabelledBy,
494512
'Use `aria-label` or `aria-labelledby` prop to provide an accessible label to the `nav` landmark for assistive technology',
495513
)
496-
const BaseComponent = toggleSxComponent(as || 'div') as React.ComponentType<
497-
React.PropsWithChildren<NavigationProps & React.RefAttributes<HTMLDivElement>>
498-
>
514+
499515
return (
500-
<BaseComponent
516+
<NavigationBaseComponent
517+
as={as}
501518
// Render `aria-label` and `aria-labelledby` only on `nav` elements
502519
aria-label={as === 'nav' ? ariaLabel : undefined}
503520
aria-labelledby={as === 'nav' ? ariaLabelledBy : undefined}
@@ -507,7 +524,7 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
507524
{...getHiddenDataAttributes(hidden)}
508525
>
509526
{children}
510-
</BaseComponent>
527+
</NavigationBaseComponent>
511528
)
512529
}
513530

0 commit comments

Comments
 (0)