@os-design/core 1.0.168 → 1.0.170

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","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","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      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) onCloseRef.current();\n    }, [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    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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"}
+{"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) onCloseRef.current();\n    }, [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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"}

package/dist/esm/@types/emotion.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n  // eslint-disable-next-line @typescript-eslint/no-empty-interface\n  export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}

package/dist/esm/ListItem/index.js

@@ -1,12 +1,10 @@
 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, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { horizontalPaddingStyles } from '@os-design/styles';
-import { isTouchDevice, useSwipe } from '@os-design/utils';
+import { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
-import ListItemContent from './ListItemContent';
-export const ListItemContainer = styled.div`
-  position: relative;
+import React, { forwardRef } from 'react';
+import ListItemActions from '../ListItemActions';
+const Container = styled(ListItemActions)`
   box-sizing: border-box;
   min-height: 4em;
   overflow: hidden;
@@ -18,23 +16,30 @@ export const ListItemContainer = styled.div`
     border-bottom: 1px solid ${p => clr(p.theme.listItemColorBorder)};
   }
 
-  @media (hover: hover) {
-    // Hide actions by default
-    & > nav {
-      opacity: 0;
-    }
-
-    // Display actions either on focus, or on hover
-    &:hover,
-    &:focus-within {
-      & > nav {
-        opacity: 1;
-      }
-    }
-  }
-
   ${horizontalPaddingStyles()};
 `;
+const Content = styled.div`
+  overflow: hidden;
+`;
+const Title = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+const Description = styled.div`
+  color: ${p => clr(p.theme.listItemColorDescription)};
+  font-size: ${p => p.theme.sizes.small}em;
+  ${ellipsisStyles};
+`;
+const LeftAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  padding-right: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+const RightAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
 
 /**
  * The base list item.
@@ -44,41 +49,10 @@ const ListItem = /*#__PURE__*/forwardRef(({
   description,
   left,
   right,
-  actions = [],
-  onTouchStart = () => {},
-  onTouchMove = () => {},
-  onTouchEnd = () => {},
   ...rest
-}, ref) => {
-  const touchDevice = useMemo(() => isTouchDevice(), []);
-  const {
-    opened,
-    handlers
-  } = useSwipe();
-  return /*#__PURE__*/React.createElement(ListItemContainer, _extends({}, rest, {
-    onTouchStart: e => {
-      handlers.onTouchStart(e);
-      onTouchStart(e);
-    },
-    onTouchMove: e => {
-      handlers.onTouchMove(e);
-      onTouchMove(e);
-    },
-    onTouchEnd: e => {
-      handlers.onTouchEnd(e);
-      onTouchEnd(e);
-    },
-    ref: ref
-  }), /*#__PURE__*/React.createElement(ListItemContent, {
-    title: title,
-    description: description,
-    left: left,
-    right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
-  }));
-});
+}, ref) => /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+  ref: ref
+}), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description)), right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
 ListItem.displayName = 'ListItem';
 export default ListItem;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","ref","touchDevice","opened","handlers","e","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,aAAa,EAAEC,QAAQ,QAAQ,kBAAkB;AAC1D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,eAAe,MAAgC,mBAAmB;AAOzE,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKJ,GAAG,CAACI,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CAAC;;AAED;AACA;AACA;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CACE;EACEc,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,EAAE;EACZC,YAAY,GAAG,MAAM,CAAC,CAAC;EACvBC,WAAW,GAAG,MAAM,CAAC,CAAC;EACtBC,UAAU,GAAG,MAAM,CAAC,CAAC;EACrB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,WAAW,GAAGvB,OAAO,CAAC,MAAMG,aAAa,EAAE,EAAE,EAAE,CAAC;EACtD,MAAM;IAAEqB,MAAM;IAAEC;EAAS,CAAC,GAAGrB,QAAQ,EAAE;EAEvC,oBACE,oBAAC,iBAAiB,eACZiB,IAAI;IACR,YAAY,EAAGK,CAAC,IAAK;MACnBD,QAAQ,CAACP,YAAY,CAACQ,CAAC,CAAC;MACxBR,YAAY,CAACQ,CAAC,CAAC;IACjB,CAAE;IACF,WAAW,EAAGA,CAAC,IAAK;MAClBD,QAAQ,CAACN,WAAW,CAACO,CAAC,CAAC;MACvBP,WAAW,CAACO,CAAC,CAAC;IAChB,CAAE;IACF,UAAU,EAAGA,CAAC,IAAK;MACjBD,QAAQ,CAACL,UAAU,CAACM,CAAC,CAAC;MACtBN,UAAU,CAACM,CAAC,CAAC;IACf,CAAE;IACF,GAAG,EAAEJ;EAAI,iBAET,oBAAC,eAAe;IACd,KAAK,EAAET,KAAM;IACb,WAAW,EAAEC,WAAY;IACzB,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,QAAQ,EAAEM,WAAY;IACtB,MAAM,EAAEC;EAAO,EACf,CACgB;AAExB,CAAC,CACF;AAEDZ,QAAQ,CAACe,WAAW,GAAG,UAAU;AAEjC,eAAef,QAAQ"}
