@elliemae/ds-app-picker 3.70.0-next.6 → 3.70.0-next.60
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/DSAppPicker.js +10 -141
- package/dist/cjs/DSAppPicker.js.map +3 -3
- package/dist/cjs/{utils.js → DSAppPickerCTX.js} +8 -25
- package/dist/cjs/DSAppPickerCTX.js.map +7 -0
- package/dist/cjs/config/useAppPicker.js +25 -8
- package/dist/cjs/config/useAppPicker.js.map +3 -3
- package/dist/cjs/config/useFocusTracker.js +104 -0
- package/dist/cjs/config/useFocusTracker.js.map +7 -0
- package/dist/cjs/config/useValidateProps.js +45 -0
- package/dist/cjs/config/useValidateProps.js.map +7 -0
- package/dist/cjs/constants/index.js +11 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/AppPanel.js +152 -0
- package/dist/cjs/parts/AppPanel.js.map +7 -0
- package/dist/cjs/parts/AppPickerFloatingContext/AppPickerContent.js +94 -0
- package/dist/cjs/parts/AppPickerFloatingContext/AppPickerContent.js.map +7 -0
- package/dist/cjs/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js +171 -0
- package/dist/cjs/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js.map +7 -0
- package/dist/cjs/parts/AppPickerItem.js +104 -0
- package/dist/cjs/parts/AppPickerItem.js.map +7 -0
- package/dist/cjs/parts/AppSection.js +94 -0
- package/dist/cjs/parts/AppSection.js.map +7 -0
- package/dist/cjs/parts/Trigger.js +81 -0
- package/dist/cjs/parts/Trigger.js.map +7 -0
- package/dist/cjs/parts/shared-styles.js +44 -0
- package/dist/cjs/parts/shared-styles.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +23 -7
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js +48 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/typescript-testing/typescript-app-picker-valid.js +13 -1
- package/dist/cjs/typescript-testing/typescript-app-picker-valid.js.map +2 -2
- package/dist/cjs/util/getChipId.js +36 -0
- package/dist/cjs/util/getChipId.js.map +7 -0
- package/dist/cjs/util/getChipRegionId.js +37 -0
- package/dist/cjs/util/getChipRegionId.js.map +7 -0
- package/dist/esm/DSAppPicker.js +10 -141
- package/dist/esm/DSAppPicker.js.map +3 -3
- package/dist/esm/DSAppPickerCTX.js +8 -0
- package/dist/esm/DSAppPickerCTX.js.map +7 -0
- package/dist/esm/config/useAppPicker.js +29 -13
- package/dist/esm/config/useAppPicker.js.map +3 -3
- package/dist/esm/config/useFocusTracker.js +74 -0
- package/dist/esm/config/useFocusTracker.js.map +7 -0
- package/dist/esm/config/useValidateProps.js +15 -0
- package/dist/esm/config/useValidateProps.js.map +7 -0
- package/dist/esm/constants/index.js +11 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/AppPanel.js +127 -0
- package/dist/esm/parts/AppPanel.js.map +7 -0
- package/dist/esm/parts/AppPickerFloatingContext/AppPickerContent.js +64 -0
- package/dist/esm/parts/AppPickerFloatingContext/AppPickerContent.js.map +7 -0
- package/dist/esm/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js +141 -0
- package/dist/esm/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js.map +7 -0
- package/dist/esm/parts/AppPickerItem.js +74 -0
- package/dist/esm/parts/AppPickerItem.js.map +7 -0
- package/dist/esm/parts/AppSection.js +64 -0
- package/dist/esm/parts/AppSection.js.map +7 -0
- package/dist/esm/parts/Trigger.js +51 -0
- package/dist/esm/parts/Trigger.js.map +7 -0
- package/dist/esm/parts/shared-styles.js +14 -0
- package/dist/esm/parts/shared-styles.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +29 -8
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +25 -0
- package/dist/esm/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/typescript-testing/typescript-app-picker-valid.js +13 -1
- package/dist/esm/typescript-testing/typescript-app-picker-valid.js.map +2 -2
- package/dist/esm/util/getChipId.js +6 -0
- package/dist/esm/util/getChipId.js.map +7 -0
- package/dist/esm/util/getChipRegionId.js +7 -0
- package/dist/esm/util/getChipRegionId.js.map +7 -0
- package/dist/types/DSAppPicker.d.ts +1 -2
- package/dist/types/DSAppPickerCTX.d.ts +6 -0
- package/dist/types/config/useAppPicker.d.ts +111 -92
- package/dist/types/config/useFocusTracker.d.ts +19 -0
- package/dist/types/config/useValidateProps.d.ts +3 -0
- package/dist/types/constants/index.d.ts +17 -7
- package/dist/types/parts/AppPanel.d.ts +2 -0
- package/dist/types/parts/AppPickerFloatingContext/AppPickerContent.d.ts +3 -0
- package/dist/types/parts/AppPickerFloatingContext/useAppPickerFloatingContext.d.ts +170 -0
- package/dist/types/parts/AppPickerItem.d.ts +11 -0
- package/dist/types/parts/AppSection.d.ts +6 -0
- package/dist/types/parts/Trigger.d.ts +13 -0
- package/dist/types/parts/shared-styles.d.ts +2 -0
- package/dist/types/react-desc-prop-types.d.ts +80 -9
- package/dist/types/util/getChipId.d.ts +2 -0
- package/dist/types/util/getChipRegionId.d.ts +1 -0
- package/package.json +19 -17
- package/dist/cjs/AppPickerImpl.js +0 -204
- package/dist/cjs/AppPickerImpl.js.map +0 -7
- package/dist/cjs/hooks/useKeepTrackButtons.js +0 -69
- package/dist/cjs/hooks/useKeepTrackButtons.js.map +0 -7
- package/dist/cjs/styles.js +0 -76
- package/dist/cjs/styles.js.map +0 -7
- package/dist/cjs/utils.js.map +0 -7
- package/dist/esm/AppPickerImpl.js +0 -174
- package/dist/esm/AppPickerImpl.js.map +0 -7
- package/dist/esm/hooks/useKeepTrackButtons.js +0 -39
- package/dist/esm/hooks/useKeepTrackButtons.js.map +0 -7
- package/dist/esm/styles.js +0 -46
- package/dist/esm/styles.js.map +0 -7
- package/dist/esm/utils.js +0 -25
- package/dist/esm/utils.js.map +0 -7
- package/dist/types/AppPickerImpl.d.ts +0 -11
- package/dist/types/hooks/useKeepTrackButtons.d.ts +0 -13
- package/dist/types/styles.d.ts +0 -7
- package/dist/types/tests/app-picker.a11y.test.d.ts +0 -1
- package/dist/types/tests/app-picker.data-testid.test.d.ts +0 -1
- package/dist/types/tests/app-picker.events.test.d.ts +0 -1
- package/dist/types/tests/app-picker.exports.test.d.ts +0 -1
- package/dist/types/tests/app-picker.get-owner-props.test.d.ts +0 -1
- package/dist/types/tests/app-picker.keyboard.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-app-picker-valid.d.ts +0 -1
- package/dist/types/utils.d.ts +0 -14
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SvgIconT } from '@elliemae/ds-icons';
|
|
3
|
-
import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
3
|
+
import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
|
|
4
4
|
import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
5
5
|
import { DSAppPickerName, DSAppPickerSlots } from './constants/index.js';
|
|
6
6
|
export declare namespace DSAppPickerT {
|
|
@@ -22,6 +22,48 @@ export declare namespace DSAppPickerT {
|
|
|
22
22
|
focusSelectedOrFirstAvailable?: () => void;
|
|
23
23
|
focusWrapper: () => void;
|
|
24
24
|
}>;
|
|
25
|
+
/**
|
|
26
|
+
* Why the panel opened. `trigger` carries the activating event and fires synchronously in the
|
|
27
|
+
* trigger's click handler (AppPicker owns the open). `controlled` fires when the consumer flips
|
|
28
|
+
* the `isOpen` prop themselves — no event, delivered when that flip takes effect.
|
|
29
|
+
*/
|
|
30
|
+
type OpenChange = {
|
|
31
|
+
reason: 'trigger';
|
|
32
|
+
event: React.MouseEvent | React.KeyboardEvent;
|
|
33
|
+
} | {
|
|
34
|
+
reason: 'controlled';
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Why the panel closed. The event-carrying reasons fire synchronously from the handler that owns
|
|
38
|
+
* the close (AppPicker in uncontrolled mode): `escape` (a scoped Escape), `click-outside`, and
|
|
39
|
+
* `trigger-toggle` (the trigger clicked while open). `controlled` fires when the consumer flips the
|
|
40
|
+
* `isOpen` prop themselves — no event, delivered when that flip takes effect.
|
|
41
|
+
*/
|
|
42
|
+
type CloseChange = {
|
|
43
|
+
reason: 'escape';
|
|
44
|
+
event: KeyboardEvent;
|
|
45
|
+
} | {
|
|
46
|
+
reason: 'click-outside';
|
|
47
|
+
event: MouseEvent | TouchEvent;
|
|
48
|
+
} | {
|
|
49
|
+
reason: 'trigger-toggle';
|
|
50
|
+
event: React.MouseEvent | React.KeyboardEvent;
|
|
51
|
+
} | {
|
|
52
|
+
reason: 'controlled';
|
|
53
|
+
};
|
|
54
|
+
interface RequiredProps {
|
|
55
|
+
}
|
|
56
|
+
type SlotFunctionArguments = {
|
|
57
|
+
dsApppickerRoot: () => object;
|
|
58
|
+
dsApppickerGroup: () => object;
|
|
59
|
+
dsApppickerItem: () => object;
|
|
60
|
+
dsApppickerTitle: () => object;
|
|
61
|
+
dsApppickerSeparator: () => object;
|
|
62
|
+
dsApppickerRow: () => object;
|
|
63
|
+
dsApppickerChip: () => object;
|
|
64
|
+
dsApppickerButton: () => object;
|
|
65
|
+
dsApppickerFloatingWrapper: () => object;
|
|
66
|
+
};
|
|
25
67
|
interface DefaultProps {
|
|
26
68
|
apps: AppItem[];
|
|
27
69
|
customApps: AppItem[];
|
|
@@ -30,23 +72,52 @@ export declare namespace DSAppPickerT {
|
|
|
30
72
|
icon: React.ComponentType<SvgIconT.Props>;
|
|
31
73
|
}
|
|
32
74
|
interface RenderTriggerProp {
|
|
33
|
-
ref: React.
|
|
75
|
+
ref: React.RefCallback<HTMLButtonElement>;
|
|
34
76
|
[key: string]: unknown;
|
|
35
77
|
}
|
|
78
|
+
/**
|
|
79
|
+
* Props handed to a `TriggerComponent`. This is the only trigger API that participates in the
|
|
80
|
+
* dialog's accessible-name wiring: `id` is the element the panel's `aria-labelledby` points at,
|
|
81
|
+
* so a TriggerComponent that drops it leaves the dialog unnamed.
|
|
82
|
+
*
|
|
83
|
+
* `innerRef`, not `ref`, deliberately: under React 18 a `ref` passed through JSX is consumed by
|
|
84
|
+
* the fiber and never reaches a plain function component's props unless it is wrapped in
|
|
85
|
+
* `forwardRef`. `innerRef` is the established Dimsum convention (see `ds-system`'s styled
|
|
86
|
+
* components) and keeps `forwardRef` optional for the consumer — which is the same ergonomic
|
|
87
|
+
* concern that produced DEV-002, solved here without the plain-function call.
|
|
88
|
+
*/
|
|
89
|
+
interface TriggerComponentProps {
|
|
90
|
+
innerRef: React.RefCallback<HTMLButtonElement>;
|
|
91
|
+
id: string;
|
|
92
|
+
onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
93
|
+
'aria-haspopup': 'dialog';
|
|
94
|
+
}
|
|
36
95
|
interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSAppPickerName, typeof DSAppPickerSlots> {
|
|
37
|
-
|
|
96
|
+
onOpen?: (info: OpenChange) => void;
|
|
97
|
+
onClose?: (info: CloseChange) => void;
|
|
38
98
|
onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
39
|
-
onClickOutside?: (e: React.MouseEvent) => void;
|
|
99
|
+
onClickOutside?: (e: MouseEvent | React.MouseEvent) => void;
|
|
40
100
|
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
41
101
|
actionRef?: ActionRef;
|
|
42
|
-
|
|
102
|
+
/**
|
|
103
|
+
* @deprecated v4.x — use `TriggerComponent`. `renderTrigger` receives only `ref` and cannot be
|
|
104
|
+
* given the id the dialog's `aria-labelledby` points at, so the panel is left without an
|
|
105
|
+
* accessible name. See DEV-002 in KNOWN_INTENTIONAL_DEVIATIONS.md.
|
|
106
|
+
*/
|
|
107
|
+
renderTrigger?: (props: RenderTriggerProp) => React.ReactElement | null;
|
|
108
|
+
/**
|
|
109
|
+
* Custom trigger, rendered as a real React element so it owns its own fiber. Takes precedence
|
|
110
|
+
* over `renderTrigger` when both are supplied.
|
|
111
|
+
*/
|
|
112
|
+
TriggerComponent?: React.ComponentType<TriggerComponentProps>;
|
|
43
113
|
isOpen?: boolean;
|
|
44
114
|
triggerRef?: React.RefObject<HTMLButtonElement>;
|
|
45
115
|
}
|
|
46
|
-
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
|
|
116
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {
|
|
47
117
|
}
|
|
48
|
-
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
|
|
118
|
+
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {
|
|
49
119
|
}
|
|
50
120
|
}
|
|
51
|
-
export declare const defaultProps:
|
|
52
|
-
export declare const DSAppPickerPropTypes:
|
|
121
|
+
export declare const defaultProps: DSAppPickerT.DefaultProps;
|
|
122
|
+
export declare const DSAppPickerPropTypes: DSPropTypesSchema<DSAppPickerT.Props>;
|
|
123
|
+
export declare const DSAppPickerPropTypesSchema: ValidationMap<DSAppPickerT.Props>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getChipRegionId: (chipId: string) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-app-picker",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.60",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"files": [
|
|
@@ -36,31 +36,33 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"
|
|
40
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-icons": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
47
|
-
"@elliemae/ds-
|
|
39
|
+
"uid": "^2.0.2",
|
|
40
|
+
"@elliemae/ds-button-v2": "3.70.0-next.60",
|
|
41
|
+
"@elliemae/ds-floating-context": "3.70.0-next.60",
|
|
42
|
+
"@elliemae/ds-grid": "3.70.0-next.60",
|
|
43
|
+
"@elliemae/ds-chip": "3.70.0-next.60",
|
|
44
|
+
"@elliemae/ds-hooks-focus-trap": "3.70.0-next.60",
|
|
45
|
+
"@elliemae/ds-icons": "3.70.0-next.60",
|
|
46
|
+
"@elliemae/ds-system": "3.70.0-next.60",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.60",
|
|
48
|
+
"@elliemae/ds-typography": "3.70.0-next.60"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
51
|
+
"@playwright/experimental-ct-react": "1.61.1",
|
|
50
52
|
"jest": "^30.0.0",
|
|
51
|
-
"styled-components": "~5.3.
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
53
|
-
"@elliemae/ds-
|
|
53
|
+
"styled-components": "~5.3.11",
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.60",
|
|
55
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.60",
|
|
56
|
+
"@elliemae/ds-test-utils": "3.70.0-next.60"
|
|
54
57
|
},
|
|
55
58
|
"peerDependencies": {
|
|
56
|
-
"lodash-es": "^4.17.21",
|
|
57
59
|
"react": "^18.3.1",
|
|
58
60
|
"react-dom": "^18.3.1",
|
|
59
|
-
"styled-components": "~5.3.
|
|
61
|
+
"styled-components": "~5.3.11"
|
|
60
62
|
},
|
|
61
63
|
"publishConfig": {
|
|
62
64
|
"access": "public",
|
|
63
|
-
"typeSafety":
|
|
65
|
+
"typeSafety": true
|
|
64
66
|
},
|
|
65
67
|
"scripts": {
|
|
66
68
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
@@ -71,4 +73,4 @@
|
|
|
71
73
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
72
74
|
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
73
75
|
}
|
|
74
|
-
}
|
|
76
|
+
}
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var AppPickerImpl_exports = {};
|
|
30
|
-
__export(AppPickerImpl_exports, {
|
|
31
|
-
default: () => AppPickerImpl_default
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(AppPickerImpl_exports);
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
37
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
-
var import_ds_chip = require("@elliemae/ds-chip");
|
|
39
|
-
var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
|
|
40
|
-
var import_utils = require("./utils.js");
|
|
41
|
-
var import_styles = require("./styles.js");
|
|
42
|
-
var import_useKeepTrackButtons = require("./hooks/useKeepTrackButtons.js");
|
|
43
|
-
var import_constants = require("./constants/index.js");
|
|
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 })``;
|
|
46
|
-
const AppPickerImpl = (props) => {
|
|
47
|
-
const {
|
|
48
|
-
apps,
|
|
49
|
-
customApps,
|
|
50
|
-
sectionTitle,
|
|
51
|
-
customSectionTitle,
|
|
52
|
-
close,
|
|
53
|
-
wrapperRef,
|
|
54
|
-
onKeyDown,
|
|
55
|
-
triggerRef,
|
|
56
|
-
isOverflow,
|
|
57
|
-
actionRef,
|
|
58
|
-
wasOpenedByKeyboardRef,
|
|
59
|
-
triggerIsInternal
|
|
60
|
-
} = props;
|
|
61
|
-
const { ownerPropsConfig, globalAttributes, xstyledProps } = (0, import_useAppPicker.useAppPicker)(props);
|
|
62
|
-
const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...safeGlobalAttributes } = globalAttributes;
|
|
63
|
-
const { allFocusableButtons } = (0, import_useKeepTrackButtons.useKeepTrackButtons)({
|
|
64
|
-
wrapperRef,
|
|
65
|
-
wasOpenedByKeyboardRef,
|
|
66
|
-
actionRef,
|
|
67
|
-
triggerIsInternal
|
|
68
|
-
});
|
|
69
|
-
const firstElementRef = (0, import_react.useRef)(null);
|
|
70
|
-
const lastElementRef = (0, import_react.useRef)(null);
|
|
71
|
-
const handleOnClick = (0, import_react.useCallback)(
|
|
72
|
-
(app) => (e) => {
|
|
73
|
-
if (app.onClick) app.onClick(e, app);
|
|
74
|
-
},
|
|
75
|
-
[]
|
|
76
|
-
);
|
|
77
|
-
const handleOnKeyDownWrapper = (0, import_react.useCallback)(
|
|
78
|
-
(e) => {
|
|
79
|
-
if (onKeyDown) onKeyDown(e);
|
|
80
|
-
if (!onKeyDown && e.key === import_utils.keys.ESC) {
|
|
81
|
-
triggerRef?.current?.focus();
|
|
82
|
-
close();
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
[onKeyDown, triggerRef, close]
|
|
86
|
-
);
|
|
87
|
-
const [firstButton] = allFocusableButtons;
|
|
88
|
-
firstElementRef.current = firstButton;
|
|
89
|
-
lastElementRef.current = allFocusableButtons[allFocusableButtons.length - 1];
|
|
90
|
-
const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
|
|
91
|
-
firstElementRef,
|
|
92
|
-
lastElementRef,
|
|
93
|
-
onKeyDown: handleOnKeyDownWrapper
|
|
94
|
-
});
|
|
95
|
-
const totalAppsLength = (0, import_react.useMemo)(() => apps.length + customApps.length, [apps.length, customApps.length]);
|
|
96
|
-
const buildRows = (0, import_react.useCallback)(
|
|
97
|
-
(appList, prevIndex, title) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: appList.map((app, index) => {
|
|
98
|
-
const { label, disabled, applyAriaDisabled, selected, icon: Icon, id, wrapText } = app;
|
|
99
|
-
const IconComp = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "app-picker__icon", size: "m" });
|
|
100
|
-
const getOwnerPropsArguments = () => app;
|
|
101
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
102
|
-
import_styles.StyledListItem,
|
|
103
|
-
{
|
|
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
|
-
wrapText
|
|
125
|
-
},
|
|
126
|
-
index
|
|
127
|
-
)
|
|
128
|
-
}
|
|
129
|
-
);
|
|
130
|
-
}) }),
|
|
131
|
-
[ownerPropsConfig, handleOnClick, totalAppsLength]
|
|
132
|
-
);
|
|
133
|
-
const AppsRows = (0, import_react.useMemo)(() => buildRows(apps, 1, sectionTitle), [apps, buildRows, sectionTitle]);
|
|
134
|
-
const CustomRows = (0, import_react.useMemo)(
|
|
135
|
-
() => buildRows(customApps, apps.length + 1, customSectionTitle),
|
|
136
|
-
[apps.length, buildRows, customApps, customSectionTitle]
|
|
137
|
-
);
|
|
138
|
-
const layout = (0, import_react.useMemo)(() => {
|
|
139
|
-
const cols = ["repeat(3, 92px)"];
|
|
140
|
-
let appsRows = 0;
|
|
141
|
-
let customRows = 0;
|
|
142
|
-
const rows = [];
|
|
143
|
-
if (apps.length > 0) {
|
|
144
|
-
appsRows = apps.length / 3;
|
|
145
|
-
rows.push("68px", `repeat(${appsRows}, 68px})`);
|
|
146
|
-
}
|
|
147
|
-
if (customApps.length > 0) {
|
|
148
|
-
customRows = customApps.length / 3;
|
|
149
|
-
rows.push("9px", "68px", `repeat(${customRows}, 68px})`);
|
|
150
|
-
}
|
|
151
|
-
return {
|
|
152
|
-
rows,
|
|
153
|
-
cols
|
|
154
|
-
};
|
|
155
|
-
}, [apps.length, customApps.length]);
|
|
156
|
-
const convertedTypeReference = wrapperRef;
|
|
157
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
158
|
-
import_styles.StyledWrapper,
|
|
159
|
-
{
|
|
160
|
-
forwardedAs: "ul",
|
|
161
|
-
role: "listbox",
|
|
162
|
-
innerRef: convertedTypeReference,
|
|
163
|
-
"data-testid": import_constants.DSAppPickerDataTestIds.ROOT,
|
|
164
|
-
isOverflow,
|
|
165
|
-
cols: layout.cols,
|
|
166
|
-
rows: layout.rows,
|
|
167
|
-
tabIndex: -1,
|
|
168
|
-
"aria-label": `Application picker, ${sectionTitle} (${apps.length} apps)${customApps.length > 0 ? `, ${customSectionTitle} (${customApps.length} apps)` : ""}`,
|
|
169
|
-
...ownerPropsConfig,
|
|
170
|
-
...safeGlobalAttributes,
|
|
171
|
-
...xstyledProps,
|
|
172
|
-
onKeyDown: handleOnKeyDown,
|
|
173
|
-
children: [
|
|
174
|
-
/* @__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 }) }),
|
|
175
|
-
AppsRows,
|
|
176
|
-
customApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
177
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
178
|
-
import_styles.StyledListItemFullRow,
|
|
179
|
-
{
|
|
180
|
-
"data-testid": import_constants.DSAppPickerDataTestIds.ROW,
|
|
181
|
-
"aria-hidden": true,
|
|
182
|
-
role: "group",
|
|
183
|
-
...ownerPropsConfig,
|
|
184
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSeparator, { "data-testid": import_constants.DSAppPickerDataTestIds.SEPARATOR, role: "presentation", ...ownerPropsConfig })
|
|
185
|
-
}
|
|
186
|
-
),
|
|
187
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
188
|
-
import_styles.StyledListItemFullRow,
|
|
189
|
-
{
|
|
190
|
-
"data-testid": import_constants.DSAppPickerDataTestIds.ROW,
|
|
191
|
-
"aria-hidden": true,
|
|
192
|
-
role: "group",
|
|
193
|
-
...ownerPropsConfig,
|
|
194
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { "data-testid": import_constants.DSAppPickerDataTestIds.TITLE, role: "presentation", ...ownerPropsConfig, children: customSectionTitle })
|
|
195
|
-
}
|
|
196
|
-
),
|
|
197
|
-
CustomRows
|
|
198
|
-
] })
|
|
199
|
-
]
|
|
200
|
-
}
|
|
201
|
-
);
|
|
202
|
-
};
|
|
203
|
-
var AppPickerImpl_default = AppPickerImpl;
|
|
204
|
-
//# sourceMappingURL=AppPickerImpl.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 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 { 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 // at this point is hard to understand where to put the globals props in the app picker\n // because we dont have a common wrapper that contains both the ul and the popover and the button\n // so we put them in the ul for now\n // wrap is extracted to avoid passing it to the UL element\n // onClick and onKeyDown because we use it as props in the api for a different purpose\n const { wrap, onClick, onKeyDown: onKeyDownGlobal, ...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, wrapText } = 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 wrapText={wrapText}\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 + 1, 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 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 onKeyDown={handleOnKeyDown}\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FjB;AA3FN,mBAAoD;AACpD,uBAAuB;AACvB,qBAAuB;AACvB,iCAA6B;AAC7B,mBAAqB;AACrB,oBAAmG;AACnG,iCAAoC;AAEpC,uBAA0E;AAC1E,0BAA6B;AAE7B,MAAM,iBAAa,yBAAO,uBAAQ,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,KAAK,CAAC;AAcxF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,kBAAkB,kBAAkB,aAAa,QAAI,kCAAa,KAAK;AAO/E,QAAM,EAAE,MAAM,SAAS,WAAW,iBAAiB,GAAG,qBAAqB,IAAI;AAE/E,QAAM,EAAE,oBAAoB,QAAI,gDAAoB;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAkB,qBAA2B,IAAI;AACvD,QAAM,qBAAiB,qBAA2B,IAAI;AAEtD,QAAM,oBAAgB;AAAA,IACpB,CAAC,QAA8B,CAAC,MAAwB;AACtD,UAAI,IAAI,QAAS,KAAI,QAAQ,GAAG,GAAG;AAAA,IACrC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,6BAAqD;AAAA,IACzD,CAAC,MAAM;AACL,UAAI,UAAW,WAAU,CAAC;AAC1B,UAAI,CAAC,aAAa,EAAE,QAAQ,kBAAK,KAAK;AACpC,oBAAY,SAAS,MAAM;AAC3B,cAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,WAAW,YAAY,KAAK;AAAA,EAC/B;AACA,QAAM,CAAC,WAAW,IAAI;AACtB,kBAAgB,UAAU;AAC1B,iBAAe,UAAU,oBAAoB,oBAAoB,SAAS,CAAC;AAE3E,QAAM,sBAAkB,yCAAa;AAAA,IACnC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb,CAAC;AAED,QAAM,sBAAkB,sBAAQ,MAAM,KAAK,SAAS,WAAW,QAAQ,CAAC,KAAK,QAAQ,WAAW,MAAM,CAAC;AAEvG,QAAM,gBAAY;AAAA,IAChB,CAAC,SAAiC,WAAmB,UACnD,2EACG,kBAAQ,IAAI,CAAC,KAAK,UAAU;AAC3B,YAAM,EAAE,OAAO,UAAU,mBAAmB,UAAU,MAAM,MAAM,IAAI,SAAS,IAAI;AAGnF,YAAM,WAAW,MAAM,4CAAC,QAAK,WAAU,oBAAmB,MAAK,KAAI;AACnE,YAAM,yBAAyB,MAAM;AACrC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,wCAAuB;AAAA,UACpC,MAAK;AAAA,UACL,eAAe,iBAAiB;AAAA,UAChC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS,cAAc,GAAG;AAAA,cAC1B,eAAY;AAAA,cACZ;AAAA,cACA;AAAA,cACA;AAAA,cACA,iBAAe;AAAA,cACf,MAAK;AAAA,cACL;AAAA,cACA,cAAY,GAAG,KAAK,KAAK,KAAK,KAAK,QAAQ,SAAS,OAAO,eAAe;AAAA,cAC1E,MAAM;AAAA,cACN;AAAA,cACA,eAAe,iBAAiB;AAAA,cAChC;AAAA,cACA;AAAA;AAAA,YAdK;AAAA,UAeP;AAAA;AAAA,MACF;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,kBAAkB,eAAe,eAAe;AAAA,EACnD;AAEA,QAAM,eAAW,sBAAQ,MAAM,UAAU,MAAM,GAAG,YAAY,GAAG,CAAC,MAAM,WAAW,YAAY,CAAC;AAChG,QAAM,iBAAa;AAAA,IACjB,MAAM,UAAU,YAAY,KAAK,SAAS,GAAG,kBAAkB;AAAA,IAC/D,CAAC,KAAK,QAAQ,WAAW,YAAY,kBAAkB;AAAA,EACzD;AAEA,QAAM,aAAS,sBAAQ,MAAM;AAC3B,UAAM,OAAO,CAAC,iBAAiB;AAC/B,QAAI,WAAW;AACf,QAAI,aAAa;AACjB,UAAM,OAAO,CAAC;AACd,QAAI,KAAK,SAAS,GAAG;AACnB,iBAAW,KAAK,SAAS;AACzB,WAAK,KAAK,QAAQ,UAAU,QAAQ,UAAU;AAAA,IAChD;AACA,QAAI,WAAW,SAAS,GAAG;AACzB,mBAAa,WAAW,SAAS;AACjC,WAAK,KAAK,OAAO,QAAQ,UAAU,UAAU,UAAU;AAAA,IACzD;AACA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,QAAQ,WAAW,MAAM,CAAC;AAGnC,QAAM,yBAAyB;AAG/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,MAAK;AAAA,MACL,UAAU;AAAA,MACV,eAAa,wCAAuB;AAAA,MACpC;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,UAAU;AAAA,MACV,cAAY,uBAAuB,YAAY,KAAK,KAAK,MAAM,SAC7D,WAAW,SAAS,IAAI,KAAK,kBAAkB,KAAK,WAAW,MAAM,WAAW,EAClF;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,WAAW;AAAA,MAEX;AAAA,oDAAC,uCAAsB,eAAa,wCAAuB,KAAK,eAAW,MAAC,MAAK,SAAS,GAAG,kBAC3F,sDAAC,6BAAY,eAAa,wCAAuB,OAAO,MAAK,gBAAgB,GAAG,kBAC7E,wBACH,GACF;AAAA,QACC;AAAA,QACA,WAAW,SAAS,KACnB,4EACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,wCAAuB;AAAA,cACpC,eAAW;AAAA,cACX,MAAK;AAAA,cACJ,GAAG;AAAA,cAEJ,sDAAC,iCAAgB,eAAa,wCAAuB,WAAW,MAAK,gBAAgB,GAAG,kBAAkB;AAAA;AAAA,UAC5G;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,wCAAuB;AAAA,cACpC,eAAW;AAAA,cACX,MAAK;AAAA,cACJ,GAAG;AAAA,cAEJ,sDAAC,6BAAY,eAAa,wCAAuB,OAAO,MAAK,gBAAgB,GAAG,kBAC7E,8BACH;AAAA;AAAA,UACF;AAAA,UACC;AAAA,WACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,wBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var useKeepTrackButtons_exports = {};
|
|
30
|
-
__export(useKeepTrackButtons_exports, {
|
|
31
|
-
useKeepTrackButtons: () => useKeepTrackButtons
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(useKeepTrackButtons_exports);
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = require("react");
|
|
36
|
-
var import_utils = require("../utils.js");
|
|
37
|
-
const useKeepTrackButtons = ({
|
|
38
|
-
wrapperRef,
|
|
39
|
-
wasOpenedByKeyboardRef,
|
|
40
|
-
actionRef,
|
|
41
|
-
triggerIsInternal
|
|
42
|
-
}) => {
|
|
43
|
-
const [allFocusableButtons, setAllFocusableButtons] = (0, import_react.useState)([]);
|
|
44
|
-
const selectedButton = (0, import_react.useRef)(null);
|
|
45
|
-
(0, import_react.useEffect)(() => {
|
|
46
|
-
if (actionRef && actionRef.current) {
|
|
47
|
-
actionRef.current.focusSelectedOrFirstAvailable = () => setTimeout(() => {
|
|
48
|
-
(0, import_utils.focusSelectedOrFirstAvailable)(wrapperRef, allFocusableButtons, selectedButton);
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
}, [actionRef, allFocusableButtons, wrapperRef]);
|
|
52
|
-
(0, import_react.useEffect)(() => {
|
|
53
|
-
wrapperRef?.current?.querySelectorAll("button").forEach((e, index) => {
|
|
54
|
-
if (!e.hasAttribute("disabled")) setAllFocusableButtons((prev) => [...prev, e]);
|
|
55
|
-
if (e.getAttribute("aria-selected") === "true") {
|
|
56
|
-
selectedButton.current = index;
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
}, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal]);
|
|
60
|
-
(0, import_react.useEffect)(() => {
|
|
61
|
-
if (wasOpenedByKeyboardRef?.current || !triggerIsInternal) {
|
|
62
|
-
(0, import_utils.focusSelectedOrFirstAvailable)(wrapperRef, allFocusableButtons, selectedButton);
|
|
63
|
-
} else {
|
|
64
|
-
wrapperRef.current?.focus();
|
|
65
|
-
}
|
|
66
|
-
}, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal, allFocusableButtons]);
|
|
67
|
-
return { allFocusableButtons, selectedButton };
|
|
68
|
-
};
|
|
69
|
-
//# sourceMappingURL=useKeepTrackButtons.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/hooks/useKeepTrackButtons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport { useEffect, useRef, useState } 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, setAllFocusableButtons] = useState<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusSelectedOrFirstAvailable = () =>\n setTimeout(() => {\n focusSelectedOrFirstAvailable(wrapperRef, allFocusableButtons, selectedButton);\n });\n }\n }, [actionRef, allFocusableButtons, wrapperRef]);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n if (!e.hasAttribute('disabled')) setAllFocusableButtons((prev) => [...prev, e]);\n if (e.getAttribute('aria-selected') === 'true') {\n selectedButton.current = index;\n }\n });\n }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal]);\n\n useEffect(() => {\n if (wasOpenedByKeyboardRef?.current || !triggerIsInternal) {\n focusSelectedOrFirstAvailable(wrapperRef, allFocusableButtons, selectedButton);\n } else {\n wrapperRef.current?.focus();\n }\n }, [wasOpenedByKeyboardRef, wrapperRef, triggerIsInternal, allFocusableButtons]);\n\n return { allFocusableButtons, selectedButton };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4C;AAE5C,mBAA8C;AASvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAA8B,CAAC,CAAC;AACtF,QAAM,qBAAiB,qBAAsB,IAAI;AAEjD,8BAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,gCAAgC,MAChD,WAAW,MAAM;AACf,wDAA8B,YAAY,qBAAqB,cAAc;AAAA,MAC/E,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,WAAW,qBAAqB,UAAU,CAAC;AAE/C,8BAAU,MAAM;AACd,gBAAY,SAAS,iBAAiB,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU;AACpE,UAAI,CAAC,EAAE,aAAa,UAAU,EAAG,wBAAuB,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC;AAC9E,UAAI,EAAE,aAAa,eAAe,MAAM,QAAQ;AAC9C,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,wBAAwB,YAAY,iBAAiB,CAAC;AAE1D,8BAAU,MAAM;AACd,QAAI,wBAAwB,WAAW,CAAC,mBAAmB;AACzD,sDAA8B,YAAY,qBAAqB,cAAc;AAAA,IAC/E,OAAO;AACL,iBAAW,SAAS,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,wBAAwB,YAAY,mBAAmB,mBAAmB,CAAC;AAE/E,SAAO,EAAE,qBAAqB,eAAe;AAC/C;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/cjs/styles.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var styles_exports = {};
|
|
30
|
-
__export(styles_exports, {
|
|
31
|
-
StyledListItem: () => StyledListItem,
|
|
32
|
-
StyledListItemFullRow: () => StyledListItemFullRow,
|
|
33
|
-
StyledSeparator: () => StyledSeparator,
|
|
34
|
-
StyledTitle: () => StyledTitle,
|
|
35
|
-
StyledWrapper: () => StyledWrapper
|
|
36
|
-
});
|
|
37
|
-
module.exports = __toCommonJS(styles_exports);
|
|
38
|
-
var React = __toESM(require("react"));
|
|
39
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
-
var import_ds_grid = require("@elliemae/ds-grid");
|
|
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
|
-
min-width: 308px;
|
|
44
|
-
min-height: 110px;
|
|
45
|
-
max-height: 449px;
|
|
46
|
-
width: 308px;
|
|
47
|
-
overflow-y: auto;
|
|
48
|
-
overflow-x: hidden;
|
|
49
|
-
margin: 0;
|
|
50
|
-
padding: ${({ isOverflow }) => isOverflow ? "0 0 8px 16px" : "0 16px 8px 16px"};
|
|
51
|
-
&:focus {
|
|
52
|
-
outline: none;
|
|
53
|
-
}
|
|
54
|
-
`;
|
|
55
|
-
const StyledListItem = (0, import_ds_system.styled)("li", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ITEM })`
|
|
56
|
-
list-style: none;
|
|
57
|
-
`;
|
|
58
|
-
const StyledListItemFullRow = (0, import_ds_system.styled)("li", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.ROW })`
|
|
59
|
-
list-style: none;
|
|
60
|
-
grid-column: 1/4;
|
|
61
|
-
`;
|
|
62
|
-
const StyledTitle = (0, import_ds_system.styled)("h3", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.TITLE })`
|
|
63
|
-
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
64
|
-
font-size: ${({ theme }) => theme.fontSizes.value[400]};
|
|
65
|
-
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
66
|
-
margin: 12px 0 8px 0;
|
|
67
|
-
line-height: 1.385;
|
|
68
|
-
text-transform: uppercase;
|
|
69
|
-
`;
|
|
70
|
-
const StyledSeparator = (0, import_ds_system.styled)("hr", { name: import_constants.DSAppPickerName, slot: import_constants.DSAppPickerSlots.SEPARATOR })`
|
|
71
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
|
|
72
|
-
border-bottom: none;
|
|
73
|
-
width: 99%;
|
|
74
|
-
margin: 8px 0 0 0;
|
|
75
|
-
`;
|
|
76
|
-
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 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 './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSAppPickerName, slot: DSAppPickerSlots.ROOT })<{\n isOverflow: boolean;\n}>`\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,aAUnF,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
|
-
"names": []
|
|
7
|
-
}
|
package/dist/cjs/utils.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\n\nexport const keys = {\n LEFT: 'ArrowLeft',\n UP: 'ArrowUp',\n RIGHT: 'ArrowRight',\n DOWN: 'ArrowDown',\n ENTER: 'Enter',\n SPACE: '',\n TAB: 'Tab',\n ESC: 'Escape',\n HOME: 'Home',\n END: 'End',\n};\n\nexport const focusSelectedOrFirstAvailable = (\n wrapperRef: React.RefObject<HTMLDivElement>,\n allFocusableButtonsRef: HTMLButtonElement[],\n selectedButtonRef: React.MutableRefObject<number | null>,\n) => {\n if (selectedButtonRef.current !== null) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButtonRef.current].focus();\n } else {\n allFocusableButtonsRef?.[0]?.focus();\n }\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;AAEO,MAAM,gCAAgC,CAC3C,YACA,wBACA,sBACG;AACH,MAAI,kBAAkB,YAAY,MAAM;AACtC,gBAAY,SAAS,iBAAiB,QAAQ,EAAE,kBAAkB,OAAO,EAAE,MAAM;AAAA,EACnF,OAAO;AACL,6BAAyB,CAAC,GAAG,MAAM;AAAA,EACrC;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|