@os-design/core 1.0.183 → 1.0.185

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":"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"}
+{"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/FormItem/index.js

@@ -1,17 +1,20 @@
 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, useCallback, useContext, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { sizeStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
 import { clr, ThemeOverrider } from '@os-design/theming';
-import { css } from '@emotion/react';
-import firstChildHasType from './utils/firstChildHasType';
-import TextArea from '../TextArea';
-import TextAreaSkeleton from '../TextAreaSkeleton';
-import InputSkeleton from '../InputSkeleton';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
+import Checkbox from '../Checkbox';
+import CheckboxSkeleton from '../CheckboxSkeleton';
 import FormConfigContext from '../Form/FormConfigContext';
+import InputSkeleton from '../InputSkeleton';
+import RadioGroup from '../RadioGroup';
+import RadioGroupSkeleton from '../RadioGroupSkeleton';
 import Switch from '../Switch';
 import SwitchSkeleton from '../SwitchSkeleton';
+import TextArea from '../TextArea';
+import TextAreaSkeleton from '../TextAreaSkeleton';
+import firstChildHasType from './utils/firstChildHasType';
 const Container = styled('div', omitEmotionProps('size'))`
   ${sizeStyles};
 `;
@@ -26,14 +29,13 @@ const Optional = styled.span`
   color: ${p => clr(p.theme.formItemColorOptional)};
   margin-left: 0.3em;
 `;
-const hasErrorStyles = p => p.hasError && css`
-    color: ${clr(p.theme.formItemColorError)};
-  `;
-const Help = styled('div', omitEmotionProps('hasError'))`
+const Help = styled.div`
   margin-top: 0.1em;
   font-size: ${p => p.theme.sizes.small}em;
   color: ${p => clr(p.theme.formItemColorHelp)};
-  ${hasErrorStyles};
+`;
+const Error = styled(Help)`
+  color: ${p => clr(p.theme.formItemColorError)};
 `;
 
 /**
@@ -42,8 +44,8 @@ const Help = styled('div', omitEmotionProps('hasError'))`
 const FormItem = /*#__PURE__*/forwardRef(({
   label,
   help,
+  error,
   optional = false,
-  hasError = false,
   loading = false,
   id,
   children,
@@ -55,24 +57,33 @@ const FormItem = /*#__PURE__*/forwardRef(({
   const containerId = useMemo(() => id || Math.random().toString(36).slice(2, 11), [id]);
   const fieldId = useMemo(() => `field-${containerId}`, [containerId]);
   const helpId = useMemo(() => `help-${containerId}`, [containerId]);
-  const renderChildren = useCallback(() => {
-    const c = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+  const input = useMemo(() => {
+    const c = /*#__PURE__*/React.isValidElement(children) ?
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.cloneElement(children, {
       id: fieldId,
-      'aria-invalid': hasError,
+      'aria-invalid': !!error,
       'aria-describedby': help ? helpId : undefined
     }) : children;
-    if (!hasError) return c;
+    if (!error) return c;
     return /*#__PURE__*/React.createElement(ThemeOverrider, {
       overrides: theme => ({
         inputColorBorder: theme.formItemColorError
       })
     }, c);
-  }, [children, fieldId, help, helpId, hasError]);
-  const renderSkeleton = useCallback(() => {
-    if (firstChildHasType(children, TextArea)) return /*#__PURE__*/React.createElement(TextAreaSkeleton, null);
-    if (firstChildHasType(children, Switch)) return /*#__PURE__*/React.createElement(SwitchSkeleton, null);
+  }, [children, error, fieldId, help, helpId]);
+  const firstTypeIs = useCallback(component => firstChildHasType(children, component), [children]);
+  const skeleton = useMemo(() => {
+    if (firstTypeIs(Checkbox)) {
+      const firstChild = React.Children.toArray(children)[0];
+      return /*#__PURE__*/React.createElement(CheckboxSkeleton, null, /*#__PURE__*/React.isValidElement(firstChild) && firstChild.props.children);
+    }
+    if (firstTypeIs(RadioGroup)) return /*#__PURE__*/React.createElement(RadioGroupSkeleton, null);
+    if (firstTypeIs(Switch)) return /*#__PURE__*/React.createElement(SwitchSkeleton, null);
+    if (firstTypeIs(TextArea)) return /*#__PURE__*/React.createElement(TextAreaSkeleton, null);
     return /*#__PURE__*/React.createElement(InputSkeleton, null);
-  }, [children]);
+  }, [children, firstTypeIs]);
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: "group",
     id: id
@@ -80,9 +91,10 @@ const FormItem = /*#__PURE__*/forwardRef(({
     ref: ref
   }), label && /*#__PURE__*/React.createElement(Label, {
     htmlFor: fieldId
-  }, label, optional && /*#__PURE__*/React.createElement(Optional, null, "(", optionalText, ")")), loading ? renderSkeleton() : renderChildren(), help && /*#__PURE__*/React.createElement(Help, {
-    hasError: hasError,
-    "aria-live": hasError ? 'polite' : undefined,
+  }, label, optional && /*#__PURE__*/React.createElement(Optional, null, "(", optionalText, ")")), loading ? skeleton : input, error ? /*#__PURE__*/React.createElement(Error, {
+    "aria-live": "polite",
+    id: helpId
+  }, error) : help && /*#__PURE__*/React.createElement(Help, {
     id: helpId
   }, help));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","ThemeOverrider","omitEmotionProps","React","forwardRef","useCallback","useContext","useMemo","Checkbox","CheckboxSkeleton","FormConfigContext","InputSkeleton","RadioGroup","RadioGroupSkeleton","Switch","SwitchSkeleton","TextArea","TextAreaSkeleton","firstChildHasType","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","help","error","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","input","c","isValidElement","cloneElement","undefined","inputColorBorder","firstTypeIs","component","skeleton","firstChild","Children","toArray","props","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport Checkbox from '../Checkbox';\nimport CheckboxSkeleton from '../CheckboxSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport InputSkeleton from '../InputSkeleton';\nimport RadioGroup from '../RadioGroup';\nimport RadioGroupSkeleton from '../RadioGroupSkeleton';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport firstChildHasType from './utils/firstChildHasType';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * The error message located at the bottom of the field.\n   * If specified, the field has a red border.\n   * @default undefined\n   */\n  error?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n  color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      error,\n      optional = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const input = useMemo(() => {\n      const c = React.isValidElement(children)\n        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': !!error,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!error) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, error, fieldId, help, helpId]);\n\n    const firstTypeIs = useCallback(\n      (component: React.FC) => firstChildHasType(children, component),\n      [children]\n    );\n\n    const skeleton = useMemo(() => {\n      if (firstTypeIs(Checkbox)) {\n        const firstChild = React.Children.toArray(children)[0];\n        return (\n          <CheckboxSkeleton>\n            {React.isValidElement(firstChild) && firstChild.props.children}\n          </CheckboxSkeleton>\n        );\n      }\n      if (firstTypeIs(RadioGroup)) return <RadioGroupSkeleton />;\n      if (firstTypeIs(Switch)) return <SwitchSkeleton />;\n      if (firstTypeIs(TextArea)) return <TextAreaSkeleton />;\n      return <InputSkeleton />;\n    }, [children, firstTypeIs]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? skeleton : input}\n        {error ? (\n          <Error aria-live='polite' id={helpId}>\n            {error}\n          </Error>\n        ) : (\n          help && <Help id={helpId}>{help}</Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}