@elliemae/ds-global-header 3.24.2 → 3.25.0-next.2

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.
Files changed (27) hide show
  1. package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js +3 -2
  2. package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
  3. package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js +1 -1
  4. package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js.map +2 -2
  5. package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js +1 -1
  6. package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map +2 -2
  7. package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js +3 -3
  8. package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js.map +2 -2
  9. package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js +2 -2
  10. package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map +2 -2
  11. package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js +3 -2
  12. package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
  13. package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js +1 -1
  14. package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js.map +2 -2
  15. package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js +1 -1
  16. package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map +2 -2
  17. package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js +3 -3
  18. package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js.map +2 -2
  19. package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js +2 -2
  20. package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map +2 -2
  21. package/dist/types/parts/Breadcrumb/styles.d.ts +7 -7
  22. package/dist/types/parts/Logo/styles.d.ts +1 -1
  23. package/dist/types/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/styles.d.ts +5 -5
  24. package/dist/types/parts/Toolbar/outOfTheBox/SearchToggle/styles.d.ts +1 -1
  25. package/dist/types/parts/Toolbar/styles.d.ts +3 -3
  26. package/dist/types/parts/styles.d.ts +2 -2
  27. package/package.json +10 -10
package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js CHANGED
@@ -58,7 +58,7 @@ const GlobalHeaderToolbar = () => {
58
58
  cols: globalHeaderToolbarGrid,
59
59
  role: "toolbar",
60
60
  onKeyDown: keyboardNavigation,
61
- ref: listRef,
61
+ innerRef: listRef,
62
62
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST,
63
63
  children: toolbar.map((item, index) => {
64
64
  const {
@@ -150,7 +150,8 @@ const GlobalHeaderToolbar = () => {
150
150
  title: label,
151
151
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
152
152
  id,
153
- ref: setRef(index),
153
+ role: "menuitem",
154
+ innerRef: setRef(index),
154
155
  ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
155
156
  type: "button",
156
157
  children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map CHANGED
@@ -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 React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n onKeyDown={keyboardNavigation}\n ref={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n ref={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\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;ADoDL;AApDlB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,IAAAA,iBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,sDAAuB;AAEvE,SACE,4CAAC,wCAAuB,eAAa,iDAAyB,QAAQ,WAAW,cAAW,WAC1F;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAW;AAAA,MACX,KAAK;AAAA,MACL,eAAa,iDAAyB,QAAQ;AAAA,MAE7C,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,iBAAiB,CAAC;AAAA,UAClB,GAAG;AAAA,QACL,IAAI;AAEJ,gBAAQ,MAAM;AAAA,UACZ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cAZK,GAAG,+BAA+B;AAAA,YAazC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cATK,GAAG,+BAA+B;AAAA,YAUzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cARK,GAAG,+BAA+B;AAAA,YASzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,iDAAyB,QAAQ;AAAA,gBAE7C,6BAAmB,4CAAC,mBAAgB,MAAY,QAAQ,OAAO,KAAK,GAAG;AAAA;AAAA,cAHnE,GAAG,+BAA+B;AAAA,YAIzC;AAAA,UAGJ;AACE,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,OAAO;AAAA,oBACP,eAAa,iDAAyB,QAAQ;AAAA,oBAC9C;AAAA,oBACA,KAAK,OAAO,KAAK;AAAA,oBAChB,OAAG,6CAAoB,UAAU;AAAA,oBAClC,MAAK;AAAA,oBAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,gBAC1B;AAAA;AAAA,cAbK,GAAG,+BAA+B;AAAA,YAczC;AAAA,QAEN;AAAA,MACF,CAAC;AAAA;AAAA,EACH,GACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n role=\"menuitem\"\n innerRef={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\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"]
7
7
  }
package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js CHANGED
@@ -100,7 +100,7 @@ const AppPicker = ({
100
100
  {
101
101
  onClick: triggerOnClick ?? handleOnClick,
102
102
  onKeyDown: handleTriggerKeyDown,
103
- ref: (buttonRef) => {
103
+ innerRef: (buttonRef) => {
104
104
  setRef(buttonRef);
105
105
  (0, import_ds_utilities.mergeRefs)(internalTriggerRef, triggerRef, ref)(buttonRef);
106
106
  },
package/dist/cjs/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n label,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalTriggerRef = 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 schedule = useCallbackAfterRender();\n\n // const appPickerRef = useRef(null);\n // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n },\n [focusTrigger, schedule],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n setIsOpen(true);\n setTimeout(() => {\n if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n else actionRef?.current?.focusWrapper();\n }, 10);\n },\n [actionRef],\n );\n\n const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n <StyledButton\n onClick={triggerOnClick ?? handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n ref={(buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n }}\n aria-label={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\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 || TriggerDefaultComponent}\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFjB;AAzFN,mBAAqD;AACrD,2BAA4B;AAC5B,0BAAkD;AAClD,8BAAoC;AACpC,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,IAAI;AAEzD,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,EACF,IAAI;AAEJ,QAAM,eAAW,4CAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,qBAAW,SAAS,gCAAgC;AAAA;AACnE,qBAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,KAAK,CAAC,cAAiC;AACrC,eAAO,SAAS;AAChB,2CAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n label,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalTriggerRef = 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 schedule = useCallbackAfterRender();\n\n // const appPickerRef = useRef(null);\n // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n },\n [focusTrigger, schedule],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n setIsOpen(true);\n setTimeout(() => {\n if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n else actionRef?.current?.focusWrapper();\n }, 10);\n },\n [actionRef],\n );\n\n const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n <StyledButton\n onClick={triggerOnClick ?? handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n innerRef={(buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n }}\n aria-label={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\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 || TriggerDefaultComponent}\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFjB;AAzFN,mBAAqD;AACrD,2BAA4B;AAC5B,0BAAkD;AAClD,8BAAoC;AACpC,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,IAAI;AAEzD,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,EACF,IAAI;AAEJ,QAAM,eAAW,4CAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,qBAAW,SAAS,gCAAgC;AAAA;AACnE,qBAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,cAAiC;AAC1C,eAAO,SAAS;AAChB,2CAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js CHANGED
@@ -99,7 +99,7 @@ const PopupMenu = ({
99
99
  {
100
100
  onClick: handleTriggerOnClick,
101
101
  onKeyDown: handleOnKeyDown,
102
- ref: handleRefs,
102
+ innerRef: handleRefs,
103
103
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
104
104
  "aria-haspopup": true,
105
105
  "aria-expanded": userIsOpen ?? isOpen,
package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const PopupMenu = ({\n Icon,\n onClick,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): 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 handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'ArrowDown') {\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: React.MouseEvent) => {\n if (userIsOpen === undefined) setIsOpen(true);\n if (onClick) 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 handleRefs = useCallback(\n (ref: HTMLButtonElement) => {\n setRef(ref);\n setButtonRef(ref);\n },\n [setRef],\n );\n\n return (\n <>\n <StyledButton\n onClick={handleTriggerOnClick}\n onKeyDown={handleOnKeyDown}\n ref={handleRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...useGetGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n {buttonRef ? (\n <DSPopperJS\n referenceElement={buttonRef}\n showPopover={userIsOpen ?? isOpen}\n closeContextMenu={handleOnClose}\n onClickOutside={onClickOutside}\n withoutPortal\n >\n <PopupMenuContent\n options={options}\n onItemClick={handleItemClick}\n onClose={handleOnClose}\n setIsOpen={setIsOpen}\n popupOnKeyPress={popupOnKeyPress}\n />\n </DSPopperJS>\n ) : null}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,mBAA6C;AAC7C,8BAAuC;AACvC,yBAA2B;AAC3B,8BAAiC;AACjC,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI;AAAY,mBAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB,0BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,iBAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa,iDAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,OAAG,gDAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;",
4
+ "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const PopupMenu = ({\n Icon,\n onClick,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): 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 handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'ArrowDown') {\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: React.MouseEvent) => {\n if (userIsOpen === undefined) setIsOpen(true);\n if (onClick) 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 handleRefs = useCallback(\n (ref: HTMLButtonElement) => {\n setRef(ref);\n setButtonRef(ref);\n },\n [setRef],\n );\n\n return (\n <>\n <StyledButton\n onClick={handleTriggerOnClick}\n onKeyDown={handleOnKeyDown}\n innerRef={handleRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...useGetGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n {buttonRef ? (\n <DSPopperJS\n referenceElement={buttonRef}\n showPopover={userIsOpen ?? isOpen}\n closeContextMenu={handleOnClose}\n onClickOutside={onClickOutside}\n withoutPortal\n >\n <PopupMenuContent\n options={options}\n onItemClick={handleItemClick}\n onClose={handleOnClose}\n setIsOpen={setIsOpen}\n popupOnKeyPress={popupOnKeyPress}\n />\n </DSPopperJS>\n ) : null}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,mBAA6C;AAC7C,8BAAuC;AACvC,yBAA2B;AAC3B,8BAAiC;AACjC,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI;AAAY,mBAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB,0BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,iBAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,eAAa,iDAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,OAAG,gDAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js CHANGED
@@ -49,7 +49,7 @@ const PopupMenuContent = import_react.default.memo(
49
49
  }) => {
50
50
  const { instanceUID } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
51
51
  const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({ setIsOpen });
52
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { ref: menuRef, role: "menu", "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
52
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { innerRef: menuRef, role: "menu", "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
53
53
  const { type, Icon, label = "", onClick, Content, id, ...rest } = option;
54
54
  const globalAttrs = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
55
55
  const handleClick = (e) => {
@@ -84,7 +84,7 @@ const PopupMenuContent = import_react.default.memo(
84
84
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
85
  import_styles.StyledItemButton,
86
86
  {
87
- ref: setRef,
87
+ innerRef: setRef,
88
88
  onClick: handleClick,
89
89
  onKeyDown: handleKeyDown,
90
90
  id,
@@ -106,7 +106,7 @@ const PopupMenuContent = import_react.default.memo(
106
106
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
107
107
  import_styles.StyledItemButton,
108
108
  {
109
- ref: setRef,
109
+ innerRef: setRef,
110
110
  onClick: handleClick,
111
111
  onKeyDown: handleKeyDown,
112
112
  id,
package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n ({\n options,\n onItemClick,\n onClose,\n popupOnKeyPress,\n setIsOpen,\n }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n return (\n <StyledList ref={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n {options.map((option) => {\n const { type, Icon, label = '', onClick, Content, id, ...rest } = option;\n\n const globalAttrs = getGlobalAttributes(rest);\n\n const handleClick = (e: React.MouseEvent) => {\n onItemClick();\n if (onClick) onClick(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n keyboardNavigation(e);\n if (e.code === 'Escape') onClose();\n if (popupOnKeyPress) popupOnKeyPress(e);\n };\n\n switch (type) {\n case 'separator':\n return (\n <StyledSeparator\n key={`${instanceUID}-separator-${label}`}\n role=\"none\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n {...globalAttrs}\n />\n );\n case 'custom':\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n ref={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Content && <Content />}\n </StyledItemButton>\n </StyledItemContainer>\n );\n default:\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n ref={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Icon && <Icon />}\n {label && (\n <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n {label}\n </StyledLabel>\n )}\n </StyledItemButton>\n </StyledItemContainer>\n );\n }\n })}\n </StyledList>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAgG;AAChG,mCAAsC;AACtC,8BAAyC;AACzC,iCAAoC;AAG7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,KAAK,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MAC5F,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,kBAAc,6CAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS;AAAU,kBAAQ;AACjC,YAAI;AAAiB,0BAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,yBAAyB;AAAA,UAInC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,4CAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,qBAAqB;AAAA,UAe/B;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,qBAAqB;AAAA,UAoB/B;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n ({\n options,\n onItemClick,\n onClose,\n popupOnKeyPress,\n setIsOpen,\n }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n return (\n <StyledList innerRef={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n {options.map((option) => {\n const { type, Icon, label = '', onClick, Content, id, ...rest } = option;\n\n const globalAttrs = getGlobalAttributes(rest);\n\n const handleClick = (e: React.MouseEvent) => {\n onItemClick();\n if (onClick) onClick(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n keyboardNavigation(e);\n if (e.code === 'Escape') onClose();\n if (popupOnKeyPress) popupOnKeyPress(e);\n };\n\n switch (type) {\n case 'separator':\n return (\n <StyledSeparator\n key={`${instanceUID}-separator-${label}`}\n role=\"none\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n {...globalAttrs}\n />\n );\n case 'custom':\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n innerRef={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Content && <Content />}\n </StyledItemButton>\n </StyledItemContainer>\n );\n default:\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n innerRef={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Icon && <Icon />}\n {label && (\n <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n {label}\n </StyledLabel>\n )}\n </StyledItemButton>\n </StyledItemContainer>\n );\n }\n })}\n </StyledList>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAgG;AAChG,mCAAsC;AACtC,8BAAyC;AACzC,iCAAoC;AAG7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,UAAU,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,kBAAc,6CAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS;AAAU,kBAAQ;AACjC,YAAI;AAAiB,0BAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,yBAAyB;AAAA,UAInC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,4CAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,qBAAqB;AAAA,UAe/B;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,qBAAqB;AAAA,UAoB/B;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js CHANGED
@@ -115,7 +115,7 @@ const SearchToggle = ({
115
115
  import_styles.StyledNavSearchBoxContainer,
116
116
  {
117
117
  onKeyDown: handleOnKeyDown,
118
- ref: (0, import_ds_utilities.mergeRefs)(searchContainerRef, containerRef),
118
+ innerRef: (0, import_ds_utilities.mergeRefs)(searchContainerRef, containerRef),
119
119
  onBlur: handleOnBlur,
120
120
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER,
121
121
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -139,7 +139,7 @@ const SearchToggle = ({
139
139
  import_styles2.StyledButton,
140
140
  {
141
141
  onClick: handleOnClick,
142
- ref: handleTriggerRefs,
142
+ innerRef: handleTriggerRefs,
143
143
  id,
144
144
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
145
145
  ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map CHANGED
@@ -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 React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const SearchToggle = ({\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.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 ref={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 ref={handleTriggerRefs}\n id={id}\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;AD4FjB;AA5FN,mBAAqD;AACrD,sBAAuB;AACvB,qBAA+B;AAC/B,0BAAkD;AAClD,8BAAoC;AACpC,oBAA4C;AAC5C,IAAAA,iBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+D;AAC7D,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,4CAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,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;AAAW,kBAAU,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;AAAU,gBAAU,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,yCAAU,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,SAAK,+BAAU,oBAAoB,YAAY;AAAA,MAC/C,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,KAAK;AAAA,MACL;AAAA,MACA,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAC3D,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
4
+ "sourcesContent": ["import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const SearchToggle = ({\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.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 id={id}\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;AD4FjB;AA5FN,mBAAqD;AACrD,sBAAuB;AACvB,qBAA+B;AAC/B,0BAAkD;AAClD,8BAAoC;AACpC,oBAA4C;AAC5C,IAAAA,iBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+D;AAC7D,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,4CAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,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;AAAW,kBAAU,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;AAAU,gBAAU,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,yCAAU,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,+BAAU,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;AAAA,MACA,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAC3D,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
6
6
  "names": ["import_styles"]
7
7
  }
package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js CHANGED
@@ -25,7 +25,7 @@ const GlobalHeaderToolbar = () => {
25
25
  cols: globalHeaderToolbarGrid,
26
26
  role: "toolbar",
27
27
  onKeyDown: keyboardNavigation,
28
- ref: listRef,
28
+ innerRef: listRef,
29
29
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.LIST,
30
30
  children: toolbar.map((item, index) => {
31
31
  const {
@@ -117,7 +117,8 @@ const GlobalHeaderToolbar = () => {
117
117
  title: label,
118
118
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
119
119
  id,
120
- ref: setRef(index),
120
+ role: "menuitem",
121
+ innerRef: setRef(index),
121
122
  ...getGlobalAttributes(otherProps),
122
123
  type: "button",
123
124
  children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map CHANGED
@@ -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 React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n onKeyDown={keyboardNavigation}\n ref={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n ref={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n role=\"menuitem\"\n innerRef={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js CHANGED
@@ -67,7 +67,7 @@ const AppPicker = ({
67
67
  {
68
68
  onClick: triggerOnClick ?? handleOnClick,
69
69
  onKeyDown: handleTriggerKeyDown,
70
- ref: (buttonRef) => {
70
+ innerRef: (buttonRef) => {
71
71
  setRef(buttonRef);
72
72
  mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);
73
73
  },
package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n label,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalTriggerRef = 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 schedule = useCallbackAfterRender();\n\n // const appPickerRef = useRef(null);\n // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n },\n [focusTrigger, schedule],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n setIsOpen(true);\n setTimeout(() => {\n if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n else actionRef?.current?.focusWrapper();\n }, 10);\n },\n [actionRef],\n );\n\n const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n <StyledButton\n onClick={triggerOnClick ?? handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n ref={(buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n }}\n aria-label={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\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 || TriggerDefaultComponent}\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyFjB;AAzFN,SAAgB,UAAU,QAAQ,mBAAmB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,WAAW,8BAA8B;AAClD,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,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,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAKxC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,qBAAW,SAAS,gCAAgC;AAAA;AACnE,qBAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,KAAK,CAAC,cAAiC;AACrC,eAAO,SAAS;AAChB,kBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n label,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const internalTriggerRef = 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 schedule = useCallbackAfterRender();\n\n // const appPickerRef = useRef(null);\n // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n },\n [focusTrigger, schedule],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(\n (e) => {\n setIsOpen(true);\n setTimeout(() => {\n if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n else actionRef?.current?.focusWrapper();\n }, 10);\n },\n [actionRef],\n );\n\n const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n <StyledButton\n onClick={triggerOnClick ?? handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n innerRef={(buttonRef: HTMLButtonElement) => {\n setRef(buttonRef);\n mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n }}\n aria-label={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\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 || TriggerDefaultComponent}\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACyFjB;AAzFN,SAAgB,UAAU,QAAQ,mBAAmB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,WAAW,8BAA8B;AAClD,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,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,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAKxC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,qBAAW,SAAS,gCAAgC;AAAA;AACnE,qBAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,cAAiC;AAC1C,eAAO,SAAS;AAChB,kBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js CHANGED
@@ -66,7 +66,7 @@ const PopupMenu = ({
66
66
  {
67
67
  onClick: handleTriggerOnClick,
68
68
  onKeyDown: handleOnKeyDown,
69
- ref: handleRefs,
69
+ innerRef: handleRefs,
70
70
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
71
71
  "aria-haspopup": true,
72
72
  "aria-expanded": userIsOpen ?? isOpen,
package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const PopupMenu = ({\n Icon,\n onClick,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): 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 handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'ArrowDown') {\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: React.MouseEvent) => {\n if (userIsOpen === undefined) setIsOpen(true);\n if (onClick) 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 handleRefs = useCallback(\n (ref: HTMLButtonElement) => {\n setRef(ref);\n setButtonRef(ref);\n },\n [setRef],\n );\n\n return (\n <>\n <StyledButton\n onClick={handleTriggerOnClick}\n onKeyDown={handleOnKeyDown}\n ref={handleRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...useGetGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n {buttonRef ? (\n <DSPopperJS\n referenceElement={buttonRef}\n showPopover={userIsOpen ?? isOpen}\n closeContextMenu={handleOnClose}\n onClickOutside={onClickOutside}\n withoutPortal\n >\n <PopupMenuContent\n options={options}\n onItemClick={handleItemClick}\n onClose={handleOnClose}\n setIsOpen={setIsOpen}\n popupOnKeyPress={popupOnKeyPress}\n />\n </DSPopperJS>\n ) : null}\n </>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkEnB,mBAYa,KAZb;AAlEJ,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI;AAAY,mBAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa,yBAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,GAAG,uBAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,oBAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const PopupMenu = ({\n Icon,\n onClick,\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): 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 handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'ArrowDown') {\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: React.MouseEvent) => {\n if (userIsOpen === undefined) setIsOpen(true);\n if (onClick) 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 handleRefs = useCallback(\n (ref: HTMLButtonElement) => {\n setRef(ref);\n setButtonRef(ref);\n },\n [setRef],\n );\n\n return (\n <>\n <StyledButton\n onClick={handleTriggerOnClick}\n onKeyDown={handleOnKeyDown}\n innerRef={handleRefs}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...useGetGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n {buttonRef ? (\n <DSPopperJS\n referenceElement={buttonRef}\n showPopover={userIsOpen ?? isOpen}\n closeContextMenu={handleOnClose}\n onClickOutside={onClickOutside}\n withoutPortal\n >\n <PopupMenuContent\n options={options}\n onItemClick={handleItemClick}\n onClose={handleOnClose}\n setIsOpen={setIsOpen}\n popupOnKeyPress={popupOnKeyPress}\n />\n </DSPopperJS>\n ) : null}\n </>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACkEnB,mBAYa,KAZb;AAlEJ,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI;AAAY,mBAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,eAAa,yBAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,GAAG,uBAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,oBAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js CHANGED
@@ -16,7 +16,7 @@ const PopupMenuContent = React2.memo(
16
16
  }) => {
17
17
  const { instanceUID } = useContext(DSGlobalHeaderContext);
18
18
  const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });
19
- return /* @__PURE__ */ jsx(StyledList, { ref: menuRef, role: "menu", "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
19
+ return /* @__PURE__ */ jsx(StyledList, { innerRef: menuRef, role: "menu", "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
20
20
  const { type, Icon, label = "", onClick, Content, id, ...rest } = option;
21
21
  const globalAttrs = getGlobalAttributes(rest);
22
22
  const handleClick = (e) => {
@@ -51,7 +51,7 @@ const PopupMenuContent = React2.memo(
51
51
  children: /* @__PURE__ */ jsx(
52
52
  StyledItemButton,
53
53
  {
54
- ref: setRef,
54
+ innerRef: setRef,
55
55
  onClick: handleClick,
56
56
  onKeyDown: handleKeyDown,
57
57
  id,
@@ -73,7 +73,7 @@ const PopupMenuContent = React2.memo(
73
73
  children: /* @__PURE__ */ jsxs(
74
74
  StyledItemButton,
75
75
  {
76
- ref: setRef,
76
+ innerRef: setRef,
77
77
  onClick: handleClick,
78
78
  onKeyDown: handleKeyDown,
79
79
  id,
package/dist/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n ({\n options,\n onItemClick,\n onClose,\n popupOnKeyPress,\n setIsOpen,\n }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n return (\n <StyledList ref={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n {options.map((option) => {\n const { type, Icon, label = '', onClick, Content, id, ...rest } = option;\n\n const globalAttrs = getGlobalAttributes(rest);\n\n const handleClick = (e: React.MouseEvent) => {\n onItemClick();\n if (onClick) onClick(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n keyboardNavigation(e);\n if (e.code === 'Escape') onClose();\n if (popupOnKeyPress) popupOnKeyPress(e);\n };\n\n switch (type) {\n case 'separator':\n return (\n <StyledSeparator\n key={`${instanceUID}-separator-${label}`}\n role=\"none\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n {...globalAttrs}\n />\n );\n case 'custom':\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n ref={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Content && <Content />}\n </StyledItemButton>\n </StyledItemContainer>\n );\n default:\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n ref={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Icon && <Icon />}\n {label && (\n <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n {label}\n </StyledLabel>\n )}\n </StyledItemButton>\n </StyledItemContainer>\n );\n }\n })}\n </StyledList>\n );\n },\n);\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyCP,cAkCE,YAlCF;AAzChB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,kBAAkB,aAAa,YAAY,2BAA2B;AAChG,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AAG7B,MAAM,mBAAmBA,OAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,IAAI,WAAW,qBAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,oBAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,oBAAC,cAAW,KAAK,SAAS,MAAK,QAAO,eAAa,yBAAyB,QAAQ,WAAW,MAC5F,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,cAAc,oBAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS;AAAU,kBAAQ;AACjC,YAAI;AAAiB,0BAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,yBAAyB;AAAA,UAInC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,oBAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,qBAAqB;AAAA,UAe/B;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,oBAAC,QAAK;AAAA,oBACd,SACC,oBAAC,eAAY,eAAa,yBAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,qBAAqB;AAAA,UAoB/B;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n ({\n options,\n onItemClick,\n onClose,\n popupOnKeyPress,\n setIsOpen,\n }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n return (\n <StyledList innerRef={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n {options.map((option) => {\n const { type, Icon, label = '', onClick, Content, id, ...rest } = option;\n\n const globalAttrs = getGlobalAttributes(rest);\n\n const handleClick = (e: React.MouseEvent) => {\n onItemClick();\n if (onClick) onClick(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n keyboardNavigation(e);\n if (e.code === 'Escape') onClose();\n if (popupOnKeyPress) popupOnKeyPress(e);\n };\n\n switch (type) {\n case 'separator':\n return (\n <StyledSeparator\n key={`${instanceUID}-separator-${label}`}\n role=\"none\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n {...globalAttrs}\n />\n );\n case 'custom':\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n innerRef={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Content && <Content />}\n </StyledItemButton>\n </StyledItemContainer>\n );\n default:\n return (\n <StyledItemContainer\n key={`${instanceUID}-popup-${label}`}\n role=\"menuitem\"\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n >\n <StyledItemButton\n innerRef={setRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n id={id}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n {...globalAttrs}\n type=\"button\"\n >\n {Icon && <Icon />}\n {label && (\n <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n {label}\n </StyledLabel>\n )}\n </StyledItemButton>\n </StyledItemContainer>\n );\n }\n })}\n </StyledList>\n );\n },\n);\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACyCP,cAkCE,YAlCF;AAzChB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,kBAAkB,aAAa,YAAY,2BAA2B;AAChG,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AAG7B,MAAM,mBAAmBA,OAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,IAAI,WAAW,qBAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,oBAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,oBAAC,cAAW,UAAU,SAAS,MAAK,QAAO,eAAa,yBAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,cAAc,oBAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS;AAAU,kBAAQ;AACjC,YAAI;AAAiB,0BAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,yBAAyB;AAAA,UAInC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,oBAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,qBAAqB;AAAA,UAe/B;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,oBAAC,QAAK;AAAA,oBACd,SACC,oBAAC,eAAY,eAAa,yBAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,qBAAqB;AAAA,UAoB/B;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js CHANGED
@@ -82,7 +82,7 @@ const SearchToggle = ({
82
82
  StyledNavSearchBoxContainer,
83
83
  {
84
84
  onKeyDown: handleOnKeyDown,
85
- ref: mergeRefs(searchContainerRef, containerRef),
85
+ innerRef: mergeRefs(searchContainerRef, containerRef),
86
86
  onBlur: handleOnBlur,
87
87
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER,
88
88
  children: /* @__PURE__ */ jsx(
@@ -106,7 +106,7 @@ const SearchToggle = ({
106
106
  StyledButton,
107
107
  {
108
108
  onClick: handleOnClick,
109
- ref: handleTriggerRefs,
109
+ innerRef: handleTriggerRefs,
110
110
  id,
111
111
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
112
112
  ...getGlobalAttributes(otherProps),
package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js.map CHANGED
@@ -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 React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const SearchToggle = ({\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.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 ref={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 ref={handleTriggerRefs}\n id={id}\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;AC4FjB;AA5FN,SAAgB,UAAU,aAAa,cAAc;AACrD,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,WAAW,8BAA8B;AAClD,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+D;AAC7D,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;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,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;AAAW,kBAAU,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;AAAU,gBAAU,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,KAAK,UAAU,oBAAoB,YAAY;AAAA,MAC/C,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,KAAK;AAAA,MACL;AAAA,MACA,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAC3D,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,UAAO;AAAA;AAAA,EACV;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const SearchToggle = ({\n id,\n setRef,\n componentProps,\n ...otherProps\n}: DSGlobalHeaderInternalsT.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 id={id}\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;AC4FjB;AA5FN,SAAgB,UAAU,aAAa,cAAc;AACrD,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,WAAW,8BAA8B;AAClD,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+D;AAC7D,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;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,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;AAAW,kBAAU,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;AAAU,gBAAU,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;AAAA,MACA,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAC3D,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,UAAO;AAAA;AAAA,EACV;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/types/parts/Breadcrumb/styles.d.ts CHANGED
@@ -9,11 +9,11 @@ interface LabelT {
9
9
  isSelected: boolean;
10
10
  isOnlyItem: boolean;
11
11
  }
12
- export declare const StyledBreadcrumbContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
13
- export declare const StyledBreadcrumbList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
14
- export declare const StyledPipe: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, PipeT & import("@elliemae/ds-system").OwnerInterface, never>;
15
- export declare const StyledChevron: import("styled-components").StyledComponent<(rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element, import("@elliemae/ds-system").Theme, ChevronT & import("@elliemae/ds-system").OwnerInterface, never>;
16
- export declare const StyledBreadcrumbItem: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
17
- export declare const StyledLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
18
- export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, LabelT & import("@elliemae/ds-system").OwnerInterface, never>;
12
+ export declare const StyledBreadcrumbContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
13
+ export declare const StyledBreadcrumbList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
14
+ export declare const StyledPipe: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, PipeT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
15
+ export declare const StyledChevron: import("styled-components").StyledComponent<(rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element, import("@elliemae/ds-system").Theme, ChevronT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<(rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element>, never>;
16
+ export declare const StyledBreadcrumbItem: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
17
+ export declare const StyledLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"a">, never>;
18
+ export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, LabelT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
19
19
  export {};
package/dist/types/parts/Logo/styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare const StyledLogoContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
2
+ export declare const StyledLogoContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
package/dist/types/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export declare const StyledList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
2
- export declare const StyledItemContainer: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
3
- export declare const StyledItemButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
4
- export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
5
- export declare const StyledSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
1
+ export declare const StyledList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
2
+ export declare const StyledItemContainer: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
3
+ export declare const StyledItemButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
4
+ export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
5
+ export declare const StyledSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
package/dist/types/parts/Toolbar/outOfTheBox/SearchToggle/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const StyledNavSearchBoxContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
1
+ export declare const StyledNavSearchBoxContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
package/dist/types/parts/Toolbar/styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
- export declare const StyledMenubarContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
3
- export declare const StyledList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
4
- export declare const StyledToolbarItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
2
+ export declare const StyledMenubarContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
3
+ export declare const StyledList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
4
+ export declare const StyledToolbarItem: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
package/dist/types/parts/styles.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
- export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
3
- export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
2
+ export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
3
+ export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-global-header",
3
- "version": "3.24.2",
3
+ "version": "3.25.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Global Header",
6
6
  "files": [
@@ -136,19 +136,19 @@
136
136
  },
137
137
  "dependencies": {
138
138
  "uid": "~2.0.1",
139
- "@elliemae/ds-app-picker": "3.24.2",
140
- "@elliemae/ds-grid": "3.24.2",
141
- "@elliemae/ds-form": "3.24.2",
142
- "@elliemae/ds-icons": "3.24.2",
143
- "@elliemae/ds-popperjs": "3.24.2",
144
- "@elliemae/ds-props-helpers": "3.24.2",
145
- "@elliemae/ds-system": "3.24.2",
146
- "@elliemae/ds-utilities": "3.24.2"
139
+ "@elliemae/ds-app-picker": "3.25.0-next.2",
140
+ "@elliemae/ds-form": "3.25.0-next.2",
141
+ "@elliemae/ds-grid": "3.25.0-next.2",
142
+ "@elliemae/ds-popperjs": "3.25.0-next.2",
143
+ "@elliemae/ds-props-helpers": "3.25.0-next.2",
144
+ "@elliemae/ds-system": "3.25.0-next.2",
145
+ "@elliemae/ds-utilities": "3.25.0-next.2",
146
+ "@elliemae/ds-icons": "3.25.0-next.2"
147
147
  },
148
148
  "devDependencies": {
149
149
  "@elliemae/pui-cli": "~9.0.0-next.31",
150
150
  "styled-components": "~5.3.9",
151
- "@elliemae/ds-monorepo-devops": "3.24.2"
151
+ "@elliemae/ds-monorepo-devops": "3.25.0-next.2"
152
152
  },
153
153
  "peerDependencies": {
154
154
  "lodash": "^4.17.21",