@carbon/react 1.97.0 → 1.98.0

package/es/components/Select/Select.js

@@ -14,12 +14,12 @@ import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { useId } from '../../internal/useId.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 
 const Select = /*#__PURE__*/React.forwardRef(({
   className,
@@ -49,7 +49,6 @@ const Select = /*#__PURE__*/React.forwardRef(({
     isFluid
   } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
-  const selectInstanceId = useId();
   // Convert children to an array of valid elements once using type narrowing
   const validChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 
@@ -61,55 +60,50 @@ const Select = /*#__PURE__*/React.forwardRef(({
   // otherwise, fallback to the first option's text
   const initialTitle = other?.title || selectedOption?.props?.text || validChildren[0]?.props?.text || '';
   const [title, setTitle] = useState(initialTitle);
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   const selectClasses = cx({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
     [`${prefix}--select--light`]: light,
-    [`${prefix}--select--invalid`]: invalid,
-    [`${prefix}--select--disabled`]: disabled,
+    [`${prefix}--select--invalid`]: normalizedProps.invalid,
+    [`${prefix}--select--disabled`]: normalizedProps.disabled,
     [`${prefix}--select--readonly`]: readOnly,
-    [`${prefix}--select--warning`]: warn,
-    [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--select--warning`]: normalizedProps.warn,
+    [`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--select--slug`]: slug,
     [`${prefix}--select--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled
+    [`${prefix}--label--disabled`]: normalizedProps.disabled
   });
   const inputClasses = cx({
     [`${prefix}--select-input`]: true,
     [`${prefix}--select-input--${size}`]: size
   });
-  const errorId = `${id}-error-msg`;
-  const errorText = (() => {
-    if (invalid) {
-      return invalidText;
-    }
-    if (warn) {
-      return warnText;
-    }
-  })();
-  const error = invalid || warn ? /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`,
-    id: errorId
-  }, errorText) : null;
+  const error = normalizedProps.validation;
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
-  const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
-    id: helperId,
+    id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
   const ariaProps = {};
-  if (invalid) {
-    ariaProps['aria-describedby'] = errorId;
+  if (normalizedProps.invalid) {
+    ariaProps['aria-describedby'] = normalizedProps.invalidId;
   } else if (!inline && !isFluid) {
-    ariaProps['aria-describedby'] = helper ? helperId : undefined;
+    ariaProps['aria-describedby'] = helper ? normalizedProps.helperId : undefined;
   }
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
@@ -146,8 +140,8 @@ const Select = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _extends({}, other, ariaProps, {
       id: id,
       className: inputClasses,
-      disabled: disabled || undefined,
-      "aria-invalid": invalid || undefined,
+      disabled: normalizedProps.disabled || undefined,
+      "aria-invalid": normalizedProps.invalid || undefined,
       "aria-readonly": readOnly || undefined,
       title: title,
       onChange: composeEventHandlers([onChange, handleChange])
@@ -155,9 +149,9 @@ const Select = /*#__PURE__*/React.forwardRef(({
       ref: ref
     }), children), /*#__PURE__*/React.createElement(ChevronDown, {
       className: `${prefix}--select__arrow`
-    }), invalid && /*#__PURE__*/React.createElement(WarningFilled, {
+    }), normalizedProps.invalid && /*#__PURE__*/React.createElement(WarningFilled, {
       className: `${prefix}--select__invalid-icon`
-    }), !invalid && warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
+    }), !normalizedProps.invalid && normalizedProps.warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
       className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
     }));
   })();
@@ -173,10 +167,10 @@ const Select = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--select-input--inline__wrapper`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null
+    "data-invalid": normalizedProps.invalid || null
   }, input), error), !inline && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null,
+    "data-invalid": normalizedProps.invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
   }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {

package/es/components/Toggletip/index.d.ts

@@ -111,3 +111,4 @@ export declare namespace ToggletipActions {
         className: PropTypes.Requireable<string>;
     };
 }
+export default Toggletip;

package/es/components/Toggletip/index.js

@@ -282,4 +282,4 @@ ToggletipActions.propTypes = {
   className: PropTypes.string
 };
 
-export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Toggletip as default };

package/es/components/Tooltip/index.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { DefinitionTooltip } from './DefinitionTooltip';
+import { DefinitionTooltip, type DefinitionTooltipProps } from './DefinitionTooltip';
 import { Tooltip, type TooltipProps } from './Tooltip';
-export { DefinitionTooltip, Tooltip, type TooltipProps };
+export { DefinitionTooltip, Tooltip, type DefinitionTooltipProps, type TooltipProps, };
+export default Tooltip;

package/es/internal/FloatingMenu.js

@@ -8,7 +8,6 @@
 import React, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
 import * as FeatureFlags from '@carbon/feature-flags';
 import ReactDOM from 'react-dom';
-import window from 'window-or-global';
 import { Tab } from './keyboard/keys.js';
 import { match } from './keyboard/match.js';
 import { selectorTabbable, selectorFocusable } from './keyboard/navigation.js';
@@ -109,14 +108,16 @@ const FloatingMenu = ({
     const menuSize = menuBody.getBoundingClientRect();
     const refPosition = triggerEl ? triggerEl.getBoundingClientRect() : undefined;
     const offsetValue = typeof menuOffset === 'function' ? menuOffset(menuBody, menuDirection, triggerEl, flipped) : menuOffset;
+    const scrollX = globalThis.scrollX ?? 0;
+    const scrollY = globalThis.scrollY ?? 0;
     if (updateOrientation) {
       updateOrientation({
         menuSize,
         refPosition,
         direction: menuDirection,
         offset: offsetValue,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position
@@ -136,8 +137,8 @@ const FloatingMenu = ({
         },
         offset: offsetValue,
         direction: menuDirection,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position

package/es/internal/OptimizedResize.js

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import window from 'window-or-global';
-
-// mdn resize function
+// Use `globalThis` for universal access to global object (browser, workers, Node).
+const win = globalThis;
 
 /**
  * A callback function to be executed on `resize`.
@@ -25,7 +24,7 @@ const OptimizedResize = (() => {
   const handleResize = () => {
     if (!running) {
       running = true;
-      window.requestAnimationFrame(runCallbacks);
+      win.requestAnimationFrame(runCallbacks);
     }
   };
   const addCallback = callback => {
@@ -38,7 +37,7 @@ const OptimizedResize = (() => {
     /** Adds a callback function to be executed on window `resize`. */
     add: callback => {
       if (!callbacks.length) {
-        window.addEventListener('resize', handleResize);
+        win.addEventListener('resize', handleResize);
       }
       addCallback(callback);
       return {

package/es/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/lib/components/ButtonSet/ButtonSet.d.ts

@@ -6,6 +6,11 @@
  */
 import React from 'react';
 export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * fluid: button set resize to the size of the container up to a maximum dependant on the
+     * number of buttons. Overrides `stacked` property.
+     */
+    fluid?: boolean;
     /**
      * Specify the button arrangement of the set (vertically stacked or
      * horizontal)

package/lib/components/ButtonSet/ButtonSet.js

@@ -14,22 +14,81 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
+const buttonOrder = kind => ({
+  ghost: 1,
+  'danger--ghost': 2,
+  tertiary: 3,
+  danger: 5,
+  primary: 6
+})[kind] ?? 4;
+const getButtonKind = element => {
+  if (/*#__PURE__*/React.isValidElement(element) && element.props && typeof element.props === 'object') {
+    const props = element.props;
+    return props.kind ?? 'primary';
+  }
+  return 'primary';
+};
 const ButtonSet = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     className,
+    fluid,
     stacked,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
+  const fluidInnerRef = React.useRef(null);
+  const [isStacked, setIsStacked] = React.useState(false);
+  const [sortedChildren, setSortedChildren] = React.useState(React.Children.toArray(children));
+
+  /**
+   * Used to determine if the buttons are currently stacked
+   */
+  useIsomorphicEffect.default(() => {
+    const checkStacking = () => {
+      let newIsStacked = stacked || false;
+      if (fluidInnerRef && fluidInnerRef.current) {
+        const computedStyle = window.getComputedStyle(fluidInnerRef.current);
+        newIsStacked = computedStyle?.getPropertyValue?.('--flex-direction') === 'column';
+      }
+      return newIsStacked;
+    };
+
+    /* initial value not dependant on observer */
+    setIsStacked(checkStacking());
+    if (!fluidInnerRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      setIsStacked(checkStacking());
+    });
+    resizeObserver.observe(fluidInnerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [isStacked, stacked]);
+  React.useEffect(() => {
+    const newSortedChildren = React.Children.toArray(children);
+    newSortedChildren.sort((a, b) => {
+      return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
+    });
+    setSortedChildren(newSortedChildren);
+
+    // adding sortedChildren to deps causes an infinite loop
+  }, [children, isStacked]);
   const buttonSetClasses = cx(className, `${prefix}--btn-set`, {
-    [`${prefix}--btn-set--stacked`]: stacked
+    [`${prefix}--btn-set--stacked`]: isStacked,
+    [`${prefix}--btn-set--fluid`]: fluid
   });
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: buttonSetClasses,
     ref: ref
-  }), children);
+  }), fluid ? /*#__PURE__*/React.createElement("div", {
+    ref: fluidInnerRef,
+    className: cx(`${prefix}--btn-set__fluid-inner`, {
+      [`${prefix}--btn-set__fluid-inner--auto-stack`]: true
+    })
+  }, sortedChildren) : children);
 });
 ButtonSet.displayName = 'ButtonSet';
 ButtonSet.propTypes = {
@@ -41,9 +100,14 @@ ButtonSet.propTypes = {
    * Specify an optional className to be added to your ButtonSet
    */
   className: PropTypes.string,
+  /**
+   * fluid: button set resize to the size of the container up to a maximum dependant on the
+   * number of buttons.
+   */
+  fluid: PropTypes.bool,
   /**
    * Specify the button arrangement of the set (vertically stacked or
-   * horizontal)
+   * horizontal) - ignored when fluid is true
    */
   stacked: PropTypes.bool
 };

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/lib/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/DataTable/DataTable.d.ts

@@ -282,11 +282,12 @@ export declare const DataTable: {
     };
     TableCell: React.ForwardRefExoticComponent<import("./TableCell").TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
     TableContainer: {
-        ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
+        ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             aiEnabled: PropTypes.Requireable<boolean>;
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;
+            decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             stickyHeader: PropTypes.Requireable<boolean>;
             title: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/DataTable/TableContainer.d.ts

@@ -5,12 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type HTMLAttributes } from 'react';
+import React, { ReactNode, type HTMLAttributes } from 'react';
 export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * Specify if the entire table has AI generated contents
      */
     aiEnabled?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+     */
+    decorator?: ReactNode;
     /**
      * Optional description text for the Table
      */
@@ -29,7 +33,7 @@ export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>
     title?: React.ReactNode;
 }
 declare const TableContainer: {
-    ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+    ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify if the entire table has AI generated contents
@@ -37,6 +41,10 @@ declare const TableContainer: {
         aiEnabled: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Optional description text for the Table
          */

package/lib/components/DataTable/TableContainer.js

@@ -22,6 +22,7 @@ const TableContainer = ({
   aiEnabled,
   className,
   children,
+  decorator,
   title,
   description,
   stickyHeader,
@@ -47,15 +48,22 @@ const TableContainer = ({
     value: value
   }, /*#__PURE__*/React.createElement(index.Section, _rollupPluginBabelHelpers.extends({}, rest, {
     className: tableContainerClasses
-  }), (title || description) && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-header`
+  }), (title || description || decorator) && /*#__PURE__*/React.createElement("div", {
+    className: cx(`${prefix}--data-table-header`, {
+      [`${prefix}--data-table-header__with-decorator`]: decorator,
+      [`${prefix}--data-table-header__with-decorator--standalone`]: decorator && !title && !description
+    })
+  }, (title || description) && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--data-table-header__content`
   }, title && /*#__PURE__*/React.createElement(index.Heading, {
     className: `${prefix}--data-table-header__title`,
     id: titleId
   }, title), description && /*#__PURE__*/React.createElement("p", {
     className: `${prefix}--data-table-header__description`,
     id: descriptionId
-  }, description)), children));
+  }, description)), decorator && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--data-table-header__decorator`
+  }, decorator)), children));
 };
 TableContainer.propTypes = {
   /**
@@ -64,6 +72,10 @@ TableContainer.propTypes = {
   aiEnabled: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optional description text for the Table
    */

package/lib/components/DataTable/state/sorting.d.ts

@@ -43,8 +43,7 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -55,6 +54,5 @@ props: Props, state: State<ColTypes>, { key }: {
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/lib/components/DatePicker/DatePicker.d.ts

@@ -7,6 +7,7 @@
 import React, { ReactNode } from 'react';
 import flatpickr from 'flatpickr';
 import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
+import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {
     /**
@@ -69,7 +70,7 @@ export interface DatePickerProps {
     /**
      *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
      */
-    locale?: string | any | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'ga' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'km' | 'ko' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'uz' | 'uz_latn' | 'vn' | 'zh_tw' | 'zh' | undefined;
+    locale?: string | any | SupportedLocale | undefined;
     /**
      * The maximum date that a user can pick to.
      */
@@ -99,7 +100,7 @@ export interface DatePickerProps {
      * if boolean applies to all inputs
      * if array applies to each input in order
      */
-    readOnly?: boolean | [] | any | undefined;
+    readOnly?: boolean | undefined;
     /**
      * `true` to use the short version.
      */