@elliemae/ds-global-header 3.7.2-next.0 → 3.8.0-next.0
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/parts/Breadcrumb/GlobalHeaderBreadcrumb.js +2 -2
- package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map +2 -2
- package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js +2 -1
- package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js +2 -2
- package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map +2 -2
- package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js +2 -1
- package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map +2 -2
- package/package.json +8 -8
|
@@ -35,7 +35,7 @@ var import_useGlobalHeaderBreadcrumb = require("./useGlobalHeaderBreadcrumb");
|
|
|
35
35
|
var import_PureBreadcrumb = require("./PureBreadcrumb");
|
|
36
36
|
var import_exported_related = require("../../exported-related");
|
|
37
37
|
const GlobalHeaderBreadcrumb = () => {
|
|
38
|
-
const { breadcrumb, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = (0, import_useGlobalHeaderBreadcrumb.useGlobalHeaderBreadcrumb)();
|
|
38
|
+
const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = (0, import_useGlobalHeaderBreadcrumb.useGlobalHeaderBreadcrumb)();
|
|
39
39
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBreadcrumbContainer, {
|
|
40
40
|
height: "100%",
|
|
41
41
|
alignItems: "center",
|
|
@@ -52,7 +52,7 @@ const GlobalHeaderBreadcrumb = () => {
|
|
|
52
52
|
}),
|
|
53
53
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledBreadcrumbList, {
|
|
54
54
|
"data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.LIST,
|
|
55
|
-
children: breadcrumb?.map((item) => {
|
|
55
|
+
children: CustomNavigation !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomNavigation, {}) : breadcrumb?.map((item) => {
|
|
56
56
|
const { onClick, isSelected, label, hasNext, id, ...rest } = item;
|
|
57
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureBreadcrumb.PureBreadcrumb, {
|
|
58
58
|
label,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb';\nimport { PureBreadcrumb } from './PureBreadcrumb';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID }
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,cAAc,eAAe,iBAAiB,YAAY,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb';\nimport { PureBreadcrumb } from './PureBreadcrumb';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={showIconOnly} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, id, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,QAC9F,4DAA0B;AAE5B,SACE,6CAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,cAAW;AAAA,IACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC5B,aAAY;AAAA,IACZ,eAAa,iDAAyB,WAAW;AAAA,IAEjD;AAAA,kDAAC;AAAA,QAAW;AAAA,QAA4B,eAAW;AAAA,QAAC,eAAa,iDAAyB,WAAW;AAAA,OAAM;AAAA,MAC3G,4CAAC;AAAA,QAAqB,eAAa,iDAAyB,WAAW;AAAA,QACpE,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,OAAO,KAAK,IAAI;AAC7D,iBACE,4CAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,YAC5C,OAAG,yCAAoB,IAAI;AAAA,YAC5B;AAAA,YACA,QAAQ,WAAW;AAAA,aAJd,GAAG,+BAA+B,OAKzC;AAAA,QAEJ,CAAC;AAAA,OAEL;AAAA,MACA,4CAAC;AAAA,QAAI,IAAG;AAAA,QAA4B,KAAK;AAAA,QAAe,eAAW;AAAA,OAAC;AAAA;AAAA,GACtE;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,7 +32,7 @@ var import_react = require("react");
|
|
|
32
32
|
var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext");
|
|
33
33
|
const useGlobalHeaderBreadcrumb = () => {
|
|
34
34
|
const {
|
|
35
|
-
props: { breadcrumb },
|
|
35
|
+
props: { breadcrumb, CustomNavigation },
|
|
36
36
|
instanceUID,
|
|
37
37
|
showIconOnly,
|
|
38
38
|
setShowIconOnly
|
|
@@ -63,6 +63,7 @@ const useGlobalHeaderBreadcrumb = () => {
|
|
|
63
63
|
);
|
|
64
64
|
return {
|
|
65
65
|
breadcrumb,
|
|
66
|
+
CustomNavigation,
|
|
66
67
|
showIconOnly,
|
|
67
68
|
flexRegionRef,
|
|
68
69
|
handleOnKeyDown,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,mCAAsC;
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n CustomNavigation: React.ComponentType;\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb, CustomNavigation },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n CustomNavigation,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,mCAAsC;AAY/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,oBAAgB,qBAAsB,IAAI;AAChD,QAAM,oBAAgB,qBAAuB,IAAI;AAEjD,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,SAAS;AAC7F,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,eAAe,CAAC;AAElD,QAAM,sBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\n\nexport declare namespace DSGlobalHeaderInternalsT {\n export interface DefaultProps {\n Logo: React.ComponentType;\n LogoWithBrand: React.ComponentType;\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n toolbar: DSGlobalHeaderInternalsT.ToolbarItem[];\n }\n\n export type InternalProps = DefaultProps;\n\n export interface BreadcrumbItem {\n label: string;\n id: string;\n hasNext?: boolean;\n isSelected?: boolean;\n onClick?: (event?: React.MouseEvent) => void;\n onKeyDown?: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n length: number;\n }\n\n export interface ToolbarItem {\n type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle' | 'custom';\n onKeyPress?: (event: React.KeyboardEvent) => void;\n onClick?: (event: React.MouseEvent) => void;\n id?: string;\n label: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n componentProps?: PopupMenuComponentProps | ToggleSearchComponentProps | AppPickerComponentProps;\n CustomComponent?: React.ComponentType<{ item: ToolbarItem; role: string; setRef: (ref: HTMLElement) => void }>;\n }\n\n interface PopupMenuItem {\n type?: 'separator' | 'custom';\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n Content?: React.ComponentType;\n id: string;\n }\n\n //* ****** Component Props ***** *//\n interface ToggleSearchComponentProps {\n onNext: () => void;\n onPrevious: () => void;\n currentResultIndex: number;\n totalResults: number;\n placeholder: string;\n value: string;\n onChange: () => void;\n onBlur: () => void;\n onClear: () => void;\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onClick: (event: React.MouseEvent) => void;\n triggerRef: React.MutableRefObject<HTMLButtonElement>;\n searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n }\n\n type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n triggerOnClick?: (event: React.MouseEvent) => void;\n };\n\n interface PopupMenuComponentProps {\n onClickOutside?: (event: React.MouseEvent) => void;\n onKeyPress: (event: React.KeyboardEvent) => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n isOpen: boolean;\n options: PopupMenuContentItem[];\n closeOnClick: boolean;\n }\n\n //* ****** ***** ***** *//\n\n interface SearchToggleProps {\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: ToggleSearchComponentProps;\n }\n\n interface AppPickerProps {\n label: string;\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: AppPickerComponentProps;\n }\n\n export interface PopupMenuContentItem extends Record<string, unknown> {\n type?: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n closeOnClick?: boolean;\n Content?: React.ComponentType;\n }\n\n export interface PopupMenuContentProps {\n options: PopupMenuItem[];\n onItemClick: () => void;\n onClose: () => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface PopupProps {\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n id?: string;\n closeOnClick?: boolean;\n onKeyPress?: (event: React.KeyboardEvent) => void;\n title?: string;\n options?: PopupMenuContentItem[];\n onClick?: (event: React.MouseEvent) => void;\n componentProps: PopupMenuComponentProps;\n setRef: (ref: HTMLElement) => void;\n }\n\n export interface Context {\n showIconOnly: boolean;\n setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n instanceUID: string;\n globalHeaderToolbarGrid: string[];\n props: InternalProps;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\n\nexport declare namespace DSGlobalHeaderInternalsT {\n export interface DefaultProps {\n Logo: React.ComponentType;\n LogoWithBrand: React.ComponentType;\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n toolbar: DSGlobalHeaderInternalsT.ToolbarItem[];\n CustomNavigation: React.ComponentType;\n }\n\n export type InternalProps = DefaultProps;\n\n export interface BreadcrumbItem {\n label: string;\n id: string;\n hasNext?: boolean;\n isSelected?: boolean;\n onClick?: (event?: React.MouseEvent) => void;\n onKeyDown?: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n length: number;\n }\n\n export interface ToolbarItem {\n type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle' | 'custom';\n onKeyPress?: (event: React.KeyboardEvent) => void;\n onClick?: (event: React.MouseEvent) => void;\n id?: string;\n label: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n componentProps?: PopupMenuComponentProps | ToggleSearchComponentProps | AppPickerComponentProps;\n CustomComponent?: React.ComponentType<{ item: ToolbarItem; role: string; setRef: (ref: HTMLElement) => void }>;\n }\n\n interface PopupMenuItem {\n type?: 'separator' | 'custom';\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n Content?: React.ComponentType;\n id: string;\n }\n\n //* ****** Component Props ***** *//\n interface ToggleSearchComponentProps {\n onNext: () => void;\n onPrevious: () => void;\n currentResultIndex: number;\n totalResults: number;\n placeholder: string;\n value: string;\n onChange: () => void;\n onBlur: () => void;\n onClear: () => void;\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onClick: (event: React.MouseEvent) => void;\n triggerRef: React.MutableRefObject<HTMLButtonElement>;\n searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n }\n\n type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n triggerOnClick?: (event: React.MouseEvent) => void;\n };\n\n interface PopupMenuComponentProps {\n onClickOutside?: (event: React.MouseEvent) => void;\n onKeyPress: (event: React.KeyboardEvent) => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n isOpen: boolean;\n options: PopupMenuContentItem[];\n closeOnClick: boolean;\n }\n\n //* ****** ***** ***** *//\n\n interface SearchToggleProps {\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: ToggleSearchComponentProps;\n }\n\n interface AppPickerProps {\n label: string;\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: AppPickerComponentProps;\n }\n\n export interface PopupMenuContentItem extends Record<string, unknown> {\n type?: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n closeOnClick?: boolean;\n Content?: React.ComponentType;\n }\n\n export interface PopupMenuContentProps {\n options: PopupMenuItem[];\n onItemClick: () => void;\n onClose: () => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface PopupProps {\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n id?: string;\n closeOnClick?: boolean;\n onKeyPress?: (event: React.KeyboardEvent) => void;\n title?: string;\n options?: PopupMenuContentItem[];\n onClick?: (event: React.MouseEvent) => void;\n componentProps: PopupMenuComponentProps;\n setRef: (ref: HTMLElement) => void;\n }\n\n export interface Context {\n showIconOnly: boolean;\n setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n instanceUID: string;\n globalHeaderToolbarGrid: string[];\n props: InternalProps;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ import { useGlobalHeaderBreadcrumb } from "./useGlobalHeaderBreadcrumb";
|
|
|
6
6
|
import { PureBreadcrumb } from "./PureBreadcrumb";
|
|
7
7
|
import { DSGlobalHeaderDatatestid } from "../../exported-related";
|
|
8
8
|
const GlobalHeaderBreadcrumb = () => {
|
|
9
|
-
const { breadcrumb, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = useGlobalHeaderBreadcrumb();
|
|
9
|
+
const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = useGlobalHeaderBreadcrumb();
|
|
10
10
|
return /* @__PURE__ */ jsxs(StyledBreadcrumbContainer, {
|
|
11
11
|
height: "100%",
|
|
12
12
|
alignItems: "center",
|
|
@@ -23,7 +23,7 @@ const GlobalHeaderBreadcrumb = () => {
|
|
|
23
23
|
}),
|
|
24
24
|
/* @__PURE__ */ jsx(StyledBreadcrumbList, {
|
|
25
25
|
"data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.LIST,
|
|
26
|
-
children: breadcrumb?.map((item) => {
|
|
26
|
+
children: CustomNavigation !== void 0 ? /* @__PURE__ */ jsx(CustomNavigation, {}) : breadcrumb?.map((item) => {
|
|
27
27
|
const { onClick, isSelected, label, hasNext, id, ...rest } = item;
|
|
28
28
|
return /* @__PURE__ */ jsx(PureBreadcrumb, {
|
|
29
29
|
label,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb';\nimport { PureBreadcrumb } from './PureBreadcrumb';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID }
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,cAAc,eAAe,iBAAiB,YAAY,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb';\nimport { PureBreadcrumb } from './PureBreadcrumb';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={showIconOnly} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, id, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,IAC9F,0BAA0B;AAE5B,SACE,qBAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,cAAW;AAAA,IACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC5B,aAAY;AAAA,IACZ,eAAa,yBAAyB,WAAW;AAAA,IAEjD;AAAA,0BAAC;AAAA,QAAW;AAAA,QAA4B,eAAW;AAAA,QAAC,eAAa,yBAAyB,WAAW;AAAA,OAAM;AAAA,MAC3G,oBAAC;AAAA,QAAqB,eAAa,yBAAyB,WAAW;AAAA,QACpE,+BAAqB,SACpB,oBAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,OAAO,KAAK,IAAI;AAC7D,iBACE,oBAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,YAC5C,GAAG,oBAAoB,IAAI;AAAA,YAC5B;AAAA,YACA,QAAQ,WAAW;AAAA,aAJd,GAAG,+BAA+B,OAKzC;AAAA,QAEJ,CAAC;AAAA,OAEL;AAAA,MACA,oBAAC;AAAA,QAAI,IAAG;AAAA,QAA4B,KAAK;AAAA,QAAe,eAAW;AAAA,OAAC;AAAA;AAAA,GACtE;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { useEffect, useRef, useContext, useCallback } from "react";
|
|
|
3
3
|
import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext";
|
|
4
4
|
const useGlobalHeaderBreadcrumb = () => {
|
|
5
5
|
const {
|
|
6
|
-
props: { breadcrumb },
|
|
6
|
+
props: { breadcrumb, CustomNavigation },
|
|
7
7
|
instanceUID,
|
|
8
8
|
showIconOnly,
|
|
9
9
|
setShowIconOnly
|
|
@@ -34,6 +34,7 @@ const useGlobalHeaderBreadcrumb = () => {
|
|
|
34
34
|
);
|
|
35
35
|
return {
|
|
36
36
|
breadcrumb,
|
|
37
|
+
CustomNavigation,
|
|
37
38
|
showIconOnly,
|
|
38
39
|
flexRegionRef,
|
|
39
40
|
handleOnKeyDown,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,WAAW,QAAQ,YAAY,mBAAmB;AAClE,SAAS,6BAA6B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n CustomNavigation: React.ComponentType;\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb, CustomNavigation },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n CustomNavigation,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,WAAW,QAAQ,YAAY,mBAAmB;AAClE,SAAS,6BAA6B;AAY/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,gBAAgB,OAAsB,IAAI;AAChD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,SAAS;AAC7F,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,eAAe,CAAC;AAElD,QAAM,kBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"files": [
|
|
@@ -135,13 +135,13 @@
|
|
|
135
135
|
"indent": 4
|
|
136
136
|
},
|
|
137
137
|
"dependencies": {
|
|
138
|
-
"@elliemae/ds-app-picker": "3.
|
|
139
|
-
"@elliemae/ds-form": "3.
|
|
140
|
-
"@elliemae/ds-grid": "3.
|
|
141
|
-
"@elliemae/ds-icons": "3.
|
|
142
|
-
"@elliemae/ds-popperjs": "3.
|
|
143
|
-
"@elliemae/ds-system": "3.
|
|
144
|
-
"@elliemae/ds-utilities": "3.
|
|
138
|
+
"@elliemae/ds-app-picker": "3.8.0-next.0",
|
|
139
|
+
"@elliemae/ds-form": "3.8.0-next.0",
|
|
140
|
+
"@elliemae/ds-grid": "3.8.0-next.0",
|
|
141
|
+
"@elliemae/ds-icons": "3.8.0-next.0",
|
|
142
|
+
"@elliemae/ds-popperjs": "3.8.0-next.0",
|
|
143
|
+
"@elliemae/ds-system": "3.8.0-next.0",
|
|
144
|
+
"@elliemae/ds-utilities": "3.8.0-next.0",
|
|
145
145
|
"uid": "~2.0.0"
|
|
146
146
|
},
|
|
147
147
|
"devDependencies": {
|