@elliemae/ds-page-header 3.12.0-rc.2 → 3.12.0-rc.20
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/v1/DSPageHeader.js +5 -4
- package/dist/cjs/v1/DSPageHeader.js.map +1 -1
- package/dist/cjs/v1/DropdownTitle.js +9 -12
- package/dist/cjs/v1/DropdownTitle.js.map +1 -1
- package/dist/cjs/v1/EditableTitle.js +5 -10
- package/dist/cjs/v1/EditableTitle.js.map +1 -1
- package/dist/cjs/v1/PageHeaderImpl.js +40 -53
- package/dist/cjs/v1/PageHeaderImpl.js.map +1 -1
- package/dist/cjs/v1/Title.js +1 -3
- package/dist/cjs/v1/Title.js.map +1 -1
- package/dist/cjs/v2/PageHeader.js +25 -50
- package/dist/cjs/v2/PageHeader.js.map +2 -2
- package/dist/cjs/v2/components/PageHeaderEditableTitle.js +23 -24
- package/dist/cjs/v2/components/PageHeaderEditableTitle.js.map +1 -1
- package/dist/cjs/v2/components/PageHeaderSummary.js +5 -17
- package/dist/cjs/v2/components/PageHeaderSummary.js.map +1 -1
- package/dist/cjs/v2/components/PageHeaderTitle.js +4 -14
- package/dist/cjs/v2/components/PageHeaderTitle.js.map +1 -1
- package/dist/cjs/v2/config/usePageHeader.js +2 -1
- package/dist/cjs/v2/config/usePageHeader.js.map +2 -2
- package/dist/cjs/v2/exported-related/theming.js +1 -1
- package/dist/cjs/v2/exported-related/theming.js.map +1 -1
- package/dist/esm/v1/DSPageHeader.js +5 -4
- package/dist/esm/v1/DSPageHeader.js.map +1 -1
- package/dist/esm/v1/DropdownTitle.js +9 -12
- package/dist/esm/v1/DropdownTitle.js.map +1 -1
- package/dist/esm/v1/EditableTitle.js +5 -10
- package/dist/esm/v1/EditableTitle.js.map +1 -1
- package/dist/esm/v1/PageHeaderImpl.js +40 -53
- package/dist/esm/v1/PageHeaderImpl.js.map +1 -1
- package/dist/esm/v1/Title.js +1 -3
- package/dist/esm/v1/Title.js.map +1 -1
- package/dist/esm/v2/PageHeader.js +26 -51
- package/dist/esm/v2/PageHeader.js.map +2 -2
- package/dist/esm/v2/components/PageHeaderEditableTitle.js +23 -24
- package/dist/esm/v2/components/PageHeaderEditableTitle.js.map +1 -1
- package/dist/esm/v2/components/PageHeaderSummary.js +5 -17
- package/dist/esm/v2/components/PageHeaderSummary.js.map +1 -1
- package/dist/esm/v2/components/PageHeaderTitle.js +4 -14
- package/dist/esm/v2/components/PageHeaderTitle.js.map +1 -1
- package/dist/esm/v2/config/usePageHeader.js +2 -1
- package/dist/esm/v2/config/usePageHeader.js.map +2 -2
- package/dist/esm/v2/exported-related/theming.js +1 -1
- package/dist/esm/v2/exported-related/theming.js.map +1 -1
- package/package.json +14 -14
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/v2/components/PageHeaderTitle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { RequiredMark } from '@elliemae/ds-form';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../exported-related';\nconst PageHeaderTitleWrapper = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.HEADER_TITLE,\n})`\n display: grid;\n font-size: ${({ theme }) => theme.fontSizes.title[800]};\n color: ${({ theme }) => theme.colors.neutral['700']};\n line-height: normal;\n font-weight: 400;\n margin-right: 0.61538rem;\n\n & .em-ds-form-required-mark {\n position: absolute;\n top: 0;\n right: 0;\n }\n`;\nconst PageHeaderTitle = ({ children = '', showMarker = false, ...rest }) => (\n <PageHeaderTitleWrapper {...rest} data-testid={DSPageHeaderDataTestIds.HEADER_TITLE}>\n <TooltipTextProvider>\n <DSTruncatedTooltipText value={children} />\n </TooltipTextProvider>\n {showMarker && <RequiredMark required />}\n </PageHeaderTitleWrapper>\n);\n\nconst props = {\n /** page header title string */\n children: PropTypes.string.description('Page header title string'),\n /** show required mark */\n showMarker: PropTypes.bool.description('show required mark'),\n};\n\nPageHeaderTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderTitle.displayName = 'PageHeaderTitle';\nconst DSPageHeaderTitleWithSchema = describe(PageHeaderTitle);\n\nDSPageHeaderTitleWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { PageHeaderTitle, DSPageHeaderTitleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBrB;AAvBF,uBAAuB;AACvB,0BAAoC;AACpC,uCAA4D;AAC5D,qBAA6B;AAC7B,8BAA6E;AAC7E,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA,WACzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/C,MAAM,kBAAkB,CAAC,EAAE,WAAW,IAAI,aAAa,UAAU,KAAK,MACpE,6CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBrB;AAvBF,uBAAuB;AACvB,0BAAoC;AACpC,uCAA4D;AAC5D,qBAA6B;AAC7B,8BAA6E;AAC7E,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA,WACzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/C,MAAM,kBAAkB,CAAC,EAAE,WAAW,IAAI,aAAa,UAAU,KAAK,MACpE,6CAAC,0BAAwB,GAAG,MAAM,eAAa,gDAAwB,cACrE;AAAA,8CAAC,wDACC,sDAAC,2DAAuB,OAAO,UAAU,GAC3C;AAAA,EACC,cAAc,4CAAC,+BAAa,UAAQ,MAAC;AAAA,GACxC;AAGF,MAAM,QAAQ;AAAA,EAEZ,UAAU,8BAAU,OAAO,YAAY,0BAA0B;AAAA,EAEjE,YAAY,8BAAU,KAAK,YAAY,oBAAoB;AAC7D;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,8BAAS,eAAe;AAE5D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,9 +32,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
32
32
|
var import_react = require("react");
|
|
33
33
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
34
|
var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
35
|
+
var import_exported_related = require("../exported-related");
|
|
35
36
|
const usePageHeader = (props) => {
|
|
36
37
|
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
37
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.PageHeaderPropTypes);
|
|
38
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.PageHeaderPropTypes, import_exported_related.DSPageHeaderName);
|
|
38
39
|
const {
|
|
39
40
|
menu,
|
|
40
41
|
Menu,
|
|
@@ -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-utilities';\n\nimport type { DSPageHeaderT } from '../react-desc-prop-types';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types';\n\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes);\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 ?? (Backarrow ? <Backarrow /> : undefined), [Backarrow, backarrow]);\n\n const currentMenu = useMemo(() => menu ?? (Menu ? <Menu /> : undefined), [Menu, menu]);\n\n const currentBreadcrumbs = useMemo(\n () => breadcrumbs ?? (Breadcrumbs ? <Breadcrumbs /> : undefined),\n [Breadcrumbs, breadcrumbs],\n );\n\n const currentSummary = useMemo(() => summary ?? (Summary ? <Summary /> : undefined), [Summary, summary]);\n\n const currentToolbar = useMemo(() => toolbar ?? (Toolbar ? <Toolbar /> : undefined), [Toolbar, toolbar]);\n\n const currentPageTitle = useMemo(() => pageTitle ?? (PageTitle ? <PageTitle /> : undefined), [PageTitle, pageTitle]);\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": ";;;;;;;;;;;;;;;;;;;;;;;;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-utilities';\n\nimport type { DSPageHeaderT } from '../react-desc-prop-types';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types';\nimport { DSPageHeaderName } from '../exported-related';\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 ?? (Backarrow ? <Backarrow /> : undefined), [Backarrow, backarrow]);\n\n const currentMenu = useMemo(() => menu ?? (Menu ? <Menu /> : undefined), [Menu, menu]);\n\n const currentBreadcrumbs = useMemo(\n () => breadcrumbs ?? (Breadcrumbs ? <Breadcrumbs /> : undefined),\n [Breadcrumbs, breadcrumbs],\n );\n\n const currentSummary = useMemo(() => summary ?? (Summary ? <Summary /> : undefined), [Summary, summary]);\n\n const currentToolbar = useMemo(() => toolbar ?? (Toolbar ? <Toolbar /> : undefined), [Toolbar, toolbar]);\n\n const currentPageTitle = useMemo(() => pageTitle ?? (PageTitle ? <PageTitle /> : undefined), [PageTitle, pageTitle]);\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoC4C;AAnCnE,mBAAwB;AACxB,0BAKO;AAGP,mCAAkD;AAClD,8BAAiC;AAE1B,MAAM,gBAAgB,CAAC,UAA+B;AAC3D,QAAM,wBAAoB,kDAA6B,OAAO,yCAAY;AAC1E,0DAA+B,mBAAmB,kDAAqB,wCAAgB;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,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAmB,4CAAuB,iBAAiB;AACjE,QAAM,mBAAe,wCAAmB,iBAAiB;AAEzD,QAAM,uBAAmB,sBAAQ,MAAM,cAAc,YAAY,4CAAC,aAAU,IAAK,SAAY,CAAC,WAAW,SAAS,CAAC;AAEnH,QAAM,kBAAc,sBAAQ,MAAM,SAAS,OAAO,4CAAC,QAAK,IAAK,SAAY,CAAC,MAAM,IAAI,CAAC;AAErF,QAAM,yBAAqB;AAAA,IACzB,MAAM,gBAAgB,cAAc,4CAAC,eAAY,IAAK;AAAA,IACtD,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,QAAM,qBAAiB,sBAAQ,MAAM,YAAY,UAAU,4CAAC,WAAQ,IAAK,SAAY,CAAC,SAAS,OAAO,CAAC;AAEvG,QAAM,qBAAiB,sBAAQ,MAAM,YAAY,UAAU,4CAAC,WAAQ,IAAK,SAAY,CAAC,SAAS,OAAO,CAAC;AAEvG,QAAM,uBAAmB,sBAAQ,MAAM,cAAc,YAAY,4CAAC,aAAU,IAAK,SAAY,CAAC,WAAW,SAAS,CAAC;AAEnH,aAAO;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
|
}
|
|
@@ -29,7 +29,7 @@ __export(theming_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(theming_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
const DSPageHeaderName = "
|
|
32
|
+
const DSPageHeaderName = "DSPageHeader";
|
|
33
33
|
const DSPageHeaderSlots = {
|
|
34
34
|
CONTAINER: "root",
|
|
35
35
|
HEADER_TITLE: "header-title",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/v2/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSPageHeaderName = '
|
|
4
|
+
"sourcesContent": ["export const DSPageHeaderName = 'DSPageHeader';\n\nexport const DSPageHeaderSlots = {\n CONTAINER: 'root',\n HEADER_TITLE: 'header-title',\n TOOLBAR: 'toolbar',\n MENU: 'menu',\n SUMMARY: 'summary',\n BACK: 'back',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,8 +20,9 @@ const DSPageHeader = ({
|
|
|
20
20
|
zIndex = 2,
|
|
21
21
|
optionsMinWidth = void 0,
|
|
22
22
|
...otherProps
|
|
23
|
-
}) => /* @__PURE__ */ jsx(TooltipTextProvider, {
|
|
24
|
-
|
|
23
|
+
}) => /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsx(
|
|
24
|
+
PageHeaderImpl,
|
|
25
|
+
{
|
|
25
26
|
containerProps,
|
|
26
27
|
editable,
|
|
27
28
|
editing,
|
|
@@ -38,8 +39,8 @@ const DSPageHeader = ({
|
|
|
38
39
|
withBottomSeparator,
|
|
39
40
|
zIndex,
|
|
40
41
|
...otherProps
|
|
41
|
-
}
|
|
42
|
-
});
|
|
42
|
+
}
|
|
43
|
+
) });
|
|
43
44
|
const props = {
|
|
44
45
|
version: PropTypes.oneOf([1, 2]).description("Component version"),
|
|
45
46
|
containerProps: PropTypes.object.description("props injected to page header wrapper node"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSPageHeader.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport PageHeaderImpl from './PageHeaderImpl';\n\nconst DSPageHeader = ({\n containerProps = {},\n renderToolbar = undefined,\n withBottomSeparator = true,\n title = '',\n titleOptions = undefined,\n onSelectOption = () => null,\n subtitle = '',\n optionsSelection = {},\n onGoToPreviousPage = () => null,\n previousPage,\n editable = false,\n editing = undefined,\n titleInputProps = {},\n zIndex = 2,\n optionsMinWidth = undefined,\n ...otherProps\n}) => (\n <TooltipTextProvider>\n <PageHeaderImpl\n containerProps={containerProps}\n editable={editable}\n editing={editing}\n onGoToPreviousPage={onGoToPreviousPage}\n onSelectOption={onSelectOption}\n optionsMinWidth={optionsMinWidth}\n optionsSelection={optionsSelection}\n previousPage={previousPage}\n renderToolbar={renderToolbar}\n subtitle={subtitle}\n title={title}\n titleInputProps={titleInputProps}\n titleOptions={titleOptions}\n withBottomSeparator={withBottomSeparator}\n zIndex={zIndex}\n {...otherProps}\n />\n </TooltipTextProvider>\n);\n\nconst props = {\n /* Component version */\n version: PropTypes.oneOf([1, 2]).description('Component version'),\n /* props injected to page header wrapper node */\n containerProps: PropTypes.object.description('props injected to page header wrapper node'),\n /* Function that returns the toolbar to the right of the page header */\n renderToolbar: PropTypes.func.description('Function that returns the toolbar to the right of the page header'),\n /* Whether to show a separator at the bottom of the header */\n withBottomSeparator: PropTypes.bool.description('Whether to show a separator at the bottom of the header'),\n /* The page header title */\n title: PropTypes.string.description('The page header title'),\n /* The title dropdown options */\n titleOptions: PropTypes.arrayOf(PropTypes.object).description('The title dropdown options'),\n /* Handler when a user selects an item in the dropdown menu */\n onSelectOption: PropTypes.func.description('Handler when a user selects an item in the dropdown menu'),\n /* Description text below the title */\n subtitle: PropTypes.string.description('Description text below the title'),\n /* Selection state for the title dropdown */\n optionsSelection: PropTypes.object.description('Selection state for the title dropdown'),\n /* Whether the title is editable or not */\n editable: PropTypes.bool.description('Whether the title is editable or not'),\n /* Activates/Deactivates the editing state in the title */\n editing: PropTypes.bool.description('Activates/Deactivates the editing state in the title'),\n /* Props passed to the input for editing the title */\n titleInputProps: PropTypes.object.description('Props passed to the input for editing the title'),\n /* Enables navigation to previous page with back-arrow */\n previousPage: PropTypes.object.description('Enables navigation to previous page with back-arrow'),\n /* Callback to handle navigation to previous page */\n onGoToPreviousPage: PropTypes.func.description('Callback to handle navigation to previous page'),\n /* z-index to use for the DropdownMenu */\n zIndex: PropTypes.number.description('z-index to use for the DropdownMenu'),\n /** min width for options dropdown menu */\n optionsMinWidth: PropTypes.number.description('min width for options dropdown menu'),\n};\n\nDSPageHeader.propTypes = props;\nDSPageHeader.displayName = 'DSPageHeader';\nconst DSPageHeaderV1WithSchema = describe(DSPageHeader).deprecated('use DSPageHeaderV2');\nDSPageHeaderV1WithSchema.propTypes = props;\n\nexport { DSPageHeader, DSPageHeaderV1WithSchema };\nexport default DSPageHeader;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACwBnB;AAvBJ,SAAS,UAAU,iBAAiB;AACpC,SAAS,2BAA2B;AACpC,OAAO,oBAAoB;AAE3B,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,mBAAmB,CAAC;AAAA,EACpB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,kBAAkB;AAAA,KACf;AACL,MACE,oBAAC;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwBnB;AAvBJ,SAAS,UAAU,iBAAiB;AACpC,SAAS,2BAA2B;AACpC,OAAO,oBAAoB;AAE3B,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,mBAAmB,CAAC;AAAA,EACpB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,kBAAkB;AAAA,KACf;AACL,MACE,oBAAC,uBACC;AAAA,EAAC;AAAA;AAAA,IACC;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;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,GACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,SAAS,UAAU,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,mBAAmB;AAAA,EAEhE,gBAAgB,UAAU,OAAO,YAAY,4CAA4C;AAAA,EAEzF,eAAe,UAAU,KAAK,YAAY,mEAAmE;AAAA,EAE7G,qBAAqB,UAAU,KAAK,YAAY,yDAAyD;AAAA,EAEzG,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAE3D,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,4BAA4B;AAAA,EAE1F,gBAAgB,UAAU,KAAK,YAAY,0DAA0D;AAAA,EAErG,UAAU,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAEzE,kBAAkB,UAAU,OAAO,YAAY,wCAAwC;AAAA,EAEvF,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAE3E,SAAS,UAAU,KAAK,YAAY,sDAAsD;AAAA,EAE1F,iBAAiB,UAAU,OAAO,YAAY,iDAAiD;AAAA,EAE/F,cAAc,UAAU,OAAO,YAAY,qDAAqD;AAAA,EAEhG,oBAAoB,UAAU,KAAK,YAAY,gDAAgD;AAAA,EAE/F,QAAQ,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAE1E,iBAAiB,UAAU,OAAO,YAAY,qCAAqC;AACrF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,2BAA2B,SAAS,YAAY,EAAE,WAAW,oBAAoB;AACvF,yBAAyB,YAAY;AAGrC,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,23 +4,20 @@ import DSDropdownMenu from "@elliemae/ds-dropdownmenu";
|
|
|
4
4
|
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
5
5
|
import DSButton from "@elliemae/ds-button";
|
|
6
6
|
import TitleWrapper from "./TitleWrapper";
|
|
7
|
-
const DropdownTitle = ({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) => /* @__PURE__ */ jsxs(TitleWrapper, {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
const DropdownTitle = ({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) => /* @__PURE__ */ jsxs(TitleWrapper, { children: [
|
|
8
|
+
titleComponent,
|
|
9
|
+
/* @__PURE__ */ jsx(
|
|
10
|
+
DSDropdownMenu,
|
|
11
|
+
{
|
|
11
12
|
minWidth: optionsMinWidth,
|
|
12
13
|
onSelectMenuItem: onSelectOption,
|
|
13
14
|
options,
|
|
14
15
|
selection,
|
|
15
|
-
triggerComponent: /* @__PURE__ */ jsx(DSButton, {
|
|
16
|
-
buttonType: "text",
|
|
17
|
-
"data-testid": "page-header-dropdown-trigger-component",
|
|
18
|
-
icon: /* @__PURE__ */ jsx(ChevronSmallDown, {})
|
|
19
|
-
}),
|
|
16
|
+
triggerComponent: /* @__PURE__ */ jsx(DSButton, { buttonType: "text", "data-testid": "page-header-dropdown-trigger-component", icon: /* @__PURE__ */ jsx(ChevronSmallDown, {}) }),
|
|
20
17
|
zIndex
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
});
|
|
18
|
+
}
|
|
19
|
+
)
|
|
20
|
+
] });
|
|
24
21
|
DropdownTitle.propTypes = {};
|
|
25
22
|
var DropdownTitle_default = DropdownTitle;
|
|
26
23
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DropdownTitle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport TitleWrapper from './TitleWrapper';\n\nconst DropdownTitle = ({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) => (\n <TitleWrapper>\n {titleComponent}\n <DSDropdownMenu\n minWidth={optionsMinWidth}\n onSelectMenuItem={onSelectOption}\n options={options}\n selection={selection}\n triggerComponent={\n <DSButton buttonType=\"text\" data-testid=\"page-header-dropdown-trigger-component\" icon={<ChevronSmallDown />} />\n }\n zIndex={zIndex}\n />\n </TitleWrapper>\n);\n\nDropdownTitle.propTypes = {};\n\nexport default DropdownTitle;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACOrB,SAQ6F,KAR7F;AANF,OAAO,oBAAoB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,cAAc;AACrB,OAAO,kBAAkB;AAEzB,MAAM,gBAAgB,CAAC,EAAE,gBAAgB,gBAAgB,SAAS,iBAAiB,WAAW,OAAO,MACnG,qBAAC;AAAA
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACOrB,SAQ6F,KAR7F;AANF,OAAO,oBAAoB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,cAAc;AACrB,OAAO,kBAAkB;AAEzB,MAAM,gBAAgB,CAAC,EAAE,gBAAgB,gBAAgB,SAAS,iBAAiB,WAAW,OAAO,MACnG,qBAAC,gBACE;AAAA;AAAA,EACD;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,kBACE,oBAAC,YAAS,YAAW,QAAO,eAAY,0CAAyC,MAAM,oBAAC,oBAAiB,GAAI;AAAA,MAE/G;AAAA;AAAA,EACF;AAAA,GACF;AAGF,cAAc,YAAY,CAAC;AAE3B,IAAO,wBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,22 +13,17 @@ const EditableTitle = ({ children: value, editing: editingProp, titleInputProps
|
|
|
13
13
|
const [hovered, setHovered] = useState(false);
|
|
14
14
|
const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
|
|
15
15
|
const titleRef = useRef(null);
|
|
16
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
17
|
-
|
|
16
|
+
return /* @__PURE__ */ jsx(Fragment, { children: hovered || editing ? /* @__PURE__ */ jsx(
|
|
17
|
+
EditableTitleComponent,
|
|
18
|
+
{
|
|
18
19
|
...titleInputProps,
|
|
19
20
|
onBlur: runAll(() => setEditing(false), titleInputProps.onBlur),
|
|
20
21
|
onChange: runAll((e) => setTitleValue(e.target.value), titleInputProps.onChange),
|
|
21
22
|
onFocus: runAll(() => setEditing(true), titleInputProps.onFocus),
|
|
22
23
|
onMouseOut: runAll(() => setHovered(false), titleInputProps.onMouseOut),
|
|
23
24
|
value: titleValue
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
onMouseEnter: () => setHovered(true),
|
|
27
|
-
children: /* @__PURE__ */ jsx(Title, {
|
|
28
|
-
children: titleValue
|
|
29
|
-
})
|
|
30
|
-
})
|
|
31
|
-
});
|
|
25
|
+
}
|
|
26
|
+
) : /* @__PURE__ */ jsx("div", { ref: titleRef, onMouseEnter: () => setHovered(true), children: /* @__PURE__ */ jsx(Title, { children: titleValue }) }) });
|
|
32
27
|
};
|
|
33
28
|
EditableTitle.propTypes = {
|
|
34
29
|
children: PropTypes.string,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/EditableTitle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { useDerivedStateFromProps, runAll } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport DSInput from '@elliemae/ds-form/Input';\nimport Title from './Title';\n\nconst blockName = 'page-header';\n\nconst EditableTitleComponent = aggregatedClasses(DSInput)(`${blockName}-title`, 'editable-title');\n\nconst EditableTitle = ({ children: value, editing: editingProp, titleInputProps }) => {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n return (\n <>\n {hovered || editing ? (\n <EditableTitleComponent\n {...titleInputProps}\n onBlur={runAll(() => setEditing(false), titleInputProps.onBlur)}\n onChange={runAll((e) => setTitleValue(e.target.value), titleInputProps.onChange)}\n onFocus={runAll(() => setEditing(true), titleInputProps.onFocus)}\n onMouseOut={runAll(() => setHovered(false), titleInputProps.onMouseOut)}\n value={titleValue}\n />\n ) : (\n <div ref={titleRef} onMouseEnter={() => setHovered(true)}>\n <Title>{titleValue}</Title>\n </div>\n )}\n </>\n );\n};\n\nEditableTitle.propTypes = {\n /** The title text */\n children: PropTypes.string,\n /** Whether the title is editing or not */\n editing: PropTypes.bool,\n};\n\nexport default EditableTitle;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACiBnB,mBAEI,WAFJ;AAjBJ,SAAgB,QAAQ,gBAAgB;AACxC,SAAS,0BAA0B,cAAc;AACjD,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,OAAO,aAAa;AACpB,OAAO,WAAW;AAElB,MAAM,YAAY;AAElB,MAAM,yBAAyB,kBAAkB,OAAO,EAAE,GAAG,mBAAmB,gBAAgB;AAEhG,MAAM,gBAAgB,CAAC,EAAE,UAAU,OAAO,SAAS,aAAa,gBAAgB,MAAM;AACpF,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,SACE
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiBnB,mBAEI,WAFJ;AAjBJ,SAAgB,QAAQ,gBAAgB;AACxC,SAAS,0BAA0B,cAAc;AACjD,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,OAAO,aAAa;AACpB,OAAO,WAAW;AAElB,MAAM,YAAY;AAElB,MAAM,yBAAyB,kBAAkB,OAAO,EAAE,GAAG,mBAAmB,gBAAgB;AAEhG,MAAM,gBAAgB,CAAC,EAAE,UAAU,OAAO,SAAS,aAAa,gBAAgB,MAAM;AACpF,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,SACE,gCACG,qBAAW,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,OAAO,MAAM,WAAW,KAAK,GAAG,gBAAgB,MAAM;AAAA,MAC9D,UAAU,OAAO,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK,GAAG,gBAAgB,QAAQ;AAAA,MAC/E,SAAS,OAAO,MAAM,WAAW,IAAI,GAAG,gBAAgB,OAAO;AAAA,MAC/D,YAAY,OAAO,MAAM,WAAW,KAAK,GAAG,gBAAgB,UAAU;AAAA,MACtE,OAAO;AAAA;AAAA,EACT,IAEA,oBAAC,SAAI,KAAK,UAAU,cAAc,MAAM,WAAW,IAAI,GACrD,8BAAC,SAAO,sBAAW,GACrB,GAEJ;AAEJ;AAEA,cAAc,YAAY;AAAA,EAExB,UAAU,UAAU;AAAA,EAEpB,SAAS,UAAU;AACrB;AAEA,IAAO,wBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,28 +34,21 @@ const HeaderTitle = ({
|
|
|
34
34
|
titleInputProps,
|
|
35
35
|
zIndex
|
|
36
36
|
}) => {
|
|
37
|
-
const titleComponent = editable ? /* @__PURE__ */ jsx(EditableTitle, {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
children: title
|
|
43
|
-
});
|
|
44
|
-
return /* @__PURE__ */ jsxs(PageHeaderTitle, {
|
|
45
|
-
children: [
|
|
46
|
-
options.length ? /* @__PURE__ */ jsx(DropdownTitle, {
|
|
37
|
+
const titleComponent = editable ? /* @__PURE__ */ jsx(EditableTitle, { editing, titleInputProps, children: title }) : /* @__PURE__ */ jsx(Title, { children: title });
|
|
38
|
+
return /* @__PURE__ */ jsxs(PageHeaderTitle, { children: [
|
|
39
|
+
options.length ? /* @__PURE__ */ jsx(
|
|
40
|
+
DropdownTitle,
|
|
41
|
+
{
|
|
47
42
|
onSelectOption,
|
|
48
43
|
options,
|
|
49
44
|
optionsMinWidth,
|
|
50
45
|
selection,
|
|
51
46
|
titleComponent,
|
|
52
47
|
zIndex
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
]
|
|
58
|
-
});
|
|
48
|
+
}
|
|
49
|
+
) : titleComponent,
|
|
50
|
+
subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle })
|
|
51
|
+
] });
|
|
59
52
|
};
|
|
60
53
|
const PageHeaderImpl = ({
|
|
61
54
|
containerProps,
|
|
@@ -77,36 +70,32 @@ const PageHeaderImpl = ({
|
|
|
77
70
|
zIndex
|
|
78
71
|
}) => {
|
|
79
72
|
const hasBreadcrumbs = !!breadcrumbs.length;
|
|
80
|
-
return /* @__PURE__ */ jsxs(
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
onClick: onGoToPreviousPage,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
children: breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsx(DSBreadcrumb.Item, {
|
|
97
|
-
...breadcrumb
|
|
98
|
-
}, breadcrumb.label))
|
|
99
|
-
}),
|
|
100
|
-
previousPage && /* @__PURE__ */ jsx(PageHeaderBreadcrumb, {
|
|
101
|
-
children: /* @__PURE__ */ jsx(DSBreadcrumb.Item, {
|
|
73
|
+
return /* @__PURE__ */ jsxs(
|
|
74
|
+
PageHeaderContainer,
|
|
75
|
+
{
|
|
76
|
+
...containerProps,
|
|
77
|
+
className,
|
|
78
|
+
classProps: {
|
|
79
|
+
withBottomSeparator,
|
|
80
|
+
subtitle
|
|
81
|
+
},
|
|
82
|
+
children: [
|
|
83
|
+
previousPage && /* @__PURE__ */ jsx(BackArrow, { "data-testid": "back-arrow", onClick: onGoToPreviousPage, size: DSIconSizes.M }),
|
|
84
|
+
/* @__PURE__ */ jsxs(PageHeaderMainSection, { children: [
|
|
85
|
+
hasBreadcrumbs && /* @__PURE__ */ jsx(PageHeaderBreadcrumb, { children: breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsx(DSBreadcrumb.Item, { ...breadcrumb }, breadcrumb.label)) }),
|
|
86
|
+
previousPage && /* @__PURE__ */ jsx(PageHeaderBreadcrumb, { children: /* @__PURE__ */ jsx(
|
|
87
|
+
DSBreadcrumb.Item,
|
|
88
|
+
{
|
|
102
89
|
label: previousPage.title,
|
|
103
90
|
onClick: previousPage.onClick,
|
|
104
91
|
...previousPage
|
|
105
|
-
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
92
|
+
},
|
|
93
|
+
previousPage.id
|
|
94
|
+
) }),
|
|
95
|
+
/* @__PURE__ */ jsxs(PageHeaderTitleSection, { children: [
|
|
96
|
+
/* @__PURE__ */ jsx(
|
|
97
|
+
HeaderTitle,
|
|
98
|
+
{
|
|
110
99
|
editable,
|
|
111
100
|
editing,
|
|
112
101
|
onSelectOption,
|
|
@@ -117,16 +106,14 @@ const PageHeaderImpl = ({
|
|
|
117
106
|
title,
|
|
118
107
|
titleInputProps,
|
|
119
108
|
zIndex
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
]
|
|
129
|
-
});
|
|
109
|
+
}
|
|
110
|
+
),
|
|
111
|
+
isFunction(renderToolbar) && /* @__PURE__ */ jsx(PageHeaderToolbar, { children: renderToolbar() })
|
|
112
|
+
] })
|
|
113
|
+
] })
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
);
|
|
130
117
|
};
|
|
131
118
|
var PageHeaderImpl_default = PageHeaderImpl;
|
|
132
119
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/PageHeaderImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport DSBreadcrumb from '@elliemae/ds-breadcrumb';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport EditableTitle from './EditableTitle';\nimport Title from './Title';\nimport DropdownTitle from './DropdownTitle';\n\nconst blockName = 'page-header';\n\nconst PageHeaderContainer = aggregatedClasses('div')(blockName, null, ({ withBottomSeparator, subtitle }) => ({\n 'with-bottom-separator': withBottomSeparator,\n 'with-subtitle': subtitle,\n}));\n\nconst PageHeaderMainSection = aggregatedClasses('div')(`${blockName}-main-section`);\nconst PageHeaderTitleSection = aggregatedClasses('div')(`${blockName}-title-section`);\nconst PageHeaderToolbar = aggregatedClasses('div')(`${blockName}-toolbar`, null, () => ({\n 'ie-flex-basis-auto': true,\n}));\nconst PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)(`${blockName}-breadcrumb`);\n\nconst PageHeaderTitle = aggregatedClasses('div')(`${blockName}-title`);\nconst Subtitle = aggregatedClasses('div')(`${blockName}-title`, 'subtitle');\nconst BackArrow = aggregatedClasses(ChevronLeft)(`${blockName}-backarrow`);\n\nconst HeaderTitle = ({\n title = '',\n options = [],\n optionsMinWidth,\n onSelectOption = () => null,\n selection,\n subtitle = '',\n editable = false,\n editing = false,\n titleInputProps,\n zIndex,\n}) => {\n const titleComponent = editable ? (\n <EditableTitle editing={editing} titleInputProps={titleInputProps}>\n {title}\n </EditableTitle>\n ) : (\n <Title>{title}</Title>\n );\n\n return (\n <PageHeaderTitle>\n {options.length ? (\n <DropdownTitle\n onSelectOption={onSelectOption}\n options={options}\n optionsMinWidth={optionsMinWidth}\n selection={selection}\n titleComponent={titleComponent}\n zIndex={zIndex}\n />\n ) : (\n titleComponent\n )}\n {subtitle && <Subtitle>{subtitle}</Subtitle>}\n </PageHeaderTitle>\n );\n};\n\nconst PageHeaderImpl = ({\n containerProps,\n className,\n title,\n titleOptions,\n renderToolbar,\n breadcrumbs = [],\n previousPage,\n onGoToPreviousPage = () => null,\n subtitle = '',\n withBottomSeparator,\n onSelectOption,\n optionsSelection,\n optionsMinWidth,\n editable = false,\n titleInputProps,\n editing = undefined,\n zIndex,\n}) => {\n const hasBreadcrumbs = !!breadcrumbs.length;\n\n return (\n <PageHeaderContainer\n {...containerProps}\n className={className}\n classProps={{\n withBottomSeparator,\n subtitle,\n }}\n >\n {previousPage && <BackArrow data-testid=\"back-arrow\" onClick={onGoToPreviousPage} size={DSIconSizes.M} />}\n <PageHeaderMainSection>\n {hasBreadcrumbs && (\n <PageHeaderBreadcrumb>\n {breadcrumbs.map((breadcrumb) => (\n <DSBreadcrumb.Item key={breadcrumb.label} {...breadcrumb} />\n ))}\n </PageHeaderBreadcrumb>\n )}\n {previousPage && (\n <PageHeaderBreadcrumb>\n <DSBreadcrumb.Item\n key={previousPage.id}\n label={previousPage.title}\n onClick={previousPage.onClick}\n {...previousPage}\n />\n </PageHeaderBreadcrumb>\n )}\n <PageHeaderTitleSection>\n <HeaderTitle\n editable={editable}\n editing={editing}\n onSelectOption={onSelectOption}\n options={titleOptions}\n optionsMinWidth={optionsMinWidth}\n selection={optionsSelection}\n subtitle={subtitle}\n title={title}\n titleInputProps={titleInputProps}\n zIndex={zIndex}\n />\n {isFunction(renderToolbar) && <PageHeaderToolbar>{renderToolbar()}</PageHeaderToolbar>}\n </PageHeaderTitleSection>\n </PageHeaderMainSection>\n </PageHeaderContainer>\n );\n};\n\nexport default PageHeaderImpl;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyCnB,cAQA,YARA;AAxCJ,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,OAAO,kBAAkB;AACzB,SAAS,mBAAmB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,WAAW;AAClB,OAAO,mBAAmB;AAE1B,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,qBAAqB,SAAS,OAAO;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AACnB,EAAE;AAEF,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,GAAG,wBAAwB;AAClF,MAAM,yBAAyB,kBAAkB,KAAK,EAAE,GAAG,yBAAyB;AACpF,MAAM,oBAAoB,kBAAkB,KAAK,EAAE,GAAG,qBAAqB,MAAM,OAAO;AAAA,EACtF,sBAAsB;AACxB,EAAE;AACF,MAAM,uBAAuB,kBAAkB,YAAY,EAAE,GAAG,sBAAsB;AAEtF,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,GAAG,iBAAiB;AACrE,MAAM,WAAW,kBAAkB,KAAK,EAAE,GAAG,mBAAmB,UAAU;AAC1E,MAAM,YAAY,kBAAkB,WAAW,EAAE,GAAG,qBAAqB;AAEzE,MAAM,cAAc,CAAC;AAAA,EACnB,QAAQ;AAAA,EACR,UAAU,CAAC;AAAA,EACX;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,WACrB,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyCnB,cAQA,YARA;AAxCJ,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,OAAO,kBAAkB;AACzB,SAAS,mBAAmB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,WAAW;AAClB,OAAO,mBAAmB;AAE1B,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,qBAAqB,SAAS,OAAO;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AACnB,EAAE;AAEF,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,GAAG,wBAAwB;AAClF,MAAM,yBAAyB,kBAAkB,KAAK,EAAE,GAAG,yBAAyB;AACpF,MAAM,oBAAoB,kBAAkB,KAAK,EAAE,GAAG,qBAAqB,MAAM,OAAO;AAAA,EACtF,sBAAsB;AACxB,EAAE;AACF,MAAM,uBAAuB,kBAAkB,YAAY,EAAE,GAAG,sBAAsB;AAEtF,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,GAAG,iBAAiB;AACrE,MAAM,WAAW,kBAAkB,KAAK,EAAE,GAAG,mBAAmB,UAAU;AAC1E,MAAM,YAAY,kBAAkB,WAAW,EAAE,GAAG,qBAAqB;AAEzE,MAAM,cAAc,CAAC;AAAA,EACnB,QAAQ;AAAA,EACR,UAAU,CAAC;AAAA,EACX;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AACF,MAAM;AACJ,QAAM,iBAAiB,WACrB,oBAAC,iBAAc,SAAkB,iBAC9B,iBACH,IAEA,oBAAC,SAAO,iBAAM;AAGhB,SACE,qBAAC,mBACE;AAAA,YAAQ,SACP;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IAEA;AAAA,IAED,YAAY,oBAAC,YAAU,oBAAS;AAAA,KACnC;AAEJ;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,qBAAqB,MAAM;AAAA,EAC3B,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AACF,MAAM;AACJ,QAAM,iBAAiB,CAAC,CAAC,YAAY;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,QACV;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,wBAAgB,oBAAC,aAAU,eAAY,cAAa,SAAS,oBAAoB,MAAM,YAAY,GAAG;AAAA,QACvG,qBAAC,yBACE;AAAA,4BACC,oBAAC,wBACE,sBAAY,IAAI,CAAC,eAChB,oBAAC,aAAa,MAAb,EAA0C,GAAG,cAAtB,WAAW,KAAuB,CAC3D,GACH;AAAA,UAED,gBACC,oBAAC,wBACC;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cAEC,OAAO,aAAa;AAAA,cACpB,SAAS,aAAa;AAAA,cACrB,GAAG;AAAA;AAAA,YAHC,aAAa;AAAA,UAIpB,GACF;AAAA,UAEF,qBAAC,0BACC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,SAAS;AAAA,gBACT;AAAA,gBACA,WAAW;AAAA,gBACX;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YACC,WAAW,aAAa,KAAK,oBAAC,qBAAmB,wBAAc,GAAE;AAAA,aACpE;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v1/Title.js
CHANGED
|
@@ -4,9 +4,7 @@ import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
|
4
4
|
import DSTruncatedTooltipText from "@elliemae/ds-truncated-tooltip-text";
|
|
5
5
|
const blockName = "page-header";
|
|
6
6
|
const TitleWrapper = aggregatedClasses(DSTruncatedTooltipText)(`${blockName}-title`, "title");
|
|
7
|
-
const Title = ({ children }) => /* @__PURE__ */ jsx(TitleWrapper, {
|
|
8
|
-
value: children
|
|
9
|
-
});
|
|
7
|
+
const Title = ({ children }) => /* @__PURE__ */ jsx(TitleWrapper, { value: children });
|
|
10
8
|
var Title_default = Title;
|
|
11
9
|
export {
|
|
12
10
|
Title_default as default
|
package/dist/esm/v1/Title.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/Title.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';\n\nconst blockName = 'page-header';\nconst TitleWrapper = aggregatedClasses(DSTruncatedTooltipText)(`${blockName}-title`, 'title');\nconst Title = ({ children }) => <TitleWrapper value={children} />;\n\nexport default Title;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACMS;AALhC,SAAS,yBAAyB;AAClC,OAAO,4BAA4B;AAEnC,MAAM,YAAY;AAClB,MAAM,eAAe,kBAAkB,sBAAsB,EAAE,GAAG,mBAAmB,OAAO;AAC5F,MAAM,QAAQ,CAAC,EAAE,SAAS,MAAM,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACMS;AALhC,SAAS,yBAAyB;AAClC,OAAO,4BAA4B;AAEnC,MAAM,YAAY;AAClB,MAAM,eAAe,kBAAkB,sBAAsB,EAAE,GAAG,mBAAmB,OAAO;AAC5F,MAAM,QAAQ,CAAC,EAAE,SAAS,MAAM,oBAAC,gBAAa,OAAO,UAAU;AAE/D,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,7 @@ import { PageHeaderTitle } from "./components/PageHeaderTitle";
|
|
|
16
16
|
import { PageHeaderEditableTitle } from "./components/PageHeaderEditableTitle";
|
|
17
17
|
import { PageHeaderSummary } from "./components/PageHeaderSummary";
|
|
18
18
|
import { PageHeaderPropTypes, defaultProps } from "./react-desc-prop-types";
|
|
19
|
-
import { DSPageHeaderDataTestIds } from "./exported-related";
|
|
19
|
+
import { DSPageHeaderDataTestIds, DSPageHeaderName } from "./exported-related";
|
|
20
20
|
const DSPageHeaderV2 = (props) => {
|
|
21
21
|
const {
|
|
22
22
|
currentBackArrow,
|
|
@@ -33,59 +33,34 @@ const DSPageHeaderV2 = (props) => {
|
|
|
33
33
|
const wrapperRow = ["auto", 1];
|
|
34
34
|
const mainRow = compact([1, "auto"]);
|
|
35
35
|
const pageTitleRow = compact(["auto", currentMenu && "30px", currentSummary && "auto", 1]);
|
|
36
|
-
return /* @__PURE__ */ jsx(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children: /* @__PURE__ */ jsxs(Grid, {
|
|
44
|
-
|
|
45
|
-
children: [
|
|
46
|
-
/* @__PURE__ */ jsx(Grid, {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
children: [
|
|
61
|
-
/* @__PURE__ */ jsxs(Grid, {
|
|
62
|
-
cols: pageTitleRow,
|
|
63
|
-
children: [
|
|
64
|
-
currentPageTitle,
|
|
65
|
-
currentMenu && /* @__PURE__ */ jsx(PageHeaderMenu, {
|
|
66
|
-
children: currentMenu
|
|
67
|
-
}),
|
|
68
|
-
currentSummary,
|
|
69
|
-
/* @__PURE__ */ jsx("div", {})
|
|
70
|
-
]
|
|
71
|
-
}),
|
|
72
|
-
/* @__PURE__ */ jsx(Grid, {
|
|
73
|
-
children: /* @__PURE__ */ jsx(PageHeaderToolbarWrapper, {
|
|
74
|
-
children: currentToolbar
|
|
75
|
-
})
|
|
76
|
-
})
|
|
77
|
-
]
|
|
78
|
-
})
|
|
79
|
-
]
|
|
80
|
-
})
|
|
81
|
-
]
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
});
|
|
36
|
+
return /* @__PURE__ */ jsx(
|
|
37
|
+
Container,
|
|
38
|
+
{
|
|
39
|
+
...containerProps,
|
|
40
|
+
...globalAttributes,
|
|
41
|
+
...xStyledProps,
|
|
42
|
+
"data-testid": DSPageHeaderDataTestIds.CONTAINER,
|
|
43
|
+
children: /* @__PURE__ */ jsx(ContainerWBorder, { withBottomSeparator, children: /* @__PURE__ */ jsxs(Grid, { cols: wrapperRow, children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(PageHeaderBack, { children: currentBackArrow }) }),
|
|
45
|
+
/* @__PURE__ */ jsxs(Grid, { rows: ["auto", "auto"], children: [
|
|
46
|
+
/* @__PURE__ */ jsx(Grid, { className: "em-ds-page-header-v2-breadcrumb", children: currentBreadcrumbs }),
|
|
47
|
+
/* @__PURE__ */ jsxs(Grid, { cols: mainRow, children: [
|
|
48
|
+
/* @__PURE__ */ jsxs(Grid, { cols: pageTitleRow, children: [
|
|
49
|
+
currentPageTitle,
|
|
50
|
+
currentMenu && /* @__PURE__ */ jsx(PageHeaderMenu, { children: currentMenu }),
|
|
51
|
+
currentSummary,
|
|
52
|
+
/* @__PURE__ */ jsx("div", {})
|
|
53
|
+
] }),
|
|
54
|
+
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(PageHeaderToolbarWrapper, { children: currentToolbar }) })
|
|
55
|
+
] })
|
|
56
|
+
] })
|
|
57
|
+
] }) })
|
|
58
|
+
}
|
|
59
|
+
);
|
|
85
60
|
};
|
|
86
61
|
DSPageHeaderV2.propTypes = PageHeaderPropTypes;
|
|
87
62
|
DSPageHeaderV2.defaultProps = defaultProps;
|
|
88
|
-
DSPageHeaderV2.displayName =
|
|
63
|
+
DSPageHeaderV2.displayName = DSPageHeaderName;
|
|
89
64
|
const DSPageHeaderWithSchema = describe(DSPageHeaderV2);
|
|
90
65
|
DSPageHeaderWithSchema.propTypes = PageHeaderPropTypes;
|
|
91
66
|
var PageHeader_default = DSPageHeaderV2;
|
|
@@ -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-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { compact } from 'lodash';\nimport {\n Container,\n ContainerWBorder,\n PageHeaderCustomRenderer,\n PageHeaderToolbarWrapper,\n PageHeaderMenu,\n PageHeaderBack,\n} from './styled';\nimport { usePageHeader } from './config/usePageHeader';\nimport { PageHeaderTitle } from './components/PageHeaderTitle';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle';\nimport { PageHeaderSummary } from './components/PageHeaderSummary';\nimport type { DSPageHeaderT } from './react-desc-prop-types';\nimport { PageHeaderPropTypes, defaultProps } from './react-desc-prop-types';\nimport { DSPageHeaderDataTestIds } from './exported-related';\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 wrapperRow = ['auto', 1];\n const mainRow = compact([1, 'auto']);\n const pageTitleRow = compact(['auto', currentMenu && '30px', currentSummary && 'auto', 1]);\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 =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkDX,cAKE,YALF;AA9CZ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB;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
|
|
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-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { compact } from 'lodash';\nimport {\n Container,\n ContainerWBorder,\n PageHeaderCustomRenderer,\n PageHeaderToolbarWrapper,\n PageHeaderMenu,\n PageHeaderBack,\n} from './styled';\nimport { usePageHeader } from './config/usePageHeader';\nimport { PageHeaderTitle } from './components/PageHeaderTitle';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle';\nimport { PageHeaderSummary } from './components/PageHeaderSummary';\nimport type { DSPageHeaderT } from './react-desc-prop-types';\nimport { PageHeaderPropTypes, defaultProps } from './react-desc-prop-types';\nimport { DSPageHeaderDataTestIds, DSPageHeaderName } from './exported-related';\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 wrapperRow = ['auto', 1];\n const mainRow = compact([1, 'auto']);\n const pageTitleRow = compact(['auto', currentMenu && '30px', currentSummary && 'auto', 1]);\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;ACkDX,cAKE,YALF;AA9CZ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB;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,aAAa,CAAC,QAAQ,CAAC;AAC7B,QAAM,UAAU,QAAQ,CAAC,GAAG,MAAM,CAAC;AACnC,QAAM,eAAe,QAAQ,CAAC,QAAQ,eAAe,QAAQ,kBAAkB,QAAQ,CAAC,CAAC;AACzF,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
|
}
|
|
@@ -62,30 +62,29 @@ const PageHeaderEditableTitle = ({
|
|
|
62
62
|
onChange: handleOnChange,
|
|
63
63
|
onBlur: handleOnBlur
|
|
64
64
|
});
|
|
65
|
-
return /* @__PURE__ */ jsxs(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
});
|
|
65
|
+
return /* @__PURE__ */ jsxs(
|
|
66
|
+
EditableContainer,
|
|
67
|
+
{
|
|
68
|
+
className: hovered || editing ? "editable-title-component" : "",
|
|
69
|
+
onMouseEnter: () => setHovered(true),
|
|
70
|
+
onMouseLeave: () => setHovered(false),
|
|
71
|
+
"data-testid": DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE,
|
|
72
|
+
children: [
|
|
73
|
+
(hovered || editing) && /* @__PURE__ */ jsx(
|
|
74
|
+
DSInputText,
|
|
75
|
+
{
|
|
76
|
+
onChange: handleOnChange,
|
|
77
|
+
...rest,
|
|
78
|
+
...globals,
|
|
79
|
+
placeholder: "",
|
|
80
|
+
style: { width: width + 10, minWidth: "260px", maxWidth: "100%" },
|
|
81
|
+
value: titleValue
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ jsx("div", { ref: titleRef, style: { width: "fit-content" }, children: /* @__PURE__ */ jsx(PageHeaderTitle, { showMarker: showMarker && !hovered && !editing, children: titleValue }) })
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
);
|
|
89
88
|
};
|
|
90
89
|
const props = {
|
|
91
90
|
...globalAttributesPropTypes,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/components/PageHeaderEditableTitle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport {\n PropTypes,\n describe,\n useDerivedStateFromProps,\n useMeasure,\n useGetGlobalAttributes,\n globalAttributesPropTypes,\n} from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle';\nimport { DSPageHeaderDataTestIds } from '../exported-related';\n\nconst EditableContainer = styled('div')`\n height: 32px;\n position: relative;\n overflow: hidden;\n &.editable-title-component {\n position: relative;\n left: -7px;\n top: -1px;\n margin-left: -2px;\n margin-right: -9px;\n & .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER} {\n height: 32px;\n }\n & .${DSInputTextName}-${DSInputTextSlots.INPUT} {\n font-size: ${({ theme }) => theme.fontSizes.title[800]};\n line-height: normal;\n color: ${({ theme }) => theme.colors.neutral['700']};\n }\n }\n`;\n\nexport const PageHeaderEditableTitle = ({\n children: value,\n editing: editingProp = false,\n showMarker = false,\n ...rest\n}) => {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n const { width } = useMeasure(titleRef);\n\n const handleOnChange: React.FormEventHandler<HTMLInputElement> = useCallback((e) => {\n setTitleValue(e.target.value);\n }, []);\n\n const handleOnFocus: React.FocusEventHandler = useCallback(() => {\n setEditing(true);\n }, [setEditing]);\n\n const handleOnBlur: React.FocusEventHandler = useCallback(() => {\n setEditing(false);\n }, [setEditing]);\n\n const handleOnMouseOut: React.MouseEventHandler = useCallback(() => {\n setHovered(false);\n }, []);\n\n const globals = useGetGlobalAttributes(rest, {\n onFocus: handleOnFocus,\n onMouseOut: handleOnMouseOut,\n onChange: handleOnChange,\n onBlur: handleOnBlur,\n });\n\n return (\n <EditableContainer\n className={hovered || editing ? 'editable-title-component' : ''}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n data-testid={DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE}\n >\n {(hovered || editing) && (\n <DSInputText\n onChange={handleOnChange}\n {...rest}\n {...globals}\n placeholder=\"\"\n style={{ width: width + 10, minWidth: '260px', maxWidth: '100%' }}\n value={titleValue}\n />\n )}\n <div ref={titleRef} style={{ width: 'fit-content' }}>\n <PageHeaderTitle showMarker={showMarker && !hovered && !editing}>{titleValue}</PageHeaderTitle>\n </div>\n </EditableContainer>\n );\n};\n\nconst props = {\n ...globalAttributesPropTypes,\n /** The title text */\n children: PropTypes.string.description('The title text'),\n /** Whether the title is editing or not */\n editing: PropTypes.bool.description('Whether the title is editing or not'),\n /** Show error marker */\n showMarker: PropTypes.bool.description('Show error marker'),\n};\n\nPageHeaderEditableTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACwEnB,SAOI,KAPJ;AAvEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAExC,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,mBAAmB,iBAAiB;AAAA;AAAA;AAAA,SAGpC,mBAAmB,iBAAiB;AAAA,mBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA,eAEzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK5C,MAAM,0BAA0B,CAAC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS,cAAc;AAAA,EACvB,aAAa;AAAA,KACV;AACL,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,IAAI,WAAW,QAAQ;AAErC,QAAM,iBAA2D,YAAY,CAAC,MAAM;AAClF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,YAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAwC,YAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAA4C,YAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,uBAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwEnB,SAOI,KAPJ;AAvEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAExC,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,mBAAmB,iBAAiB;AAAA;AAAA;AAAA,SAGpC,mBAAmB,iBAAiB;AAAA,mBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA,eAEzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK5C,MAAM,0BAA0B,CAAC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS,cAAc;AAAA,EACvB,aAAa;AAAA,KACV;AACL,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,IAAI,WAAW,QAAQ;AAErC,QAAM,iBAA2D,YAAY,CAAC,MAAM;AAClF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,YAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAwC,YAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAA4C,YAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,uBAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,MAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,MACpC,eAAa,wBAAwB;AAAA,MAEnC;AAAA,oBAAW,YACX;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACT,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,aAAY;AAAA,YACZ,OAAO,EAAE,OAAO,QAAQ,IAAI,UAAU,SAAS,UAAU,OAAO;AAAA,YAChE,OAAO;AAAA;AAAA,QACT;AAAA,QAEF,oBAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,8BAAC,mBAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA,EAEH,UAAU,UAAU,OAAO,YAAY,gBAAgB;AAAA,EAEvD,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAEzE,YAAY,UAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,sCAAsC,SAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|