@pega/cosmos-react-core 3.0.0-dev.28.0 → 3.0.0-dev.30.0

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAwBjC,CAAC;AAGH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+M7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAwBjC,CAAC;AAGH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAsN7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js

@@ -6,7 +6,7 @@ import { defaultThemeProp } from '../../../theme';
 import Selectable, { StyledSelectable } from '../../Badges/Selection';
 import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
-import { useConsolidatedRef, useActiveDescendant, useDirection, useI18n, useUID } from '../../../hooks';
+import { useConsolidatedRef, useActiveDescendant, useDirection, useI18n, useUID, useTheme } from '../../../hooks';
 import { cap, tryCatch } from '../../../utils';
 import { StyledBareButton } from '../../Button/BareButton';
 import VisuallyHiddenText from '../../VisuallyHiddenText';
@@ -40,6 +40,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
     const { selected = [], value, onRemove, onChange, onKeyDown, onResolveSuggestion, actions, readOnly, disabled, status, placeholder, autoFocus, pauseDescendantEvaluation, onSelectedFocus, onSelectedBlur, 'aria-controls': ariaControls, ...restProps } = props;
     const t = useI18n();
     const id = useUID();
+    const { base: { 'content-width': { xs: xsContentWidth } } } = useTheme();
     const inputRef = useConsolidatedRef(ref);
     const listRef = useRef(null);
     const [focusDescendant, setFocusDescendant] = useState(null);
@@ -116,30 +117,30 @@ const MultiSelectInput = forwardRef((props, ref) => {
             ? `${id}-inputDescription  ${id}-searchDescription`
             : `${id}-inputDescription`;
     }, [id]);
-    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center' }, ...{
+    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', justify: 'between' }, ...{
             readOnly,
             disabled,
             status
