@elliemae/ds-global-header 3.0.0-alpha.0 → 3.0.0-alpha.1
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/components/Breadcrumb/GlobalHeaderBreadcrumb.js +30 -5
- package/dist/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +1 -1
- package/dist/cjs/components/Breadcrumb/PureBreadcrumb.js +41 -13
- package/dist/cjs/components/Breadcrumb/PureBreadcrumb.js.map +1 -1
- package/dist/cjs/components/Toolbar/ToolbarItems.js +43 -17
- package/dist/cjs/components/Toolbar/ToolbarItems.js.map +1 -1
- package/dist/cjs/config/useGetPropsWithDefaults.js +15 -4
- package/dist/cjs/config/useGetPropsWithDefaults.js.map +1 -1
- package/dist/cjs/outOfTheBox/AppPicker/AppPicker.js +39 -10
- package/dist/cjs/outOfTheBox/AppPicker/AppPicker.js.map +1 -1
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenu.js +31 -5
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenu.js.map +1 -1
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js +24 -16
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map +1 -1
- package/dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js +31 -5
- package/dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js.map +1 -1
- package/dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js +32 -5
- package/dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +1 -1
- package/dist/esm/components/Breadcrumb/PureBreadcrumb.js +43 -13
- package/dist/esm/components/Breadcrumb/PureBreadcrumb.js.map +1 -1
- package/dist/esm/components/Toolbar/ToolbarItems.js +45 -17
- package/dist/esm/components/Toolbar/ToolbarItems.js.map +1 -1
- package/dist/esm/config/useGetPropsWithDefaults.js +17 -4
- package/dist/esm/config/useGetPropsWithDefaults.js.map +1 -1
- package/dist/esm/outOfTheBox/AppPicker/AppPicker.js +41 -10
- package/dist/esm/outOfTheBox/AppPicker/AppPicker.js.map +1 -1
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenu.js +33 -5
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenu.js.map +1 -1
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenuContent.js +26 -16
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenuContent.js.map +1 -1
- package/dist/esm/outOfTheBox/SearchToggle/SearchToggle.js +33 -5
- package/dist/esm/outOfTheBox/SearchToggle/SearchToggle.js.map +1 -1
- package/package.json +10 -9
- package/dist/types/GlobalHeader.d.ts +0 -39
- package/dist/types/GlobalHeaderContainer.d.ts +0 -3
- package/dist/types/GlobalHeaderContext.d.ts +0 -3
- package/dist/types/GlobalHeaderTypes.d.ts +0 -85
- package/dist/types/components/Breadcrumb/GlobalHeaderBreadcrumb.d.ts +0 -2
- package/dist/types/components/Breadcrumb/PureBreadcrumb.d.ts +0 -3
- package/dist/types/components/Breadcrumb/styles.d.ts +0 -5
- package/dist/types/components/Title/GlobalHeaderTitle.d.ts +0 -2
- package/dist/types/components/Toolbar/GlobalHeaderToolbar.d.ts +0 -2
- package/dist/types/components/Toolbar/ToolbarItems.d.ts +0 -2
- package/dist/types/components/Toolbar/styles.d.ts +0 -1
- package/dist/types/config/useGetPropsWithDefaults.d.ts +0 -2
- package/dist/types/config/useGlobalHeader.d.ts +0 -2
- package/dist/types/config/useValidateProps.d.ts +0 -2
- package/dist/types/config/validateHelpers.d.ts +0 -27
- package/dist/types/defaultProps.d.ts +0 -2
- package/dist/types/index.d.ts +0 -2
- package/dist/types/outOfTheBox/AppPicker/AppPicker.d.ts +0 -8
- package/dist/types/outOfTheBox/PopupMenu/PopupMenu.d.ts +0 -3
- package/dist/types/outOfTheBox/PopupMenu/PopupMenuContent.d.ts +0 -3
- package/dist/types/outOfTheBox/PopupMenu/styles.d.ts +0 -4
- package/dist/types/outOfTheBox/SearchToggle/SearchToggle.d.ts +0 -2
- package/dist/types/outOfTheBox/SearchToggle/styles.d.ts +0 -1
- package/dist/types/outOfTheBox/index.d.ts +0 -3
- package/dist/types/propTypes.d.ts +0 -29
- package/dist/types/styles.d.ts +0 -2
|
@@ -2,9 +2,35 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
8
34
|
var __export = (target, all) => {
|
|
9
35
|
for (var name in all)
|
|
10
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -37,7 +63,8 @@ var import_ds_icon = require("@elliemae/ds-icon");
|
|
|
37
63
|
var import_ds_form = require("@elliemae/ds-form");
|
|
38
64
|
var import_styles = require("./styles");
|
|
39
65
|
var import_styles2 = require("../../components/Toolbar/styles");
|
|
40
|
-
const SearchToggle = (
|
|
66
|
+
const SearchToggle = (_a) => {
|
|
67
|
+
var _b = _a, { id, componentProps } = _b, otherProps = __objRest(_b, ["id", "componentProps"]);
|
|
41
68
|
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
|
42
69
|
const inputRef = (0, import_react.useRef)(null);
|
|
43
70
|
const triggerRef = (0, import_react.useRef)(null);
|
|
@@ -95,12 +122,11 @@ const SearchToggle = ({ id, componentProps, ...otherProps }) => {
|
|
|
95
122
|
onBlur,
|
|
96
123
|
innerRef: inputRef,
|
|
97
124
|
autoFocus: true
|
|
98
|
-
})) : /* @__PURE__ */ import_react.default.createElement(import_styles2.Button, {
|
|
125
|
+
})) : /* @__PURE__ */ import_react.default.createElement(import_styles2.Button, __spreadValues({
|
|
99
126
|
onClick: handleOnClick,
|
|
100
127
|
ref: triggerRef,
|
|
101
|
-
id
|
|
102
|
-
|
|
103
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
|
|
128
|
+
id
|
|
129
|
+
}, (0, import_ds_props_helpers.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
|
|
104
130
|
color: import_ds_icon.DSIconColors.WHITE
|
|
105
131
|
}));
|
|
106
132
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { StyledNavSearchBoxContainer } from './styles';\nimport { Button } from '../../components/Toolbar/styles';\nimport type { SearchTogglePropsT } from 'index.d';\n\nexport const SearchToggle = ({ id, componentProps, ...otherProps }: SearchTogglePropsT): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const {\n onNext,\n onPrevious,\n currentResultIndex,\n totalResults,\n placeholder,\n value,\n onChange,\n onBlur,\n onClear,\n isOpen: userIsOpen,\n onKeyDown,\n onClick,\n } = componentProps;\n\n const handleOnClick = useCallback(\n (e) => {\n if (userIsOpen === undefined) setIsOpen(true);\n if (onClick) onClick(e);\n },\n [onClick, userIsOpen],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (userIsOpen === undefined) {\n if (e.code === 'Escape') {\n setIsOpen(false);\n setTimeout(() => triggerRef.current?.focus());\n }\n }\n if (onKeyDown) onKeyDown(e);\n },\n [onKeyDown, userIsOpen],\n );\n\n const handleOnBlur = useCallback(() => {\n setTimeout(() => {\n const contains = containerRef.current?.contains(document.activeElement);\n if (value === '' && !contains) setIsOpen(false);\n });\n }, [value]);\n\n return userIsOpen || isOpen ? (\n <StyledNavSearchBoxContainer onKeyDown={handleOnKeyDown} ref={containerRef} onBlur={handleOnBlur}>\n <DSNavSearchBox\n onNext={onNext}\n onPrevious={onPrevious}\n currentResultIndex={currentResultIndex}\n totalResults={totalResults}\n onClear={onClear}\n placeholder={placeholder}\n onChange={onChange}\n value={value}\n onBlur={onBlur}\n innerRef={inputRef}\n autoFocus\n />\n </StyledNavSearchBoxContainer>\n ) : (\n <Button onClick={handleOnClick} ref={triggerRef} id={id} {...getDataProps(otherProps)}>\n <Search color={DSIconColors.WHITE} />\n </Button>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,sBAAuB;AACvB,8BAA6B;AAC7B,qBAA6B;AAC7B,qBAA+B;AAC/B,oBAA4C;AAC5C,qBAAuB;AAGhB,MAAM,eAAe,CAAC,OAA2E;AAA3E,eAAE,MAAI,mBAAN,IAAyB,uBAAzB,IAAyB,CAAvB,MAAI;AACjC,QAAM,CAAC,QAAQ,aAAa,2BAAkB;AAC9C,QAAM,WAAW,yBAAgC;AACjD,QAAM,aAAa,yBAAiC;AACpD,QAAM,eAAe,yBAA8B;AAEnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAgB,8BACpB,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,QAAI;AAAS,cAAQ;AAAA,KAEvB,CAAC,SAAS;AAGZ,QAAM,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,eAAe,QAAW;AAC5B,UAAI,EAAE,SAAS,UAAU;AACvB,kBAAU;AACV,mBAAW,MAAM,WAAW,SAAS;AAAA;AAAA;AAGzC,QAAI;AAAW,gBAAU;AAAA,KAE3B,CAAC,WAAW;AAGd,QAAM,eAAe,8BAAY,MAAM;AACrC,eAAW,MAAM;AACf,YAAM,WAAW,aAAa,SAAS,SAAS,SAAS;AACzD,UAAI,UAAU,MAAM,CAAC;AAAU,kBAAU;AAAA;AAAA,KAE1C,CAAC;AAEJ,SAAO,cAAc,SACnB,mDAAC,2CAAD;AAAA,IAA6B,WAAW;AAAA,IAAiB,KAAK;AAAA,IAAc,QAAQ;AAAA,KAClF,mDAAC,+BAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAS;AAAA,QAIb,mDAAC,uBAAD;AAAA,IAAQ,SAAS;AAAA,IAAe,KAAK;AAAA,IAAY;AAAA,KAAY,0CAAa,cACxE,mDAAC,wBAAD;AAAA,IAAQ,OAAO,4BAAa;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
1
29
|
import * as React from "react";
|
|
2
30
|
import React2, { useEffect, useContext, useRef } from "react";
|
|
3
31
|
import { Grid } from "@elliemae/ds-grid";
|
|
@@ -38,13 +66,12 @@ const GlobalHeaderBreadcrumb = () => {
|
|
|
38
66
|
}, /* @__PURE__ */ React2.createElement(Pipe, {
|
|
39
67
|
showIconOnly
|
|
40
68
|
}), breadcrumb?.map((item) => {
|
|
41
|
-
const { label,
|
|
42
|
-
return /* @__PURE__ */ React2.createElement(PureBreadcrumb, {
|
|
69
|
+
const _a = item, { label } = _a, rest = __objRest(_a, ["label"]);
|
|
70
|
+
return /* @__PURE__ */ React2.createElement(PureBreadcrumb, __spreadValues({
|
|
43
71
|
label,
|
|
44
72
|
length: breadcrumb.length,
|
|
45
|
-
key: `${instanceUID}-breadcrumb-item-${label}
|
|
46
|
-
|
|
47
|
-
});
|
|
73
|
+
key: `${instanceUID}-breadcrumb-item-${label}`
|
|
74
|
+
}, rest));
|
|
48
75
|
}), /* @__PURE__ */ React2.createElement("div", {
|
|
49
76
|
id: "global-header-flex-region",
|
|
50
77
|
ref: flexRegion
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useContext, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Pipe } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { PureBreadcrumb } from './PureBreadcrumb';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const {\n props: { breadcrumb },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n globalHeaderBreadcrumbGrid,\n } = useContext(GlobalHeaderContext);\n const breakpoint = useRef<number | null>(null);\n const flexRegion = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {\n setShowIconOnly(true);\n breakpoint.current = window.innerWidth;\n } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {\n setShowIconOnly(false);\n breakpoint.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpoint, flexRegion, setShowIconOnly]);\n\n return (\n <Grid\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumbs\"\n cols={globalHeaderBreadcrumbGrid}\n role=\"navigation\"\n >\n <Pipe showIconOnly={showIconOnly} />\n {breadcrumb?.map((item) => {\n const { label, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n length={breadcrumb.length}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n {...rest}\n />\n );\n })}\n <div id=\"global-header-flex-region\" ref={flexRegion}></div>\n </Grid>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,yBAAyB,MAAmB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,aAAa,OAAsB;AACzC,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,WAAW,YAAY,QAAQ,eAAe,KAAK,CAAC,WAAW,SAAS;AACnG,wBAAgB;AAChB,mBAAW,UAAU,OAAO;AAAA,iBACnB,cAAc,WAAW,YAAY,QAAQ,OAAO,cAAc,WAAW,SAAS;AAC/F,wBAAgB;AAChB,mBAAW,UAAU;AAAA;AAAA;AAIzB;AAEA,WAAO,iBAAiB,UAAU;AAClC,WAAO,MAAM,OAAO,oBAAoB,UAAU;AAAA,KACjD,CAAC,YAAY,YAAY;AAE5B,SACE,qCAAC,MAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,cAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAK;AAAA,KAEL,qCAAC,MAAD;AAAA,IAAM;AAAA,MACL,YAAY,IAAI,CAAC,SAAS;AACzB,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,yBAAyB,MAAmB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,aAAa,OAAsB;AACzC,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,WAAW,YAAY,QAAQ,eAAe,KAAK,CAAC,WAAW,SAAS;AACnG,wBAAgB;AAChB,mBAAW,UAAU,OAAO;AAAA,iBACnB,cAAc,WAAW,YAAY,QAAQ,OAAO,cAAc,WAAW,SAAS;AAC/F,wBAAgB;AAChB,mBAAW,UAAU;AAAA;AAAA;AAIzB;AAEA,WAAO,iBAAiB,UAAU;AAClC,WAAO,MAAM,OAAO,oBAAoB,UAAU;AAAA,KACjD,CAAC,YAAY,YAAY;AAE5B,SACE,qCAAC,MAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,cAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAK;AAAA,KAEL,qCAAC,MAAD;AAAA,IAAM;AAAA,MACL,YAAY,IAAI,CAAC,SAAS;AACzB,UAA2B,WAAnB,YAAmB,IAAT,iBAAS,IAAT,CAAV;AACR,WACE,qCAAC,gBAAD;AAAA,MACE;AAAA,MACA,QAAQ,WAAW;AAAA,MACnB,KAAK,GAAG,+BAA+B;AAAA,OACnC;AAAA,MAIV,qCAAC,OAAD;AAAA,IAAK,IAAG;AAAA,IAA4B,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,21 +1,51 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
1
29
|
import * as React from "react";
|
|
2
30
|
import React2 from "react";
|
|
3
31
|
import { ChevronSmallRight } from "@elliemae/ds-icons";
|
|
4
32
|
import { getDataProps } from "@elliemae/ds-props-helpers";
|
|
5
33
|
import { BreadcrumbItem, LabelButton, Label } from "./styles";
|
|
6
|
-
const PureBreadcrumb = React2.memo((
|
|
7
|
-
onClick,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
34
|
+
const PureBreadcrumb = React2.memo((_a) => {
|
|
35
|
+
var _b = _a, { onClick, isSelected, length, label, hasNext, id } = _b, rest = __objRest(_b, ["onClick", "isSelected", "length", "label", "hasNext", "id"]);
|
|
36
|
+
return /* @__PURE__ */ React2.createElement(BreadcrumbItem, null, /* @__PURE__ */ React2.createElement(LabelButton, __spreadValues({
|
|
37
|
+
onClick,
|
|
38
|
+
"aria-selected": isSelected,
|
|
39
|
+
"data-testid": "gh-breadcrumb-btn",
|
|
40
|
+
id
|
|
41
|
+
}, getDataProps(rest)), /* @__PURE__ */ React2.createElement(Label, {
|
|
42
|
+
isSelected: !!isSelected,
|
|
43
|
+
isOnlyItem: length === 1
|
|
44
|
+
}, label)), hasNext && /* @__PURE__ */ React2.createElement(ChevronSmallRight, {
|
|
45
|
+
size: "m",
|
|
46
|
+
fill: "#FFF"
|
|
47
|
+
}));
|
|
48
|
+
});
|
|
19
49
|
export {
|
|
20
50
|
PureBreadcrumb
|
|
21
51
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Breadcrumb/PureBreadcrumb.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { BreadcrumbItem, LabelButton, Label } from './styles';\nimport type { BreadcrumbItemT as Props } from '../../GlobalHeaderTypes';\n\nexport const PureBreadcrumb = React.memo(({ onClick, isSelected, length, label, hasNext, id, ...rest }: Props) => (\n <BreadcrumbItem>\n <LabelButton\n onClick={onClick}\n aria-selected={isSelected}\n data-testid=\"gh-breadcrumb-btn\"\n id={id}\n {...getDataProps(rest)}\n >\n <Label isSelected={!!isSelected} isOnlyItem={length === 1}>\n {label}\n </Label>\n </LabelButton>\n {hasNext && <ChevronSmallRight size=\"m\" fill=\"#FFF\" />}\n </BreadcrumbItem>\n));\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAGO,MAAM,iBAAiB,OAAM,KAAK,CAAC,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAGO,MAAM,iBAAiB,OAAM,KAAK,CAAC,OAAqE;AAArE,eAAE,WAAS,YAAY,QAAQ,OAAO,SAAS,OAA/C,IAAsD,iBAAtD,IAAsD,CAApD,WAAS,cAAY,UAAQ,SAAO,WAAS;AACvF,8CAAC,gBAAD,MACE,qCAAC,aAAD;AAAA,IACE;AAAA,IACA,iBAAe;AAAA,IACf,eAAY;AAAA,IACZ;AAAA,KACI,aAAa,QAEjB,qCAAC,OAAD;AAAA,IAAO,YAAY,CAAC,CAAC;AAAA,IAAY,YAAY,WAAW;AAAA,KACrD,SAGJ,WAAW,qCAAC,mBAAD;AAAA,IAAmB,MAAK;AAAA,IAAI,MAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import * as React from "react";
|
|
2
33
|
import React2, { useContext, useMemo } from "react";
|
|
3
34
|
import { AppPicker, PopupMenu, SearchToggle } from "../../outOfTheBox";
|
|
@@ -11,34 +42,32 @@ const ToolbarItems = () => {
|
|
|
11
42
|
} = useContext(GlobalHeaderContext);
|
|
12
43
|
console.log(`toolbar`, toolbar);
|
|
13
44
|
const itemsList = useMemo(() => toolbar?.map((item) => {
|
|
14
|
-
const { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent,
|
|
45
|
+
const _a = item, { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent } = _a, otherProps = __objRest(_a, ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"]);
|
|
15
46
|
switch (type) {
|
|
16
47
|
case "ds-popup-menu":
|
|
17
|
-
return /* @__PURE__ */ React2.createElement(PopupMenu, {
|
|
48
|
+
return /* @__PURE__ */ React2.createElement(PopupMenu, __spreadProps(__spreadValues({
|
|
18
49
|
title: label,
|
|
19
50
|
Icon,
|
|
20
51
|
onClick,
|
|
21
52
|
onKeyPress,
|
|
22
53
|
id,
|
|
23
|
-
key: `${instanceUID}-ds-popup-menu-${label}
|
|
24
|
-
|
|
54
|
+
key: `${instanceUID}-ds-popup-menu-${label}`
|
|
55
|
+
}, otherProps), {
|
|
25
56
|
componentProps
|
|
26
|
-
});
|
|
57
|
+
}));
|
|
27
58
|
case "ds-app-picker":
|
|
28
|
-
return /* @__PURE__ */ React2.createElement(AppPicker, {
|
|
59
|
+
return /* @__PURE__ */ React2.createElement(AppPicker, __spreadValues({
|
|
29
60
|
label,
|
|
30
61
|
key: `${instanceUID}-ds-app-picker-${label}`,
|
|
31
62
|
id,
|
|
32
|
-
componentProps
|
|
33
|
-
|
|
34
|
-
});
|
|
63
|
+
componentProps
|
|
64
|
+
}, otherProps));
|
|
35
65
|
case "ds-search-toggle":
|
|
36
|
-
return /* @__PURE__ */ React2.createElement(SearchToggle, {
|
|
66
|
+
return /* @__PURE__ */ React2.createElement(SearchToggle, __spreadValues({
|
|
37
67
|
key: `${instanceUID}-ds-search-toggle-${id}`,
|
|
38
68
|
id,
|
|
39
|
-
componentProps
|
|
40
|
-
|
|
41
|
-
});
|
|
69
|
+
componentProps
|
|
70
|
+
}, otherProps));
|
|
42
71
|
case "custom":
|
|
43
72
|
if (CustomComponent)
|
|
44
73
|
return /* @__PURE__ */ React2.createElement(CustomComponent, {
|
|
@@ -46,14 +75,13 @@ const ToolbarItems = () => {
|
|
|
46
75
|
});
|
|
47
76
|
return null;
|
|
48
77
|
default:
|
|
49
|
-
return /* @__PURE__ */ React2.createElement(Button, {
|
|
78
|
+
return /* @__PURE__ */ React2.createElement(Button, __spreadValues({
|
|
50
79
|
onClick,
|
|
51
80
|
key: `${instanceUID}-ds-toolbar-button-${label}`,
|
|
52
81
|
title: label,
|
|
53
82
|
"data-testid": "gh-toolbar-item",
|
|
54
|
-
id
|
|
55
|
-
|
|
56
|
-
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
83
|
+
id
|
|
84
|
+
}, getDataProps(otherProps)), /* @__PURE__ */ React2.createElement(Icon, {
|
|
57
85
|
fill: "#FFF",
|
|
58
86
|
size: "m"
|
|
59
87
|
}));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Toolbar/ToolbarItems.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu, SearchToggle } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\n\nexport const ToolbarItems = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n } = useContext(GlobalHeaderContext);\n\n console.log(`toolbar`, toolbar);\n const itemsList = useMemo(\n () =>\n toolbar?.map((item) => {\n const { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent, ...otherProps } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n id={id}\n key={`${instanceUID}-ds-popup-menu-${label}`}\n {...otherProps}\n componentProps={componentProps}\n />\n );\n case 'ds-app-picker':\n return (\n <AppPicker\n label={label}\n key={`${instanceUID}-ds-app-picker-${label}`}\n id={id}\n componentProps={componentProps}\n {...otherProps}\n />\n );\n case 'ds-search-toggle':\n return (\n <SearchToggle\n key={`${instanceUID}-ds-search-toggle-${id}`}\n id={id}\n componentProps={componentProps}\n {...otherProps}\n />\n );\n case 'custom':\n if (CustomComponent) return <CustomComponent item={item} />;\n return null;\n default:\n return (\n <Button\n onClick={onClick}\n key={`${instanceUID}-ds-toolbar-button-${label}`}\n title={label}\n data-testid=\"gh-toolbar-item\"\n id={id}\n {...getDataProps(otherProps)}\n >\n <Icon fill=\"#FFF\" size=\"m\" />\n </Button>\n );\n }\n }),\n [toolbar, instanceUID],\n );\n\n return <>{itemsList}</>;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEO,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW;AAEf,UAAQ,IAAI,WAAW;AACvB,QAAM,YAAY,QAChB,MACE,SAAS,IAAI,CAAC,SAAS;AACrB,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AAEO,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW;AAEf,UAAQ,IAAI,WAAW;AACvB,QAAM,YAAY,QAChB,MACE,SAAS,IAAI,CAAC,SAAS;AACrB,UAAuG,WAA/F,QAAM,MAAM,SAAS,gBAAgB,OAAO,YAAY,IAAI,oBAAmC,IAAf,uBAAe,IAAf,CAAhF,QAAM,QAAM,WAAS,kBAAgB,SAAO,cAAY,MAAI;AAEpE,YAAQ;AAAA,WACD;AACH,eACE,qCAAC,WAAD;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK,GAAG,6BAA6B;AAAA,WACjC,aAPN;AAAA,UAQE;AAAA;AAAA,WAGD;AACH,eACE,qCAAC,WAAD;AAAA,UACE;AAAA,UACA,KAAK,GAAG,6BAA6B;AAAA,UACrC;AAAA,UACA;AAAA,WACI;AAAA,WAGL;AACH,eACE,qCAAC,cAAD;AAAA,UACE,KAAK,GAAG,gCAAgC;AAAA,UACxC;AAAA,UACA;AAAA,WACI;AAAA,WAGL;AACH,YAAI;AAAiB,iBAAO,qCAAC,iBAAD;AAAA,YAAiB;AAAA;AAC7C,eAAO;AAAA;AAEP,eACE,qCAAC,QAAD;AAAA,UACE;AAAA,UACA,KAAK,GAAG,iCAAiC;AAAA,UACzC,OAAO;AAAA,UACP,eAAY;AAAA,UACZ;AAAA,WACI,aAAa,cAEjB,qCAAC,MAAD;AAAA,UAAM,MAAK;AAAA,UAAO,MAAK;AAAA;AAAA;AAAA,MAKnC,CAAC,SAAS;AAGZ,SAAO,4DAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import * as React from "react";
|
|
2
18
|
import { useMemo } from "react";
|
|
3
19
|
import { defaultProps } from "../defaultProps";
|
|
4
20
|
const useGetPropsWithDefaults = (props) => {
|
|
5
21
|
const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;
|
|
6
|
-
return useMemo(() => ({
|
|
7
|
-
...defaultProps,
|
|
8
|
-
...props
|
|
9
|
-
}), [toolbar, breadcrumb, Logo, LogoWithBrand]);
|
|
22
|
+
return useMemo(() => __spreadValues(__spreadValues({}, defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
|
|
10
23
|
};
|
|
11
24
|
export {
|
|
12
25
|
useGetPropsWithDefaults
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGetPropsWithDefaults.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport { useMemo } from 'react';\nimport type { GlobalHeaderPropsT } from '../GlobalHeaderTypes';\nimport { defaultProps } from '../defaultProps';\n\nexport const useGetPropsWithDefaults = (props: GlobalHeaderPropsT): GlobalHeaderPropsT => {\n const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;\n\n return useMemo(\n () => ({\n ...defaultProps,\n ...props,\n }),\n [toolbar, breadcrumb, Logo, LogoWithBrand],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AAEA;AAEO,MAAM,0BAA0B,CAAC,UAAkD;AACxF,QAAM,EAAE,SAAS,YAAY,MAAM,kBAAkB;AAErD,SAAO,QACL,MAAO
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AAEA;AAEO,MAAM,0BAA0B,CAAC,UAAkD;AACxF,QAAM,EAAE,SAAS,YAAY,MAAM,kBAAkB;AAErD,SAAO,QACL,MAAO,kCACF,eACA,QAEL,CAAC,SAAS,YAAY,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
1
29
|
import * as React from "react";
|
|
2
30
|
import React2, { useState, useRef, useCallback, useMemo } from "react";
|
|
3
31
|
import { DSAppPicker } from "@elliemae/ds-app-picker";
|
|
@@ -5,12 +33,16 @@ import { mergeRefs } from "@elliemae/ds-utilities";
|
|
|
5
33
|
import { MenuPicker } from "@elliemae/ds-icons";
|
|
6
34
|
import { getDataProps } from "@elliemae/ds-props-helpers";
|
|
7
35
|
import { Button } from "../../components/Toolbar/styles";
|
|
8
|
-
const AppPicker = ({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
36
|
+
const AppPicker = (_a) => {
|
|
37
|
+
var _b = _a, {
|
|
38
|
+
label,
|
|
39
|
+
id,
|
|
40
|
+
componentProps
|
|
41
|
+
} = _b, otherProps = __objRest(_b, [
|
|
42
|
+
"label",
|
|
43
|
+
"id",
|
|
44
|
+
"componentProps"
|
|
45
|
+
]);
|
|
14
46
|
const [isOpen, setIsOpen] = useState(false);
|
|
15
47
|
const buttonRef = useRef(null);
|
|
16
48
|
const {
|
|
@@ -47,15 +79,14 @@ const AppPicker = ({
|
|
|
47
79
|
}, []);
|
|
48
80
|
const renderTrigger = useMemo(() => ({ ref }) => /* @__PURE__ */ React2.createElement("div", {
|
|
49
81
|
ref
|
|
50
|
-
}, /* @__PURE__ */ React2.createElement(Button, {
|
|
82
|
+
}, /* @__PURE__ */ React2.createElement(Button, __spreadValues({
|
|
51
83
|
onClick: triggerOnClick ?? handleOnClick,
|
|
52
84
|
onKeyDown: handleTriggerKeyDown,
|
|
53
85
|
ref: mergeRefs(buttonRef, triggerRef),
|
|
54
86
|
title: label,
|
|
55
87
|
"data-testid": "gh-toolbar-item",
|
|
56
|
-
id
|
|
57
|
-
|
|
58
|
-
}, /* @__PURE__ */ React2.createElement(MenuPicker, {
|
|
88
|
+
id
|
|
89
|
+
}, getDataProps(otherProps)), /* @__PURE__ */ React2.createElement(MenuPicker, {
|
|
59
90
|
fill: "#FFF",
|
|
60
91
|
width: 20.73,
|
|
61
92
|
height: 20.73
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/AppPicker/AppPicker.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { Button } from '../../components/Toolbar/styles';\n\ntype AppPickerProps = React.ComponentProps<typeof DSAppPicker>;\n\nexport const AppPicker = ({\n label,\n id,\n componentProps,\n ...otherProps\n}: AppPickerProps & {\n label: string;\n triggerOnClick?: React.MouseEventHandler;\n}): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const {\n apps,\n icon,\n customApps,\n sectionTitle,\n customSectionTitle,\n actionRef,\n isOpen: userIsOpen,\n onKeyDown: userOnKeyDown,\n onClickOutside: userOnClickOutside,\n renderTrigger: userRenderTrigger,\n onClose,\n triggerRef,\n triggerOnClick,\n } = componentProps;\n\n const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n if (e.code === 'Enter' || e.code === 'Space') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown: AppPickerProps['onKeyDown'] = useCallback((e) => {\n if (e.code === 'Escape') {\n setIsOpen(false);\n buttonRef?.current?.focus();\n }\n }, []);\n\n const handleOnClickOutside: AppPickerProps['onClickOutside'] = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const renderTrigger: AppPickerProps['renderTrigger'] = useMemo(\n () =>\n ({ ref }) =>\n (\n <div ref={ref}>\n <Button\n onClick={triggerOnClick ?? handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n ref={mergeRefs(buttonRef, triggerRef)}\n title={label}\n data-testid=\"gh-toolbar-item\"\n id={id}\n {...getDataProps(otherProps)}\n >\n <MenuPicker fill=\"#FFF\" width={20.73} height={20.73} />\n </Button>\n </div>\n ),\n [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps],\n );\n\n return (\n <DSAppPicker\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n icon={icon}\n onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n actionRef={actionRef}\n onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n renderTrigger={userRenderTrigger ?? renderTrigger}\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAIO,MAAM,YAAY,CAAC;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAIO,MAAM,YAAY,CAAC,OAQP;AARO,eACxB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,MAHwB,IAIrB,uBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAMA,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,QAAM,YAAY,OAA0B;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAAA,KAEX;AAEH,QAAM,2BAAwD,YAAY,CAAC,MAAM;AAC/E,QAAI,EAAE,SAAS,UAAU;AACvB,gBAAU;AACV,iBAAW,SAAS;AAAA;AAAA,KAErB;AAEH,QAAM,uBAAyD,YAAY,MAAM;AAC/E,cAAU;AAAA,KACT;AAEH,QAAM,gBAAyC,YAAY,MAAM;AAC/D,cAAU;AAAA,KACT;AAEH,QAAM,gBAAiD,QACrD,MACE,CAAC,EAAE,UAEC,qCAAC,OAAD;AAAA,IAAK;AAAA,KACH,qCAAC,QAAD;AAAA,IACE,SAAS,kBAAkB;AAAA,IAC3B,WAAW;AAAA,IACX,KAAK,UAAU,WAAW;AAAA,IAC1B,OAAO;AAAA,IACP,eAAY;AAAA,IACZ;AAAA,KACI,aAAa,cAEjB,qCAAC,YAAD;AAAA,IAAY,MAAK;AAAA,IAAO,OAAO;AAAA,IAAO,QAAQ;AAAA,QAIxD,CAAC,gBAAgB,eAAe,sBAAsB,YAAY,OAAO,IAAI;AAG/E,SACE,qCAAC,aAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA,gBAAgB,sBAAsB;AAAA,IACtC,eAAe,qBAAqB;AAAA,IACpC,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,39 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
1
29
|
import * as React from "react";
|
|
2
30
|
import React2, { useState, useCallback, useMemo } from "react";
|
|
3
31
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
4
32
|
import { PopupMenuContent } from "./PopupMenuContent";
|
|
5
33
|
import { Button } from "../../components/Toolbar/styles";
|
|
6
34
|
import { getDataProps } from "@elliemae/ds-props-helpers";
|
|
7
|
-
const PopupMenu = (
|
|
35
|
+
const PopupMenu = (_a) => {
|
|
36
|
+
var _b = _a, { Icon, title, onClick, id, componentProps } = _b, otherProps = __objRest(_b, ["Icon", "title", "onClick", "id", "componentProps"]);
|
|
8
37
|
const [isOpen, setIsOpen] = useState(false);
|
|
9
38
|
const [buttonRef, setButtonRef] = useState(null);
|
|
10
39
|
const {
|
|
@@ -43,15 +72,14 @@ const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps })
|
|
|
43
72
|
onClose: handleOnClose,
|
|
44
73
|
popupOnKeyPress
|
|
45
74
|
}), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
|
|
46
|
-
return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Button, {
|
|
75
|
+
return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Button, __spreadValues({
|
|
47
76
|
onClick: handleTriggerOnClick,
|
|
48
77
|
onKeyPress: handleKeyPress,
|
|
49
78
|
title,
|
|
50
79
|
ref: setButtonRef,
|
|
51
80
|
"data-testid": "gh-toolbar-item",
|
|
52
|
-
id
|
|
53
|
-
|
|
54
|
-
}, Icon && /* @__PURE__ */ React2.createElement(Icon, {
|
|
81
|
+
id
|
|
82
|
+
}, getDataProps(otherProps)), Icon && /* @__PURE__ */ React2.createElement(Icon, {
|
|
55
83
|
fill: "#FFF",
|
|
56
84
|
size: "m"
|
|
57
85
|
})), /* @__PURE__ */ React2.createElement(DSPopperJS, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/PopupMenu/PopupMenu.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './PopupMenuContent';\nimport { Button } from '../../components/Toolbar/styles';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport type { PopupPropsT as Props } from '../../GlobalHeaderTypes';\n\nexport const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps }: Props): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n const {\n onClickOutside = () => null,\n onKeyPress,\n popupOnKeyPress,\n isOpen: userIsOpen,\n options,\n closeOnClick,\n } = componentProps;\n\n const handleKeyPress = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Enter' || e.code === 'Space') {\n setIsOpen(true);\n }\n if (onKeyPress) onKeyPress(e);\n },\n [onKeyPress],\n );\n\n const handleOnClose = useCallback(() => {\n if (userIsOpen === undefined) {\n setIsOpen(false);\n }\n buttonRef?.focus();\n }, [buttonRef, userIsOpen]);\n\n const handleTriggerOnClick = useCallback(\n (e) => {\n if (userIsOpen === undefined) setIsOpen(true);\n onClick(e);\n },\n [onClick, userIsOpen],\n );\n\n const handleItemClick = useCallback(() => {\n if (closeOnClick && userIsOpen === undefined) handleOnClose();\n }, [closeOnClick, handleOnClose, userIsOpen]);\n\n const content = useMemo(\n () => (\n <PopupMenuContent\n options={options}\n onItemClick={handleItemClick}\n onClose={handleOnClose}\n popupOnKeyPress={popupOnKeyPress}\n />\n ),\n [options, handleItemClick, handleOnClose, popupOnKeyPress],\n );\n\n return (\n <div>\n <Button\n onClick={handleTriggerOnClick}\n onKeyPress={handleKeyPress}\n title={title}\n ref={setButtonRef}\n data-testid=\"gh-toolbar-item\"\n id={id}\n {...getDataProps(otherProps)}\n >\n {Icon && <Icon fill=\"#FFF\" size=\"m\" />}\n </Button>\n <DSPopperJS\n referenceElement={buttonRef}\n showPopover={userIsOpen ?? isOpen}\n closeContextMenu={handleOnClose}\n onClickOutside={onClickOutside}\n >\n {content}\n </DSPopperJS>\n </div>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAGO,MAAM,YAAY,CAAC,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAGO,MAAM,YAAY,CAAC,OAAoF;AAApF,eAAE,QAAM,OAAO,SAAS,IAAI,mBAA5B,IAA+C,uBAA/C,IAA+C,CAA7C,QAAM,SAAO,WAAS,MAAI;AACpD,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,QAAM,CAAC,WAAW,gBAAgB,SAAmC;AAErE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,iBAAiB,YACrB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAEZ,QAAI;AAAY,iBAAW;AAAA,KAE7B,CAAC;AAGH,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU;AAAA;AAEZ,eAAW;AAAA,KACV,CAAC,WAAW;AAEf,QAAM,uBAAuB,YAC3B,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,YAAQ;AAAA,KAEV,CAAC,SAAS;AAGZ,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW;AAAA,KAC7C,CAAC,cAAc,eAAe;AAEjC,QAAM,UAAU,QACd,MACE,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,MAGJ,CAAC,SAAS,iBAAiB,eAAe;AAG5C,SACE,qCAAC,OAAD,MACE,qCAAC,QAAD;AAAA,IACE,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,IACL,eAAY;AAAA,IACZ;AAAA,KACI,aAAa,cAEhB,QAAQ,qCAAC,MAAD;AAAA,IAAM,MAAK;AAAA,IAAO,MAAK;AAAA,OAElC,qCAAC,YAAD;AAAA,IACE,kBAAkB;AAAA,IAClB,aAAa,cAAc;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,KAEC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import * as React from "react";
|
|
2
18
|
import React2, { useRef, useEffect, useMemo, useContext } from "react";
|
|
3
19
|
import { getAriaProps, getDataProps } from "@elliemae/ds-props-helpers";
|
|
@@ -11,10 +27,7 @@ const PopupMenuContent = React2.memo(({ options, onItemClick, onClose, popupOnKe
|
|
|
11
27
|
}, []);
|
|
12
28
|
const content = useMemo(() => options.map((option) => {
|
|
13
29
|
const { type, Icon, label = "", onClick, Content, id } = option;
|
|
14
|
-
const ariaAndDataProps = {
|
|
15
|
-
...getAriaProps(option),
|
|
16
|
-
...getDataProps(option)
|
|
17
|
-
};
|
|
30
|
+
const ariaAndDataProps = __spreadValues(__spreadValues({}, getAriaProps(option)), getDataProps(option));
|
|
18
31
|
const handleClick = (e) => {
|
|
19
32
|
onItemClick(e);
|
|
20
33
|
if (onClick)
|
|
@@ -28,26 +41,23 @@ const PopupMenuContent = React2.memo(({ options, onItemClick, onClose, popupOnKe
|
|
|
28
41
|
};
|
|
29
42
|
switch (type) {
|
|
30
43
|
case "separator":
|
|
31
|
-
return /* @__PURE__ */ React2.createElement(Separator, {
|
|
32
|
-
key: `${instanceUID}-separator-${label}
|
|
33
|
-
|
|
34
|
-
});
|
|
44
|
+
return /* @__PURE__ */ React2.createElement(Separator, __spreadValues({
|
|
45
|
+
key: `${instanceUID}-separator-${label}`
|
|
46
|
+
}, ariaAndDataProps));
|
|
35
47
|
case "custom":
|
|
36
|
-
return /* @__PURE__ */ React2.createElement(ItemWrapper, {
|
|
48
|
+
return /* @__PURE__ */ React2.createElement(ItemWrapper, __spreadValues({
|
|
37
49
|
onClick: handleClick,
|
|
38
50
|
onKeyDown: handleKeyDown,
|
|
39
51
|
key: `${instanceUID}-popup-${label}`,
|
|
40
|
-
id
|
|
41
|
-
|
|
42
|
-
}, Content && /* @__PURE__ */ React2.createElement(Content, null));
|
|
52
|
+
id
|
|
53
|
+
}, ariaAndDataProps), Content && /* @__PURE__ */ React2.createElement(Content, null));
|
|
43
54
|
default:
|
|
44
|
-
return /* @__PURE__ */ React2.createElement(ItemWrapper, {
|
|
55
|
+
return /* @__PURE__ */ React2.createElement(ItemWrapper, __spreadValues({
|
|
45
56
|
onClick: handleClick,
|
|
46
57
|
onKeyDown: handleKeyDown,
|
|
47
58
|
key: `${instanceUID}-popup-${label}`,
|
|
48
|
-
id
|
|
49
|
-
|
|
50
|
-
}, Icon && /* @__PURE__ */ React2.createElement(Icon, null), Label && /* @__PURE__ */ React2.createElement(Label, null, label));
|
|
59
|
+
id
|
|
60
|
+
}, ariaAndDataProps), Icon && /* @__PURE__ */ React2.createElement(Icon, null), Label && /* @__PURE__ */ React2.createElement(Label, null, label));
|
|
51
61
|
}
|
|
52
62
|
}), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
|
|
53
63
|
return /* @__PURE__ */ React2.createElement(List, {
|