@elliemae/ds-page-header 3.21.0-rc.3 → 3.21.2-rc.10
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/v2/PageHeader.js +9 -4
- package/dist/cjs/v2/PageHeader.js.map +2 -2
- package/dist/cjs/v2/config/usePageHeader.js +60 -9
- package/dist/cjs/v2/config/usePageHeader.js.map +2 -2
- package/dist/cjs/v2/react-desc-prop-types.js +2 -1
- package/dist/cjs/v2/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/v2/styled.js.map +2 -2
- package/dist/esm/v2/PageHeader.js +9 -4
- package/dist/esm/v2/PageHeader.js.map +2 -2
- package/dist/esm/v2/config/usePageHeader.js +61 -10
- package/dist/esm/v2/config/usePageHeader.js.map +2 -2
- package/dist/esm/v2/react-desc-prop-types.js +2 -1
- package/dist/esm/v2/react-desc-prop-types.js.map +2 -2
- package/dist/esm/v2/styled.js.map +2 -2
- package/dist/types/v2/config/usePageHeader.d.ts +1 -1
- package/dist/types/v2/react-desc-prop-types.d.ts +2 -1
- package/dist/types/v2/styled.d.ts +10 -0
- package/package.json +15 -14
|
@@ -42,7 +42,6 @@ var React = __toESM(require("react"));
|
|
|
42
42
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
43
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
44
44
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
45
|
-
var import_lodash = require("lodash");
|
|
46
45
|
var import_styled = require("./styled.js");
|
|
47
46
|
var import_usePageHeader = require("./config/usePageHeader.js");
|
|
48
47
|
var import_PageHeaderTitle = require("./components/PageHeaderTitle.js");
|
|
@@ -63,9 +62,15 @@ const DSPageHeaderV2 = (props) => {
|
|
|
63
62
|
globalAttributes,
|
|
64
63
|
xStyledProps
|
|
65
64
|
} = (0, import_usePageHeader.usePageHeader)(props);
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
const
|
|
65
|
+
const { isSkeleton } = props;
|
|
66
|
+
const wrapperRow = ["auto", "1fr"];
|
|
67
|
+
const mainRow = ["1fr", "auto"];
|
|
68
|
+
const pageTitleRow = [
|
|
69
|
+
isSkeleton ? "2fr" : "auto",
|
|
70
|
+
currentMenu !== void 0 && "30px",
|
|
71
|
+
currentSummary !== void 0 && "auto",
|
|
72
|
+
"1fr"
|
|
73
|
+
].filter((col) => typeof col === "string");
|
|
69
74
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
75
|
import_styled.Container,
|
|
71
76
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/PageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n Container,\n ContainerWBorder,\n PageHeaderCustomRenderer,\n PageHeaderToolbarWrapper,\n PageHeaderMenu,\n PageHeaderBack,\n} from './styled.js';\nimport { usePageHeader } from './config/usePageHeader.js';\nimport { PageHeaderTitle } from './components/PageHeaderTitle.js';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle.js';\nimport { PageHeaderSummary } from './components/PageHeaderSummary.js';\nimport type { DSPageHeaderT } from './react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSPageHeaderDataTestIds, DSPageHeaderName } from './exported-related/index.js';\n\nconst DSPageHeaderV2: React.ComponentType<DSPageHeaderT.Props> = (props) => {\n const {\n currentBackArrow,\n currentMenu,\n currentBreadcrumbs,\n currentSummary,\n currentToolbar,\n currentPageTitle,\n containerProps,\n withBottomSeparator,\n globalAttributes,\n xStyledProps,\n } = usePageHeader(props);\n\n const { isSkeleton } = props;\n const wrapperRow = ['auto', '1fr'];\n const mainRow = ['1fr', 'auto'];\n const pageTitleRow = [\n isSkeleton ? '2fr' : 'auto',\n currentMenu !== undefined && '30px',\n currentSummary !== undefined && 'auto',\n '1fr',\n ].filter((col) => typeof col === 'string') as string[];\n return (\n <Container\n {...containerProps}\n {...globalAttributes}\n {...xStyledProps}\n data-testid={DSPageHeaderDataTestIds.CONTAINER}\n >\n <ContainerWBorder withBottomSeparator={withBottomSeparator}>\n <Grid cols={wrapperRow}>\n <Grid>\n <PageHeaderBack>{currentBackArrow}</PageHeaderBack>\n </Grid>\n <Grid rows={['auto', 'auto']}>\n <Grid className=\"em-ds-page-header-v2-breadcrumb\">{currentBreadcrumbs}</Grid>\n <Grid cols={mainRow}>\n <Grid cols={pageTitleRow}>\n {currentPageTitle}\n {currentMenu && <PageHeaderMenu>{currentMenu}</PageHeaderMenu>}\n {currentSummary}\n <div />\n </Grid>\n <Grid>\n <PageHeaderToolbarWrapper>{currentToolbar}</PageHeaderToolbarWrapper>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n </ContainerWBorder>\n </Container>\n );\n};\n\nDSPageHeaderV2.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\nDSPageHeaderV2.defaultProps = defaultProps;\nDSPageHeaderV2.displayName = DSPageHeaderName;\nconst DSPageHeaderWithSchema = describe(DSPageHeaderV2);\n\nDSPageHeaderWithSchema.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\n\nexport {\n DSPageHeaderV2,\n PageHeaderTitle,\n PageHeaderEditableTitle,\n PageHeaderSummary,\n PageHeaderMenu,\n PageHeaderCustomRenderer,\n DSPageHeaderWithSchema,\n};\n\nexport default DSPageHeaderV2;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDX;AAnDZ,8BAAyB;AACzB,qBAAqB;AACrB,oBAOO;AACP,2BAA8B;AAC9B,6BAAgC;AAChC,qCAAwC;AACxC,+BAAkC;AAElC,mCAAkD;AAClD,8BAA0D;AAE1D,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc,KAAK;AAEvB,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,CAAC,QAAQ,KAAK;AACjC,QAAM,UAAU,CAAC,OAAO,MAAM;AAC9B,QAAM,eAAe;AAAA,IACnB,aAAa,QAAQ;AAAA,IACrB,gBAAgB,UAAa;AAAA,IAC7B,mBAAmB,UAAa;AAAA,IAChC;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,OAAO,QAAQ,QAAQ;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,eAAa,gDAAwB;AAAA,MAErC,sDAAC,kCAAiB,qBAChB,uDAAC,uBAAK,MAAM,YACV;AAAA,oDAAC,uBACC,sDAAC,gCAAgB,4BAAiB,GACpC;AAAA,QACA,6CAAC,uBAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA,sDAAC,uBAAK,WAAU,mCAAmC,8BAAmB;AAAA,UACtE,6CAAC,uBAAK,MAAM,SACV;AAAA,yDAAC,uBAAK,MAAM,cACT;AAAA;AAAA,cACA,eAAe,4CAAC,gCAAgB,uBAAY;AAAA,cAC5C;AAAA,cACD,4CAAC,SAAI;AAAA,eACP;AAAA,YACA,4CAAC,uBACC,sDAAC,0CAA0B,0BAAe,GAC5C;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,6BAAyB,kCAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,6 +35,8 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
|
+
var import_ds_skeleton = require("@elliemae/ds-skeleton");
|
|
39
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
40
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
39
41
|
var import_exported_related = require("../exported-related/index.js");
|
|
40
42
|
const usePageHeader = (props) => {
|
|
@@ -53,19 +55,68 @@ const usePageHeader = (props) => {
|
|
|
53
55
|
Backarrow,
|
|
54
56
|
breadcrumbs,
|
|
55
57
|
Breadcrumbs,
|
|
58
|
+
isSkeleton,
|
|
56
59
|
...rest
|
|
57
60
|
} = props;
|
|
58
61
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
|
|
59
62
|
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
|
|
60
|
-
const currentBackArrow = (0, import_react.useMemo)(() =>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
63
|
+
const currentBackArrow = (0, import_react.useMemo)(() => {
|
|
64
|
+
if (isSkeleton && (Backarrow || backarrow))
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { marginRight: "xxs", variant: "rectangular", width: "2rem", height: "2rem" });
|
|
66
|
+
if (Backarrow)
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Backarrow, {});
|
|
68
|
+
if (backarrow)
|
|
69
|
+
return backarrow;
|
|
70
|
+
return void 0;
|
|
71
|
+
}, [Backarrow, backarrow, isSkeleton]);
|
|
72
|
+
const currentMenu = (0, import_react.useMemo)(() => {
|
|
73
|
+
if (isSkeleton && (Menu || menu))
|
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "2rem", height: "2rem" });
|
|
75
|
+
if (Menu)
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, {});
|
|
77
|
+
if (menu)
|
|
78
|
+
return menu;
|
|
79
|
+
return void 0;
|
|
80
|
+
}, [Menu, menu, isSkeleton]);
|
|
81
|
+
const currentBreadcrumbs = (0, import_react.useMemo)(() => {
|
|
82
|
+
if (isSkeleton && (Breadcrumbs || breadcrumbs))
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { cols: ["auto"], gutter: "xxxs", justifyContent: "flex-start", height: "24px", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "1rem" }) });
|
|
84
|
+
if (Breadcrumbs)
|
|
85
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumbs, {});
|
|
86
|
+
if (breadcrumbs)
|
|
87
|
+
return breadcrumbs;
|
|
88
|
+
return void 0;
|
|
89
|
+
}, [Breadcrumbs, breadcrumbs, isSkeleton]);
|
|
90
|
+
const currentSummary = (0, import_react.useMemo)(() => {
|
|
91
|
+
if (isSkeleton && (Summary || summary))
|
|
92
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { marginLeft: "xxs", variant: "rectangular", width: "4rem", height: "2rem" });
|
|
93
|
+
if (Summary)
|
|
94
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Summary, {});
|
|
95
|
+
if (summary)
|
|
96
|
+
return summary;
|
|
97
|
+
return void 0;
|
|
98
|
+
}, [Summary, summary, isSkeleton]);
|
|
99
|
+
const currentToolbar = (0, import_react.useMemo)(() => {
|
|
100
|
+
if (isSkeleton && (Toolbar || toolbar))
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["repeat(2, auto)"], gutter: "xxxs", children: [
|
|
102
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" }),
|
|
103
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" })
|
|
104
|
+
] });
|
|
105
|
+
if (Toolbar)
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toolbar, {});
|
|
107
|
+
if (toolbar)
|
|
108
|
+
return toolbar;
|
|
109
|
+
return void 0;
|
|
110
|
+
}, [Toolbar, toolbar, isSkeleton]);
|
|
111
|
+
const currentPageTitle = (0, import_react.useMemo)(() => {
|
|
112
|
+
if (isSkeleton && (PageTitle || pageTitle))
|
|
113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", maxWidth: "100%", height: "2rem" });
|
|
114
|
+
if (PageTitle)
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageTitle, {});
|
|
116
|
+
if (pageTitle)
|
|
117
|
+
return pageTitle;
|
|
118
|
+
return void 0;
|
|
119
|
+
}, [PageTitle, pageTitle, isSkeleton]);
|
|
69
120
|
return (0, import_react.useMemo)(
|
|
70
121
|
() => ({
|
|
71
122
|
propsWithDefaults,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/v2/config/usePageHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { DSPageHeaderT } from '../react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSPageHeaderName } from '../exported-related/index.js';\n\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes, DSPageHeaderName);\n\n const {\n menu,\n Menu,\n pageTitle,\n PageTitle,\n toolbar,\n Toolbar,\n summary,\n Summary,\n backarrow,\n Backarrow,\n breadcrumbs,\n Breadcrumbs,\n ...rest\n } = props;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n const currentBackArrow = useMemo(() => backarrow
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSPageHeaderT } from '../react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSPageHeaderName } from '../exported-related/index.js';\n\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes, DSPageHeaderName);\n\n const {\n menu,\n Menu,\n pageTitle,\n PageTitle,\n toolbar,\n Toolbar,\n summary,\n Summary,\n backarrow,\n Backarrow,\n breadcrumbs,\n Breadcrumbs,\n isSkeleton,\n ...rest\n } = props;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n const currentBackArrow = useMemo(() => {\n if (isSkeleton && (Backarrow || backarrow))\n return <DSSkeleton marginRight=\"xxs\" variant=\"rectangular\" width=\"2rem\" height=\"2rem\" />;\n if (Backarrow) return <Backarrow />;\n if (backarrow) return backarrow;\n return undefined;\n }, [Backarrow, backarrow, isSkeleton]);\n\n const currentMenu = useMemo(() => {\n if (isSkeleton && (Menu || menu)) return <DSSkeleton variant=\"rectangular\" width=\"2rem\" height=\"2rem\" />;\n if (Menu) return <Menu />;\n if (menu) return menu;\n return undefined;\n }, [Menu, menu, isSkeleton]);\n\n const currentBreadcrumbs = useMemo(() => {\n if (isSkeleton && (Breadcrumbs || breadcrumbs))\n return (\n <Grid cols={['auto']} gutter={'xxxs'} justifyContent=\"flex-start\" height=\"24px\" alignItems=\"center\">\n <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"1rem\" />\n </Grid>\n );\n if (Breadcrumbs) return <Breadcrumbs />;\n if (breadcrumbs) return breadcrumbs;\n return undefined;\n }, [Breadcrumbs, breadcrumbs, isSkeleton]);\n\n const currentSummary = useMemo(() => {\n if (isSkeleton && (Summary || summary))\n return <DSSkeleton marginLeft={'xxs'} variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />;\n if (Summary) return <Summary />;\n if (summary) return summary;\n return undefined;\n }, [Summary, summary, isSkeleton]);\n\n const currentToolbar = useMemo(() => {\n if (isSkeleton && (Toolbar || toolbar))\n return (\n <Grid cols={['repeat(2, auto)']} gutter={'xxxs'}>\n <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />\n <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />\n </Grid>\n );\n if (Toolbar) return <Toolbar />;\n if (toolbar) return toolbar;\n return undefined;\n }, [Toolbar, toolbar, isSkeleton]);\n\n const currentPageTitle = useMemo(() => {\n if (isSkeleton && (PageTitle || pageTitle))\n return <DSSkeleton variant=\"rectangular\" maxWidth=\"100%\" height=\"2rem\" />;\n\n if (PageTitle) return <PageTitle />;\n if (pageTitle) return pageTitle;\n return undefined;\n }, [PageTitle, pageTitle, isSkeleton]);\n\n return useMemo(\n () => ({\n propsWithDefaults,\n globalAttributes,\n xStyledProps,\n currentBackArrow,\n currentMenu,\n currentBreadcrumbs,\n currentSummary,\n currentToolbar,\n currentPageTitle,\n ...rest,\n }),\n [\n propsWithDefaults,\n currentBackArrow,\n currentBreadcrumbs,\n currentMenu,\n currentPageTitle,\n currentSummary,\n currentToolbar,\n globalAttributes,\n rest,\n xStyledProps,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -57,7 +57,8 @@ const PageHeaderPropTypes = {
|
|
|
57
57
|
menu: import_ds_props_helpers.PropTypes.node.description("PageHeaderMenu component").deprecated({ version: "Prop will be removed on 05/01/2022" }),
|
|
58
58
|
Menu: import_ds_props_helpers.PropTypes.func.description("PageHeaderMenu component"),
|
|
59
59
|
/** Border bottom below the page header */
|
|
60
|
-
withBottomSeparator: import_ds_props_helpers.PropTypes.bool.description("Border bottom below the page header")
|
|
60
|
+
withBottomSeparator: import_ds_props_helpers.PropTypes.bool.description("Border bottom below the page header"),
|
|
61
|
+
isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Loading state of the page header").defaultValue(false)
|
|
61
62
|
};
|
|
62
63
|
const defaultProps = {
|
|
63
64
|
containerProps: {},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSPageHeaderT {\n export interface DefaultProps {\n withBottomSeparator: boolean;\n containerProps: object;\n }\n\n export interface OptionalProps {\n breadcrumbs?: JSX.Element;\n pageTitle?: JSX.Element;\n backarrow?: JSX.Element;\n summary?: JSX.Element;\n toolbar?: JSX.Element;\n menu?: JSX.Element;\n Breadcrumbs?: () => JSX.Element;\n PageTitle?: () => JSX.Element;\n Backarrow?: () => JSX.Element;\n Summary?: () => JSX.Element;\n Toolbar?: () => JSX.Element;\n Menu?: () => JSX.Element;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n}\n\nexport const PageHeaderPropTypes = {\n ...globalAttributesPropTypes,\n /** props injected to wrapper of page header */\n containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),\n /** breadcrumbs component */\n breadcrumbs: PropTypes.node\n .description('breadcrumbs component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Breadcrumbs: PropTypes.func.description('breadcrumbs component'),\n /** PageHeaderTitle component */\n pageTitle: PropTypes.node\n .description('PageHeaderTitle component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n PageTitle: PropTypes.func.description('PageHeaderTitle component'),\n /** back arrow component */\n backarrow: PropTypes.node\n .description('back arrow component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Backarrow: PropTypes.func.description('back arrow component'),\n\n /** PageHeaderSummary component */\n summary: PropTypes.node\n .description('PageHeaderSummary component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Summary: PropTypes.func.description('PageHeaderSummary component'),\n /** toolbar component */\n toolbar: PropTypes.node\n .description('toolbar component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Toolbar: PropTypes.func.description('toolbar component'),\n\n /** PageHeaderMenu component */\n menu: PropTypes.node\n .description('PageHeaderMenu component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Menu: PropTypes.func.description('PageHeaderMenu component'),\n /** Border bottom below the page header */\n withBottomSeparator: PropTypes.bool.description('Border bottom below the page header'),\n};\n\nexport const defaultProps: DSPageHeaderT.DefaultProps = {\n containerProps: {},\n withBottomSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;
|
|
4
|
+
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSPageHeaderT {\n export interface DefaultProps {\n withBottomSeparator: boolean;\n containerProps: object;\n isSkeleton: boolean;\n }\n\n export interface OptionalProps {\n breadcrumbs?: JSX.Element;\n pageTitle?: JSX.Element;\n backarrow?: JSX.Element;\n summary?: JSX.Element;\n toolbar?: JSX.Element;\n menu?: JSX.Element;\n Breadcrumbs?: () => JSX.Element;\n PageTitle?: () => JSX.Element;\n Backarrow?: () => JSX.Element;\n Summary?: () => JSX.Element;\n Toolbar?: () => JSX.Element;\n Menu?: () => JSX.Element;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n}\n\nexport const PageHeaderPropTypes = {\n ...globalAttributesPropTypes,\n /** props injected to wrapper of page header */\n containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),\n /** breadcrumbs component */\n breadcrumbs: PropTypes.node\n .description('breadcrumbs component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Breadcrumbs: PropTypes.func.description('breadcrumbs component'),\n /** PageHeaderTitle component */\n pageTitle: PropTypes.node\n .description('PageHeaderTitle component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n PageTitle: PropTypes.func.description('PageHeaderTitle component'),\n /** back arrow component */\n backarrow: PropTypes.node\n .description('back arrow component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Backarrow: PropTypes.func.description('back arrow component'),\n\n /** PageHeaderSummary component */\n summary: PropTypes.node\n .description('PageHeaderSummary component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Summary: PropTypes.func.description('PageHeaderSummary component'),\n /** toolbar component */\n toolbar: PropTypes.node\n .description('toolbar component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Toolbar: PropTypes.func.description('toolbar component'),\n\n /** PageHeaderMenu component */\n menu: PropTypes.node\n .description('PageHeaderMenu component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Menu: PropTypes.func.description('PageHeaderMenu component'),\n /** Border bottom below the page header */\n withBottomSeparator: PropTypes.bool.description('Border bottom below the page header'),\n isSkeleton: PropTypes.bool.description('Loading state of the page header').defaultValue(false),\n};\n\nexport const defaultProps: DSPageHeaderT.DefaultProps = {\n containerProps: {},\n withBottomSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AA2B9C,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA,EAEH,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,0CAA0C;AAAA;AAAA,EAE1F,aAAa,kCAAU,KACpB,YAAY,uBAAuB,EACnC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,aAAa,kCAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE/D,WAAW,kCAAU,KAClB,YAAY,2BAA2B,EACvC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAEjE,WAAW,kCAAU,KAClB,YAAY,sBAAsB,EAClC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,kCAAU,KAAK,YAAY,sBAAsB;AAAA;AAAA,EAG5D,SAAS,kCAAU,KAChB,YAAY,6BAA6B,EACzC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,kCAAU,KAAK,YAAY,6BAA6B;AAAA;AAAA,EAEjE,SAAS,kCAAU,KAChB,YAAY,mBAAmB,EAC/B,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,kCAAU,KAAK,YAAY,mBAAmB;AAAA;AAAA,EAGvD,MAAM,kCAAU,KACb,YAAY,0BAA0B,EACtC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,MAAM,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE3D,qBAAqB,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACrF,YAAY,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,qBAAqB;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSPageHeaderSlots, DSPageHeaderName } from './exported-related/index.js';\n\ninterface StyledContainerProps {\n withBottomSeparator
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAoD;
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSPageHeaderSlots, DSPageHeaderName } from './exported-related/index.js';\n\ninterface StyledContainerProps {\n withBottomSeparator?: boolean;\n}\n\nexport const PageHeaderCustomRenderer = styled('div')`\n width: auto;\n color: ${({ theme }) => theme.colors.brand[800]};\n font-style: italic;\n font-size: 0.8rem;\n`;\n\nexport const Container = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.CONTAINER,\n})<StyledContainerProps>`\n width: 100%;\n margin-bottom: 8px;\n ${xStyledCommonProps}\n`;\n\nexport const ContainerWBorder = styled('div')<StyledContainerProps>`\n width: 100%;\n padding: 12px 0 8px 0;\n display: grid;\n align-items: center;\n height: 100%;\n ${({ withBottomSeparator, theme }) =>\n !withBottomSeparator ? '' : `border-bottom: solid 1px ${theme.colors.neutral[400]};`}\n`;\n\nexport const PageHeaderToolbarWrapper = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.TOOLBAR,\n})`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n & .em-ds-toolbar {\n height: auto;\n background: none;\n & > div {\n .em-ds-button {\n margin-left: ${({ theme }) => theme.space.xxs};\n }\n .em-ds-input-search {\n box-shadow: none;\n div {\n height: 100%;\n }\n }\n }\n }\n`;\n\nexport const PageHeaderMenu = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.MENU,\n})`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-left: ${({ theme }) => theme.space.xxxs};\n .em-ds-button--secondary {\n &:not(:hover) {\n border-color: transparent;\n }\n &:focus:after {\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n }\n }\n`;\n\nexport const PageHeaderBack = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.BACK,\n})`\n display: flex;\n align-items: center;\n fill: ${({ theme }) => theme.colors.brand[600]};\n cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAoD;AAM7C,MAAM,+BAA2B,yBAAO,KAAK;AAAA;AAAA,WAEzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKzC,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG;AAAA;AAGG,MAAM,uBAAmB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,EAAE,qBAAqB,MAAM,MAC9B,CAAC,sBAAsB,KAAK,4BAA4B,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7E,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUsB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AActC,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,UAGS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
-
import { compact } from "lodash";
|
|
6
5
|
import {
|
|
7
6
|
Container,
|
|
8
7
|
ContainerWBorder,
|
|
@@ -30,9 +29,15 @@ const DSPageHeaderV2 = (props) => {
|
|
|
30
29
|
globalAttributes,
|
|
31
30
|
xStyledProps
|
|
32
31
|
} = usePageHeader(props);
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
32
|
+
const { isSkeleton } = props;
|
|
33
|
+
const wrapperRow = ["auto", "1fr"];
|
|
34
|
+
const mainRow = ["1fr", "auto"];
|
|
35
|
+
const pageTitleRow = [
|
|
36
|
+
isSkeleton ? "2fr" : "auto",
|
|
37
|
+
currentMenu !== void 0 && "30px",
|
|
38
|
+
currentSummary !== void 0 && "auto",
|
|
39
|
+
"1fr"
|
|
40
|
+
].filter((col) => typeof col === "string");
|
|
36
41
|
return /* @__PURE__ */ jsx(
|
|
37
42
|
Container,
|
|
38
43
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/PageHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n Container,\n ContainerWBorder,\n PageHeaderCustomRenderer,\n PageHeaderToolbarWrapper,\n PageHeaderMenu,\n PageHeaderBack,\n} from './styled.js';\nimport { usePageHeader } from './config/usePageHeader.js';\nimport { PageHeaderTitle } from './components/PageHeaderTitle.js';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle.js';\nimport { PageHeaderSummary } from './components/PageHeaderSummary.js';\nimport type { DSPageHeaderT } from './react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSPageHeaderDataTestIds, DSPageHeaderName } from './exported-related/index.js';\n\nconst DSPageHeaderV2: React.ComponentType<DSPageHeaderT.Props> = (props) => {\n const {\n currentBackArrow,\n currentMenu,\n currentBreadcrumbs,\n currentSummary,\n currentToolbar,\n currentPageTitle,\n containerProps,\n withBottomSeparator,\n globalAttributes,\n xStyledProps,\n } = usePageHeader(props);\n\n const { isSkeleton } = props;\n const wrapperRow = ['auto', '1fr'];\n const mainRow = ['1fr', 'auto'];\n const pageTitleRow = [\n isSkeleton ? '2fr' : 'auto',\n currentMenu !== undefined && '30px',\n currentSummary !== undefined && 'auto',\n '1fr',\n ].filter((col) => typeof col === 'string') as string[];\n return (\n <Container\n {...containerProps}\n {...globalAttributes}\n {...xStyledProps}\n data-testid={DSPageHeaderDataTestIds.CONTAINER}\n >\n <ContainerWBorder withBottomSeparator={withBottomSeparator}>\n <Grid cols={wrapperRow}>\n <Grid>\n <PageHeaderBack>{currentBackArrow}</PageHeaderBack>\n </Grid>\n <Grid rows={['auto', 'auto']}>\n <Grid className=\"em-ds-page-header-v2-breadcrumb\">{currentBreadcrumbs}</Grid>\n <Grid cols={mainRow}>\n <Grid cols={pageTitleRow}>\n {currentPageTitle}\n {currentMenu && <PageHeaderMenu>{currentMenu}</PageHeaderMenu>}\n {currentSummary}\n <div />\n </Grid>\n <Grid>\n <PageHeaderToolbarWrapper>{currentToolbar}</PageHeaderToolbarWrapper>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n </ContainerWBorder>\n </Container>\n );\n};\n\nDSPageHeaderV2.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\nDSPageHeaderV2.defaultProps = defaultProps;\nDSPageHeaderV2.displayName = DSPageHeaderName;\nconst DSPageHeaderWithSchema = describe(DSPageHeaderV2);\n\nDSPageHeaderWithSchema.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\n\nexport {\n DSPageHeaderV2,\n PageHeaderTitle,\n PageHeaderEditableTitle,\n PageHeaderSummary,\n PageHeaderMenu,\n PageHeaderCustomRenderer,\n DSPageHeaderWithSchema,\n};\n\nexport default DSPageHeaderV2;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuDX,cAKE,YALF;AAnDZ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,yBAAyB,wBAAwB;AAE1D,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,KAAK;AAEvB,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,CAAC,QAAQ,KAAK;AACjC,QAAM,UAAU,CAAC,OAAO,MAAM;AAC9B,QAAM,eAAe;AAAA,IACnB,aAAa,QAAQ;AAAA,IACrB,gBAAgB,UAAa;AAAA,IAC7B,mBAAmB,UAAa;AAAA,IAChC;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,OAAO,QAAQ,QAAQ;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,eAAa,wBAAwB;AAAA,MAErC,8BAAC,oBAAiB,qBAChB,+BAAC,QAAK,MAAM,YACV;AAAA,4BAAC,QACC,8BAAC,kBAAgB,4BAAiB,GACpC;AAAA,QACA,qBAAC,QAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA,8BAAC,QAAK,WAAU,mCAAmC,8BAAmB;AAAA,UACtE,qBAAC,QAAK,MAAM,SACV;AAAA,iCAAC,QAAK,MAAM,cACT;AAAA;AAAA,cACA,eAAe,oBAAC,kBAAgB,uBAAY;AAAA,cAC5C;AAAA,cACD,oBAAC,SAAI;AAAA,eACP;AAAA,YACA,oBAAC,QACC,8BAAC,4BAA0B,0BAAe,GAC5C;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,yBAAyB,SAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
4
|
import {
|
|
5
5
|
useValidateTypescriptPropTypes,
|
|
@@ -7,6 +7,8 @@ import {
|
|
|
7
7
|
useGetGlobalAttributes,
|
|
8
8
|
useGetXstyledProps
|
|
9
9
|
} from "@elliemae/ds-props-helpers";
|
|
10
|
+
import { DSSkeleton } from "@elliemae/ds-skeleton";
|
|
11
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
10
12
|
import { PageHeaderPropTypes, defaultProps } from "../react-desc-prop-types.js";
|
|
11
13
|
import { DSPageHeaderName } from "../exported-related/index.js";
|
|
12
14
|
const usePageHeader = (props) => {
|
|
@@ -25,19 +27,68 @@ const usePageHeader = (props) => {
|
|
|
25
27
|
Backarrow,
|
|
26
28
|
breadcrumbs,
|
|
27
29
|
Breadcrumbs,
|
|
30
|
+
isSkeleton,
|
|
28
31
|
...rest
|
|
29
32
|
} = props;
|
|
30
33
|
const globalAttributes = useGetGlobalAttributes(propsWithDefaults);
|
|
31
34
|
const xStyledProps = useGetXstyledProps(propsWithDefaults);
|
|
32
|
-
const currentBackArrow = useMemo(() =>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
const currentBackArrow = useMemo(() => {
|
|
36
|
+
if (isSkeleton && (Backarrow || backarrow))
|
|
37
|
+
return /* @__PURE__ */ jsx(DSSkeleton, { marginRight: "xxs", variant: "rectangular", width: "2rem", height: "2rem" });
|
|
38
|
+
if (Backarrow)
|
|
39
|
+
return /* @__PURE__ */ jsx(Backarrow, {});
|
|
40
|
+
if (backarrow)
|
|
41
|
+
return backarrow;
|
|
42
|
+
return void 0;
|
|
43
|
+
}, [Backarrow, backarrow, isSkeleton]);
|
|
44
|
+
const currentMenu = useMemo(() => {
|
|
45
|
+
if (isSkeleton && (Menu || menu))
|
|
46
|
+
return /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "2rem", height: "2rem" });
|
|
47
|
+
if (Menu)
|
|
48
|
+
return /* @__PURE__ */ jsx(Menu, {});
|
|
49
|
+
if (menu)
|
|
50
|
+
return menu;
|
|
51
|
+
return void 0;
|
|
52
|
+
}, [Menu, menu, isSkeleton]);
|
|
53
|
+
const currentBreadcrumbs = useMemo(() => {
|
|
54
|
+
if (isSkeleton && (Breadcrumbs || breadcrumbs))
|
|
55
|
+
return /* @__PURE__ */ jsx(Grid, { cols: ["auto"], gutter: "xxxs", justifyContent: "flex-start", height: "24px", alignItems: "center", children: /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "4rem", height: "1rem" }) });
|
|
56
|
+
if (Breadcrumbs)
|
|
57
|
+
return /* @__PURE__ */ jsx(Breadcrumbs, {});
|
|
58
|
+
if (breadcrumbs)
|
|
59
|
+
return breadcrumbs;
|
|
60
|
+
return void 0;
|
|
61
|
+
}, [Breadcrumbs, breadcrumbs, isSkeleton]);
|
|
62
|
+
const currentSummary = useMemo(() => {
|
|
63
|
+
if (isSkeleton && (Summary || summary))
|
|
64
|
+
return /* @__PURE__ */ jsx(DSSkeleton, { marginLeft: "xxs", variant: "rectangular", width: "4rem", height: "2rem" });
|
|
65
|
+
if (Summary)
|
|
66
|
+
return /* @__PURE__ */ jsx(Summary, {});
|
|
67
|
+
if (summary)
|
|
68
|
+
return summary;
|
|
69
|
+
return void 0;
|
|
70
|
+
}, [Summary, summary, isSkeleton]);
|
|
71
|
+
const currentToolbar = useMemo(() => {
|
|
72
|
+
if (isSkeleton && (Toolbar || toolbar))
|
|
73
|
+
return /* @__PURE__ */ jsxs(Grid, { cols: ["repeat(2, auto)"], gutter: "xxxs", children: [
|
|
74
|
+
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" }),
|
|
75
|
+
/* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" })
|
|
76
|
+
] });
|
|
77
|
+
if (Toolbar)
|
|
78
|
+
return /* @__PURE__ */ jsx(Toolbar, {});
|
|
79
|
+
if (toolbar)
|
|
80
|
+
return toolbar;
|
|
81
|
+
return void 0;
|
|
82
|
+
}, [Toolbar, toolbar, isSkeleton]);
|
|
83
|
+
const currentPageTitle = useMemo(() => {
|
|
84
|
+
if (isSkeleton && (PageTitle || pageTitle))
|
|
85
|
+
return /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", maxWidth: "100%", height: "2rem" });
|
|
86
|
+
if (PageTitle)
|
|
87
|
+
return /* @__PURE__ */ jsx(PageTitle, {});
|
|
88
|
+
if (pageTitle)
|
|
89
|
+
return pageTitle;
|
|
90
|
+
return void 0;
|
|
91
|
+
}, [PageTitle, pageTitle, isSkeleton]);
|
|
41
92
|
return useMemo(
|
|
42
93
|
() => ({
|
|
43
94
|
propsWithDefaults,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/config/usePageHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { DSPageHeaderT } from '../react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSPageHeaderName } from '../exported-related/index.js';\n\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes, DSPageHeaderName);\n\n const {\n menu,\n Menu,\n pageTitle,\n PageTitle,\n toolbar,\n Toolbar,\n summary,\n Summary,\n backarrow,\n Backarrow,\n breadcrumbs,\n Breadcrumbs,\n ...rest\n } = props;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n const currentBackArrow = useMemo(() => backarrow
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSPageHeaderT } from '../react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSPageHeaderName } from '../exported-related/index.js';\n\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes, DSPageHeaderName);\n\n const {\n menu,\n Menu,\n pageTitle,\n PageTitle,\n toolbar,\n Toolbar,\n summary,\n Summary,\n backarrow,\n Backarrow,\n breadcrumbs,\n Breadcrumbs,\n isSkeleton,\n ...rest\n } = props;\n\n const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n const currentBackArrow = useMemo(() => {\n if (isSkeleton && (Backarrow || backarrow))\n return <DSSkeleton marginRight=\"xxs\" variant=\"rectangular\" width=\"2rem\" height=\"2rem\" />;\n if (Backarrow) return <Backarrow />;\n if (backarrow) return backarrow;\n return undefined;\n }, [Backarrow, backarrow, isSkeleton]);\n\n const currentMenu = useMemo(() => {\n if (isSkeleton && (Menu || menu)) return <DSSkeleton variant=\"rectangular\" width=\"2rem\" height=\"2rem\" />;\n if (Menu) return <Menu />;\n if (menu) return menu;\n return undefined;\n }, [Menu, menu, isSkeleton]);\n\n const currentBreadcrumbs = useMemo(() => {\n if (isSkeleton && (Breadcrumbs || breadcrumbs))\n return (\n <Grid cols={['auto']} gutter={'xxxs'} justifyContent=\"flex-start\" height=\"24px\" alignItems=\"center\">\n <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"1rem\" />\n </Grid>\n );\n if (Breadcrumbs) return <Breadcrumbs />;\n if (breadcrumbs) return breadcrumbs;\n return undefined;\n }, [Breadcrumbs, breadcrumbs, isSkeleton]);\n\n const currentSummary = useMemo(() => {\n if (isSkeleton && (Summary || summary))\n return <DSSkeleton marginLeft={'xxs'} variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />;\n if (Summary) return <Summary />;\n if (summary) return summary;\n return undefined;\n }, [Summary, summary, isSkeleton]);\n\n const currentToolbar = useMemo(() => {\n if (isSkeleton && (Toolbar || toolbar))\n return (\n <Grid cols={['repeat(2, auto)']} gutter={'xxxs'}>\n <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />\n <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />\n </Grid>\n );\n if (Toolbar) return <Toolbar />;\n if (toolbar) return toolbar;\n return undefined;\n }, [Toolbar, toolbar, isSkeleton]);\n\n const currentPageTitle = useMemo(() => {\n if (isSkeleton && (PageTitle || pageTitle))\n return <DSSkeleton variant=\"rectangular\" maxWidth=\"100%\" height=\"2rem\" />;\n\n if (PageTitle) return <PageTitle />;\n if (pageTitle) return pageTitle;\n return undefined;\n }, [PageTitle, pageTitle, isSkeleton]);\n\n return useMemo(\n () => ({\n propsWithDefaults,\n globalAttributes,\n xStyledProps,\n currentBackArrow,\n currentMenu,\n currentBreadcrumbs,\n currentSummary,\n currentToolbar,\n currentPageTitle,\n ...rest,\n }),\n [\n propsWithDefaults,\n currentBackArrow,\n currentBreadcrumbs,\n currentMenu,\n currentPageTitle,\n currentSummary,\n currentToolbar,\n globalAttributes,\n rest,\n xStyledProps,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwCV,cAoCL,YApCK;AAvCb,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,wBAAwB;AAE1B,MAAM,gBAAgB,CAAC,UAA+B;AAC3D,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,qBAAqB,gBAAgB;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,uBAAuB,iBAAiB;AACjE,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,eAAe,aAAa;AAC9B,aAAO,oBAAC,cAAW,aAAY,OAAM,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AACxF,QAAI;AAAW,aAAO,oBAAC,aAAU;AACjC,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,eAAe,QAAQ;AAAO,aAAO,oBAAC,cAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AACtG,QAAI;AAAM,aAAO,oBAAC,QAAK;AACvB,QAAI;AAAM,aAAO;AACjB,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,UAAU,CAAC;AAE3B,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,eAAe,eAAe;AAChC,aACE,oBAAC,QAAK,MAAM,CAAC,MAAM,GAAG,QAAQ,QAAQ,gBAAe,cAAa,QAAO,QAAO,YAAW,UACzF,8BAAC,cAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO,GAC/D;AAEJ,QAAI;AAAa,aAAO,oBAAC,eAAY;AACrC,QAAI;AAAa,aAAO;AACxB,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,UAAU,CAAC;AAEzC,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,eAAe,WAAW;AAC5B,aAAO,oBAAC,cAAW,YAAY,OAAO,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AACzF,QAAI;AAAS,aAAO,oBAAC,WAAQ;AAC7B,QAAI;AAAS,aAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,eAAe,WAAW;AAC5B,aACE,qBAAC,QAAK,MAAM,CAAC,iBAAiB,GAAG,QAAQ,QACvC;AAAA,4BAAC,cAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AAAA,QAC7D,oBAAC,cAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AAAA,SAC/D;AAEJ,QAAI;AAAS,aAAO,oBAAC,WAAQ;AAC7B,QAAI;AAAS,aAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,eAAe,aAAa;AAC9B,aAAO,oBAAC,cAAW,SAAQ,eAAc,UAAS,QAAO,QAAO,QAAO;AAEzE,QAAI;AAAW,aAAO,oBAAC,aAAU;AACjC,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,8 @@ const PageHeaderPropTypes = {
|
|
|
23
23
|
menu: PropTypes.node.description("PageHeaderMenu component").deprecated({ version: "Prop will be removed on 05/01/2022" }),
|
|
24
24
|
Menu: PropTypes.func.description("PageHeaderMenu component"),
|
|
25
25
|
/** Border bottom below the page header */
|
|
26
|
-
withBottomSeparator: PropTypes.bool.description("Border bottom below the page header")
|
|
26
|
+
withBottomSeparator: PropTypes.bool.description("Border bottom below the page header"),
|
|
27
|
+
isSkeleton: PropTypes.bool.description("Loading state of the page header").defaultValue(false)
|
|
27
28
|
};
|
|
28
29
|
const defaultProps = {
|
|
29
30
|
containerProps: {},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSPageHeaderT {\n export interface DefaultProps {\n withBottomSeparator: boolean;\n containerProps: object;\n }\n\n export interface OptionalProps {\n breadcrumbs?: JSX.Element;\n pageTitle?: JSX.Element;\n backarrow?: JSX.Element;\n summary?: JSX.Element;\n toolbar?: JSX.Element;\n menu?: JSX.Element;\n Breadcrumbs?: () => JSX.Element;\n PageTitle?: () => JSX.Element;\n Backarrow?: () => JSX.Element;\n Summary?: () => JSX.Element;\n Toolbar?: () => JSX.Element;\n Menu?: () => JSX.Element;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n}\n\nexport const PageHeaderPropTypes = {\n ...globalAttributesPropTypes,\n /** props injected to wrapper of page header */\n containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),\n /** breadcrumbs component */\n breadcrumbs: PropTypes.node\n .description('breadcrumbs component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Breadcrumbs: PropTypes.func.description('breadcrumbs component'),\n /** PageHeaderTitle component */\n pageTitle: PropTypes.node\n .description('PageHeaderTitle component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n PageTitle: PropTypes.func.description('PageHeaderTitle component'),\n /** back arrow component */\n backarrow: PropTypes.node\n .description('back arrow component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Backarrow: PropTypes.func.description('back arrow component'),\n\n /** PageHeaderSummary component */\n summary: PropTypes.node\n .description('PageHeaderSummary component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Summary: PropTypes.func.description('PageHeaderSummary component'),\n /** toolbar component */\n toolbar: PropTypes.node\n .description('toolbar component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Toolbar: PropTypes.func.description('toolbar component'),\n\n /** PageHeaderMenu component */\n menu: PropTypes.node\n .description('PageHeaderMenu component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Menu: PropTypes.func.description('PageHeaderMenu component'),\n /** Border bottom below the page header */\n withBottomSeparator: PropTypes.bool.description('Border bottom below the page header'),\n};\n\nexport const defaultProps: DSPageHeaderT.DefaultProps = {\n containerProps: {},\n withBottomSeparator: true,\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSPageHeaderT {\n export interface DefaultProps {\n withBottomSeparator: boolean;\n containerProps: object;\n isSkeleton: boolean;\n }\n\n export interface OptionalProps {\n breadcrumbs?: JSX.Element;\n pageTitle?: JSX.Element;\n backarrow?: JSX.Element;\n summary?: JSX.Element;\n toolbar?: JSX.Element;\n menu?: JSX.Element;\n Breadcrumbs?: () => JSX.Element;\n PageTitle?: () => JSX.Element;\n Backarrow?: () => JSX.Element;\n Summary?: () => JSX.Element;\n Toolbar?: () => JSX.Element;\n Menu?: () => JSX.Element;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n}\n\nexport const PageHeaderPropTypes = {\n ...globalAttributesPropTypes,\n /** props injected to wrapper of page header */\n containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),\n /** breadcrumbs component */\n breadcrumbs: PropTypes.node\n .description('breadcrumbs component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Breadcrumbs: PropTypes.func.description('breadcrumbs component'),\n /** PageHeaderTitle component */\n pageTitle: PropTypes.node\n .description('PageHeaderTitle component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n PageTitle: PropTypes.func.description('PageHeaderTitle component'),\n /** back arrow component */\n backarrow: PropTypes.node\n .description('back arrow component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Backarrow: PropTypes.func.description('back arrow component'),\n\n /** PageHeaderSummary component */\n summary: PropTypes.node\n .description('PageHeaderSummary component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Summary: PropTypes.func.description('PageHeaderSummary component'),\n /** toolbar component */\n toolbar: PropTypes.node\n .description('toolbar component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Toolbar: PropTypes.func.description('toolbar component'),\n\n /** PageHeaderMenu component */\n menu: PropTypes.node\n .description('PageHeaderMenu component')\n .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n Menu: PropTypes.func.description('PageHeaderMenu component'),\n /** Border bottom below the page header */\n withBottomSeparator: PropTypes.bool.description('Border bottom below the page header'),\n isSkeleton: PropTypes.bool.description('Loading state of the page header').defaultValue(false),\n};\n\nexport const defaultProps: DSPageHeaderT.DefaultProps = {\n containerProps: {},\n withBottomSeparator: true,\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AA2B9C,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA,EAEH,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,0CAA0C;AAAA;AAAA,EAE1F,aAAa,UAAU,KACpB,YAAY,uBAAuB,EACnC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,aAAa,UAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE/D,WAAW,UAAU,KAClB,YAAY,2BAA2B,EACvC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAEjE,WAAW,UAAU,KAClB,YAAY,sBAAsB,EAClC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,UAAU,KAAK,YAAY,sBAAsB;AAAA;AAAA,EAG5D,SAAS,UAAU,KAChB,YAAY,6BAA6B,EACzC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,UAAU,KAAK,YAAY,6BAA6B;AAAA;AAAA,EAEjE,SAAS,UAAU,KAChB,YAAY,mBAAmB,EAC/B,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,UAAU,KAAK,YAAY,mBAAmB;AAAA;AAAA,EAGvD,MAAM,UAAU,KACb,YAAY,0BAA0B,EACtC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,MAAM,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE3D,qBAAqB,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACrF,YAAY,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,qBAAqB;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSPageHeaderSlots, DSPageHeaderName } from './exported-related/index.js';\n\ninterface StyledContainerProps {\n withBottomSeparator
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,mBAAmB,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSPageHeaderSlots, DSPageHeaderName } from './exported-related/index.js';\n\ninterface StyledContainerProps {\n withBottomSeparator?: boolean;\n}\n\nexport const PageHeaderCustomRenderer = styled('div')`\n width: auto;\n color: ${({ theme }) => theme.colors.brand[800]};\n font-style: italic;\n font-size: 0.8rem;\n`;\n\nexport const Container = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.CONTAINER,\n})<StyledContainerProps>`\n width: 100%;\n margin-bottom: 8px;\n ${xStyledCommonProps}\n`;\n\nexport const ContainerWBorder = styled('div')<StyledContainerProps>`\n width: 100%;\n padding: 12px 0 8px 0;\n display: grid;\n align-items: center;\n height: 100%;\n ${({ withBottomSeparator, theme }) =>\n !withBottomSeparator ? '' : `border-bottom: solid 1px ${theme.colors.neutral[400]};`}\n`;\n\nexport const PageHeaderToolbarWrapper = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.TOOLBAR,\n})`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n & .em-ds-toolbar {\n height: auto;\n background: none;\n & > div {\n .em-ds-button {\n margin-left: ${({ theme }) => theme.space.xxs};\n }\n .em-ds-input-search {\n box-shadow: none;\n div {\n height: 100%;\n }\n }\n }\n }\n`;\n\nexport const PageHeaderMenu = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.MENU,\n})`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-left: ${({ theme }) => theme.space.xxxs};\n .em-ds-button--secondary {\n &:not(:hover) {\n border-color: transparent;\n }\n &:focus:after {\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n }\n }\n`;\n\nexport const PageHeaderBack = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.BACK,\n})`\n display: flex;\n align-items: center;\n fill: ${({ theme }) => theme.colors.brand[600]};\n cursor: pointer;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,mBAAmB,wBAAwB;AAM7C,MAAM,2BAA2B,OAAO,KAAK;AAAA;AAAA,WAEzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG;AAAA;AAGG,MAAM,mBAAmB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,EAAE,qBAAqB,MAAM,MAC9B,CAAC,sBAAsB,KAAK,4BAA4B,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7E,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUsB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AActC,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,UAGS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { DSPageHeaderT } from '../react-desc-prop-types.js';
|
|
3
2
|
export declare const usePageHeader: (props: DSPageHeaderT.Props) => {
|
|
4
3
|
withBottomSeparator?: boolean | undefined;
|
|
@@ -6,6 +5,7 @@ export declare const usePageHeader: (props: DSPageHeaderT.Props) => {
|
|
|
6
5
|
propsWithDefaults: {
|
|
7
6
|
withBottomSeparator: boolean;
|
|
8
7
|
containerProps: object;
|
|
8
|
+
isSkeleton: boolean;
|
|
9
9
|
};
|
|
10
10
|
globalAttributes: import("@elliemae/ds-props-helpers").GlobalAttributesT<Element>;
|
|
11
11
|
xStyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
export declare namespace DSPageHeaderT {
|
|
3
2
|
interface DefaultProps {
|
|
4
3
|
withBottomSeparator: boolean;
|
|
5
4
|
containerProps: object;
|
|
5
|
+
isSkeleton: boolean;
|
|
6
6
|
}
|
|
7
7
|
interface OptionalProps {
|
|
8
8
|
breadcrumbs?: JSX.Element;
|
|
@@ -44,6 +44,7 @@ export declare const PageHeaderPropTypes: {
|
|
|
44
44
|
Menu: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
45
45
|
/** Border bottom below the page header */
|
|
46
46
|
withBottomSeparator: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
47
|
+
isSkeleton: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
47
48
|
'aria-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
48
49
|
'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
49
50
|
'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface StyledContainerProps {
|
|
2
|
+
withBottomSeparator?: boolean;
|
|
3
|
+
}
|
|
4
|
+
export declare const PageHeaderCustomRenderer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
5
|
+
export declare const Container: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledContainerProps & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
6
|
+
export declare const ContainerWBorder: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledContainerProps & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
7
|
+
export declare const PageHeaderToolbarWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
8
|
+
export declare const PageHeaderMenu: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
9
|
+
export declare const PageHeaderBack: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
10
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-page-header",
|
|
3
|
-
"version": "3.21.
|
|
3
|
+
"version": "3.21.2-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Page Header",
|
|
6
6
|
"files": [
|
|
@@ -104,19 +104,20 @@
|
|
|
104
104
|
},
|
|
105
105
|
"dependencies": {
|
|
106
106
|
"prop-types": "~15.8.1",
|
|
107
|
-
"@elliemae/ds-breadcrumb": "3.21.
|
|
108
|
-
"@elliemae/ds-button": "3.21.
|
|
109
|
-
"@elliemae/ds-classnames": "3.21.
|
|
110
|
-
"@elliemae/ds-dropdownmenu": "3.21.
|
|
111
|
-
"@elliemae/ds-form": "3.21.
|
|
112
|
-
"@elliemae/ds-form-input-text": "3.21.
|
|
113
|
-
"@elliemae/ds-grid": "3.21.
|
|
114
|
-
"@elliemae/ds-icon": "3.21.
|
|
115
|
-
"@elliemae/ds-icons": "3.21.
|
|
116
|
-
"@elliemae/ds-props-helpers": "3.21.
|
|
117
|
-
"@elliemae/ds-
|
|
118
|
-
"@elliemae/ds-
|
|
119
|
-
"@elliemae/ds-
|
|
107
|
+
"@elliemae/ds-breadcrumb": "3.21.2-rc.10",
|
|
108
|
+
"@elliemae/ds-button": "3.21.2-rc.10",
|
|
109
|
+
"@elliemae/ds-classnames": "3.21.2-rc.10",
|
|
110
|
+
"@elliemae/ds-dropdownmenu": "3.21.2-rc.10",
|
|
111
|
+
"@elliemae/ds-form": "3.21.2-rc.10",
|
|
112
|
+
"@elliemae/ds-form-input-text": "3.21.2-rc.10",
|
|
113
|
+
"@elliemae/ds-grid": "3.21.2-rc.10",
|
|
114
|
+
"@elliemae/ds-icon": "3.21.2-rc.10",
|
|
115
|
+
"@elliemae/ds-icons": "3.21.2-rc.10",
|
|
116
|
+
"@elliemae/ds-props-helpers": "3.21.2-rc.10",
|
|
117
|
+
"@elliemae/ds-skeleton": "3.21.2-rc.10",
|
|
118
|
+
"@elliemae/ds-system": "3.21.2-rc.10",
|
|
119
|
+
"@elliemae/ds-truncated-tooltip-text": "3.21.2-rc.10",
|
|
120
|
+
"@elliemae/ds-utilities": "3.21.2-rc.10"
|
|
120
121
|
},
|
|
121
122
|
"devDependencies": {
|
|
122
123
|
"@testing-library/react": "~12.1.3",
|