fix(nhsuk-frontend-react): update DateInputPart type

rowellx68 · Sep 30, 2024 · f4ab50a · f4ab50a
1 parent 4b5f018
commit f4ab50a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/dry-birds-visit.md b/.changeset/dry-birds-visit.md
@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+fix(nhsuk-frontend-react): update DateInputPart type
diff --git a/packages/nhsuk-frontend-react/src/components/form-elements/date-input/DateInput.tsx b/packages/nhsuk-frontend-react/src/components/form-elements/date-input/DateInput.tsx
@@ -139,13 +139,11 @@ const datePartLabels: Record<DatePart, string> = {
 export type DateInputPartProps = {
   label?: string;
   labelProps?: LabelProps;
+  itemProps?: ElementProps<'div'>;
   error?: boolean;
   part: DatePart;
-  name?: string;
   width?: InputWidth;
-  value?: string;
-  disabled?: boolean;
-} & ElementProps<'div', 'value' | 'defaultValue' | 'type' | 'ref'>;
+} & ElementProps<'input', 'defaultValue' | 'type'>;
 
 type DateInputPartFactory = Factory<{
   props: DateInputPartProps;
@@ -166,6 +164,7 @@ const BaseDatePart = factory<DateInputPartFactory>(
       value,
       disabled,
       onChange,
+      itemProps = {},
       ...props
     },
     ref,
@@ -189,6 +188,8 @@ const BaseDatePart = factory<DateInputPartFactory>(
     }, []);
 
     const { className: labelClassName, ...restLabelProps } = labelProps;
+    const { className: wrapperClassName, ...restWrapperProps } = itemProps;
+
     const _label = label || datePartLabels[part];
 
     const inputId = id || `${ctxId}-${part}`;
@@ -206,7 +207,10 @@ const BaseDatePart = factory<DateInputPartFactory>(
       error || (errorMap && errorMap[part]) || (ctxError && !errorMap);
 
     return (
-      <div className={clsx('nhsuk-date-input__item')} {...props}>
+      <div
+        className={clsx('nhsuk-date-input__item', wrapperClassName)}
+        {...restWrapperProps}
+      >
         <Input
           labelProps={{
             className: clsx('nhsuk-date-input__label', labelClassName),
@@ -228,6 +232,7 @@ const BaseDatePart = factory<DateInputPartFactory>(
           type="text"
           inputMode="numeric"
           pattern="[0-9]*"
+          {...props}
           onChange={handleChange}
           disabled={disabled || ctxDisabled}
           ref={ref}