@os-design/core 1.0.117 → 1.0.120

package/dist/cjs/Button/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["LeftAddon","styled","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","Loading","loadingFadeIn","keyframes","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAUA,IAAMA,SAAS,GAAGC,mBAAOC,GAAV,uHAEI,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFJ,CAAf;;AAKA,IAAMC,UAAU,GAAGL,mBAAOC,GAAV,wHAEE,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFF,CAAhB;;AAKA,IAAME,OAAO,GAAGN,mBAAOO,IAAV,6KAIU,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAf;AAAA,CAJV,CAAb;;AASA,IAAMC,WAAW,GAAG,wBAAOC,cAAP,CAAH,8FAAjB;AAIA,IAAMC,aAAa,OAAGC,iBAAH,wHAAnB;AAQA,IAAMC,gBAAgB,GAAG,wBACvB,KADuB,EAEvB,6BAAiB,QAAjB,CAFuB,CAAH,8TAeX,UAACX,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACY,MAAF,CAASC,IAAb,CAAP;AAAA,CAfW,EAgBA,UAACb,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACY,MAAF,CAASE,EAAb,CAAP;AAAA,CAhBA,EAiBPL,aAjBO,EAiBU,UAACT,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQc,eAAf;AAAA,CAjBV,CAAtB,C,CAoBA;;AACA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C;AAAA,MAClDC,IADkD,QAClDA,IADkD;AAAA,MAElDC,KAFkD,QAElDA,KAFkD;AAAA,0BAGlDC,OAHkD;AAAA,MAGlDA,OAHkD,6BAGxC,KAHwC;AAAA,MAIlDC,aAJkD,QAIlDA,aAJkD;AAAA,MAKlDC,QALkD,QAKlDA,QALkD;AAAA,sBAOlD,kEACGJ,IAAI,iBAAI,gCAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,gCAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,gCAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,gCAAC,gBAAD;AAAkB,IAAA,MAAM,EAAEC;AAA1B,kBACE,gCAAC,WAAD,OADF,CALJ,CAPkD;AAAA,CAApD;;eAmBeJ,a","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}
+{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["LeftAddon","styled","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","Loading","loadingFadeIn","keyframes","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAWA,IAAMA,SAAS,GAAGC,mBAAOC,GAAV,uHAEI,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFJ,CAAf;;AAKA,IAAMC,UAAU,GAAGL,mBAAOC,GAAV,wHAEE,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFF,CAAhB;;AAKA,IAAME,OAAO,GAAGN,mBAAOO,IAAV,6KAIU,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAf;AAAA,CAJV,CAAb;;AASA,IAAMC,WAAW,GAAG,wBAAOC,cAAP,CAAH,8FAAjB;AAIA,IAAMC,aAAa,OAAGC,iBAAH,wHAAnB;AAQA,IAAMC,gBAAgB,GAAG,wBACvB,KADuB,EAEvB,6BAAiB,QAAjB,CAFuB,CAAH,8TAeX,UAACX,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACY,MAAF,CAASC,IAAb,CAAP;AAAA,CAfW,EAgBA,UAACb,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACY,MAAF,CAASE,EAAb,CAAP;AAAA,CAhBA,EAiBPL,aAjBO,EAiBU,UAACT,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQc,eAAf;AAAA,CAjBV,CAAtB,C,CAoBA;;AACA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C;AAAA,MAClDC,IADkD,QAClDA,IADkD;AAAA,MAElDC,KAFkD,QAElDA,KAFkD;AAAA,0BAGlDC,OAHkD;AAAA,MAGlDA,OAHkD,6BAGxC,KAHwC;AAAA,MAIlDC,aAJkD,QAIlDA,aAJkD;AAAA,MAKlDC,QALkD,QAKlDA,QALkD;AAAA,sBAOlD,kEACGJ,IAAI,iBAAI,gCAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,gCAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,gCAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,gCAAC,gBAAD;AAAkB,IAAA,MAAM,EAAEC;AAA1B,kBACE,gCAAC,WAAD,OADF,CALJ,CAPkD;AAAA,CAApD;;eAmBeJ,a","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}

package/dist/cjs/FormItem/index.js

@@ -93,7 +93,7 @@ var FormItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       optionalText = _useContext.optionalText;
 
   var containerId = (0, _react.useMemo)(function () {
-    return id || Math.random().toString(36).substr(2, 9);
+    return id || Math.random().toString(36).slice(2, 11);
   }, [id]);
   var fieldId = (0, _react.useMemo)(function () {
     return "field-".concat(containerId);

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Layout/index.tsx"],"names":["Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;AAeA;AACA;AACA;AACA,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIhC;AAAA,gCAHJC,aAGI;AAAA,MAHJA,aAGI,mCAHY,KAGZ;AAAA,gCAFJC,aAEI;AAAA,MAFJA,aAEI,mCAFY,KAEZ;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,YAAY,GAAG,oBACnB;AAAA,WAAO;AAAEH,MAAAA,aAAa,EAAbA,aAAF;AAAiBC,MAAAA,aAAa,EAAbA;AAAjB,KAAP;AAAA,GADmB,EAEnB,CAACD,aAAD,EAAgBC,aAAhB,CAFmB,CAArB;AAKA,sBACE,gCAAC,yBAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAEE;AAA/B,KACGD,QADH,CADF;AAKD,CAfD;;AAiBAH,MAAM,CAACK,WAAP,GAAqB,QAArB;eAEeL,M","sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n  /**\n   * Whether there is the navigation in the layout.\n   * @default false\n   */\n  hasNavigation?: boolean;\n  /**\n   * Whether there is the page header in the layout.\n   * @default false\n   */\n  hasPageHeader?: boolean;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n  hasNavigation = false,\n  hasPageHeader = false,\n  children,\n}) => {\n  const contextValue = useMemo(\n    () => ({ hasNavigation, hasPageHeader }),\n    [hasNavigation, hasPageHeader]\n  );\n\n  return (\n    <LayoutContext.Provider value={contextValue}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Layout/index.tsx"],"names":["Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;AAoBA;AACA;AACA;AACA,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIhC;AAAA,gCAHJC,aAGI;AAAA,MAHJA,aAGI,mCAHY,KAGZ;AAAA,gCAFJC,aAEI;AAAA,MAFJA,aAEI,mCAFY,KAEZ;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,YAAY,GAAG,oBACnB;AAAA,WAAO;AAAEH,MAAAA,aAAa,EAAbA,aAAF;AAAiBC,MAAAA,aAAa,EAAbA;AAAjB,KAAP;AAAA,GADmB,EAEnB,CAACD,aAAD,EAAgBC,aAAhB,CAFmB,CAArB;AAKA,sBACE,gCAAC,yBAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAEE;AAA/B,KACGD,QADH,CADF;AAKD,CAfD;;AAiBAH,MAAM,CAACK,WAAP,GAAqB,QAArB;eAEeL,M","sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n  /**\n   * Whether there is the navigation in the layout.\n   * @default false\n   */\n  hasNavigation?: boolean;\n  /**\n   * Whether there is the page header in the layout.\n   * @default false\n   */\n  hasPageHeader?: boolean;\n  /**\n   * The children.\n   * @default undefined\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n  hasNavigation = false,\n  hasPageHeader = false,\n  children,\n}) => {\n  const contextValue = useMemo(\n    () => ({ hasNavigation, hasPageHeader }),\n    [hasNavigation, hasPageHeader]\n  );\n\n  return (\n    <LayoutContext.Provider value={contextValue}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"file":"index.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/WindowScroller.tsx"],"names":["DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAcA;AACA;AACA;AACA;AACO,IAAMA,mCAAmC,GAAG,GAA5C;;;AAEP,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD,OAGhD;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,WAAW,GAAG,oBAApB;AAEA,wBAAU,YAAM;AACdA,IAAAA,WAAW,CAACC,OAAZ,GAAsBH,QAAtB;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,MAAMI,cAAc,GAAG,wBAAY,YAAM;AACvC;AACA,8DAAkCN,mCAAlC;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,GARsB,EAQpB,EARoB,CAAvB;AAUA,wBAAU;AAAA,WAAM;AAAA,aAAM,0DAAkC,CAAlC,CAAN;AAAA,KAAN;AAAA,GAAV,EAA4D,EAA5D;AACA,uBAASC,QAAT,EAAmB,QAAnB,EAA6BN,cAA7B,EAlBI,CAoBJ;;AACA,sBAAO,kEAAGH,QAAH,CAAP;AACD,CAzBD;;eA2BeF,c","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":["DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAeA;AACA;AACA;AACA;AACO,IAAMA,mCAAmC,GAAG,GAA5C;;;AAEP,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD,OAGhD;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,WAAW,GAAG,oBAApB;AAEA,wBAAU,YAAM;AACdA,IAAAA,WAAW,CAACC,OAAZ,GAAsBH,QAAtB;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,MAAMI,cAAc,GAAG,wBAAY,YAAM;AACvC;AACA,8DAAkCN,mCAAlC;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,GARsB,EAQpB,EARoB,CAAvB;AAUA,wBAAU;AAAA,WAAM;AAAA,aAAM,0DAAkC,CAAlC,CAAN;AAAA,KAAN;AAAA,GAAV,EAA4D,EAA5D;AACA,uBAASC,QAAT,EAAmB,QAAnB,EAA6BN,cAA7B,EAlBI,CAoBJ;;AACA,sBAAO,kEAAGH,QAAH,CAAP;AACD,CAzBD;;eA2BeF,c","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/cjs/Menu/index.js

@@ -92,7 +92,7 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   var isMinXs = (0, _media.useIsMinWidth)('xs');
   var menuId = (0, _react.useMemo)(function () {
-    return id || "menu-".concat(Math.random().toString(36).substr(2, 9));
+    return id || "menu-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]); // Replace the aria-haspopup attribute from true to menu
 
   (0, _utils.useBrowserLayoutEffect)(function () {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/index.tsx"],"names":["StyledPopover","Popover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Modal","Menu","ref","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","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":["StyledPopover","Popover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Modal","Menu","ref","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","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/cjs/Modal/index.js

@@ -176,10 +176,10 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _utils.useClickOutside)(contentRef, onClose);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   var titleId = (0, _react.useMemo)(function () {
-    return "modal-title-".concat(Math.random().toString(36).substr(2, 9));
+    return "modal-title-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
   var bodyId = (0, _react.useMemo)(function () {
-    return id || "modal-body-".concat(Math.random().toString(36).substr(2, 9));
+    return id || "modal-body-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]);
   if (!mounted) return null;
   return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(ModalMask, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","children","rest","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":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","children","rest","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/cjs/Popover/index.js

@@ -158,7 +158,7 @@ var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setTriggerRect(trigger);
   }, [trigger]);
   var popoverId = (0, _react.useMemo)(function () {
-    return id || "popover-".concat(Math.random().toString(36).substr(2, 9));
+    return id || "popover-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]); // Set the aria tags to support accessibility features
 
   (0, _utils.useBrowserLayoutEffect)(function () {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Popover/index.tsx"],"names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","sizeStyles","emptyRect","width","height","Popover","ref","trigger","placement","gap","flip","onClose","id","children","rest","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":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","sizeStyles","emptyRect","width","height","Popover","ref","trigger","placement","gap","flip","onClose","id","children","rest","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/cjs/Progress/index.js

@@ -75,7 +75,7 @@ var Progress = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return percent;
   }, [percent]);
   var textId = (0, _react.useMemo)(function () {
-    return "progress-bar-text-".concat(Math.random().toString(36).substr(2, 9));
+    return "progress-bar-text-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     role: "progressbar",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Progress/index.tsx"],"names":["Container","sizeStyles","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","styled","div","progressColorPercentage","Progress","ref","text","rest","validPercent","textId","Math","random","toString","substr","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAqBA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,2HAGXC,kBAHW,CAAf;AAOA,IAAMC,KAAK,GAAG,wBAAO,KAAP,EAAc,6BAAiB,QAAjB,CAAd,CAAH,4MAEW,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,kBAAZ,CAAP;AAAA,CAFX,EAGQ,UAACF,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CAHR,CAAX;AAQA,IAAMC,MAAM,GAAG,wBACb,KADa,EAEb,6BAAiB,SAAjB,EAA4B,QAA5B,CAFa,CAAH,sLAID,UAACJ,CAAD;AAAA,SAAOA,CAAC,CAACK,OAAT;AAAA,CAJC,EAKA,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACG,MAAT;AAAA,CALA,EAMS,UAACH,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CANT,EAON,UAACH,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CAPM,EAQU,UAACH,CAAD;AAAA,SAClBA,CAAC,CAACK,OAAF,GAAY,GAAZ,GACI,kBAAIL,CAAC,CAACC,KAAF,CAAQK,mBAAZ,CADJ,GAEI,kBAAIN,CAAC,CAACC,KAAF,CAAQM,0BAAZ,CAHc;AAAA,CARV,EAYR,8BAAiB,OAAjB,EAA0B,kBAA1B,CAZQ,CAAZ;;AAeA,IAAMC,IAAI,GAAGC,mBAAOC,GAAV,oIAEC,UAACV,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQU,uBAAZ,CAAP;AAAA,CAFD,CAAV;AAMA;AACA;AACA;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAAmDC,GAAnD,EAA2D;AAAA,0BAAxDR,OAAwD;AAAA,MAAxDA,OAAwD,6BAA9C,CAA8C;AAAA,MAA3CS,IAA2C,QAA3CA,IAA2C;AAAA,yBAArCX,MAAqC;AAAA,MAArCA,MAAqC,4BAA5B,OAA4B;AAAA,MAAhBY,IAAgB;;AACzD,MAAMC,YAAY,GAAG,oBAAQ,YAAM;AACjC,QAAIX,OAAO,GAAG,CAAd,EAAiB,OAAO,CAAP;AACjB,QAAIA,OAAO,GAAG,GAAd,EAAmB,OAAO,GAAP;AACnB,WAAOA,OAAP;AACD,GAJoB,EAIlB,CAACA,OAAD,CAJkB,CAArB;AAMA,MAAMY,MAAM,GAAG,oBACb;AAAA,uCAA2BC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,MAA3B,CAAkC,CAAlC,EAAqC,CAArC,CAA3B;AAAA,GADa,EAEb,EAFa,CAAf;AAKA,sBACE,gCAAC,SAAD;AACE,IAAA,IAAI,EAAC,aADP;AAEE,qBAAeL,YAFjB;AAGE,qBAAe,CAHjB;AAIE,qBAAe,GAJjB;AAKE,wBAAkBC;AALpB,KAMMF,IANN;AAOE,IAAA,GAAG,EAAEF;AAPP,mBASE,gCAAC,KAAD;AAAO,IAAA,MAAM,EAAEV;AAAf,kBACE,gCAAC,MAAD;AAAQ,IAAA,OAAO,EAAEa,YAAjB;AAA+B,IAAA,MAAM,EAAEb;AAAvC,IADF,CATF,EAYGW,IAAI,iBAAI,gCAAC,IAAD;AAAM,IAAA,EAAE,EAAEG;AAAV,KAAmBH,IAAnB,CAZX,CADF;AAgBD,CA7Bc,CAAjB;AAgCAF,QAAQ,CAACU,WAAT,GAAuB,UAAvB;eAEeV,Q","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":["Container","sizeStyles","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","styled","div","progressColorPercentage","Progress","ref","text","rest","validPercent","textId","Math","random","toString","slice","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAqBA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,2HAGXC,kBAHW,CAAf;AAOA,IAAMC,KAAK,GAAG,wBAAO,KAAP,EAAc,6BAAiB,QAAjB,CAAd,CAAH,4MAEW,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,kBAAZ,CAAP;AAAA,CAFX,EAGQ,UAACF,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CAHR,CAAX;AAQA,IAAMC,MAAM,GAAG,wBACb,KADa,EAEb,6BAAiB,SAAjB,EAA4B,QAA5B,CAFa,CAAH,sLAID,UAACJ,CAAD;AAAA,SAAOA,CAAC,CAACK,OAAT;AAAA,CAJC,EAKA,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACG,MAAT;AAAA,CALA,EAMS,UAACH,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CANT,EAON,UAACH,CAAD;AAAA,wBAAeA,CAAC,CAACG,MAAjB;AAAA,CAPM,EAQU,UAACH,CAAD;AAAA,SAClBA,CAAC,CAACK,OAAF,GAAY,GAAZ,GACI,kBAAIL,CAAC,CAACC,KAAF,CAAQK,mBAAZ,CADJ,GAEI,kBAAIN,CAAC,CAACC,KAAF,CAAQM,0BAAZ,CAHc;AAAA,CARV,EAYR,8BAAiB,OAAjB,EAA0B,kBAA1B,CAZQ,CAAZ;;AAeA,IAAMC,IAAI,GAAGC,mBAAOC,GAAV,oIAEC,UAACV,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQU,uBAAZ,CAAP;AAAA,CAFD,CAAV;AAMA;AACA;AACA;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAAmDC,GAAnD,EAA2D;AAAA,0BAAxDR,OAAwD;AAAA,MAAxDA,OAAwD,6BAA9C,CAA8C;AAAA,MAA3CS,IAA2C,QAA3CA,IAA2C;AAAA,yBAArCX,MAAqC;AAAA,MAArCA,MAAqC,4BAA5B,OAA4B;AAAA,MAAhBY,IAAgB;;AACzD,MAAMC,YAAY,GAAG,oBAAQ,YAAM;AACjC,QAAIX,OAAO,GAAG,CAAd,EAAiB,OAAO,CAAP;AACjB,QAAIA,OAAO,GAAG,GAAd,EAAmB,OAAO,GAAP;AACnB,WAAOA,OAAP;AACD,GAJoB,EAIlB,CAACA,OAAD,CAJkB,CAArB;AAMA,MAAMY,MAAM,GAAG,oBACb;AAAA,uCAA2BC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAA3B;AAAA,GADa,EAEb,EAFa,CAAf;AAKA,sBACE,gCAAC,SAAD;AACE,IAAA,IAAI,EAAC,aADP;AAEE,qBAAeL,YAFjB;AAGE,qBAAe,CAHjB;AAIE,qBAAe,GAJjB;AAKE,wBAAkBC;AALpB,KAMMF,IANN;AAOE,IAAA,GAAG,EAAEF;AAPP,mBASE,gCAAC,KAAD;AAAO,IAAA,MAAM,EAAEV;AAAf,kBACE,gCAAC,MAAD;AAAQ,IAAA,OAAO,EAAEa,YAAjB;AAA+B,IAAA,MAAM,EAAEb;AAAvC,IADF,CATF,EAYGW,IAAI,iBAAI,gCAAC,IAAD;AAAM,IAAA,EAAE,EAAEG;AAAV,KAAmBH,IAAnB,CAZX,CADF;AAgBD,CA7Bc,CAAjB;AAgCAF,QAAQ,CAACU,WAAT,GAAuB,UAAvB;eAEeV,Q","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/cjs/Select/index.js

@@ -206,7 +206,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
   }, [forwardedValue, options]);
   var listBoxId = (0, _react.useMemo)(function () {
-    return "listbox-".concat(Math.random().toString(36).substr(2, 9));
+    return "listbox-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SelectContainer, _extends({
     opened: opened,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Select/index.tsx"],"names":["paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","inputPaddingHorizontal","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","InputContainer","SelectMenu","Menu","m","min","xs","width","NotFound","styled","div","menuItemHeight","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","ref","options","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","size","placement","rest","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":["paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","inputPaddingHorizontal","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","InputContainer","SelectMenu","Menu","m","min","xs","width","NotFound","styled","div","menuItemHeight","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","ref","options","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","size","placement","rest","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":"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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).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/esm/Button/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAUA,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC/D,CAHA;AAKA,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC9D,CAHA;AAKA,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAsB;AAC5D;AACA;AACA,CAPA;AASA,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAD,CAAU;AACpC;AACA,CAFA;AAIA,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAHA;AAQA,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAD6B,EAE7BE,gBAAgB,CAAC,QAAD,CAFa,CAGN;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASC,IAAV,CAAgB;AACrC,sBAAuBX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASE,EAAV,CAAc;AAC9C,eAAeJ,aAAc,IAAIR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,eAAgB;AAC/D,CAlBA,C,CAoBA;;AACA,MAAMC,aAA2C,GAAG,CAAC;AACnDC,EAAAA,IADmD;AAEnDC,EAAAA,KAFmD;AAGnDC,EAAAA,OAAO,GAAG,KAHyC;AAInDC,EAAAA,aAJmD;AAKnDC,EAAAA;AALmD,CAAD,kBAOlD,0CACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,oBAAC,gBAAD;AAAkB,EAAA,MAAM,EAAEC;AAA1B,gBACE,oBAAC,WAAD,OADF,CALJ,CAPF;;AAmBA,eAAeJ,aAAf","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}
+{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAWA,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC/D,CAHA;AAKA,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC9D,CAHA;AAKA,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAsB;AAC5D;AACA;AACA,CAPA;AASA,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAD,CAAU;AACpC;AACA,CAFA;AAIA,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAHA;AAQA,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAD6B,EAE7BE,gBAAgB,CAAC,QAAD,CAFa,CAGN;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASC,IAAV,CAAgB;AACrC,sBAAuBX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASE,EAAV,CAAc;AAC9C,eAAeJ,aAAc,IAAIR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,eAAgB;AAC/D,CAlBA,C,CAoBA;;AACA,MAAMC,aAA2C,GAAG,CAAC;AACnDC,EAAAA,IADmD;AAEnDC,EAAAA,KAFmD;AAGnDC,EAAAA,OAAO,GAAG,KAHyC;AAInDC,EAAAA,aAJmD;AAKnDC,EAAAA;AALmD,CAAD,kBAOlD,0CACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,oBAAC,gBAAD;AAAkB,EAAA,MAAM,EAAEC;AAA1B,gBACE,oBAAC,WAAD,OADF,CALJ,CAPF;;AAmBA,eAAeJ,aAAf","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}

package/dist/esm/FormItem/index.js

@@ -55,7 +55,7 @@ const FormItem = /*#__PURE__*/forwardRef(({
   const {
     optionalText
   } = useContext(FormConfigContext);
-  const containerId = useMemo(() => id || Math.random().toString(36).substr(2, 9), [id]);
+  const containerId = useMemo(() => id || Math.random().toString(36).slice(2, 11), [id]);
   const fieldId = useMemo(() => `field-${containerId}`, [containerId]);
   const helpId = useMemo(() => `help-${containerId}`, [containerId]);
   const renderChildren = useCallback(() => {

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Layout/index.tsx"],"names":["React","useMemo","LayoutContext","Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;;AAeA;AACA;AACA;AACA,MAAMC,MAA6B,GAAG,CAAC;AACrCC,EAAAA,aAAa,GAAG,KADqB;AAErCC,EAAAA,aAAa,GAAG,KAFqB;AAGrCC,EAAAA;AAHqC,CAAD,KAIhC;AACJ,QAAMC,YAAY,GAAGN,OAAO,CAC1B,OAAO;AAAEG,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAAP,CAD0B,EAE1B,CAACD,aAAD,EAAgBC,aAAhB,CAF0B,CAA5B;AAKA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAEE;AAA/B,KACGD,QADH,CADF;AAKD,CAfD;;AAiBAH,MAAM,CAACK,WAAP,GAAqB,QAArB;AAEA,eAAeL,MAAf","sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n  /**\n   * Whether there is the navigation in the layout.\n   * @default false\n   */\n  hasNavigation?: boolean;\n  /**\n   * Whether there is the page header in the layout.\n   * @default false\n   */\n  hasPageHeader?: boolean;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n  hasNavigation = false,\n  hasPageHeader = false,\n  children,\n}) => {\n  const contextValue = useMemo(\n    () => ({ hasNavigation, hasPageHeader }),\n    [hasNavigation, hasPageHeader]\n  );\n\n  return (\n    <LayoutContext.Provider value={contextValue}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Layout/index.tsx"],"names":["React","useMemo","LayoutContext","Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;;AAoBA;AACA;AACA;AACA,MAAMC,MAA6B,GAAG,CAAC;AACrCC,EAAAA,aAAa,GAAG,KADqB;AAErCC,EAAAA,aAAa,GAAG,KAFqB;AAGrCC,EAAAA;AAHqC,CAAD,KAIhC;AACJ,QAAMC,YAAY,GAAGN,OAAO,CAC1B,OAAO;AAAEG,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAAP,CAD0B,EAE1B,CAACD,aAAD,EAAgBC,aAAhB,CAF0B,CAA5B;AAKA,sBACE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAEE;AAA/B,KACGD,QADH,CADF;AAKD,CAfD;;AAiBAH,MAAM,CAACK,WAAP,GAAqB,QAArB;AAEA,eAAeL,MAAf","sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n  /**\n   * Whether there is the navigation in the layout.\n   * @default false\n   */\n  hasNavigation?: boolean;\n  /**\n   * Whether there is the page header in the layout.\n   * @default false\n   */\n  hasPageHeader?: boolean;\n  /**\n   * The children.\n   * @default undefined\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n  hasNavigation = false,\n  hasPageHeader = false,\n  children,\n}) => {\n  const contextValue = useMemo(\n    () => ({ hasNavigation, hasPageHeader }),\n    [hasNavigation, hasPageHeader]\n  );\n\n  return (\n    <LayoutContext.Provider value={contextValue}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"file":"index.js"}