@os-design/core 1.0.138 → 1.0.142

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","inputPaddingHorizontal","openedStyles","opened","unbordered","clr","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","transitionStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","styled","InputContainer","omitEmotionProps","SelectMenu","Menu","m","min","xs","width","NotFound","div","menuItemHeight","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","forwardRef","ref","options","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","size","placement","rest","useForwardedRef","containerRef","mergedContainerRef","useState","setWidth","inputSearchContainerRef","useRef","setOpened","useForwardedState","forwardedValue","setForwardedValue","resizeHandler","useCallback","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","useBrowserLayoutEffect","useResizeObserver","useEvent","undefined","setAttribute","selectedItems","useMemo","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","focus","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useEvent,\n  useForwardedRef,\n  useForwardedState,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport { InputContainer } from '../Input';\nimport Menu from '../Menu';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport SelectToggle from './SelectToggle';\nimport SelectList, { OptionProps } from './SelectList';\nimport { PopoverProps } from '../Popover';\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 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 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\nconst paddingStyles = (p) => {\n  const paddingVertical =\n    (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n  return css`\n    padding: calc(${paddingVertical}em - 1px) 3.5em\n      calc(${paddingVertical}em - 1px) ${p.theme.inputPaddingHorizontal}em;\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    padding-right: 1.8em;\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      placeholder,\n      searchVisible = false,\n      searchProps = {},\n      notFoundText = 'Not found',\n      unbordered = false,\n      loading = false,\n      disabled = 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      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(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\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    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          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            unbordered={unbordered}\n            multiple={maxSelectedItems !== 1}\n            disabled={disabled}\n            clearVisible={clearVisible}\n            placeholder={placeholder}\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":["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","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","size","placement","rest","useForwardedRef","containerRef","mergedContainerRef","useState","setWidth","inputSearchContainerRef","useRef","setOpened","useForwardedState","forwardedValue","setForwardedValue","resizeHandler","useCallback","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","useBrowserLayoutEffect","useResizeObserver","useEvent","undefined","setAttribute","selectedItems","useMemo","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","focus","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useEvent,\n  useForwardedRef,\n  useForwardedState,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport { InputContainer } from '../Input';\nimport Menu from '../Menu';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport SelectToggle from './SelectToggle';\nimport SelectList, { OptionProps } from './SelectList';\nimport { PopoverProps } from '../Popover';\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 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\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      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      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(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\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    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          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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"}

package/dist/esm/DatePicker/index.js

@@ -5,8 +5,9 @@ import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/util
 import { Down, Up } from '@os-design/icons';
 import { useIsMinWidth } from '@os-design/media';
 import { defaultLocale, defaultFormat, getAccessibilityDateLabel } from '@os-design/date-picker-utils';
+import { ThemeOverrider } from '@os-design/theming';
 import { SelectContainer } from '../Select';
-import { ClearButtonContainer, ClearIcon, IconContainer, Placeholder, Title } from '../Select/SelectToggle';
+import { Content, LeftAddon, RightAddon, ClearIcon, IconContainer, Placeholder, Title } from '../Select/SelectToggle';
 import Popover from '../Popover';
 import Modal from '../Modal';
 import DatePickerCalendar from './DatePickerCalendar';
@@ -16,6 +17,10 @@ import Button from '../Button';
  * The component to choose a date.
  */
 const DatePicker = /*#__PURE__*/forwardRef(({
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
   placeholder,
   disabled = false,
   format = defaultFormat,
@@ -52,6 +57,41 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       closeHandler();
     }
   });
+  const valueIsSpecified = useMemo(() => formattedValue !== undefined && formattedValue !== null, [formattedValue]);
+  const rightValue = useMemo(() => {
+    if (valueIsSpecified) {
+      return /*#__PURE__*/React.createElement("div", {
+        "aria-hidden": true
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        disabled: disabled,
+        onClick: e => {
+          setForwardedValue(null);
+          e.stopPropagation();
+        },
+        onKeyDown: e => {
+          if (disabled) return;
+
+          if (['Enter', ' '].includes(e.key)) {
+            setForwardedValue(null);
+            if (!containerRef.current) return;
+            containerRef.current.focus();
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        "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));
+  }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
+  const rightHasPaddingValue = useMemo(() => {
+    if (valueIsSpecified) return false;
+    return right ? rightHasPadding : true;
+  }, [right, rightHasPadding, valueIsSpecified]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
     opened: opened,
     disabled: disabled,
@@ -75,33 +115,27 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     "aria-disabled": disabled
   }, rest, {
     ref: mergedContainerRef
-  }), formattedValue !== undefined && formattedValue !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
+  }), left && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: 0.8,
+      baseHeight: t.selectToggleListItemHeight / t.sizes.small
+    })
+  }, /*#__PURE__*/React.createElement(LeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/React.createElement(Content, {
+    hasLeft: !!left,
+    hasRight: !!right
+  }, valueIsSpecified ? /*#__PURE__*/React.createElement(Title, {
     disabled: disabled,
     "aria-hidden": true
-  }, formattedValue), /*#__PURE__*/React.createElement(ClearButtonContainer, {
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    wide: "never",
-    size: "small",
-    disabled: disabled,
-    onClick: e => {
-      setForwardedValue(null);
-      e.stopPropagation();
-    },
-    onKeyDown: e => {
-      if (disabled) return;
-
-      if (['Enter', ' '].includes(e.key)) {
-        setForwardedValue(null);
-        if (!containerRef.current) return;
-        containerRef.current.focus();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    "aria-label": locale.clearLabel
-  }, /*#__PURE__*/React.createElement(ClearIcon, null)))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Placeholder, null, placeholder), /*#__PURE__*/React.createElement(IconContainer, null, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null)))), isMinXs ? /*#__PURE__*/React.createElement(Popover, {
+  }, formattedValue) : /*#__PURE__*/React.createElement(Placeholder, null, placeholder)), rightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: 0.8,
+      baseHeight: t.selectToggleListItemHeight / t.sizes.small
+    })
+  }, /*#__PURE__*/React.createElement(RightAddon, {
+    hasPadding: rightHasPaddingValue
+  }, rightValue))), isMinXs ? /*#__PURE__*/React.createElement(Popover, {
     trigger: containerRef,
     placement: "bottom-start",
     visible: opened,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","SelectContainer","ClearButtonContainer","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","closeHandler","window","undefined","isMinXs","calendar","v","e","includes","key","preventDefault","stopPropagation","current","focus","clearLabel","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearButtonContainer,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\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   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => 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   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\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 calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\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          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {formattedValue !== undefined && formattedValue !== null ? (\n            <>\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n              <ClearButtonContainer 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              </ClearButtonContainer>\n            </>\n          ) : (\n            <>\n              <Placeholder>{placeholder}</Placeholder>\n              <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n            </>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\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":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","ThemeOverrider","SelectContainer","Content","LeftAddon","RightAddon","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","closeHandler","window","undefined","isMinXs","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n  Content,\n  LeftAddon,\n  RightAddon,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps 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   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => 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   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\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      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\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 calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\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 rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\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          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\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          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

package/dist/esm/Select/SelectToggle.js

@@ -3,10 +3,31 @@ import styled from '@emotion/styled';
 import { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';
 import { ellipsisStyles, resetButtonStyles, transitionStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
-import { clr } from '@os-design/theming';
+import { clr, ThemeOverrider } from '@os-design/theming';
 import { css } from '@emotion/react';
 import Tag from '../Tag';
 import Button from '../Button';
+export const Container = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`;
+
+const notHasLeftStyles = p => !p.hasLeft && css`
+    padding-left: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+const notHasRightStyles = p => !p.hasRight && css`
+    padding-right: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+export const Content = styled('div', omitEmotionProps('hasLeft', 'hasRight'))`
+  flex: 1;
+  ${notHasLeftStyles};
+  ${notHasRightStyles};
+  ${ellipsisStyles};
+`;
 export const Placeholder = styled.span`
   color: ${p => clr(p.theme.inputColorPlaceholder)};
   ${ellipsisStyles};
@@ -75,32 +96,48 @@ const unborderedIconContainerStyles = p => p.unbordered && css`
   `;
 
 export const IconContainer = styled('span', omitEmotionProps('unbordered', 'disabled'))`
-  position: absolute;
-  top: 0;
-  right: ${p => p.theme.inputPaddingHorizontal}em;
-  bottom: 0;
-
-  display: flex;
-  align-items: center;
   color: ${p => clr(p.theme.selectColorIcon)};
-
+  line-height: 1;
   ${unborderedIconContainerStyles};
 `;
-export const ClearButtonContainer = styled(IconContainer)`
-  right: 0;
-`;
 export const ClearIcon = styled(CloseCircle)`
   transform: scale(1.2) !important;
 `;
+const Addon = styled('span', omitEmotionProps('hasPadding'))`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  color: ${p => clr(p.theme.inputColorPlaceholder)};
+
+  svg {
+    transform: scale(1.2);
+  }
+`;
+export const LeftAddon = styled(Addon)`
+  padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+export const RightAddon = styled(Addon)`
+  padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
 
 const SelectToggle = ({
   selectedItems,
   onDelete,
   onClear,
   opened,
-  unbordered,
   multiple,
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
   placeholder,
+  unbordered,
   loading,
   disabled,
   clearVisible,
@@ -136,31 +173,56 @@ const SelectToggle = ({
       unbordered: unbordered
     }, selectedItems[0].title);
   }, [selectedItems, multiple, disabled, unbordered, placeholder, locale.deleteLabel, onDelete]);
-  const icon = useMemo(() => {
+  const showClearButton = useMemo(() => clearVisible && selectedItems.length > 0, [clearVisible, selectedItems.length]);
+  const rightValue = useMemo(() => {
     if (loading) return /*#__PURE__*/React.createElement(Loading, null);
-    return opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null);
-  }, [loading, opened]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderContent(), clearVisible && selectedItems.length > 0 ? /*#__PURE__*/React.createElement(ClearButtonContainer, {
-    unbordered: unbordered,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    wide: "never",
-    size: "small",
-    disabled: disabled,
-    onClick: e => {
-      onClear();
-      e.stopPropagation();
-    },
-    onKeyDown: e => {
-      if (e.key === 'Enter') onClear();
-      e.stopPropagation();
-    },
-    "aria-label": locale.clearLabel
-  }, /*#__PURE__*/React.createElement(ClearIcon, null))) : /*#__PURE__*/React.createElement(IconContainer, {
-    unbordered: unbordered,
-    disabled: disabled
-  }, icon));
+
+    if (showClearButton) {
+      return /*#__PURE__*/React.createElement(Button, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        disabled: disabled,
+        onClick: e => {
+          onClear();
+          e.stopPropagation();
+        },
+        onKeyDown: e => {
+          if (e.key === 'Enter') onClear();
+          e.stopPropagation();
+        },
+        "aria-label": locale.clearLabel
+      }, /*#__PURE__*/React.createElement(ClearIcon, null));
+    }
+
+    return right || /*#__PURE__*/React.createElement(IconContainer, {
+      unbordered: unbordered,
+      disabled: disabled
+    }, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
+  }, [disabled, loading, locale.clearLabel, onClear, opened, right, showClearButton, unbordered]);
+  const rightHasPaddingValue = useMemo(() => {
+    if (loading) return true;
+    if (showClearButton) return false;
+    return right ? rightHasPadding : true;
+  }, [loading, right, rightHasPadding, showClearButton]);
+  return /*#__PURE__*/React.createElement(Container, null, left && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: 0.8,
+      baseHeight: t.selectToggleListItemHeight / t.sizes.small
+    })
+  }, /*#__PURE__*/React.createElement(LeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/React.createElement(Content, {
+    hasLeft: !!left,
+    hasRight: !!right
+  }, renderContent()), rightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: 0.8,
+      baseHeight: t.selectToggleListItemHeight / t.sizes.small
+    })
+  }, /*#__PURE__*/React.createElement(RightAddon, {
+    hasPadding: rightHasPaddingValue
+  }, rightValue)));
 };
 
 SelectToggle.displayName = 'SelectToggle';

package/dist/esm/Select/SelectToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectToggle.js","names":["React","useCallback","useMemo","styled","Up","Down","Loading","Close","CloseCircle","ellipsisStyles","resetButtonStyles","transitionStyles","omitEmotionProps","clr","css","Tag","Button","Placeholder","span","p","theme","inputColorPlaceholder","unborderedTitleStyles","unbordered","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","selectToggleListItemHeight","List","div","selectToggleListItemGap","DeleteButton","button","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","unborderedIconContainerStyles","IconContainer","inputPaddingHorizontal","selectColorIcon","ClearButtonContainer","ClearIcon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","placeholder","loading","clearVisible","locale","renderContent","length","map","title","value","e","stopPropagation","deleteLabel","undefined","icon","key","clearLabel","displayName"],"sources":["../../../src/Select/SelectToggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Tag from '../Tag';\nimport Button from '../Button';\nimport { SelectLocale } from './utils/defaultLocale';\n\ninterface SelectToggleProps {\n  selectedItems: Array<{ title: string; value: string }>;\n  onDelete: (value: string) => void;\n  onClear: () => void;\n  opened: boolean;\n  multiple: boolean;\n  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\n}\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst unborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectToggleProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${unborderedTitleStyles};\n  ${disabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ListItemProps = Pick<SelectToggleProps, 'disabled'>;\nconst ListItem = styled(Tag, omitEmotionProps('disabled'))<ListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${disabledStyles};\n`;\n\nconst List = 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 unborderedIconContainerStyles = (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 IconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const IconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<IconContainerProps>`\n  position: absolute;\n  top: 0;\n  right: ${(p) => p.theme.inputPaddingHorizontal}em;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n\n  ${unborderedIconContainerStyles};\n`;\n\nexport const ClearButtonContainer = styled(IconContainer)`\n  right: 0;\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  unbordered,\n  multiple,\n  placeholder,\n  loading,\n  disabled,\n  clearVisible,\n  locale,\n}) => {\n  const renderContent = useCallback(() => {\n    if (selectedItems.length === 0) {\n      return <Placeholder>{placeholder}</Placeholder>;\n    }\n    if (multiple) {\n      return (\n        <List>\n          {selectedItems.map(({ title, value }) => (\n            <ListItem\n              key={value}\n              disabled={disabled}\n              right={\n                !disabled ? (\n                  <DeleteButton\n                    onClick={(e) => {\n                      onDelete(value);\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            </ListItem>\n          ))}\n        </List>\n      );\n    }\n    return (\n      <Title disabled={disabled} unbordered={unbordered}>\n        {selectedItems[0].title}\n      </Title>\n    );\n  }, [\n    selectedItems,\n    multiple,\n    disabled,\n    unbordered,\n    placeholder,\n    locale.deleteLabel,\n    onDelete,\n  ]);\n\n  const icon = useMemo(() => {\n    if (loading) return <Loading />;\n    return opened ? <Up /> : <Down />;\n  }, [loading, opened]);\n\n  return (\n    <>\n      {renderContent()}\n      {clearVisible && selectedItems.length > 0 ? (\n        <ClearButtonContainer unbordered={unbordered} disabled={disabled}>\n          <Button\n            type='ghost'\n            wide='never'\n            size='small'\n            disabled={disabled}\n            onClick={(e) => {\n              onClear();\n              e.stopPropagation();\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') onClear();\n              e.stopPropagation();\n            }}\n            aria-label={locale.clearLabel}\n          >\n            <ClearIcon />\n          </Button>\n        </ClearButtonContainer>\n      ) : (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {icon}\n        </IconContainer>\n      )}\n    </>\n  );\n};\n\nSelectToggle.displayName = 'SelectToggle';\n\nexport default SelectToggle;\n"],"mappings":"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"}
+{"version":3,"file":"SelectToggle.js","names":["React","useCallback","useMemo","styled","Up","Down","Loading","Close","CloseCircle","ellipsisStyles","resetButtonStyles","transitionStyles","omitEmotionProps","clr","ThemeOverrider","css","Tag","Button","Container","div","notHasLeftStyles","p","hasLeft","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","Content","Placeholder","span","inputColorPlaceholder","unborderedTitleStyles","unbordered","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","selectToggleListItemHeight","List","selectToggleListItemGap","DeleteButton","button","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","unborderedIconContainerStyles","IconContainer","selectColorIcon","ClearIcon","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","left","leftHasPadding","right","rightHasPadding","placeholder","loading","clearVisible","locale","renderContent","length","map","title","value","e","stopPropagation","deleteLabel","undefined","showClearButton","rightValue","key","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","sizes","small","displayName"],"sources":["../../../src/Select/SelectToggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Tag from '../Tag';\nimport Button from '../Button';\nimport { SelectLocale } from './utils/defaultLocale';\n\ninterface SelectToggleProps {\n  selectedItems: Array<{ title: string; value: string }>;\n  onDelete: (value: string) => void;\n  onClear: () => void;\n  opened: boolean;\n  multiple: boolean;\n  left?: React.ReactNode;\n  leftHasPadding?: boolean;\n  right?: React.ReactNode;\n  rightHasPadding?: boolean;\n  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\n}\n\nexport const Container = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const Content = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<ContentProps>`\n  flex: 1;\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n  ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst unborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectToggleProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${unborderedTitleStyles};\n  ${disabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ListItemProps = Pick<SelectToggleProps, 'disabled'>;\nconst ListItem = styled(Tag, omitEmotionProps('disabled'))<ListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${disabledStyles};\n`;\n\nconst List = 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 unborderedIconContainerStyles = (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 IconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const IconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<IconContainerProps>`\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n  line-height: 1;\n  ${unborderedIconContainerStyles};\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 LeftAddon = 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 RightAddon = 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\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  multiple,\n  left,\n  leftHasPadding = false,\n  right,\n  rightHasPadding = false,\n  placeholder,\n  unbordered,\n  loading,\n  disabled,\n  clearVisible,\n  locale,\n}) => {\n  const renderContent = useCallback(() => {\n    if (selectedItems.length === 0) {\n      return <Placeholder>{placeholder}</Placeholder>;\n    }\n    if (multiple) {\n      return (\n        <List>\n          {selectedItems.map(({ title, value }) => (\n            <ListItem\n              key={value}\n              disabled={disabled}\n              right={\n                !disabled ? (\n                  <DeleteButton\n                    onClick={(e) => {\n                      onDelete(value);\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            </ListItem>\n          ))}\n        </List>\n      );\n    }\n    return (\n      <Title disabled={disabled} unbordered={unbordered}>\n        {selectedItems[0].title}\n      </Title>\n    );\n  }, [\n    selectedItems,\n    multiple,\n    disabled,\n    unbordered,\n    placeholder,\n    locale.deleteLabel,\n    onDelete,\n  ]);\n\n  const showClearButton = useMemo(\n    () => clearVisible && selectedItems.length > 0,\n    [clearVisible, selectedItems.length]\n  );\n\n  const rightValue = useMemo(() => {\n    if (loading) return <Loading />;\n    if (showClearButton) {\n      return (\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          disabled={disabled}\n          onClick={(e) => {\n            onClear();\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onClear();\n            e.stopPropagation();\n          }}\n          aria-label={locale.clearLabel}\n        >\n          <ClearIcon />\n        </Button>\n      );\n    }\n    return (\n      right || (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {opened ? <Up /> : <Down />}\n        </IconContainer>\n      )\n    );\n  }, [\n    disabled,\n    loading,\n    locale.clearLabel,\n    onClear,\n    opened,\n    right,\n    showClearButton,\n    unbordered,\n  ]);\n\n  const rightHasPaddingValue = useMemo(() => {\n    if (loading) return true;\n    if (showClearButton) return false;\n    return right ? rightHasPadding : true;\n  }, [loading, right, rightHasPadding, showClearButton]);\n\n  return (\n    <Container>\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        {renderContent()}\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    </Container>\n  );\n};\n\nSelectToggle.displayName = 'SelectToggle';\n\nexport default SelectToggle;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,OAA7B,QAA4C,OAA5C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,EAAT,EAAaC,IAAb,EAAmBC,OAAnB,EAA4BC,KAA5B,EAAmCC,WAAnC,QAAsD,kBAAtD;AACA,SACEC,cADF,EAEEC,iBAFF,EAGEC,gBAHF,QAIO,mBAJP;AAKA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAqBA,OAAO,MAAMC,SAAS,GAAGf,MAAM,CAACgB,GAAI;AACpC;AACA;AACA;AACA;AACA,CALO;;AAOP,MAAMC,gBAAgB,GAAIC,CAAD,IACvB,CAACA,CAAC,CAACC,OAAH,IACAP,GAAI;AACN,oBAAoBM,CAAC,CAACE,KAAF,CAAQC,sBAAuB;AACnD,GAJA;;AAMA,MAAMC,iBAAiB,GAAIJ,CAAD,IACxB,CAACA,CAAC,CAACK,QAAH,IACAX,GAAI;AACN,qBAAqBM,CAAC,CAACE,KAAF,CAAQC,sBAAuB;AACpD,GAJA;;AAUA,OAAO,MAAMG,OAAO,GAAGxB,MAAM,CAC3B,KAD2B,EAE3BS,gBAAgB,CAAC,SAAD,EAAY,UAAZ,CAFW,CAGb;AAChB;AACA,IAAIQ,gBAAiB;AACrB,IAAIK,iBAAkB;AACtB,IAAIhB,cAAe;AACnB,CARO;AAUP,OAAO,MAAMmB,WAAW,GAAGzB,MAAM,CAAC0B,IAAK;AACvC,WAAYR,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQO,qBAAT,CAAgC;AACrD,IAAIrB,cAAe;AACnB,CAHO;;AAKP,MAAMsB,qBAAqB,GAAIV,CAAD,IAC5BA,CAAC,CAACW,UAAF,IACAjB,GAAI;AACN;AACA,MAAM,CAACM,CAAC,CAACY,QAAH,IAAgB,UAASpB,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQW,YAAT,CAAuB,GAAG;AAC5D,GALA;;AAOA,MAAMC,cAAc,GAAId,CAAD,IACrBA,CAAC,CAACY,QAAF,IACAlB,GAAI;AACN,aAAaF,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQa,sBAAT,CAAiC;AACjD,GAJA;;AAOA,OAAO,MAAMC,KAAK,GAAGlC,MAAM,CACzB,MADyB,EAEzBS,gBAAgB,CAAC,UAAD,EAAa,YAAb,CAFS,CAGb;AACd,WAAYS,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQe,SAAT,CAAoB;AACzC,IAAIP,qBAAsB;AAC1B,IAAII,cAAe;AACnB,IAAI1B,cAAe;AACnB,CARO;AAWP,MAAM8B,QAAQ,GAAGpC,MAAM,CAACa,GAAD,EAAMJ,gBAAgB,CAAC,UAAD,CAAtB,CAAmD;AAC1E;AACA;AACA;AACA;AACA,YAAaS,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQiB,0BAA2B;AACtD,IAAIL,cAAe;AACnB,CAPA;AASA,MAAMM,IAAI,GAAGtC,MAAM,CAACgB,GAAI;AACxB;AACA;AACA;AACA;AACA,cAAeE,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,uBAAwB;AACrD,MAAOrB,CAAD,IAAO,CAACA,CAAC,CAACE,KAAF,CAAQmB,uBAAwB;AAC9C;AACA;AACA,gBAAiBrB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,uBAAwB;AACvD,QAASrB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,uBAAwB;AAC/C;AACA,CAZA;AAcA,MAAMC,YAAY,GAAGxC,MAAM,CAACyC,MAAO;AACnC,IAAIlC,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,WAAYW,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQsB,iCAAT,CAA4C;AACjE;AACA;AACA;AACA;AACA,eAAgBxB,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQuB,sCAAT,CAAiD;AAC1E;AACA;AACA;AACA,IAAInC,gBAAgB,CAAC,OAAD,CAAU;AAC9B,CAlBA;;AAoBA,MAAMoC,6BAA6B,GAAI1B,CAAD,IACpCA,CAAC,CAACW,UAAF,IACAjB,GAAI;AACN;AACA;AACA,MAAM,CAACM,CAAC,CAACY,QAAH,IAAgB,UAASpB,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQW,YAAT,CAAuB,GAAG;AAC5D,GANA;;AAYA,OAAO,MAAMc,aAAa,GAAG7C,MAAM,CACjC,MADiC,EAEjCS,gBAAgB,CAAC,YAAD,EAAe,UAAf,CAFiB,CAGb;AACtB,WAAYS,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQ0B,eAAT,CAA0B;AAC/C;AACA,IAAIF,6BAA8B;AAClC,CAPO;AASP,OAAO,MAAMG,SAAS,GAAG/C,MAAM,CAACK,WAAD,CAAc;AAC7C;AACA,CAFO;AAOP,MAAM2C,KAAK,GAAGhD,MAAM,CAAC,MAAD,EAASS,gBAAgB,CAAC,YAAD,CAAzB,CAAqD;AACzE;AACA;AACA;AACA,WAAYS,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQO,qBAAT,CAAgC;AACrD;AACA;AACA;AACA;AACA,CATA;AAWA,OAAO,MAAMsB,SAAS,GAAGjD,MAAM,CAACgD,KAAD,CAAQ;AACvC,mBAAoB9B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQ8B,2BAA4B;AAC9D,IAAKhC,CAAD,IACAA,CAAC,CAACiC,UAAF,IACAvC,GAAI;AACR,sBAAsBM,CAAC,CAACE,KAAF,CAAQC,sBAAuB;AACrD,KAAM;AACN,CAPO;AASP,OAAO,MAAM+B,UAAU,GAAGpD,MAAM,CAACgD,KAAD,CAAQ;AACxC,kBAAmB9B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQ8B,2BAA4B;AAC7D,IAAKhC,CAAD,IACAA,CAAC,CAACiC,UAAF,IACAvC,GAAI;AACR,uBAAuBM,CAAC,CAACE,KAAF,CAAQC,sBAAuB;AACtD,KAAM;AACN,CAPO;;AASP,MAAMgC,YAAyC,GAAG,CAAC;EACjDC,aADiD;EAEjDC,QAFiD;EAGjDC,OAHiD;EAIjDC,MAJiD;EAKjDC,QALiD;EAMjDC,IANiD;EAOjDC,cAAc,GAAG,KAPgC;EAQjDC,KARiD;EASjDC,eAAe,GAAG,KAT+B;EAUjDC,WAViD;EAWjDlC,UAXiD;EAYjDmC,OAZiD;EAajDlC,QAbiD;EAcjDmC,YAdiD;EAejDC;AAfiD,CAAD,KAgB5C;EACJ,MAAMC,aAAa,GAAGrE,WAAW,CAAC,MAAM;IACtC,IAAIwD,aAAa,CAACc,MAAd,KAAyB,CAA7B,EAAgC;MAC9B,oBAAO,oBAAC,WAAD,QAAcL,WAAd,CAAP;IACD;;IACD,IAAIL,QAAJ,EAAc;MACZ,oBACE,oBAAC,IAAD,QACGJ,aAAa,CAACe,GAAd,CAAkB,CAAC;QAAEC,KAAF;QAASC;MAAT,CAAD,kBACjB,oBAAC,QAAD;QACE,GAAG,EAAEA,KADP;QAEE,QAAQ,EAAEzC,QAFZ;QAGE,KAAK,EACH,CAACA,QAAD,gBACE,oBAAC,YAAD;UACE,OAAO,EAAG0C,CAAD,IAAO;YACdjB,QAAQ,CAACgB,KAAD,CAAR;YACAC,CAAC,CAACC,eAAF;UACD,CAJH;UAKE,SAAS,EAAGD,CAAD,IAAOA,CAAC,CAACC,eAAF,EALpB;UAME,cAAa,GAAEP,MAAM,CAACQ,WAAY,IAAGJ,KAAM,EAN7C;UAOE;QAPF,gBASE,oBAAC,KAAD,OATF,CADF,GAYIK,SAhBR;QAkBE;MAlBF,GAoBGL,KApBH,CADD,CADH,CADF;IA4BD;;IACD,oBACE,oBAAC,KAAD;MAAO,QAAQ,EAAExC,QAAjB;MAA2B,UAAU,EAAED;IAAvC,GACGyB,aAAa,CAAC,CAAD,CAAb,CAAiBgB,KADpB,CADF;EAKD,CAvCgC,EAuC9B,CACDhB,aADC,EAEDI,QAFC,EAGD5B,QAHC,EAIDD,UAJC,EAKDkC,WALC,EAMDG,MAAM,CAACQ,WANN,EAODnB,QAPC,CAvC8B,CAAjC;EAiDA,MAAMqB,eAAe,GAAG7E,OAAO,CAC7B,MAAMkE,YAAY,IAAIX,aAAa,CAACc,MAAd,GAAuB,CADhB,EAE7B,CAACH,YAAD,EAAeX,aAAa,CAACc,MAA7B,CAF6B,CAA/B;EAKA,MAAMS,UAAU,GAAG9E,OAAO,CAAC,MAAM;IAC/B,IAAIiE,OAAJ,EAAa,oBAAO,oBAAC,OAAD,OAAP;;IACb,IAAIY,eAAJ,EAAqB;MACnB,oBACE,oBAAC,MAAD;QACE,IAAI,EAAC,OADP;QAEE,IAAI,EAAC,OAFP;QAGE,IAAI,EAAC,OAHP;QAIE,QAAQ,EAAE9C,QAJZ;QAKE,OAAO,EAAG0C,CAAD,IAAO;UACdhB,OAAO;UACPgB,CAAC,CAACC,eAAF;QACD,CARH;QASE,SAAS,EAAGD,CAAD,IAAO;UAChB,IAAIA,CAAC,CAACM,GAAF,KAAU,OAAd,EAAuBtB,OAAO;UAC9BgB,CAAC,CAACC,eAAF;QACD,CAZH;QAaE,cAAYP,MAAM,CAACa;MAbrB,gBAeE,oBAAC,SAAD,OAfF,CADF;IAmBD;;IACD,OACElB,KAAK,iBACH,oBAAC,aAAD;MAAe,UAAU,EAAEhC,UAA3B;MAAuC,QAAQ,EAAEC;IAAjD,GACG2B,MAAM,gBAAG,oBAAC,EAAD,OAAH,gBAAY,oBAAC,IAAD,OADrB,CAFJ;EAOD,CA9ByB,EA8BvB,CACD3B,QADC,EAEDkC,OAFC,EAGDE,MAAM,CAACa,UAHN,EAIDvB,OAJC,EAKDC,MALC,EAMDI,KANC,EAODe,eAPC,EAQD/C,UARC,CA9BuB,CAA1B;EAyCA,MAAMmD,oBAAoB,GAAGjF,OAAO,CAAC,MAAM;IACzC,IAAIiE,OAAJ,EAAa,OAAO,IAAP;IACb,IAAIY,eAAJ,EAAqB,OAAO,KAAP;IACrB,OAAOf,KAAK,GAAGC,eAAH,GAAqB,IAAjC;EACD,CAJmC,EAIjC,CAACE,OAAD,EAAUH,KAAV,EAAiBC,eAAjB,EAAkCc,eAAlC,CAJiC,CAApC;EAMA,oBACE,oBAAC,SAAD,QACGjB,IAAI,iBACH,oBAAC,cAAD;IACE,SAAS,EAAGsB,CAAD,KAAQ;MACjBC,uBAAuB,EAAE,GADR;MAEjBC,UAAU,EAAEF,CAAC,CAAC5C,0BAAF,GAA+B4C,CAAC,CAACG,KAAF,CAAQC;IAFlC,CAAR;EADb,gBAME,oBAAC,SAAD;IAAW,UAAU,EAAEzB;EAAvB,GAAwCD,IAAxC,CANF,CAFJ,eAYE,oBAAC,OAAD;IAAS,OAAO,EAAE,CAAC,CAACA,IAApB;IAA0B,QAAQ,EAAE,CAAC,CAACE;EAAtC,GACGM,aAAa,EADhB,CAZF,EAgBGU,UAAU,iBACT,oBAAC,cAAD;IACE,SAAS,EAAGI,CAAD,KAAQ;MACjBC,uBAAuB,EAAE,GADR;MAEjBC,UAAU,EAAEF,CAAC,CAAC5C,0BAAF,GAA+B4C,CAAC,CAACG,KAAF,CAAQC;IAFlC,CAAR;EADb,gBAME,oBAAC,UAAD;IAAY,UAAU,EAAEL;EAAxB,GACGH,UADH,CANF,CAjBJ,CADF;AA+BD,CArJD;;AAuJAxB,YAAY,CAACiC,WAAb,GAA2B,cAA3B;AAEA,eAAejC,YAAf"}

package/dist/esm/Select/index.js

@@ -17,8 +17,7 @@ import defaultLocale from './utils/defaultLocale';
 const paddingStyles = p => {
   const paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
   return css`
-    padding: calc(${paddingVertical}em - 1px) 3.5em
-      calc(${paddingVertical}em - 1px) ${p.theme.inputPaddingHorizontal}em;
+    padding: calc(${paddingVertical}em - 1px) 0;
   `;
 };
 
@@ -29,7 +28,6 @@ const openedStyles = p => p.opened && !p.unbordered && css`
 
 const unborderedStyles = p => p.unbordered && css`
     border: 0;
-    padding-right: 1.8em;
     box-shadow: none !important;
     ${transitionStyles('background-color')(p)};
   `;
@@ -85,6 +83,10 @@ const InputSearchContainer = styled.div`
 
 const Select = /*#__PURE__*/forwardRef(({
   options = [],
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
   placeholder,
   searchVisible = false,
   searchProps = {},
@@ -179,11 +181,15 @@ const Select = /*#__PURE__*/forwardRef(({
       containerRef.current.focus();
     },
     opened: opened,
-    unbordered: unbordered,
     multiple: maxSelectedItems !== 1,
+    placeholder: placeholder,
+    left: left,
+    leftHasPadding: leftHasPadding,
+    right: right,
+    rightHasPadding: rightHasPadding,
+    unbordered: unbordered,
     disabled: disabled,
     clearVisible: clearVisible,
-    placeholder: placeholder,
     loading: loading,
     locale: locale
   })), /*#__PURE__*/React.createElement(SelectMenu, {