@os-design/core 1.0.117 → 1.0.120

package/dist/esm/List/WindowScroller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/WindowScroller.tsx"],"names":["React","useCallback","useEffect","useRef","useEvent","disableBodyPointerEvents","enableBodyPointerEventsAfterDelay","DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,QAAsD,OAAtD;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,SACEC,wBADF,EAEEC,iCAFF,QAGO,2BAHP;;AAcA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mCAAmC,GAAG,GAA5C;;AAEP,MAAMC,cAA6C,GAAG,CAAC;AACrDC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CADkC;AAErDC,EAAAA;AAFqD,CAAD,KAGhD;AACJ,QAAMC,WAAW,GAAGR,MAAM,EAA1B;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACdS,IAAAA,WAAW,CAACC,OAAZ,GAAsBH,QAAtB;AACD,GAFQ,EAEN,CAACA,QAAD,CAFM,CAAT;AAIA,QAAMI,cAAc,GAAGZ,WAAW,CAAC,MAAM;AACvCI,IAAAA,wBAAwB;AACxBC,IAAAA,iCAAiC,CAACC,mCAAD,CAAjC;AACA,QAAI,CAACI,WAAW,CAACC,OAAjB,EAA0B;AAC1BD,IAAAA,WAAW,CAACC,OAAZ,CAAoB;AAClBE,MAAAA,GAAG,EAAEC,MAAM,CAACC,WADM;AAElBC,MAAAA,IAAI,EAAEF,MAAM,CAACG;AAFK,KAApB;AAID,GARiC,EAQ/B,EAR+B,CAAlC;AAUAhB,EAAAA,SAAS,CAAC,MAAM,MAAMI,iCAAiC,CAAC,CAAD,CAA9C,EAAmD,EAAnD,CAAT;AACAF,EAAAA,QAAQ,CAACe,QAAD,EAAW,QAAX,EAAqBN,cAArB,CAAR,CAlBI,CAoBJ;;AACA,sBAAO,0CAAGH,QAAH,CAAP;AACD,CAzBD;;AA2BA,eAAeF,cAAf","sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { useEvent } from '@os-design/utils';\nimport {\n  disableBodyPointerEvents,\n  enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n  top: number;\n  left: number;\n}\n\ninterface WindowScrollerProps {\n  onScroll?: (props: ScrollPosition) => void;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n  onScroll = () => {},\n  children,\n}) => {\n  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  }, [onScroll]);\n\n  const scrollListener = useCallback(() => {\n    disableBodyPointerEvents();\n    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n    if (!onScrollRef.current) return;\n    onScrollRef.current({\n      top: window.pageYOffset,\n      left: window.pageXOffset,\n    });\n  }, []);\n\n  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n  useEvent(document, 'scroll', scrollListener);\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"file":"WindowScroller.js"}
+{"version":3,"sources":["../../../src/List/WindowScroller.tsx"],"names":["React","useCallback","useEffect","useRef","useEvent","disableBodyPointerEvents","enableBodyPointerEventsAfterDelay","DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,QAAsD,OAAtD;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,SACEC,wBADF,EAEEC,iCAFF,QAGO,2BAHP;;AAeA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mCAAmC,GAAG,GAA5C;;AAEP,MAAMC,cAA6C,GAAG,CAAC;AACrDC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CADkC;AAErDC,EAAAA;AAFqD,CAAD,KAGhD;AACJ,QAAMC,WAAW,GAAGR,MAAM,EAA1B;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACdS,IAAAA,WAAW,CAACC,OAAZ,GAAsBH,QAAtB;AACD,GAFQ,EAEN,CAACA,QAAD,CAFM,CAAT;AAIA,QAAMI,cAAc,GAAGZ,WAAW,CAAC,MAAM;AACvCI,IAAAA,wBAAwB;AACxBC,IAAAA,iCAAiC,CAACC,mCAAD,CAAjC;AACA,QAAI,CAACI,WAAW,CAACC,OAAjB,EAA0B;AAC1BD,IAAAA,WAAW,CAACC,OAAZ,CAAoB;AAClBE,MAAAA,GAAG,EAAEC,MAAM,CAACC,WADM;AAElBC,MAAAA,IAAI,EAAEF,MAAM,CAACG;AAFK,KAApB;AAID,GARiC,EAQ/B,EAR+B,CAAlC;AAUAhB,EAAAA,SAAS,CAAC,MAAM,MAAMI,iCAAiC,CAAC,CAAD,CAA9C,EAAmD,EAAnD,CAAT;AACAF,EAAAA,QAAQ,CAACe,QAAD,EAAW,QAAX,EAAqBN,cAArB,CAAR,CAlBI,CAoBJ;;AACA,sBAAO,0CAAGH,QAAH,CAAP;AACD,CAzBD;;AA2BA,eAAeF,cAAf","sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { useEvent } from '@os-design/utils';\nimport {\n  disableBodyPointerEvents,\n  enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n  top: number;\n  left: number;\n}\n\ninterface WindowScrollerProps {\n  onScroll?: (props: ScrollPosition) => void;\n  children?: React.ReactNode;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n  onScroll = () => {},\n  children,\n}) => {\n  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  }, [onScroll]);\n\n  const scrollListener = useCallback(() => {\n    disableBodyPointerEvents();\n    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n    if (!onScrollRef.current) return;\n    onScrollRef.current({\n      top: window.pageYOffset,\n      left: window.pageXOffset,\n    });\n  }, []);\n\n  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n  useEvent(document, 'scroll', scrollListener);\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"file":"WindowScroller.js"}

package/dist/esm/Menu/index.js

@@ -41,7 +41,7 @@ const Menu = /*#__PURE__*/forwardRef(({
   useFocusWithArrows(containerRef);
   useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   const isMinXs = useIsMinWidth('xs');
-  const menuId = useMemo(() => id || `menu-${Math.random().toString(36).substr(2, 9)}`, [id]); // Replace the aria-haspopup attribute from true to menu
+  const menuId = useMemo(() => id || `menu-${Math.random().toString(36).slice(2, 11)}`, [id]); // Replace the aria-haspopup attribute from true to menu
 
   useBrowserLayoutEffect(() => {
     if (!trigger) return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/index.tsx"],"names":["React","forwardRef","useMemo","styled","useBrowserLayoutEffect","useForwardedRef","useKeyPress","useIsMinWidth","enableScrollingStyles","MenuContext","Popover","Modal","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","substr","current","setAttribute","contextValue","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).substr(2, 9)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Menu/index.tsx"],"names":["React","forwardRef","useMemo","styled","useBrowserLayoutEffect","useForwardedRef","useKeyPress","useIsMinWidth","enableScrollingStyles","MenuContext","Popover","Modal","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"file":"index.js"}

package/dist/esm/Modal/index.js

@@ -192,8 +192,8 @@ const Modal = /*#__PURE__*/forwardRef(({
   useBodyScroll(!visible);
   useClickOutside(contentRef, onClose);
   useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
-  const titleId = useMemo(() => `modal-title-${Math.random().toString(36).substr(2, 9)}`, []);
-  const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).substr(2, 9)}`, [id]);
+  const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
+  const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useClickOutside","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","substr","bodyId","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useClickOutside,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useClickOutside(contentRef, onClose);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).substr(2, 9)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).substr(2, 9)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useClickOutside","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useClickOutside,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useClickOutside(contentRef, onClose);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"file":"index.js"}

package/dist/esm/Popover/index.js

@@ -103,7 +103,7 @@ const Popover = /*#__PURE__*/forwardRef(({
     if (!trigger || trigger.current !== undefined) return;
     setTriggerRect(trigger);
   }, [trigger]);
-  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).substr(2, 9)}`, [id]); // Set the aria tags to support accessibility features
+  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).slice(2, 11)}`, [id]); // Set the aria tags to support accessibility features
 
   useBrowserLayoutEffect(() => {
     if (!trigger) return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Popover/index.tsx"],"names":["React","forwardRef","useCallback","useEffect","useMemo","useState","sizeStyles","omitEmotionProps","useClickOutside","useClosable","useEvent","useForwardedRef","useResizeObserver","useBrowserLayoutEffect","styled","clr","useTheme","css","keyframes","Portal","usePopoverPosition","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","emptyRect","width","height","Popover","trigger","placement","gap","flip","onClose","id","children","rest","ref","popoverRef","mergedPopoverRef","popoverRect","setPopoverRect","triggerRect","setTriggerRect","mounted","popoverResizeListener","current","getBoundingClientRect","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","document","undefined","popoverId","Math","random","toString","substr","getAttribute","setAttribute","elementRect","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useClickOutside,\n  useClosable,\n  useEvent,\n  useForwardedRef,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport usePopoverPosition, {\n  Placement,\n  Rect,\n} from './utils/usePopoverPosition';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PopoverProps extends JsxDivProps, WithSize {\n  /**\n   * The element next to which the popover appears.\n   * @default undefined\n   */\n  trigger?: RefObject<Element> | Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.2\n   */\n  gap?: number;\n  /**\n   * Whether the popover to flip if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n  /**\n   * Whether the popover is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {\n  top: number;\n  left: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('top', 'left', 'visible', 'size')\n)<ContainerProps>`\n  position: absolute;\n  top: ${(p) => p.top}px;\n  left: ${(p) => p.left}px;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  background-color: ${(p) => clr(p.theme.popoverColorBg)};\n  color: ${(p) => clr(p.theme.popoverColorText)};\n  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ${visibleStyles};\n  ${invisibleStyles};\n  ${sizeStyles};\n`;\n\nconst emptyRect: Rect = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * The pop-up window located next to the element.\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      trigger,\n      placement = 'top',\n      gap = 0.2,\n      flip = true,\n      visible = false,\n      onClose = () => {},\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);\n    const [popoverRect, setPopoverRect] = useState(emptyRect);\n    const [triggerRect, setTriggerRect] = useState(emptyRect);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Init the rect of the popover and update it when the popover size changes\n    const popoverResizeListener = useCallback(() => {\n      if (!popoverRef.current) return;\n      setPopoverRect(popoverRef.current.getBoundingClientRect());\n    }, [popoverRef]);\n    useResizeObserver(\n      popoverRef.current as HTMLDivElement,\n      popoverResizeListener\n    );\n\n    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(\n      (node) => {\n        if (node === null) return;\n        setPopoverRect(node.getBoundingClientRect());\n        mergedPopoverRef(node);\n      },\n      [mergedPopoverRef]\n    );\n\n    // Init the rect of the trigger and update it when the window was resized\n    // or scrolled\n    const triggerResizeListener = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!trigger) return;\n        const { current } = trigger as RefObject<Element>;\n        if (!current) return;\n        setTriggerRect(current.getBoundingClientRect());\n      });\n    }, [trigger]);\n    useBrowserLayoutEffect(() => {\n      if (!visible) return;\n      triggerResizeListener();\n    }, [triggerResizeListener, visible]);\n    useResizeObserver(trigger as never, triggerResizeListener);\n    useEvent(\n      (typeof window === 'undefined' ? null : window) as never,\n      'resize',\n      triggerResizeListener\n    );\n    useEvent(document, 'scroll', triggerResizeListener);\n\n    useEffect(() => {\n      if (!trigger || (trigger as RefObject<Element>).current !== undefined)\n        return;\n      setTriggerRect(trigger as Rect);\n    }, [trigger]);\n\n    const popoverId = useMemo(\n      () => id || `popover-${Math.random().toString(36).substr(2, 9)}`,\n      [id]\n    );\n\n    // Set the aria tags to support accessibility features\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      if (current.getAttribute('aria-haspopup') === null) {\n        current.setAttribute('aria-haspopup', 'dialog');\n      }\n      current.setAttribute('aria-controls', popoverId);\n    }, []);\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-expanded', visible.toString());\n    }, [visible]);\n\n    // Get the popover coordinates\n    const { top, left } = usePopoverPosition({\n      elementRect: triggerRect,\n      popoverRect,\n      placement,\n      gap,\n      flip,\n    });\n\n    // Close the popover when the user clicks outside of it\n    useClickOutside(popoverRef, onClose);\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <Container\n          top={top}\n          left={left}\n          visible={visible}\n          id={popoverId}\n          role='dialog'\n          {...rest}\n          ref={measuredPopoverRef}\n        >\n          {children}\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Popover/index.tsx"],"names":["React","forwardRef","useCallback","useEffect","useMemo","useState","sizeStyles","omitEmotionProps","useClickOutside","useClosable","useEvent","useForwardedRef","useResizeObserver","useBrowserLayoutEffect","styled","clr","useTheme","css","keyframes","Portal","usePopoverPosition","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","emptyRect","width","height","Popover","trigger","placement","gap","flip","onClose","id","children","rest","ref","popoverRef","mergedPopoverRef","popoverRect","setPopoverRect","triggerRect","setTriggerRect","mounted","popoverResizeListener","current","getBoundingClientRect","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","document","undefined","popoverId","Math","random","toString","slice","getAttribute","setAttribute","elementRect","displayName"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useClickOutside,\n  useClosable,\n  useEvent,\n  useForwardedRef,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport usePopoverPosition, {\n  Placement,\n  Rect,\n} from './utils/usePopoverPosition';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PopoverProps extends JsxDivProps, WithSize {\n  /**\n   * The element next to which the popover appears.\n   * @default undefined\n   */\n  trigger?: RefObject<Element> | Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.2\n   */\n  gap?: number;\n  /**\n   * Whether the popover to flip if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n  /**\n   * Whether the popover is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {\n  top: number;\n  left: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('top', 'left', 'visible', 'size')\n)<ContainerProps>`\n  position: absolute;\n  top: ${(p) => p.top}px;\n  left: ${(p) => p.left}px;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  background-color: ${(p) => clr(p.theme.popoverColorBg)};\n  color: ${(p) => clr(p.theme.popoverColorText)};\n  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ${visibleStyles};\n  ${invisibleStyles};\n  ${sizeStyles};\n`;\n\nconst emptyRect: Rect = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * The pop-up window located next to the element.\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      trigger,\n      placement = 'top',\n      gap = 0.2,\n      flip = true,\n      visible = false,\n      onClose = () => {},\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);\n    const [popoverRect, setPopoverRect] = useState(emptyRect);\n    const [triggerRect, setTriggerRect] = useState(emptyRect);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Init the rect of the popover and update it when the popover size changes\n    const popoverResizeListener = useCallback(() => {\n      if (!popoverRef.current) return;\n      setPopoverRect(popoverRef.current.getBoundingClientRect());\n    }, [popoverRef]);\n    useResizeObserver(\n      popoverRef.current as HTMLDivElement,\n      popoverResizeListener\n    );\n\n    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(\n      (node) => {\n        if (node === null) return;\n        setPopoverRect(node.getBoundingClientRect());\n        mergedPopoverRef(node);\n      },\n      [mergedPopoverRef]\n    );\n\n    // Init the rect of the trigger and update it when the window was resized\n    // or scrolled\n    const triggerResizeListener = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!trigger) return;\n        const { current } = trigger as RefObject<Element>;\n        if (!current) return;\n        setTriggerRect(current.getBoundingClientRect());\n      });\n    }, [trigger]);\n    useBrowserLayoutEffect(() => {\n      if (!visible) return;\n      triggerResizeListener();\n    }, [triggerResizeListener, visible]);\n    useResizeObserver(trigger as never, triggerResizeListener);\n    useEvent(\n      (typeof window === 'undefined' ? null : window) as never,\n      'resize',\n      triggerResizeListener\n    );\n    useEvent(document, 'scroll', triggerResizeListener);\n\n    useEffect(() => {\n      if (!trigger || (trigger as RefObject<Element>).current !== undefined)\n        return;\n      setTriggerRect(trigger as Rect);\n    }, [trigger]);\n\n    const popoverId = useMemo(\n      () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Set the aria tags to support accessibility features\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      if (current.getAttribute('aria-haspopup') === null) {\n        current.setAttribute('aria-haspopup', 'dialog');\n      }\n      current.setAttribute('aria-controls', popoverId);\n    }, []);\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-expanded', visible.toString());\n    }, [visible]);\n\n    // Get the popover coordinates\n    const { top, left } = usePopoverPosition({\n      elementRect: triggerRect,\n      popoverRect,\n      placement,\n      gap,\n      flip,\n    });\n\n    // Close the popover when the user clicks outside of it\n    useClickOutside(popoverRef, onClose);\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <Container\n          top={top}\n          left={left}\n          visible={visible}\n          id={popoverId}\n          role='dialog'\n          {...rest}\n          ref={measuredPopoverRef}\n        >\n          {children}\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"file":"index.js"}

package/dist/esm/Progress/index.js

@@ -44,7 +44,7 @@ const Progress = /*#__PURE__*/forwardRef(({
     if (percent > 100) return 100;
     return percent;
   }, [percent]);
-  const textId = useMemo(() => `progress-bar-text-${Math.random().toString(36).substr(2, 9)}`, []);
+  const textId = useMemo(() => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`, []);
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: "progressbar",
     "aria-valuenow": validPercent,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Progress/index.tsx"],"names":["styled","React","forwardRef","useMemo","sizeStyles","transitionStyles","omitEmotionProps","clr","Container","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","div","progressColorPercentage","Progress","text","rest","ref","validPercent","textId","Math","random","toString","substr","displayName"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ProgressProps extends JsxDivProps, WithSize {\n  /**\n   * The percentage of completion.\n   * @default 0\n   */\n  percent?: number;\n  /**\n   * The text that is displayed to the right of the progress bar.\n   * @default undefined\n   */\n  text?: string;\n  /**\n   * The height of the progress bar.\n   * @default 0.5em\n   */\n  height?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  ${sizeStyles};\n`;\n\ntype TrailProps = Required<Pick<ProgressProps, 'height'>>;\nconst Trail = styled('div', omitEmotionProps('height'))<TrailProps>`\n  width: 100%;\n  background-color: ${(p) => clr(p.theme.progressColorTrail)};\n  border-radius: ${(p) => `calc(${p.height} / 2)`};\n  overflow: hidden; // To hide the border of the progress bar\n`;\n\ntype StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;\nconst Stroke = styled(\n  'div',\n  omitEmotionProps('percent', 'height')\n)<StrokeProps>`\n  width: ${(p) => p.percent}%;\n  height: ${(p) => p.height};\n  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}\n    ${(p) => `calc(${p.height} / 2)`} 0;\n  background-color: ${(p) =>\n    p.percent < 100\n      ? clr(p.theme.progressColorStroke)\n      : clr(p.theme.progressColorStrokeSuccess)};\n  ${transitionStyles('width', 'background-color')};\n`;\n\nconst Text = styled.div`\n  margin-left: 0.5em;\n  color: ${(p) => clr(p.theme.progressColorPercentage)};\n  line-height: 1;\n`;\n\n/**\n * The progress bar.\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {\n    const validPercent = useMemo(() => {\n      if (percent < 0) return 0;\n      if (percent > 100) return 100;\n      return percent;\n    }, [percent]);\n\n    const textId = useMemo(\n      () => `progress-bar-text-${Math.random().toString(36).substr(2, 9)}`,\n      []\n    );\n\n    return (\n      <Container\n        role='progressbar'\n        aria-valuenow={validPercent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-describedby={textId}\n        {...rest}\n        ref={ref}\n      >\n        <Trail height={height}>\n          <Stroke percent={validPercent} height={height} />\n        </Trail>\n        {text && <Text id={textId}>{text}</Text>}\n      </Container>\n    );\n  }\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Progress/index.tsx"],"names":["styled","React","forwardRef","useMemo","sizeStyles","transitionStyles","omitEmotionProps","clr","Container","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","div","progressColorPercentage","Progress","text","rest","ref","validPercent","textId","Math","random","toString","slice","displayName"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ProgressProps extends JsxDivProps, WithSize {\n  /**\n   * The percentage of completion.\n   * @default 0\n   */\n  percent?: number;\n  /**\n   * The text that is displayed to the right of the progress bar.\n   * @default undefined\n   */\n  text?: string;\n  /**\n   * The height of the progress bar.\n   * @default 0.5em\n   */\n  height?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  ${sizeStyles};\n`;\n\ntype TrailProps = Required<Pick<ProgressProps, 'height'>>;\nconst Trail = styled('div', omitEmotionProps('height'))<TrailProps>`\n  width: 100%;\n  background-color: ${(p) => clr(p.theme.progressColorTrail)};\n  border-radius: ${(p) => `calc(${p.height} / 2)`};\n  overflow: hidden; // To hide the border of the progress bar\n`;\n\ntype StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;\nconst Stroke = styled(\n  'div',\n  omitEmotionProps('percent', 'height')\n)<StrokeProps>`\n  width: ${(p) => p.percent}%;\n  height: ${(p) => p.height};\n  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}\n    ${(p) => `calc(${p.height} / 2)`} 0;\n  background-color: ${(p) =>\n    p.percent < 100\n      ? clr(p.theme.progressColorStroke)\n      : clr(p.theme.progressColorStrokeSuccess)};\n  ${transitionStyles('width', 'background-color')};\n`;\n\nconst Text = styled.div`\n  margin-left: 0.5em;\n  color: ${(p) => clr(p.theme.progressColorPercentage)};\n  line-height: 1;\n`;\n\n/**\n * The progress bar.\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {\n    const validPercent = useMemo(() => {\n      if (percent < 0) return 0;\n      if (percent > 100) return 100;\n      return percent;\n    }, [percent]);\n\n    const textId = useMemo(\n      () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <Container\n        role='progressbar'\n        aria-valuenow={validPercent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-describedby={textId}\n        {...rest}\n        ref={ref}\n      >\n        <Trail height={height}>\n          <Stroke percent={validPercent} height={height} />\n        </Trail>\n        {text && <Text id={textId}>{text}</Text>}\n      </Container>\n    );\n  }\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"file":"index.js"}

package/dist/esm/Select/index.js

@@ -143,7 +143,7 @@ const Select = /*#__PURE__*/forwardRef(({
       value: v
     };
   }), [forwardedValue, options]);
-  const listBoxId = useMemo(() => `listbox-${Math.random().toString(36).substr(2, 9)}`, []);
+  const listBoxId = useMemo(() => `listbox-${Math.random().toString(36).slice(2, 11)}`, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
     opened: opened,
     unbordered: unbordered,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Select/index.tsx"],"names":["React","forwardRef","useCallback","useMemo","useRef","useState","transitionStyles","omitEmotionProps","useEvent","useForwardedRef","useForwardedState","useResizeObserver","useBrowserLayoutEffect","styled","m","css","clr","InputContainer","Menu","InputSearch","SelectToggle","SelectList","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","inputPaddingHorizontal","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","resizeHandler","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","substr","e","includes","key","preventDefault","filter","focus","length","displayName"],"mappings":"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","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).substr(2, 9)}`,\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"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Select/index.tsx"],"names":["React","forwardRef","useCallback","useMemo","useRef","useState","transitionStyles","omitEmotionProps","useEvent","useForwardedRef","useForwardedState","useResizeObserver","useBrowserLayoutEffect","styled","m","css","clr","InputContainer","Menu","InputSearch","SelectToggle","SelectList","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","inputPaddingHorizontal","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","resizeHandler","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","focus","length","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,UADF,EAEEC,WAFF,EAGEC,OAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,SAASC,gBAAT,QAA2C,mBAA3C;AACA,SACEC,gBADF,EAEEC,QAFF,EAGEC,eAHF,EAIEC,iBAJF,EAKEC,iBALF,EAMEC,sBANF,QAOO,kBAPP;AAQA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,cAAT,QAA+B,UAA/B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,WAAP,MAA8C,gBAA9C;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,UAAP,MAAwC,cAAxC;AAEA,OAAOC,aAAP,MAA4C,uBAA5C;;AAsGA,MAAMC,aAAa,GAAIC,CAAD,IAAO;AAC3B,QAAMC,eAAe,GACnB,CAACD,CAAC,CAACE,KAAF,CAAQC,UAAR,GAAqBH,CAAC,CAACE,KAAF,CAAQE,0BAA9B,IAA4D,CAD9D;AAGA,SAAOb,GAAI;AACb,oBAAoBU,eAAgB;AACpC,aAAaA,eAAgB,aAAYD,CAAC,CAACE,KAAF,CAAQG,sBAAuB;AACxE,GAHE;AAID,CARD;;AAUA,MAAMC,YAAY,GAAIN,CAAD,IACnBA,CAAC,CAACO,MAAF,IACA,CAACP,CAAC,CAACQ,UADH,IAEAjB,GAAI;AACN,oBAAoBC,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQO,qBAAT,CAAgC;AACvD,+BAA+BjB,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQQ,qBAAT,CAAgC;AAClE,GANA;;AAQA,MAAMC,gBAAgB,GAAIX,CAAD,IACvBA,CAAC,CAACQ,UAAF,IACAjB,GAAI;AACN;AACA;AACA;AACA,MAAMT,gBAAgB,CAAC,kBAAD,CAAhB,CAAqCkB,CAArC,CAAwC;AAC9C,GAPA;;AASA,MAAMY,qBAAqB,GAAIZ,CAAD,IAC5BA,CAAC,CAACQ,UAAF,IACA,CAACR,CAAC,CAACa,QADH,IAEAtB,GAAI;AACN;AACA;AACA;AACA,4BAA4BC,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQY,uBAAT,CAAkC;AACjE;AACA;AACA,GAVA;;AAiBA,OAAO,MAAMC,eAAe,GAAG1B,MAAM,CACnCI,cADmC,EAEnCV,gBAAgB,CAAC,QAAD,EAAW,YAAX,EAAyB,UAAzB,CAFmB,CAGb;AACxB,YAAaiB,CAAD,IAAQ,CAACA,CAAC,CAACa,QAAH,GAAc,SAAd,GAA0B,aAAe;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,gBAAiBb,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQC,UAAW;AAC1C;AACA,IAAIJ,aAAc;AAClB,IAAIO,YAAa;AACjB,IAAIK,gBAAiB;AACrB,IAAIC,qBAAsB;AAC1B,CAjBO;AAsBP,MAAMI,UAAU,GAAG3B,MAAM,CAACK,IAAD,EAAOX,gBAAgB,CAAC,OAAD,CAAvB,CAAmD;AAC5E;AACA;AACA;AACA;AACA,IAAIO,CAAC,CAAC2B,GAAF,CAAMC,EAAG;AACb,aAAclB,CAAD,IAAOA,CAAC,CAACmB,KAAM;AAC5B;AACA,CARA;AAUA,MAAMC,QAAQ,GAAG/B,MAAM,CAACgC,GAAI;AAC5B,YAAarB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQoB,cAAe;AAC1C;AACA;AACA;AACA,eAAgBtB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQG,sBAAuB;AACrD,WAAYL,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQqB,uBAAT,CAAkC;AACvD,CAPA;AASA,MAAMC,oBAAoB,GAAGnC,MAAM,CAACgC,GAAI;AACxC,aAAcrB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQuB,mBAAoB;AAChD,MAAOzB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQG,sBAAuB;AAC5C,CAHA;AAKA;AACA;AACA;;AACA,MAAMqB,MAAM,gBAAGjD,UAAU,CACvB,CACE;AACEkD,EAAAA,OAAO,GAAG,EADZ;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,aAAa,GAAG,KAHlB;AAIEC,EAAAA,WAAW,GAAG,EAJhB;AAKEC,EAAAA,YAAY,GAAG,WALjB;AAMEvB,EAAAA,UAAU,GAAG,KANf;AAOEwB,EAAAA,OAAO,GAAG,KAPZ;AAQEnB,EAAAA,QAAQ,GAAG,KARb;AASEoB,EAAAA,YAAY,GAAG,KATjB;AAUEC,EAAAA,SAAS,GAAG,EAVd;AAWEC,EAAAA,YAAY,GAAG,CAXjB;AAYEC,EAAAA,aAAa,GAAG,EAZlB;AAaEC,EAAAA,gBAAgB,GAAG,CAbrB;AAcEC,EAAAA,MAAM,GAAGxC,aAdX;AAeEyC,EAAAA,KAfF;AAgBEC,EAAAA,YAhBF;AAiBEC,EAAAA,QAjBF;AAkBEC,EAAAA,UAAU,GAAG,MAAM,CAAE,CAlBvB;AAmBEC,EAAAA,IAnBF;AAoBEC,EAAAA,SApBF;AAqBE,KAAGC;AArBL,CADF,EAwBEC,GAxBF,KAyBK;AACH,QAAM,CAACC,YAAD,EAAeC,kBAAf,IAAqC/D,eAAe,CAAC6D,GAAD,CAA1D;AACA,QAAM,CAAC3B,KAAD,EAAQ8B,QAAR,IAAoBpE,QAAQ,CAAC,CAAD,CAAlC;AACA,QAAMqE,uBAAuB,GAAGtE,MAAM,CAAiB,IAAjB,CAAtC;AACA,QAAM,CAAC2B,MAAD,EAAS4C,SAAT,IAAsBtE,QAAQ,CAAC,KAAD,CAApC;AACA,QAAM,CAACuE,cAAD,EAAiBC,iBAAjB,IAAsCnE,iBAAiB,CAAC;AAC5DqD,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA;AACJ;AACA;AACA;;AACI,QAAMa,aAAa,GAAG5E,WAAW,CAAC,MAAM;AACtC6E,IAAAA,MAAM,CAACC,qBAAP,CAA6B,MAAM;AACjC,UAAI,CAACjD,MAAD,IAAW,CAACwC,YAAY,CAACU,OAA7B,EAAsC;AACtC,YAAMC,SAAS,GAAGX,YAAY,CAACU,OAAb,CAAqBE,qBAArB,GAA6CxC,KAA/D;AACA,UAAIA,KAAK,KAAKuC,SAAd,EAAyB;AACzBT,MAAAA,QAAQ,CAACS,SAAD,CAAR;AACD,KALD;AAMD,GAPgC,EAO9B,CAACnD,MAAD,EAASwC,YAAT,EAAuB5B,KAAvB,CAP8B,CAAjC;AAQA/B,EAAAA,sBAAsB,CAAC,MAAMkE,aAAa,EAApB,EAAwB,CAACA,aAAD,CAAxB,CAAtB;AACAnE,EAAAA,iBAAiB,CAAC4D,YAAD,EAAeO,aAAf,CAAjB;AACAtE,EAAAA,QAAQ,CACL,OAAOuE,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCK,SADpC,EAEN,QAFM,EAGNN,aAHM,CAAR,CAzBG,CA+BH;;AACAlE,EAAAA,sBAAsB,CAAC,MAAM;AAC3B,QAAI,CAAC2D,YAAY,CAACU,OAAlB,EAA2B;AAC3BV,IAAAA,YAAY,CAACU,OAAb,CAAqBI,YAArB,CAAkC,eAAlC,EAAmD,SAAnD;AACD,GAHqB,EAGnB,EAHmB,CAAtB;AAKA,QAAMC,aAAa,GAAGnF,OAAO,CAC3B,MACE,CAACyE,cAAc,IAAI,EAAnB,EAAuBW,GAAvB,CAA4BC,CAAD,IAAO;AAChC,UAAMC,MAAM,GAAG,CAACtC,OAAO,IAAI,EAAZ,EAAgBuC,IAAhB,CAAsBC,IAAD,IAAUA,IAAI,CAAC5B,KAAL,KAAeyB,CAA9C,CAAf;AACA,WAAO;AAAEI,MAAAA,KAAK,EAAEH,MAAM,GAAGA,MAAM,CAACG,KAAP,IAAgB,EAAnB,GAAwB,EAAvC;AAA2C7B,MAAAA,KAAK,EAAEyB;AAAlD,KAAP;AACD,GAHD,CAFyB,EAM3B,CAACZ,cAAD,EAAiBzB,OAAjB,CAN2B,CAA7B;AASA,QAAM0C,SAAS,GAAG1F,OAAO,CACvB,MAAO,WAAU2F,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EADlC,EAEvB,EAFuB,CAAzB;AAKA,sBACE,uDACE,oBAAC,eAAD;AACE,IAAA,MAAM,EAAElE,MADV;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,QAAQ,EAAEK,QAHZ;AAIE,IAAA,IAAI,EAAE8B,IAJR;AAKE,IAAA,QAAQ,EAAE,CAAC9B,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAL7B;AAME,IAAA,OAAO,EAAE,MAAM;AACb,UAAIA,QAAJ,EAAc;AACdsC,MAAAA,SAAS,CAAC,CAAC5C,MAAF,CAAT;AACD,KATH;AAUE,IAAA,SAAS,EAAGmE,CAAD,IAAO;AAChB,UAAI7D,QAAJ,EAAc;;AACd,UAAI,CAAC,OAAD,EAAU,GAAV,EAAe8D,QAAf,CAAwBD,CAAC,CAACE,GAA1B,CAAJ,EAAoC;AAClCzB,QAAAA,SAAS,CAAC,CAAC5C,MAAF,CAAT;AACAmE,QAAAA,CAAC,CAACG,cAAF;AACD;AACF,KAhBH;AAiBE,IAAA,WAAW,EAAGH,CAAD,IAAOA,CAAC,CAACG,cAAF,EAjBtB;AAkBE,IAAA,IAAI,EAAC,UAlBP;AAmBE,qBAAehE,QAnBjB;AAoBE,iBAAWmB,OApBb;AAqBE,qBAAc,SArBhB;AAsBE,iBAAWqC;AAtBb,KAuBMxB,IAvBN;AAwBE,IAAA,GAAG,EAAEG;AAxBP,mBA0BE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEc,aADjB;AAEE,IAAA,QAAQ,EAAGE,CAAD,IACRX,iBAAiB,CACf,CAACD,cAAc,IAAI,EAAnB,EAAuB0B,MAAvB,CAA+BX,IAAD,IAAUA,IAAI,KAAKH,CAAjD,CADe,CAHrB;AAOE,IAAA,OAAO,EAAE,MAAM;AACbX,MAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACA,UAAI,CAACN,YAAY,CAACU,OAAlB,EAA2B;AAC3BV,MAAAA,YAAY,CAACU,OAAb,CAAqBsB,KAArB;AACD,KAXH;AAYE,IAAA,MAAM,EAAExE,MAZV;AAaE,IAAA,UAAU,EAAEC,UAbd;AAcE,IAAA,QAAQ,EAAE6B,gBAAgB,KAAK,CAdjC;AAeE,IAAA,QAAQ,EAAExB,QAfZ;AAgBE,IAAA,YAAY,EAAEoB,YAhBhB;AAiBE,IAAA,WAAW,EAAEL,WAjBf;AAkBE,IAAA,OAAO,EAAEI,OAlBX;AAmBE,IAAA,MAAM,EAAEM;AAnBV,IA1BF,CADF,eAkDE,oBAAC,UAAD;AACE,IAAA,OAAO,EAAES,YADX;AAEE,IAAA,OAAO,EAAExC,MAFX;AAGE,IAAA,OAAO,EAAE,MAAM4C,SAAS,CAAC,KAAD,CAH1B;AAIE,IAAA,IAAI,EAAER,IAJR;AAKE,IAAA,KAAK,EAAExB,KALT;AAME,IAAA,aAAa,EAAEkB,gBAAgB,KAAK,CANtC;AAOE,IAAA,UAAU,EAAET,WAPd;AAQE,IAAA,SAAS,EAAEgB;AARb,KAUGf,aAAa,iBACZ,oBAAC,oBAAD;AAAsB,IAAA,GAAG,EAAEqB;AAA3B,kBACE,oBAAC,WAAD,EAAiBpB,WAAjB,CADF,CAXJ,EAgBGH,OAAO,CAACqD,MAAR,GAAiB,CAAjB,gBACC,oBAAC,UAAD;AACE,IAAA,aAAa,EAAEnD,aADjB;AAEE,IAAA,OAAO,EAAEF,OAFX;AAGE,IAAA,YAAY,EAAEQ,YAHhB;AAIE,IAAA,aAAa,EAAEC,aAJjB;AAKE,IAAA,SAAS,EAAEF,SALb;AAME,IAAA,UAAU,EAAEQ,UANd;AAOE,IAAA,gBAAgB,EAAEL,gBAPpB;AAQE,IAAA,YAAY,EAAEU,YARhB;AASE,IAAA,KAAK,EAAEK,cATT;AAUE,IAAA,QAAQ,EAAEC,iBAVZ;AAWE,IAAA,EAAE,EAAEgB,SAXN;AAYE,IAAA,IAAI,EAAE1B;AAZR,IADD,gBAgBC,oBAAC,QAAD,QAAWZ,YAAX,CAhCJ,CAlDF,CADF;AAwFD,CArKsB,CAAzB;AAwKAL,MAAM,CAACuD,WAAP,GAAqB,QAArB;AAEA,eAAevD,MAAf","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"],"file":"index.js"}

package/dist/types/Button/ButtonContent.d.ts

@@ -5,6 +5,7 @@ interface ButtonContentProps {
     right?: React.ReactNode;
     loading?: boolean;
     loadingColors: LoadingColors;
+    children?: React.ReactNode;
 }
 declare const ButtonContent: React.FC<ButtonContentProps>;
 export default ButtonContent;

package/dist/types/Button/ButtonContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.d.ts","sourceRoot":"","sources":["../../../src/Button/ButtonContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,aAAa,CAAC;CAC9B;AAsDD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ButtonContent.d.ts","sourceRoot":"","sources":["../../../src/Button/ButtonContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAsDD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/types/Layout/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface LayoutProps {
     hasNavigation?: boolean;
     hasPageHeader?: boolean;
+    children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;
 export default Layout;

package/dist/types/Layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,WAAW;IAK1B,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAKD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAejC,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,WAAW;IAK1B,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAKD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAejC,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/types/List/WindowScroller.d.ts

@@ -5,6 +5,7 @@ export interface ScrollPosition {
 }
 interface WindowScrollerProps {
     onScroll?: (props: ScrollPosition) => void;
+    children?: React.ReactNode;
 }
 export declare const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;
 declare const WindowScroller: React.FC<WindowScrollerProps>;

package/dist/types/List/WindowScroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WindowScroller.d.ts","sourceRoot":"","sources":["../../../src/List/WindowScroller.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAMD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyBjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"WindowScroller.d.ts","sourceRoot":"","sources":["../../../src/List/WindowScroller.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyBjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/types/Select/SelectToggle.d.ts

@@ -36,8 +36,6 @@ export declare const ClearButtonContainer: import("@emotion/styled").StyledCompo
     theme?: import("@emotion/react").Theme | undefined;
     as?: "symbol" | "object" | "div" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
 } & IconContainerProps & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & {
-    children?: React.ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const ClearIcon: import("@emotion/styled").StyledComponent<Pick<React.SVGProps<SVGSVGElement>, "string" | "key" | "className" | "id" | "lang" | "style" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | "clipPath" | "filter" | "mask" | "path" | "cursor" | "direction" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "max" | "media" | "method" | "min" | "name" | "target" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & React.RefAttributes<SVGSVGElement> & {

package/dist/types/Select/SelectToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectToggle.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAapD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,UAAU,iBAAiB;IACzB,aAAa,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;;uFAGvB,CAAC;AAgBF,eAAO,MAAM,KAAK;;;4IAQjB,CAAC;AAsDF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,aAAa;;;4GAczB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;UAEhC,CAAC;AAEF,eAAO,MAAM,SAAS;;UAErB,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiG7C,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelectToggle.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAapD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,UAAU,iBAAiB;IACzB,aAAa,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;;uFAGvB,CAAC;AAgBF,eAAO,MAAM,KAAK;;;4IAQjB,CAAC;AAsDF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,aAAa;;;4GAczB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;UAEhC,CAAC;AAEF,eAAO,MAAM,SAAS;;UAErB,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiG7C,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/types/Select/index.d.ts

@@ -34,8 +34,6 @@ export declare const SelectContainer: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: "symbol" | "object" | "div" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
 } & Pick<import("../Input").InputProps, "size" | "disabled"> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
 } & SelectContainerProps, {}, {}>;
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAe/D,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAmB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,WACf,SAAQ,WAAW,EACjB,QAAQ,EACR,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAKjC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAKxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAK/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAKlC,MAAM,CAAC,EAAE,YAAY,CAAC;IAKtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAKjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAKrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAyCD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,eAAe;;;;;;;iCAiB3B,CAAC;AAgCF,QAAA,MAAM,MAAM,oFAsKX,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAe/D,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAmB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,WACf,SAAQ,WAAW,EACjB,QAAQ,EACR,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAKjC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAKxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAK/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAKlC,MAAM,CAAC,EAAE,YAAY,CAAC;IAKtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAKjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAKrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAyCD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,eAAe;;;;;iCAiB3B,CAAC;AAgCF,QAAA,MAAM,MAAM,oFAsKX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.117",
+  "version": "1.0.120",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -28,15 +28,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/date-picker-utils": "^1.0.4",
-    "@os-design/icons": "^1.0.33",
-    "@os-design/input-number-utils": "^1.0.10",
-    "@os-design/media": "^1.0.10",
-    "@os-design/menu-utils": "^1.0.4",
-    "@os-design/portal": "^1.0.0",
-    "@os-design/styles": "^1.0.31",
-    "@os-design/theming": "^1.0.29",
-    "@os-design/utils": "^1.0.44",
+    "@os-design/date-picker-utils": "^1.0.5",
+    "@os-design/icons": "^1.0.34",
+    "@os-design/input-number-utils": "^1.0.11",
+    "@os-design/media": "^1.0.11",
+    "@os-design/menu-utils": "^1.0.5",
+    "@os-design/portal": "^1.0.1",
+    "@os-design/styles": "^1.0.32",
+    "@os-design/theming": "^1.0.30",
+    "@os-design/utils": "^1.0.45",
     "@os-team/password-score": "^1.0.3",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.8.1",
@@ -53,8 +53,8 @@
     "@emotion/react": ">=11",
     "@emotion/serialize": "*",
     "@emotion/styled": ">=11",
-    "react": "0.0.0-experimental-645ec5d6f-20220317",
-    "react-dom": "0.0.0-experimental-645ec5d6f-20220317"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
-  "gitHead": "c0b488fbb8cc537b1fe362af50610edbf0d839df"
+  "gitHead": "545becc1e509731e3c5e4ca1f89bdda6133f4f31"
 }