-        }, children: [selected.length > 0 && (_jsx(Flex, { ref: listRef, id: id, as: 'ul', role: 'listbox', container: { alignItems: 'center', wrap: 'wrap' }, "aria-label": t('selected_items'), children: selected.map((element, idx) => {
-                    return (_jsx(Selectable, { as: 'li', role: 'option', id: element.id.toString(), status: status, onClick: e => {
-                            const mouseClick = e.detail !== 0;
-                            if (!readOnly && !disabled && !mouseClick) {
-                                handleSelectedRemoval(element.id, idx);
-                            }
-                        }, onRemove: () => {
-                            if (!readOnly && !disabled) {
-                                handleSelectedRemoval(element.id, idx);
-                            }
-                        }, onKeyDown: (e) => {
-                            // prevent browser's Back on FF
-                            if (e.key === 'Backspace')
-                                e.preventDefault();
-                        }, tabIndex: '-1', "aria-label": `${t('remove')} ${element.text}`, "aria-describedby": ariaDescribedBy, children: element.text }, element.id));
-                }) })), _jsx(Flex, { item: { grow: 1 }, container: true, children: _jsx("input", { size: 5, ref: inputRef, value: value, 
-                    // no-op avoids react uncontrolled warning
-                    onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps }) }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
+        }, children: [_jsxs(Flex, { container: { wrap: 'wrap' }, item: { grow: 1 }, children: [selected.length > 0 && (_jsx(Flex, { ref: listRef, id: id, as: 'ul', role: 'listbox', container: { alignItems: 'center', wrap: 'wrap' }, "aria-label": t('selected_items'), children: selected.map((element, idx) => {
+                            return (_jsx(Selectable, { as: 'li', role: 'option', id: element.id.toString(), status: status, onClick: e => {
+                                    const mouseClick = e.detail !== 0;
+                                    if (!readOnly && !disabled && !mouseClick) {
+                                        handleSelectedRemoval(element.id, idx);
+                                    }
+                                }, onRemove: () => {
+                                    if (!readOnly && !disabled) {
+                                        handleSelectedRemoval(element.id, idx);
+                                    }
+                                }, onKeyDown: (e) => {
+                                    // prevent browser's Back on FF
+                                    if (e.key === 'Backspace')
+                                        e.preventDefault();
+                                }, tabIndex: '-1', "aria-label": `${t('remove')} ${element.text}`, "aria-describedby": ariaDescribedBy, children: element.text }, element.id));
+                        }) })), _jsx(Flex, { item: { grow: 1, basis: xsContentWidth }, children: _jsx("input", { size: 5, ref: inputRef, value: value, 
+                            // no-op avoids react uncontrolled warning
+                            onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', 
+                            // eslint-disable-next-line jsx-a11y/no-autofocus
+                            autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps }) })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
 });
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.js.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n  useConsolidatedRef,\n  useActiveDescendant,\n  useDirection,\n  useI18n,\n  useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  const { background } = theme.components.badges.selectable.base;\n  const { 'foreground-color': foreground } = theme.base.palette;\n  const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n  return css`\n    ul {\n      list-style: none;\n\n      &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n        color: ${theme.base.palette.interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      onResolveSuggestion,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      pauseDescendantEvaluation,\n      onSelectedFocus,\n      onSelectedBlur,\n      'aria-controls': ariaControls,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const id = useUID();\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [activeItemId, setActiveItemId] = useState<string | null>(null);\n    const { start, end } = useDirection();\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: inputRef.current,\n        scope: listRef.current,\n        selector: 'li[role=\"option\"]',\n        orientation: 'horizontal' as const,\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n        },\n        pauseDescendantEvaluation,\n        onClick: (el: HTMLElement) => {\n          el.click();\n        }\n      }),\n      [pauseDescendantEvaluation, selected, focusDescendant]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig, [\n      pauseDescendantEvaluation,\n      selected\n    ]);\n\n    const handleSelectedRemoval = useCallback(\n      (selectionId, idx) => {\n        if (!pauseDescendantEvaluation && idx === selected.length - 1) {\n          if (selected.length > 1) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n                null\n            );\n          } else {\n            onSelectedBlur?.();\n          }\n        }\n        onRemove?.(selectionId, idx);\n        inputRef.current?.focus();\n      },\n      [selected, onRemove, onSelectedBlur, uadConfig]\n    );\n\n    useEffect(() => {\n      // Maintain active item & prev. val only as it changes.\n      if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n        setActiveItemId(activeDescendant.id);\n      }\n    }, [activeDescendant]);\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (selected.length && inputRef.current?.selectionStart === 0) {\n          const lastIndex = selected.length - 1;\n          if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n                null\n            );\n            onSelectedFocus?.();\n          }\n\n          const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n            ?.id;\n          const onLastItem = activeItemId === lastSelectableId;\n\n          if (\n            !pauseDescendantEvaluation &&\n            ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n          ) {\n            onSelectedBlur?.();\n          }\n\n          if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n            handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n          }\n        }\n        onKeyDown?.(e);\n      },\n      [\n        pauseDescendantEvaluation,\n        activeItemId,\n        onKeyDown,\n        handleSelectedRemoval,\n        selected,\n        readOnly,\n        disabled\n      ]\n    );\n\n    const ariaDescribedBy = useMemo(() => {\n      return onChange\n        ? `${id}-inputDescription  ${id}-searchDescription`\n        : `${id}-inputDescription`;\n    }, [id]);\n\n    return (\n      <Flex\n        as={StyledMultiSelectInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        {selected.length > 0 && (\n          <Flex\n            ref={listRef}\n            id={id}\n            as='ul'\n            role='listbox'\n            container={{ alignItems: 'center', wrap: 'wrap' }}\n            aria-label={t('selected_items')}\n          >\n            {selected.map((element, idx) => {\n              return (\n                <Selectable\n                  as='li'\n                  key={element.id}\n                  role='option'\n                  id={element.id.toString()}\n                  status={status}\n                  onClick={e => {\n                    const mouseClick = e.detail !== 0;\n\n                    if (!readOnly && !disabled && !mouseClick) {\n                      handleSelectedRemoval(element.id, idx);\n                    }\n                  }}\n                  onRemove={() => {\n                    if (!readOnly && !disabled) {\n                      handleSelectedRemoval(element.id, idx);\n                    }\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                  }}\n                  tabIndex='-1'\n                  aria-label={`${t('remove')} ${element.text}`}\n                  aria-describedby={ariaDescribedBy}\n                >\n                  {element.text}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <Flex item={{ grow: 1 }} container>\n          <input\n            size={5}\n            ref={inputRef}\n            value={value}\n            // no-op avoids react uncontrolled warning\n            onChange={onChange || (() => {})}\n            onKeyDown={onInputKeyDown}\n            readOnly={readOnly || !onChange}\n            disabled={disabled}\n            placeholder={selected?.length ? undefined : placeholder}\n            autoComplete='off'\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n            {...restProps}\n          />\n        </Flex>\n        {actions}\n\n        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`}>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}
+{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n  useConsolidatedRef,\n  useActiveDescendant,\n  useDirection,\n  useI18n,\n  useUID,\n  useTheme\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  const { background } = theme.components.badges.selectable.base;\n  const { 'foreground-color': foreground } = theme.base.palette;\n  const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n  return css`\n    ul {\n      list-style: none;\n\n      &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n        color: ${theme.base.palette.interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      onResolveSuggestion,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      pauseDescendantEvaluation,\n      onSelectedFocus,\n      onSelectedBlur,\n      'aria-controls': ariaControls,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const id = useUID();\n    const {\n      base: {\n        'content-width': { xs: xsContentWidth }\n      }\n    } = useTheme();\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [activeItemId, setActiveItemId] = useState<string | null>(null);\n    const { start, end } = useDirection();\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: inputRef.current,\n        scope: listRef.current,\n        selector: 'li[role=\"option\"]',\n        orientation: 'horizontal' as const,\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n        },\n        pauseDescendantEvaluation,\n        onClick: (el: HTMLElement) => {\n          el.click();\n        }\n      }),\n      [pauseDescendantEvaluation, selected, focusDescendant]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig, [\n      pauseDescendantEvaluation,\n      selected\n    ]);\n\n    const handleSelectedRemoval = useCallback(\n      (selectionId, idx) => {\n        if (!pauseDescendantEvaluation && idx === selected.length - 1) {\n          if (selected.length > 1) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n                null\n            );\n          } else {\n            onSelectedBlur?.();\n          }\n        }\n        onRemove?.(selectionId, idx);\n        inputRef.current?.focus();\n      },\n      [selected, onRemove, onSelectedBlur, uadConfig]\n    );\n\n    useEffect(() => {\n      // Maintain active item & prev. val only as it changes.\n      if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n        setActiveItemId(activeDescendant.id);\n      }\n    }, [activeDescendant]);\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (selected.length && inputRef.current?.selectionStart === 0) {\n          const lastIndex = selected.length - 1;\n          if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n                null\n            );\n            onSelectedFocus?.();\n          }\n\n          const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n            ?.id;\n          const onLastItem = activeItemId === lastSelectableId;\n\n          if (\n            !pauseDescendantEvaluation &&\n            ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n          ) {\n            onSelectedBlur?.();\n          }\n\n          if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n            handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n          }\n        }\n        onKeyDown?.(e);\n      },\n      [\n        pauseDescendantEvaluation,\n        activeItemId,\n        onKeyDown,\n        handleSelectedRemoval,\n        selected,\n        readOnly,\n        disabled\n      ]\n    );\n\n    const ariaDescribedBy = useMemo(() => {\n      return onChange\n        ? `${id}-inputDescription  ${id}-searchDescription`\n        : `${id}-inputDescription`;\n    }, [id]);\n\n    return (\n      <Flex\n        as={StyledMultiSelectInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', justify: 'between' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex container={{ wrap: 'wrap' }} item={{ grow: 1 }}>\n          {selected.length > 0 && (\n            <Flex\n              ref={listRef}\n              id={id}\n              as='ul'\n              role='listbox'\n              container={{ alignItems: 'center', wrap: 'wrap' }}\n              aria-label={t('selected_items')}\n            >\n              {selected.map((element, idx) => {\n                return (\n                  <Selectable\n                    as='li'\n                    key={element.id}\n                    role='option'\n                    id={element.id.toString()}\n                    status={status}\n                    onClick={e => {\n                      const mouseClick = e.detail !== 0;\n\n                      if (!readOnly && !disabled && !mouseClick) {\n                        handleSelectedRemoval(element.id, idx);\n                      }\n                    }}\n                    onRemove={() => {\n                      if (!readOnly && !disabled) {\n                        handleSelectedRemoval(element.id, idx);\n                      }\n                    }}\n                    onKeyDown={(e: KeyboardEvent<Element>) => {\n                      // prevent browser's Back on FF\n                      if (e.key === 'Backspace') e.preventDefault();\n                    }}\n                    tabIndex='-1'\n                    aria-label={`${t('remove')} ${element.text}`}\n                    aria-describedby={ariaDescribedBy}\n                  >\n                    {element.text}\n                  </Selectable>\n                );\n              })}\n            </Flex>\n          )}\n          <Flex item={{ grow: 1, basis: xsContentWidth }}>\n            <input\n              size={5}\n              ref={inputRef}\n              value={value}\n              // no-op avoids react uncontrolled warning\n              onChange={onChange || (() => {})}\n              onKeyDown={onInputKeyDown}\n              readOnly={readOnly || !onChange}\n              disabled={disabled}\n              placeholder={selected?.length ? undefined : placeholder}\n              autoComplete='off'\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n              {...restProps}\n            />\n          </Flex>\n        </Flex>\n        {actions}\n\n        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`}>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}

