@elliemae/ds-global-header 3.57.0-next.40 → 3.57.0-next.42
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/Toolbar/GlobalHeaderToolbar.js +1 -1
- package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js +2 -0
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map +2 -2
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/styles.js +4 -0
- package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/styles.js.map +2 -2
- package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js +1 -1
- package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js +2 -0
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map +2 -2
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/styles.js +4 -0
- package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/styles.js.map +2 -2
- package/dist/types/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.d.ts +1 -1
- package/dist/types/tests/GlobalHeader.a11y.test.d.ts +1 -0
- package/dist/types/tests/GlobalHeader.setup.test.d.ts +1 -1
- package/package.json +12 -12
|
@@ -115,7 +115,7 @@ const GlobalHeaderToolbar = () => {
|
|
|
115
115
|
role: "menuitem",
|
|
116
116
|
"data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
|
|
117
117
|
...ownerProps,
|
|
118
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outOfTheBox.SearchToggle, { setRef: setRefIndex, ...otherProps2 })
|
|
118
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outOfTheBox.SearchToggle, { label: label2, setRef: setRefIndex, ...otherProps2 })
|
|
119
119
|
},
|
|
120
120
|
`${instanceUID}-ds-toolbar-item-${label2}`
|
|
121
121
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n ownerProps,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n {...ownerProps}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n {...ownerProps}\n >\n {toolbar.map((item, index) => {\n const { type } = item;\n const setRefIndex = setRef(index);\n\n if (type === 'ds-popup-menu') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <PopupMenu\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n setRef={setRefIndex}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-app-picker') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-search-toggle') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <SearchToggle setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'custom') {\n const { label, CustomComponent } = item;\n if (!CustomComponent) return null;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n </StyledToolbarItem>\n );\n }\n\n const { label, Icon, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <StyledButton\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n innerRef={setRefIndex}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDP;AArDhB,8BAAoC;AACpC,mBAA2B;AAC3B,uBAA8B;AAC9B,mCAAsC;AACtC,8BAAyC;AACzC,oBAA6B;AAC7B,yBAAmD;AACnD,IAAAA,iBAAsE;AACtE,oCAAuC;AAEhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,sDAAuB;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,cAAW;AAAA,MACX,UAAU,eAAe,+BAAc;AAAA,MACtC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,QAAO;AAAA,UACP,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,QAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAW;AAAA,UACX,UAAU;AAAA,UACV,eAAa,iDAAyB,QAAQ;AAAA,UAC7C,GAAG;AAAA,UAEH,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,kBAAM,EAAE,KAAK,IAAI;AACjB,kBAAM,cAAc,OAAO,KAAK;AAEhC,gBAAI,SAAS,iBAAiB;AAC5B,oBAAM,EAAE,OAAAC,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAOD;AAAA,sBACP,QAAQ;AAAA,sBACP,GAAGC;AAAA;AAAA,kBACN;AAAA;AAAA,gBARK,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAS9C;AAAA,YAEJ;AACA,gBAAI,SAAS,iBAAiB;AAC5B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ,sDAAC,gCAAU,OAAOD,QAAO,QAAQ,aAAc,GAAGC,aAAY;AAAA;AAAA,gBAJzD,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAK9C;AAAA,YAEJ;AACA,gBAAI,SAAS,oBAAoB;AAC/B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,iDAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ,sDAAC,mCAAa,QAAQ,aAAc,
|
|
4
|
+
"sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n ownerProps,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n {...ownerProps}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n {...ownerProps}\n >\n {toolbar.map((item, index) => {\n const { type } = item;\n const setRefIndex = setRef(index);\n\n if (type === 'ds-popup-menu') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <PopupMenu\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n setRef={setRefIndex}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-app-picker') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-search-toggle') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <SearchToggle label={label} setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'custom') {\n const { label, CustomComponent } = item;\n if (!CustomComponent) return null;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n </StyledToolbarItem>\n );\n }\n\n const { label, Icon, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <StyledButton\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n innerRef={setRefIndex}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_styles", "label", "otherProps"]
|
|
7
7
|
}
|
|
@@ -45,6 +45,7 @@ var import_useCallbackAfterRender = require("./useCallbackAfterRender.js");
|
|
|
45
45
|
const SearchToggle = ({
|
|
46
46
|
setRef,
|
|
47
47
|
componentProps,
|
|
48
|
+
label,
|
|
48
49
|
...otherProps
|
|
49
50
|
}) => {
|
|
50
51
|
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
|
@@ -137,6 +138,7 @@ const SearchToggle = ({
|
|
|
137
138
|
onClick: handleOnClick,
|
|
138
139
|
innerRef: handleTriggerRefs,
|
|
139
140
|
"data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
|
|
141
|
+
"aria-label": label,
|
|
140
142
|
...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
|
|
141
143
|
type: "button",
|
|
142
144
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSNavSearchBox } from '@elliemae/ds-form';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const internalTriggerRef = 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 triggerRef,\n searchContainerRef,\n } = componentProps;\n\n const schedule = useCallbackAfterRender();\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\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.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n }\n if (onKeyDown) onKeyDown(e);\n },\n [focusTrigger, onKeyDown, schedule, userIsOpen],\n );\n\n const handleOnBlur = useCallback(() => {\n const contains = containerRef.current?.contains(document.activeElement);\n if (value === '' && !contains) setIsOpen(false);\n schedule(focusTrigger);\n }, [focusTrigger, schedule, value]);\n\n const handleNavInputRefs = useCallback(\n (searchNavRef: HTMLInputElement) => {\n setRef(searchNavRef);\n internalInputRef.current = searchNavRef;\n },\n [setRef],\n );\n\n const handleTriggerRefs = useCallback(\n (buttonRef: HTMLButtonElement) => {\n mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n setRef(buttonRef);\n },\n [setRef, triggerRef],\n );\n\n return userIsOpen || isOpen ? (\n <StyledNavSearchBoxContainer\n onKeyDown={handleOnKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n onBlur={handleOnBlur}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n >\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={handleNavInputRefs}\n autoFocus\n />\n </StyledNavSearchBoxContainer>\n ) : (\n <StyledButton\n onClick={handleOnClick}\n innerRef={handleTriggerRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <Search />\n </StyledButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { DSNavSearchBox } from '@elliemae/ds-form';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n setRef,\n componentProps,\n label,\n ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const internalTriggerRef = 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 triggerRef,\n searchContainerRef,\n } = componentProps;\n\n const schedule = useCallbackAfterRender();\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\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.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n }\n if (onKeyDown) onKeyDown(e);\n },\n [focusTrigger, onKeyDown, schedule, userIsOpen],\n );\n\n const handleOnBlur = useCallback(() => {\n const contains = containerRef.current?.contains(document.activeElement);\n if (value === '' && !contains) setIsOpen(false);\n schedule(focusTrigger);\n }, [focusTrigger, schedule, value]);\n\n const handleNavInputRefs = useCallback(\n (searchNavRef: HTMLInputElement) => {\n setRef(searchNavRef);\n internalInputRef.current = searchNavRef;\n },\n [setRef],\n );\n\n const handleTriggerRefs = useCallback(\n (buttonRef: HTMLButtonElement) => {\n mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n setRef(buttonRef);\n },\n [setRef, triggerRef],\n );\n\n return userIsOpen || isOpen ? (\n <StyledNavSearchBoxContainer\n onKeyDown={handleOnKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n onBlur={handleOnBlur}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n >\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={handleNavInputRefs}\n autoFocus\n />\n </StyledNavSearchBoxContainer>\n ) : (\n <StyledButton\n onClick={handleOnClick}\n innerRef={handleTriggerRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n aria-label={label}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <Search />\n </StyledButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FjB;AA7FN,qBAA+B;AAC/B,sBAAuB;AACvB,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,8BAAyC;AAEzC,oBAA6B;AAC7B,IAAAA,iBAA4C;AAC5C,oCAAuC;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,uBAAmB,qBAAgC,IAAI;AAC7D,QAAM,yBAAqB,qBAAiC,IAAI;AAChE,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,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,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,yBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,sCAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAU,4BAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAC5D,cAAY;AAAA,MACX,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
|
|
6
6
|
"names": ["import_styles"]
|
|
7
7
|
}
|
|
@@ -82,5 +82,9 @@ const StyledNavSearchBoxContainer = (0, import_ds_system.styled)("div", {
|
|
|
82
82
|
outline: none;
|
|
83
83
|
box-shadow: none;
|
|
84
84
|
}
|
|
85
|
+
|
|
86
|
+
& .em-ds-input-addon-wrapper__addon--right > div > div {
|
|
87
|
+
color: ${({ theme }) => theme.colors.neutral["500"]};
|
|
88
|
+
}
|
|
85
89
|
`;
|
|
86
90
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/styles.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../../../exported-related/theming.js';\n\nexport const StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n min-width: 260px;\n\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n\n & .em-ds-input {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input:focus {\n border: none;\n box-shadow: none;\n }\n\n & .em-ds-input.em-ds-input--clearable:hover {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper {\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper:hover {\n outline: none;\n }\n\n & .em-ds-input-addon-wrapper__addon:hover {\n outline: none;\n }\n\n & .em-ds-input:not(.floating-label-input-controller):hover:active {\n border: none;\n outline: none;\n box-shadow: none;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAwD;AAEjD,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ,cAAc;AAClD,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../../../exported-related/theming.js';\n\nexport const StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n min-width: 260px;\n\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n\n & .em-ds-input {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input:focus {\n border: none;\n box-shadow: none;\n }\n\n & .em-ds-input.em-ds-input--clearable:hover {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper {\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper:hover {\n outline: none;\n }\n\n & .em-ds-input-addon-wrapper__addon:hover {\n outline: none;\n }\n\n & .em-ds-input:not(.floating-label-input-controller):hover:active {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper__addon--right > div > div {\n color: ${({ theme }) => theme.colors.neutral['500']};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAwD;AAEjD,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ,cAAc;AAClD,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aA8C7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -82,7 +82,7 @@ const GlobalHeaderToolbar = () => {
|
|
|
82
82
|
role: "menuitem",
|
|
83
83
|
"data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
|
|
84
84
|
...ownerProps,
|
|
85
|
-
children: /* @__PURE__ */ jsx(SearchToggle, { setRef: setRefIndex, ...otherProps2 })
|
|
85
|
+
children: /* @__PURE__ */ jsx(SearchToggle, { label: label2, setRef: setRefIndex, ...otherProps2 })
|
|
86
86
|
},
|
|
87
87
|
`${instanceUID}-ds-toolbar-item-${label2}`
|
|
88
88
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n ownerProps,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n {...ownerProps}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n {...ownerProps}\n >\n {toolbar.map((item, index) => {\n const { type } = item;\n const setRefIndex = setRef(index);\n\n if (type === 'ds-popup-menu') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <PopupMenu\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n setRef={setRefIndex}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-app-picker') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-search-toggle') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <SearchToggle setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'custom') {\n const { label, CustomComponent } = item;\n if (!CustomComponent) return null;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n </StyledToolbarItem>\n );\n }\n\n const { label, Icon, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <StyledButton\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n innerRef={setRefIndex}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqDP;AArDhB,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,WAAW,WAAW,oBAAoB;AACnD,SAAS,YAAY,wBAAwB,yBAAyB;AACtE,SAAS,8BAA8B;AAEhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,uBAAuB;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,cAAW;AAAA,MACX,UAAU,eAAe,cAAc;AAAA,MACtC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,QAAO;AAAA,UACP,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,QAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAW;AAAA,UACX,UAAU;AAAA,UACV,eAAa,yBAAyB,QAAQ;AAAA,UAC7C,GAAG;AAAA,UAEH,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,kBAAM,EAAE,KAAK,IAAI;AACjB,kBAAM,cAAc,OAAO,KAAK;AAEhC,gBAAI,SAAS,iBAAiB;AAC5B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,yBAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAOD;AAAA,sBACP,QAAQ;AAAA,sBACP,GAAGC;AAAA;AAAA,kBACN;AAAA;AAAA,gBARK,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAS9C;AAAA,YAEJ;AACA,gBAAI,SAAS,iBAAiB;AAC5B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,yBAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ,8BAAC,aAAU,OAAOD,QAAO,QAAQ,aAAc,GAAGC,aAAY;AAAA;AAAA,gBAJzD,GAAG,WAAW,oBAAoBD,MAAK;AAAA,cAK9C;AAAA,YAEJ;AACA,gBAAI,SAAS,oBAAoB;AAC/B,oBAAM,EAAE,OAAAA,QAAO,GAAGC,YAAW,IAAI;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,eAAa,yBAAyB,QAAQ;AAAA,kBAC7C,GAAG;AAAA,kBAEJ,8BAAC,gBAAa,QAAQ,aAAc,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n ownerProps,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n {...ownerProps}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n {...ownerProps}\n >\n {toolbar.map((item, index) => {\n const { type } = item;\n const setRefIndex = setRef(index);\n\n if (type === 'ds-popup-menu') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <PopupMenu\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n setRef={setRefIndex}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-app-picker') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'ds-search-toggle') {\n const { label, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <SearchToggle label={label} setRef={setRefIndex} {...otherProps} />\n </StyledToolbarItem>\n );\n }\n if (type === 'custom') {\n const { label, CustomComponent } = item;\n if (!CustomComponent) return null;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n </StyledToolbarItem>\n );\n }\n\n const { label, Icon, ...otherProps } = item;\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n {...ownerProps}\n >\n <StyledButton\n title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n innerRef={setRefIndex}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["label", "otherProps"]
|
|
7
7
|
}
|
|
@@ -12,6 +12,7 @@ import { useCallbackAfterRender } from "./useCallbackAfterRender.js";
|
|
|
12
12
|
const SearchToggle = ({
|
|
13
13
|
setRef,
|
|
14
14
|
componentProps,
|
|
15
|
+
label,
|
|
15
16
|
...otherProps
|
|
16
17
|
}) => {
|
|
17
18
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -104,6 +105,7 @@ const SearchToggle = ({
|
|
|
104
105
|
onClick: handleOnClick,
|
|
105
106
|
innerRef: handleTriggerRefs,
|
|
106
107
|
"data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
|
|
108
|
+
"aria-label": label,
|
|
107
109
|
...getGlobalAttributes(otherProps),
|
|
108
110
|
type: "button",
|
|
109
111
|
children: /* @__PURE__ */ jsx(Search, {})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSNavSearchBox } from '@elliemae/ds-form';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const internalTriggerRef = 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 triggerRef,\n searchContainerRef,\n } = componentProps;\n\n const schedule = useCallbackAfterRender();\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\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.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n }\n if (onKeyDown) onKeyDown(e);\n },\n [focusTrigger, onKeyDown, schedule, userIsOpen],\n );\n\n const handleOnBlur = useCallback(() => {\n const contains = containerRef.current?.contains(document.activeElement);\n if (value === '' && !contains) setIsOpen(false);\n schedule(focusTrigger);\n }, [focusTrigger, schedule, value]);\n\n const handleNavInputRefs = useCallback(\n (searchNavRef: HTMLInputElement) => {\n setRef(searchNavRef);\n internalInputRef.current = searchNavRef;\n },\n [setRef],\n );\n\n const handleTriggerRefs = useCallback(\n (buttonRef: HTMLButtonElement) => {\n mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n setRef(buttonRef);\n },\n [setRef, triggerRef],\n );\n\n return userIsOpen || isOpen ? (\n <StyledNavSearchBoxContainer\n onKeyDown={handleOnKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n onBlur={handleOnBlur}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n >\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={handleNavInputRefs}\n autoFocus\n />\n </StyledNavSearchBoxContainer>\n ) : (\n <StyledButton\n onClick={handleOnClick}\n innerRef={handleTriggerRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <Search />\n </StyledButton>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSNavSearchBox } from '@elliemae/ds-form';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n setRef,\n componentProps,\n label,\n ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const internalTriggerRef = 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 triggerRef,\n searchContainerRef,\n } = componentProps;\n\n const schedule = useCallbackAfterRender();\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\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.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n }\n if (onKeyDown) onKeyDown(e);\n },\n [focusTrigger, onKeyDown, schedule, userIsOpen],\n );\n\n const handleOnBlur = useCallback(() => {\n const contains = containerRef.current?.contains(document.activeElement);\n if (value === '' && !contains) setIsOpen(false);\n schedule(focusTrigger);\n }, [focusTrigger, schedule, value]);\n\n const handleNavInputRefs = useCallback(\n (searchNavRef: HTMLInputElement) => {\n setRef(searchNavRef);\n internalInputRef.current = searchNavRef;\n },\n [setRef],\n );\n\n const handleTriggerRefs = useCallback(\n (buttonRef: HTMLButtonElement) => {\n mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n setRef(buttonRef);\n },\n [setRef, triggerRef],\n );\n\n return userIsOpen || isOpen ? (\n <StyledNavSearchBoxContainer\n onKeyDown={handleOnKeyDown}\n innerRef={mergeRefs(searchContainerRef, containerRef)}\n onBlur={handleOnBlur}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n >\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={handleNavInputRefs}\n autoFocus\n />\n </StyledNavSearchBoxContainer>\n ) : (\n <StyledButton\n onClick={handleOnClick}\n innerRef={handleTriggerRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n aria-label={label}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <Search />\n </StyledButton>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6FjB;AA7FN,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,gCAAgC;AAEzC,SAAS,oBAAoB;AAC7B,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,mBAAmB,OAAgC,IAAI;AAC7D,QAAM,qBAAqB,OAAiC,IAAI;AAChE,QAAM,eAAe,OAA8B,IAAI;AAEvD,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,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,qBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,gBAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,UAAU,UAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAC5D,cAAY;AAAA,MACX,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,UAAO;AAAA;AAAA,EACV;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,6 +49,10 @@ const StyledNavSearchBoxContainer = styled("div", {
|
|
|
49
49
|
outline: none;
|
|
50
50
|
box-shadow: none;
|
|
51
51
|
}
|
|
52
|
+
|
|
53
|
+
& .em-ds-input-addon-wrapper__addon--right > div > div {
|
|
54
|
+
color: ${({ theme }) => theme.colors.neutral["500"]};
|
|
55
|
+
}
|
|
52
56
|
`;
|
|
53
57
|
export {
|
|
54
58
|
StyledNavSearchBoxContainer
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../../../exported-related/theming.js';\n\nexport const StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n min-width: 260px;\n\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n\n & .em-ds-input {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input:focus {\n border: none;\n box-shadow: none;\n }\n\n & .em-ds-input.em-ds-input--clearable:hover {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper {\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper:hover {\n outline: none;\n }\n\n & .em-ds-input-addon-wrapper__addon:hover {\n outline: none;\n }\n\n & .em-ds-input:not(.floating-label-input-controller):hover:active {\n border: none;\n outline: none;\n box-shadow: none;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ,cAAc;AAClD,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../../../exported-related/theming.js';\n\nexport const StyledNavSearchBoxContainer = styled('div', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n})`\n background: ${({ theme }) => theme.colors.neutral['000']};\n position: relative;\n min-width: 260px;\n\n & .em-ds-button {\n margin-right: 2px;\n height: 24px;\n width: 24px;\n }\n\n & .em-ds-input {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input:focus {\n border: none;\n box-shadow: none;\n }\n\n & .em-ds-input.em-ds-input--clearable:hover {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper {\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper:hover {\n outline: none;\n }\n\n & .em-ds-input-addon-wrapper__addon:hover {\n outline: none;\n }\n\n & .em-ds-input:not(.floating-label-input-controller):hover:active {\n border: none;\n outline: none;\n box-shadow: none;\n }\n\n & .em-ds-input-addon-wrapper__addon--right > div > div {\n color: ${({ theme }) => theme.colors.neutral['500']};\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ,cAAc;AAClD,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aA8C7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';
|
|
2
|
-
export declare const SearchToggle: ({ setRef, componentProps, ...otherProps }: DSGlobalHeaderT.SearchToggleProps) => JSX.Element;
|
|
2
|
+
export declare const SearchToggle: ({ setRef, componentProps, label, ...otherProps }: DSGlobalHeaderT.SearchToggleProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "3.57.0-next.
|
|
3
|
+
"version": "3.57.0-next.42",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"files": [
|
|
@@ -45,19 +45,19 @@
|
|
|
45
45
|
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@elliemae/ds-app-picker": "3.57.0-next.
|
|
49
|
-
"@elliemae/ds-form": "3.57.0-next.
|
|
50
|
-
"@elliemae/ds-grid": "3.57.0-next.
|
|
51
|
-
"@elliemae/ds-hooks-fontsize-media": "3.57.0-next.
|
|
52
|
-
"@elliemae/ds-icons": "3.57.0-next.
|
|
53
|
-
"@elliemae/ds-popperjs": "3.57.0-next.
|
|
54
|
-
"@elliemae/ds-props-helpers": "3.57.0-next.
|
|
55
|
-
"@elliemae/ds-system": "3.57.0-next.
|
|
48
|
+
"@elliemae/ds-app-picker": "3.57.0-next.42",
|
|
49
|
+
"@elliemae/ds-form": "3.57.0-next.42",
|
|
50
|
+
"@elliemae/ds-grid": "3.57.0-next.42",
|
|
51
|
+
"@elliemae/ds-hooks-fontsize-media": "3.57.0-next.42",
|
|
52
|
+
"@elliemae/ds-icons": "3.57.0-next.42",
|
|
53
|
+
"@elliemae/ds-popperjs": "3.57.0-next.42",
|
|
54
|
+
"@elliemae/ds-props-helpers": "3.57.0-next.42",
|
|
55
|
+
"@elliemae/ds-system": "3.57.0-next.42",
|
|
56
56
|
"uid": "catalog:"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@elliemae/ds-monorepo-devops": "3.57.0-next.
|
|
60
|
-
"@elliemae/ds-test-utils": "3.57.0-next.
|
|
59
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-next.42",
|
|
60
|
+
"@elliemae/ds-test-utils": "3.57.0-next.42",
|
|
61
61
|
"@elliemae/pui-cli": "catalog:",
|
|
62
62
|
"jest": "catalog:",
|
|
63
63
|
"styled-components": "catalog:"
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"access": "public",
|
|
73
73
|
"typeSafety": true
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "9137b3564bc7399c85ae12674d2e794f78e71e78"
|
|
76
76
|
}
|