@os-design/core 1.0.182 → 1.0.184

package/dist/cjs/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","openedStyles","opened","unbordered","clr","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","transitionStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","styled","InputContainer","omitEmotionProps","SelectMenu","Menu","m","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","forwardRef","ref","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","onClose","onBlur","size","placement","rest","useForwardedRef","containerRef","mergedContainerRef","useState","setWidth","inputSearchContainerRef","useRef","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","onCloseRef","resizeHandler","useCallback","window","requestAnimationFrame","nextWidth","getBoundingClientRect","useBrowserLayoutEffect","useResizeObserver","useEvent","undefined","setAttribute","selectedItems","useMemo","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","blurHandler","e","includes","key","preventDefault","filter","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport {\n  omitEmotionProps,\n  useBrowserLayoutEffect,\n  useEvent,\n  useForwardedRef,\n  useForwardedState,\n  useResizeObserver,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { InputContainer } from '../Input';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Menu from '../Menu';\nimport { PopoverProps } from '../Popover';\nimport SelectList, { OptionProps } from './SelectList';\nimport SelectToggle from './SelectToggle';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n  extends JsxDivProps,\n    WithSize,\n    Pick<PopoverProps, 'placement'> {\n  /**\n   * Options of the select.\n   * @default undefined\n   */\n  options?: OptionProps[];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the select.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the search input visible.\n   * @default false\n   */\n  searchVisible?: boolean;\n  /**\n   * Props of the search input.\n   * @default undefined\n   */\n  searchProps?: InputSearchProps;\n  /**\n   * Text displayed when there are no list items.\n   * @default Not found\n   */\n  notFoundText?: string;\n  /**\n   * Whether the border is hidden.\n   * @default false\n   */\n  unbordered?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the select is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup list.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * Whether the select has the clear button.\n   * @default false\n   */\n  clearVisible?: boolean;\n  /**\n   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n   * @default 10\n   */\n  threshold?: number;\n  /**\n   * Defines how many items inside of the visible \"window\" to render.\n   * @default 6\n   */\n  visibleCount?: number;\n  /**\n   * Defines how many items outside of the visible \"window\" to render at all times.\n   * @default 10\n   */\n  overscanCount?: number;\n  /**\n   * The max number of options that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: SelectLocale;\n  /**\n   * Selected options.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst paddingStyles = (p) => {\n  const paddingVertical =\n    (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n  return css`\n    padding: calc(${paddingVertical}em - 1px) 0;\n  `;\n};\n\nconst openedStyles = (p) =>\n  p.opened &&\n  !p.unbordered &&\n  css`\n    border-color: ${clr(p.theme.inputFocusColorBorder)};\n    box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n  `;\n\nconst unborderedStyles = (p) =>\n  p.unbordered &&\n  css`\n    border: 0;\n    box-shadow: none !important;\n    ${transitionStyles('background-color')(p)};\n  `;\n\nconst unborderedHoverStyles = (p) =>\n  p.unbordered &&\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n      }\n    }\n  `;\n\ninterface SelectContainerProps {\n  opened: boolean;\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const SelectContainer = styled(\n  InputContainer,\n  omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n  cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  height: unset;\n  min-height: ${(p) => p.theme.baseHeight}em;\n\n  ${paddingStyles};\n  ${openedStyles};\n  ${unborderedStyles};\n  ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n  width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: unset;\n\n  ${m.min.xs} {\n    width: ${(p) => p.width}px;\n  }\n`;\n\nconst NotFound = styled.div`\n  height: ${(p) => p.theme.menuItemHeight}em;\n  display: flex;\n  align-items: center;\n\n  padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n  color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n  padding: ${(p) => p.theme.menuPaddingVertical}em\n    ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      options = [],\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      searchVisible = false,\n      searchProps = {},\n      notFoundText = 'Not found',\n      unbordered = false,\n      loading = false,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      clearVisible = false,\n      threshold = 10,\n      visibleCount = 6,\n      overscanCount = 10,\n      maxSelectedItems = 1,\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      onLoadNext = () => {},\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      placement,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [width, setWidth] = useState(0);\n    const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n    const [opened, setOpened] = useState(autoOpen);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (!autoFocus) return;\n      containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    /**\n     * Detect the width of the container when the select was opened and update\n     * it when either the container size or the window size has been changed.\n     */\n    const resizeHandler = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!opened || !containerRef.current) return;\n        const nextWidth = containerRef.current.getBoundingClientRect().width;\n        if (width === nextWidth) return;\n        setWidth(nextWidth);\n      });\n    }, [opened, containerRef, width]);\n    useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n    useResizeObserver(containerRef, resizeHandler);\n    useEvent(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'resize',\n      resizeHandler\n    );\n\n    // Replace the aria-haspopup attribute from menu to listbox\n    useBrowserLayoutEffect(() => {\n      if (!containerRef.current) return;\n      containerRef.current.setAttribute('aria-haspopup', 'listbox');\n    }, []);\n\n    const selectedItems = useMemo(\n      () =>\n        (forwardedValue || []).map((v) => {\n          const option = (options || []).find((item) => item.value === v);\n          return { title: option ? option.title || '' : '', value: v };\n        }),\n      [forwardedValue, options]\n    );\n\n    const listBoxId = useMemo(\n      () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          unbordered={unbordered}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-disabled={disabled}\n          aria-busy={loading}\n          aria-haspopup='listbox'\n          aria-owns={listBoxId}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <SelectToggle\n            selectedItems={selectedItems}\n            onDelete={(v) =>\n              setForwardedValue(\n                (forwardedValue || []).filter((item) => item !== v)\n              )\n            }\n            onClear={() => {\n              setForwardedValue([]);\n              if (!containerRef.current) return;\n              containerRef.current.focus();\n            }}\n            opened={opened}\n            multiple={maxSelectedItems !== 1}\n            placeholder={placeholder}\n            left={left}\n            leftHasPadding={leftHasPadding}\n            right={right}\n            rightHasPadding={rightHasPadding}\n            unbordered={unbordered}\n            disabled={disabled}\n            clearVisible={clearVisible}\n            loading={loading}\n            locale={locale}\n          />\n        </SelectContainer>\n\n        <SelectMenu\n          trigger={containerRef}\n          visible={opened}\n          onClose={() => setOpened(false)}\n          size={size}\n          width={width}\n          closeOnSelect={maxSelectedItems === 1}\n          modalTitle={placeholder}\n          placement={placement}\n        >\n          {searchVisible && (\n            <InputSearchContainer ref={inputSearchContainerRef}>\n              <InputSearch {...searchProps} />\n            </InputSearchContainer>\n          )}\n\n          {options.length > 0 ? (\n            <SelectList\n              searchVisible={searchVisible}\n              options={options}\n              visibleCount={visibleCount}\n              overscanCount={overscanCount}\n              threshold={threshold}\n              onLoadNext={onLoadNext}\n              maxSelectedItems={maxSelectedItems}\n              containerRef={containerRef}\n              value={forwardedValue}\n              onChange={setForwardedValue}\n              id={listBoxId}\n              size={size}\n            />\n          ) : (\n            <NotFound>{notFoundText}</NotFound>\n          )}\n        </SelectMenu>\n      </>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["selectContainerPaddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","selectContainerOpenedStyles","opened","unbordered","clr","inputFocusColorBorder","inputFocusColorShadow","selectContainerUnborderedStyles","transitionStyles","selectContainerUnborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","styled","InputContainer","omitEmotionProps","SelectMenu","Menu","m","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","ToggleContainer","toggleContentNotHasLeftStyles","hasLeft","toggleContentNotHasRightStyles","hasRight","ToggleContent","ellipsisStyles","Placeholder","span","inputColorPlaceholder","titleUnborderedTitleStyles","colorPrimary","titleDisabledStyles","inputDisabledColorText","Title","colorText","ToggleListItem","Tag","ToggleList","selectToggleListItemGap","DeleteButton","button","resetButtonStyles","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","toggleIconUnborderedStyles","ToggleIconContainer","selectColorIcon","ClearIcon","CloseCircle","Addon","ToggleLeftAddon","inputAddonPaddingHorizontal","hasPadding","ToggleRightAddon","Select","forwardRef","ref","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","multiple","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","onClose","onBlur","size","placement","rest","useForwardedRef","containerRef","mergedContainerRef","useState","setWidth","inputSearchContainerRef","useRef","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","onCloseRef","resizeHandler","useCallback","window","requestAnimationFrame","nextWidth","getBoundingClientRect","useBrowserLayoutEffect","useResizeObserver","useEvent","undefined","setAttribute","listBoxId","useMemo","Math","random","toString","slice","blurHandler","e","onDelete","v","filter","item","toggleContent","length","items","map","option","find","title","stopPropagation","deleteLabel","toggleShowClearButton","toggleOnClear","toggleRightValue","key","clearLabel","toggleRightHasPaddingValue","onSelect","includes","windowSize","useSize","isMinXs","useIsMinWidth","fontSize","useFontSize","document","body","useTheme","scaleFactor","s","sizes","Number","replace","paddingBottom","paddingEm","modalBodyPaddingVertical","paddingTop","searchInputHeight","itemSize","height","maxHeight","modalHeaderHeight","curHeight","count","scrollHandler","useRWLoadNext","itemCount","InnerElement","style","innerElementRest","parseFloat","listItemFn","index","optionTitle","optionValue","optionOnClick","onClick","restOption","top","preventDefault","t","buttonPaddingHorizontal","small","scrollOffset","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';\nimport { m, useIsMinWidth } from '@os-design/media';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport {\n  omitEmotionProps,\n  useBrowserLayoutEffect,\n  useEvent,\n  useFontSize,\n  useForwardedRef,\n  useForwardedState,\n  useResizeObserver,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { FixedSizeList } from 'react-window';\nimport Button from '../Button';\nimport { InputContainer } from '../Input';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport useRWLoadNext from '../List/utils/useRWLoadNext';\nimport Menu from '../Menu';\nimport MenuItem, { MenuItemProps } from '../MenuItem';\nimport { PopoverProps } from '../Popover';\nimport Tag from '../Tag';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\nexport interface Option extends MenuItemProps {\n  title?: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseSelectProps<T>\n  extends JsxDivProps,\n    WithSize,\n    Pick<PopoverProps, 'placement'> {\n  /**\n   * Options of the select.\n   * @default undefined\n   */\n  options?: Option[];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the select.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the search input visible.\n   * @default false\n   */\n  searchVisible?: boolean;\n  /**\n   * Props of the search input.\n   * @default undefined\n   */\n  searchProps?: InputSearchProps;\n  /**\n   * Text displayed when there are no list items.\n   * @default Not found\n   */\n  notFoundText?: string;\n  /**\n   * Whether the border is hidden.\n   * @default false\n   */\n  unbordered?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the select is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup list.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * Whether the select has the clear button.\n   * @default false\n   */\n  clearVisible?: boolean;\n  /**\n   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n   * @default 10\n   */\n  threshold?: number;\n  /**\n   * Defines how many items inside of the visible \"window\" to render.\n   * @default 6\n   */\n  visibleCount?: number;\n  /**\n   * Defines how many items outside of the visible \"window\" to render at all times.\n   * @default 10\n   */\n  overscanCount?: number;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: SelectLocale;\n  /**\n   * Selected options.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\ninterface SelectNotMultipleProps extends BaseSelectProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface SelectMultipleProps extends BaseSelectProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type SelectProps = SelectNotMultipleProps | SelectMultipleProps;\n\nconst selectContainerPaddingStyles = (p) => {\n  const paddingVertical =\n    (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n  return css`\n    padding: calc(${paddingVertical}em - 1px) 0;\n  `;\n};\n\nconst selectContainerOpenedStyles = (p) =>\n  p.opened &&\n  !p.unbordered &&\n  css`\n    border-color: ${clr(p.theme.inputFocusColorBorder)};\n    box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n  `;\n\nconst selectContainerUnborderedStyles = (p) =>\n  p.unbordered &&\n  css`\n    border: 0;\n    box-shadow: none !important;\n    ${transitionStyles('background-color')(p)};\n  `;\n\nconst selectContainerUnborderedHoverStyles = (p) =>\n  p.unbordered &&\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n      }\n    }\n  `;\n\ninterface SelectContainerProps {\n  opened: boolean;\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const SelectContainer = styled(\n  InputContainer,\n  omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n  cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  height: unset;\n  min-height: ${(p) => p.theme.baseHeight}em;\n\n  ${selectContainerPaddingStyles};\n  ${selectContainerOpenedStyles};\n  ${selectContainerUnborderedStyles};\n  ${selectContainerUnborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n  width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: unset;\n\n  ${m.min.xs} {\n    width: ${(p) => p.width}px;\n  }\n`;\n\nconst NotFound = styled.div`\n  height: ${(p) => p.theme.menuItemHeight}em;\n  display: flex;\n  align-items: center;\n\n  padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n  color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n  padding: ${(p) => p.theme.menuPaddingVertical}em\n    ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\nexport const ToggleContainer = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`;\n\nconst toggleContentNotHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst toggleContentNotHasRightStyles = (p) =>\n  !p.hasRight &&\n  !p.unbordered &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ToggleContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n  unbordered?: boolean;\n}\nexport const ToggleContent = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight', 'unbordered')\n)<ToggleContentProps>`\n  flex: 1;\n  ${toggleContentNotHasLeftStyles};\n  ${toggleContentNotHasRightStyles};\n  ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst titleUnborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst titleDisabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${titleUnborderedTitleStyles};\n  ${titleDisabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ToggleListItemProps = Pick<SelectProps, 'disabled'>;\nconst ToggleListItem = styled(\n  Tag,\n  omitEmotionProps('disabled')\n)<ToggleListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${titleDisabledStyles};\n`;\n\nconst ToggleList = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n    ${(p) => -p.theme.selectToggleListItemGap}em 0;\n\n  & > div {\n    margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n      ${(p) => p.theme.selectToggleListItemGap}em 0;\n  }\n`;\n\nconst DeleteButton = styled.button`\n  ${resetButtonStyles};\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};\n    }\n  }\n\n  ${transitionStyles('color')};\n`;\n\nconst toggleIconUnborderedStyles = (p) =>\n  p.unbordered &&\n  css`\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\ninterface ToggleIconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const ToggleIconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<ToggleIconContainerProps>`\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n  line-height: 1;\n  ${toggleIconUnborderedStyles};\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nexport const ToggleLeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nexport const ToggleRightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      options = [],\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      searchVisible = false,\n      searchProps = {},\n      notFoundText = 'Not found',\n      unbordered = false,\n      loading = false,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      clearVisible = false,\n      threshold = 10,\n      visibleCount = 6,\n      overscanCount = 10,\n      multiple = false,\n      maxSelectedItems = 0,\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      onLoadNext = () => {},\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      placement,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [width, setWidth] = useState(0);\n    const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    /**\n     * Detect the width of the container when the select was opened and update\n     * it when either the container size or the window size has been changed.\n     */\n    const resizeHandler = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!opened || !containerRef.current) return;\n        const nextWidth = containerRef.current.getBoundingClientRect().width;\n        if (width === nextWidth) return;\n        setWidth(nextWidth);\n      });\n    }, [opened, containerRef, width]);\n    useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n    useResizeObserver(containerRef, resizeHandler);\n    useEvent(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'resize',\n      resizeHandler\n    );\n\n    // Replace the aria-haspopup attribute from menu to listbox\n    useBrowserLayoutEffect(() => {\n      if (!containerRef.current) return;\n      containerRef.current.setAttribute('aria-haspopup', 'listbox');\n    }, []);\n\n    const listBoxId = useMemo(\n      () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const onDelete = useCallback(\n      (v: string) => {\n        if (!multiple) return;\n        setForwardedValue((forwardedValue || []).filter((item) => item !== v));\n      },\n      [forwardedValue, multiple, setForwardedValue]\n    );\n\n    const toggleContent = useMemo(() => {\n      if (multiple) {\n        if (!forwardedValue || forwardedValue.length === 0) {\n          return <Placeholder>{placeholder}</Placeholder>;\n        }\n        const items = forwardedValue.map((v) => {\n          const option = (options || []).find((item) => item.value === v);\n          return { title: option ? option.title || '' : '', value: v };\n        });\n        return (\n          <ToggleList>\n            {items.map(({ title, value: v }) => (\n              <ToggleListItem\n                key={v}\n                disabled={disabled}\n                right={\n                  !disabled ? (\n                    <DeleteButton\n                      onClick={(e) => {\n                        onDelete(v);\n                        e.stopPropagation();\n                      }}\n                      onKeyDown={(e) => e.stopPropagation()}\n                      aria-label={`${locale.deleteLabel} ${title}`}\n                      aria-hidden\n                    >\n                      <Close />\n                    </DeleteButton>\n                  ) : undefined\n                }\n                aria-hidden\n              >\n                {title}\n              </ToggleListItem>\n            ))}\n          </ToggleList>\n        );\n      }\n      if (!forwardedValue) {\n        return <Placeholder>{placeholder}</Placeholder>;\n      }\n      const option = (options || []).find(\n        (item) => item.value === forwardedValue\n      );\n      return (\n        <Title disabled={disabled} unbordered={unbordered}>\n          {option ? option.title : ''}\n        </Title>\n      );\n    }, [\n      disabled,\n      forwardedValue,\n      locale.deleteLabel,\n      multiple,\n      onDelete,\n      options,\n      placeholder,\n      unbordered,\n    ]);\n\n    const toggleShowClearButton = useMemo(() => {\n      if (!clearVisible) return false;\n      if (multiple) return forwardedValue && forwardedValue.length > 0;\n      return !!forwardedValue;\n    }, [clearVisible, forwardedValue, multiple]);\n\n    const toggleOnClear = useCallback(() => {\n      setForwardedValue(multiple ? [] : null);\n      if (!containerRef.current) return;\n      containerRef.current.focus();\n    }, [containerRef, multiple, setForwardedValue]);\n\n    const toggleRightValue = useMemo(() => {\n      if (loading) return <Loading />;\n      if (toggleShowClearButton) {\n        return (\n          <Button\n            type='ghost'\n            wide='never'\n            size='small'\n            disabled={disabled}\n            onClick={(e) => {\n              toggleOnClear();\n              e.stopPropagation();\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') toggleOnClear();\n              e.stopPropagation();\n            }}\n            aria-label={locale.clearLabel}\n          >\n            <ClearIcon />\n          </Button>\n        );\n      }\n      return (\n        right || (\n          <ToggleIconContainer unbordered={unbordered} disabled={disabled}>\n            {opened ? <Up /> : <Down />}\n          </ToggleIconContainer>\n        )\n      );\n    }, [\n      disabled,\n      loading,\n      locale.clearLabel,\n      opened,\n      right,\n      toggleOnClear,\n      toggleShowClearButton,\n      unbordered,\n    ]);\n\n    const toggleRightHasPaddingValue = useMemo(() => {\n      if (loading) return true;\n      if (toggleShowClearButton) return false;\n      return right ? rightHasPadding : true;\n    }, [loading, right, rightHasPadding, toggleShowClearButton]);\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const windowSize = useSize();\n    const isMinXs = useIsMinWidth('xs');\n    const fontSize = useFontSize(document.body);\n    const { theme } = useTheme();\n\n    const scaleFactor = useMemo(() => {\n      const s = size || 'medium';\n      return ['small', 'medium', 'large'].includes(s)\n        ? theme.sizes[s]\n        : Number(s.replace(/^([0-9]+(\\.[0-9]+)?).*/, '$1')) || 1; // Extract the number\n    }, [size, theme.sizes]);\n\n    const paddingBottom = useMemo(() => {\n      const paddingEm = isMinXs\n        ? theme.menuPaddingVertical\n        : theme.modalBodyPaddingVertical[0];\n      return paddingEm * fontSize * scaleFactor;\n    }, [\n      isMinXs,\n      theme.menuPaddingVertical,\n      theme.modalBodyPaddingVertical,\n      fontSize,\n      scaleFactor,\n    ]);\n\n    const paddingTop = useMemo(\n      () => (searchVisible ? 5 * scaleFactor : paddingBottom),\n      [searchVisible, scaleFactor, paddingBottom]\n    );\n\n    const searchInputHeight = useMemo(\n      () =>\n        searchVisible\n          ? (theme.baseHeight + theme.menuPaddingVertical) *\n            fontSize *\n            scaleFactor\n          : 0,\n      [\n        searchVisible,\n        theme.baseHeight,\n        theme.menuPaddingVertical,\n        fontSize,\n        scaleFactor,\n      ]\n    );\n\n    const itemSize = useMemo(\n      () => theme.menuItemHeight * fontSize * scaleFactor,\n      [theme.menuItemHeight, fontSize, scaleFactor]\n    );\n\n    const height = useMemo(() => {\n      // Modal\n      if (!isMinXs) {\n        const maxHeight =\n          windowSize.height -\n          theme.modalHeaderHeight * fontSize * scaleFactor -\n          searchInputHeight;\n        const curHeight =\n          options.length * itemSize + paddingTop + paddingBottom;\n        return curHeight < maxHeight ? curHeight : maxHeight;\n      }\n      // Popover\n      const count =\n        options.length < visibleCount ? options.length : visibleCount;\n      return count * itemSize + paddingTop + paddingBottom;\n    }, [\n      isMinXs,\n      options.length,\n      visibleCount,\n      itemSize,\n      windowSize.height,\n      theme.modalHeaderHeight,\n      fontSize,\n      scaleFactor,\n      searchInputHeight,\n      paddingTop,\n      paddingBottom,\n    ]);\n\n    const scrollHandler = useRWLoadNext({\n      itemCount: options.length,\n      threshold,\n      itemSize,\n      paddingTop,\n      height,\n      onLoadNext,\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = useCallback(\n      ({ style, ...innerElementRest }) => (\n        <div\n          style={{\n            ...style,\n            height: `${\n              parseFloat(style.height) + paddingTop + paddingBottom\n            }px`,\n          }}\n          role='listbox'\n          id={listBoxId}\n          {...innerElementRest}\n        />\n      ),\n      [listBoxId, paddingBottom, paddingTop]\n    );\n\n    const listItemFn = useCallback(\n      ({ index, style }) => {\n        const {\n          title: optionTitle,\n          value: optionValue,\n          onClick: optionOnClick,\n          ...restOption\n        } = options[index];\n        return (\n          <MenuItem\n            style={{\n              ...style,\n              top: `${\n                parseFloat(style.top ? style.top.toString() : '0') + paddingTop\n              }px`,\n            }}\n            selected={\n              (multiple &&\n                (forwardedValue || []).includes(optionValue || '')) ||\n              (!multiple && forwardedValue === optionValue)\n            }\n            onClick={(e) => {\n              if (!optionValue) return;\n              onSelect(optionValue);\n\n              // Focus the input.\n              // Otherwise, if multiple is false and the user presses enter to select an item,\n              // the input will lose focus.\n              if (containerRef.current && !multiple) {\n                containerRef.current.focus();\n              }\n\n              if (optionOnClick) optionOnClick(e);\n            }}\n            role='option'\n            aria-selected={\n              (multiple &&\n                (forwardedValue || []).includes(optionValue || '')) ||\n              (!multiple && forwardedValue === optionValue)\n            }\n            {...restOption}\n          >\n            {optionTitle}\n          </MenuItem>\n        );\n      },\n      [containerRef, forwardedValue, multiple, onSelect, options, paddingTop]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          unbordered={unbordered}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-disabled={disabled}\n          aria-busy={loading}\n          aria-haspopup='listbox'\n          aria-owns={listBoxId}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <ToggleContainer>\n            {left && (\n              <ThemeOverrider\n                overrides={(t) => ({\n                  buttonPaddingHorizontal: 0.8,\n                  baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n                })}\n              >\n                <ToggleLeftAddon hasPadding={leftHasPadding}>\n                  {left}\n                </ToggleLeftAddon>\n              </ThemeOverrider>\n            )}\n\n            <ToggleContent\n              hasLeft={!!left}\n              hasRight={!!right}\n              unbordered={unbordered}\n            >\n              {toggleContent}\n            </ToggleContent>\n\n            {toggleRightValue && (\n              <ThemeOverrider\n                overrides={(t) => ({\n                  buttonPaddingHorizontal: 0.8,\n                  baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n                })}\n              >\n                <ToggleRightAddon hasPadding={toggleRightHasPaddingValue}>\n                  {toggleRightValue}\n                </ToggleRightAddon>\n              </ThemeOverrider>\n            )}\n          </ToggleContainer>\n        </SelectContainer>\n\n        <SelectMenu\n          trigger={containerRef}\n          visible={opened}\n          onClose={() => setOpened(false)}\n          size={size}\n          width={width}\n          closeOnSelect={!multiple}\n          modalTitle={placeholder}\n          placement={placement}\n        >\n          {searchVisible && (\n            <InputSearchContainer ref={inputSearchContainerRef}>\n              <InputSearch {...searchProps} />\n            </InputSearchContainer>\n          )}\n\n          {options.length > 0 ? (\n            <FixedSizeList\n              width='100%'\n              height={height}\n              itemSize={itemSize}\n              itemCount={options.length}\n              overscanCount={overscanCount}\n              onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}\n              innerElementType={InnerElement}\n            >\n              {listItemFn}\n            </FixedSizeList>\n          ) : (\n            <NotFound>{notFoundText}</NotFound>\n          )}\n        </SelectMenu>\n      </>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}