package/lib/components/Currency/CurrencyInput.types.d.ts

@@ -1,5 +1,5 @@
 import { NoChildrenProp, OmitStrict } from '../../types';
-import NumberInputProps from '../Number/NumberInput.types';
+import type { NumberInputProps } from '../Number/NumberInput.types';
 export default interface CurrencyInputProps extends OmitStrict<NumberInputProps, 'numberOfDecimals'>, NoChildrenProp {
     /** Callback fired when the component gets focus */
     onFocus?: (value: string) => void;

package/lib/components/Currency/CurrencyInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,OAAO,WAAW,kBACvB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,EACtD,cAAc;IAChB,mDAAmD;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6GAA6G;IAC7G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;SAEK;IACL,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}
+{"version":3,"file":"CurrencyInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,MAAM,CAAC,OAAO,WAAW,kBACvB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,EACtD,cAAc;IAChB,mDAAmD;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6GAA6G;IAC7G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;SAEK;IACL,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/lib/components/Currency/CurrencyInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.types.js","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { NoChildrenProp, OmitStrict } from '../../types';\nimport NumberInputProps from '../Number/NumberInput.types';\n\nexport default interface CurrencyInputProps\n  extends OmitStrict<NumberInputProps, 'numberOfDecimals'>,\n    NoChildrenProp {\n  /** Callback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Three letter currency shorthand ISO code. If not provided or invalid, component renders as NumberInput */\n  currencyISOCode?: string;\n  /** Always show ISO code\n   * @default false\n   * */\n  alwaysShowISOCode?: boolean;\n}\n"]}
+{"version":3,"file":"CurrencyInput.types.js","sourceRoot":"","sources":["../../../src/components/Currency/CurrencyInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { NoChildrenProp, OmitStrict } from '../../types';\nimport type { NumberInputProps } from '../Number/NumberInput.types';\n\nexport default interface CurrencyInputProps\n  extends OmitStrict<NumberInputProps, 'numberOfDecimals'>,\n    NoChildrenProp {\n  /** Callback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Three letter currency shorthand ISO code. If not provided or invalid, component renders as NumberInput */\n  currencyISOCode?: string;\n  /** Always show ISO code\n   * @default false\n   * */\n  alwaysShowISOCode?: boolean;\n}\n"]}

package/lib/components/DateTime/DateTime.types.d.ts