+{"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","rest","ref","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n  /**\n   * The title of the item.\n   */\n  title: string;\n  /**\n   * The description of the item.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The component located on the left side.\n   * For example, avatar, button, checkbox.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * For example, date.\n   */\n  right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.listItemColorDescription)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\n      {left && <LeftAddon>{left}</LeftAddon>}\n\n      <Content>\n        <Title>{title}</Title>\n        {description && <Description>{description}</Description>}\n      </Content>\n\n      {right && <RightAddon>{right}</RightAddon>}\n    </Container>\n  )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChD,oBAAC,SAAS,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,IAC3BH,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,KAAK,QAAEF,KAAK,CAAS,EACrBC,WAAW,iBAAI,oBAAC,WAAW,QAAEA,WAAW,CAAe,CAChD,EAETE,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,CACF;AAEDJ,QAAQ,CAACO,WAAW,GAAG,UAAU;AAEjC,eAAeP,QAAQ"}

package/dist/esm/ListItemActions/index.js

@@ -0,0 +1,121 @@
+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 { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import Button from '../Button';
+const Container = styled.div`
+  position: relative;
+
+  @media (hover: hover) {
+    // Hide actions by default
+    & > nav {
+      opacity: 0;
+    }
+
+    // Display actions either on focus, or on hover
+    &:hover,
+    &:focus-within {
+      & > nav {
+        opacity: 1;
+      }
+    }
+  }
+`;
+const swipeableStyles = p => p.swipeable && css`
+    transform: translateX(100%);
+    ${transitionStyles('transform')(p)};
+  `;
+const openedStyles = p => p.opened && css`
+    transform: translateX(0);
+  `;
+const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'size'))`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+
+  padding-left: ${p => p.theme.listItemActionsPaddingLeft}em;
+  background: linear-gradient(
+    to right,
+    ${p => clr([...p.theme.colorBg.slice(0, 3), 0])},
+    ${p => clr(p.theme.colorBg)}
+      ${p => p.theme.listItemActionsPaddingLeft}em
+  );
+
+  ${swipeableStyles};
+  ${openedStyles};
+  ${sizeStyles}
+`;
+let actionIndex = 0;
+
+/**
+ * Shows the menu in the list item.
+ */
+const ListItemActions = /*#__PURE__*/forwardRef(({
+  actions = [],
+  onTouchStart = () => {},
+  onTouchMove = () => {},
+  onTouchEnd = () => {},
+  children,
+  size,
+  ...rest
+}, ref) => {
+  const {
+    opened,
+    handlers
+  } = useSwipe();
+  const swipeable = useMemo(() => isTouchDevice(), []);
+  const touchStartHandler = useCallback(e => {
+    handlers.onTouchStart(e);
+    onTouchStart(e);
+  }, [handlers, onTouchStart]);
+  const touchMoveHandler = useCallback(e => {
+    handlers.onTouchMove(e);
+    onTouchMove(e);
+  }, [handlers, onTouchMove]);
+  const touchEndHandler = useCallback(e => {
+    handlers.onTouchEnd(e);
+    onTouchEnd(e);
+  }, [handlers, onTouchEnd]);
+  const actionsComponent = useMemo(() => {
+    if (actions.length === 0) return null;
+    const items = actions.map(({
+      icon,
+      onClick = () => {},
+      ...actionRest
+    }) => {
+      actionIndex += 1;
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        key: actionIndex,
+        type: "ghost",
+        wide: "never",
+        size: size,
+        onClick: e => {
+          e.preventDefault();
+          onClick(e);
+        }
+      }, actionRest), icon);
+    });
+    return /*#__PURE__*/React.createElement(Actions, {
+      swipeable: swipeable,
+      opened: opened,
+      size: size
+    }, items);
+  }, [actions, opened, size, swipeable]);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    onTouchStart: touchStartHandler,
+    onTouchMove: touchMoveHandler,
+    onTouchEnd: touchEndHandler
+  }, rest, {
+    ref: ref
+  }), children, actionsComponent);
+});
+ListItemActions.displayName = 'ListItemActions';
+export default ListItemActions;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useSwipe","React","forwardRef","useCallback","useMemo","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","actionsComponent","length","items","map","icon","onClick","actionRest","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions swipeable={swipeable} opened={opened} size={size}>\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

package/dist/esm/ListItemLink/index.js

