@os-design/core 1.0.114 → 1.0.115

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/PageHeader/index.js +1 -1
  2. package/dist/cjs/PageHeader/index.js.map +1 -1
  3. package/dist/esm/PageHeader/index.js +1 -1
  4. package/dist/esm/PageHeader/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/cjs/PageHeader/index.js CHANGED
@@ -84,7 +84,7 @@ var notHasSubtitleStyles = function notHasSubtitleStyles(p) {
84
84
  return !p.hasSubtitle && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: ", "em;\n "])), p.theme.sizes.large);
85
85
  };
86
86
 
87
- var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 1em;\n font-weight: 500;\n line-height: 1.5;\n ", ";\n ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
87
+ var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 1em;\n font-weight: 500;\n line-height: 1.2;\n ", ";\n ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
88
88
 
89
89
  var Subtitle = _styled["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: ", "em;\n color: ", ";\n line-height: 1;\n margin-top: 0.2em;\n ", ";\n"])), function (p) {
90
90
  return p.theme.sizes.small;
package/dist/cjs/PageHeader/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","styled","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","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.5;\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"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","styled","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","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"],"file":"index.js"}
package/dist/esm/PageHeader/index.js CHANGED
@@ -78,7 +78,7 @@ const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
78
78
  margin: 0;
79
79
  font-size: 1em;
80
80
  font-weight: 500;
81
- line-height: 1.5;
81
+ line-height: 1.2;
82
82
  ${notHasSubtitleStyles};
83
83
  ${ellipsisStyles};
84
84
  `;
package/dist/esm/PageHeader/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/PageHeader/index.tsx"],"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"],"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;AACjD,QAAMC,CAAC,GAAGD,OAAO,GAAG,CAAH,GAAO,CAAxB;AACA,MAAIE,OAAO,GAAGH,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0BH,CAA1B,IAA+BF,CAAC,CAACI,KAAF,CAAQE,uBAArD;AACA,MAAIH,OAAO,GAAG,CAAd,EAAiBA,OAAO,GAAG,CAAV;AACjB,SAAOA,OAAP;AACD,CALD;;AAOA,MAAMI,uBAAuB,GAAIP,CAAD,IAAO;AACrC,QAAMQ,cAAc,GAAGT,iBAAiB,CAACC,CAAD,EAAI,KAAJ,CAAxC;AACA,QAAMS,gBAAgB,GAAGV,iBAAiB,CAACC,CAAD,EAAI,IAAJ,CAA1C;AACA,SAAOL,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;AACEqD,EAAAA,KADF;AAEEC,EAAAA,QAFF;AAGEC,EAAAA,IAHF;AAIE/B,EAAAA,iBAAiB,GAAG,KAJtB;AAKEgC,EAAAA,KALF;AAME/B,EAAAA,kBAAkB,GAAG,KANvB;AAOEgC,EAAAA,MAPF;AAQEC,EAAAA,MAAM,GAAG9C,aARX;AASE,KAAG+C;AATL,CADF,EAYEC,GAZF,KAaK;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAoB5D,UAAU,CAACU,aAAD,CAApC;AAEA,sBACE,oBAAC,cAAD;AACE,IAAA,SAAS,EAAGmD,CAAD,KAAQ;AACjB1C,MAAAA,uBAAuB,EAAE0C,CAAC,CAACC;AADV,KAAR;AADb,kBAKE,oBAAC,mBAAD;AACE,IAAA,iBAAiB,EAAEvC,iBAAiB,IAAI,CAAC,CAACiC,MAD5C;AAEE,IAAA,kBAAkB,EAAEhC,kBAFtB;AAGE,IAAA,mBAAmB,EAAEoC;AAHvB,KAIMF,IAJN;AAKE,IAAA,GAAG,EAAEC;AALP,MAOGH,MAAM,iBACL,oBAAC,UAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAEA,MAHX;AAIE,kBAAYC,MAAM,CAACM;AAJrB,kBAME,oBAAC,IAAD,OANF,CARJ,EAkBGT,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CAlBX,eAoBE,oBAAC,OAAD,qBACE,oBAAC,KAAD;AAAO,IAAA,WAAW,EAAE,CAAC,CAACD;AAAtB,KAAiCD,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","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.5;\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"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/PageHeader/index.tsx"],"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"],"mappings":"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","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"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.114",
3
+ "version": "1.0.115",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
56
56
  "react": "0.0.0-experimental-27b569969-20220211",
57
57
  "react-dom": "0.0.0-experimental-27b569969-20220211"
58
58
  },
59
- "gitHead": "8d3633dd8a0093415656a3f16c0c4e1fb5a116bd"
59
+ "gitHead": "4ec3bd14666796d88c5858245db14b814947de21"
60
60
  }