@elliemae/ds-app-picker 3.1.0-next.0 → 3.1.0-next.11
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 +13 -11
- package/dist/cjs/AppPickerImpl.js.map +2 -2
- package/dist/cjs/DSAppPicker.js.map +2 -2
- package/dist/cjs/propTypes.js +13 -13
- package/dist/cjs/propTypes.js.map +2 -2
- package/dist/esm/AppPickerImpl.js +13 -11
- package/dist/esm/AppPickerImpl.js.map +2 -2
- package/dist/esm/DSAppPicker.js.map +2 -2
- package/dist/esm/propTypes.js +1 -1
- package/dist/esm/propTypes.js.map +1 -1
- package/package.json +17 -17
|
@@ -42,19 +42,21 @@ const AppPickerImpl = ({
|
|
|
42
42
|
const allFocusableButtons = (0, import_react.useRef)([]);
|
|
43
43
|
const selectedButton = (0, import_react.useRef)(null);
|
|
44
44
|
(0, import_react.useEffect)(() => {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
window.requestAnimationFrame(() => {
|
|
46
|
+
wrapperRef?.current?.querySelectorAll("button").forEach((e, index) => {
|
|
47
|
+
if (!e.hasAttribute("disabled")) {
|
|
48
|
+
allFocusableButtons?.current?.push(e);
|
|
49
|
+
}
|
|
50
|
+
if (e.getAttribute("aria-selected") === "true") {
|
|
51
|
+
selectedButton.current = index;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
if (selectedButton.current) {
|
|
55
|
+
wrapperRef?.current?.querySelectorAll("button")[selectedButton.current].focus();
|
|
56
|
+
} else {
|
|
57
|
+
allFocusableButtons?.current[0]?.focus();
|
|
51
58
|
}
|
|
52
59
|
});
|
|
53
|
-
if (selectedButton.current) {
|
|
54
|
-
wrapperRef?.current?.querySelectorAll("button")[selectedButton.current].focus();
|
|
55
|
-
} else {
|
|
56
|
-
allFocusableButtons?.current[0]?.focus();
|
|
57
|
-
}
|
|
58
60
|
}, [wrapperRef]);
|
|
59
61
|
const handleKeyDown = (0, import_react.useCallback)((e) => {
|
|
60
62
|
switch (e.key) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AppPickerImpl.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA+D;AAC/D,qBAAuB;AACvB,mBAAqB;AAErB,oBAAmG;AAEnG,MAAM,gBAAqC,CAAC;AAAA,EAC1C,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,QAAQ,MAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,sBAAsB,yBAA4B,CAAC,CAAC;AAC1D,QAAM,iBAAiB,yBAAsB,IAAI;AAEjD,8BAAU,MAAM;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n // we add requestAnimationFrame because if is truncated the chip will rerender and we are\n // gonna lose track of the new instance\n window.requestAnimationFrame(() => {\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 });\n\n if (selectedButton.current) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n } else {\n allFocusableButtons?.current[0]?.focus();\n }\n });\n }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n switch (e.key) {\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.TAB:\n if (e.shiftKey) {\n if (e.target === allFocusableButtons.current[0]) {\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n }\n } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n }\n break;\n default:\n break;\n }\n },\n [close, triggerRef],\n );\n\n const handleOnClick = useCallback(\n (app: AppItemType) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n close();\n }\n },\n [onKeyDown, close],\n );\n\n const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);\n\n const buildRows = useCallback(\n (appList: AppItemType[], prevIndex = 0, title: string): JSX.Element => {\n const formattedRows = appList.map((app, index) => {\n const { label, disabled, selected, icon: Icon, id } = app;\n return (\n <StyledListItem>\n <DSChip\n key={index}\n onClick={handleOnClick(app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n selected={selected}\n aria-selected={selected}\n aria-setsize={totalAppsLenght}\n aria-posinset={index + prevIndex}\n id={id}\n aria-label={`${label}. ${title}`}\n icon={() => <Icon className=\"app-picker__icon\" size=\"m\" />}\n label={label}\n ></DSChip>\n </StyledListItem>\n );\n });\n\n return <>{formattedRows}</>;\n },\n [handleKeyDown, handleOnClick, totalAppsLenght],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);\n const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n let rows = [];\n if (apps.length > 0) {\n appsRows = apps.length / 3;\n rows.push('68px', `repeat(${appsRows}, 68px})`);\n }\n if (customApps.length > 0) {\n customRows = customApps.length / 3;\n rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n }\n return {\n rows,\n cols,\n };\n }, [apps.length, customApps.length]);\n\n return (\n <StyledWrapper\n role=\"listbox\"\n ref={wrapperRef}\n onKeyDown={handleOnKeyDownWrapper}\n data-testid=\"app-picker__wrapper\"\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n forwardedAs=\"ul\"\n >\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__main-title\">{sectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow aria-hidden>\n <StyledSeparator />\n </StyledListItemFullRow>\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {CustomRows}\n </>\n )}\n </StyledWrapper>\n );\n};\n\nexport default AppPickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSAppPicker.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { describe, mergeRefs } from '@elliemae/ds-utilities';\nimport DSPopover from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl';\nimport { propTypes } from './propTypes';\nimport type { DSAppPickerType } from './types/AppPickerTypes';\n\nconst DSAppPicker: DSAppPickerType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n icon: Icon = () => <MenuPicker fill={['brand-primary', 700]} size=\"m\" />,\n renderTrigger,\n isOpen,\n onClose = () => null,\n actionRef,\n onKeyDown,\n onClick = () => null,\n onClickOutside = () => null,\n triggerRef,\n}) => {\n const [open, setOpen] = useState(false);\n const [isOverflow, setIsOverflow] = useState(false);\n const wrapperRef = useRef<HTMLUListElement>(null);\n const defaultTriggerRef = useRef(null);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToIndex = (index) => {\n if (wrapperRef.current) {\n const parent = wrapperRef.current;\n const buttons = [...parent.querySelectorAll('button')];\n buttons[index].focus();\n }\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 = () => {\n if (typeof isOpen === 'boolean') {\n setOpen(isOpen);\n } else {\n setOpen(false);\n }\n onClose();\n };\n\n const handleOnClickOutside = (e: MouseEvent) => {\n setOpen(false);\n onClose();\n onClickOutside(e);\n };\n\n const AppPickerContent = () => (\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 isOverflow={isOverflow}\n />\n );\n const RenderTrigger =\n renderTrigger ||\n (({ ref }) => (\n <DSButtonV2\n data-testid=\"app-picker__button\"\n id=\"app-picker__button\"\n buttonType=\"icon\"\n aria-haspopup=\"true\"\n aria-expanded={open || isOpen}\n innerRef={mergeRefs(ref, defaultTriggerRef)}\n onClick={(e) => {\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 = 'DSAppPicker';\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = propTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;AACnD,sBAA2B;AAC3B,uBAA2B;AAC3B,0BAAoC;AACpC,wBAAsB;AACtB,2BAA0B;AAC1B,uBAA0B;AAG1B,MAAM,cAA+B,CAAC;AAAA,EACpC,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,MAAM,OAAO,MAAM,mDAAC;AAAA,IAAW,MAAM,CAAC,iBAAiB,GAAG;AAAA,IAAG,MAAK;AAAA,GAAI;AAAA,EACtE;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAChB;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,iBAAiB,MAAM;AAAA,EACvB;AAAA,MACI;AACJ,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AACtC,QAAM,CAAC,YAAY,iBAAiB,2BAAS,KAAK;AAClD,QAAM,aAAa,yBAAyB,IAAI;AAChD,QAAM,oBAAoB,yBAAO,IAAI;AAErC,8BAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,eAAe,CAAC,UAAU;AAC1C,YAAI,WAAW,SAAS;AACtB,gBAAM,SAAS,WAAW;AAC1B,gBAAM,UAAU,CAAC,GAAG,OAAO,iBAAiB,QAAQ,CAAC;AACrD,kBAAQ,OAAO,MAAM;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,UAAU,CAAC;AAEhC,8BAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,WAAW,SAAS;AACtB,cAAM,EAAE,cAAc,iBAAiB,WAAW;AAClD,YAAI,eAAe;AAAc,iBAAO,cAAc,IAAI;AAAA,MAC5D;AACA,aAAO,cAAc,KAAK;AAAA,IAC5B,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,gBAAgB,MAAM;AAC1B,QAAI,OAAO,WAAW,WAAW;AAC/B,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,cAAQ,KAAK;AAAA,IACf;AACA,YAAQ;AAAA,EACV;AAEA,QAAM,uBAAuB,CAAC,MAAkB;AAC9C,YAAQ,KAAK;AACb,YAAQ;AACR,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,mBAAmB,MACvB,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY,cAAc;AAAA,IAC1B;AAAA,GACF;AAEF,QAAM,gBACJ,iBACC,EAAC,EAAE,UACF,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,IAAG;AAAA,IACH,YAAW;AAAA,IACX,iBAAc;AAAA,IACd,iBAAe,QAAQ;AAAA,IACvB,UAAU,mCAAU,KAAK,iBAAiB;AAAA,IAC1C,SAAS,CAAC,MAAM;AACd,cAAQ,CAAC;AACT,cAAQ,IAAI;AAAA,IACd;AAAA,KAEA,mDAAC,UAAK,CACR;AAGJ,SACE,mDAAC;AAAA,IACC,SAAS,mDAAC,sBAAiB;AAAA,IAC3B,QAAQ,OAAO,WAAW,YAAY,SAAS;AAAA,IAC/C,gBAAgB;AAAA,IAChB,WAAU;AAAA,IACV,iBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAS;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,kCAAS,WAAW;AAChD,oBAAoB,YAAY;AAGhC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -24,20 +24,20 @@ __export(propTypes_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(propTypes_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
|
-
var
|
|
27
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
28
28
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
29
29
|
const propTypes = {
|
|
30
|
-
apps:
|
|
31
|
-
customApps:
|
|
32
|
-
sectionTitle:
|
|
33
|
-
customSectionTitle:
|
|
34
|
-
icon:
|
|
35
|
-
renderTrigger:
|
|
36
|
-
actionRef:
|
|
37
|
-
isOpen:
|
|
38
|
-
onClose:
|
|
39
|
-
onKeyDown:
|
|
40
|
-
onClick:
|
|
41
|
-
onClickOutside:
|
|
30
|
+
apps: import_ds_utilities.PropTypes.array.description("Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]").isRequired,
|
|
31
|
+
customApps: import_ds_utilities.PropTypes.array.description("Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"),
|
|
32
|
+
sectionTitle: import_ds_utilities.PropTypes.string.description("main section title").defaultValue("APPLICATIONS"),
|
|
33
|
+
customSectionTitle: import_ds_utilities.PropTypes.string.description("custom section title").defaultValue("CUSTOM APPLICATIONS"),
|
|
34
|
+
icon: import_ds_utilities.PropTypes.func.description("trigger button s icon").defaultValue(import_ds_icons.MenuPicker),
|
|
35
|
+
renderTrigger: import_ds_utilities.PropTypes.func.description("Custom trigger component."),
|
|
36
|
+
actionRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description("Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker."),
|
|
37
|
+
isOpen: import_ds_utilities.PropTypes.bool.description("Wether the AppPicker should be open or not."),
|
|
38
|
+
onClose: import_ds_utilities.PropTypes.func.description("Callback function when the AppPicker closes"),
|
|
39
|
+
onKeyDown: import_ds_utilities.PropTypes.func.description("OnKeyDown handler callback."),
|
|
40
|
+
onClick: import_ds_utilities.PropTypes.func.description("Custom onClick for Trigger component."),
|
|
41
|
+
onClickOutside: import_ds_utilities.PropTypes.func.description("Callback event when the user clicks outside the App Picker.")
|
|
42
42
|
};
|
|
43
43
|
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\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};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,sBAA2B;AAEpB,MAAM,YAAY;AAAA,EACvB,MAAM,8BAAU,MAAM,YACpB,oGACF,EAAE;AAAA,EACF,YAAY,8BAAU,MAAM,YAC1B,sGACF;AAAA,EACA,cAAc,8BAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,8BAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,8BAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EAAE,YAC5F,qGACF;AAAA,EACA,QAAQ,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,8BAAU,KAAK,YAAY,6DAA6D;AAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,19 +17,21 @@ const AppPickerImpl = ({
|
|
|
17
17
|
const allFocusableButtons = useRef([]);
|
|
18
18
|
const selectedButton = useRef(null);
|
|
19
19
|
useEffect(() => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
window.requestAnimationFrame(() => {
|
|
21
|
+
wrapperRef?.current?.querySelectorAll("button").forEach((e, index) => {
|
|
22
|
+
if (!e.hasAttribute("disabled")) {
|
|
23
|
+
allFocusableButtons?.current?.push(e);
|
|
24
|
+
}
|
|
25
|
+
if (e.getAttribute("aria-selected") === "true") {
|
|
26
|
+
selectedButton.current = index;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
if (selectedButton.current) {
|
|
30
|
+
wrapperRef?.current?.querySelectorAll("button")[selectedButton.current].focus();
|
|
31
|
+
} else {
|
|
32
|
+
allFocusableButtons?.current[0]?.focus();
|
|
26
33
|
}
|
|
27
34
|
});
|
|
28
|
-
if (selectedButton.current) {
|
|
29
|
-
wrapperRef?.current?.querySelectorAll("button")[selectedButton.current].focus();
|
|
30
|
-
} else {
|
|
31
|
-
allFocusableButtons?.current[0]?.focus();
|
|
32
|
-
}
|
|
33
35
|
}, [wrapperRef]);
|
|
34
36
|
const handleKeyDown = useCallback((e) => {
|
|
35
37
|
switch (e.key) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/AppPickerImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n
|
|
5
|
-
"mappings": "AAAA;ACGA;AACA;AACA;AAEA;AAEA,MAAM,gBAAqC,CAAC;AAAA,EAC1C,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,QAAQ,MAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,sBAAsB,OAA4B,CAAC,CAAC;AAC1D,QAAM,iBAAiB,OAAsB,IAAI;AAEjD,YAAU,MAAM;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n // we add requestAnimationFrame because if is truncated the chip will rerender and we are\n // gonna lose track of the new instance\n window.requestAnimationFrame(() => {\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 });\n\n if (selectedButton.current) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n } else {\n allFocusableButtons?.current[0]?.focus();\n }\n });\n }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n switch (e.key) {\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.TAB:\n if (e.shiftKey) {\n if (e.target === allFocusableButtons.current[0]) {\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n }\n } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n }\n break;\n default:\n break;\n }\n },\n [close, triggerRef],\n );\n\n const handleOnClick = useCallback(\n (app: AppItemType) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n close();\n }\n },\n [onKeyDown, close],\n );\n\n const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);\n\n const buildRows = useCallback(\n (appList: AppItemType[], prevIndex = 0, title: string): JSX.Element => {\n const formattedRows = appList.map((app, index) => {\n const { label, disabled, selected, icon: Icon, id } = app;\n return (\n <StyledListItem>\n <DSChip\n key={index}\n onClick={handleOnClick(app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n selected={selected}\n aria-selected={selected}\n aria-setsize={totalAppsLenght}\n aria-posinset={index + prevIndex}\n id={id}\n aria-label={`${label}. ${title}`}\n icon={() => <Icon className=\"app-picker__icon\" size=\"m\" />}\n label={label}\n ></DSChip>\n </StyledListItem>\n );\n });\n\n return <>{formattedRows}</>;\n },\n [handleKeyDown, handleOnClick, totalAppsLenght],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);\n const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n let rows = [];\n if (apps.length > 0) {\n appsRows = apps.length / 3;\n rows.push('68px', `repeat(${appsRows}, 68px})`);\n }\n if (customApps.length > 0) {\n customRows = customApps.length / 3;\n rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n }\n return {\n rows,\n cols,\n };\n }, [apps.length, customApps.length]);\n\n return (\n <StyledWrapper\n role=\"listbox\"\n ref={wrapperRef}\n onKeyDown={handleOnKeyDownWrapper}\n data-testid=\"app-picker__wrapper\"\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n forwardedAs=\"ul\"\n >\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__main-title\">{sectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow aria-hidden>\n <StyledSeparator />\n </StyledListItemFullRow>\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {CustomRows}\n </>\n )}\n </StyledWrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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", "import React, { useState, useEffect, useRef } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef } from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { describe, mergeRefs } from '@elliemae/ds-utilities';\nimport DSPopover from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl';\nimport { propTypes } from './propTypes';\nimport type { DSAppPickerType } from './types/AppPickerTypes';\n\nconst DSAppPicker: DSAppPickerType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n icon: Icon = () => <MenuPicker fill={['brand-primary', 700]} size=\"m\" />,\n renderTrigger,\n isOpen,\n onClose = () => null,\n actionRef,\n onKeyDown,\n onClick = () => null,\n onClickOutside = () => null,\n triggerRef,\n}) => {\n const [open, setOpen] = useState(false);\n const [isOverflow, setIsOverflow] = useState(false);\n const wrapperRef = useRef<HTMLUListElement>(null);\n const defaultTriggerRef = useRef(null);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToIndex = (index) => {\n if (wrapperRef.current) {\n const parent = wrapperRef.current;\n const buttons = [...parent.querySelectorAll('button')];\n buttons[index].focus();\n }\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 = () => {\n if (typeof isOpen === 'boolean') {\n setOpen(isOpen);\n } else {\n setOpen(false);\n }\n onClose();\n };\n\n const handleOnClickOutside = (e: MouseEvent) => {\n setOpen(false);\n onClose();\n onClickOutside(e);\n };\n\n const AppPickerContent = () => (\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 isOverflow={isOverflow}\n />\n );\n const RenderTrigger =\n renderTrigger ||\n (({ ref }) => (\n <DSButtonV2\n data-testid=\"app-picker__button\"\n id=\"app-picker__button\"\n buttonType=\"icon\"\n aria-haspopup=\"true\"\n aria-expanded={open || isOpen}\n innerRef={mergeRefs(ref, defaultTriggerRef)}\n onClick={(e) => {\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 = 'DSAppPicker';\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = propTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAA+B,CAAC;AAAA,EACpC,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,MAAM,OAAO,MAAM,qCAAC;AAAA,IAAW,MAAM,CAAC,iBAAiB,GAAG;AAAA,IAAG,MAAK;AAAA,GAAI;AAAA,EACtE;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAChB;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,iBAAiB,MAAM;AAAA,EACvB;AAAA,MACI;AACJ,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,QAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;AAClD,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,oBAAoB,OAAO,IAAI;AAErC,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,eAAe,CAAC,UAAU;AAC1C,YAAI,WAAW,SAAS;AACtB,gBAAM,SAAS,WAAW;AAC1B,gBAAM,UAAU,CAAC,GAAG,OAAO,iBAAiB,QAAQ,CAAC;AACrD,kBAAQ,OAAO,MAAM;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,UAAU,CAAC;AAEhC,YAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,WAAW,SAAS;AACtB,cAAM,EAAE,cAAc,iBAAiB,WAAW;AAClD,YAAI,eAAe;AAAc,iBAAO,cAAc,IAAI;AAAA,MAC5D;AACA,aAAO,cAAc,KAAK;AAAA,IAC5B,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,gBAAgB,MAAM;AAC1B,QAAI,OAAO,WAAW,WAAW;AAC/B,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,cAAQ,KAAK;AAAA,IACf;AACA,YAAQ;AAAA,EACV;AAEA,QAAM,uBAAuB,CAAC,MAAkB;AAC9C,YAAQ,KAAK;AACb,YAAQ;AACR,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,mBAAmB,MACvB,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY,cAAc;AAAA,IAC1B;AAAA,GACF;AAEF,QAAM,gBACJ,iBACC,EAAC,EAAE,UACF,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,IAAG;AAAA,IACH,YAAW;AAAA,IACX,iBAAc;AAAA,IACd,iBAAe,QAAQ;AAAA,IACvB,UAAU,UAAU,KAAK,iBAAiB;AAAA,IAC1C,SAAS,CAAC,MAAM;AACd,cAAQ,CAAC;AACT,cAAQ,IAAI;AAAA,IACd;AAAA,KAEA,qCAAC,UAAK,CACR;AAGJ,SACE,qCAAC;AAAA,IACC,SAAS,qCAAC,sBAAiB;AAAA,IAC3B,QAAQ,OAAO,WAAW,YAAY,SAAS;AAAA,IAC/C,gBAAgB;AAAA,IAChB,WAAU;AAAA,IACV,iBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAS;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,SAAS,WAAW;AAChD,oBAAoB,YAAY;AAGhC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/propTypes.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "
|
|
2
|
+
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
3
|
import { MenuPicker } from "@elliemae/ds-icons";
|
|
4
4
|
const propTypes = {
|
|
5
5
|
apps: PropTypes.array.description("Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]").isRequired,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\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};\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,MAAM,YACpB,oGACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM,YAC1B,sGACF;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,YAC5F,qGACF;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
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-app-picker",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"files": [
|
|
@@ -58,22 +58,14 @@
|
|
|
58
58
|
"reportFile": "tests.xml",
|
|
59
59
|
"indent": 4
|
|
60
60
|
},
|
|
61
|
-
"scripts": {
|
|
62
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
63
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
64
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
65
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
66
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
67
|
-
},
|
|
68
61
|
"dependencies": {
|
|
69
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
70
|
-
"@elliemae/ds-chip": "3.1.0-next.
|
|
71
|
-
"@elliemae/ds-
|
|
72
|
-
"@elliemae/ds-
|
|
73
|
-
"@elliemae/ds-
|
|
74
|
-
"@elliemae/ds-
|
|
75
|
-
"@elliemae/ds-utilities": "3.1.0-next.
|
|
76
|
-
"react-desc": "^4.1.3"
|
|
62
|
+
"@elliemae/ds-button": "3.1.0-next.11",
|
|
63
|
+
"@elliemae/ds-chip": "3.1.0-next.11",
|
|
64
|
+
"@elliemae/ds-grid": "3.1.0-next.11",
|
|
65
|
+
"@elliemae/ds-icons": "3.1.0-next.11",
|
|
66
|
+
"@elliemae/ds-popover": "3.1.0-next.11",
|
|
67
|
+
"@elliemae/ds-system": "3.1.0-next.11",
|
|
68
|
+
"@elliemae/ds-utilities": "3.1.0-next.11"
|
|
77
69
|
},
|
|
78
70
|
"devDependencies": {
|
|
79
71
|
"@testing-library/jest-dom": "~5.16.2",
|
|
@@ -87,5 +79,13 @@
|
|
|
87
79
|
"publishConfig": {
|
|
88
80
|
"access": "public",
|
|
89
81
|
"typeSafety": false
|
|
82
|
+
},
|
|
83
|
+
"scripts": {
|
|
84
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
85
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
86
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
87
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
88
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
89
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
90
90
|
}
|
|
91
|
-
}
|
|
91
|
+
}
|