@@ -1,35 +1,32 @@
 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, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
-import { clr } from '@os-design/theming';
 import { resetFocusStyles } from '@os-design/styles';
-import { css } from '@emotion/react';
-import { ListItemContainer } from '../ListItem';
-import ListItemContent from '../ListItem/ListItemContent';
-const actionsBgStyles = p => !p.touchDevice && css`
-    & > nav {
-      background: linear-gradient(
-        to right,
-        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
-        ${clr(p.theme.listItemColorBgHover)}
-          ${p.theme.listItemActionsPaddingLeft}em
-      );
-    }
-  `;
-const StyledLink = styled(ListItemContainer.withComponent('a'), omitEmotionProps('touchDevice', 'as'))`
+import { clr } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+import ListItem from '../ListItem';
+const Link = styled.a`
   ${resetFocusStyles};
+
   cursor: pointer;
   text-decoration: none;
 
   @media (hover: hover) {
     &:hover,
     &:focus-within {
-      background-color: ${p => clr(p.theme.listItemColorBgHover)};
+      & > div {
+        background-color: ${p => clr(p.theme.listItemColorBgHover)};
+
+        & > nav {
+          background: linear-gradient(
+            to right,
+            ${p => clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
+            ${p => clr(p.theme.listItemColorBgHover)}
+              ${p => p.theme.listItemActionsPaddingLeft}em
+          );
+        }
+      }
     }
   }
-
-  ${actionsBgStyles};
 `;
 
 /**
@@ -40,50 +37,17 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
   description,
   left,
   right,
-  actions = [],
-  as,
-  onMouseDown = () => {},
-  onTouchStart = () => {},
-  onTouchMove = () => {},
-  onTouchEnd = () => {},
+  actions,
   ...rest
-}, ref) => {
-  const touchDevice = useMemo(() => isTouchDevice(), []);
-  const {
-    opened,
-    handlers
-  } = useSwipe();
-  return /*#__PURE__*/React.createElement(StyledLink, _extends({
-    touchDevice: touchDevice,
-    as: as
-  }, rest, {
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
-    onTouchStart: e => {
-      handlers.onTouchStart(e);
-      onTouchStart(e);
-    },
-    onTouchMove: e => {
-      handlers.onTouchMove(e);
-      onTouchMove(e);
-    },
-    onTouchEnd: e => {
-      handlers.onTouchEnd(e);
-      onTouchEnd(e);
-    },
-    ref: ref
-  }), /*#__PURE__*/React.createElement(ListItemContent, {
-    title: title,
-    description: description,
-    left: left,
-    right: right,
-    actions: actions,
-    hasSwipe: touchDevice,
-    opened: opened
-  }));
-});
+}, ref) => /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
+  ref: ref
+}), /*#__PURE__*/React.createElement(ListItem, {
+  title: title,
+  description: description,
+  left: left,
+  right: right,
+  actions: actions
+})));
 ListItemLink.displayName = 'ListItemLink';
 export default ListItemLink;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","ref","opened","handlers","e","preventDefault","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","rest","ref","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport ListItem, { ListItemProps } from '../ListItem';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ListItemProps;\n\nconst Link = styled.a`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      & > div {\n        background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n\n        & > nav {\n          background: linear-gradient(\n            to right,\n            ${(p) =>\n              clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n            ${(p) => clr(p.theme.listItemColorBgHover)}\n              ${(p) => p.theme.listItemActionsPaddingLeft}em\n          );\n        }\n      }\n    }\n  }\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  ({ title, description, left, right, actions, ...rest }, ref) => (\n    <Link {...rest} ref={ref}>\n      <ListItem\n        title={title}\n        description={description}\n        left={left}\n        right={right}\n        actions={actions}\n      />\n    </Link>\n  )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,GAAG,QAAe,oBAAoB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAQrD,MAAMC,IAAI,GAAGN,MAAM,CAACO,CAAE;AACtB,IAAIN,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,oBAAoB,CAAE;AACrE;AACA;AACA;AACA;AACA,cAAeF,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACC,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAW;AAC7E,cAAeH,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,oBAAoB,CAAE;AACvD,gBAAiBF,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,0BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGT,UAAU,CAC7B,CAAC;EAAEU,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzD,oBAAC,IAAI,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACvB,oBAAC,QAAQ;EACP,KAAK,EAAEN,KAAM;EACb,WAAW,EAAEC,WAAY;EACzB,IAAI,EAAEC,IAAK;EACX,KAAK,EAAEC,KAAM;EACb,OAAO,EAAEC;AAAQ,EACjB,CAEL,CACF;AAEDL,YAAY,CAACQ,WAAW,GAAG,cAAc;AAEzC,eAAeR,YAAY"}

package/dist/esm/ListSkeleton/index.js

