@elliemae/ds-global-header 3.46.0-rc.6 → 3.46.0-rc.7
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 +19 -3
- package/dist/cjs/DSGlobalHeader.js.map +2 -2
- package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js +4 -1
- package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map +2 -2
- package/dist/cjs/parts/Logo/GlobalHeaderLogo.js +7 -4
- package/dist/cjs/parts/Logo/GlobalHeaderLogo.js.map +2 -2
- package/dist/cjs/parts/Logo/styles.js +3 -1
- package/dist/cjs/parts/Logo/styles.js.map +2 -2
- package/dist/cjs/parts/Toolbar/styles.js +1 -1
- package/dist/cjs/parts/Toolbar/styles.js.map +2 -2
- package/dist/esm/DSGlobalHeader.js +19 -3
- package/dist/esm/DSGlobalHeader.js.map +2 -2
- package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js +4 -1
- package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map +2 -2
- package/dist/esm/parts/Logo/GlobalHeaderLogo.js +7 -4
- package/dist/esm/parts/Logo/GlobalHeaderLogo.js.map +2 -2
- package/dist/esm/parts/Logo/styles.js +3 -1
- package/dist/esm/parts/Logo/styles.js.map +2 -2
- package/dist/esm/parts/Toolbar/styles.js +1 -1
- package/dist/esm/parts/Toolbar/styles.js.map +2 -2
- package/package.json +10 -10
|
@@ -36,6 +36,8 @@ module.exports = __toCommonJS(DSGlobalHeader_exports);
|
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
38
|
var import_react = require("react");
|
|
39
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
40
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
39
41
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
42
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
41
43
|
var import_GlobalHeaderLogo = require("./parts/Logo/GlobalHeaderLogo.js");
|
|
@@ -57,15 +59,29 @@ const DSGlobalHeader = (props) => {
|
|
|
57
59
|
const propsWithDefaults = ctx.props;
|
|
58
60
|
const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
|
|
59
61
|
const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
|
|
62
|
+
const layoutMode = (0, import_ds_system.useGetLayoutMode)();
|
|
60
63
|
const cols = (0, import_react.useMemo)(() => {
|
|
64
|
+
console.log(layoutMode);
|
|
65
|
+
if (["l"].includes(layoutMode)) {
|
|
66
|
+
return ["auto", "1fr", "auto"];
|
|
67
|
+
}
|
|
68
|
+
if (["m", "s"].includes(layoutMode)) {
|
|
69
|
+
return ["auto", "1fr"];
|
|
70
|
+
}
|
|
71
|
+
if (["xs"].includes(layoutMode)) {
|
|
72
|
+
return ["auto"];
|
|
73
|
+
}
|
|
61
74
|
if (fontDetector > import_constants.FONT_DETECTOR.SMALL) {
|
|
62
75
|
return ["auto", "1fr"];
|
|
63
76
|
}
|
|
64
77
|
return ["auto", "1fr", "auto"];
|
|
65
|
-
}, [fontDetector]);
|
|
78
|
+
}, [fontDetector, layoutMode]);
|
|
66
79
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
|
|
67
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
68
|
-
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, children: [
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
|
|
82
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})
|
|
83
|
+
] }),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {}),
|
|
69
85
|
toolbar.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderToolbar.GlobalHeaderToolbar, {}) : null
|
|
70
86
|
] }) });
|
|
71
87
|
};
|
|
@@ -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
|
|
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 cols = useMemo(() => {\n console.log(layoutMode);\n if (['l'].includes(layoutMode!)) {\n return ['auto', '1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['auto', '1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['auto', '1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n return (\n <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols}>\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\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;AD+Cf;AA/CR,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,WAAO,sBAAQ,MAAM;AACzB,YAAQ,IAAI,UAAU;AACtB,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,QAAQ,OAAO,MAAM;AAAA,IAC/B;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;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,QAAQ,OAAO,MAAM;AAAA,EAC/B,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,SACE,4CAAC,2BAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAChG,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,iDAAC,uBAAK,MACJ;AAAA,kDAAC,4CAAiB;AAAA,MAClB,4CAAC,wDAAuB;AAAA,OAC1B;AAAA,IACA,4CAAC,uBAAK;AAAA,IACL,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,6 +33,7 @@ __export(GlobalHeaderBreadcrumb_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(GlobalHeaderBreadcrumb_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
38
|
var import_styles = require("./styles.js");
|
|
38
39
|
var import_useGlobalHeaderBreadcrumb = require("./useGlobalHeaderBreadcrumb.js");
|
|
@@ -40,6 +41,8 @@ var import_PureBreadcrumb = require("./PureBreadcrumb.js");
|
|
|
40
41
|
var import_exported_related = require("../../exported-related/index.js");
|
|
41
42
|
const GlobalHeaderBreadcrumb = () => {
|
|
42
43
|
const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = (0, import_useGlobalHeaderBreadcrumb.useGlobalHeaderBreadcrumb)();
|
|
44
|
+
const layoutMode = (0, import_ds_system.useGetLayoutMode)();
|
|
45
|
+
const smalScreen = layoutMode === "xs" || layoutMode === "s" || !layoutMode && showIconOnly;
|
|
43
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
44
47
|
import_styles.StyledBreadcrumbContainer,
|
|
45
48
|
{
|
|
@@ -51,7 +54,7 @@ const GlobalHeaderBreadcrumb = () => {
|
|
|
51
54
|
forwardedAs: "nav",
|
|
52
55
|
"data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER,
|
|
53
56
|
children: [
|
|
54
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPipe, { showIconOnly, "aria-hidden": true, "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
|
|
57
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPipe, { showIconOnly: smalScreen, "aria-hidden": true, "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
|
|
55
58
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledBreadcrumbList, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.LIST, children: CustomNavigation !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomNavigation, {}) : breadcrumb?.map((item) => {
|
|
56
59
|
const { onClick, isSelected, label, hasNext, ...rest } = item;
|
|
57
60
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={smalScreen} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAfJ,uBAAiC;AACjC,8BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,QAC9F,4DAA0B;AAC5B,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,iDAAyB,WAAW;AAAA,MAEjD;AAAA,oDAAC,4BAAW,cAAc,YAAY,eAAW,MAAC,eAAa,iDAAyB,WAAW,MAAM;AAAA,QACzG,4CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACpE,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,OAAG,6CAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(GlobalHeaderLogo_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
37
38
|
var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
|
|
38
39
|
var import_styles = require("./styles.js");
|
|
39
40
|
var import_exported_related = require("../../exported-related/index.js");
|
|
@@ -42,16 +43,18 @@ const GlobalHeaderLogo = () => {
|
|
|
42
43
|
props: { Logo, LogoWithBrand },
|
|
43
44
|
showIconOnly
|
|
44
45
|
} = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
|
|
46
|
+
const layoutMode = (0, import_ds_system.useGetLayoutMode)();
|
|
47
|
+
const smalScreen = layoutMode === "xs" || layoutMode === "s" || !layoutMode && showIconOnly;
|
|
45
48
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
46
49
|
import_styles.StyledLogoContainer,
|
|
47
50
|
{
|
|
48
51
|
"data-testid": import_exported_related.DSGlobalHeaderDatatestid.LOGO.CONTAINER,
|
|
49
52
|
alignItems: "center",
|
|
50
|
-
pr:
|
|
51
|
-
cols:
|
|
53
|
+
pr: smalScreen ? "0px" : "36px",
|
|
54
|
+
cols: smalScreen ? ["auto"] : ["auto", "1fr"],
|
|
52
55
|
children: [
|
|
53
|
-
Logo &&
|
|
54
|
-
LogoWithBrand && !
|
|
56
|
+
Logo && smalScreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Logo, {}),
|
|
57
|
+
LogoWithBrand && !smalScreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoWithBrand, {})
|
|
55
58
|
]
|
|
56
59
|
}
|
|
57
60
|
);
|
|
@@ -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 { 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\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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' || (!layoutMode && showIconOnly);\n\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;ADgBnB;AAhBJ,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,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,5 +38,7 @@ var import_theming = require("../../exported-related/theming.js");
|
|
|
38
38
|
const StyledLogoContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
39
39
|
name: import_theming.DSGlobalHeaderName,
|
|
40
40
|
slot: import_theming.DSGlobalHeaderSlots.LOGO.CONTAINER
|
|
41
|
-
})
|
|
41
|
+
})`
|
|
42
|
+
min-height: 40px;
|
|
43
|
+
`;
|
|
42
44
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Logo/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledLogoContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.LOGO.CONTAINER,\n})
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,mCAAoB,KAAK;AACjC,CAAC;",
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledLogoContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.LOGO.CONTAINER,\n})`\n min-height: 40px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,0BAAsB,yBAAO,qBAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,mCAAoB,KAAK;AACjC,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,7 +41,7 @@ const StyledMenubarContainer = (0, import_ds_system.styled)("div", {
|
|
|
41
41
|
name: import_theming.DSGlobalHeaderName,
|
|
42
42
|
slot: import_theming.DSGlobalHeaderSlots.MENUBAR.CONTAINER
|
|
43
43
|
})`
|
|
44
|
-
${({ withSpan }) => withSpan ? "grid-column: span 2" : ""}
|
|
44
|
+
${({ withSpan, theme }) => withSpan && !theme.layoutMode ? "grid-column: span 2;" : ""}
|
|
45
45
|
`;
|
|
46
46
|
const StyledList = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.MENUBAR.LIST })`
|
|
47
47
|
padding: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Toolbar/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledMenubarContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})<{ withSpan: boolean }>`\n ${({ withSpan }) => (withSpan ? 'grid-column: span 2' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ;AACpC,CAAC;AAAA,IACG,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledMenubarContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})<{ withSpan: boolean }>`\n ${({ withSpan, theme }) => (withSpan && !theme.layoutMode ? 'grid-column: span 2;' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ;AACpC,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MAAM,MAAO,YAAY,CAAC,MAAM,aAAa,yBAAyB,EAAG;AAAA;AAGnF,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
+
import { useGetLayoutMode } from "@elliemae/ds-system";
|
|
4
6
|
import { useGetGlobalAttributes, useGetXstyledProps, describe } from "@elliemae/ds-props-helpers";
|
|
5
7
|
import { propTypes } from "./react-desc-prop-types.js";
|
|
6
8
|
import { GlobalHeaderLogo } from "./parts/Logo/GlobalHeaderLogo.js";
|
|
@@ -22,15 +24,29 @@ const DSGlobalHeader = (props) => {
|
|
|
22
24
|
const propsWithDefaults = ctx.props;
|
|
23
25
|
const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
|
|
24
26
|
const xstyledAttrs = useGetXstyledProps(propsWithDefaults);
|
|
27
|
+
const layoutMode = useGetLayoutMode();
|
|
25
28
|
const cols = useMemo(() => {
|
|
29
|
+
console.log(layoutMode);
|
|
30
|
+
if (["l"].includes(layoutMode)) {
|
|
31
|
+
return ["auto", "1fr", "auto"];
|
|
32
|
+
}
|
|
33
|
+
if (["m", "s"].includes(layoutMode)) {
|
|
34
|
+
return ["auto", "1fr"];
|
|
35
|
+
}
|
|
36
|
+
if (["xs"].includes(layoutMode)) {
|
|
37
|
+
return ["auto"];
|
|
38
|
+
}
|
|
26
39
|
if (fontDetector > FONT_DETECTOR.SMALL) {
|
|
27
40
|
return ["auto", "1fr"];
|
|
28
41
|
}
|
|
29
42
|
return ["auto", "1fr", "auto"];
|
|
30
|
-
}, [fontDetector]);
|
|
43
|
+
}, [fontDetector, layoutMode]);
|
|
31
44
|
return /* @__PURE__ */ jsx(Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols, children: /* @__PURE__ */ jsxs(DSGlobalHeaderContext.Provider, { value: ctx, children: [
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
|
|
45
|
+
/* @__PURE__ */ jsxs(Grid, { cols, children: [
|
|
46
|
+
/* @__PURE__ */ jsx(GlobalHeaderLogo, {}),
|
|
47
|
+
/* @__PURE__ */ jsx(GlobalHeaderBreadcrumb, {})
|
|
48
|
+
] }),
|
|
49
|
+
/* @__PURE__ */ jsx(Grid, {}),
|
|
34
50
|
toolbar.length ? /* @__PURE__ */ jsx(GlobalHeaderToolbar, {}) : null
|
|
35
51
|
] }) });
|
|
36
52
|
};
|
|
@@ -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
|
|
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 cols = useMemo(() => {\n console.log(layoutMode);\n if (['l'].includes(layoutMode!)) {\n return ['auto', '1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['auto', '1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['auto', '1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n return (\n <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols}>\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\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;AC+Cf,SACE,KADF;AA/CR,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,OAAO,QAAQ,MAAM;AACzB,YAAQ,IAAI,UAAU;AACtB,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,QAAQ,OAAO,MAAM;AAAA,IAC/B;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;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,QAAQ,OAAO,MAAM;AAAA,EAC/B,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,SACE,oBAAC,aAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAChG,+BAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,yBAAC,QAAK,MACJ;AAAA,0BAAC,oBAAiB;AAAA,MAClB,oBAAC,0BAAuB;AAAA,OAC1B;AAAA,IACA,oBAAC,QAAK;AAAA,IACL,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,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useGetLayoutMode } from "@elliemae/ds-system";
|
|
3
4
|
import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
4
5
|
import { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from "./styles.js";
|
|
5
6
|
import { useGlobalHeaderBreadcrumb } from "./useGlobalHeaderBreadcrumb.js";
|
|
@@ -7,6 +8,8 @@ import { PureBreadcrumb } from "./PureBreadcrumb.js";
|
|
|
7
8
|
import { DSGlobalHeaderDatatestid } from "../../exported-related/index.js";
|
|
8
9
|
const GlobalHeaderBreadcrumb = () => {
|
|
9
10
|
const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = useGlobalHeaderBreadcrumb();
|
|
11
|
+
const layoutMode = useGetLayoutMode();
|
|
12
|
+
const smalScreen = layoutMode === "xs" || layoutMode === "s" || !layoutMode && showIconOnly;
|
|
10
13
|
return /* @__PURE__ */ jsxs(
|
|
11
14
|
StyledBreadcrumbContainer,
|
|
12
15
|
{
|
|
@@ -18,7 +21,7 @@ const GlobalHeaderBreadcrumb = () => {
|
|
|
18
21
|
forwardedAs: "nav",
|
|
19
22
|
"data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER,
|
|
20
23
|
children: [
|
|
21
|
-
/* @__PURE__ */ jsx(StyledPipe, { showIconOnly, "aria-hidden": true, "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
|
|
24
|
+
/* @__PURE__ */ jsx(StyledPipe, { showIconOnly: smalScreen, "aria-hidden": true, "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
|
|
22
25
|
/* @__PURE__ */ jsx(StyledBreadcrumbList, { "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.LIST, children: CustomNavigation !== void 0 ? /* @__PURE__ */ jsx(CustomNavigation, {}) : breadcrumb?.map((item) => {
|
|
23
26
|
const { onClick, isSelected, label, hasNext, ...rest } = item;
|
|
24
27
|
return /* @__PURE__ */ jsx(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={smalScreen} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgBnB,SASE,KATF;AAfJ,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,IAC9F,0BAA0B;AAC5B,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,yBAAyB,WAAW;AAAA,MAEjD;AAAA,4BAAC,cAAW,cAAc,YAAY,eAAW,MAAC,eAAa,yBAAyB,WAAW,MAAM;AAAA,QACzG,oBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MACpE,+BAAqB,SACpB,oBAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,GAAG,oBAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,oBAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext } from "react";
|
|
4
|
+
import { useGetLayoutMode } from "@elliemae/ds-system";
|
|
4
5
|
import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
|
|
5
6
|
import { StyledLogoContainer } from "./styles.js";
|
|
6
7
|
import { DSGlobalHeaderDatatestid } from "../../exported-related/index.js";
|
|
@@ -9,16 +10,18 @@ const GlobalHeaderLogo = () => {
|
|
|
9
10
|
props: { Logo, LogoWithBrand },
|
|
10
11
|
showIconOnly
|
|
11
12
|
} = useContext(DSGlobalHeaderContext);
|
|
13
|
+
const layoutMode = useGetLayoutMode();
|
|
14
|
+
const smalScreen = layoutMode === "xs" || layoutMode === "s" || !layoutMode && showIconOnly;
|
|
12
15
|
return /* @__PURE__ */ jsxs(
|
|
13
16
|
StyledLogoContainer,
|
|
14
17
|
{
|
|
15
18
|
"data-testid": DSGlobalHeaderDatatestid.LOGO.CONTAINER,
|
|
16
19
|
alignItems: "center",
|
|
17
|
-
pr:
|
|
18
|
-
cols:
|
|
20
|
+
pr: smalScreen ? "0px" : "36px",
|
|
21
|
+
cols: smalScreen ? ["auto"] : ["auto", "1fr"],
|
|
19
22
|
children: [
|
|
20
|
-
Logo &&
|
|
21
|
-
LogoWithBrand && !
|
|
23
|
+
Logo && smalScreen && /* @__PURE__ */ jsx(Logo, {}),
|
|
24
|
+
LogoWithBrand && !smalScreen && /* @__PURE__ */ jsx(LogoWithBrand, {})
|
|
22
25
|
]
|
|
23
26
|
}
|
|
24
27
|
);
|
|
@@ -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 { 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\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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' || (!layoutMode && showIconOnly);\n\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;ACgBnB,SAMyB,KANzB;AAhBJ,SAAgB,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,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,9 @@ import { DSGlobalHeaderName, DSGlobalHeaderSlots } from "../../exported-related/
|
|
|
5
5
|
const StyledLogoContainer = styled(Grid, {
|
|
6
6
|
name: DSGlobalHeaderName,
|
|
7
7
|
slot: DSGlobalHeaderSlots.LOGO.CONTAINER
|
|
8
|
-
})
|
|
8
|
+
})`
|
|
9
|
+
min-height: 40px;
|
|
10
|
+
`;
|
|
9
11
|
export {
|
|
10
12
|
StyledLogoContainer
|
|
11
13
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Logo/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledLogoContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.LOGO.CONTAINER,\n})
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,sBAAsB,OAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB,KAAK;AACjC,CAAC;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledLogoContainer = styled(Grid, {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.LOGO.CONTAINER,\n})`\n min-height: 40px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,sBAAsB,OAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB,KAAK;AACjC,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ const StyledMenubarContainer = styled("div", {
|
|
|
6
6
|
name: DSGlobalHeaderName,
|
|
7
7
|
slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER
|
|
8
8
|
})`
|
|
9
|
-
${({ withSpan }) => withSpan ? "grid-column: span 2" : ""}
|
|
9
|
+
${({ withSpan, theme }) => withSpan && !theme.layoutMode ? "grid-column: span 2;" : ""}
|
|
10
10
|
`;
|
|
11
11
|
const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`
|
|
12
12
|
padding: 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledMenubarContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})<{ withSpan: boolean }>`\n ${({ withSpan }) => (withSpan ? 'grid-column: span 2' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ;AACpC,CAAC;AAAA,IACG,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledMenubarContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})<{ withSpan: boolean }>`\n ${({ withSpan, theme }) => (withSpan && !theme.layoutMode ? 'grid-column: span 2;' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ;AACpC,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MAAM,MAAO,YAAY,CAAC,MAAM,aAAa,yBAAyB,EAAG;AAAA;AAGnF,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "3.46.0-rc.
|
|
3
|
+
"version": "3.46.0-rc.7",
|
|
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-
|
|
141
|
-
"@elliemae/ds-
|
|
142
|
-
"@elliemae/ds-hooks-fontsize-media": "3.46.0-rc.
|
|
143
|
-
"@elliemae/ds-grid": "3.46.0-rc.
|
|
144
|
-
"@elliemae/ds-
|
|
145
|
-
"@elliemae/ds-
|
|
146
|
-
"@elliemae/ds-props-helpers": "3.46.0-rc.
|
|
147
|
-
"@elliemae/ds-system": "3.46.0-rc.
|
|
140
|
+
"@elliemae/ds-app-picker": "3.46.0-rc.7",
|
|
141
|
+
"@elliemae/ds-form": "3.46.0-rc.7",
|
|
142
|
+
"@elliemae/ds-hooks-fontsize-media": "3.46.0-rc.7",
|
|
143
|
+
"@elliemae/ds-grid": "3.46.0-rc.7",
|
|
144
|
+
"@elliemae/ds-popperjs": "3.46.0-rc.7",
|
|
145
|
+
"@elliemae/ds-icons": "3.46.0-rc.7",
|
|
146
|
+
"@elliemae/ds-props-helpers": "3.46.0-rc.7",
|
|
147
|
+
"@elliemae/ds-system": "3.46.0-rc.7"
|
|
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-rc.
|
|
152
|
+
"@elliemae/ds-monorepo-devops": "3.46.0-rc.7"
|
|
153
153
|
},
|
|
154
154
|
"peerDependencies": {
|
|
155
155
|
"lodash": "^4.17.21",
|