package/dist/esm/DatePicker/index.js

@@ -9,8 +9,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import Button from '../Button';
 import Modal from '../Modal';
 import Popover from '../Popover';
-import { SelectContainer } from '../Select';
-import { ClearIcon, Content, IconContainer, LeftAddon, Placeholder, RightAddon, Title } from '../Select/SelectToggle';
+import { ClearIcon, ToggleLeftAddon, Placeholder, ToggleRightAddon, SelectContainer, Title, ToggleContent, ToggleIconContainer } from '../Select';
 import TimePicker from '../TimePicker';
 import DatePickerCalendar from './DatePickerCalendar';
 const StyledPopover = styled(Popover)`
@@ -140,7 +139,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
         "aria-label": locale.clearLabel
       }, /*#__PURE__*/React.createElement(ClearIcon, null)));
     }
-    return right || /*#__PURE__*/React.createElement(IconContainer, null, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
+    return right || /*#__PURE__*/React.createElement(ToggleIconContainer, null, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
   }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
   const firstTimePickerRef = useRef(null);
   const secondTimePickerRef = useRef(null);
@@ -255,9 +254,9 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       buttonPaddingHorizontal: 0.8,
       baseHeight: t.selectToggleListItemHeight / t.sizes.small
     })
-  }, /*#__PURE__*/React.createElement(LeftAddon, {
+  }, /*#__PURE__*/React.createElement(ToggleLeftAddon, {
     hasPadding: leftHasPadding
-  }, left)), /*#__PURE__*/React.createElement(Content, {
+  }, left)), /*#__PURE__*/React.createElement(ToggleContent, {
     hasLeft: !!left,
     hasRight: !!right
   }, valueIsSpecified ? /*#__PURE__*/React.createElement(Title, {
@@ -268,7 +267,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       buttonPaddingHorizontal: 0.8,
       baseHeight: t.selectToggleListItemHeight / t.sizes.small
     })
-  }, /*#__PURE__*/React.createElement(RightAddon, {
+  }, /*#__PURE__*/React.createElement(ToggleRightAddon, {
     hasPadding: rightHasPaddingValue
   }, rightValue))), isMinXs ? /*#__PURE__*/React.createElement(StyledPopover, {
     trigger: containerRef,

package/dist/esm/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","onBlur","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","blurHandler","e","valueIsSpecified","rightHasPaddingValue","rightValue","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup calendar.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAEEC,aAAa,EACbC,yBAAyB,EACzBC,iBAAiB,QACZ,8BAA8B;AACrC,SAASC,IAAI,EAAEC,EAAE,QAAQ,kBAAkB;AAC3C,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SACEC,eAAe,EACfC,iBAAiB,EACjBC,WAAW,QACN,kBAAkB;AACzB,OAAOC,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,eAAe,QAAQ,WAAW;AAC3C,SACEC,SAAS,EACTC,OAAO,EACPC,aAAa,EACbC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,KAAK,QACA,wBAAwB;AAC/B,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,kBAAkB,MAAM,sBAAsB;AA+GrD,MAAMC,aAAa,GAAG/B,MAAM,CAACoB,OAAO,CAAE;AACtC,aAAcY,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,iBAAkB;AAC9C,CAAC;AAED,MAAMC,aAAa,GAAGnC,MAAM,CAACoC,GAAI;AACjC;AACA;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrC,MAAM,CAACoC,GAAI;AACxB;AACA,iBAAkBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,UAAW;AAC3C,CAAC;AAED,MAAMC,gBAAgB,GAAGvC,MAAM,CAAC6B,UAAU,CAAE;AAC5C;AACA;AACA,CAAC;AAED,MAAMW,eAAe,GAAG;EAAEC,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAO;AAAE,CAAC;AAEpD,MAAMC,UAAU,GAAG,CAACC,IAAU,EAAEC,IAAkB,KAAK;EACrD,MAAMC,CAAC,GAAG,IAAIC,IAAI,CAAC,CAAC,CAAC;EACrBD,CAAC,CAACE,WAAW,CAACJ,IAAI,CAACK,WAAW,EAAE,CAAC;EACjCH,CAAC,CAACI,QAAQ,CAACN,IAAI,CAACO,QAAQ,EAAE,CAAC;EAC3BL,CAAC,CAACM,OAAO,CAACR,IAAI,CAACS,OAAO,EAAE,CAAC;EACzBP,CAAC,CAACQ,QAAQ,CAAC,CAAC,CAAC;EACbR,CAAC,CAACS,UAAU,CAAC,CAAC,CAAC;EACf,IAAIV,IAAI,EAAE;IACRC,CAAC,CAACQ,QAAQ,CAACT,IAAI,CAACW,QAAQ,EAAE,CAAC;IAC3BV,CAAC,CAACS,UAAU,CAACV,IAAI,CAACY,UAAU,EAAE,CAAC;EACjC;EACA,OAAOX,CAAC;AACV,CAAC;;AAED;AACA;AACA;AACA,MAAMY,UAAU,gBAAG9C,UAAU,CAC3B,CACE;EACE+C,IAAI;EACJC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,eAAe,GAAG,KAAK;EACvBC,WAAW;EACXC,QAAQ,GAAG,KAAK;EAChBC,SAAS,GAAG,KAAK;EACjBC,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,cAAc,GAAG,QAAQ;EACzBC,MAAM,GAAGpE,aAAa;EACtBqE,QAAQ,GAAG,KAAK;EAChBC,YAAY,GAAG,SAAS;EACxBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,OAAO,GAAG,MAAM,CAAC,CAAC;EAClBC,MAAM,GAAG,MAAM,CAAC,CAAC;EACjBC,IAAI;EACJ,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,YAAY,EAAEC,kBAAkB,CAAC,GAAG1E,eAAe,CAACwE,GAAG,CAAC;EAC/D,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGnE,QAAQ,CAACiD,QAAQ,CAAC;EAC9C;EACA,MAAM,CAACmB,cAAc,EAAEC,iBAAiB,CAAC,GAAG7E,iBAAiB,CAAM;IACjEgE,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF7D,SAAS,CAAC,MAAM;IACd,IAAImD,SAAS,EAAEgB,YAAY,CAACM,OAAO,EAAEC,KAAK,EAAE;EAC9C,CAAC,EAAE,CAACvB,SAAS,EAAEgB,YAAY,CAAC,CAAC;EAE7B,MAAMQ,UAAU,GAAGzE,MAAM,CAAC4D,OAAO,CAAC;EAClC9D,SAAS,CAAC,MAAM;IACd2E,UAAU,CAACF,OAAO,GAAGX,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb9D,SAAS,CAAC,MAAM;IACd,IAAI,CAACqE,MAAM,EAAE;MACXM,UAAU,CAACF,OAAO,EAAE;MACpBN,YAAY,CAACM,OAAO,EAAEC,KAAK,EAAE;IAC/B;EACF,CAAC,EAAE,CAACP,YAAY,EAAEE,MAAM,CAAC,CAAC;EAE1B,MAAMO,cAAc,GAAGvF,iBAAiB,CAAC;IACvCkF,cAAc;IACdlB,MAAM;IACNG,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,MAAMoB,YAAY,GAAG9E,WAAW,CAAC,MAAM;IACrCuE,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN1E,WAAW,CACR,OAAOkF,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRF,YAAY,CACb;EACD,MAAMG,OAAO,GAAGxF,aAAa,CAAC,IAAI,CAAC;EAEnC,MAAMyF,WAAW,GAAGlF,WAAW,CAC5BmF,CAAC,IAAK;IACL,IAAI,CAACb,MAAM,EAAEN,MAAM,CAACmB,CAAC,CAAC;EACxB,CAAC,EACD,CAACnB,MAAM,EAAEM,MAAM,CAAC,CACjB;EAED,MAAMc,gBAAgB,GAAGlF,OAAO,CAC9B,MAAM2E,cAAc,KAAKG,SAAS,IAAIH,cAAc,KAAK,IAAI,EAC7D,CAACA,cAAc,CAAC,CACjB;EAED,MAAMQ,oBAAoB,GAAGnF,OAAO,CAAC,MAAM;IACzC,IAAIkF,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAOpC,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEmC,gBAAgB,CAAC,CAAC;EAE9C,MAAME,UAAU,GAAGpF,OAAO,CAAC,MAAM;IAC/B,IAAIkF,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,oBAAC,MAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAEjC,QAAS;QACnB,OAAO,EAAGgC,CAAC,IAAK;UACdV,iBAAiB,CAAC,IAAI,CAAC;UACvBU,CAAC,CAACI,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAGJ,CAAC,IAAK;UAChB,IAAIhC,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACqC,QAAQ,CAACL,CAAC,CAACM,GAAG,CAAC,EAAE;YAClChB,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACL,YAAY,CAACM,OAAO,EAAE;YAC3BN,YAAY,CAACM,OAAO,CAACC,KAAK,EAAE;YAC5BQ,CAAC,CAACO,cAAc,EAAE;YAClBP,CAAC,CAACI,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAY/B,MAAM,CAACmC;MAAW,gBAE9B,oBAAC,SAAS,OAAG,CACN,CACL;IAEV;IACA,OACE3C,KAAK,iBAAI,oBAAC,aAAa,QAAEsB,MAAM,gBAAG,oBAAC,EAAE,OAAG,gBAAG,oBAAC,IAAI,OAAG,CAAiB;EAExE,CAAC,EAAE,CACDF,YAAY,EACZjB,QAAQ,EACRK,MAAM,CAACmC,UAAU,EACjBrB,MAAM,EACNtB,KAAK,EACLyB,iBAAiB,EACjBW,gBAAgB,CACjB,CAAC;EAEF,MAAMQ,kBAAkB,GAAGzF,MAAM,CAAmB,IAAI,CAAC;EACzD,MAAM0F,mBAAmB,GAAG1F,MAAM,CAAmB,IAAI,CAAC;EAC1D,MAAM2F,eAAe,GAAG3F,MAAM,CAAC,KAAK,CAAC;EAErCF,SAAS,CAAC,MAAM;IACd6F,eAAe,CAACpB,OAAO,GAAG,KAAK;EACjC,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,MAAMyB,aAAa,GAAG/F,WAAW,CAC9B+B,IAAU,IAAK;IACd0C,iBAAiB,CAAEuB,IAAI,IAAK;MAC1B,IAAI,CAACrC,KAAK,EAAE,OAAO7B,UAAU,CAACC,IAAI,EAAEiE,IAAI,CAAC;MAEzC,MAAM/D,CAAC,GAAGH,UAAU,CAACC,IAAI,CAAC;MAC1B,MAAMkE,SAAS,GACbD,IAAI,IAAIE,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAIF,eAAe,CAACpB,OAAO,GAClD,CAAC,IAAIxC,IAAI,CAAC8D,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,EAAE,CAAC,EAAEtE,UAAU,CAACC,IAAI,EAAEiE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,CAAC/D,CAAC,EAAEA,CAAC,CAAC;MAEZ6D,eAAe,CAACpB,OAAO,GAAG,CAACoB,eAAe,CAACpB,OAAO;MAClD,OAAOuB,SAAS,CAACI,IAAI,CACnB,CAACC,CAAO,EAAEC,CAAO,KAAKD,CAAC,CAACF,OAAO,EAAE,GAAGG,CAAC,CAACH,OAAO,EAAE,CAChD;IACH,CAAC,CAAC;EACJ,CAAC,EACD,CAACzC,KAAK,EAAEc,iBAAiB,CAAC,CAC3B;EAED,MAAM+B,iBAAiB,GAAGtG,OAAO,CAC/B,mBACE,oBAAC,kBAAkB;IACjB,cAAc,EAAEqD,cAAe;IAC/B,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEgB,cAAe;IACtB,QAAQ,EAAGiC,CAAC,IAAK;MACfV,aAAa,CAACU,CAAC,CAAC;MAChBb,kBAAkB,CAAClB,OAAO,EAAEC,KAAK,EAAE;MACnC,IAAI,CAAClB,QAAQ,KAAK,CAACE,KAAK,IAAI,CAACmC,eAAe,CAACpB,OAAO,CAAC,EAAE;QACrDI,YAAY,EAAE;MAChB;IACF;EAAE,EAEL,EACD,CACEiB,aAAa,EACbjB,YAAY,EACZvB,cAAc,EACdiB,cAAc,EACdhB,MAAM,EACNG,KAAK,EACLF,QAAQ,CACT,CACF;EAED,MAAMiD,kBAAkB,GAAG1G,WAAW,CACnCmF,CAAC,IAAK;IACL,IAAIA,CAAC,CAACwB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjCf,mBAAmB,CAACnB,OAAO,EAAEC,KAAK,EAAE;IACpCF,iBAAiB,CAAC,CAAC,CAACoC,IAAI,CAAC,KAAK;MAC5B,MAAMC,MAAM,GAAG,IAAI5E,IAAI,CAAC2E,IAAI,CAACT,OAAO,EAAE,CAAC;MACvCU,MAAM,CAACrE,QAAQ,CAACqE,MAAM,CAACnE,QAAQ,EAAE,GAAG,CAAC,CAAC;MACtC,OAAO,CAACkE,IAAI,EAAEC,MAAM,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,EACD,CAACrC,iBAAiB,CAAC,CACpB;EAED,MAAMsC,oBAAoB,GAAG/G,WAAW,CACrCmF,CAAC,IAAK;IACL,IAAIA,CAAC,CAACwB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC9B,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,MAAMkC,aAAa,GAAG9G,OAAO,CAC3B,MACEuD,QAAQ,IAAIe,cAAc,gBACxB,oBAAC,aAAa,QACX0B,KAAK,CAACC,OAAO,CAAC3B,cAAc,CAAC,gBAC5B,uDACE,oBAAC,gBAAgB;IACf,GAAG,EAAEoB,kBAAmB;IACxB,SAAS;IACT,QAAQ,EAAEzC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE6C,cAAc,CAAC,CAAC,CAAE;IACzB,QAAQ,EAAGiC,CAAC,IAAKhC,iBAAiB,CAAC,CAACgC,CAAC,EAAEjC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAE;IAC3D,SAAS,EAAGW,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAIgC,CAAC,CAACM,GAAG,KAAK,OAAO,EAAE;QACrBlB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEoC;EAAmB,EAC5B,eACF,oBAAC,IAAI,iBAAS,eACd,oBAAC,gBAAgB;IACf,GAAG,EAAEb,mBAAoB;IACzB,QAAQ,EAAE1C,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE6C,cAAc,CAAC,CAAC,CAAE;IACzB,QAAQ,EAAGiC,CAAC,IAAKhC,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEiC,CAAC,CAAC,CAAE;IAC3D,SAAS,EAAGtB,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAIgC,CAAC,CAACM,GAAG,KAAK,OAAO,EAAE;QACrBlB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEyC;EAAqB,EAC9B,CACD,gBAEH,oBAAC,gBAAgB;IACf,GAAG,EAAEnB,kBAAmB;IACxB,SAAS;IACT,QAAQ,EAAEzC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE6C,cAAe;IACtB,QAAQ,EAAEC,iBAAkB;IAC5B,SAAS,EAAGU,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAIgC,CAAC,CAACM,GAAG,KAAK,OAAO,EAAE;QACrBlB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEyC;EAAqB,EAEjC,CACa,GACd,IAAI,EACV,CACEA,oBAAoB,EACpB5D,QAAQ,EACRqB,cAAc,EACdF,MAAM,EACNG,iBAAiB,EACjBhB,QAAQ,EACRiD,kBAAkB,EAClBhD,YAAY,CACb,CACF;EAED,oBACE,uDACE,oBAAC,eAAe;IACd,MAAM,EAAEY,MAAO;IACf,QAAQ,EAAEnB,QAAS;IACnB,IAAI,EAAEc,IAAK;IACX,QAAQ,EAAE,CAACd,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,MAAM;MACb,IAAIA,QAAQ,EAAE;MACdoB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAGa,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACqC,QAAQ,CAACL,CAAC,CAACM,GAAG,CAAC,EAAE;QAClClB,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBa,CAAC,CAACO,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAGP,CAAC,IAAKA,CAAC,CAACO,cAAc,EAAG;IACvC,MAAM,EAAER,WAAY;IACpB,IAAI,EAAC,UAAU;IACf,cACEV,cAAc,GACVnF,yBAAyB,CAACmF,cAAc,EAAEhB,MAAM,CAAC,GACjDwB,SACL;IACD,iBAAe7B;EAAS,GACpBe,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBvB,IAAI,iBACH,oBAAC,cAAc;IACb,SAAS,EAAGmE,CAAC,KAAM;MACjBC,uBAAuB,EAAE,GAAG;MAC5BzF,UAAU,EAAEwF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;IACrD,CAAC;EAAE,gBAEH,oBAAC,SAAS;IAAC,UAAU,EAAEtE;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,oBAAC,OAAO;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GACzCoC,gBAAgB,gBACf,oBAAC,KAAK;IAAC,QAAQ,EAAEjC,QAAS;IAAC;EAAW,GACnC0B,cAAc,CACT,gBAER,oBAAC,WAAW,QAAE3B,WAAW,CAC1B,CACO,EAEToC,UAAU,iBACT,oBAAC,cAAc;IACb,SAAS,EAAG2B,CAAC,KAAM;MACjBC,uBAAuB,EAAE,GAAG;MAC5BzF,UAAU,EAAEwF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;IACrD,CAAC;EAAE,gBAEH,oBAAC,UAAU;IAAC,UAAU,EAAEhC;EAAqB,GAC1CC,UAAU,CACA,CAEhB,CACe,EAEjBL,OAAO,gBACN,oBAAC,aAAa;IACZ,OAAO,EAAEb,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEE,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEb;EAAK,GAEVuC,iBAAiB,EACjBQ,aAAa,CACA,gBAEhB,oBAAC,KAAK;IACJ,KAAK,EAAE9D,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEoB,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEb;EAAK,GAEVuC,iBAAiB,EACjBQ,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAEDnE,UAAU,CAACyE,WAAW,GAAG,YAAY;AAErC,eAAezE,UAAU"}
+{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","ClearIcon","ToggleLeftAddon","Placeholder","ToggleRightAddon","SelectContainer","Title","ToggleContent","ToggleIconContainer","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","onBlur","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","blurHandler","e","valueIsSpecified","rightHasPaddingValue","rightValue","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport {\n  ClearIcon,\n  ToggleLeftAddon,\n  Placeholder,\n  ToggleRightAddon,\n  SelectContainer,\n  Title,\n  ToggleContent,\n  ToggleIconContainer,\n} from '../Select';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup calendar.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || (\n          <ToggleIconContainer>\n            {opened ? <Up /> : <Down />}\n          </ToggleIconContainer>\n        )\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleLeftAddon hasPadding={leftHasPadding}>\n                {left}\n              </ToggleLeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <ToggleContent hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </ToggleContent>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleRightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </ToggleRightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

package/dist/esm/MenuGroup/index.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useContext, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { clr } from '@os-design/theming';
+import { m } from '@os-design/media';
+import { MenuContext } from '@os-design/menu-utils';
 import { ellipsisStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
 import { useForwardedState } from '@os-design/utils';
-import { m } from '@os-design/media';
-import { useSelectHandler, MenuContext } from '@os-design/menu-utils';
+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import MenuItem from '../MenuItem';
 const Title = styled.div`
   font-weight: 500;
