@elliemae/ds-app-picker 3.17.0-next.0 → 3.17.0-next.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AppPickerImpl.js +10 -9
- package/dist/cjs/AppPickerImpl.js.map +2 -2
- package/dist/cjs/DSAppPicker.js +26 -24
- package/dist/cjs/DSAppPicker.js.map +2 -2
- package/dist/cjs/{types/AppPickerTypes.js → DSAppPickerDefinitions.js} +27 -3
- package/dist/cjs/DSAppPickerDefinitions.js.map +7 -0
- package/dist/cjs/hooks/useKeepTrackButtons.js +1 -1
- package/dist/cjs/hooks/useKeepTrackButtons.js.map +2 -2
- package/dist/cjs/index.js +9 -4
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/{propTypes.js → react-desc-prop-types.js} +16 -7
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styles.js +6 -5
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/AppPickerImpl.js +10 -9
- package/dist/esm/AppPickerImpl.js.map +2 -2
- package/dist/esm/DSAppPicker.js +27 -25
- package/dist/esm/DSAppPicker.js.map +2 -2
- package/dist/esm/DSAppPickerDefinitions.js +22 -0
- package/dist/esm/DSAppPickerDefinitions.js.map +7 -0
- package/dist/esm/hooks/useKeepTrackButtons.js +1 -1
- package/dist/esm/hooks/useKeepTrackButtons.js.map +2 -2
- package/dist/esm/index.js +7 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/{propTypes.js → react-desc-prop-types.js} +13 -4
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styles.js +6 -5
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/AppPickerImpl.d.ts +10 -2
- package/dist/types/DSAppPicker.d.ts +4 -3
- package/dist/types/DSAppPickerDefinitions.d.ts +15 -0
- package/dist/types/hooks/useKeepTrackButtons.d.ts +2 -2
- package/dist/types/index.d.ts +3 -1
- package/dist/types/react-desc-prop-types.d.ts +44 -0
- package/dist/types/styles.d.ts +3 -3
- package/package.json +9 -9
- package/dist/cjs/propTypes.js.map +0 -7
- package/dist/cjs/types/AppPickerTypes.js.map +0 -7
- package/dist/esm/propTypes.js.map +0 -7
- package/dist/esm/types/AppPickerTypes.js +0 -2
- package/dist/esm/types/AppPickerTypes.js.map +0 -7
- package/dist/types/propTypes.d.ts +0 -2
- package/dist/types/types/AppPickerTypes.d.ts +0 -49
package/dist/esm/DSAppPicker.js
CHANGED
|
@@ -1,28 +1,30 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, useRef, useCallback } from "react";
|
|
4
|
-
import { MenuPicker } from "@elliemae/ds-icons";
|
|
5
4
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
6
5
|
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
7
|
-
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
|
+
import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
8
7
|
import DSPopover from "@elliemae/ds-popover";
|
|
9
8
|
import AppPickerImpl from "./AppPickerImpl.js";
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
9
|
+
import { DSAppPickerPropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
10
|
+
import { DSAppPickerDataTestIds, DSAppPickerName } from "./DSAppPickerDefinitions.js";
|
|
11
|
+
const DSAppPicker = (props) => {
|
|
12
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
13
|
+
const {
|
|
14
|
+
apps,
|
|
15
|
+
customApps,
|
|
16
|
+
sectionTitle,
|
|
17
|
+
customSectionTitle,
|
|
18
|
+
icon: Icon,
|
|
19
|
+
renderTrigger,
|
|
20
|
+
isOpen,
|
|
21
|
+
onClose,
|
|
22
|
+
actionRef,
|
|
23
|
+
onKeyDown,
|
|
24
|
+
onClick,
|
|
25
|
+
onClickOutside,
|
|
26
|
+
triggerRef
|
|
27
|
+
} = propsWithDefault;
|
|
26
28
|
const [open, setOpen] = useState(false);
|
|
27
29
|
const [isOverflow, setIsOverflow] = useState(false);
|
|
28
30
|
const wrapperRef = useRef(null);
|
|
@@ -54,12 +56,12 @@ const DSAppPicker = ({
|
|
|
54
56
|
}, [isOpen, open]);
|
|
55
57
|
const handleOnClose = useCallback(() => {
|
|
56
58
|
setOpen(false);
|
|
57
|
-
onClose();
|
|
59
|
+
onClose?.();
|
|
58
60
|
}, [onClose]);
|
|
59
61
|
const handleOnClickOutside = (e) => {
|
|
60
62
|
setOpen(false);
|
|
61
|
-
onClose();
|
|
62
|
-
onClickOutside(e);
|
|
63
|
+
onClose?.();
|
|
64
|
+
onClickOutside?.(e);
|
|
63
65
|
};
|
|
64
66
|
const AppPickerContent = useCallback(
|
|
65
67
|
() => /* @__PURE__ */ jsx(
|
|
@@ -95,7 +97,7 @@ const DSAppPicker = ({
|
|
|
95
97
|
const RenderTrigger = renderTrigger || (({ ref }) => /* @__PURE__ */ jsx(
|
|
96
98
|
DSButtonV2,
|
|
97
99
|
{
|
|
98
|
-
"data-testid":
|
|
100
|
+
"data-testid": DSAppPickerDataTestIds.TRIGGER,
|
|
99
101
|
id: "app-picker__button",
|
|
100
102
|
buttonType: "icon",
|
|
101
103
|
"aria-haspopup": "true",
|
|
@@ -104,7 +106,7 @@ const DSAppPicker = ({
|
|
|
104
106
|
innerRef: mergeRefs(ref, defaultTriggerRef),
|
|
105
107
|
onClick: (e) => {
|
|
106
108
|
wasOpenedByKeyboardRef.current = e.detail === 0;
|
|
107
|
-
onClick(e);
|
|
109
|
+
onClick?.(e);
|
|
108
110
|
setOpen(true);
|
|
109
111
|
},
|
|
110
112
|
children: /* @__PURE__ */ jsx(Icon, {})
|
|
@@ -128,9 +130,9 @@ const DSAppPicker = ({
|
|
|
128
130
|
}
|
|
129
131
|
);
|
|
130
132
|
};
|
|
131
|
-
DSAppPicker.displayName =
|
|
133
|
+
DSAppPicker.displayName = DSAppPickerName;
|
|
132
134
|
const AppPickerWithSchema = describe(DSAppPicker);
|
|
133
|
-
AppPickerWithSchema.propTypes =
|
|
135
|
+
AppPickerWithSchema.propTypes = DSAppPickerPropTypes;
|
|
134
136
|
var DSAppPicker_default = DSAppPicker;
|
|
135
137
|
export {
|
|
136
138
|
AppPickerWithSchema,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport DSPopover from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSAppPickerDataTestIds, DSAppPickerName } from './DSAppPickerDefinitions.js';\n\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n\n const {\n apps,\n customApps,\n sectionTitle,\n customSectionTitle,\n icon: Icon,\n renderTrigger,\n isOpen,\n onClose,\n actionRef,\n onKeyDown,\n onClick,\n onClickOutside,\n triggerRef,\n } = propsWithDefault;\n\n const [open, setOpen] = useState(false);\n const [isOverflow, setIsOverflow] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const defaultTriggerRef = useRef(null);\n const wasOpenedByKeyboardRef = useRef(false);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToIndex = (index: number) => {\n if (wrapperRef.current) {\n const parent = wrapperRef.current;\n const buttons = [...parent.querySelectorAll('button')];\n buttons[index].focus();\n }\n };\n actionRef.current.focusWrapper = () => {\n wrapperRef.current?.focus();\n };\n }\n }, [actionRef, apps, customApps]);\n\n useEffect(() => {\n setTimeout(() => {\n if (wrapperRef.current) {\n const { scrollHeight, clientHeight } = wrapperRef.current;\n if (scrollHeight > clientHeight) return setIsOverflow(true);\n }\n return setIsOverflow(false);\n });\n }, [isOpen, open]);\n\n const handleOnClose = useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [onClose]);\n\n const handleOnClickOutside = (e: React.MouseEvent) => {\n setOpen(false);\n onClose?.();\n onClickOutside?.(e);\n };\n\n const AppPickerContent = useCallback(\n () => (\n <AppPickerImpl\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n close={handleOnClose}\n wrapperRef={wrapperRef}\n onKeyDown={onKeyDown}\n triggerRef={triggerRef || defaultTriggerRef}\n actionRef={actionRef}\n triggerIsInternal={!renderTrigger}\n wasOpenedByKeyboardRef={wasOpenedByKeyboardRef}\n isOverflow={isOverflow}\n />\n ),\n [\n actionRef,\n apps,\n customApps,\n customSectionTitle,\n handleOnClose,\n isOverflow,\n onKeyDown,\n renderTrigger,\n sectionTitle,\n triggerRef,\n ],\n );\n\n const RenderTrigger =\n renderTrigger ||\n (({ ref }: { ref: React.RefObject<HTMLButtonElement> }) => (\n <DSButtonV2\n data-testid={DSAppPickerDataTestIds.TRIGGER}\n id=\"app-picker__button\"\n buttonType=\"icon\"\n aria-haspopup=\"true\"\n aria-expanded={isOpen ?? open}\n aria-label=\"Application picker\"\n innerRef={mergeRefs(ref, defaultTriggerRef)}\n onClick={(e: React.MouseEvent | React.KeyboardEvent) => {\n wasOpenedByKeyboardRef.current = e.detail === 0;\n onClick?.(e);\n setOpen(true);\n }}\n >\n <Icon />\n </DSButtonV2>\n ));\n\n return (\n <DSPopover\n content={<AppPickerContent />}\n isOpen={typeof isOpen === 'boolean' ? isOpen : open}\n onClickOutside={handleOnClickOutside}\n placement=\"bottom\"\n interactionType=\"click\"\n renderTrigger={RenderTrigger}\n showArrow\n style={{\n padding: '0',\n maxWidth: '1000px',\n width: 'fit-content',\n }}\n />\n );\n};\n\nDSAppPicker.displayName = DSAppPickerName;\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = DSAppPickerPropTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const DSAppPickerName = "DSAppPicker";
|
|
3
|
+
const DSAppPickerSlots = {
|
|
4
|
+
ROOT: "root",
|
|
5
|
+
TITLE: "title",
|
|
6
|
+
SEPARATOR: "separator",
|
|
7
|
+
ROW: "row",
|
|
8
|
+
ITEM: "item"
|
|
9
|
+
};
|
|
10
|
+
const DSAppPickerDataTestIds = {
|
|
11
|
+
TRIGGER: "app-picker__button",
|
|
12
|
+
WRAPPER: "app-picker__wrapper",
|
|
13
|
+
CHIP: "app-picker__chip",
|
|
14
|
+
MAIN_TITLE: "app-picker__main-title",
|
|
15
|
+
CUSTOM_TITLE: "app-picker__custom-title"
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
DSAppPickerDataTestIds,
|
|
19
|
+
DSAppPickerName,
|
|
20
|
+
DSAppPickerSlots
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=DSAppPickerDefinitions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPickerDefinitions.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAppPickerName = 'DSAppPicker';\n\nexport const DSAppPickerSlots = {\n ROOT: 'root',\n TITLE: 'title',\n SEPARATOR: 'separator',\n ROW: 'row',\n ITEM: 'item',\n};\n\nexport const DSAppPickerDataTestIds = {\n TRIGGER: 'app-picker__button',\n WRAPPER: 'app-picker__wrapper',\n CHIP: 'app-picker__chip',\n MAIN_TITLE: 'app-picker__main-title',\n CUSTOM_TITLE: 'app-picker__custom-title',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,cAAc;AAChB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -20,7 +20,7 @@ const useKeepTrackButtons = ({
|
|
|
20
20
|
if (!e.hasAttribute("disabled")) {
|
|
21
21
|
allFocusableButtons?.current?.push(e);
|
|
22
22
|
}
|
|
23
|
-
if (e.getAttribute("aria-
|
|
23
|
+
if (e.getAttribute("aria-selected") === "true") {
|
|
24
24
|
selectedButton.current = index;
|
|
25
25
|
}
|
|
26
26
|
if (wasOpenedByKeyboardRef.current || !triggerIsInternal) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useKeepTrackButtons.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useEffect, useRef } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { DSAppPickerT } from '../react-desc-prop-types.js';\nimport { focusSelectedOrFirstAvailable } from '../utils.js';\n\ninterface UseKeepTrackButtonsT {\n wrapperRef: React.RefObject<HTMLDivElement>;\n wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;\n actionRef?: DSAppPickerT.ActionRef;\n triggerIsInternal?: boolean;\n}\n\nexport const useKeepTrackButtons = ({\n wrapperRef,\n wasOpenedByKeyboardRef,\n actionRef,\n triggerIsInternal,\n}: UseKeepTrackButtonsT) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusSelectedOrFirstAvailable = () =>\n setTimeout(() => focusSelectedOrFirstAvailable(wrapperRef, allFocusableButtons, selectedButton));\n }\n }, [actionRef, wrapperRef]);\n\n useEffect(() => {\n setTimeout(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n if (!e.hasAttribute('disabled')) {\n allFocusableButtons?.current?.push(e);\n }\n if (e.getAttribute('aria-selected') === 'true') {\n selectedButton.current = index;\n }\n if (wasOpenedByKeyboardRef.current || !triggerIsInternal) {\n focusSelectedOrFirstAvailable(wrapperRef, allFocusableButtons, selectedButton);\n } else {\n wrapperRef.current?.focus();\n }\n });\n });\n }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal]);\n\n return { allFocusableButtons, selectedButton };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,cAAc;AAElC,SAAS,qCAAqC;AASvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,sBAAsB,OAA4B,CAAC,CAAC;AAC1D,QAAM,iBAAiB,OAAsB,IAAI;AAEjD,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,gCAAgC,MAChD,WAAW,MAAM,8BAA8B,YAAY,qBAAqB,cAAc,CAAC;AAAA,IACnG;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,YAAU,MAAM;AACd,eAAW,MAAM;AACf,kBAAY,SAAS,iBAAiB,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU;AACpE,YAAI,CAAC,EAAE,aAAa,UAAU,GAAG;AAC/B,+BAAqB,SAAS,KAAK,CAAC;AAAA,QACtC;AACA,YAAI,EAAE,aAAa,eAAe,MAAM,QAAQ;AAC9C,yBAAe,UAAU;AAAA,QAC3B;AACA,YAAI,uBAAuB,WAAW,CAAC,mBAAmB;AACxD,wCAA8B,YAAY,qBAAqB,cAAc;AAAA,QAC/E,OAAO;AACL,qBAAW,SAAS,MAAM;AAAA,QAC5B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,wBAAwB,YAAY,iBAAiB,CAAC;AAE1D,SAAO,EAAE,qBAAqB,eAAe;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
2
|
+
import { DSAppPicker, AppPickerWithSchema } from "./DSAppPicker.js";
|
|
3
|
+
import { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from "./DSAppPickerDefinitions.js";
|
|
3
4
|
import { default as default2 } from "./DSAppPicker.js";
|
|
4
5
|
export {
|
|
6
|
+
AppPickerWithSchema,
|
|
7
|
+
DSAppPicker,
|
|
8
|
+
DSAppPickerDataTestIds,
|
|
9
|
+
DSAppPickerName,
|
|
10
|
+
DSAppPickerSlots,
|
|
5
11
|
default2 as default
|
|
6
12
|
};
|
|
7
13
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './DSAppPickerDefinitions.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n\nexport { default } from './DSAppPicker.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,2BAA2B;AACjD,SAAS,iBAAiB,kBAAkB,8BAA8B;AAG1E,SAAS,WAAAA,gBAAe;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { MenuPicker } from "@elliemae/ds-icons";
|
|
4
|
-
|
|
4
|
+
import { PropTypes } from "@elliemae/ds-props-helpers";
|
|
5
|
+
const defaultProps = {
|
|
6
|
+
apps: [],
|
|
7
|
+
customApps: [],
|
|
8
|
+
sectionTitle: "APPLICATIONS",
|
|
9
|
+
customSectionTitle: "CUSTOM APPLICATIONS",
|
|
10
|
+
icon: () => /* @__PURE__ */ jsx(MenuPicker, { color: ["brand-primary", "700"], size: "m" })
|
|
11
|
+
};
|
|
12
|
+
const DSAppPickerPropTypes = {
|
|
5
13
|
apps: PropTypes.array.description(
|
|
6
14
|
"Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
|
|
7
15
|
).isRequired,
|
|
@@ -22,6 +30,7 @@ const propTypes = {
|
|
|
22
30
|
onClickOutside: PropTypes.func.description("Callback event when the user clicks outside the App Picker.")
|
|
23
31
|
};
|
|
24
32
|
export {
|
|
25
|
-
|
|
33
|
+
DSAppPickerPropTypes,
|
|
34
|
+
defaultProps
|
|
26
35
|
};
|
|
27
|
-
//# sourceMappingURL=
|
|
36
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSAppPickerT {\n export interface AppItem {\n label: string;\n icon: React.ComponentType<{ className: string; size: string }>;\n onClick?: (e: React.MouseEvent, item: AppItem) => void | null;\n disabled?: boolean;\n id?: string;\n selected?: boolean;\n }\n\n export type ActionRef = React.MutableRefObject<{\n focusToIndex?: (index: number) => void;\n focusSelectedOrFirstAvailable?: () => void;\n focusWrapper: () => void;\n }>;\n\n export interface DefaultProps {\n apps: AppItem[];\n customApps: AppItem[];\n sectionTitle: string;\n customSectionTitle: string;\n icon: React.ComponentType<SvgIconT.Props>;\n }\n\n export interface OptionalProps {\n onClose?: () => void;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onClickOutside?: (e: React.MouseEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n actionRef?: ActionRef;\n renderTrigger?: React.ComponentType<Record<string, unknown>>;\n isOpen?: boolean;\n triggerRef?: React.RefObject<HTMLButtonElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSAppPickerT.DefaultProps = {\n apps: [],\n customApps: [],\n sectionTitle: 'APPLICATIONS',\n customSectionTitle: 'CUSTOM APPLICATIONS',\n icon: () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\n\nexport const DSAppPickerPropTypes = {\n apps: PropTypes.array.description(\n 'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ).isRequired,\n customApps: PropTypes.array.description(\n 'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ),\n sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n renderTrigger: PropTypes.func.description('Custom trigger component.'),\n actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n ),\n isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4DT;AA1Dd,SAAS,kBAAkB;AAG3B,SAAS,iBAAiB;AAkDnB,MAAM,eAA0C;AAAA,EACrD,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,oBAAC,cAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAAuB;AAAA,EAClC,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,UAAU;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAC1G;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
|
|
4
|
+
import { DSAppPickerName, DSAppPickerSlots } from "./DSAppPickerDefinitions.js";
|
|
5
|
+
const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })`
|
|
5
6
|
align-items: center;
|
|
6
7
|
min-width: 308px;
|
|
7
8
|
min-height: 110px;
|
|
@@ -15,14 +16,14 @@ const StyledWrapper = styled(Grid, { name: "DSAppPicker", slot: "root" })`
|
|
|
15
16
|
outline: none;
|
|
16
17
|
}
|
|
17
18
|
`;
|
|
18
|
-
const StyledListItem = styled.
|
|
19
|
+
const StyledListItem = styled("li", { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`
|
|
19
20
|
list-style: none;
|
|
20
21
|
`;
|
|
21
|
-
const StyledListItemFullRow = styled.
|
|
22
|
+
const StyledListItemFullRow = styled("li", { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`
|
|
22
23
|
list-style: none;
|
|
23
24
|
grid-column: 1/4;
|
|
24
25
|
`;
|
|
25
|
-
const StyledTitle = styled("h3", { name:
|
|
26
|
+
const StyledTitle = styled("h3", { name: DSAppPickerName, slot: DSAppPickerSlots.TITLE })`
|
|
26
27
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
27
28
|
font-size: ${({ theme }) => theme.fontSizes.value[400]};
|
|
28
29
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
@@ -30,7 +31,7 @@ const StyledTitle = styled("h3", { name: "DSAppPicker", slot: "title" })`
|
|
|
30
31
|
line-height: 1.385;
|
|
31
32
|
text-transform: uppercase;
|
|
32
33
|
`;
|
|
33
|
-
const StyledSeparator = styled("hr", { name:
|
|
34
|
+
const StyledSeparator = styled("hr", { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`
|
|
34
35
|
border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
|
|
35
36
|
border-bottom: none;
|
|
36
37
|
width: 99%;
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledWrapper = styled(Grid, { name:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,YAAY;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSAppPickerName, DSAppPickerSlots } from './DSAppPickerDefinitions.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })<{\n isOverflow: boolean;\n}>`\n align-items: center;\n min-width: 308px;\n min-height: 110px;\n max-height: 449px;\n width: 308px;\n overflow-y: auto;\n overflow-x: hidden;\n margin: 0;\n padding: ${({ isOverflow }) => (isOverflow ? '0 0 8px 16px' : '0 16px 8px 16px')};\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledListItem = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ITEM })`\n list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled('li', { name: DSAppPickerName, slot: DSAppPickerSlots.ROW })`\n list-style: none;\n grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled('h3', { name: DSAppPickerName, slot: DSAppPickerSlots.TITLE })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.value[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin: 12px 0 8px 0;\n line-height: 1.385;\n text-transform: uppercase;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSAppPickerName, slot: DSAppPickerSlots.SEPARATOR })`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n border-bottom: none;\n width: 99%;\n margin: 8px 0 0 0;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB,wBAAwB;AAE3C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnF,CAAC,EAAE,WAAW,MAAO,aAAa,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,iBAAiB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,KAAK,CAAC;AAAA;AAAA;AAI1F,MAAM,wBAAwB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,IAAI,CAAC;AAAA;AAAA;AAAA;AAKhG,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,WACpF,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAM3C,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,UAAU,CAAC;AAAA,0BAC7E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DSAppPickerT } from './react-desc-prop-types.js';
|
|
3
|
+
interface AppPickerImplProps extends Omit<DSAppPickerT.InternalProps, 'onClose' | 'icon' | 'onClick' | 'onClickOutside' | 'renderTrigger' | 'isOpen'> {
|
|
4
|
+
close: () => void;
|
|
5
|
+
wrapperRef: React.RefObject<HTMLDivElement>;
|
|
6
|
+
isOverflow: boolean;
|
|
7
|
+
wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;
|
|
8
|
+
triggerIsInternal: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const AppPickerImpl: React.ComponentType<AppPickerImplProps>;
|
|
3
11
|
export default AppPickerImpl;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare const
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DSAppPickerT } from './react-desc-prop-types.js';
|
|
3
|
+
declare const DSAppPicker: React.ComponentType<DSAppPickerT.Props>;
|
|
4
|
+
declare const AppPickerWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSAppPickerT.Props>;
|
|
4
5
|
export { DSAppPicker, AppPickerWithSchema };
|
|
5
6
|
export default DSAppPicker;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const DSAppPickerName = "DSAppPicker";
|
|
2
|
+
export declare const DSAppPickerSlots: {
|
|
3
|
+
ROOT: string;
|
|
4
|
+
TITLE: string;
|
|
5
|
+
SEPARATOR: string;
|
|
6
|
+
ROW: string;
|
|
7
|
+
ITEM: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const DSAppPickerDataTestIds: {
|
|
10
|
+
TRIGGER: string;
|
|
11
|
+
WRAPPER: string;
|
|
12
|
+
CHIP: string;
|
|
13
|
+
MAIN_TITLE: string;
|
|
14
|
+
CUSTOM_TITLE: string;
|
|
15
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { DSAppPickerT } from '../react-desc-prop-types.js';
|
|
3
3
|
interface UseKeepTrackButtonsT {
|
|
4
4
|
wrapperRef: React.RefObject<HTMLDivElement>;
|
|
5
5
|
wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;
|
|
6
|
-
actionRef?: ActionRef;
|
|
6
|
+
actionRef?: DSAppPickerT.ActionRef;
|
|
7
7
|
triggerIsInternal?: boolean;
|
|
8
8
|
}
|
|
9
9
|
export declare const useKeepTrackButtons: ({ wrapperRef, wasOpenedByKeyboardRef, actionRef, triggerIsInternal, }: UseKeepTrackButtonsT) => {
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';
|
|
2
|
+
export { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './DSAppPickerDefinitions.js';
|
|
3
|
+
export type { DSAppPickerT } from './react-desc-prop-types.js';
|
|
2
4
|
export { default } from './DSAppPicker.js';
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SvgIconT } from '@elliemae/ds-icons';
|
|
3
|
+
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
4
|
+
export declare namespace DSAppPickerT {
|
|
5
|
+
interface AppItem {
|
|
6
|
+
label: string;
|
|
7
|
+
icon: React.ComponentType<{
|
|
8
|
+
className: string;
|
|
9
|
+
size: string;
|
|
10
|
+
}>;
|
|
11
|
+
onClick?: (e: React.MouseEvent, item: AppItem) => void | null;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
id?: string;
|
|
14
|
+
selected?: boolean;
|
|
15
|
+
}
|
|
16
|
+
type ActionRef = React.MutableRefObject<{
|
|
17
|
+
focusToIndex?: (index: number) => void;
|
|
18
|
+
focusSelectedOrFirstAvailable?: () => void;
|
|
19
|
+
focusWrapper: () => void;
|
|
20
|
+
}>;
|
|
21
|
+
interface DefaultProps {
|
|
22
|
+
apps: AppItem[];
|
|
23
|
+
customApps: AppItem[];
|
|
24
|
+
sectionTitle: string;
|
|
25
|
+
customSectionTitle: string;
|
|
26
|
+
icon: React.ComponentType<SvgIconT.Props>;
|
|
27
|
+
}
|
|
28
|
+
interface OptionalProps {
|
|
29
|
+
onClose?: () => void;
|
|
30
|
+
onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
31
|
+
onClickOutside?: (e: React.MouseEvent) => void;
|
|
32
|
+
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
33
|
+
actionRef?: ActionRef;
|
|
34
|
+
renderTrigger?: React.ComponentType<Record<string, unknown>>;
|
|
35
|
+
isOpen?: boolean;
|
|
36
|
+
triggerRef?: React.RefObject<HTMLButtonElement>;
|
|
37
|
+
}
|
|
38
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
|
|
39
|
+
}
|
|
40
|
+
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
export declare const defaultProps: DSAppPickerT.DefaultProps;
|
|
44
|
+
export declare const DSAppPickerPropTypes: React.WeakValidationMap<unknown>;
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
2
|
+
export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
3
3
|
isOverflow: boolean;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const StyledListItem: import("styled-components").StyledComponent<
|
|
6
|
-
export declare const StyledListItemFullRow: import("styled-components").StyledComponent<
|
|
5
|
+
export declare const StyledListItem: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object, never>;
|
|
6
|
+
export declare const StyledListItemFullRow: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object, never>;
|
|
7
7
|
export declare const StyledTitle: import("styled-components").StyledComponent<"h3", import("@elliemae/ds-system").Theme, object, never>;
|
|
8
8
|
export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system").Theme, object, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-app-picker",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"files": [
|
|
@@ -59,14 +59,14 @@
|
|
|
59
59
|
"indent": 4
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@elliemae/ds-button": "3.17.0-next.
|
|
63
|
-
"@elliemae/ds-chip": "3.17.0-next.
|
|
64
|
-
"@elliemae/ds-grid": "3.17.0-next.
|
|
65
|
-
"@elliemae/ds-icons": "3.17.0-next.
|
|
66
|
-
"@elliemae/ds-popover": "3.17.0-next.
|
|
67
|
-
"@elliemae/ds-props-helpers": "3.17.0-next.
|
|
68
|
-
"@elliemae/ds-system": "3.17.0-next.
|
|
69
|
-
"@elliemae/ds-utilities": "3.17.0-next.
|
|
62
|
+
"@elliemae/ds-button": "3.17.0-next.10",
|
|
63
|
+
"@elliemae/ds-chip": "3.17.0-next.10",
|
|
64
|
+
"@elliemae/ds-grid": "3.17.0-next.10",
|
|
65
|
+
"@elliemae/ds-icons": "3.17.0-next.10",
|
|
66
|
+
"@elliemae/ds-popover": "3.17.0-next.10",
|
|
67
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.10",
|
|
68
|
+
"@elliemae/ds-system": "3.17.0-next.10",
|
|
69
|
+
"@elliemae/ds-utilities": "3.17.0-next.10"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@testing-library/jest-dom": "~5.16.5",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\n\nexport const propTypes = {\n apps: PropTypes.array.description(\n 'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ).isRequired,\n customApps: PropTypes.array.description(\n 'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ),\n sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n renderTrigger: PropTypes.func.description('Custom trigger component.'),\n actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n ),\n isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA0B;AAC1B,sBAA2B;AAEpB,MAAM,YAAY;AAAA,EACvB,MAAM,kCAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,kCAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,kCAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,kCAAU,KAAK,YAAY,6DAA6D;AAC1G;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types/AppPickerTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { SvgIconType } from '@elliemae/ds-icons';\nimport type React from 'react';\n\nexport interface AppItemType {\n label: string;\n icon: React.ComponentType<{ className: string; size: string }>;\n onClick?: (e: React.MouseEvent, item: AppItemType) => void | null;\n disabled?: boolean;\n id?: string;\n selected?: boolean;\n}\n\nexport type ActionRef = React.MutableRefObject<{\n focusToIndex?: (index: number) => void;\n focusSelectedOrFirstAvailable?: () => void;\n focusWrapper: () => void;\n}>;\n\nexport interface AppPickerPropsType {\n apps: AppItemType[];\n customApps: AppItemType[];\n sectionTitle: string;\n customSectionTitle: string;\n icon: SvgIconType;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n actionRef?: ActionRef;\n onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n onClickOutside?: (e: React.MouseEvent) => void;\n renderTrigger?: React.ComponentType<unknown>;\n isOpen?: boolean;\n onClose?: () => void;\n triggerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport interface AppPickerImplProps {\n apps: AppItemType[];\n customApps: AppItemType[];\n sectionTitle: string;\n customSectionTitle: string;\n close?: () => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n wrapperRef: React.RefObject<HTMLDivElement>;\n triggerRef: React.RefObject<HTMLElement>;\n actionRef?: ActionRef;\n isOverflow: boolean;\n triggerIsInternal: boolean;\n wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;\n}\n\nexport type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;\nexport type DSAppPickerType = React.ComponentType<AppPickerPropsType>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\n\nexport const propTypes = {\n apps: PropTypes.array.description(\n 'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ).isRequired,\n customApps: PropTypes.array.description(\n 'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ),\n sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n renderTrigger: PropTypes.func.description('Custom trigger component.'),\n actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n ),\n isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,UAAU;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAC1G;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import type { SvgIconType } from '@elliemae/ds-icons';
|
|
2
|
-
import type React from 'react';
|
|
3
|
-
export interface AppItemType {
|
|
4
|
-
label: string;
|
|
5
|
-
icon: React.ComponentType<{
|
|
6
|
-
className: string;
|
|
7
|
-
size: string;
|
|
8
|
-
}>;
|
|
9
|
-
onClick?: (e: React.MouseEvent, item: AppItemType) => void | null;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
id?: string;
|
|
12
|
-
selected?: boolean;
|
|
13
|
-
}
|
|
14
|
-
export type ActionRef = React.MutableRefObject<{
|
|
15
|
-
focusToIndex?: (index: number) => void;
|
|
16
|
-
focusSelectedOrFirstAvailable?: () => void;
|
|
17
|
-
focusWrapper: () => void;
|
|
18
|
-
}>;
|
|
19
|
-
export interface AppPickerPropsType {
|
|
20
|
-
apps: AppItemType[];
|
|
21
|
-
customApps: AppItemType[];
|
|
22
|
-
sectionTitle: string;
|
|
23
|
-
customSectionTitle: string;
|
|
24
|
-
icon: SvgIconType;
|
|
25
|
-
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
26
|
-
actionRef?: ActionRef;
|
|
27
|
-
onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
28
|
-
onClickOutside?: (e: React.MouseEvent) => void;
|
|
29
|
-
renderTrigger?: React.ComponentType<unknown>;
|
|
30
|
-
isOpen?: boolean;
|
|
31
|
-
onClose?: () => void;
|
|
32
|
-
triggerRef?: React.RefObject<HTMLButtonElement>;
|
|
33
|
-
}
|
|
34
|
-
export interface AppPickerImplProps {
|
|
35
|
-
apps: AppItemType[];
|
|
36
|
-
customApps: AppItemType[];
|
|
37
|
-
sectionTitle: string;
|
|
38
|
-
customSectionTitle: string;
|
|
39
|
-
close?: () => void;
|
|
40
|
-
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
41
|
-
wrapperRef: React.RefObject<HTMLDivElement>;
|
|
42
|
-
triggerRef: React.RefObject<HTMLElement>;
|
|
43
|
-
actionRef?: ActionRef;
|
|
44
|
-
isOverflow: boolean;
|
|
45
|
-
triggerIsInternal: boolean;
|
|
46
|
-
wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;
|
|
47
|
-
}
|
|
48
|
-
export type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;
|
|
49
|
-
export type DSAppPickerType = React.ComponentType<AppPickerPropsType>;
|