@elliemae/ds-page-header 3.12.0-rc.2 → 3.12.0-rc.4
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 +13 -13
|
@@ -51,8 +51,9 @@ const DSPageHeader = ({
|
|
|
51
51
|
zIndex = 2,
|
|
52
52
|
optionsMinWidth = void 0,
|
|
53
53
|
...otherProps
|
|
54
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, {
|
|
55
|
-
|
|
54
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
import_PageHeaderImpl.default,
|
|
56
|
+
{
|
|
56
57
|
containerProps,
|
|
57
58
|
editable,
|
|
58
59
|
editing,
|
|
@@ -69,8 +70,8 @@ const DSPageHeader = ({
|
|
|
69
70
|
withBottomSeparator,
|
|
70
71
|
zIndex,
|
|
71
72
|
...otherProps
|
|
72
|
-
}
|
|
73
|
-
});
|
|
73
|
+
}
|
|
74
|
+
) });
|
|
74
75
|
const props = {
|
|
75
76
|
version: import_ds_utilities.PropTypes.oneOf([1, 2]).description("Component version"),
|
|
76
77
|
containerProps: import_ds_utilities.PropTypes.object.description("props injected to page header wrapper node"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/DSPageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAvBJ,0BAAoC;AACpC,uCAAoC;AACpC,4BAA2B;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,4CAAC;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAvBJ,0BAAoC;AACpC,uCAAoC;AACpC,4BAA2B;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,4CAAC,wDACC;AAAA,EAAC,sBAAAA;AAAA,EAAA;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,8BAAU,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,mBAAmB;AAAA,EAEhE,gBAAgB,8BAAU,OAAO,YAAY,4CAA4C;AAAA,EAEzF,eAAe,8BAAU,KAAK,YAAY,mEAAmE;AAAA,EAE7G,qBAAqB,8BAAU,KAAK,YAAY,yDAAyD;AAAA,EAEzG,OAAO,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EAE3D,cAAc,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,4BAA4B;AAAA,EAE1F,gBAAgB,8BAAU,KAAK,YAAY,0DAA0D;AAAA,EAErG,UAAU,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAEzE,kBAAkB,8BAAU,OAAO,YAAY,wCAAwC;AAAA,EAEvF,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAE3E,SAAS,8BAAU,KAAK,YAAY,sDAAsD;AAAA,EAE1F,iBAAiB,8BAAU,OAAO,YAAY,iDAAiD;AAAA,EAE/F,cAAc,8BAAU,OAAO,YAAY,qDAAqD;AAAA,EAEhG,oBAAoB,8BAAU,KAAK,YAAY,gDAAgD;AAAA,EAE/F,QAAQ,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAE1E,iBAAiB,8BAAU,OAAO,YAAY,qCAAqC;AACrF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY,EAAE,WAAW,oBAAoB;AACvF,yBAAyB,YAAY;AAGrC,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["PageHeaderImpl"]
|
|
7
7
|
}
|
|
@@ -33,23 +33,20 @@ var import_ds_dropdownmenu = __toESM(require("@elliemae/ds-dropdownmenu"));
|
|
|
33
33
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
34
34
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
35
35
|
var import_TitleWrapper = __toESM(require("./TitleWrapper"));
|
|
36
|
-
const DropdownTitle = ({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TitleWrapper.default, {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
const DropdownTitle = ({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TitleWrapper.default, { children: [
|
|
37
|
+
titleComponent,
|
|
38
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
39
|
+
import_ds_dropdownmenu.default,
|
|
40
|
+
{
|
|
40
41
|
minWidth: optionsMinWidth,
|
|
41
42
|
onSelectMenuItem: onSelectOption,
|
|
42
43
|
options,
|
|
43
44
|
selection,
|
|
44
|
-
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.default, {
|
|
45
|
-
buttonType: "text",
|
|
46
|
-
"data-testid": "page-header-dropdown-trigger-component",
|
|
47
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {})
|
|
48
|
-
}),
|
|
45
|
+
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.default, { buttonType: "text", "data-testid": "page-header-dropdown-trigger-component", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {}) }),
|
|
49
46
|
zIndex
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
});
|
|
47
|
+
}
|
|
48
|
+
)
|
|
49
|
+
] });
|
|
53
50
|
DropdownTitle.propTypes = {};
|
|
54
51
|
var DropdownTitle_default = DropdownTitle;
|
|
55
52
|
//# sourceMappingURL=DropdownTitle.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/DropdownTitle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOrB;AANF,6BAA2B;AAC3B,sBAAiC;AACjC,uBAAqB;AACrB,0BAAyB;AAEzB,MAAM,gBAAgB,CAAC,EAAE,gBAAgB,gBAAgB,SAAS,iBAAiB,WAAW,OAAO,MACnG,6CAAC,oBAAAA,SAAA
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOrB;AANF,6BAA2B;AAC3B,sBAAiC;AACjC,uBAAqB;AACrB,0BAAyB;AAEzB,MAAM,gBAAgB,CAAC,EAAE,gBAAgB,gBAAgB,SAAS,iBAAiB,WAAW,OAAO,MACnG,6CAAC,oBAAAA,SAAA,EACE;AAAA;AAAA,EACD;AAAA,IAAC,uBAAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,kBACE,4CAAC,iBAAAC,SAAA,EAAS,YAAW,QAAO,eAAY,0CAAyC,MAAM,4CAAC,oCAAiB,GAAI;AAAA,MAE/G;AAAA;AAAA,EACF;AAAA,GACF;AAGF,cAAc,YAAY,CAAC;AAE3B,IAAO,wBAAQ;",
|
|
6
6
|
"names": ["TitleWrapper", "DSDropdownMenu", "DSButton"]
|
|
7
7
|
}
|
|
@@ -42,22 +42,17 @@ const EditableTitle = ({ children: value, editing: editingProp, titleInputProps
|
|
|
42
42
|
const [hovered, setHovered] = (0, import_react.useState)(false);
|
|
43
43
|
const [editing, setEditing] = (0, import_ds_utilities.useDerivedStateFromProps)(editingProp || false);
|
|
44
44
|
const titleRef = (0, import_react.useRef)(null);
|
|
45
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
|
|
46
|
-
|
|
45
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: hovered || editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
46
|
+
EditableTitleComponent,
|
|
47
|
+
{
|
|
47
48
|
...titleInputProps,
|
|
48
49
|
onBlur: (0, import_ds_utilities.runAll)(() => setEditing(false), titleInputProps.onBlur),
|
|
49
50
|
onChange: (0, import_ds_utilities.runAll)((e) => setTitleValue(e.target.value), titleInputProps.onChange),
|
|
50
51
|
onFocus: (0, import_ds_utilities.runAll)(() => setEditing(true), titleInputProps.onFocus),
|
|
51
52
|
onMouseOut: (0, import_ds_utilities.runAll)(() => setHovered(false), titleInputProps.onMouseOut),
|
|
52
53
|
value: titleValue
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
onMouseEnter: () => setHovered(true),
|
|
56
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Title.default, {
|
|
57
|
-
children: titleValue
|
|
58
|
-
})
|
|
59
|
-
})
|
|
60
|
-
});
|
|
54
|
+
}
|
|
55
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: titleRef, onMouseEnter: () => setHovered(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Title.default, { children: titleValue }) }) });
|
|
61
56
|
};
|
|
62
57
|
EditableTitle.propTypes = {
|
|
63
58
|
children: import_prop_types.default.string,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/EditableTitle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAwC;AACxC,0BAAiD;AACjD,wBAAsB;AACtB,2BAAkC;AAClC,mBAAoB;AACpB,mBAAkB;AAElB,MAAM,YAAY;AAElB,MAAM,6BAAyB,wCAAkB,aAAAA,OAAO,EAAE,GAAG,mBAAmB,gBAAgB;AAEhG,MAAM,gBAAgB,CAAC,EAAE,UAAU,OAAO,SAAS,aAAa,gBAAgB,MAAM;AACpF,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,8CAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAO,IAAI;AAC5B,SACE
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAwC;AACxC,0BAAiD;AACjD,wBAAsB;AACtB,2BAAkC;AAClC,mBAAoB;AACpB,mBAAkB;AAElB,MAAM,YAAY;AAElB,MAAM,6BAAyB,wCAAkB,aAAAA,OAAO,EAAE,GAAG,mBAAmB,gBAAgB;AAEhG,MAAM,gBAAgB,CAAC,EAAE,UAAU,OAAO,SAAS,aAAa,gBAAgB,MAAM;AACpF,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,8CAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAO,IAAI;AAC5B,SACE,2EACG,qBAAW,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAQ,4BAAO,MAAM,WAAW,KAAK,GAAG,gBAAgB,MAAM;AAAA,MAC9D,cAAU,4BAAO,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK,GAAG,gBAAgB,QAAQ;AAAA,MAC/E,aAAS,4BAAO,MAAM,WAAW,IAAI,GAAG,gBAAgB,OAAO;AAAA,MAC/D,gBAAY,4BAAO,MAAM,WAAW,KAAK,GAAG,gBAAgB,UAAU;AAAA,MACtE,OAAO;AAAA;AAAA,EACT,IAEA,4CAAC,SAAI,KAAK,UAAU,cAAc,MAAM,WAAW,IAAI,GACrD,sDAAC,aAAAC,SAAA,EAAO,sBAAW,GACrB,GAEJ;AAEJ;AAEA,cAAc,YAAY;AAAA,EAExB,UAAU,kBAAAC,QAAU;AAAA,EAEpB,SAAS,kBAAAA,QAAU;AACrB;AAEA,IAAO,wBAAQ;",
|
|
6
6
|
"names": ["DSInput", "Title", "PropTypes"]
|
|
7
7
|
}
|
|
@@ -63,28 +63,21 @@ const HeaderTitle = ({
|
|
|
63
63
|
titleInputProps,
|
|
64
64
|
zIndex
|
|
65
65
|
}) => {
|
|
66
|
-
const titleComponent = editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EditableTitle.default, {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
children: title
|
|
72
|
-
});
|
|
73
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitle, {
|
|
74
|
-
children: [
|
|
75
|
-
options.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownTitle.default, {
|
|
66
|
+
const titleComponent = editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EditableTitle.default, { editing, titleInputProps, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Title.default, { children: title });
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitle, { children: [
|
|
68
|
+
options.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
import_DropdownTitle.default,
|
|
70
|
+
{
|
|
76
71
|
onSelectOption,
|
|
77
72
|
options,
|
|
78
73
|
optionsMinWidth,
|
|
79
74
|
selection,
|
|
80
75
|
titleComponent,
|
|
81
76
|
zIndex
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
]
|
|
87
|
-
});
|
|
77
|
+
}
|
|
78
|
+
) : titleComponent,
|
|
79
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Subtitle, { children: subtitle })
|
|
80
|
+
] });
|
|
88
81
|
};
|
|
89
82
|
const PageHeaderImpl = ({
|
|
90
83
|
containerProps,
|
|
@@ -106,36 +99,32 @@ const PageHeaderImpl = ({
|
|
|
106
99
|
zIndex
|
|
107
100
|
}) => {
|
|
108
101
|
const hasBreadcrumbs = !!breadcrumbs.length;
|
|
109
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
onClick: onGoToPreviousPage,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
children: breadcrumbs.map((breadcrumb) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_breadcrumb.default.Item, {
|
|
126
|
-
...breadcrumb
|
|
127
|
-
}, breadcrumb.label))
|
|
128
|
-
}),
|
|
129
|
-
previousPage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeaderBreadcrumb, {
|
|
130
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_breadcrumb.default.Item, {
|
|
102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
103
|
+
PageHeaderContainer,
|
|
104
|
+
{
|
|
105
|
+
...containerProps,
|
|
106
|
+
className,
|
|
107
|
+
classProps: {
|
|
108
|
+
withBottomSeparator,
|
|
109
|
+
subtitle
|
|
110
|
+
},
|
|
111
|
+
children: [
|
|
112
|
+
previousPage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackArrow, { "data-testid": "back-arrow", onClick: onGoToPreviousPage, size: import_ds_icon.DSIconSizes.M }),
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderMainSection, { children: [
|
|
114
|
+
hasBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeaderBreadcrumb, { children: breadcrumbs.map((breadcrumb) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_breadcrumb.default.Item, { ...breadcrumb }, breadcrumb.label)) }),
|
|
115
|
+
previousPage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeaderBreadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
|
+
import_ds_breadcrumb.default.Item,
|
|
117
|
+
{
|
|
131
118
|
label: previousPage.title,
|
|
132
119
|
onClick: previousPage.onClick,
|
|
133
120
|
...previousPage
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
121
|
+
},
|
|
122
|
+
previousPage.id
|
|
123
|
+
) }),
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitleSection, { children: [
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
|
+
HeaderTitle,
|
|
127
|
+
{
|
|
139
128
|
editable,
|
|
140
129
|
editing,
|
|
141
130
|
onSelectOption,
|
|
@@ -146,16 +135,14 @@ const PageHeaderImpl = ({
|
|
|
146
135
|
title,
|
|
147
136
|
titleInputProps,
|
|
148
137
|
zIndex
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
]
|
|
158
|
-
});
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
(0, import_ds_utilities.isFunction)(renderToolbar) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeaderToolbar, { children: renderToolbar() })
|
|
141
|
+
] })
|
|
142
|
+
] })
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
);
|
|
159
146
|
};
|
|
160
147
|
var PageHeaderImpl_default = PageHeaderImpl;
|
|
161
148
|
//# sourceMappingURL=PageHeaderImpl.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/PageHeaderImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAxCJ,0BAA2B;AAC3B,2BAAkC;AAClC,sBAA4B;AAC5B,2BAAyB;AACzB,qBAA4B;AAC5B,2BAA0B;AAC1B,mBAAkB;AAClB,2BAA0B;AAE1B,MAAM,YAAY;AAElB,MAAM,0BAAsB,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,qBAAqB,SAAS,OAAO;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AACnB,EAAE;AAEF,MAAM,4BAAwB,wCAAkB,KAAK,EAAE,GAAG,wBAAwB;AAClF,MAAM,6BAAyB,wCAAkB,KAAK,EAAE,GAAG,yBAAyB;AACpF,MAAM,wBAAoB,wCAAkB,KAAK,EAAE,GAAG,qBAAqB,MAAM,OAAO;AAAA,EACtF,sBAAsB;AACxB,EAAE;AACF,MAAM,2BAAuB,wCAAkB,qBAAAA,OAAY,EAAE,GAAG,sBAAsB;AAEtF,MAAM,sBAAkB,wCAAkB,KAAK,EAAE,GAAG,iBAAiB;AACrE,MAAM,eAAW,wCAAkB,KAAK,EAAE,GAAG,mBAAmB,UAAU;AAC1E,MAAM,gBAAY,wCAAkB,2BAAW,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,4CAAC,qBAAAC,SAAA
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAxCJ,0BAA2B;AAC3B,2BAAkC;AAClC,sBAA4B;AAC5B,2BAAyB;AACzB,qBAA4B;AAC5B,2BAA0B;AAC1B,mBAAkB;AAClB,2BAA0B;AAE1B,MAAM,YAAY;AAElB,MAAM,0BAAsB,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,qBAAqB,SAAS,OAAO;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AACnB,EAAE;AAEF,MAAM,4BAAwB,wCAAkB,KAAK,EAAE,GAAG,wBAAwB;AAClF,MAAM,6BAAyB,wCAAkB,KAAK,EAAE,GAAG,yBAAyB;AACpF,MAAM,wBAAoB,wCAAkB,KAAK,EAAE,GAAG,qBAAqB,MAAM,OAAO;AAAA,EACtF,sBAAsB;AACxB,EAAE;AACF,MAAM,2BAAuB,wCAAkB,qBAAAA,OAAY,EAAE,GAAG,sBAAsB;AAEtF,MAAM,sBAAkB,wCAAkB,KAAK,EAAE,GAAG,iBAAiB;AACrE,MAAM,eAAW,wCAAkB,KAAK,EAAE,GAAG,mBAAmB,UAAU;AAC1E,MAAM,gBAAY,wCAAkB,2BAAW,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,4CAAC,qBAAAC,SAAA,EAAc,SAAkB,iBAC9B,iBACH,IAEA,4CAAC,aAAAC,SAAA,EAAO,iBAAM;AAGhB,SACE,6CAAC,mBACE;AAAA,YAAQ,SACP;AAAA,MAAC,qBAAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IAEA;AAAA,IAED,YAAY,4CAAC,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,4CAAC,aAAU,eAAY,cAAa,SAAS,oBAAoB,MAAM,2BAAY,GAAG;AAAA,QACvG,6CAAC,yBACE;AAAA,4BACC,4CAAC,wBACE,sBAAY,IAAI,CAAC,eAChB,4CAAC,qBAAAH,QAAa,MAAb,EAA0C,GAAG,cAAtB,WAAW,KAAuB,CAC3D,GACH;AAAA,UAED,gBACC,4CAAC,wBACC;AAAA,YAAC,qBAAAA,QAAa;AAAA,YAAb;AAAA,cAEC,OAAO,aAAa;AAAA,cACpB,SAAS,aAAa;AAAA,cACrB,GAAG;AAAA;AAAA,YAHC,aAAa;AAAA,UAIpB,GACF;AAAA,UAEF,6CAAC,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,gBACC,gCAAW,aAAa,KAAK,4CAAC,qBAAmB,wBAAc,GAAE;AAAA,aACpE;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["DSBreadcrumb", "EditableTitle", "Title", "DropdownTitle"]
|
|
7
7
|
}
|
package/dist/cjs/v1/Title.js
CHANGED
|
@@ -33,8 +33,6 @@ var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
|
33
33
|
var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
|
|
34
34
|
const blockName = "page-header";
|
|
35
35
|
const TitleWrapper = (0, import_ds_classnames.aggregatedClasses)(import_ds_truncated_tooltip_text.default)(`${blockName}-title`, "title");
|
|
36
|
-
const Title = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWrapper, {
|
|
37
|
-
value: children
|
|
38
|
-
});
|
|
36
|
+
const Title = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWrapper, { value: children });
|
|
39
37
|
var Title_default = Title;
|
|
40
38
|
//# sourceMappingURL=Title.js.map
|
package/dist/cjs/v1/Title.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/Title.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMS;AALhC,2BAAkC;AAClC,uCAAmC;AAEnC,MAAM,YAAY;AAClB,MAAM,mBAAe,wCAAkB,iCAAAA,OAAsB,EAAE,GAAG,mBAAmB,OAAO;AAC5F,MAAM,QAAQ,CAAC,EAAE,SAAS,MAAM,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMS;AALhC,2BAAkC;AAClC,uCAAmC;AAEnC,MAAM,YAAY;AAClB,MAAM,mBAAe,wCAAkB,iCAAAA,OAAsB,EAAE,GAAG,mBAAmB,OAAO;AAC5F,MAAM,QAAQ,CAAC,EAAE,SAAS,MAAM,4CAAC,gBAAa,OAAO,UAAU;AAE/D,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["DSTruncatedTooltipText"]
|
|
7
7
|
}
|
|
@@ -62,59 +62,34 @@ const DSPageHeaderV2 = (props) => {
|
|
|
62
62
|
const wrapperRow = ["auto", 1];
|
|
63
63
|
const mainRow = (0, import_lodash.compact)([1, "auto"]);
|
|
64
64
|
const pageTitleRow = (0, import_lodash.compact)(["auto", currentMenu && "30px", currentSummary && "auto", 1]);
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
73
|
-
|
|
74
|
-
children: [
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
children: [
|
|
90
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
91
|
-
cols: pageTitleRow,
|
|
92
|
-
children: [
|
|
93
|
-
currentPageTitle,
|
|
94
|
-
currentMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderMenu, {
|
|
95
|
-
children: currentMenu
|
|
96
|
-
}),
|
|
97
|
-
currentSummary,
|
|
98
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
99
|
-
]
|
|
100
|
-
}),
|
|
101
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
102
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderToolbarWrapper, {
|
|
103
|
-
children: currentToolbar
|
|
104
|
-
})
|
|
105
|
-
})
|
|
106
|
-
]
|
|
107
|
-
})
|
|
108
|
-
]
|
|
109
|
-
})
|
|
110
|
-
]
|
|
111
|
-
})
|
|
112
|
-
})
|
|
113
|
-
});
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_styled.Container,
|
|
67
|
+
{
|
|
68
|
+
...containerProps,
|
|
69
|
+
...globalAttributes,
|
|
70
|
+
...xStyledProps,
|
|
71
|
+
"data-testid": import_exported_related.DSPageHeaderDataTestIds.CONTAINER,
|
|
72
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.ContainerWBorder, { withBottomSeparator, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: wrapperRow, children: [
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderBack, { children: currentBackArrow }) }),
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { rows: ["auto", "auto"], children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { className: "em-ds-page-header-v2-breadcrumb", children: currentBreadcrumbs }),
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: mainRow, children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: pageTitleRow, children: [
|
|
78
|
+
currentPageTitle,
|
|
79
|
+
currentMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderMenu, { children: currentMenu }),
|
|
80
|
+
currentSummary,
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
|
|
82
|
+
] }),
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderToolbarWrapper, { children: currentToolbar }) })
|
|
84
|
+
] })
|
|
85
|
+
] })
|
|
86
|
+
] }) })
|
|
87
|
+
}
|
|
88
|
+
);
|
|
114
89
|
};
|
|
115
90
|
DSPageHeaderV2.propTypes = import_react_desc_prop_types.PageHeaderPropTypes;
|
|
116
91
|
DSPageHeaderV2.defaultProps = import_react_desc_prop_types.defaultProps;
|
|
117
|
-
DSPageHeaderV2.displayName =
|
|
92
|
+
DSPageHeaderV2.displayName = import_exported_related.DSPageHeaderName;
|
|
118
93
|
const DSPageHeaderWithSchema = (0, import_ds_utilities.describe)(DSPageHeaderV2);
|
|
119
94
|
DSPageHeaderWithSchema.propTypes = import_react_desc_prop_types.PageHeaderPropTypes;
|
|
120
95
|
var PageHeader_default = DSPageHeaderV2;
|
|
@@ -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-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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDX;AA9CZ,0BAAyB;AACzB,qBAAqB;AACrB,oBAAwB;AACxB,oBAOO;AACP,2BAA8B;AAC9B,6BAAgC;AAChC,qCAAwC;AACxC,+BAAkC;AAElC,mCAAkD;AAClD,
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDX;AA9CZ,0BAAyB;AACzB,qBAAqB;AACrB,oBAAwB;AACxB,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,aAAa,CAAC,QAAQ,CAAC;AAC7B,QAAM,cAAU,uBAAQ,CAAC,GAAG,MAAM,CAAC;AACnC,QAAM,mBAAe,uBAAQ,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,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,8BAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -86,30 +86,29 @@ const PageHeaderEditableTitle = ({
|
|
|
86
86
|
onChange: handleOnChange,
|
|
87
87
|
onBlur: handleOnBlur
|
|
88
88
|
});
|
|
89
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
});
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
90
|
+
EditableContainer,
|
|
91
|
+
{
|
|
92
|
+
className: hovered || editing ? "editable-title-component" : "",
|
|
93
|
+
onMouseEnter: () => setHovered(true),
|
|
94
|
+
onMouseLeave: () => setHovered(false),
|
|
95
|
+
"data-testid": import_exported_related.DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE,
|
|
96
|
+
children: [
|
|
97
|
+
(hovered || editing) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
|
+
import_ds_form_input_text.DSInputText,
|
|
99
|
+
{
|
|
100
|
+
onChange: handleOnChange,
|
|
101
|
+
...rest,
|
|
102
|
+
...globals,
|
|
103
|
+
placeholder: "",
|
|
104
|
+
style: { width: width + 10, minWidth: "260px", maxWidth: "100%" },
|
|
105
|
+
value: titleValue
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: titleRef, style: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PageHeaderTitle.PageHeaderTitle, { showMarker: showMarker && !hovered && !editing, children: titleValue }) })
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
);
|
|
113
112
|
};
|
|
114
113
|
const props = {
|
|
115
114
|
...import_ds_utilities.globalAttributesPropTypes,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/v2/components/PageHeaderEditableTitle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEnB;AAvEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,0BAOO;AACP,6BAAgC;AAChC,8BAAwC;AAExC,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,6CAAmB,2CAAiB;AAAA;AAAA;AAAA,SAGpC,6CAAmB,2CAAiB;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,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,8CAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,QAAI,gCAAW,QAAQ;AAErC,QAAM,qBAA2D,0BAAY,CAAC,MAAM;AAClF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC,0BAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAA4C,0BAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,4CAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEnB;AAvEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,0BAOO;AACP,6BAAgC;AAChC,8BAAwC;AAExC,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,6CAAmB,2CAAiB;AAAA;AAAA;AAAA,SAGpC,6CAAmB,2CAAiB;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,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,8CAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,QAAI,gCAAW,QAAQ;AAErC,QAAM,qBAA2D,0BAAY,CAAC,MAAM;AAClF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC,0BAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAA4C,0BAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,4CAAuB,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,gDAAwB;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,4CAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,sDAAC,0CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA,EAEH,UAAU,8BAAU,OAAO,YAAY,gBAAgB;AAAA,EAEvD,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EAEzE,YAAY,8BAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,8BAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -64,23 +64,11 @@ const PageHeaderSummaryWrapper = (0, import_ds_system.styled)("div", {
|
|
|
64
64
|
width: ${({ theme }) => theme.space.l};
|
|
65
65
|
}
|
|
66
66
|
`;
|
|
67
|
-
const PageHeaderSummary = ({ value = null, label = "", ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderSummaryWrapper, {
|
|
68
|
-
"
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
className: "ph-summary-value",
|
|
73
|
-
children: value
|
|
74
|
-
}),
|
|
75
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
76
|
-
className: "ph-summary-label",
|
|
77
|
-
children: label
|
|
78
|
-
}),
|
|
79
|
-
(value === 0 || value || label) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
80
|
-
className: "ph-summary-space"
|
|
81
|
-
})
|
|
82
|
-
]
|
|
83
|
-
});
|
|
67
|
+
const PageHeaderSummary = ({ value = null, label = "", ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderSummaryWrapper, { "data-testid": import_exported_related.DSPageHeaderDataTestIds.SUMMARY, ...rest, children: [
|
|
68
|
+
(value === 0 || value) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ph-summary-value", children: value }),
|
|
69
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ph-summary-label", children: label }),
|
|
70
|
+
(value === 0 || value || label) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ph-summary-space" })
|
|
71
|
+
] });
|
|
84
72
|
const props = {
|
|
85
73
|
value: import_ds_utilities.PropTypes.number.description("value for page header summary"),
|
|
86
74
|
label: import_ds_utilities.PropTypes.string.description("label attached to value")
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/v2/components/PageHeaderSummary.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../exported-related';\n\nconst PageHeaderSummaryWrapper = styled('div', {\n name: DSPageHeaderName,\n slot: DSPageHeaderSlots.SUMMARY,\n})`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n margin-left: ${({ theme }) => theme.space.xxxs};\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n line-height: ${({ theme }) => theme.lineHeights.m};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n &:before {\n display: block;\n content: '';\n height: 23px;\n background: ${({ theme }) => theme.colors.neutral[600]};\n width: 1px;\n margin-right: ${({ theme }) => theme.space.xxs};\n }\n .ph-summary-value {\n color: ${({ theme }) => theme.colors.neutral[700]};\n padding-right: ${({ theme }) => theme.space.xxs};\n }\n .ph-summary-label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n .ph-summary-space {\n width: ${({ theme }) => theme.space.l};\n }\n`;\nconst PageHeaderSummary = ({ value = null, label = '', ...rest }) => (\n <PageHeaderSummaryWrapper data-testid={DSPageHeaderDataTestIds.SUMMARY} {...rest}>\n {(value === 0 || value) && <div className=\"ph-summary-value\">{value}</div>}\n {label && <div className=\"ph-summary-label\">{label}</div>}\n {(value === 0 || value || label) && <div className=\"ph-summary-space\" />}\n </PageHeaderSummaryWrapper>\n);\n\nconst props = {\n /** value for page header summary */\n value: PropTypes.number.description('value for page header summary'),\n /** label attached to value */\n label: PropTypes.string.description('label attached to value'),\n};\n\nPageHeaderSummary.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderSummary.displayName = 'PageHeaderSummary';\nconst DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);\n\nDSPageHeaderSummaryWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { PageHeaderSummary, DSPageHeaderSummaryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCrB;AApCF,0BAAoC;AACpC,uBAAuB;AACvB,8BAA6E;AAE7E,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,iBACjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,oBAElC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,aAGlC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,qBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,aAGnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAGxC,MAAM,oBAAoB,CAAC,EAAE,QAAQ,MAAM,QAAQ,OAAO,KAAK,MAC7D,6CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCrB;AApCF,0BAAoC;AACpC,uBAAuB;AACvB,8BAA6E;AAE7E,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,iBACjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,oBAElC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,aAGlC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,qBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,aAGnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAGxC,MAAM,oBAAoB,CAAC,EAAE,QAAQ,MAAM,QAAQ,OAAO,KAAK,MAC7D,6CAAC,4BAAyB,eAAa,gDAAwB,SAAU,GAAG,MACxE;AAAA,aAAU,KAAK,UAAU,4CAAC,SAAI,WAAU,oBAAoB,iBAAM;AAAA,EACnE,SAAS,4CAAC,SAAI,WAAU,oBAAoB,iBAAM;AAAA,GACjD,UAAU,KAAK,SAAS,UAAU,4CAAC,SAAI,WAAU,oBAAmB;AAAA,GACxE;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,+BAA+B;AAAA,EAEnE,OAAO,8BAAU,OAAO,YAAY,yBAAyB;AAC/D;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,oCAAgC,8BAAS,iBAAiB;AAEhE,8BAA8B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -52,20 +52,10 @@ const PageHeaderTitleWrapper = (0, import_ds_system.styled)("div", {
|
|
|
52
52
|
right: 0;
|
|
53
53
|
}
|
|
54
54
|
`;
|
|
55
|
-
const PageHeaderTitle = ({ children = "", showMarker = false, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitleWrapper, {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, {
|
|
60
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, {
|
|
61
|
-
value: children
|
|
62
|
-
})
|
|
63
|
-
}),
|
|
64
|
-
showMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.RequiredMark, {
|
|
65
|
-
required: true
|
|
66
|
-
})
|
|
67
|
-
]
|
|
68
|
-
});
|
|
55
|
+
const PageHeaderTitle = ({ children = "", showMarker = false, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitleWrapper, { ...rest, "data-testid": import_exported_related.DSPageHeaderDataTestIds.HEADER_TITLE, children: [
|
|
56
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: children }) }),
|
|
57
|
+
showMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.RequiredMark, { required: true })
|
|
58
|
+
] });
|
|
69
59
|
const props = {
|
|
70
60
|
children: import_ds_utilities.PropTypes.string.description("Page header title string"),
|
|
71
61
|
showMarker: import_ds_utilities.PropTypes.bool.description("show required mark")
|