@@ -38,7 +38,8 @@ const Container = styled.div`
  */
 const MenuGroup = /*#__PURE__*/forwardRef(({
   title,
-  maxSelectedItems = 1,
+  multiple = false,
+  maxSelectedItems = 0,
   value,
   defaultValue,
   onChange = () => {},
@@ -48,39 +49,50 @@ const MenuGroup = /*#__PURE__*/forwardRef(({
   const {
     closeOnSelect
   } = useContext(MenuContext);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [forwardedValue, setForwardedValue] = useForwardedState({
     value,
     defaultValue,
     onChange
   });
-  const onSelect = useSelectHandler({
-    value: forwardedValue || [],
-    onChange: setForwardedValue,
-    maxSelectedItems
-  });
-  const menuItems = useMemo(() => {
-    const selectedItems = forwardedValue || [];
-    return React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child) || child.type !== MenuItem) return child;
-      const {
-        value: childValue,
-        onClick: childOnClick
-      } = child.props;
-      return /*#__PURE__*/React.cloneElement(child, {
-        key: childValue,
-        selected: selectedItems.includes(childValue),
-        onClick: e => {
-          if (!childValue) return;
-          onSelect(childValue);
-          if (childOnClick) childOnClick(e);
-        },
-        ...(!closeOnSelect ? {
-          role: maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',
-          'aria-checked': selectedItems.includes(childValue)
-        } : {})
-      });
+  const onSelect = useCallback(v => {
+    if (multiple) {
+      // Delete the value because it was already selected
+      if ((forwardedValue || []).includes(v)) {
+        setForwardedValue((forwardedValue || []).filter(item => item !== v));
+        return;
+      }
+
+      // Add a new value if the number of selected items is less than max
+      if (maxSelectedItems === 0 || (forwardedValue || []).length < maxSelectedItems) {
+        setForwardedValue([...(forwardedValue || []), v]);
+        return;
+      }
+      return;
+    }
+    setForwardedValue(v);
+  }, [forwardedValue, maxSelectedItems, multiple, setForwardedValue]);
+  const menuItems = useMemo(() => React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child) || child.type !== MenuItem) return child;
+    const {
+      value: childValue,
+      onClick: childOnClick
+    } = child.props;
+    const selected = multiple && (forwardedValue || []).includes(childValue) || !multiple && forwardedValue === childValue;
+    return /*#__PURE__*/React.cloneElement(child, {
+      key: childValue,
+      selected,
+      onClick: e => {
+        if (!childValue) return;
+        onSelect(childValue);
+        if (childOnClick) childOnClick(e);
+      },
+      ...(!closeOnSelect ? {
+        role: maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',
+        'aria-checked': selected
+      } : {})
     });
-  }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);
+  }), [children, closeOnSelect, forwardedValue, maxSelectedItems, multiple, onSelect]);
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: maxSelectedItems === 1 ? 'radiogroup' : 'group'
   }, rest, {

package/dist/esm/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","m","MenuContext","ellipsisStyles","clr","useForwardedState","React","forwardRef","useCallback","useContext","useMemo","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","multiple","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","v","includes","filter","item","length","menuItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","selected","cloneElement","key","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { useForwardedState } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'value' | 'onChange' | 'ref'\n>;\ninterface BaseMenuGroupProps<T> extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n}\ninterface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      multiple = false,\n      maxSelectedItems = 0,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const menuItems = useMemo(\n      () =>\n        React.Children.map(children, (child) => {\n          if (!React.isValidElement(child) || child.type !== MenuItem)\n            return child;\n          const { value: childValue, onClick: childOnClick } = child.props;\n          const selected =\n            (multiple && (forwardedValue || []).includes(childValue)) ||\n            (!multiple && forwardedValue === childValue);\n          return React.cloneElement<any>(child, {\n            key: childValue,\n            selected,\n            onClick: (e) => {\n              if (!childValue) return;\n              onSelect(childValue);\n              if (childOnClick) childOnClick(e);\n            },\n            ...(!closeOnSelect\n              ? {\n                  role:\n                    maxSelectedItems === 1\n                      ? 'menuitemradio'\n                      : 'menuitemcheckbox',\n                  'aria-checked': selected,\n                }\n              : {}),\n          });\n        }),\n      [\n        children,\n        closeOnSelect,\n        forwardedValue,\n        maxSelectedItems,\n        multiple,\n        onSelect,\n      ]\n    );\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}