@@ -1,11 +1,10 @@
 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 } from 'react';
 import styled from '@emotion/styled';
 import { horizontalPaddingStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
-import Skeleton from '../Skeleton';
+import React, { forwardRef, useCallback } from 'react';
 import List from '../List';
-import { LeftAddon, RightAddon } from '../ListItem/ListItemContent';
+import Skeleton from '../Skeleton';
 const ListItem = styled.div`
   width: 100%;
   height: 100%;
@@ -27,6 +26,15 @@ const DescriptionSkeleton = styled(Skeleton)`
   height: ${p => p.theme.sizes.small}em;
   margin-top: 0.3em;
 `;
+const LeftAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  padding-right: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+const RightAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
 
 /**
  * Provides a list placeholder while a user waits for the content to load.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","styled","horizontalPaddingStyles","clr","Skeleton","List","LeftAddon","RightAddon","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { FixedSizeList } from 'react-window';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport { LeftAddon, RightAddon } from '../ListItem/ListItemContent';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,IAAI,MAAqB,SAAS;AAEzC,SAASC,SAAS,EAAEC,UAAU,QAAQ,6BAA6B;AA2BnE,MAAMC,QAAQ,GAAGP,MAAM,CAACQ,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIV,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMW,OAAO,GAAGZ,MAAM,CAACQ,GAAI;AAC3B;AACA,CAAC;AAED,MAAMK,mBAAmB,GAAGb,MAAM,CAACG,QAAQ,CAAE;AAC7C,YAAaM,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGlB,UAAU,CAC7B,CACE;EACEmB,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,SAAS,GAAG,EAAE;EACdC,IAAI;EACJC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAG1B,WAAW,CAC9B,CAAC;IAAE2B;EAAM,CAAC,kBACR,oBAAC,QAAQ;IAAC,KAAK,EAAEA;EAAM,GACpBL,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,QAAQ;IAAC,KAAK,EAAEH;EAAW,EAAG,EAC9BD,cAAc,iBAAI,oBAAC,mBAAmB;IAAC,KAAK,EAAEE;EAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,oBAAC,IAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEK;EAAa,GACvBF,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;AAEDR,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY"}
+{"version":3,"file":"index.js","names":["styled","horizontalPaddingStyles","clr","React","forwardRef","useCallback","List","Skeleton","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","LeftAddon","colorText","listItemAddonPaddingHorizontal","RightAddon","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef, useCallback } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,OAAOC,IAAI,MAAqB,SAAS;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AA2BlC,MAAMC,QAAQ,GAAGR,MAAM,CAACS,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIX,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMY,OAAO,GAAGb,MAAM,CAACS,GAAI;AAC3B;AACA,CAAC;AAED,MAAMK,mBAAmB,GAAGd,MAAM,CAACO,QAAQ,CAAE;AAC7C,YAAaG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;AAED,MAAMC,SAAS,GAAGjB,MAAM,CAACS,GAAI;AAC7B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC,mBAAoBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGpB,MAAM,CAACS,GAAI;AAC9B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC;AACA,kBAAmBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,YAAY,gBAAGjB,UAAU,CAC7B,CACE;EACEkB,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,SAAS,GAAG,EAAE;EACdC,IAAI;EACJC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAGzB,WAAW,CAC9B,CAAC;IAAE0B;EAAM,CAAC,kBACR,oBAAC,QAAQ;IAAC,KAAK,EAAEA;EAAM,GACpBL,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,QAAQ;IAAC,KAAK,EAAEH;EAAW,EAAG,EAC9BD,cAAc,iBAAI,oBAAC,mBAAmB;IAAC,KAAK,EAAEE;EAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,oBAAC,IAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEK;EAAa,GACvBF,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;AAEDR,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY"}

package/dist/esm/Select/index.js

@@ -101,6 +101,7 @@ const Select = /*#__PURE__*/forwardRef(({
   onChange,
   onLoadNext = () => {},
   onClose = () => {},
+  onBlur = () => {},
   size,
   placement,
   ...rest
@@ -155,6 +156,9 @@ const Select = /*#__PURE__*/forwardRef(({
     };
   }), [forwardedValue, options]);
   const listBoxId = useMemo(() => `listbox-${Math.random().toString(36).slice(2, 11)}`, []);
+  const blurHandler = useCallback(e => {
+    if (!opened) onBlur(e);
+  }, [onBlur, opened]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
     opened: opened,
     unbordered: unbordered,
@@ -173,6 +177,7 @@ const Select = /*#__PURE__*/forwardRef(({
       }
     },
     onMouseDown: e => e.preventDefault(),
+    onBlur: blurHandler,
     role: "combobox",
     "aria-disabled": disabled,
     "aria-busy": loading,