@@ -1,15 +1,6 @@
 import { NoChildrenProp } from '../../types';
 import { FormControlProps } from '../FormControl';
 export interface DateTimeProperties {
-    /**
-     * Date as ISO8601 string, timestamp or native Date object.
-     * Requires onChange prop to update value for controlled inputs.
-     */
-    value?: string | number | Date;
-    /**
-     * Date as ISO8601 string, timestamp or native Date object. Sets the value for an uncontrolled input.
-     */
-    defaultValue?: string | number | Date;
     /** Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user. */
     min?: string | number | Date;
     /** Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user. */
@@ -55,7 +46,20 @@ export interface DateTimeCallbacks {
     onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
 }
 export default interface DateTimeProps extends DateTimeProperties, DateTimeCallbacks, NoChildrenProp {
+    /**
+     * Date as ISO8601 string, timestamp or native Date object.
+     * Requires onChange prop to update value for controlled inputs.
+     */
+    value?: string | number | Date;
+    /**
+     * Date as ISO8601 string, timestamp or native Date object. Sets the value for an uncontrolled input.
+     */
+    defaultValue?: string | number | Date;
 }
+export declare type DateRangeCallbackParameter = {
+    start: DateTimeCallbackParameter;
+    end: DateTimeCallbackParameter;
+};
 export declare type AbsoluteVariant = 'date' | 'datetime' | 'time' | 'week' | 'month' | 'year' | 'monthyear' | 'quarteryear';
 export declare type DateTimeVariant = AbsoluteVariant | 'relative';
 export declare type DateTimeFormat = 'short' | 'long' | 'numeric';

package/lib/components/DateTime/DateTime.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.types.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTime.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACtC,4HAA4H;IAC5H,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,4HAA4H;IAC5H,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,uBAAuB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE/D,oBAAY,yBAAyB,GAAG;IACtC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrD,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED,MAAM,CAAC,OAAO,WAAW,aACvB,SAAQ,kBAAkB,EACxB,iBAAiB,EACjB,cAAc;CAAG;AAErB,oBAAY,eAAe,GACvB,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,WAAW,GACX,aAAa,CAAC;AAClB,oBAAY,eAAe,GAAG,eAAe,GAAG,UAAU,CAAC;AAC3D,oBAAY,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC"}
+{"version":3,"file":"DateTime.types.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTime.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,kBAAkB;IACjC,4HAA4H;IAC5H,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,4HAA4H;IAC5H,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,uBAAuB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE/D,oBAAY,yBAAyB,GAAG;IACtC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrD,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED,MAAM,CAAC,OAAO,WAAW,aACvB,SAAQ,kBAAkB,EACxB,iBAAiB,EACjB,cAAc;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACvC;AAED,oBAAY,0BAA0B,GAAG;IACvC,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,yBAAyB,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GACvB,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,WAAW,GACX,aAAa,CAAC;AAClB,oBAAY,eAAe,GAAG,eAAe,GAAG,UAAU,CAAC;AAC3D,oBAAY,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC"}

package/lib/components/DateTime/DateTime.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.types.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTime.types.ts"],"names":[],"mappings":"","sourcesContent":["import { NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport interface DateTimeProperties {\n  /**\n   * Date as ISO8601 string, timestamp or native Date object.\n   * Requires onChange prop to update value for controlled inputs.\n   */\n  value?: string | number | Date;\n  /**\n   * Date as ISO8601 string, timestamp or native Date object. Sets the value for an uncontrolled input.\n   */\n  defaultValue?: string | number | Date;\n  /** Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user. */\n  min?: string | number | Date;\n  /** Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user. */\n  max?: string | number | Date;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nexport type DateTimeValueErrorState = 'incomplete' | 'invalid';\n\nexport type DateTimeCallbackParameter = {\n  valueAsISOString: string;\n  valueAsTimestamp: number | undefined;\n  state?: DateTimeValueErrorState;\n};\n\nexport interface DateTimeCallbacks {\n  /** Callback fired when input value changes. */\n  onChange?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n}\n\nexport default interface DateTimeProps\n  extends DateTimeProperties,\n    DateTimeCallbacks,\n    NoChildrenProp {}\n\nexport type AbsoluteVariant =\n  | 'date'\n  | 'datetime'\n  | 'time'\n  | 'week'\n  | 'month'\n  | 'year'\n  | 'monthyear'\n  | 'quarteryear';\nexport type DateTimeVariant = AbsoluteVariant | 'relative';\nexport type DateTimeFormat = 'short' | 'long' | 'numeric';\n"]}
+{"version":3,"file":"DateTime.types.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTime.types.ts"],"names":[],"mappings":"","sourcesContent":["import { NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport interface DateTimeProperties {\n  /** Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user. */\n  min?: string | number | Date;\n  /** Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user. */\n  max?: string | number | Date;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nexport type DateTimeValueErrorState = 'incomplete' | 'invalid';\n\nexport type DateTimeCallbackParameter = {\n  valueAsISOString: string;\n  valueAsTimestamp: number | undefined;\n  state?: DateTimeValueErrorState;\n};\n\nexport interface DateTimeCallbacks {\n  /** Callback fired when input value changes. */\n  onChange?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n}\n\nexport default interface DateTimeProps\n  extends DateTimeProperties,\n    DateTimeCallbacks,\n    NoChildrenProp {\n  /**\n   * Date as ISO8601 string, timestamp or native Date object.\n   * Requires onChange prop to update value for controlled inputs.\n   */\n  value?: string | number | Date;\n  /**\n   * Date as ISO8601 string, timestamp or native Date object. Sets the value for an uncontrolled input.\n   */\n  defaultValue?: string | number | Date;\n}\n\nexport type DateRangeCallbackParameter = {\n  start: DateTimeCallbackParameter;\n  end: DateTimeCallbackParameter;\n};\n\nexport type AbsoluteVariant =\n  | 'date'\n  | 'datetime'\n  | 'time'\n  | 'week'\n  | 'month'\n  | 'year'\n  | 'monthyear'\n  | 'quarteryear';\nexport type DateTimeVariant = AbsoluteVariant | 'relative';\nexport type DateTimeFormat = 'short' | 'long' | 'numeric';\n"]}

package/lib/components/DateTime/Input/DateInput.d.ts

@@ -1,5 +1,6 @@
-import { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
+import { FunctionComponent, Dispatch, SetStateAction, ComponentType } from 'react';
 import { ForwardProps } from '../../../types';
+import type DatePickerProps from '../Picker/DatePicker.types';
 import { FormControlProps } from '../../FormControl';
 import DateTimeProps from '../DateTime.types';
 export interface DateInputProps extends DateTimeProps {
@@ -9,7 +10,10 @@ export interface DateInputProps extends DateTimeProps {
      */
     showWeekNumber?: boolean;
     /** Changes default date picker */
-    picker?: ReactNode;
+    picker?: {
+        renderer: ComponentType;
+        rendererProps?: Partial<DatePickerProps> & ForwardProps;
+    };
     /** Pass a heading and content to show additional information on the field. */
     additionalInfo?: FormControlProps['additionalInfo'];
 }

package/lib/components/DateTime/Input/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMjB,SAAS,EACT,QAAQ,EACR,cAAc,EAGf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AACxE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAgB7E,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAsCF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA8R/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMjB,QAAQ,EACR,cAAc,EAGd,aAAa,EACd,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,KAAK,eAAe,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AACxE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAgB7E,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,aAAa,CAAC;QACxB,aAAa,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;KACzD,CAAC;IACF,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAsCF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA8R/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/DateTime/Input/DateInput.js

@@ -52,7 +52,7 @@ const convertToCallbackParameter = (date, parts) => {
 };
 const DateInput = forwardRef((props, ref) => {
     const { locale } = useConfiguration();
-    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, info = getDateFormat(locale).join(''), status, required, readOnly, disabled, onChange, onFocus, onBlur, onResolveSuggestion, showWeekNumber, picker, autoFocus, additionalInfo, ...restProps } = props;
+    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, info = getDateFormat(locale).join(''), status, required, readOnly, disabled, onChange, onFocus, onBlur, onResolveSuggestion, showWeekNumber, picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {}, autoFocus, additionalInfo, ...restProps } = props;
     const t = useI18n();
     const date = value !== undefined ? parseToDate(value) : undefined;
     const [yearInputRef, monthInputRef, dayInputRef] = [
@@ -79,6 +79,7 @@ const DateInput = forwardRef((props, ref) => {
                 : undefined;
         }
     };
+    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();
     const inputContainerRef = useRef(null);
     const onFocusChange = (focused) => {
         const callbackParam = convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts());
@@ -88,9 +89,9 @@ const DateInput = forwardRef((props, ref) => {
             if (inputContainerRef.current)
                 inputContainerRef.current.scrollTop = 0;
             onBlur?.(callbackParam);
+            setOpen(false);
         }
     };
-    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();
     const onInputChange = () => {
         onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));
         buttonEl?.setAttribute('aria-label', generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open));
@@ -122,20 +123,20 @@ const DateInput = forwardRef((props, ref) => {
             return currentlySelectedDate();
         }
     }));
-    const Picker = (_jsx(DatePicker, { selected: currentlySelectedDate(), onChange: selected => {
-            setInputValue(selected);
-            setOpen(false);
-            setTimeout(() => buttonEl?.focus());
-            onInputChange();
-        }, min: min, max: max, showWeekNumber: showWeekNumber }));
-    const PickerButton = (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: open ? 'times' : 'calendar' }) }), _jsx(Popover, { show: open, ref: setPopoverRef, target: buttonEl, placement: 'bottom-end', strategy: 'fixed', modifiers: [
+    const PickerButton = (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: open ? 'times' : 'calendar' }) }), open && (_jsx(Popover, { ref: setPopoverRef, target: buttonEl, placement: 'bottom-end', strategy: 'fixed', modifiers: [
                     {
                         name: 'flip',
                         options: {
                             fallbackPlacements: ['top-end', 'right', 'left']
                         }
                     }
-                ], children: picker || Picker })] }));
+                ], children: _jsx(PickerComp, { selected: currentlySelectedDate(), min: min, max: max, showWeekNumber: showWeekNumber, ...rendererProps, onChange: selected => {
+                        setInputValue(selected);
+                        setOpen(false);
+                        setTimeout(() => buttonEl?.focus());
+                        onInputChange();
+                        rendererProps?.onChange?.(selected);
+                    } }) }))] }));
     const orderedRefs = [];
     const Comp = (_jsxs(Flex, { as: StyledDateInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
             if (e.target === containerRef.current)

package/lib/components/DateTime/Input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ClipboardEvent,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  RefObject,\n  ReactNode,\n  Dispatch,\n  SetStateAction,\n  useImperativeHandle,\n  useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { useConfiguration, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as calendarIcon from '../../Icon/icons/calendar.icon';\nimport DatePicker from '../Picker/DatePicker';\nimport Popover from '../../Popover';\nimport { FormControlProps, StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\n\nimport {\n  getDateFormat,\n  parsePastedTextToDate,\n  parseToDate,\n  validateDate,\n  generatePickerButtonAriaLabel\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\n\nregisterIcon(timesIcon, calendarIcon);\n\nexport interface DateInputProps extends DateTimeProps {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Changes default date picker */\n  picker?: ReactNode;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport interface DateInputRefObject {\n  readonly value: Date | undefined;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  buttonEl: HTMLElement | null;\n}\n\nexport const StyledDateInput = styled(StyledDateTime)<DateInputProps>`\n  padding-inline-end: 0;\n`;\n\nStyledDateInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[]\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [year, monthIndex, day] = parts.map(Number);\n\n    if (!validateDate(year, monthIndex + 1, day)) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCFullYear(year, monthIndex, day);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst DateInput: FunctionComponent<DateInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<DateInputProps>, ref: Ref<DateInputRefObject>) => {\n    const { locale } = useConfiguration();\n    const {\n      defaultValue,\n      value = defaultValue,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      info = getDateFormat(locale).join(''),\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      showWeekNumber,\n      picker,\n      autoFocus,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const date = value !== undefined ? parseToDate(value) : undefined;\n\n    const [yearInputRef, monthInputRef, dayInputRef] = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null)\n    ];\n\n    const pickParts = () => {\n      const month = monthInputRef.current?.value\n        ? (Number(monthInputRef.current.value) - 1).toString()\n        : undefined;\n      return [\n        yearInputRef.current?.value || undefined,\n        month,\n        dayInputRef.current?.value || undefined\n      ];\n    };\n\n    const currentlySelectedDate = () => {\n      const parts = pickParts();\n      if (parts.every(Boolean)) {\n        const [year, monthIndex, day] = parts.map(Number);\n\n        return validateDate(year, monthIndex + 1, day)\n          ? new Date(Date.UTC(year, monthIndex, day))\n          : undefined;\n      }\n    };\n\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      if (!focused) {\n        if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n        onBlur?.(callbackParam);\n      }\n    };\n\n    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n    const onInputChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n      buttonEl?.setAttribute(\n        'aria-label',\n        generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)\n      );\n    };\n\n    const setInputValue = (newValue: Date) => {\n      dayInputRef.current!.value = newValue.getUTCDate().toString().padStart(2, '0');\n      monthInputRef.current!.value = (newValue.getUTCMonth() + 1).toString().padStart(2, '0');\n      yearInputRef.current!.value = newValue.getUTCFullYear().toString();\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      const text = e.clipboardData.getData('text');\n      const newDate = parsePastedTextToDate(text, locale, date || new Date());\n      if (newDate) {\n        e.preventDefault();\n        setInputValue(newDate);\n        onInputChange();\n      }\n    };\n\n    const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n    const DayInput = (\n      <PartInput\n        key='day'\n        placeholder={t('day_placeholder')}\n        aria-label={displayNames.of('day')}\n        value={date?.getUTCDate()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={31}\n        ref={dayInputRef}\n      />\n    );\n\n    const MonthInput = (\n      <PartInput\n        key='month'\n        placeholder={t('month_placeholder')}\n        aria-label={displayNames.of('month')}\n        value={date ? date?.getUTCMonth() + 1 : undefined}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={12}\n        ref={monthInputRef}\n      />\n    );\n\n    const YearInput = (\n      <PartInput\n        key='year'\n        placeholder={t('year_placeholder')}\n        aria-label={displayNames.of('year')}\n        value={date?.getUTCFullYear()}\n        onChange={onInputChange}\n        size={4}\n        maxLength={4}\n        readOnly={readOnly}\n        min={1}\n        ref={yearInputRef}\n      />\n    );\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    useImperativeHandle(ref, () => ({\n      setOpen,\n      buttonEl,\n      get value() {\n        return currentlySelectedDate();\n      }\n    }));\n\n    const Picker = (\n      <DatePicker\n        selected={currentlySelectedDate()}\n        onChange={selected => {\n          setInputValue(selected);\n          setOpen(false);\n          setTimeout(() => buttonEl?.focus());\n          onInputChange();\n        }}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    );\n\n    const PickerButton = (\n      <>\n        <Button\n          variant='simple'\n          icon\n          ref={setButtonEl}\n          onClick={() => setOpen(cur => !cur)}\n          aria-label={generatePickerButtonAriaLabel(\n            currentlySelectedDate(),\n            'date',\n            locale,\n            t,\n            open\n          )}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Icon name={open ? 'times' : 'calendar'} />\n        </Button>\n        <Popover\n          show={open}\n          ref={setPopoverRef}\n          target={buttonEl}\n          placement='bottom-end'\n          strategy='fixed'\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          {picker || Picker}\n        </Popover>\n      </>\n    );\n\n    const orderedRefs: RefObject<HTMLInputElement>[] = [];\n\n    const Comp = (\n      <Flex\n        as={StyledDateInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={containerRef}\n        onClick={(e: MouseEvent) => {\n          if (e.target === containerRef.current) orderedRefs[0].current?.focus();\n        }}\n        {...restProps}\n      >\n        <Flex\n          ref={inputContainerRef}\n          as={StyledInputContainer}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onPaste={onPaste}\n        >\n          {getDateFormat(locale).map(part => {\n            switch (part) {\n              case 'DD':\n                orderedRefs.push(dayInputRef);\n                return DayInput;\n              case 'MM':\n                orderedRefs.push(monthInputRef);\n                return MonthInput;\n              case 'YYYY':\n                orderedRefs.push(yearInputRef);\n                return YearInput;\n              default:\n                return part;\n            }\n          })}\n        </Flex>\n        {!readOnly && PickerButton}\n      </Flex>\n    );\n\n    useEffect(() => {\n      if (autoFocus) orderedRefs[0].current?.focus();\n    }, [autoFocus]);\n\n    useAutoFocusNextInput(orderedRefs);\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        aria-labelledby={id}\n        labelAs='legend'\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default DateInput;\n"]}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ClipboardEvent,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  RefObject,\n  Dispatch,\n  SetStateAction,\n  useImperativeHandle,\n  useEffect,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { useConfiguration, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as calendarIcon from '../../Icon/icons/calendar.icon';\nimport DatePicker from '../Picker/DatePicker';\nimport type DatePickerProps from '../Picker/DatePicker.types';\nimport Popover from '../../Popover';\nimport { FormControlProps, StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\n\nimport {\n  getDateFormat,\n  parsePastedTextToDate,\n  parseToDate,\n  validateDate,\n  generatePickerButtonAriaLabel\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\n\nregisterIcon(timesIcon, calendarIcon);\n\nexport interface DateInputProps extends DateTimeProps {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Changes default date picker */\n  picker?: {\n    renderer: ComponentType;\n    rendererProps?: Partial<DatePickerProps> & ForwardProps;\n  };\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport interface DateInputRefObject {\n  readonly value: Date | undefined;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  buttonEl: HTMLElement | null;\n}\n\nexport const StyledDateInput = styled(StyledDateTime)<DateInputProps>`\n  padding-inline-end: 0;\n`;\n\nStyledDateInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[]\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [year, monthIndex, day] = parts.map(Number);\n\n    if (!validateDate(year, monthIndex + 1, day)) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCFullYear(year, monthIndex, day);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst DateInput: FunctionComponent<DateInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<DateInputProps>, ref: Ref<DateInputRefObject>) => {\n    const { locale } = useConfiguration();\n    const {\n      defaultValue,\n      value = defaultValue,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      info = getDateFormat(locale).join(''),\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      showWeekNumber,\n      picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {},\n      autoFocus,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const date = value !== undefined ? parseToDate(value) : undefined;\n\n    const [yearInputRef, monthInputRef, dayInputRef] = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null)\n    ];\n\n    const pickParts = () => {\n      const month = monthInputRef.current?.value\n        ? (Number(monthInputRef.current.value) - 1).toString()\n        : undefined;\n      return [\n        yearInputRef.current?.value || undefined,\n        month,\n        dayInputRef.current?.value || undefined\n      ];\n    };\n\n    const currentlySelectedDate = () => {\n      const parts = pickParts();\n      if (parts.every(Boolean)) {\n        const [year, monthIndex, day] = parts.map(Number);\n\n        return validateDate(year, monthIndex + 1, day)\n          ? new Date(Date.UTC(year, monthIndex, day))\n          : undefined;\n      }\n    };\n\n    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      if (!focused) {\n        if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n        onBlur?.(callbackParam);\n        setOpen(false);\n      }\n    };\n\n    const onInputChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n      buttonEl?.setAttribute(\n        'aria-label',\n        generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)\n      );\n    };\n\n    const setInputValue = (newValue: Date) => {\n      dayInputRef.current!.value = newValue.getUTCDate().toString().padStart(2, '0');\n      monthInputRef.current!.value = (newValue.getUTCMonth() + 1).toString().padStart(2, '0');\n      yearInputRef.current!.value = newValue.getUTCFullYear().toString();\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      const text = e.clipboardData.getData('text');\n      const newDate = parsePastedTextToDate(text, locale, date || new Date());\n      if (newDate) {\n        e.preventDefault();\n        setInputValue(newDate);\n        onInputChange();\n      }\n    };\n\n    const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n    const DayInput = (\n      <PartInput\n        key='day'\n        placeholder={t('day_placeholder')}\n        aria-label={displayNames.of('day')}\n        value={date?.getUTCDate()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={31}\n        ref={dayInputRef}\n      />\n    );\n\n    const MonthInput = (\n      <PartInput\n        key='month'\n        placeholder={t('month_placeholder')}\n        aria-label={displayNames.of('month')}\n        value={date ? date?.getUTCMonth() + 1 : undefined}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={12}\n        ref={monthInputRef}\n      />\n    );\n\n    const YearInput = (\n      <PartInput\n        key='year'\n        placeholder={t('year_placeholder')}\n        aria-label={displayNames.of('year')}\n        value={date?.getUTCFullYear()}\n        onChange={onInputChange}\n        size={4}\n        maxLength={4}\n        readOnly={readOnly}\n        min={1}\n        ref={yearInputRef}\n      />\n    );\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    useImperativeHandle(ref, () => ({\n      setOpen,\n      buttonEl,\n      get value() {\n        return currentlySelectedDate();\n      }\n    }));\n\n    const PickerButton = (\n      <>\n        <Button\n          variant='simple'\n          icon\n          ref={setButtonEl}\n          onClick={() => setOpen(cur => !cur)}\n          aria-label={generatePickerButtonAriaLabel(\n            currentlySelectedDate(),\n            'date',\n            locale,\n            t,\n            open\n          )}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Icon name={open ? 'times' : 'calendar'} />\n        </Button>\n        {open && (\n          <Popover\n            ref={setPopoverRef}\n            target={buttonEl}\n            placement='bottom-end'\n            strategy='fixed'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-end', 'right', 'left']\n                }\n              }\n            ]}\n          >\n            <PickerComp\n              selected={currentlySelectedDate()}\n              min={min}\n              max={max}\n              showWeekNumber={showWeekNumber}\n              {...rendererProps}\n              onChange={selected => {\n                setInputValue(selected);\n                setOpen(false);\n                setTimeout(() => buttonEl?.focus());\n                onInputChange();\n                rendererProps?.onChange?.(selected);\n              }}\n            />\n          </Popover>\n        )}\n      </>\n    );\n\n    const orderedRefs: RefObject<HTMLInputElement>[] = [];\n\n    const Comp = (\n      <Flex\n        as={StyledDateInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={containerRef}\n        onClick={(e: MouseEvent) => {\n          if (e.target === containerRef.current) orderedRefs[0].current?.focus();\n        }}\n        {...restProps}\n      >\n        <Flex\n          ref={inputContainerRef}\n          as={StyledInputContainer}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onPaste={onPaste}\n        >\n          {getDateFormat(locale).map(part => {\n            switch (part) {\n              case 'DD':\n                orderedRefs.push(dayInputRef);\n                return DayInput;\n              case 'MM':\n                orderedRefs.push(monthInputRef);\n                return MonthInput;\n              case 'YYYY':\n                orderedRefs.push(yearInputRef);\n                return YearInput;\n              default:\n                return part;\n            }\n          })}\n        </Flex>\n        {!readOnly && PickerButton}\n      </Flex>\n    );\n\n    useEffect(() => {\n      if (autoFocus) orderedRefs[0].current?.focus();\n    }, [autoFocus]);\n\n    useAutoFocusNextInput(orderedRefs);\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        aria-labelledby={id}\n        labelAs='legend'\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default DateInput;\n"]}

package/lib/components/DateTime/Input/DateRangeInput.d.ts

@@ -1,46 +1,33 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import { FormControlProps } from '../../FormControl';
-import { DateRangeCallbackValue } from '../types';
-import type { DateTimeProperties } from '../DateTime.types';
+import type { DateRangeCallbackParameter, DateTimeProperties } from '../DateTime.types';
+import DateTimeProps from '../DateTime.types';
 export interface DateRangeInputProps extends DateTimeProperties {
+    /** Object of range boundaries. */
+    value?: {
+        start?: DateTimeProps['value'];
+        end?: DateTimeProps['value'];
+    };
     /**
      * Display additional column with week number in date picker popover.
      * @default false
      */
     showWeekNumber?: boolean;
-    /**
-     * Pass a string or a fragment with an Icon and string for first part of DataRangeInput.
-     */
-    fromLabel: FormControlProps['label'];
-    /**
-     * Pass a string or a fragment with an Icon and string for second part of DataRangeInput.
-     */
-    toLabel: FormControlProps['label'];
-    /**
-     * Pass an object with "heading" and "content" properties to show AdditionalInfo for second part of DataRangeInput.
-     */
+    /** Pass a string or a fragment with an Icon and string for first part of DataRangeInput. */
+    fromLabel?: FormControlProps['label'];
+    /** Pass a string or a fragment with an Icon and string for second part of DataRangeInput. */
+    toLabel?: FormControlProps['label'];
+    /** Pass an object with "heading" and "content" properties to show AdditionalInfo for second part of DataRangeInput. */
     toAdditionalInfo?: FormControlProps['additionalInfo'];
-    /**
-     * Pass an object with "heading" and "content" properties to show AdditionalInfo for first part of DataRangeInput.
-     */
+    /** Pass an object with "heading" and "content" properties to show AdditionalInfo for first part of DataRangeInput. */
     fromAdditionalInfo?: FormControlProps['additionalInfo'];
-    /**
-     * Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.
-     *
-     */
-    fromValue?: string | number | Date;
-    /**
-     * Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.
-     *
-     */
-    toValue?: string | number | Date;
     /** Callback fired when input value changes. */
-    onChange?: (value: DateRangeCallbackValue) => void;
+    onChange: (value: DateRangeCallbackParameter) => void;
     /** Callback fired when the component gets focused. */
-    onFocus?: (value: DateRangeCallbackValue) => void;
+    onFocus?: (value: DateRangeCallbackParameter) => void;
     /** Callback fired when the component loses focus. */
-    onBlur?: (value: DateRangeCallbackValue) => void;
+    onBlur?: (value: DateRangeCallbackParameter) => void;
     /** Automatically focuses the input on render. */
     autoFocus?: boolean;
 }

package/lib/components/DateTime/Input/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAE,sBAAsB,EAAyB,MAAM,UAAU,CAAC;AAGzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAM5D,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAErC;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACtD;;OAEG;IACH,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClD,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACjD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiFD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+KzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,EACV,0BAA0B,EAE1B,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAM9C,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,kCAAkC;IAClC,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAAC,GAAG,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC;IACzE;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACtD,sHAAsH;IACtH,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxD,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACrD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAwLzE,CAAC;AAEF,eAAe,cAAc,CAAC"}