@os-design/core 1.0.156 → 1.0.157

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","resetFocusStyles","transitionStyles","omitEmotionProps","clr","css","m","currentPageStyles","p","currentPage","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","min","md","navigationItemSideHeight","IconContainer","span","Title","NavigationItem","icon","as","onMouseDown","children","rest","ref","e","preventDefault","undefined","displayName"],"sources":["../../../src/NavigationItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { resetFocusStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface NavigationItemProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'> {\n  /**\n   * The icon of the item.\n   * @default undefined\n   */\n  icon: React.ReactElement;\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n}\n\nconst currentPageStyles = (p) =>\n  p.currentPage &&\n  css`\n    background-color: ${clr(p.theme.navigationItemColorBgActive)};\n    color: ${clr(p.theme.navigationItemColorTextActive)};\n  `;\n\ntype NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;\nconst NavigationLink = styled(\n  'a',\n  omitEmotionProps('currentPage', 'as')\n)<NavigationLinkProps>`\n  ${resetFocusStyles};\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.navigationItemColorText)};\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};\n    }\n  }\n\n  // Tab navigator\n  width: ${(p) => p.theme.navigationItemTabWidth}em;\n  min-width: ${(p) => p.theme.navigationItemTabWidth}em;\n  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ${(p) => p.theme.navigationItemSideHeight}em;\n    min-height: ${(p) => p.theme.navigationItemSideHeight}em;\n  }\n\n  ${currentPageStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst IconContainer = styled.span`\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ${m.min.md} {\n    font-size: 1.8em;\n  }\n`;\n\nconst Title = styled.span`\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ${m.min.md} {\n    margin-top: 0.3em;\n  }\n`;\n\n/**\n * The item of the navigation.\n */\nconst NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(\n  (\n    {\n      icon,\n      currentPage = false,\n      as,\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <div role='listitem'>\n      <NavigationLink\n        currentPage={currentPage}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-current={currentPage ? 'page' : undefined}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer>{icon}</IconContainer>\n        {children && <Title>{children}</Title>}\n      </NavigationLink>\n    </div>\n  )\n);\n\nNavigationItem.displayName = 'NavigationItem';\n\nexport default NavigationItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","resetFocusStyles","transitionStyles","omitEmotionProps","clr","css","m","currentPageStyles","p","currentPage","theme","navigationItemColorBgActive","navigationItemColorTextActive","NavigationLink","borderRadius","navigationItemColorText","navigationItemColorBgHover","navigationItemTabWidth","navigationTabHeight","min","md","navigationItemSideHeight","IconContainer","span","Title","NavigationItem","icon","as","onMouseDown","children","rest","ref","e","preventDefault","undefined","displayName"],"sources":["../../../src/NavigationItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { resetFocusStyles, transitionStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface NavigationItemProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'> {\n  /**\n   * The icon of the item.\n   * @default undefined\n   */\n  icon: React.ReactElement;\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n}\n\nconst currentPageStyles = (p) =>\n  p.currentPage &&\n  css`\n    background-color: ${clr(p.theme.navigationItemColorBgActive)};\n    color: ${clr(p.theme.navigationItemColorTextActive)};\n  `;\n\ntype NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;\nconst NavigationLink = styled(\n  'a',\n  omitEmotionProps('currentPage', 'as')\n)<NavigationLinkProps>`\n  ${resetFocusStyles};\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.navigationItemColorText)};\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};\n    }\n  }\n\n  // Tab navigator\n  width: ${(p) => p.theme.navigationItemTabWidth}em;\n  min-width: ${(p) => p.theme.navigationItemTabWidth}em;\n  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    min-width: unset;\n\n    width: 100%;\n    height: ${(p) => p.theme.navigationItemSideHeight}em;\n    min-height: ${(p) => p.theme.navigationItemSideHeight}em;\n  }\n\n  ${currentPageStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst IconContainer = styled.span`\n  display: inherit;\n\n  // Tab navigator\n  font-size: 1.6em;\n\n  // Side navigator\n  ${m.min.md} {\n    font-size: 1.8em;\n  }\n`;\n\nconst Title = styled.span`\n  font-size: 0.75em;\n  font-weight: 500;\n  white-space: nowrap;\n\n  // Side navigator\n  ${m.min.md} {\n    margin-top: 0.3em;\n  }\n`;\n\n/**\n * The item of the navigation.\n */\nconst NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(\n  (\n    {\n      icon,\n      currentPage = false,\n      as,\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <div role='listitem'>\n      <NavigationLink\n        currentPage={currentPage}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-current={currentPage ? 'page' : undefined}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer>{icon}</IconContainer>\n        {children && <Title>{children}</Title>}\n      </NavigationLink>\n    </div>\n  )\n);\n\nNavigationItem.displayName = 'NavigationItem';\n\nexport default NavigationItem;\n"],"mappings":"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"}

package/dist/esm/PageContent/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef, useContext } from 'react';
 import { horizontalPaddingStyles } from '@os-design/styles';
@@ -7,7 +6,6 @@ import { omitEmotionProps } from '@os-design/utils';
 import { css } from '@emotion/react';
 import { m } from '@os-design/media';
 import LayoutContext from '../Layout/LayoutContext';
