@elliemae/ds-global-header 3.9.1-rc.8 → 3.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -29,7 +29,7 @@ __export(AppPicker_exports, {
29
29
  module.exports = __toCommonJS(AppPicker_exports);
30
30
  var React = __toESM(require("react"));
31
31
  var import_jsx_runtime = require("react/jsx-runtime");
32
- var import_react = require("react");
32
+ var import_react = __toESM(require("react"));
33
33
  var import_ds_app_picker = require("@elliemae/ds-app-picker");
34
34
  var import_ds_utilities = require("@elliemae/ds-utilities");
35
35
  var import_ds_icons = require("@elliemae/ds-icons");
@@ -60,24 +60,41 @@ const AppPicker = ({
60
60
  triggerOnClick
61
61
  } = componentProps;
62
62
  const schedule = (0, import_ds_utilities.useCallbackAfterRender)();
63
+ const internalActionRef = (0, import_react.useMemo)(() => {
64
+ const ref = import_react.default.createRef();
65
+ ref.current = {};
66
+ return actionRef ?? ref;
67
+ }, [actionRef]);
63
68
  const focusTrigger = (0, import_react.useCallback)(() => internalTriggerRef.current?.focus(), []);
64
69
  const handleTriggerKeyDown = (0, import_react.useCallback)((e) => {
65
70
  if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
66
71
  setIsOpen(true);
67
72
  }
68
73
  }, []);
69
- const handleAppPickerOnKeyDown = (0, import_react.useCallback)((e) => {
70
- if (e.key === "Escape") {
71
- setIsOpen(false);
72
- schedule(focusTrigger);
73
- }
74
- }, []);
74
+ const handleAppPickerOnKeyDown = (0, import_react.useCallback)(
75
+ (e) => {
76
+ if (e.key === "Escape") {
77
+ setIsOpen(false);
78
+ schedule(focusTrigger);
79
+ }
80
+ },
81
+ [schedule]
82
+ );
75
83
  const handleOnClickOutside = (0, import_react.useCallback)(() => {
76
84
  setIsOpen(false);
77
85
  }, []);
78
- const handleOnClick = (0, import_react.useCallback)(() => {
79
- setIsOpen(true);
80
- }, []);
86
+ const handleOnClick = (0, import_react.useCallback)(
87
+ (e) => {
88
+ setIsOpen(true);
89
+ setTimeout(() => {
90
+ if (e.detail === 0)
91
+ internalActionRef.current.focusSelectedOrFirstAvailable();
92
+ else
93
+ internalActionRef.current.focusWrapper();
94
+ }, 10);
95
+ },
96
+ [internalActionRef]
97
+ );
81
98
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_app_picker.DSAppPicker, {
82
99
  apps,
83
100
  customApps,
@@ -85,7 +102,7 @@ const AppPicker = ({
85
102
  customSectionTitle,
86
103
  icon,
87
104
  onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
88
- actionRef,
105
+ actionRef: internalActionRef,
89
106
  onClickOutside: userOnClickOutside ?? handleOnClickOutside,
90
107
  renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledButton, {
91
108
  onClick: triggerOnClick ?? handleOnClick,
@@ -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, getGlobalAttributes, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\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 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((e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n }, []);\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(() => {\n setIsOpen(true);\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={\n userRenderTrigger ||\n (({ 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 role=\"menuitem\"\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n ))\n }\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;ADAvB;AAAA,mBAAqD;AACrD,2BAA4B;AAC5B,0BAAuE;AACvE,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;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;AAExC,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,0BAAY,CAAC,MAA2B;AACvE,QAAI,EAAE,QAAQ,UAAU;AACtB,gBAAU,KAAK;AACf,eAAS,YAAY;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC,0BAAY,MAAM;AAC/D,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA,gBAAgB,sBAAsB;AAAA,IACtC,eACE,sBACC,CAAC,EAAE,IAAI,MACN,4CAAC;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,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,OAAG,yCAAoB,UAAU;AAAA,MAElC,sDAAC;AAAA,QAAW,OAAO;AAAA,QAAO,QAAQ;AAAA,OAAO;AAAA,KAC3C;AAAA,IAGJ,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA,GACF;AAEJ;",
6
- "names": []
4
+ "sourcesContent": ["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, getGlobalAttributes, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\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 internalActionRef = useMemo(() => {\n const ref = React.createRef();\n ref.current = {};\n return actionRef ?? ref;\n }, [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 [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) internalActionRef.current.focusSelectedOrFirstAvailable();\n else internalActionRef.current.focusWrapper();\n }, 10);\n },\n [internalActionRef],\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={internalActionRef}\n onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n renderTrigger={\n userRenderTrigger ||\n (({ 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 role=\"menuitem\"\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n ))\n }\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;ADAvB;AAAA,mBAA8D;AAC9D,2BAA4B;AAC5B,0BAAuE;AACvE,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;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;AAExC,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,UAAM,MAAM,aAAAA,QAAM,UAAU;AAC5B,QAAI,UAAU,CAAC;AACf,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,SAAS,CAAC;AAEd,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,QAAQ;AAAA,EACX;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,4BAAkB,QAAQ,8BAA8B;AAAA;AACvE,4BAAkB,QAAQ,aAAa;AAAA,MAC9C,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,WAAW;AAAA,IACX,gBAAgB,sBAAsB;AAAA,IACtC,eACE,sBACC,CAAC,EAAE,IAAI,MACN,4CAAC;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,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,OAAG,yCAAoB,UAAU;AAAA,MAElC,sDAAC;AAAA,QAAW,OAAO;AAAA,QAAO,QAAQ;AAAA,OAAO;AAAA,KAC3C;AAAA,IAGJ,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA,GACF;AAEJ;",
6
+ "names": ["React"]
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { useState, useRef, useCallback } from "react";
3
+ import React2, { useState, useRef, useCallback, useMemo } from "react";
4
4
  import { DSAppPicker } from "@elliemae/ds-app-picker";
5
5
  import { mergeRefs, getGlobalAttributes, useCallbackAfterRender } from "@elliemae/ds-utilities";
6
6
  import { MenuPicker } from "@elliemae/ds-icons";
@@ -31,24 +31,41 @@ const AppPicker = ({
31
31
  triggerOnClick
32
32
  } = componentProps;
33
33
  const schedule = useCallbackAfterRender();
34
+ const internalActionRef = useMemo(() => {
35
+ const ref = React2.createRef();
36
+ ref.current = {};
37
+ return actionRef ?? ref;
38
+ }, [actionRef]);
34
39
  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);
35
40
  const handleTriggerKeyDown = useCallback((e) => {
36
41
  if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
37
42
  setIsOpen(true);
38
43
  }
39
44
  }, []);
40
- const handleAppPickerOnKeyDown = useCallback((e) => {
41
- if (e.key === "Escape") {
42
- setIsOpen(false);
43
- schedule(focusTrigger);
44
- }
45
- }, []);
45
+ const handleAppPickerOnKeyDown = useCallback(
46
+ (e) => {
47
+ if (e.key === "Escape") {
48
+ setIsOpen(false);
49
+ schedule(focusTrigger);
50
+ }
51
+ },
52
+ [schedule]
53
+ );
46
54
  const handleOnClickOutside = useCallback(() => {
47
55
  setIsOpen(false);
48
56
  }, []);
49
- const handleOnClick = useCallback(() => {
50
- setIsOpen(true);
51
- }, []);
57
+ const handleOnClick = useCallback(
58
+ (e) => {
59
+ setIsOpen(true);
60
+ setTimeout(() => {
61
+ if (e.detail === 0)
62
+ internalActionRef.current.focusSelectedOrFirstAvailable();
63
+ else
64
+ internalActionRef.current.focusWrapper();
65
+ }, 10);
66
+ },
67
+ [internalActionRef]
68
+ );
52
69
  return /* @__PURE__ */ jsx(DSAppPicker, {
53
70
  apps,
54
71
  customApps,
@@ -56,7 +73,7 @@ const AppPicker = ({
56
73
  customSectionTitle,
57
74
  icon,
58
75
  onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
59
- actionRef,
76
+ actionRef: internalActionRef,
60
77
  onClickOutside: userOnClickOutside ?? handleOnClickOutside,
61
78
  renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ jsx(StyledButton, {
62
79
  onClick: triggerOnClick ?? handleOnClick,
@@ -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, getGlobalAttributes, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\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 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((e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n schedule(focusTrigger);\n }\n }, []);\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(() => {\n setIsOpen(true);\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={\n userRenderTrigger ||\n (({ 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 role=\"menuitem\"\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n ))\n }\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,QAAQ,mBAAmB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,WAAW,qBAAqB,8BAA8B;AACvE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;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;AAExC,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,YAAY,CAAC,MAA2B;AACvE,QAAI,EAAE,QAAQ,UAAU;AACtB,gBAAU,KAAK;AACf,eAAS,YAAY;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,YAAY,MAAM;AAC/D,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA,gBAAgB,sBAAsB;AAAA,IACtC,eACE,sBACC,CAAC,EAAE,IAAI,MACN,oBAAC;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,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,GAAG,oBAAoB,UAAU;AAAA,MAElC,8BAAC;AAAA,QAAW,OAAO;AAAA,QAAO,QAAQ;AAAA,OAAO;AAAA,KAC3C;AAAA,IAGJ,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA,GACF;AAEJ;",
6
- "names": []
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, getGlobalAttributes, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\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 internalActionRef = useMemo(() => {\n const ref = React.createRef();\n ref.current = {};\n return actionRef ?? ref;\n }, [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 [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) internalActionRef.current.focusSelectedOrFirstAvailable();\n else internalActionRef.current.focusWrapper();\n }, 10);\n },\n [internalActionRef],\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={internalActionRef}\n onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n renderTrigger={\n userRenderTrigger ||\n (({ 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 role=\"menuitem\"\n aria-haspopup\n aria-expanded={userIsOpen ?? isOpen}\n id={id}\n {...getGlobalAttributes(otherProps)}\n >\n <MenuPicker width={20.73} height={20.73} />\n </StyledButton>\n ))\n }\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,UAAU,QAAQ,aAAa,eAAe;AAC9D,SAAS,mBAAmB;AAC5B,SAAS,WAAW,qBAAqB,8BAA8B;AACvE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;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;AAExC,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,MAAMA,OAAM,UAAU;AAC5B,QAAI,UAAU,CAAC;AACf,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,SAAS,CAAC;AAEd,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,QAAQ;AAAA,EACX;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,4BAAkB,QAAQ,8BAA8B;AAAA;AACvE,4BAAkB,QAAQ,aAAa;AAAA,MAC9C,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,SACE,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,WAAW;AAAA,IACX,gBAAgB,sBAAsB;AAAA,IACtC,eACE,sBACC,CAAC,EAAE,IAAI,MACN,oBAAC;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,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,GAAG,oBAAoB,UAAU;AAAA,MAElC,8BAAC;AAAA,QAAW,OAAO;AAAA,QAAO,QAAQ;AAAA,OAAO;AAAA,KAC3C;AAAA,IAGJ,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA,GACF;AAEJ;",
6
+ "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-global-header",
3
- "version": "3.9.1-rc.8",
3
+ "version": "3.9.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Global Header",
6
6
  "files": [
@@ -135,13 +135,13 @@
135
135
  "indent": 4
136
136
  },
137
137
  "dependencies": {
138
- "@elliemae/ds-app-picker": "3.9.1-rc.8",
139
- "@elliemae/ds-form": "3.9.1-rc.8",
140
- "@elliemae/ds-grid": "3.9.1-rc.8",
141
- "@elliemae/ds-icons": "3.9.1-rc.8",
142
- "@elliemae/ds-popperjs": "3.9.1-rc.8",
143
- "@elliemae/ds-system": "3.9.1-rc.8",
144
- "@elliemae/ds-utilities": "3.9.1-rc.8",
138
+ "@elliemae/ds-app-picker": "3.9.1",
139
+ "@elliemae/ds-form": "3.9.1",
140
+ "@elliemae/ds-grid": "3.9.1",
141
+ "@elliemae/ds-icons": "3.9.1",
142
+ "@elliemae/ds-popperjs": "3.9.1",
143
+ "@elliemae/ds-system": "3.9.1",
144
+ "@elliemae/ds-utilities": "3.9.1",
145
145
  "uid": "~2.0.0"
146
146
  },
147
147
  "devDependencies": {