diff --git a/src/date-input/index.tsx b/src/date-input/index.tsx index 376752bf20..2f02148fde 100644 --- a/src/date-input/index.tsx +++ b/src/date-input/index.tsx @@ -11,7 +11,9 @@ import InternalDateInput from './internal'; export { DateInputProps }; const DateInput = React.forwardRef((props: DateInputProps, ref: Ref) => { - const baseComponentProps = useBaseComponent('DateInput'); + const baseComponentProps = useBaseComponent('DateInput', { + props: { autoFocus: props.autoFocus, readOnly: props.readOnly }, + }); return ; }); diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx index d008f62588..28d7d914dd 100644 --- a/src/date-picker/index.tsx +++ b/src/date-picker/index.tsx @@ -60,7 +60,9 @@ const DatePicker = React.forwardRef( }: DatePickerProps, ref: Ref ) => { - const { __internalRootRef } = useBaseComponent('DatePicker'); + const { __internalRootRef } = useBaseComponent('DatePicker', { + props: { autoFocus, expandToViewport, granularity, readOnly }, + }); checkControlled('DatePicker', 'value', value, 'onChange', onChange); const contextLocale = useLocale(); diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx index 3108ce5725..7af1a7a238 100644 --- a/src/date-range-picker/index.tsx +++ b/src/date-range-picker/index.tsx @@ -133,7 +133,17 @@ const DateRangePicker = React.forwardRef( }: DateRangePickerProps, ref: Ref ) => { - const { __internalRootRef } = useBaseComponent('DateRangePicker'); + const { __internalRootRef } = useBaseComponent('DateRangePicker', { + props: { + absoluteFormat, + dateOnly, + expandToViewport, + rangeSelectorMode, + readOnly, + showClearButton, + timeInputFormat, + }, + }); checkControlled('DateRangePicker', 'value', value, 'onChange', onChange); const normalizedTimeOffset = normalizeTimeOffset(value, getTimeOffset, timeOffset); diff --git a/src/expandable-section/index.tsx b/src/expandable-section/index.tsx index b3497ddf56..ac350218a2 100644 --- a/src/expandable-section/index.tsx +++ b/src/expandable-section/index.tsx @@ -10,7 +10,13 @@ import useBaseComponent from '../internal/hooks/use-base-component'; export { ExpandableSectionProps }; export default function ExpandableSection({ variant = 'default', ...props }: ExpandableSectionProps) { - const baseComponentProps = useBaseComponent('ExpandableSection'); + const baseComponentProps = useBaseComponent('ExpandableSection', { + props: { + disableContentPaddings: props.disableContentPaddings, + headingTagOverride: props.headingTagOverride, + variant, + }, + }); return ; } diff --git a/src/file-upload/index.tsx b/src/file-upload/index.tsx index c6c98bb145..f4e98cebc1 100644 --- a/src/file-upload/index.tsx +++ b/src/file-upload/index.tsx @@ -15,7 +15,9 @@ const FileUpload = React.forwardRef( { multiple, showFileSize, showFileLastModified, showFileThumbnail, ...restProps }: FileUploadProps, ref: React.Ref ) => { - const baseComponentProps = useBaseComponent('FileUpload'); + const baseComponentProps = useBaseComponent('FileUpload', { + props: { multiple, showFileLastModified, showFileSize, showFileThumbnail, tokenLimit: restProps.tokenLimit }, + }); const externalProps = getExternalProps(restProps); return ( ; } diff --git a/src/form/index.tsx b/src/form/index.tsx index 754f980661..d9d539ba5e 100644 --- a/src/form/index.tsx +++ b/src/form/index.tsx @@ -34,7 +34,9 @@ const FormWithAnalytics = ({ variant = 'full-page', actions, ...props }: FormPro }; export default function Form({ variant = 'full-page', ...props }: FormProps) { - const baseComponentProps = useBaseComponent('Form'); + const baseComponentProps = useBaseComponent('Form', { + props: { variant }, + }); const inheritedFunnelNameSelector = useFunnelNameSelector(); const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`; diff --git a/src/grid/index.tsx b/src/grid/index.tsx index 6501d98adc..e16deb9ad0 100644 --- a/src/grid/index.tsx +++ b/src/grid/index.tsx @@ -11,7 +11,9 @@ import useBaseComponent from '../internal/hooks/use-base-component'; export { GridProps }; export default function Grid({ gridDefinition = [], disableGutters = false, children, ...restProps }: GridProps) { - const baseComponentProps = useBaseComponent('Grid'); + const baseComponentProps = useBaseComponent('Grid', { + props: { disableGutters }, + }); const baseProps = getBaseProps(restProps); const [breakpoint, ref] = useContainerBreakpoints(undefined); diff --git a/src/header/index.tsx b/src/header/index.tsx index 0da5c49f1c..533de50bf3 100644 --- a/src/header/index.tsx +++ b/src/header/index.tsx @@ -9,7 +9,9 @@ import useBaseComponent from '../internal/hooks/use-base-component'; export { HeaderProps }; export default function Header({ variant = 'h2', ...props }: HeaderProps) { - const baseComponentProps = useBaseComponent('Header'); + const baseComponentProps = useBaseComponent('Header', { + props: { headingTagOverride: props.headingTagOverride, variant }, + }); return ; } diff --git a/src/hotspot/index.tsx b/src/hotspot/index.tsx index 23bb98c0f4..073af8fd33 100644 --- a/src/hotspot/index.tsx +++ b/src/hotspot/index.tsx @@ -19,7 +19,7 @@ export default function Hotspot({ direction = 'top', ...restProps }: HotspotProps): JSX.Element { - const { __internalRootRef } = useBaseComponent('Hotspot'); + const { __internalRootRef } = useBaseComponent('Hotspot', { props: { direction, side } }); const baseProps = getBaseProps(restProps); const hotspotContext = useContext(hotspotContextType); diff --git a/src/icon/index.tsx b/src/icon/index.tsx index ecae4ab675..356cd5eea0 100644 --- a/src/icon/index.tsx +++ b/src/icon/index.tsx @@ -9,7 +9,7 @@ import { IconProps } from './interfaces'; export { IconProps }; export default function Icon({ size = 'normal', variant = 'normal', ...props }: IconProps) { - const baseComponentProps = useBaseComponent('Icon'); + const baseComponentProps = useBaseComponent('Icon', { props: { name: props.name, size, variant } }); return ; } diff --git a/src/input/index.tsx b/src/input/index.tsx index a6512e954e..01292c81db 100644 --- a/src/input/index.tsx +++ b/src/input/index.tsx @@ -42,7 +42,9 @@ const Input = React.forwardRef( }: InputProps, ref: Ref ) => { - const baseComponentProps = useBaseComponent('Input'); + const baseComponentProps = useBaseComponent('Input', { + props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type }, + }); const baseProps = getBaseProps(rest); const inputRef = useRef(null); diff --git a/src/link/index.tsx b/src/link/index.tsx index 61f884b38f..7b679e4873 100644 --- a/src/link/index.tsx +++ b/src/link/index.tsx @@ -10,7 +10,9 @@ export { LinkProps }; const Link = React.forwardRef( ({ fontSize = 'body-m', color = 'normal', external = false, ...props }: LinkProps, ref: React.Ref) => { - const baseComponentProps = useBaseComponent('Link'); + const baseComponentProps = useBaseComponent('Link', { + props: { color, external, fontSize, rel: props.rel, target: props.target, variant: props.variant }, + }); return ( ({ emphasizeBaselineAxis = true, ...props }: MixedLineBarChartProps) { - const baseComponentProps = useBaseComponent('MixedLineBarChart'); + const baseComponentProps = useBaseComponent('MixedLineBarChart', { + props: { + detailPopoverSize, + emphasizeBaselineAxis, + fitHeight: props.fitHeight, + hideFilter: props.hideFilter, + hideLegend: props.hideLegend, + horizontalBars, + stackedBars, + xScaleType, + yScaleType, + }, + }); return ( ; } diff --git a/src/multiselect/index.tsx b/src/multiselect/index.tsx index 2e2b369e5e..f6eea97bc5 100644 --- a/src/multiselect/index.tsx +++ b/src/multiselect/index.tsx @@ -21,7 +21,17 @@ const Multiselect = React.forwardRef( }: MultiselectProps, ref: React.Ref ) => { - const baseComponentProps = useBaseComponent('Multiselect'); + const baseComponentProps = useBaseComponent('Multiselect', { + props: { + autoFocus: restProps.autoFocus, + expandToViewport: restProps.expandToViewport, + filteringType, + hideTokens, + keepOpen, + tokenLimit: restProps.tokenLimit, + virtualScroll: restProps.virtualScroll, + }, + }); // Private API for inline tokens const inlineTokens = Boolean((restProps as any).inlineTokens); diff --git a/src/pagination/index.tsx b/src/pagination/index.tsx index fc8825fb29..994e9561b8 100644 --- a/src/pagination/index.tsx +++ b/src/pagination/index.tsx @@ -9,7 +9,7 @@ import InternalPagination from './internal'; export { PaginationProps }; export default function Pagination(props: PaginationProps) { - const baseComponentProps = useBaseComponent('Pagination'); + const baseComponentProps = useBaseComponent('Pagination', { props: { openEnd: props.openEnd } }); return ; } diff --git a/src/pie-chart/index.tsx b/src/pie-chart/index.tsx index 1e2ce81a11..9648fa4737 100644 --- a/src/pie-chart/index.tsx +++ b/src/pie-chart/index.tsx @@ -46,7 +46,18 @@ const PieChart = function PieChart) { - const { __internalRootRef = null } = useBaseComponent('PieChart'); + const { __internalRootRef = null } = useBaseComponent('PieChart', { + props: { + fitHeight, + variant, + size, + hideTitles, + hideDescriptions, + hideLegend, + hideFilter, + detailPopoverSize, + }, + }); const baseProps = getBaseProps(props); const containerRef = useRef(null); const [containerWidth, measureRef] = useContainerWidth(); diff --git a/src/popover/index.tsx b/src/popover/index.tsx index a2764af139..c249a084a9 100644 --- a/src/popover/index.tsx +++ b/src/popover/index.tsx @@ -27,7 +27,9 @@ export default function Popover({ } } - const baseComponentProps = useBaseComponent('Popover'); + const baseComponentProps = useBaseComponent('Popover', { + props: { dismissButton, fixedWidth, position, renderWithPortal, size, triggerType }, + }); const externalProps = getExternalProps(rest); return ( ) => { - const { __internalRootRef } = useBaseComponent('PropertyFilter'); + const { __internalRootRef } = useBaseComponent('PropertyFilter', { + props: { asyncProperties, disableFreeTextFiltering, expandToViewport, hideOperations, tokenLimit, virtualScroll }, + }); const [removedTokenIndex, setRemovedTokenIndex] = useState(null); const inputRef = useRef(null);