@elliemae/ds-app-picker 3.60.0-next.1 → 3.60.0-next.3
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 +42 -25
- package/dist/cjs/AppPickerImpl.js.map +2 -2
- package/dist/cjs/DSAppPicker.js +2 -2
- package/dist/cjs/DSAppPicker.js.map +2 -2
- package/dist/cjs/config/useAppPicker.js +8 -4
- package/dist/cjs/config/useAppPicker.js.map +2 -2
- package/dist/cjs/{DSAppPickerDefinitions.js → constants/index.js} +8 -6
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +6 -6
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/AppPickerImpl.js +36 -19
- package/dist/esm/AppPickerImpl.js.map +2 -2
- package/dist/esm/DSAppPicker.js +1 -1
- package/dist/esm/DSAppPicker.js.map +1 -1
- package/dist/esm/config/useAppPicker.js +10 -4
- package/dist/esm/config/useAppPicker.js.map +2 -2
- package/dist/esm/{DSAppPickerDefinitions.js → constants/index.js} +5 -3
- package/dist/esm/{DSAppPickerDefinitions.js.map → constants/index.js.map} +3 -3
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styles.js +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/dist/types/config/useAppPicker.d.ts +368 -0
- package/dist/types/{DSAppPickerDefinitions.d.ts → constants/index.d.ts} +2 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/dist/types/tests/app-picker.events.test.d.ts +1 -0
- package/dist/types/tests/app-picker.exports.test.d.ts +1 -0
- package/dist/types/tests/app-picker.get-owner-props.test.d.ts +1 -0
- package/package.json +13 -13
- package/dist/cjs/DSAppPickerDefinitions.js.map +0 -7
- /package/dist/types/tests/{AppPicker.test.d.ts → app-picker.a11y.test.d.ts} +0 -0
- /package/dist/types/tests/{a11y/axe.test.d.ts → app-picker.data-testid.test.d.ts} +0 -0
|
@@ -34,13 +34,15 @@ module.exports = __toCommonJS(AppPickerImpl_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
37
38
|
var import_ds_chip = require("@elliemae/ds-chip");
|
|
38
39
|
var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
|
|
39
40
|
var import_utils = require("./utils.js");
|
|
40
41
|
var import_styles = require("./styles.js");
|
|
41
42
|
var import_useKeepTrackButtons = require("./hooks/useKeepTrackButtons.js");
|
|
42
|
-
var
|
|
43
|
+
var import_constants = require("./constants/index.js");
|
|
43
44
|
var import_useAppPicker = require("./config/useAppPicker.js");
|
|
45
|
+
const StyledChip = (0, import_ds_system.styled)(import_ds_chip.DSChip, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.CHIP })``;
|
|
44
46
|
const AppPickerImpl = (props) => {
|
|
45
47
|
const {
|
|
46
48
|
apps,
|
|
@@ -56,7 +58,8 @@ const AppPickerImpl = (props) => {
|
|
|
56
58
|
wasOpenedByKeyboardRef,
|
|
57
59
|
triggerIsInternal
|
|
58
60
|
} = props;
|
|
59
|
-
const { ownerPropsConfig } = (0, import_useAppPicker.useAppPicker)(props);
|
|
61
|
+
const { ownerPropsConfig, globalAttributes, xstyledProps } = (0, import_useAppPicker.useAppPicker)(props);
|
|
62
|
+
const { wrap, ...safeGlobalAttributes } = globalAttributes;
|
|
60
63
|
const { allFocusableButtons } = (0, import_useKeepTrackButtons.useKeepTrackButtons)({
|
|
61
64
|
wrapperRef,
|
|
62
65
|
wasOpenedByKeyboardRef,
|
|
@@ -94,25 +97,37 @@ const AppPickerImpl = (props) => {
|
|
|
94
97
|
(appList, prevIndex, title) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: appList.map((app, index) => {
|
|
95
98
|
const { label, disabled, applyAriaDisabled, selected, icon: Icon, id } = app;
|
|
96
99
|
const IconComp = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "app-picker__icon", size: "m" });
|
|
97
|
-
|
|
98
|
-
|
|
100
|
+
const getOwnerPropsArguments = () => app;
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
102
|
+
import_styles.StyledListItem,
|
|
99
103
|
{
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
104
|
+
"data-testid": import_constants.DSAppPickerDataTestIds.ITEM,
|
|
105
|
+
role: "presentation",
|
|
106
|
+
getOwnerProps: ownerPropsConfig.getOwnerProps,
|
|
107
|
+
getOwnerPropsArguments,
|
|
108
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
+
StyledChip,
|
|
110
|
+
{
|
|
111
|
+
onClick: handleOnClick(app),
|
|
112
|
+
"data-testid": "app-picker__chip",
|
|
113
|
+
disabled,
|
|
114
|
+
applyAriaDisabled,
|
|
115
|
+
selected,
|
|
116
|
+
"aria-selected": selected,
|
|
117
|
+
role: "option",
|
|
118
|
+
id,
|
|
119
|
+
"aria-label": `${label}. ${title} (${index + prevIndex} of ${totalAppsLength})`,
|
|
120
|
+
icon: IconComp,
|
|
121
|
+
label,
|
|
122
|
+
getOwnerProps: ownerPropsConfig.getOwnerProps,
|
|
123
|
+
getOwnerPropsArguments
|
|
124
|
+
},
|
|
125
|
+
index
|
|
126
|
+
)
|
|
127
|
+
}
|
|
128
|
+
);
|
|
114
129
|
}) }),
|
|
115
|
-
[handleOnClick, totalAppsLength
|
|
130
|
+
[ownerPropsConfig, handleOnClick, totalAppsLength]
|
|
116
131
|
);
|
|
117
132
|
const AppsRows = (0, import_react.useMemo)(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);
|
|
118
133
|
const CustomRows = (0, import_react.useMemo)(
|
|
@@ -145,35 +160,37 @@ const AppPickerImpl = (props) => {
|
|
|
145
160
|
role: "listbox",
|
|
146
161
|
innerRef: convertedTypeReference,
|
|
147
162
|
onKeyDown: handleOnKeyDown,
|
|
148
|
-
"data-testid":
|
|
163
|
+
"data-testid": import_constants.DSAppPickerDataTestIds.ROOT,
|
|
149
164
|
isOverflow,
|
|
150
165
|
cols: layout.cols,
|
|
151
166
|
rows: layout.rows,
|
|
152
167
|
tabIndex: -1,
|
|
153
168
|
"aria-label": `Application picker, ${sectionTitle} (${apps.length} apps)${customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ""}`,
|
|
154
169
|
...ownerPropsConfig,
|
|
170
|
+
...safeGlobalAttributes,
|
|
171
|
+
...xstyledProps,
|
|
155
172
|
children: [
|
|
156
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItemFullRow, { "data-testid":
|
|
173
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItemFullRow, { "data-testid": import_constants.DSAppPickerDataTestIds.ROW, "aria-hidden": true, role: "group", ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: sectionTitle }) }),
|
|
157
174
|
AppsRows,
|
|
158
175
|
customApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
159
176
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
160
177
|
import_styles.StyledListItemFullRow,
|
|
161
178
|
{
|
|
162
|
-
"data-testid":
|
|
179
|
+
"data-testid": import_constants.DSAppPickerDataTestIds.ROW,
|
|
163
180
|
"aria-hidden": true,
|
|
164
181
|
role: "group",
|
|
165
182
|
...ownerPropsConfig,
|
|
166
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSeparator, { "data-testid":
|
|
183
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSeparator, { "data-testid": import_constants.DSAppPickerDataTestIds.SEPARATOR, role: "presentation", ...ownerPropsConfig })
|
|
167
184
|
}
|
|
168
185
|
),
|
|
169
186
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
170
187
|
import_styles.StyledListItemFullRow,
|
|
171
188
|
{
|
|
172
|
-
"data-testid":
|
|
189
|
+
"data-testid": import_constants.DSAppPickerDataTestIds.ROW,
|
|
173
190
|
"aria-hidden": true,
|
|
174
191
|
role: "group",
|
|
175
192
|
...ownerPropsConfig,
|
|
176
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { "data-testid":
|
|
193
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: customSectionTitle })
|
|
177
194
|
}
|
|
178
195
|
),
|
|
179
196
|
CustomRows
|
|
@@ -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 max-lines */\n/* eslint-disable react/no-array-index-key */\nimport React, { useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { keys } from './utils.js';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles.js';\nimport { useKeepTrackButtons } from './hooks/useKeepTrackButtons.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerDataTestIds } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\nimport React, { useCallback, useRef, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { keys } from './utils.js';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles.js';\nimport { useKeepTrackButtons } from './hooks/useKeepTrackButtons.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\nimport { useAppPicker } from './config/useAppPicker.js';\n\nconst StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;\n\ninterface AppPickerImplProps\n extends Omit<\n DSAppPickerT.InternalProps,\n 'onClose' | 'icon' | 'onClick' | 'onClickOutside' | 'renderTrigger' | 'isOpen'\n > {\n close: () => void;\n wrapperRef: React.RefObject<HTMLDivElement>;\n isOverflow: boolean;\n wasOpenedByKeyboardRef: React.MutableRefObject<boolean>;\n triggerIsInternal: boolean;\n}\n\nconst AppPickerImpl: React.ComponentType<AppPickerImplProps> = (props) => {\n const {\n apps,\n customApps,\n sectionTitle,\n customSectionTitle,\n close,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n actionRef,\n wasOpenedByKeyboardRef,\n triggerIsInternal,\n } = props;\n\n const { ownerPropsConfig, globalAttributes, xstyledProps } = useAppPicker(props);\n\n // wrap is extracted to avoid passing it to the UL element\n const { wrap, ...safeGlobalAttributes } = globalAttributes;\n\n const { allFocusableButtons } = useKeepTrackButtons({\n wrapperRef,\n wasOpenedByKeyboardRef,\n actionRef,\n triggerIsInternal,\n });\n\n const firstElementRef = useRef<HTMLElement | null>(null);\n const lastElementRef = useRef<HTMLElement | null>(null);\n\n const handleOnClick = useCallback(\n (app: DSAppPickerT.AppItem) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n triggerRef?.current?.focus();\n close();\n }\n },\n [onKeyDown, triggerRef, close],\n );\n const [firstButton] = allFocusableButtons;\n firstElementRef.current = firstButton;\n lastElementRef.current = allFocusableButtons[allFocusableButtons.length - 1];\n\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n onKeyDown: handleOnKeyDownWrapper,\n });\n\n const totalAppsLength = useMemo(() => apps.length + customApps.length, [apps.length, customApps.length]);\n\n const buildRows = useCallback(\n (appList: DSAppPickerT.AppItem[], prevIndex: number, title: string): JSX.Element => (\n <>\n {appList.map((app, index) => {\n const { label, disabled, applyAriaDisabled, selected, icon: Icon, id } = app;\n\n // eslint-disable-next-line react/no-unstable-nested-components\n const IconComp = () => <Icon className=\"app-picker__icon\" size=\"m\" />;\n const getOwnerPropsArguments = () => app;\n return (\n <StyledListItem\n data-testid={DSAppPickerDataTestIds.ITEM}\n role=\"presentation\"\n getOwnerProps={ownerPropsConfig.getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledChip\n key={index}\n onClick={handleOnClick(app)}\n data-testid=\"app-picker__chip\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n selected={selected}\n aria-selected={selected}\n role=\"option\"\n id={id}\n aria-label={`${label}. ${title} (${index + prevIndex} of ${totalAppsLength})`}\n icon={IconComp}\n label={label}\n getOwnerProps={ownerPropsConfig.getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledListItem>\n );\n })}\n </>\n ),\n [ownerPropsConfig, handleOnClick, totalAppsLength],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);\n const CustomRows = useMemo(\n () => buildRows(customApps, apps.length, customSectionTitle),\n [apps.length, buildRows, customApps, customSectionTitle],\n );\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n const 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 // Needed just for typescript reasons\n const convertedTypeReference = wrapperRef as unknown as React.RefObject<HTMLDivElement> &\n React.RefObject<HTMLUListElement>;\n\n return (\n <StyledWrapper\n forwardedAs=\"ul\"\n role=\"listbox\"\n innerRef={convertedTypeReference}\n onKeyDown={handleOnKeyDown}\n data-testid={DSAppPickerDataTestIds.ROOT}\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n tabIndex={-1}\n aria-label={`Application picker, ${sectionTitle} (${apps.length} apps)${\n customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ''\n }`}\n {...ownerPropsConfig}\n {...safeGlobalAttributes}\n {...xstyledProps}\n >\n <StyledListItemFullRow data-testid={DSAppPickerDataTestIds.ROW} aria-hidden role=\"group\" {...ownerPropsConfig}>\n <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} role=\"presentation\" {...ownerPropsConfig}>\n {sectionTitle}\n </StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow\n data-testid={DSAppPickerDataTestIds.ROW}\n aria-hidden\n role=\"group\"\n {...ownerPropsConfig}\n >\n <StyledSeparator data-testid={DSAppPickerDataTestIds.SEPARATOR} role=\"presentation\" {...ownerPropsConfig} />\n </StyledListItemFullRow>\n <StyledListItemFullRow\n data-testid={DSAppPickerDataTestIds.ROW}\n aria-hidden\n role=\"group\"\n {...ownerPropsConfig}\n >\n <StyledTitle data-testid={DSAppPickerDataTestIds.TITLE} role=\"presentation\" {...ownerPropsConfig}>\n {customSectionTitle}\n </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
|
}
|
package/dist/cjs/DSAppPicker.js
CHANGED
|
@@ -42,7 +42,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
42
42
|
var import_ds_popover = require("@elliemae/ds-popover");
|
|
43
43
|
var import_AppPickerImpl = __toESM(require("./AppPickerImpl.js"));
|
|
44
44
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
45
|
-
var
|
|
45
|
+
var import_constants = require("./constants/index.js");
|
|
46
46
|
var import_useAppPicker = require("./config/useAppPicker.js");
|
|
47
47
|
const DSAppPicker = (props) => {
|
|
48
48
|
const { propsWithDefault, ownerPropsConfig } = (0, import_useAppPicker.useAppPicker)(props);
|
|
@@ -173,7 +173,7 @@ const DSAppPicker = (props) => {
|
|
|
173
173
|
}
|
|
174
174
|
);
|
|
175
175
|
};
|
|
176
|
-
DSAppPicker.displayName =
|
|
176
|
+
DSAppPicker.displayName = import_constants.DSAppPickerName;
|
|
177
177
|
const AppPickerWithSchema = (0, import_ds_props_helpers.describe)(DSAppPicker);
|
|
178
178
|
AppPickerWithSchema.propTypes = import_react_desc_prop_types.DSAppPickerPropTypes;
|
|
179
179
|
var DSAppPicker_default = DSAppPicker;
|
|
@@ -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, useMemo, useRef, useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\n\nimport { DSPopover } from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypes } from './react-desc-prop-types.js';\nimport { DSAppPickerName } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EjB;AA7EN,mBAAyE;AACzE,0BAA2B;AAC3B,uBAA0B;AAC1B,8BAAyB;AAEzB,wBAA0B;AAC1B,2BAA0B;AAE1B,mCAAqC;AACrC,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\n\nimport { DSPopover } from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl.js';\nimport type { DSAppPickerT } from './react-desc-prop-types.js';\nimport { DSAppPickerPropTypes } from './react-desc-prop-types.js';\nimport { DSAppPickerName } from './constants/index.js';\nimport { useAppPicker } from './config/useAppPicker.js';\n\nconst DSAppPicker: React.ComponentType<DSAppPickerT.Props> = (props) => {\n const { propsWithDefault, ownerPropsConfig } = useAppPicker(props);\n\n const { getOwnerProps, getOwnerPropsArguments } = ownerPropsConfig;\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 {...getOwnerProps()}\n {...getOwnerPropsArguments()}\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 getOwnerProps,\n getOwnerPropsArguments,\n ],\n );\n\n const RenderTrigger = useMemo(\n () =>\n renderTrigger ||\n (({ ref }: { ref: React.RefObject<HTMLButtonElement> }) => (\n <DSButtonV2\n data-testid=\"app-picker__button\"\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, triggerRef || 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 [Icon, isOpen, onClick, open, renderTrigger, triggerRef],\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["AppPickerImpl"]
|
|
7
7
|
}
|
|
@@ -35,17 +35,21 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
38
|
-
var
|
|
38
|
+
var import_constants = require("../constants/index.js");
|
|
39
39
|
const useAppPicker = (props) => {
|
|
40
40
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
41
|
-
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAppPickerPropTypes,
|
|
41
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSAppPickerPropTypes, import_constants.DSAppPickerName);
|
|
42
42
|
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
|
|
43
|
+
const globalAttributes = (0, import_ds_props_helpers.getGlobalAttributes)(props);
|
|
44
|
+
const xstyledProps = (0, import_ds_props_helpers.getXstyledProps)(props);
|
|
43
45
|
return import_react.default.useMemo(
|
|
44
46
|
() => ({
|
|
45
47
|
propsWithDefault,
|
|
46
|
-
ownerPropsConfig
|
|
48
|
+
ownerPropsConfig,
|
|
49
|
+
globalAttributes,
|
|
50
|
+
xstyledProps
|
|
47
51
|
}),
|
|
48
|
-
[propsWithDefault, ownerPropsConfig]
|
|
52
|
+
[propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps]
|
|
49
53
|
);
|
|
50
54
|
};
|
|
51
55
|
//# sourceMappingURL=useAppPicker.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useAppPicker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useOwnerProps,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypes } from '../react-desc-prop-types.js';\nimport { DSAppPickerName } from '../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useOwnerProps,\n useValidateTypescriptPropTypes,\n getGlobalAttributes,\n getXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { type DSAppPickerT, defaultProps, DSAppPickerPropTypes } from '../react-desc-prop-types.js';\nimport { DSAppPickerName } from '../constants/index.js';\n\nexport const useAppPicker = (props: DSAppPickerT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSAppPickerT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSAppPickerPropTypes, DSAppPickerName);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n const globalAttributes = getGlobalAttributes<DSAppPickerT.Props>(props);\n const xstyledProps = getXstyledProps<DSAppPickerT.Props>(props);\n return React.useMemo(\n () => ({\n propsWithDefault,\n ownerPropsConfig,\n globalAttributes,\n xstyledProps,\n }),\n [propsWithDefault, ownerPropsConfig, globalAttributes, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAMO;AACP,mCAAsE;AACtE,uBAAgC;AAEzB,MAAM,eAAe,CAAC,UAA8B;AAIzD,QAAM,uBAAmB,sDAAyD,OAAO,yCAAY;AACrG,8DAA+B,kBAAkB,mDAAsB,gCAAe;AAItF,QAAM,uBAAmB,uCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,QAAM,uBAAmB,6CAAwC,KAAK;AACtE,QAAM,mBAAe,yCAAoC,KAAK;AAC9D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,kBAAkB,kBAAkB,YAAY;AAAA,EACrE;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -26,13 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
29
|
+
var constants_exports = {};
|
|
30
|
+
__export(constants_exports, {
|
|
31
31
|
DSAppPickerDataTestIds: () => DSAppPickerDataTestIds,
|
|
32
32
|
DSAppPickerName: () => DSAppPickerName,
|
|
33
33
|
DSAppPickerSlots: () => DSAppPickerSlots
|
|
34
34
|
});
|
|
35
|
-
module.exports = __toCommonJS(
|
|
35
|
+
module.exports = __toCommonJS(constants_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
const DSAppPickerName = "DSApppicker";
|
|
@@ -41,9 +41,11 @@ const DSAppPickerSlots = {
|
|
|
41
41
|
ITEM: "item",
|
|
42
42
|
TITLE: "title",
|
|
43
43
|
SEPARATOR: "separator",
|
|
44
|
-
ROW: "row"
|
|
44
|
+
ROW: "row",
|
|
45
|
+
CHIP: "chip"
|
|
45
46
|
};
|
|
46
47
|
const DSAppPickerDataTestIds = {
|
|
47
|
-
...(0, import_ds_system.slotObjectToDataTestIds)(DSAppPickerName, DSAppPickerSlots)
|
|
48
|
+
...(0, import_ds_system.slotObjectToDataTestIds)(DSAppPickerName, DSAppPickerSlots),
|
|
49
|
+
CHIP: "app-picker__chip"
|
|
48
50
|
};
|
|
49
|
-
//# sourceMappingURL=
|
|
51
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAppPickerName = 'DSApppicker';\n\nexport const DSAppPickerSlots = {\n ROOT: 'root',\n ITEM: 'item',\n TITLE: 'title',\n SEPARATOR: 'separator',\n ROW: 'row',\n CHIP: 'chip',\n};\n\nexport const DSAppPickerDataTestIds = {\n ...(slotObjectToDataTestIds(DSAppPickerName, DSAppPickerSlots) as Record<keyof typeof DSAppPickerSlots, string>),\n CHIP: 'app-picker__chip',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAI,0CAAwB,iBAAiB,gBAAgB;AAAA,EAC7D,MAAM;AACR;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -30,12 +30,12 @@ var index_exports = {};
|
|
|
30
30
|
__export(index_exports, {
|
|
31
31
|
AppPickerWithSchema: () => import_DSAppPicker.AppPickerWithSchema,
|
|
32
32
|
DSAppPicker: () => import_DSAppPicker.DSAppPicker,
|
|
33
|
-
DSAppPickerDataTestIds: () =>
|
|
34
|
-
DSAppPickerName: () =>
|
|
35
|
-
DSAppPickerSlots: () =>
|
|
33
|
+
DSAppPickerDataTestIds: () => import_constants.DSAppPickerDataTestIds,
|
|
34
|
+
DSAppPickerName: () => import_constants.DSAppPickerName,
|
|
35
|
+
DSAppPickerSlots: () => import_constants.DSAppPickerSlots
|
|
36
36
|
});
|
|
37
37
|
module.exports = __toCommonJS(index_exports);
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_DSAppPicker = require("./DSAppPicker.js");
|
|
40
|
-
var
|
|
40
|
+
var import_constants = require("./constants/index.js");
|
|
41
41
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAiD;AACjD,
|
|
4
|
+
"sourcesContent": ["export { DSAppPicker, AppPickerWithSchema } from './DSAppPicker.js';\nexport { DSAppPickerName, DSAppPickerSlots, DSAppPickerDataTestIds } from './constants/index.js';\nexport type { DSAppPickerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAiD;AACjD,uBAA0E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
|
-
var
|
|
39
|
+
var import_constants = require("./constants/index.js");
|
|
40
40
|
const defaultProps = {
|
|
41
41
|
// export const defaultProps: DSAppPickerT.DefaultProps = {
|
|
42
42
|
apps: [],
|
|
@@ -46,7 +46,7 @@ const defaultProps = {
|
|
|
46
46
|
icon: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuPicker, { color: ["brand-primary", "700"], size: "m" })
|
|
47
47
|
};
|
|
48
48
|
const DSAppPickerPropTypes = {
|
|
49
|
-
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(
|
|
49
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSAppPickerName, import_constants.DSAppPickerSlots),
|
|
50
50
|
apps: import_ds_props_helpers.PropTypes.array.description(
|
|
51
51
|
"Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
|
|
52
52
|
).isRequired,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoET;AAnEd,sBAA2B;AAG3B,8BAAoD;AAEpD,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';\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 applyAriaDisabled?: 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 interface RenderTriggerProp {\n ref: React.MutableRefObject<HTMLButtonElement>;\n [key: string]: unknown;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {\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<RenderTriggerProp>;\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: Omit<DSAppPickerT.DefaultProps, `dsAppPicker${Capitalize<string>}`> = {\n // export 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 ...getPropsPerSlotPropTypes(DSAppPickerName, DSAppPickerSlots),\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 triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'Ref to the trigger button.',\n ),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoET;AAnEd,sBAA2B;AAG3B,8BAAoD;AAEpD,uBAAkD;AAwD3C,MAAM,eAAoF;AAAA;AAAA,EAE/F,MAAM,CAAC;AAAA,EACP,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,MAAM,MAAM,4CAAC,8BAAW,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AACpE;AAMO,MAAM,uBAAuB;AAAA,EAClC,OAAG,kDAAyB,kCAAiB,iCAAgB;AAAA,EAC7D,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;AAAA,EACxG,YAAY,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC7F;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -38,8 +38,8 @@ module.exports = __toCommonJS(styles_exports);
|
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
40
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
41
|
-
var
|
|
42
|
-
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
41
|
+
var import_constants = require("./constants/index.js");
|
|
42
|
+
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ROOT })`
|
|
43
43
|
align-items: center;
|
|
44
44
|
min-width: 308px;
|
|
45
45
|
min-height: 110px;
|
|
@@ -53,14 +53,14 @@ const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
|
53
53
|
outline: none;
|
|
54
54
|
}
|
|
55
55
|
`;
|
|
56
|
-
const StyledListItem = (0, import_ds_system.styled)("li", { name:
|
|
56
|
+
const StyledListItem = (0, import_ds_system.styled)("li", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ITEM })`
|
|
57
57
|
list-style: none;
|
|
58
58
|
`;
|
|
59
|
-
const StyledListItemFullRow = (0, import_ds_system.styled)("li", { name:
|
|
59
|
+
const StyledListItemFullRow = (0, import_ds_system.styled)("li", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ROW })`
|
|
60
60
|
list-style: none;
|
|
61
61
|
grid-column: 1/4;
|
|
62
62
|
`;
|
|
63
|
-
const StyledTitle = (0, import_ds_system.styled)("h3", { name:
|
|
63
|
+
const StyledTitle = (0, import_ds_system.styled)("h3", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.TITLE })`
|
|
64
64
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
65
65
|
font-size: ${({ theme }) => theme.fontSizes.value[400]};
|
|
66
66
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
@@ -68,7 +68,7 @@ const StyledTitle = (0, import_ds_system.styled)("h3", { name: import_DSAppPicke
|
|
|
68
68
|
line-height: 1.385;
|
|
69
69
|
text-transform: uppercase;
|
|
70
70
|
`;
|
|
71
|
-
const StyledSeparator = (0, import_ds_system.styled)("hr", { name:
|
|
71
|
+
const StyledSeparator = (0, import_ds_system.styled)("hr", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.SEPARATOR })`
|
|
72
72
|
border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
|
|
73
73
|
border-bottom: none;
|
|
74
74
|
width: 99%;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,qBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["/* 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 './constants/index.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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAkD;AAE3C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnF,CAAC,EAAE,WAAW,MAAO,aAAa,iBAAiB,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAM3E,MAAM,qBAAiB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAI1F,MAAM,4BAAwB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,IAAI,CAAC;AAAA;AAAA;AAAA;AAKhG,MAAM,kBAAc,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,WACpF,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACpC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMnD,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,UAAU,CAAC;AAAA,0BAC7E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useRef, useMemo } from "react";
|
|
4
|
+
import { styled } from "@elliemae/ds-system";
|
|
4
5
|
import { DSChip } from "@elliemae/ds-chip";
|
|
5
6
|
import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
|
|
6
7
|
import { keys } from "./utils.js";
|
|
7
8
|
import { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from "./styles.js";
|
|
8
9
|
import { useKeepTrackButtons } from "./hooks/useKeepTrackButtons.js";
|
|
9
|
-
import { DSAppPickerDataTestIds } from "./
|
|
10
|
+
import { DSAppPickerDataTestIds, DSAppPickerName, DSAppPickerSlots } from "./constants/index.js";
|
|
10
11
|
import { useAppPicker } from "./config/useAppPicker.js";
|
|
12
|
+
const StyledChip = styled(DSChip, { name: DSAppPickerName, slot: DSAppPickerSlots.CHIP })``;
|
|
11
13
|
const AppPickerImpl = (props) => {
|
|
12
14
|
const {
|
|
13
15
|
apps,
|
|
@@ -23,7 +25,8 @@ const AppPickerImpl = (props) => {
|
|
|
23
25
|
wasOpenedByKeyboardRef,
|
|
24
26
|
triggerIsInternal
|
|
25
27
|
} = props;
|
|
26
|
-
const { ownerPropsConfig } = useAppPicker(props);
|
|
28
|
+
const { ownerPropsConfig, globalAttributes, xstyledProps } = useAppPicker(props);
|
|
29
|
+
const { wrap, ...safeGlobalAttributes } = globalAttributes;
|
|
27
30
|
const { allFocusableButtons } = useKeepTrackButtons({
|
|
28
31
|
wrapperRef,
|
|
29
32
|
wasOpenedByKeyboardRef,
|
|
@@ -61,25 +64,37 @@ const AppPickerImpl = (props) => {
|
|
|
61
64
|
(appList, prevIndex, title) => /* @__PURE__ */ jsx(Fragment, { children: appList.map((app, index) => {
|
|
62
65
|
const { label, disabled, applyAriaDisabled, selected, icon: Icon, id } = app;
|
|
63
66
|
const IconComp = () => /* @__PURE__ */ jsx(Icon, { className: "app-picker__icon", size: "m" });
|
|
64
|
-
|
|
65
|
-
|
|
67
|
+
const getOwnerPropsArguments = () => app;
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
StyledListItem,
|
|
66
70
|
{
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
71
|
+
"data-testid": DSAppPickerDataTestIds.ITEM,
|
|
72
|
+
role: "presentation",
|
|
73
|
+
getOwnerProps: ownerPropsConfig.getOwnerProps,
|
|
74
|
+
getOwnerPropsArguments,
|
|
75
|
+
children: /* @__PURE__ */ jsx(
|
|
76
|
+
StyledChip,
|
|
77
|
+
{
|
|
78
|
+
onClick: handleOnClick(app),
|
|
79
|
+
"data-testid": "app-picker__chip",
|
|
80
|
+
disabled,
|
|
81
|
+
applyAriaDisabled,
|
|
82
|
+
selected,
|
|
83
|
+
"aria-selected": selected,
|
|
84
|
+
role: "option",
|
|
85
|
+
id,
|
|
86
|
+
"aria-label": `${label}. ${title} (${index + prevIndex} of ${totalAppsLength})`,
|
|
87
|
+
icon: IconComp,
|
|
88
|
+
label,
|
|
89
|
+
getOwnerProps: ownerPropsConfig.getOwnerProps,
|
|
90
|
+
getOwnerPropsArguments
|
|
91
|
+
},
|
|
92
|
+
index
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
);
|
|
81
96
|
}) }),
|
|
82
|
-
[handleOnClick, totalAppsLength
|
|
97
|
+
[ownerPropsConfig, handleOnClick, totalAppsLength]
|
|
83
98
|
);
|
|
84
99
|
const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);
|
|
85
100
|
const CustomRows = useMemo(
|
|
@@ -119,6 +134,8 @@ const AppPickerImpl = (props) => {
|
|
|
119
134
|
tabIndex: -1,
|
|
120
135
|
"aria-label": `Application picker, ${sectionTitle} (${apps.length} apps)${customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ""}`,
|
|
121
136
|
...ownerPropsConfig,
|
|
137
|
+
...safeGlobalAttributes,
|
|
138
|
+
...xstyledProps,
|
|
122
139
|
children: [
|
|
123
140
|
/* @__PURE__ */ jsx(StyledListItemFullRow, { "data-testid": DSAppPickerDataTestIds.ROW, "aria-hidden": true, role: "group", ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledTitle, { "data-testid": DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: sectionTitle }) }),
|
|
124
141
|
AppsRows,
|