chore: Add props reporting for D-P components

src/date-input/index.tsx

@@ -11,7 +11,9 @@ import InternalDateInput from './internal';
 export { DateInputProps };
 
 const DateInput = React.forwardRef((props: DateInputProps, ref: Ref<HTMLInputElement>) => {
-  const baseComponentProps = useBaseComponent('DateInput');
+  const baseComponentProps = useBaseComponent('DateInput', {
+    props: { autoFocus: props.autoFocus, readOnly: props.readOnly },
+  });
   return <InternalDateInput {...props} {...baseComponentProps} ref={ref} />;
 });
 

src/date-picker/index.tsx

@@ -60,7 +60,9 @@ const DatePicker = React.forwardRef(
     }: DatePickerProps,
     ref: Ref<DatePickerProps.Ref>
   ) => {
-    const { __internalRootRef } = useBaseComponent('DatePicker');
+    const { __internalRootRef } = useBaseComponent('DatePicker', {
+      props: { autoFocus, expandToViewport, granularity, readOnly },
+    });
     checkControlled('DatePicker', 'value', value, 'onChange', onChange);
 
     const contextLocale = useLocale();

src/date-range-picker/index.tsx

@@ -133,7 +133,17 @@ const DateRangePicker = React.forwardRef(
     }: DateRangePickerProps,
     ref: Ref<DateRangePickerProps.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);

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 <InternalExpandableSection variant={variant} {...props} {...baseComponentProps} />;
 }

src/file-upload/index.tsx

@@ -15,7 +15,9 @@ const FileUpload = React.forwardRef(
     { multiple, showFileSize, showFileLastModified, showFileThumbnail, ...restProps }: FileUploadProps,
     ref: React.Ref<FileUploadProps.Ref>
   ) => {
-    const baseComponentProps = useBaseComponent('FileUpload');
+    const baseComponentProps = useBaseComponent('FileUpload', {
+      props: { multiple, showFileLastModified, showFileSize, showFileThumbnail, tokenLimit: restProps.tokenLimit },
+    });
     const externalProps = getExternalProps(restProps);
     return (
       <InternalFileUpload

src/form-field/index.tsx

@@ -9,7 +9,7 @@ import { FormFieldProps } from './interfaces';
 export { FormFieldProps };
 
 export default function FormField({ stretch = false, ...props }: FormFieldProps) {
-  const baseComponentProps = useBaseComponent('FormField');
+  const baseComponentProps = useBaseComponent('FormField', { props: { stretch } });
   return <InternalFormField stretch={stretch} {...props} __hideLabel={false} {...baseComponentProps} />;
 }
 

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']}`;
 

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);
 

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 <InternalHeader variant={variant} {...props} {...baseComponentProps} />;
 }
 

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);

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 <InternalIcon size={size} variant={variant} {...props} {...baseComponentProps} />;
 }
 

src/input/index.tsx

@@ -42,7 +42,9 @@ const Input = React.forwardRef(
     }: InputProps,
     ref: Ref<InputProps.Ref>
   ) => {
-    const baseComponentProps = useBaseComponent('Input');
+    const baseComponentProps = useBaseComponent('Input', {
+      props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },
+    });
     const baseProps = getBaseProps(rest);
 
     const inputRef = useRef<HTMLInputElement>(null);

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<LinkProps.Ref>) => {
-    const baseComponentProps = useBaseComponent('Link');
+    const baseComponentProps = useBaseComponent('Link', {
+      props: { color, external, fontSize, rel: props.rel, target: props.target, variant: props.variant },
+    });
     return (
       <InternalLink
         fontSize={fontSize}

src/mixed-line-bar-chart/index.tsx

@@ -22,7 +22,19 @@ function MixedLineBarChart<T extends number | string | Date>({
   emphasizeBaselineAxis = true,
   ...props
 }: MixedLineBarChartProps<T>) {
-  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 (
     <InternalMixedLineBarChart
       series={series}

src/modal/index.tsx

@@ -9,7 +9,9 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 export { ModalProps };
 
 export default function Modal({ size = 'medium', ...props }: ModalProps) {
-  const baseComponentProps = useBaseComponent('Modal');
+  const baseComponentProps = useBaseComponent('Modal', {
+    props: { size, disableContentPaddings: props.disableContentPaddings },
+  });
   return <InternalModal size={size} {...props} {...baseComponentProps} />;
 }
 

src/multiselect/index.tsx

@@ -21,7 +21,17 @@ const Multiselect = React.forwardRef(
     }: MultiselectProps,
     ref: React.Ref<MultiselectProps.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);

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 <InternalPagination {...props} {...baseComponentProps} />;
 }
 

src/pie-chart/index.tsx

@@ -46,7 +46,18 @@ const PieChart = function PieChart<T extends PieChartProps.Datum = PieChartProps
   detailPopoverSize = 'medium',
   ...props
 }: PieChartProps<T>) {
-  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<HTMLDivElement>(null);
   const [containerWidth, measureRef] = useContainerWidth();

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 (
     <InternalPopover

src/progress-bar/index.tsx

@@ -34,7 +34,9 @@ export default function ProgressBar({
   onResultButtonClick,
   ...rest
 }: ProgressBarProps) {
-  const { __internalRootRef } = useBaseComponent('ProgressBar');
+  const { __internalRootRef } = useBaseComponent('ProgressBar', {
+    props: { variant },
+  });
   const baseProps = getBaseProps(rest);
   const generatedName = useUniqueId('awsui-progress-bar-');
 

src/property-filter/index.tsx

@@ -98,7 +98,9 @@ const PropertyFilter = React.forwardRef(
     }: PropertyFilterProps,
     ref: React.Ref<Ref>
   ) => {
-    const { __internalRootRef } = useBaseComponent('PropertyFilter');
+    const { __internalRootRef } = useBaseComponent('PropertyFilter', {
+      props: { asyncProperties, disableFreeTextFiltering, expandToViewport, hideOperations, tokenLimit, virtualScroll },
+    });
     const [removedTokenIndex, setRemovedTokenIndex] = useState<null | number>(null);
 
     const inputRef = useRef<AutosuggestInputRef>(null);