From a4c001217a2799b559c3fc2755653c034a348fdc Mon Sep 17 00:00:00 2001 From: Bryce Osterhaus Date: Thu, 16 Oct 2025 11:14:32 +0400 Subject: [PATCH 1/4] chore: update types packages for react --- package.json | 8 +++----- yarn.lock | 30 +++++++++++++++++------------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 7239e35212..5066b83a4e 100644 --- a/package.json +++ b/package.json @@ -63,10 +63,10 @@ "@types/d3": "^5.7.2", "@types/geojson": "^7946.0.7", "@types/jest": "^26.0.0", - "@types/react": "16.9.9", - "@types/react-dom": "16.9.9", + "@types/react": "18.3.26", + "@types/react-dom": "18.3.7", "@types/react-test-renderer": "^16.8.0", - "@types/react-transition-group": "^4.4.0", + "@types/react-transition-group": "^4.4.12", "@types/storybook__addon-a11y": "5.1.2", "@types/storybook__addon-knobs": "^5.2.1", "@types/storybook__react": "^5.2.1", @@ -120,8 +120,6 @@ }, "resolutions": { "@pmmmwh/react-refresh-webpack-plugin": "0.5.1", - "@types/react": "16.9.9", - "@types/react-dom": "16.9.9", "js-beautify": "1.7.5", "event-stream": "3.3.4", "graceful-fs": "^4.2.4" diff --git a/yarn.lock b/yarn.lock index 020593ab33..e852d256f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4222,12 +4222,10 @@ resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== -"@types/react-dom@16.9.9": - version "16.9.9" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.9.tgz#d2d0a6f720a0206369ccbefff752ba37b9583136" - integrity sha512-jE16FNWO3Logq/Lf+yvEAjKzhpST/Eac8EMd1i4dgZdMczfgqC8EjpxwNgEe3SExHYLliabXDh9DEhhqnlXJhg== - dependencies: - "@types/react" "*" +"@types/react-dom@18.3.7": + version "18.3.7" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.7.tgz#b89ddf2cd83b4feafcc4e2ea41afdfb95a0d194f" + integrity sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ== "@types/react-test-renderer@^16.8.0": version "16.9.5" @@ -4236,14 +4234,12 @@ dependencies: "@types/react" "^16" -"@types/react-transition-group@^4.4.0": - version "4.4.4" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" - integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== - dependencies: - "@types/react" "*" +"@types/react-transition-group@^4.4.12": + version "4.4.12" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044" + integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w== -"@types/react@*", "@types/react@16.9.9", "@types/react@^16": +"@types/react@*", "@types/react@^16": version "16.9.9" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.9.tgz#a62c6f40f04bc7681be5e20975503a64fe783c3a" integrity sha512-L+AudFJkDukk+ukInYvpoAPyJK5q1GanFOINOJnM0w6tUgITuWvJ4jyoBPFL7z4/L8hGLd+K/6xR5uUjXu0vVg== @@ -4251,6 +4247,14 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/react@18.3.26": + version "18.3.26" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.26.tgz#4c5970878d30db3d2a0bca1e4eb5f258e391bbeb" + integrity sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + "@types/recharts@^1.8.23": version "1.8.23" resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.23.tgz#eeb6c52c6b2b916e9383bd5cf8fb5fd941c9c6fe" From 8241fc4bc762657109d366fdad4e132972faa400 Mon Sep 17 00:00:00 2001 From: Bryce Osterhaus Date: Thu, 16 Oct 2025 11:16:15 +0400 Subject: [PATCH 2/4] chore: fix failing types --- .../src/LegacyAutocomplete.tsx | 10 ++-- packages/clay-button/src/Button.tsx | 22 +++------ packages/clay-button/src/ButtonWithIcon.tsx | 21 ++------ packages/clay-charts/src/Predictive.tsx | 2 +- .../src/collection/useCollection.tsx | 46 +++++++++-------- packages/clay-core/src/nav/Nav.tsx | 20 +++----- .../src/overlay-mask/OverlayMask.tsx | 13 ++--- packages/clay-core/src/picker/Option.tsx | 2 +- packages/clay-core/src/picker/Picker.tsx | 2 +- .../src/side-panel/SidePanelWithDrilldown.tsx | 2 +- packages/clay-core/src/table/Body.tsx | 6 ++- packages/clay-core/src/table/Head.tsx | 6 ++- packages/clay-core/src/table/Row.tsx | 3 +- packages/clay-core/src/tree-view/TreeView.tsx | 49 ++++++++++--------- .../clay-core/src/tree-view/TreeViewItem.tsx | 18 ++++++- .../src/vertical-nav/VerticalNav.tsx | 6 ++- packages/clay-form/src/Input.tsx | 29 ++++------- packages/clay-label/src/index.tsx | 26 ++++------ packages/clay-list/src/QuickActionMenu.tsx | 18 +++---- .../clay-multi-select/src/MultiSelect.tsx | 5 ++ .../clay-pagination-bar/src/PaginationBar.tsx | 23 +++------ packages/clay-pagination/src/Pagination.tsx | 20 +++----- .../src/PaginationWithBasicItems.tsx | 2 +- 23 files changed, 164 insertions(+), 187 deletions(-) diff --git a/packages/clay-autocomplete/src/LegacyAutocomplete.tsx b/packages/clay-autocomplete/src/LegacyAutocomplete.tsx index 274ebe51cd..95f2c87e4d 100644 --- a/packages/clay-autocomplete/src/LegacyAutocomplete.tsx +++ b/packages/clay-autocomplete/src/LegacyAutocomplete.tsx @@ -31,12 +31,12 @@ AutocompleteMarkup.displayName = 'ClayAutocompleteMarkup'; * Temporary helper function to determine which version of autocomplete * is being used. */ -const hasItems = (children?: React.ReactNode) => { - if (!children) { +const hasItems = (children?: React.ReactNode | Function) => { + if (!children || typeof children === 'function') { return []; } - return React.Children.map(children, (child) => { + const mappedChildren = React.Children.map(children, (child) => { if ( React.isValidElement(child) && // @ts-ignore @@ -46,7 +46,9 @@ const hasItems = (children?: React.ReactNode) => { } return false; - }).filter(Boolean); + }); + + return (mappedChildren || []).filter(Boolean); }; export interface IProps extends IAutocompleteProps { diff --git a/packages/clay-button/src/Button.tsx b/packages/clay-button/src/Button.tsx index 7b05ab478e..505bee8f0b 100644 --- a/packages/clay-button/src/Button.tsx +++ b/packages/clay-button/src/Button.tsx @@ -89,16 +89,7 @@ export interface IProps extends React.ButtonHTMLAttributes { translucent?: boolean; } -export interface IForwardRef - extends React.ForwardRefExoticComponent

> { - Group: typeof Group; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -const Button = forwardRef( +const ButtonComponent = React.forwardRef( ( { alert, @@ -117,8 +108,8 @@ const Button = forwardRef( translucent, type = 'button', ...otherProps - }: IProps, - ref: React.Ref + }, + ref ) => { const childArray = React.Children.toArray(children); @@ -174,7 +165,10 @@ const Button = forwardRef( } ); -Button.Group = Group; -Button.displayName = 'ClayButton'; +ButtonComponent.displayName = 'ClayButton'; + +const Button = Object.assign(ButtonComponent, { + Group, +}); export default Button; diff --git a/packages/clay-button/src/ButtonWithIcon.tsx b/packages/clay-button/src/ButtonWithIcon.tsx index 1a3b63717c..572c87c6cf 100644 --- a/packages/clay-button/src/ButtonWithIcon.tsx +++ b/packages/clay-button/src/ButtonWithIcon.tsx @@ -8,27 +8,14 @@ import React from 'react'; import ClayButton from './Button'; -type ButtonAria = - | { - /** - * Define a value that labels the button. - */ - 'aria-label': string; - 'aria-labelledby'?: never; - } - | { - /** - * Define a value that labels the button. - */ - 'aria-label'?: never; - 'aria-labelledby': string; - }; - interface ICommonProps extends Omit< React.ComponentProps, 'aria-label' | 'aria-labelledby' > { + 'aria-label'?: string; + + 'aria-labelledby'?: string; /** * Path to the location of the spritemap resource. */ @@ -40,7 +27,7 @@ interface ICommonProps symbol: string; } -export type Props = ICommonProps & ButtonAria; +export type Props = ICommonProps; const ClayButtonWithIcon = React.forwardRef( ({monospaced = true, spritemap, symbol, ...otherProps}: Props, ref) => ( diff --git a/packages/clay-charts/src/Predictive.tsx b/packages/clay-charts/src/Predictive.tsx index ba4c2e290e..7bfb677ffd 100644 --- a/packages/clay-charts/src/Predictive.tsx +++ b/packages/clay-charts/src/Predictive.tsx @@ -18,7 +18,7 @@ interface IProps { * Predictive Chart component. */ const PredictiveChart = React.forwardRef( - ({data, predictionDate, ...otherProps}: IProps, ref) => { + ({data, predictionDate, ...otherProps}, ref) => { let columns = data.columns; if (columns) { diff --git a/packages/clay-core/src/collection/useCollection.tsx b/packages/clay-core/src/collection/useCollection.tsx index 3e43316429..8434e653ed 100644 --- a/packages/clay-core/src/collection/useCollection.tsx +++ b/packages/clay-core/src/collection/useCollection.tsx @@ -5,6 +5,7 @@ import {useId} from '@clayui/shared'; import React, { + ReactNode, useCallback, useContext, useEffect, @@ -241,7 +242,7 @@ export function useCollection< registerItem(key, child, index); } - } else { + } else if (typeof children !== 'function') { React.Children.forEach(children, (child, index) => { if (!React.isValidElement(child)) { return; @@ -351,27 +352,30 @@ export function useCollection< }); } - return React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) { - return null; - } + return React.Children.map( + children as Iterable, + (child, index) => { + if (!React.isValidElement(child)) { + return null; + } - const key = getKey(index, child.key, parentKey); + const key = getKey(index, child.key, parentKey); - if ( - visibleKeys && - ((Array.isArray(visibleKeys) && - visibleKeys.length > 0 && - !visibleKeys.includes(index)) || - (visibleKeys instanceof Set && - visibleKeys.size > 0 && - !visibleKeys.has(key))) - ) { - return null; - } + if ( + visibleKeys && + ((Array.isArray(visibleKeys) && + visibleKeys.length > 0 && + !visibleKeys.includes(index)) || + (visibleKeys instanceof Set && + visibleKeys.size > 0 && + !visibleKeys.has(key))) + ) { + return null; + } - return performItemRender(child as ChildElement, key, index); - }); + return performItemRender(child as ChildElement, key, index); + } + ); }, [ performItemRender, @@ -391,7 +395,7 @@ export function useCollection< }, []); const getFirstItem = useCallback(() => { - const key = layout.current.keys().next().value; + const key = layout.current.keys().next().value!; return { key, @@ -443,7 +447,7 @@ export function useCollection< // - Data: We get the data of the item to consume later // - Rendering: We render each element in memory const rendered = useMemo(() => { - const list = performCollectionRender({children, items}); + const list = performCollectionRender({children, items})!; if (list.length === 0 && notFound) { return notFound; diff --git a/packages/clay-core/src/nav/Nav.tsx b/packages/clay-core/src/nav/Nav.tsx index c989ac9910..e531f2e29a 100644 --- a/packages/clay-core/src/nav/Nav.tsx +++ b/packages/clay-core/src/nav/Nav.tsx @@ -26,17 +26,7 @@ interface IProps extends React.HTMLAttributes { stacked?: boolean; } -interface IForwardRef - extends React.ForwardRefExoticComponent

> { - Item: typeof Item; - Link: typeof Link; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -export const Nav = forwardRef(function Nav( +const NavComponent = React.forwardRef(function Nav( {children, className, nestMargins, nested, stacked, ...otherProps}, ref ) { @@ -55,5 +45,9 @@ export const Nav = forwardRef(function Nav( ); }); -Nav.Item = Item; -Nav.Link = Link; +NavComponent.displayName = 'Nav'; + +export const Nav = Object.assign(NavComponent, { + Item, + Link, +}); diff --git a/packages/clay-core/src/overlay-mask/OverlayMask.tsx b/packages/clay-core/src/overlay-mask/OverlayMask.tsx index a2de50b174..9935d17273 100644 --- a/packages/clay-core/src/overlay-mask/OverlayMask.tsx +++ b/packages/clay-core/src/overlay-mask/OverlayMask.tsx @@ -154,7 +154,7 @@ type Props = { onBoundsChange?: InternalDispatch; }; -export function OverlayMask({ +export function OverlayMask({ defaultBounds = initialBounds, bounds, children, @@ -172,7 +172,7 @@ export function OverlayMask({ value: bounds, }); - const childrenRef = useRef(null); + const childrenRef = useRef(null); useIsomorphicLayoutEffect(() => { if (childrenRef.current) { @@ -181,13 +181,14 @@ export function OverlayMask({ return; } - const {height, width, x, y} = - childrenRef.current.getBoundingClientRect(); + const {height, width, x, y} = ( + childrenRef.current as HTMLElement + ).getBoundingClientRect(); setBounds({height, width, x, y}); }; - return observeRect(childrenRef.current, updater); + return observeRect(childrenRef.current as HTMLElement, updater); } }, [setBounds]); @@ -196,7 +197,7 @@ export function OverlayMask({ {children && typeof children !== 'function' && React.cloneElement(children as React.ReactElement, { - ref: (node: HTMLElement) => { + ref: (node: T) => { childrenRef.current = node; // @ts-ignore diff --git a/packages/clay-core/src/picker/Option.tsx b/packages/clay-core/src/picker/Option.tsx index 6c29fdad42..92a0b3aec4 100644 --- a/packages/clay-core/src/picker/Option.tsx +++ b/packages/clay-core/src/picker/Option.tsx @@ -112,7 +112,7 @@ export function Option({ {...otherProps} aria-describedby={ariaDescribedby} disabled={disabled} - value={keyValue} + value={keyValue ? String(keyValue) : undefined} > {typeof children === 'string' ? children : textValue} diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx index a55ddb1619..e496e50080 100644 --- a/packages/clay-core/src/picker/Picker.tsx +++ b/packages/clay-core/src/picker/Picker.tsx @@ -390,7 +390,7 @@ export function Picker | string | number>({ className )} onChange={(event) => setSelectedKey(event.target.value)} - value={selectedKey} + value={selectedKey ? String(selectedKey) : undefined} > collection={collection} /> diff --git a/packages/clay-core/src/side-panel/SidePanelWithDrilldown.tsx b/packages/clay-core/src/side-panel/SidePanelWithDrilldown.tsx index e80bfc54d0..2102490214 100644 --- a/packages/clay-core/src/side-panel/SidePanelWithDrilldown.tsx +++ b/packages/clay-core/src/side-panel/SidePanelWithDrilldown.tsx @@ -39,7 +39,7 @@ type Panel = { }; type Panels = { - [key: React.Key]: Panel; + [key: string | number | symbol]: Panel; }; export function SidePanelWithDrilldown({ diff --git a/packages/clay-core/src/table/Body.tsx b/packages/clay-core/src/table/Body.tsx index b594c607ee..33ab1bc656 100644 --- a/packages/clay-core/src/table/Body.tsx +++ b/packages/clay-core/src/table/Body.tsx @@ -11,7 +11,11 @@ import {createImmutableTree} from '../tree-view/useTree'; import {Scope, ScopeContext} from './ScopeContext'; import {BodyContext, useTable} from './context'; -interface IProps extends React.TableHTMLAttributes { +interface IProps + extends Omit< + React.TableHTMLAttributes, + 'children' + > { /** * Children content to render a dynamic or static content. */ diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx index 03d6a78db6..0819aa1583 100644 --- a/packages/clay-core/src/table/Head.tsx +++ b/packages/clay-core/src/table/Head.tsx @@ -39,7 +39,11 @@ const Header = React.forwardRef( const useIsomorphicEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; -interface IProps extends React.TableHTMLAttributes { +interface IProps + extends Omit< + React.TableHTMLAttributes, + 'children' + > { /** * Children content to render a dynamic or static content. */ diff --git a/packages/clay-core/src/table/Row.tsx b/packages/clay-core/src/table/Row.tsx index 47987b218b..3a831f51ff 100644 --- a/packages/clay-core/src/table/Row.tsx +++ b/packages/clay-core/src/table/Row.tsx @@ -13,7 +13,8 @@ import {useForwardRef} from '../hooks'; import {Cell} from './Cell'; import {RowContext, useBody, useTable} from './context'; -interface IProps extends React.HTMLAttributes { +interface IProps + extends Omit, 'children'> { /** * Children content to render a dynamic or static content. */ diff --git a/packages/clay-core/src/tree-view/TreeView.tsx b/packages/clay-core/src/tree-view/TreeView.tsx index 8087d21d6b..cb1b6cf09b 100644 --- a/packages/clay-core/src/tree-view/TreeView.tsx +++ b/packages/clay-core/src/tree-view/TreeView.tsx @@ -227,30 +227,33 @@ export function TreeView>({ role="tree" tabIndex={-1} > - - - - messages={messages} - nestedKey={nestedKey} - onItemHover={onItemHover} - onItemMove={onItemMove} - rootRef={rootRef} - > - + + + messages={messages} + nestedKey={nestedKey} + onItemHover={onItemHover} + onItemMove={onItemMove} + rootRef={rootRef} > - items={state.items}> - {children} - - - - - - + + items={state.items}> + {children} + + + + + + + } ); diff --git a/packages/clay-core/src/tree-view/TreeViewItem.tsx b/packages/clay-core/src/tree-view/TreeViewItem.tsx index fe6539233e..894fff23d9 100644 --- a/packages/clay-core/src/tree-view/TreeViewItem.tsx +++ b/packages/clay-core/src/tree-view/TreeViewItem.tsx @@ -865,6 +865,14 @@ export function ItemStack({ ItemStack.displayName = 'TreeViewItemStack'; +const isElement = (n: React.ReactNode): n is React.ReactElement => + React.isValidElement(n); + +const elementDisplayNameIs = (node: React.ReactElement, name: string) => + typeof node.type === 'function' || typeof node.type === 'object' + ? ((node.type as any).displayName as string) === name + : false; + type TreeViewItemActionsProps = { children: React.ReactElement; tabIndex: number; @@ -878,7 +886,11 @@ function Actions({children, tabIndex}: TreeViewItemActionsProps) { return ( <> {childrenArray.map((child, index) => { - if (child.type.displayName === 'ClayButton') { + if (!isElement(child)) { + return child; + } + + if (elementDisplayNameIs(child, 'ClayButton')) { return ( {React.cloneElement(child, { @@ -912,7 +924,9 @@ function Actions({children, tabIndex}: TreeViewItemActionsProps) { })} ); - } else if (child.type.displayName === 'ClayDropDownWithItems') { + } else if ( + elementDisplayNameIs(child, 'ClayDropDownWithItems') + ) { return ( {React.cloneElement(child, { diff --git a/packages/clay-core/src/vertical-nav/VerticalNav.tsx b/packages/clay-core/src/vertical-nav/VerticalNav.tsx index 67cc5775bd..a80e106111 100644 --- a/packages/clay-core/src/vertical-nav/VerticalNav.tsx +++ b/packages/clay-core/src/vertical-nav/VerticalNav.tsx @@ -254,7 +254,11 @@ function VerticalNav | string>({ ? null : undefined, ariaCurrent: ariaCurrent ? 'page' : null, - childrenRoot: childrenRootRef, + childrenRoot: + childrenRootRef as React.MutableRefObject | null>, close, expandedKeys, firstKey: collection.getFirstItem().key, diff --git a/packages/clay-form/src/Input.tsx b/packages/clay-form/src/Input.tsx index 0e0c672130..b4d7d773c1 100644 --- a/packages/clay-form/src/Input.tsx +++ b/packages/clay-form/src/Input.tsx @@ -177,19 +177,7 @@ interface IProps extends React.InputHTMLAttributes { sizing?: 'lg' | 'regular' | 'sm'; } -interface IForwardRef - extends React.ForwardRefExoticComponent

> { - Group: typeof Group; - GroupInsetItem: typeof GroupInsetItem; - GroupItem: typeof GroupItem; - GroupText: typeof GroupText; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -export const Input = forwardRef( +const InputComponent = React.forwardRef( ( { className, @@ -199,7 +187,7 @@ export const Input = forwardRef( sizing = 'regular', type = 'text', ...otherProps - }: IProps, + }, ref ) => ( ( ) ); -Input.displayName = 'ClayInput'; -Input.Group = Group; -Input.GroupInsetItem = GroupInsetItem; -Input.GroupItem = GroupItem; -Input.GroupText = GroupText; +InputComponent.displayName = 'ClayInput'; + +export const Input = Object.assign(InputComponent, { + Group, + GroupInsetItem, + GroupItem, + GroupText, +}); export default Input; diff --git a/packages/clay-label/src/index.tsx b/packages/clay-label/src/index.tsx index 9e7c142e40..ae3168eb04 100644 --- a/packages/clay-label/src/index.tsx +++ b/packages/clay-label/src/index.tsx @@ -135,18 +135,10 @@ interface IProps extends IBaseProps { withClose?: boolean; } -interface IForwardRef - extends React.ForwardRefExoticComponent

> { - ItemAfter: typeof ItemAfter; - ItemBefore: typeof ItemBefore; - ItemExpand: typeof ItemExpand; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -const Label = forwardRef( +const LabelComponent = React.forwardRef< + HTMLAnchorElement | HTMLSpanElement, + IProps +>( ( { children, @@ -197,10 +189,12 @@ const Label = forwardRef( } ); -Label.displayName = 'ClayLabel'; +LabelComponent.displayName = 'ClayLabel'; -Label.ItemAfter = ItemAfter; -Label.ItemBefore = ItemBefore; -Label.ItemExpand = ItemExpand; +const Label = Object.assign(LabelComponent, { + ItemAfter, + ItemBefore, + ItemExpand, +}); export default Label; diff --git a/packages/clay-list/src/QuickActionMenu.tsx b/packages/clay-list/src/QuickActionMenu.tsx index 3128746201..3df69baac0 100644 --- a/packages/clay-list/src/QuickActionMenu.tsx +++ b/packages/clay-list/src/QuickActionMenu.tsx @@ -8,16 +8,7 @@ import React from 'react'; import QuickActionMenuItem from './QuickActionMenuItem'; -export interface IForwardRef - extends React.ForwardRefExoticComponent

> { - Item: typeof QuickActionMenuItem; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -const QuickActionMenu = forwardRef< +const QuickActionMenuComponent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({children, className, ...otherProps}, ref) => { @@ -32,7 +23,10 @@ const QuickActionMenu = forwardRef< ); }); -QuickActionMenu.displayName = 'ClayListQuickActionMenu'; -QuickActionMenu.Item = QuickActionMenuItem; +QuickActionMenuComponent.displayName = 'ClayListQuickActionMenu'; + +const QuickActionMenu = Object.assign(QuickActionMenuComponent, { + Item: QuickActionMenuItem, +}); export default QuickActionMenu; diff --git a/packages/clay-multi-select/src/MultiSelect.tsx b/packages/clay-multi-select/src/MultiSelect.tsx index 48aa369540..a955fd5edf 100644 --- a/packages/clay-multi-select/src/MultiSelect.tsx +++ b/packages/clay-multi-select/src/MultiSelect.tsx @@ -214,6 +214,11 @@ export interface IProps = Item> */ onLoadMore?: () => Promise | null; + /** + * Placeholder text for autocomplete input + */ + placeholder?: string; + /** * Determines the size of the Multi Select component. */ diff --git a/packages/clay-pagination-bar/src/PaginationBar.tsx b/packages/clay-pagination-bar/src/PaginationBar.tsx index 3291d552d0..5aca617640 100644 --- a/packages/clay-pagination-bar/src/PaginationBar.tsx +++ b/packages/clay-pagination-bar/src/PaginationBar.tsx @@ -16,20 +16,7 @@ interface IProps extends React.HTMLAttributes { size?: 'sm' | 'lg'; } -interface IForwardRef - extends React.ForwardRefExoticComponent

> { - /** - * @deprecated since v3.84.0 - use `Picker` component instead. - */ - DropDown: typeof DropDown; - Results: typeof Results; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -export const PaginationBar = forwardRef( +const PaginationBarComponent = React.forwardRef( ({children, className, size, ...otherProps}: IProps, ref) => { return (

( } ); -PaginationBar.DropDown = DropDown; -PaginationBar.Results = Results; +PaginationBarComponent.displayName = 'ClayPaginationBar'; -PaginationBar.displayName = 'ClayPaginationBar'; +export const PaginationBar = Object.assign(PaginationBarComponent, { + DropDown, + Results, +}); diff --git a/packages/clay-pagination/src/Pagination.tsx b/packages/clay-pagination/src/Pagination.tsx index 1f5ec23122..7c615ad484 100644 --- a/packages/clay-pagination/src/Pagination.tsx +++ b/packages/clay-pagination/src/Pagination.tsx @@ -17,17 +17,7 @@ interface IProps extends React.HTMLAttributes { size?: 'lg' | 'sm'; } -interface IForwardRef - extends React.ForwardRefExoticComponent

> { - Ellipsis: typeof Ellipsis; - Item: typeof Item; -} - -function forwardRef(component: React.RefForwardingComponent) { - return React.forwardRef(component) as IForwardRef; -} - -export const Pagination = forwardRef( +const PaginationComponent = React.forwardRef( ({children, className, size, ...otherProps}: IProps, ref) => { return (