@elliemae/ds-global-header 3.46.0-rc.9 → 3.46.0
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.
- package/dist/cjs/DSGlobalHeader.js +11 -7
- package/dist/cjs/DSGlobalHeader.js.map +2 -2
- package/dist/cjs/parts/Logo/GlobalHeaderLogo.js +7 -2
- package/dist/cjs/parts/Logo/GlobalHeaderLogo.js.map +3 -3
- package/dist/esm/DSGlobalHeader.js +11 -7
- package/dist/esm/DSGlobalHeader.js.map +2 -2
- package/dist/esm/parts/Logo/GlobalHeaderLogo.js +7 -2
- package/dist/esm/parts/Logo/GlobalHeaderLogo.js.map +3 -3
- package/package.json +10 -10
|
@@ -60,13 +60,12 @@ const DSGlobalHeader = (props) => {
|
|
|
60
60
|
const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
|
|
61
61
|
const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
|
|
62
62
|
const layoutMode = (0, import_ds_system.useGetLayoutMode)();
|
|
63
|
-
const
|
|
64
|
-
console.log(layoutMode);
|
|
63
|
+
const cols2 = (0, import_react.useMemo)(() => {
|
|
65
64
|
if (["l"].includes(layoutMode)) {
|
|
66
|
-
return ["
|
|
65
|
+
return ["1fr", "auto"];
|
|
67
66
|
}
|
|
68
67
|
if (["m", "s"].includes(layoutMode)) {
|
|
69
|
-
return ["
|
|
68
|
+
return ["1fr"];
|
|
70
69
|
}
|
|
71
70
|
if (["xs"].includes(layoutMode)) {
|
|
72
71
|
return ["auto"];
|
|
@@ -74,14 +73,19 @@ const DSGlobalHeader = (props) => {
|
|
|
74
73
|
if (fontDetector > import_constants.FONT_DETECTOR.SMALL) {
|
|
75
74
|
return ["auto", "1fr"];
|
|
76
75
|
}
|
|
77
|
-
return ["
|
|
76
|
+
return ["1fr", "auto"];
|
|
78
77
|
}, [fontDetector, layoutMode]);
|
|
79
|
-
|
|
78
|
+
const cols = (0, import_react.useMemo)(() => {
|
|
79
|
+
if (["xs"].includes(layoutMode)) {
|
|
80
|
+
return ["auto"];
|
|
81
|
+
}
|
|
82
|
+
return ["auto", "1fr"];
|
|
83
|
+
}, [layoutMode]);
|
|
84
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols: cols2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
|
|
80
85
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, children: [
|
|
81
86
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
|
|
82
87
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})
|
|
83
88
|
] }),
|
|
84
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {}),
|
|
85
89
|
toolbar.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderToolbar.GlobalHeaderToolbar, {}) : null
|
|
86
90
|
] }) });
|
|
87
91
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSGlobalHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const cols2 = useMemo(() => {\n if (['l'].includes(layoutMode!)) {\n return ['1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n const cols = useMemo(() => {\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n return ['auto', '1fr'];\n }, [layoutMode]);\n\n return (\n <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols2}>\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\n {toolbar.length ? <GlobalHeaderToolbar /> : null}\n </DSGlobalHeaderContext.Provider>\n </Container>\n );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDf;AArDR,mBAA+B;AAC/B,qBAAmC;AACnC,uBAAiC;AACjC,8BAAqE;AACrE,mCAAgD;AAChD,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,8BAAiC;AACjC,8BAAmC;AACnC,uBAA8B;AAC9B,oBAA0B;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,oBAAoB,IAAI;AAC9B,QAAM,kBAAc,gDAA6E,iBAAiB;AAClH,QAAM,mBAAe,4CAAmB,iBAAiB;AACzD,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,OAAO,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,KAAK;AAAA,IACf;AACA,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,QAAI,eAAe,+BAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,QAAQ,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,4CAAC,2BAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAAM,OACtG,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,iDAAC,uBAAK,MACJ;AAAA,kDAAC,4CAAiB;AAAA,MAClB,4CAAC,wDAAuB;AAAA,OAC1B;AAAA,IACC,QAAQ,SAAS,4CAAC,kDAAoB,IAAK;AAAA,KAC9C,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(GlobalHeaderLogo_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(GlobalHeaderLogo_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
|
|
39
39
|
var import_styles = require("./styles.js");
|
|
@@ -44,7 +44,12 @@ const GlobalHeaderLogo = () => {
|
|
|
44
44
|
showIconOnly
|
|
45
45
|
} = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
|
|
46
46
|
const layoutMode = (0, import_ds_system.useGetLayoutMode)();
|
|
47
|
-
const smalScreen =
|
|
47
|
+
const smalScreen = import_react.default.useMemo(() => {
|
|
48
|
+
if (!layoutMode) return showIconOnly;
|
|
49
|
+
if (layoutMode === "xs" || layoutMode === "s") return true;
|
|
50
|
+
return false;
|
|
51
|
+
}, [layoutMode, showIconOnly]);
|
|
52
|
+
console.log(smalScreen, layoutMode);
|
|
48
53
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
49
54
|
import_styles.StyledLogoContainer,
|
|
50
55
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Logo/GlobalHeaderLogo.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's'
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = React.useMemo(() => {\n if (!layoutMode) return showIconOnly;\n if (layoutMode === 'xs' || layoutMode === 's') return true;\n return false;\n }, [layoutMode, showIconOnly]);\n\n console.log(smalScreen, layoutMode);\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={smalScreen ? '0px' : '36px'}\n cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n >\n {Logo && smalScreen && <Logo />}\n {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n </StyledLogoContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAkC;AAClC,uBAAiC;AACjC,mCAAsC;AACtC,oBAAoC;AACpC,8BAAyC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,EACF,QAAI,yBAAW,kDAAqB;AACpC,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,UAAQ,IAAI,YAAY,UAAU;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAE3C;AAAA,gBAAQ,cAAc,4CAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,4CAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -25,13 +25,12 @@ const DSGlobalHeader = (props) => {
|
|
|
25
25
|
const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
|
|
26
26
|
const xstyledAttrs = useGetXstyledProps(propsWithDefaults);
|
|
27
27
|
const layoutMode = useGetLayoutMode();
|
|
28
|
-
const
|
|
29
|
-
console.log(layoutMode);
|
|
28
|
+
const cols2 = useMemo(() => {
|
|
30
29
|
if (["l"].includes(layoutMode)) {
|
|
31
|
-
return ["
|
|
30
|
+
return ["1fr", "auto"];
|
|
32
31
|
}
|
|
33
32
|
if (["m", "s"].includes(layoutMode)) {
|
|
34
|
-
return ["
|
|
33
|
+
return ["1fr"];
|
|
35
34
|
}
|
|
36
35
|
if (["xs"].includes(layoutMode)) {
|
|
37
36
|
return ["auto"];
|
|
@@ -39,14 +38,19 @@ const DSGlobalHeader = (props) => {
|
|
|
39
38
|
if (fontDetector > FONT_DETECTOR.SMALL) {
|
|
40
39
|
return ["auto", "1fr"];
|
|
41
40
|
}
|
|
42
|
-
return ["
|
|
41
|
+
return ["1fr", "auto"];
|
|
43
42
|
}, [fontDetector, layoutMode]);
|
|
44
|
-
|
|
43
|
+
const cols = useMemo(() => {
|
|
44
|
+
if (["xs"].includes(layoutMode)) {
|
|
45
|
+
return ["auto"];
|
|
46
|
+
}
|
|
47
|
+
return ["auto", "1fr"];
|
|
48
|
+
}, [layoutMode]);
|
|
49
|
+
return /* @__PURE__ */ jsx(Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols: cols2, children: /* @__PURE__ */ jsxs(DSGlobalHeaderContext.Provider, { value: ctx, children: [
|
|
45
50
|
/* @__PURE__ */ jsxs(Grid, { cols, children: [
|
|
46
51
|
/* @__PURE__ */ jsx(GlobalHeaderLogo, {}),
|
|
47
52
|
/* @__PURE__ */ jsx(GlobalHeaderBreadcrumb, {})
|
|
48
53
|
] }),
|
|
49
|
-
/* @__PURE__ */ jsx(Grid, {}),
|
|
50
54
|
toolbar.length ? /* @__PURE__ */ jsx(GlobalHeaderToolbar, {}) : null
|
|
51
55
|
] }) });
|
|
52
56
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSGlobalHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const cols2 = useMemo(() => {\n if (['l'].includes(layoutMode!)) {\n return ['1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n const cols = useMemo(() => {\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n return ['auto', '1fr'];\n }, [layoutMode]);\n\n return (\n <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols2}>\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\n {toolbar.length ? <GlobalHeaderToolbar /> : null}\n </DSGlobalHeaderContext.Provider>\n </Container>\n );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqDf,SACE,KADF;AArDR,SAAgB,eAAe;AAC/B,SAAuB,YAAY;AACnC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,oBAAoB,gBAAgB;AACrE,SAAS,iBAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,oBAAoB,IAAI;AAC9B,QAAM,cAAc,uBAA6E,iBAAiB;AAClH,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,QAAM,aAAa,iBAAiB;AAEpC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,OAAO,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,KAAK;AAAA,IACf;AACA,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,QAAI,eAAe,cAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,QAAQ,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oBAAC,aAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAAM,OACtG,+BAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,yBAAC,QAAK,MACJ;AAAA,0BAAC,oBAAiB;AAAA,MAClB,oBAAC,0BAAuB;AAAA,OAC1B;AAAA,IACC,QAAQ,SAAS,oBAAC,uBAAoB,IAAK;AAAA,KAC9C,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext } from "react";
|
|
3
|
+
import React2, { useContext } from "react";
|
|
4
4
|
import { useGetLayoutMode } from "@elliemae/ds-system";
|
|
5
5
|
import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
|
|
6
6
|
import { StyledLogoContainer } from "./styles.js";
|
|
@@ -11,7 +11,12 @@ const GlobalHeaderLogo = () => {
|
|
|
11
11
|
showIconOnly
|
|
12
12
|
} = useContext(DSGlobalHeaderContext);
|
|
13
13
|
const layoutMode = useGetLayoutMode();
|
|
14
|
-
const smalScreen =
|
|
14
|
+
const smalScreen = React2.useMemo(() => {
|
|
15
|
+
if (!layoutMode) return showIconOnly;
|
|
16
|
+
if (layoutMode === "xs" || layoutMode === "s") return true;
|
|
17
|
+
return false;
|
|
18
|
+
}, [layoutMode, showIconOnly]);
|
|
19
|
+
console.log(smalScreen, layoutMode);
|
|
15
20
|
return /* @__PURE__ */ jsxs(
|
|
16
21
|
StyledLogoContainer,
|
|
17
22
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Logo/GlobalHeaderLogo.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's'
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = React.useMemo(() => {\n if (!layoutMode) return showIconOnly;\n if (layoutMode === 'xs' || layoutMode === 's') return true;\n return false;\n }, [layoutMode, showIconOnly]);\n\n console.log(smalScreen, layoutMode);\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={smalScreen ? '0px' : '36px'}\n cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n >\n {Logo && smalScreen && <Logo />}\n {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n </StyledLogoContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqBnB,SAMyB,KANzB;AArBJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,EACF,IAAI,WAAW,qBAAqB;AACpC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,UAAQ,IAAI,YAAY,UAAU;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yBAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAE3C;AAAA,gBAAQ,cAAc,oBAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "3.46.0
|
|
3
|
+
"version": "3.46.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"files": [
|
|
@@ -137,19 +137,19 @@
|
|
|
137
137
|
},
|
|
138
138
|
"dependencies": {
|
|
139
139
|
"uid": "~2.0.1",
|
|
140
|
-
"@elliemae/ds-app-picker": "3.46.0
|
|
141
|
-
"@elliemae/ds-
|
|
142
|
-
"@elliemae/ds-grid": "3.46.0
|
|
143
|
-
"@elliemae/ds-
|
|
144
|
-
"@elliemae/ds-popperjs": "3.46.0
|
|
145
|
-
"@elliemae/ds-
|
|
146
|
-
"@elliemae/ds-props-helpers": "3.46.0
|
|
147
|
-
"@elliemae/ds-system": "3.46.0
|
|
140
|
+
"@elliemae/ds-app-picker": "3.46.0",
|
|
141
|
+
"@elliemae/ds-form": "3.46.0",
|
|
142
|
+
"@elliemae/ds-grid": "3.46.0",
|
|
143
|
+
"@elliemae/ds-hooks-fontsize-media": "3.46.0",
|
|
144
|
+
"@elliemae/ds-popperjs": "3.46.0",
|
|
145
|
+
"@elliemae/ds-icons": "3.46.0",
|
|
146
|
+
"@elliemae/ds-props-helpers": "3.46.0",
|
|
147
|
+
"@elliemae/ds-system": "3.46.0"
|
|
148
148
|
},
|
|
149
149
|
"devDependencies": {
|
|
150
150
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
151
151
|
"styled-components": "~5.3.9",
|
|
152
|
-
"@elliemae/ds-monorepo-devops": "3.46.0
|
|
152
|
+
"@elliemae/ds-monorepo-devops": "3.46.0"
|
|
153
153
|
},
|
|
154
154
|
"peerDependencies": {
|
|
155
155
|
"lodash": "^4.17.21",
|