-
 const hasNavigationStyles = p => p.hasNavigation && css`
     ${!p.hasList && css`
       margin-bottom: calc(
@@ -19,34 +17,30 @@ const hasNavigationStyles = p => p.hasNavigation && css`
       margin-left: ${p.theme.navigationSideWidth}em;
     }
   `;
-
 const hasPageHeaderStyles = p => p.hasPageHeader && !p.hasList && css`
     margin-top: ${p.theme.pageHeaderHeight[0]}em;
     ${m.min.md} {
       margin-top: ${p.theme.pageHeaderHeight[1]}em;
     }
   `;
-
 const notHasListStyles = p => !p.hasList && css`
     padding-top: ${p.theme.pageContentPaddingVertical}em;
     padding-bottom: ${p.theme.pageContentPaddingVertical}em;
     ${horizontalPaddingStyles()(p)};
   `;
-
 const notHasNavigationStyles = p => !p.hasNavigation && !p.hasList && css`
     margin-bottom: env(safe-area-inset-bottom);
   `;
-
 const Container = styled('main', omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList'))`
   ${hasNavigationStyles};
   ${hasPageHeaderStyles};
   ${notHasListStyles};
   ${notHasNavigationStyles};
 `;
+
 /**
  * The wrapper that adds padding to the page content.
  */
-
 const PageContent = /*#__PURE__*/forwardRef(({
   hasList = false,
   children,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","useContext","horizontalPaddingStyles","omitEmotionProps","css","m","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,QAA8C,OAA9C;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,OAAOC,aAAP,MAA0B,yBAA1B;;AAWA,MAAMC,mBAAmB,GAAIC,CAAD,IAC1BA,CAAC,CAACC,aAAF,IACAL,GAAI;AACN,MAAM,CAACI,CAAC,CAACE,OAAH,IACFN,GAAI;AACR;AACA,UAAUI,CAAC,CAACG,KAAF,CAAQC,mBAAoB;AACtC;AACA,KAAM;AACN,MAAMP,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf;AACA,qBAAqBN,CAAC,CAACG,KAAF,CAAQI,mBAAoB;AACjD;AACA,GAbA;;AAeA,MAAMC,mBAAmB,GAAIR,CAAD,IAC1BA,CAAC,CAACS,aAAF,IACA,CAACT,CAAC,CAACE,OADH,IAEAN,GAAI;AACN,kBAAkBI,CAAC,CAACG,KAAF,CAAQO,gBAAR,CAAyB,CAAzB,CAA4B;AAC9C,MAAMb,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAF,CAAQO,gBAAR,CAAyB,CAAzB,CAA4B;AAChD;AACA,GARA;;AAUA,MAAMC,gBAAgB,GAAIX,CAAD,IACvB,CAACA,CAAC,CAACE,OAAH,IACAN,GAAI;AACN,mBAAmBI,CAAC,CAACG,KAAF,CAAQS,0BAA2B;AACtD,sBAAsBZ,CAAC,CAACG,KAAF,CAAQS,0BAA2B;AACzD,MAAMlB,uBAAuB,GAAGM,CAAH,CAAM;AACnC,GANA;;AAQA,MAAMa,sBAAsB,GAAIb,CAAD,IAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACE,OADH,IAEAN,GAAI;AACN;AACA,GALA;;AAYA,MAAMkB,SAAS,GAAGxB,MAAM,CACtB,MADsB,EAEtBK,gBAAgB,CAAC,eAAD,EAAkB,eAAlB,EAAmC,SAAnC,CAFM,CAGN;AAClB,IAAII,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAIG,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CARA;AAUA;AACA;AACA;;AACA,MAAME,WAAW,gBAAGvB,UAAU,CAC5B,CAAC;EAAEU,OAAO,GAAG,KAAZ;EAAmBc,QAAnB;EAA6B,GAAGC;AAAhC,CAAD,EAAyCC,GAAzC,KAAiD;EAC/C,MAAM;IAAEjB,aAAF;IAAiBQ;EAAjB,IAAmChB,UAAU,CAACK,aAAD,CAAnD;EAEA,oBACE,oBAAC,SAAD;IACE,aAAa,EAAEG,aADjB;IAEE,aAAa,EAAEQ,aAFjB;IAGE,OAAO,EAAEP;EAHX,GAIMe,IAJN;IAKE,GAAG,EAAEC;EALP,IAOGF,QAPH,CADF;AAWD,CAf2B,CAA9B;AAkBAD,WAAW,CAACI,WAAZ,GAA0B,aAA1B;AAEA,eAAeJ,WAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","useContext","horizontalPaddingStyles","omitEmotionProps","css","m","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,OAAOC,aAAa,MAAM,yBAAyB;AAWnD,MAAMC,mBAAmB,GAAIC,CAAC,IAC5BA,CAAC,CAACC,aAAa,IACfL,GAAI;AACN,MAAM,CAACI,CAAC,CAACE,OAAO,IACZN,GAAI;AACR;AACA,UAAUI,CAAC,CAACG,KAAK,CAACC,mBAAoB;AACtC;AACA,KAAM;AACN,MAAMP,CAAC,CAACQ,GAAG,CAACC,EAAG;AACf;AACA,qBAAqBN,CAAC,CAACG,KAAK,CAACI,mBAAoB;AACjD;AACA,GAAG;AAEH,MAAMC,mBAAmB,GAAIR,CAAC,IAC5BA,CAAC,CAACS,aAAa,IACf,CAACT,CAAC,CAACE,OAAO,IACVN,GAAI;AACN,kBAAkBI,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAE;AAC9C,MAAMb,CAAC,CAACQ,GAAG,CAACC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAE;AAChD;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIX,CAAC,IACzB,CAACA,CAAC,CAACE,OAAO,IACVN,GAAI;AACN,mBAAmBI,CAAC,CAACG,KAAK,CAACS,0BAA2B;AACtD,sBAAsBZ,CAAC,CAACG,KAAK,CAACS,0BAA2B;AACzD,MAAMlB,uBAAuB,EAAE,CAACM,CAAC,CAAE;AACnC,GAAG;AAEH,MAAMa,sBAAsB,GAAIb,CAAC,IAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACE,OAAO,IACVN,GAAI;AACN;AACA,GAAG;AAOH,MAAMkB,SAAS,GAAGxB,MAAM,CACtB,MAAM,EACNK,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,SAAS,CAAC,CAC7C;AAClB,IAAII,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAIG,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CAAC;;AAED;AACA;AACA;AACA,MAAME,WAAW,gBAAGvB,UAAU,CAC5B,CAAC;EAAEU,OAAO,GAAG,KAAK;EAAEc,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC/C,MAAM;IAAEjB,aAAa;IAAEQ;EAAc,CAAC,GAAGhB,UAAU,CAACK,aAAa,CAAC;EAElE,oBACE,oBAAC,SAAS;IACR,aAAa,EAAEG,aAAc;IAC7B,aAAa,EAAEQ,aAAc;IAC7B,OAAO,EAAEP;EAAQ,GACbe,IAAI;IACR,GAAG,EAAEC;EAAI,IAERF,QAAQ,CACC;AAEhB,CAAC,CACF;AAEDD,WAAW,CAACI,WAAW,GAAG,aAAa;AAEvC,eAAeJ,WAAW"}

package/dist/esm/PageHeader/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useContext } from 'react';
 import { ellipsisStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
@@ -11,14 +10,12 @@ import { css } from '@emotion/react';
 import Button from '../Button';
 import LayoutContext from '../Layout/LayoutContext';
 import defaultLocale from './utils/defaultLocale';
-
 const getReducedPadding = (p, isMinSm) => {
   const i = isMinSm ? 1 : 0;
   let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;
   if (padding < 0) padding = 0;
   return padding;
 };
-
 const horizontalPaddingStyles = p => {
   const reducedPadding = getReducedPadding(p, false);
   const reducedPaddingSm = getReducedPadding(p, true);
@@ -32,13 +29,11 @@ const horizontalPaddingStyles = p => {
     }
   `;
 };
-
 const hasNavigationIndentStyles = p => p.hasNavigationIndent && css`
     ${m.min.md} {
       left: ${p.theme.navigationSideWidth}em;
     }
   `;
-
 export const PageHeaderContainer = styled('div', omitEmotionProps('leftIsGhostButton', 'rightIsGhostButton', 'hasNavigationIndent'))`
   position: fixed;
   top: 0;
@@ -69,11 +64,9 @@ const BackButton = styled(Button)`
 const Content = styled.div`
   overflow: hidden; // For ellipsis
 `;
-
 const notHasSubtitleStyles = p => !p.hasSubtitle && css`
     font-size: ${p.theme.sizes.large}em;
   `;
-
 const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
   margin: 0;
   font-size: 1em;
@@ -104,10 +97,10 @@ const RightAddon = styled(Addon)`
   grid-auto-flow: column;
   grid-column-gap: 0.4em;
 `;
+
 /**
  * The header of the page.
  */
-
 const PageHeader = /*#__PURE__*/forwardRef(({
   title,
   subtitle,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","ellipsisStyles","omitEmotionProps","styled","clr","ThemeOverrider","m","Left","css","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"sources":["../../../src/PageHeader/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,QAA8C,OAA9C;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAA0B,yBAA1B;AACA,OAAOC,aAAP,MAAgD,uBAAhD;;AA8CA,MAAMC,iBAAiB,GAAG,CAACC,CAAD,EAAIC,OAAJ,KAAyB;EACjD,MAAMC,CAAC,GAAGD,OAAO,GAAG,CAAH,GAAO,CAAxB;EACA,IAAIE,OAAO,GAAGH,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0BH,CAA1B,IAA+BF,CAAC,CAACI,KAAF,CAAQE,uBAArD;EACA,IAAIH,OAAO,GAAG,CAAd,EAAiBA,OAAO,GAAG,CAAV;EACjB,OAAOA,OAAP;AACD,CALD;;AAOA,MAAMI,uBAAuB,GAAIP,CAAD,IAAO;EACrC,MAAMQ,cAAc,GAAGT,iBAAiB,CAACC,CAAD,EAAI,KAAJ,CAAxC;EACA,MAAMS,gBAAgB,GAAGV,iBAAiB,CAACC,CAAD,EAAI,IAAJ,CAA1C;EACA,OAAOL,GAAI;AACb,oBAAoBK,CAAC,CAACU,iBAAF,GACZF,cADY,GAEZR,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACrC,qBAAqBL,CAAC,CAACW,kBAAF,GACbH,cADa,GAEbR,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACrC;AACA,MAAMZ,CAAC,CAACmB,GAAF,CAAMC,EAAG;AACf,sBAAsBb,CAAC,CAACU,iBAAF,GACZD,gBADY,GAEZT,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACvC,uBAAuBL,CAAC,CAACW,kBAAF,GACbF,gBADa,GAEbT,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACvC;AACA,GAhBE;AAiBD,CApBD;;AAsBA,MAAMS,yBAAyB,GAAId,CAAD,IAChCA,CAAC,CAACe,mBAAF,IACApB,GAAI;AACN,MAAMF,CAAC,CAACmB,GAAF,CAAMI,EAAG;AACf,cAAchB,CAAC,CAACI,KAAF,CAAQa,mBAAoB;AAC1C;AACA,GANA;;AAaA,OAAO,MAAMC,mBAAmB,GAAG5B,MAAM,CACvC,KADuC,EAEvCD,gBAAgB,CACd,mBADc,EAEd,oBAFc,EAGd,qBAHc,CAFuB,CAOvB;AAClB;AACA;AACA;AACA;AACA;AACA,YAAaW,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQe,gBAAR,CAAyB,CAAzB,CAA4B;AAC/C,IAAI1B,CAAC,CAACmB,GAAF,CAAMI,EAAG;AACb,cAAehB,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQe,gBAAR,CAAyB,CAAzB,CAA4B;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBnB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQgB,iBAAT,CAA4B;AAC5D,WAAYpB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQiB,mBAAT,CAA8B;AACnD,6BAA8BrB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQkB,qBAAT,CAAgC;AACvE;AACA,IAAIf,uBAAwB;AAC5B,IAAIO,yBAA0B;AAC9B,CA7BO;AA+BP,MAAMS,UAAU,GAAGjC,MAAM,CAACM,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAM4B,OAAO,GAAGlC,MAAM,CAACmC,GAAI;AAC3B;AACA,CAFA;;AAIA,MAAMC,oBAAoB,GAAI1B,CAAD,IAC3B,CAACA,CAAC,CAAC2B,WAAH,IACAhC,GAAI;AACN,iBAAiBK,CAAC,CAACI,KAAF,CAAQwB,KAAR,CAAcC,KAAM;AACrC,GAJA;;AASA,MAAMC,KAAK,GAAGxC,MAAM,CAAC,IAAD,EAAOD,gBAAgB,CAAC,aAAD,CAAvB,CAAoD;AACxE;AACA;AACA;AACA;AACA,IAAIqC,oBAAqB;AACzB,IAAItC,cAAe;AACnB,CAPA;AASA,MAAM2C,QAAQ,GAAGzC,MAAM,CAACmC,GAAI;AAC5B,eAAgBzB,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQwB,KAAR,CAAcI,KAAM;AAC1C,WAAYhC,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQ6B,2BAAT,CAAsC;AAC3D;AACA;AACA,IAAI7C,cAAe;AACnB,CANA;AAQA,MAAM8C,KAAK,GAAG5C,MAAM,CAACmC,GAAI;AACzB;AACA;AACA,CAHA;AAKA,MAAMU,SAAS,GAAG7C,MAAM,CAAC4C,KAAD,CAAQ;AAChC,mBAAoBlC,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQgC,gCAAiC;AACnE,CAFA;AAIA,MAAMC,UAAU,GAAG/C,MAAM,CAAC4C,KAAD,CAAQ;AACjC,kBAAmBlC,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQgC,gCAAiC;AAClE;AACA;AACA;AACA;AACA;AACA,CAPA;AASA;AACA;AACA;;AACA,MAAME,UAAU,gBAAGpD,UAAU,CAC3B,CACE;EACEqD,KADF;EAEEC,QAFF;EAGEC,IAHF;EAIE/B,iBAAiB,GAAG,KAJtB;EAKEgC,KALF;EAME/B,kBAAkB,GAAG,KANvB;EAOEgC,MAPF;EAQEC,MAAM,GAAG9C,aARX;EASE,GAAG+C;AATL,CADF,EAYEC,GAZF,KAaK;EACH,MAAM;IAAEC;EAAF,IAAoB5D,UAAU,CAACU,aAAD,CAApC;EAEA,oBACE,oBAAC,cAAD;IACE,SAAS,EAAGmD,CAAD,KAAQ;MACjB1C,uBAAuB,EAAE0C,CAAC,CAACC;IADV,CAAR;EADb,gBAKE,oBAAC,mBAAD;IACE,iBAAiB,EAAEvC,iBAAiB,IAAI,CAAC,CAACiC,MAD5C;IAEE,kBAAkB,EAAEhC,kBAFtB;IAGE,mBAAmB,EAAEoC;EAHvB,GAIMF,IAJN;IAKE,GAAG,EAAEC;EALP,IAOGH,MAAM,iBACL,oBAAC,UAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAEA,MAHX;IAIE,cAAYC,MAAM,CAACM;EAJrB,gBAME,oBAAC,IAAD,OANF,CARJ,EAkBGT,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CAlBX,eAoBE,oBAAC,OAAD,qBACE,oBAAC,KAAD;IAAO,WAAW,EAAE,CAAC,CAACD;EAAtB,GAAiCD,KAAjC,CADF,EAEGC,QAAQ,iBAAI,oBAAC,QAAD,QAAWA,QAAX,CAFf,CApBF,EAyBGE,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAzBZ,CALF,CADF;AAmCD,CApD0B,CAA7B;AAuDAJ,UAAU,CAACa,WAAX,GAAyB,YAAzB;AAEA,eAAeb,UAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useContext","ellipsisStyles","omitEmotionProps","styled","clr","ThemeOverrider","m","Left","css","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"sources":["../../../src/PageHeader/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":"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"}

package/dist/esm/PageHeader/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","backLabel"],"sources":["../../../../src/PageHeader/utils/defaultLocale.ts"],"sourcesContent":["export interface PageHeaderLocale {\n  backLabel: string;\n}\n\nconst defaultLocale: PageHeaderLocale = {\n  backLabel: 'Back',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAIA,MAAMA,aAA+B,GAAG;EACtCC,SAAS,EAAE;AAD2B,CAAxC;AAIA,eAAeD,aAAf"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","backLabel"],"sources":["../../../../src/PageHeader/utils/defaultLocale.ts"],"sourcesContent":["export interface PageHeaderLocale {\n  backLabel: string;\n}\n\nconst defaultLocale: PageHeaderLocale = {\n  backLabel: 'Back',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAIA,MAAMA,aAA+B,GAAG;EACtCC,SAAS,EAAE;AACb,CAAC;AAED,eAAeD,aAAa"}

package/dist/esm/PageHeaderInputSearch/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useContext, useState } from 'react';
 import { Close, Search } from '@os-design/icons';
 import styled from '@emotion/styled';
@@ -19,15 +18,12 @@ const fadeOut = keyframes`
   from { transform: translateY(0); }
   to { transform: translateY(-100%); }
 `;
-
 const visibleStyles = p => p.visible && css`
     animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const invisibleStyles = p => !p.visible && css`
     animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const Container = styled(PageHeaderContainer, omitEmotionProps('visible'))`
   z-index: 102; // After PageHeaderContainer
   ${visibleStyles};
@@ -36,10 +32,10 @@ const Container = styled(PageHeaderContainer, omitEmotionProps('visible'))`
 const CloseButton = styled(Button)`
   margin-left: ${p => p.theme.pageHeaderAddonPaddingHorizontal}em;
 `;
+
 /**
  * The search input for the page header.
  */
-
 const PageHeaderInputSearch = /*#__PURE__*/forwardRef(({
   locale = defaultLocale,
   onClose = () => {},

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useState","Close","Search","styled","useClosable","omitEmotionProps","ThemeOverrider","useTheme","css","keyframes","InputSearch","Button","PageHeaderContainer","LayoutContext","defaultLocale","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","CloseButton","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","locale","onClose","rest","ref","setVisible","mounted","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useState } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Button from '../Button';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, {\n  PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n  extends Omit<InputSearchProps, 'size' | 'locale'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderInputSearchLocale;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\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 {\n  visible: boolean;\n}\nconst Container = styled(\n  PageHeaderContainer,\n  omitEmotionProps('visible')\n)<ContainerProps>`\n  z-index: 102; // After PageHeaderContainer\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n  HTMLInputElement,\n  PageHeaderInputSearchProps\n>(({ locale = defaultLocale, onClose = () => {}, ...rest }, ref) => {\n  const [visible, setVisible] = useState(false);\n  const { theme } = useTheme();\n  const mounted = useClosable(visible, theme.transitionDelay);\n  const { hasNavigation } = useContext(LayoutContext);\n\n  return (\n    <>\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={() => setVisible(true)}\n        aria-label={locale.searchLabel}\n      >\n        <Search />\n      </Button>\n\n      {mounted && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n          })}\n        >\n          <Container\n            visible={visible}\n            rightIsGhostButton\n            hasNavigationIndent={hasNavigation}\n          >\n            <InputSearch autoFocus locale={locale} {...rest} ref={ref} />\n            <CloseButton\n              type='ghost'\n              wide='never'\n              onClick={() => {\n                setVisible(false);\n                onClose();\n              }}\n              aria-label={locale.closeLabel}\n            >\n              <Close />\n            </CloseButton>\n          </Container>\n        </ThemeOverrider>\n      )}\n    </>\n  );\n});\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useState","Close","Search","styled","useClosable","omitEmotionProps","ThemeOverrider","useTheme","css","keyframes","InputSearch","Button","PageHeaderContainer","LayoutContext","defaultLocale","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","CloseButton","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","locale","onClose","rest","ref","setVisible","mounted","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useState } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Button from '../Button';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, {\n  PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n  extends Omit<InputSearchProps, 'size' | 'locale'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderInputSearchLocale;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\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 {\n  visible: boolean;\n}\nconst Container = styled(\n  PageHeaderContainer,\n  omitEmotionProps('visible')\n)<ContainerProps>`\n  z-index: 102; // After PageHeaderContainer\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n  HTMLInputElement,\n  PageHeaderInputSearchProps\n>(({ locale = defaultLocale, onClose = () => {}, ...rest }, ref) => {\n  const [visible, setVisible] = useState(false);\n  const { theme } = useTheme();\n  const mounted = useClosable(visible, theme.transitionDelay);\n  const { hasNavigation } = useContext(LayoutContext);\n\n  return (\n    <>\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={() => setVisible(true)}\n        aria-label={locale.searchLabel}\n      >\n        <Search />\n      </Button>\n\n      {mounted && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n          })}\n        >\n          <Container\n            visible={visible}\n            rightIsGhostButton\n            hasNavigationIndent={hasNavigation}\n          >\n            <InputSearch autoFocus locale={locale} {...rest} ref={ref} />\n            <CloseButton\n              type='ghost'\n              wide='never'\n              onClick={() => {\n                setVisible(false);\n                onClose();\n              }}\n              aria-label={locale.closeLabel}\n            >\n              <Close />\n            </CloseButton>\n          </Container>\n        </ThemeOverrider>\n      )}\n    </>\n  );\n});\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":"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"}

package/dist/esm/PageHeaderInputSearch/utils/defaultLocale.js

@@ -1,5 +1,6 @@
 import inputSearchDefaultLocale from '../../InputSearch/utils/defaultLocale';
-const defaultLocale = { ...inputSearchDefaultLocale,
+const defaultLocale = {
+  ...inputSearchDefaultLocale,
   searchLabel: 'Search',
   closeLabel: 'Close search'
 };

package/dist/esm/PageHeaderInputSearch/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["inputSearchDefaultLocale","defaultLocale","searchLabel","closeLabel"],"sources":["../../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"sourcesContent":["import inputSearchDefaultLocale, {\n  InputSearchLocale,\n} from '../../InputSearch/utils/defaultLocale';\n\nexport interface PageHeaderInputSearchLocale extends InputSearchLocale {\n  searchLabel: string;\n  closeLabel: string;\n}\n\nconst defaultLocale: PageHeaderInputSearchLocale = {\n  ...inputSearchDefaultLocale,\n  searchLabel: 'Search',\n  closeLabel: 'Close search',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAAA,OAAOA,wBAAP,MAEO,uCAFP;AASA,MAAMC,aAA0C,GAAG,EACjD,GAAGD,wBAD8C;EAEjDE,WAAW,EAAE,QAFoC;EAGjDC,UAAU,EAAE;AAHqC,CAAnD;AAMA,eAAeF,aAAf"}
+{"version":3,"file":"defaultLocale.js","names":["inputSearchDefaultLocale","defaultLocale","searchLabel","closeLabel"],"sources":["../../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"sourcesContent":["import inputSearchDefaultLocale, {\n  InputSearchLocale,\n} from '../../InputSearch/utils/defaultLocale';\n\nexport interface PageHeaderInputSearchLocale extends InputSearchLocale {\n  searchLabel: string;\n  closeLabel: string;\n}\n\nconst defaultLocale: PageHeaderInputSearchLocale = {\n  ...inputSearchDefaultLocale,\n  searchLabel: 'Search',\n  closeLabel: 'Close search',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAAA,OAAOA,wBAAwB,MAExB,uCAAuC;AAO9C,MAAMC,aAA0C,GAAG;EACjD,GAAGD,wBAAwB;EAC3BE,WAAW,EAAE,QAAQ;EACrBC,UAAU,EAAE;AACd,CAAC;AAED,eAAeF,aAAa"}

package/dist/esm/PageHeaderSkeleton/index.js

@@ -1,10 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useContext } from 'react';
 import Skeleton from '../Skeleton';
 import { PageHeaderContainer } from '../PageHeader';
 import LayoutContext from '../Layout/LayoutContext';
-
 /**
  * Provides a page header placeholder while a user waits for
  * the content to load.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","Skeleton","PageHeaderContainer","LayoutContext","PageHeaderSkeleton","width","rest","ref","hasNavigation","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport type PageHeaderSkeletonProps = SkeletonProps & WithSize;\n\n/**\n * Provides a page header placeholder while a user waits for\n * the content to load.\n */\nconst PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(\n  ({ width = '30%', ...rest }, ref) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <PageHeaderContainer\n        hasNavigationIndent={hasNavigation}\n        {...rest}\n        ref={ref}\n      >\n        <Skeleton width={width} />\n      </PageHeaderContainer>\n    );\n  }\n);\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nexport default PageHeaderSkeleton;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,QAA8C,OAA9C;AAEA,OAAOC,QAAP,MAAwC,aAAxC;AACA,SAASC,mBAAT,QAAoC,eAApC;AACA,OAAOC,aAAP,MAA0B,yBAA1B;;AAIA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGL,UAAU,CACnC,CAAC;EAAEM,KAAK,GAAG,KAAV;EAAiB,GAAGC;AAApB,CAAD,EAA6BC,GAA7B,KAAqC;EACnC,MAAM;IAAEC;EAAF,IAAoBR,UAAU,CAACG,aAAD,CAApC;EAEA,oBACE,oBAAC,mBAAD;IACE,mBAAmB,EAAEK;EADvB,GAEMF,IAFN;IAGE,GAAG,EAAEC;EAHP,iBAKE,oBAAC,QAAD;IAAU,KAAK,EAAEF;EAAjB,EALF,CADF;AASD,CAbkC,CAArC;AAgBAD,kBAAkB,CAACK,WAAnB,GAAiC,oBAAjC;AAEA,eAAeL,kBAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useContext","Skeleton","PageHeaderContainer","LayoutContext","PageHeaderSkeleton","width","rest","ref","hasNavigation","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport type PageHeaderSkeletonProps = SkeletonProps & WithSize;\n\n/**\n * Provides a page header placeholder while a user waits for\n * the content to load.\n */\nconst PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(\n  ({ width = '30%', ...rest }, ref) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <PageHeaderContainer\n        hasNavigationIndent={hasNavigation}\n        {...rest}\n        ref={ref}\n      >\n        <Skeleton width={width} />\n      </PageHeaderContainer>\n    );\n  }\n);\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nexport default PageHeaderSkeleton;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AAErD,OAAOC,QAAQ,MAAyB,aAAa;AACrD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,OAAOC,aAAa,MAAM,yBAAyB;AAInD;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGL,UAAU,CACnC,CAAC;EAAEM,KAAK,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACnC,MAAM;IAAEC;EAAc,CAAC,GAAGR,UAAU,CAACG,aAAa,CAAC;EAEnD,oBACE,oBAAC,mBAAmB;IAClB,mBAAmB,EAAEK;EAAc,GAC/BF,IAAI;IACR,GAAG,EAAEC;EAAI,iBAET,oBAAC,QAAQ;IAAC,KAAK,EAAEF;EAAM,EAAG,CACN;AAE1B,CAAC,CACF;AAEDD,kBAAkB,CAACK,WAAW,GAAG,oBAAoB;AAErD,eAAeL,kBAAkB"}

package/dist/esm/ParagraphSkeleton/index.js

@@ -1,15 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef } from 'react';
 import { omitEmotionProps } from '@os-design/utils';
 import { css } from '@emotion/react';
 import Skeleton from '../Skeleton';
-
 const hasMarginStyles = p => p.hasMargin && css`
     margin-bottom: ${p.theme.paragraphMarginBottom + (p.theme.lineHeight - 1)}em;
   `;
-
 const Container = styled('div', omitEmotionProps('hasMargin'))`
   & > *:not(:last-of-type) {
     margin-bottom: ${p => p.theme.lineHeight - 1}em;
@@ -17,10 +14,10 @@ const Container = styled('div', omitEmotionProps('hasMargin'))`
   ${hasMarginStyles};
 `;
 let key = 0;
+
 /**
  * Provides a paragraph placeholder while a user waits for the content to load.
  */
-
 const ParagraphSkeleton = /*#__PURE__*/forwardRef(({
   rows = 4,
   width = '70%',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","omitEmotionProps","css","Skeleton","hasMarginStyles","p","hasMargin","theme","paragraphMarginBottom","lineHeight","Container","key","ParagraphSkeleton","rows","width","rest","ref","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface ParagraphSkeletonProps extends SkeletonProps {\n  /**\n   * The number of rows.\n   * @default 4\n   */\n  rows?: number;\n  /**\n   * The width of the last row.\n   * @default 70%\n   */\n  width?: string;\n  /**\n   * Whether the paragraph has a bottom margin.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin-bottom: ${p.theme.paragraphMarginBottom +\n    (p.theme.lineHeight - 1)}em;\n  `;\n\ntype ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;\nconst Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`\n  & > *:not(:last-of-type) {\n    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;\n  }\n  ${hasMarginStyles};\n`;\n\nlet key = 0;\n\n/**\n * Provides a paragraph placeholder while a user waits for the content to load.\n */\nconst ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(\n  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (\n    <Container hasMargin={hasMargin} {...rest} ref={ref}>\n      {Array(rows)\n        .fill({})\n        .map((_, index) => {\n          key += 1;\n          return (\n            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />\n          );\n        })}\n    </Container>\n  )\n);\n\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\n\nexport default ParagraphSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,QAAP,MAAwC,aAAxC;;AAoBA,MAAMC,eAAe,GAAIC,CAAD,IACtBA,CAAC,CAACC,SAAF,IACAJ,GAAI;AACN,qBAAqBG,CAAC,CAACE,KAAF,CAAQC,qBAAR,IAChBH,CAAC,CAACE,KAAF,CAAQE,UAAR,GAAqB,CADL,CACQ;AAC7B,GALA;;AAQA,MAAMC,SAAS,GAAGZ,MAAM,CAAC,KAAD,EAAQG,gBAAgB,CAAC,WAAD,CAAxB,CAAuD;AAC/E;AACA,qBAAsBI,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQE,UAAR,GAAqB,CAAE;AACnD;AACA,IAAIL,eAAgB;AACpB,CALA;AAOA,IAAIO,GAAG,GAAG,CAAV;AAEA;AACA;AACA;;AACA,MAAMC,iBAAiB,gBAAGZ,UAAU,CAClC,CAAC;EAAEa,IAAI,GAAG,CAAT;EAAYC,KAAK,GAAG,KAApB;EAA2BR,SAAS,GAAG,KAAvC;EAA8C,GAAGS;AAAjD,CAAD,EAA0DC,GAA1D,kBACE,oBAAC,SAAD;EAAW,SAAS,EAAEV;AAAtB,GAAqCS,IAArC;EAA2C,GAAG,EAAEC;AAAhD,IACGC,KAAK,CAACJ,IAAD,CAAL,CACEK,IADF,CACO,EADP,EAEEC,GAFF,CAEM,CAACC,CAAD,EAAIC,KAAJ,KAAc;EACjBV,GAAG,IAAI,CAAP;EACA,oBACE,oBAAC,QAAD;IAAU,GAAG,EAAEA,GAAf;IAAoB,KAAK,EAAEU,KAAK,GAAGR,IAAI,GAAG,CAAf,GAAmB,MAAnB,GAA4BC;EAAvD,EADF;AAGD,CAPF,CADH,CAFgC,CAApC;AAeAF,iBAAiB,CAACU,WAAlB,GAAgC,mBAAhC;AAEA,eAAeV,iBAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","omitEmotionProps","css","Skeleton","hasMarginStyles","p","hasMargin","theme","paragraphMarginBottom","lineHeight","Container","key","ParagraphSkeleton","rows","width","rest","ref","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface ParagraphSkeletonProps extends SkeletonProps {\n  /**\n   * The number of rows.\n   * @default 4\n   */\n  rows?: number;\n  /**\n   * The width of the last row.\n   * @default 70%\n   */\n  width?: string;\n  /**\n   * Whether the paragraph has a bottom margin.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin-bottom: ${p.theme.paragraphMarginBottom +\n    (p.theme.lineHeight - 1)}em;\n  `;\n\ntype ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;\nconst Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`\n  & > *:not(:last-of-type) {\n    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;\n  }\n  ${hasMarginStyles};\n`;\n\nlet key = 0;\n\n/**\n * Provides a paragraph placeholder while a user waits for the content to load.\n */\nconst ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(\n  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (\n    <Container hasMargin={hasMargin} {...rest} ref={ref}>\n      {Array(rows)\n        .fill({})\n        .map((_, index) => {\n          key += 1;\n          return (\n            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />\n          );\n        })}\n    </Container>\n  )\n);\n\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\n\nexport default ParagraphSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,QAAQ,MAAyB,aAAa;AAoBrD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXJ,GAAI;AACN,qBAAqBG,CAAC,CAACE,KAAK,CAACC,qBAAqB,IAC7CH,CAAC,CAACE,KAAK,CAACE,UAAU,GAAG,CAAC,CAAE;AAC7B,GAAG;AAGH,MAAMC,SAAS,GAAGZ,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,WAAW,CAAC,CAAkB;AAC/E;AACA,qBAAsBI,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,UAAU,GAAG,CAAE;AACnD;AACA,IAAIL,eAAgB;AACpB,CAAC;AAED,IAAIO,GAAG,GAAG,CAAC;;AAEX;AACA;AACA;AACA,MAAMC,iBAAiB,gBAAGZ,UAAU,CAClC,CAAC;EAAEa,IAAI,GAAG,CAAC;EAAEC,KAAK,GAAG,KAAK;EAAER,SAAS,GAAG,KAAK;EAAE,GAAGS;AAAK,CAAC,EAAEC,GAAG,kBAC3D,oBAAC,SAAS;EAAC,SAAS,EAAEV;AAAU,GAAKS,IAAI;EAAE,GAAG,EAAEC;AAAI,IACjDC,KAAK,CAACJ,IAAI,CAAC,CACTK,IAAI,CAAC,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;EACjBV,GAAG,IAAI,CAAC;EACR,oBACE,oBAAC,QAAQ;IAAC,GAAG,EAAEA,GAAI;IAAC,KAAK,EAAEU,KAAK,GAAGR,IAAI,GAAG,CAAC,GAAG,MAAM,GAAGC;EAAM,EAAG;AAEpE,CAAC,CAAC,CAEP,CACF;AAEDF,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AAEnD,eAAeV,iBAAiB"}

package/dist/esm/Popover/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { sizeStyles } from '@os-design/styles';
 import { omitEmotionProps, useClickOutside, useClosable, useEvent, useForwardedRef, useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';
@@ -16,15 +15,12 @@ const fadeOut = keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-
 const visibleStyles = p => p.visible && css`
     animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const invisibleStyles = p => !p.visible && css`
     animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const Container = styled('div', omitEmotionProps('top', 'left', 'visible', 'size'))`
   position: absolute;
   top: ${p => p.top}px;
@@ -47,10 +43,10 @@ const emptyRect = {
   width: 0,
   height: 0
 };
+
 /**
  * The pop-up window located next to the element.
  */
-
 const Popover = /*#__PURE__*/forwardRef(({
   trigger,
   placement = 'top',
@@ -68,8 +64,9 @@ const Popover = /*#__PURE__*/forwardRef(({
   const {
     theme
   } = useTheme();
-  const mounted = useClosable(visible, theme.transitionDelay); // Init the rect of the popover and update it when the popover size changes
+  const mounted = useClosable(visible, theme.transitionDelay);
 
+  // Init the rect of the popover and update it when the popover size changes
   const popoverResizeListener = useCallback(() => {
     if (!popoverRef.current) return;
     setPopoverRect(popoverRef.current.getBoundingClientRect());
@@ -79,9 +76,10 @@ const Popover = /*#__PURE__*/forwardRef(({
     if (node === null) return;
     setPopoverRect(node.getBoundingClientRect());
     mergedPopoverRef(node);
-  }, [mergedPopoverRef]); // Init the rect of the trigger and update it when the window was resized
-  // or scrolled
+  }, [mergedPopoverRef]);
 
+  // Init the rect of the trigger and update it when the window was resized
+  // or scrolled
   const triggerResizeListener = useCallback(() => {
     window.requestAnimationFrame(() => {
       if (!trigger) return;
@@ -103,19 +101,18 @@ const Popover = /*#__PURE__*/forwardRef(({
     if (!trigger || trigger.current !== undefined) return;
     setTriggerRect(trigger);
   }, [trigger]);
-  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).slice(2, 11)}`, [id]); // Set the aria tags to support accessibility features
+  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).slice(2, 11)}`, [id]);
 
+  // Set the aria tags to support accessibility features
   useBrowserLayoutEffect(() => {
     if (!trigger) return;
     const {
       current
     } = trigger;
     if (!current) return;
-
     if (current.getAttribute('aria-haspopup') === null) {
       current.setAttribute('aria-haspopup', 'dialog');
     }
-
     current.setAttribute('aria-controls', popoverId);
   }, []);
   useBrowserLayoutEffect(() => {
@@ -125,8 +122,9 @@ const Popover = /*#__PURE__*/forwardRef(({
     } = trigger;
     if (!current) return;
     current.setAttribute('aria-expanded', visible.toString());
-  }, [visible]); // Get the popover coordinates
+  }, [visible]);
 
+  // Get the popover coordinates
   const {
     top,
     left
@@ -136,8 +134,9 @@ const Popover = /*#__PURE__*/forwardRef(({
     placement,
     gap,
     flip
-  }); // Close the popover when the user clicks outside of it
+  });
 
+  // Close the popover when the user clicks outside of it
   useClickOutside(popoverRef, onClose);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Container, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useState","sizeStyles","omitEmotionProps","useClickOutside","useClosable","useEvent","useForwardedRef","useResizeObserver","useBrowserLayoutEffect","styled","clr","useTheme","css","keyframes","Portal","usePopoverPosition","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","emptyRect","width","height","Popover","trigger","placement","gap","flip","onClose","id","children","rest","ref","popoverRef","mergedPopoverRef","popoverRect","setPopoverRect","triggerRect","setTriggerRect","mounted","popoverResizeListener","current","getBoundingClientRect","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","document","undefined","popoverId","Math","random","toString","slice","getAttribute","setAttribute","elementRect","displayName"],"sources":["../../../src/Popover/index.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useState","sizeStyles","omitEmotionProps","useClickOutside","useClosable","useEvent","useForwardedRef","useResizeObserver","useBrowserLayoutEffect","styled","clr","useTheme","css","keyframes","Portal","usePopoverPosition","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","top","left","borderRadius","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","emptyRect","width","height","Popover","trigger","placement","gap","flip","onClose","id","children","rest","ref","popoverRef","mergedPopoverRef","popoverRect","setPopoverRect","triggerRect","setTriggerRect","mounted","popoverResizeListener","current","getBoundingClientRect","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","document","undefined","popoverId","Math","random","toString","slice","getAttribute","setAttribute","elementRect","displayName"],"sources":["../../../src/Popover/index.tsx"],"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"],"mappings":";AAAA,OAAOA,KAAK,IACVC,UAAU,EAGVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,OAAO;AACd,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SACEC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,EACXC,QAAQ,EACRC,eAAe,EACfC,iBAAiB,EACjBC,sBAAsB,QACjB,kBAAkB;AACzB,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,EAAEC,QAAQ,QAAQ,oBAAoB;AAClD,SAASC,GAAG,EAAEC,SAAS,QAAQ,gBAAgB;AAC/C,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,kBAAkB,MAGlB,4BAA4B;AAoCnC,MAAMC,MAAM,GAAGH,SAAU;AACzB;AACA;AACA,CAAC;AAED,MAAMI,OAAO,GAAGJ,SAAU;AAC1B;AACA;AACA,CAAC;AAED,MAAMK,aAAa,GAAIC,CAAC,IACtBA,CAAC,CAACC,OAAO,IACTR,GAAI;AACN,iBAAiBI,MAAO,IAAGG,CAAC,CAACE,KAAK,CAACC,eAAgB;AACnD,GAAG;AAEH,MAAMC,eAAe,GAAIJ,CAAC,IACxB,CAACA,CAAC,CAACC,OAAO,IACVR,GAAI;AACN,iBAAiBK,OAAQ,IAAGE,CAAC,CAACE,KAAK,CAACC,eAAgB;AACpD,GAAG;AAMH,MAAME,SAAS,GAAGf,MAAM,CACtB,KAAK,EACLP,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAClC;AAClB;AACA,SAAUiB,CAAC,IAAKA,CAAC,CAACM,GAAI;AACtB,UAAWN,CAAC,IAAKA,CAAC,CAACO,IAAK;AACxB;AACA,mBAAoBP,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACM,YAAa;AAC/C,sBAAuBR,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACE,KAAK,CAACO,cAAc,CAAE;AACzD,WAAYT,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACE,KAAK,CAACQ,gBAAgB,CAAE;AAChD,sBAAuBV,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACE,KAAK,CAACS,kBAAkB,CAAE;AAC7D,+BAAgCX,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACE,KAAK,CAACU,qBAAqB,CAAE;AACzE;AACA;AACA,IAAIb,aAAc;AAClB,IAAIK,eAAgB;AACpB,IAAItB,UAAW;AACf,CAAC;AAED,MAAM+B,SAAe,GAAG;EACtBP,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE,CAAC;EACPO,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;;AAED;AACA;AACA;AACA,MAAMC,OAAO,gBAAGvC,UAAU,CACxB,CACE;EACEwC,OAAO;EACPC,SAAS,GAAG,KAAK;EACjBC,GAAG,GAAG,GAAG;EACTC,IAAI,GAAG,IAAI;EACXnB,OAAO,GAAG,KAAK;EACfoB,OAAO,GAAG,MAAM,CAAC,CAAC;EAClBC,EAAE;EACFC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,UAAU,EAAEC,gBAAgB,CAAC,GAAGxC,eAAe,CAACsC,GAAG,CAAC;EAC3D,MAAM,CAACG,WAAW,EAAEC,cAAc,CAAC,GAAGhD,QAAQ,CAACgC,SAAS,CAAC;EACzD,MAAM,CAACiB,WAAW,EAAEC,cAAc,CAAC,GAAGlD,QAAQ,CAACgC,SAAS,CAAC;EACzD,MAAM;IAAEX;EAAM,CAAC,GAAGV,QAAQ,EAAE;EAC5B,MAAMwC,OAAO,GAAG/C,WAAW,CAACgB,OAAO,EAAEC,KAAK,CAACC,eAAe,CAAC;;EAE3D;EACA,MAAM8B,qBAAqB,GAAGvD,WAAW,CAAC,MAAM;IAC9C,IAAI,CAACgD,UAAU,CAACQ,OAAO,EAAE;IACzBL,cAAc,CAACH,UAAU,CAACQ,OAAO,CAACC,qBAAqB,EAAE,CAAC;EAC5D,CAAC,EAAE,CAACT,UAAU,CAAC,CAAC;EAChBtC,iBAAiB,CACfsC,UAAU,CAACQ,OAAO,EAClBD,qBAAqB,CACtB;EAED,MAAMG,kBAAkB,GAAG1D,WAAW,CACnC2D,IAAI,IAAK;IACR,IAAIA,IAAI,KAAK,IAAI,EAAE;IACnBR,cAAc,CAACQ,IAAI,CAACF,qBAAqB,EAAE,CAAC;IAC5CR,gBAAgB,CAACU,IAAI,CAAC;EACxB,CAAC,EACD,CAACV,gBAAgB,CAAC,CACnB;;EAED;EACA;EACA,MAAMW,qBAAqB,GAAG5D,WAAW,CAAC,MAAM;IAC9C6D,MAAM,CAACC,qBAAqB,CAAC,MAAM;MACjC,IAAI,CAACvB,OAAO,EAAE;MACd,MAAM;QAAEiB;MAAQ,CAAC,GAAGjB,OAA6B;MACjD,IAAI,CAACiB,OAAO,EAAE;MACdH,cAAc,CAACG,OAAO,CAACC,qBAAqB,EAAE,CAAC;IACjD,CAAC,CAAC;EACJ,CAAC,EAAE,CAAClB,OAAO,CAAC,CAAC;EACb5B,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAACY,OAAO,EAAE;IACdqC,qBAAqB,EAAE;EACzB,CAAC,EAAE,CAACA,qBAAqB,EAAErC,OAAO,CAAC,CAAC;EACpCb,iBAAiB,CAAC6B,OAAO,EAAWqB,qBAAqB,CAAC;EAC1DpD,QAAQ,CACL,OAAOqD,MAAM,KAAK,WAAW,GAAG,IAAI,GAAGA,MAAM,EAC9C,QAAQ,EACRD,qBAAqB,CACtB;EACDpD,QAAQ,CAACuD,QAAQ,EAAE,QAAQ,EAAEH,qBAAqB,CAAC;EAEnD3D,SAAS,CAAC,MAAM;IACd,IAAI,CAACsC,OAAO,IAAKA,OAAO,CAAwBiB,OAAO,KAAKQ,SAAS,EACnE;IACFX,cAAc,CAACd,OAAO,CAAS;EACjC,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAM0B,SAAS,GAAG/D,OAAO,CACvB,MAAM0C,EAAE,IAAK,WAAUsB,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAE,EAAC,EAChE,CAACzB,EAAE,CAAC,CACL;;EAED;EACAjC,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAAC4B,OAAO,EAAE;IACd,MAAM;MAAEiB;IAAQ,CAAC,GAAGjB,OAA6B;IACjD,IAAI,CAACiB,OAAO,EAAE;IACd,IAAIA,OAAO,CAACc,YAAY,CAAC,eAAe,CAAC,KAAK,IAAI,EAAE;MAClDd,OAAO,CAACe,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjD;IACAf,OAAO,CAACe,YAAY,CAAC,eAAe,EAAEN,SAAS,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EACNtD,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAAC4B,OAAO,EAAE;IACd,MAAM;MAAEiB;IAAQ,CAAC,GAAGjB,OAA6B;IACjD,IAAI,CAACiB,OAAO,EAAE;IACdA,OAAO,CAACe,YAAY,CAAC,eAAe,EAAEhD,OAAO,CAAC6C,QAAQ,EAAE,CAAC;EAC3D,CAAC,EAAE,CAAC7C,OAAO,CAAC,CAAC;;EAEb;EACA,MAAM;IAAEK,GAAG;IAAEC;EAAK,CAAC,GAAGX,kBAAkB,CAAC;IACvCsD,WAAW,EAAEpB,WAAW;IACxBF,WAAW;IACXV,SAAS;IACTC,GAAG;IACHC;EACF,CAAC,CAAC;;EAEF;EACApC,eAAe,CAAC0C,UAAU,EAAEL,OAAO,CAAC;EAEpC,IAAI,CAACW,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACE,oBAAC,MAAM,qBACL,oBAAC,SAAS;IACR,GAAG,EAAE1B,GAAI;IACT,IAAI,EAAEC,IAAK;IACX,OAAO,EAAEN,OAAQ;IACjB,EAAE,EAAE0C,SAAU;IACd,IAAI,EAAC;EAAQ,GACTnB,IAAI;IACR,GAAG,EAAEY;EAAmB,IAEvBb,QAAQ,CACC,CACL;AAEb,CAAC,CACF;AAEDP,OAAO,CAACmC,WAAW,GAAG,SAAS;AAE/B,eAAenC,OAAO"}