@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.
Files changed (119) hide show
  1. package/dist/cjs/DSAppPicker.js +10 -141
  2. package/dist/cjs/DSAppPicker.js.map +3 -3
  3. package/dist/cjs/{utils.js → DSAppPickerCTX.js} +8 -25
  4. package/dist/cjs/DSAppPickerCTX.js.map +7 -0
  5. package/dist/cjs/config/useAppPicker.js +25 -8
  6. package/dist/cjs/config/useAppPicker.js.map +3 -3
  7. package/dist/cjs/config/useFocusTracker.js +104 -0
  8. package/dist/cjs/config/useFocusTracker.js.map +7 -0
  9. package/dist/cjs/config/useValidateProps.js +45 -0
  10. package/dist/cjs/config/useValidateProps.js.map +7 -0
  11. package/dist/cjs/constants/index.js +11 -1
  12. package/dist/cjs/constants/index.js.map +2 -2
  13. package/dist/cjs/index.js.map +1 -1
  14. package/dist/cjs/package.json +1 -4
  15. package/dist/cjs/parts/AppPanel.js +152 -0
  16. package/dist/cjs/parts/AppPanel.js.map +7 -0
  17. package/dist/cjs/parts/AppPickerFloatingContext/AppPickerContent.js +94 -0
  18. package/dist/cjs/parts/AppPickerFloatingContext/AppPickerContent.js.map +7 -0
  19. package/dist/cjs/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js +171 -0
  20. package/dist/cjs/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js.map +7 -0
  21. package/dist/cjs/parts/AppPickerItem.js +104 -0
  22. package/dist/cjs/parts/AppPickerItem.js.map +7 -0
  23. package/dist/cjs/parts/AppSection.js +94 -0
  24. package/dist/cjs/parts/AppSection.js.map +7 -0
  25. package/dist/cjs/parts/Trigger.js +81 -0
  26. package/dist/cjs/parts/Trigger.js.map +7 -0
  27. package/dist/cjs/parts/shared-styles.js +44 -0
  28. package/dist/cjs/parts/shared-styles.js.map +7 -0
  29. package/dist/cjs/react-desc-prop-types.js +23 -7
  30. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  31. package/dist/cjs/typescript-testing/slot-props.js +48 -0
  32. package/dist/cjs/typescript-testing/slot-props.js.map +7 -0
  33. package/dist/cjs/typescript-testing/typescript-app-picker-valid.js +13 -1
  34. package/dist/cjs/typescript-testing/typescript-app-picker-valid.js.map +2 -2
  35. package/dist/cjs/util/getChipId.js +36 -0
  36. package/dist/cjs/util/getChipId.js.map +7 -0
  37. package/dist/cjs/util/getChipRegionId.js +37 -0
  38. package/dist/cjs/util/getChipRegionId.js.map +7 -0
  39. package/dist/esm/DSAppPicker.js +10 -141
  40. package/dist/esm/DSAppPicker.js.map +3 -3
  41. package/dist/esm/DSAppPickerCTX.js +8 -0
  42. package/dist/esm/DSAppPickerCTX.js.map +7 -0
  43. package/dist/esm/config/useAppPicker.js +29 -13
  44. package/dist/esm/config/useAppPicker.js.map +3 -3
  45. package/dist/esm/config/useFocusTracker.js +74 -0
  46. package/dist/esm/config/useFocusTracker.js.map +7 -0
  47. package/dist/esm/config/useValidateProps.js +15 -0
  48. package/dist/esm/config/useValidateProps.js.map +7 -0
  49. package/dist/esm/constants/index.js +11 -1
  50. package/dist/esm/constants/index.js.map +2 -2
  51. package/dist/esm/index.js.map +1 -1
  52. package/dist/esm/package.json +1 -4
  53. package/dist/esm/parts/AppPanel.js +127 -0
  54. package/dist/esm/parts/AppPanel.js.map +7 -0
  55. package/dist/esm/parts/AppPickerFloatingContext/AppPickerContent.js +64 -0
  56. package/dist/esm/parts/AppPickerFloatingContext/AppPickerContent.js.map +7 -0
  57. package/dist/esm/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js +141 -0
  58. package/dist/esm/parts/AppPickerFloatingContext/useAppPickerFloatingContext.js.map +7 -0
  59. package/dist/esm/parts/AppPickerItem.js +74 -0
  60. package/dist/esm/parts/AppPickerItem.js.map +7 -0
  61. package/dist/esm/parts/AppSection.js +64 -0
  62. package/dist/esm/parts/AppSection.js.map +7 -0
  63. package/dist/esm/parts/Trigger.js +51 -0
  64. package/dist/esm/parts/Trigger.js.map +7 -0
  65. package/dist/esm/parts/shared-styles.js +14 -0
  66. package/dist/esm/parts/shared-styles.js.map +7 -0
  67. package/dist/esm/react-desc-prop-types.js +29 -8
  68. package/dist/esm/react-desc-prop-types.js.map +2 -2
  69. package/dist/esm/typescript-testing/slot-props.js +25 -0
  70. package/dist/esm/typescript-testing/slot-props.js.map +7 -0
  71. package/dist/esm/typescript-testing/typescript-app-picker-valid.js +13 -1
  72. package/dist/esm/typescript-testing/typescript-app-picker-valid.js.map +2 -2
  73. package/dist/esm/util/getChipId.js +6 -0
  74. package/dist/esm/util/getChipId.js.map +7 -0
  75. package/dist/esm/util/getChipRegionId.js +7 -0
  76. package/dist/esm/util/getChipRegionId.js.map +7 -0
  77. package/dist/types/DSAppPicker.d.ts +1 -2
  78. package/dist/types/DSAppPickerCTX.d.ts +6 -0
  79. package/dist/types/config/useAppPicker.d.ts +111 -92
  80. package/dist/types/config/useFocusTracker.d.ts +19 -0
  81. package/dist/types/config/useValidateProps.d.ts +3 -0
  82. package/dist/types/constants/index.d.ts +17 -7
  83. package/dist/types/parts/AppPanel.d.ts +2 -0
  84. package/dist/types/parts/AppPickerFloatingContext/AppPickerContent.d.ts +3 -0
  85. package/dist/types/parts/AppPickerFloatingContext/useAppPickerFloatingContext.d.ts +170 -0
  86. package/dist/types/parts/AppPickerItem.d.ts +11 -0
  87. package/dist/types/parts/AppSection.d.ts +6 -0
  88. package/dist/types/parts/Trigger.d.ts +13 -0
  89. package/dist/types/parts/shared-styles.d.ts +2 -0
  90. package/dist/types/react-desc-prop-types.d.ts +80 -9
  91. package/dist/types/util/getChipId.d.ts +2 -0
  92. package/dist/types/util/getChipRegionId.d.ts +1 -0
  93. package/package.json +19 -17
  94. package/dist/cjs/AppPickerImpl.js +0 -204
  95. package/dist/cjs/AppPickerImpl.js.map +0 -7
  96. package/dist/cjs/hooks/useKeepTrackButtons.js +0 -69
  97. package/dist/cjs/hooks/useKeepTrackButtons.js.map +0 -7
  98. package/dist/cjs/styles.js +0 -76
  99. package/dist/cjs/styles.js.map +0 -7
  100. package/dist/cjs/utils.js.map +0 -7
  101. package/dist/esm/AppPickerImpl.js +0 -174
  102. package/dist/esm/AppPickerImpl.js.map +0 -7
  103. package/dist/esm/hooks/useKeepTrackButtons.js +0 -39
  104. package/dist/esm/hooks/useKeepTrackButtons.js.map +0 -7
  105. package/dist/esm/styles.js +0 -46
  106. package/dist/esm/styles.js.map +0 -7
  107. package/dist/esm/utils.js +0 -25
  108. package/dist/esm/utils.js.map +0 -7
  109. package/dist/types/AppPickerImpl.d.ts +0 -11
  110. package/dist/types/hooks/useKeepTrackButtons.d.ts +0 -13
  111. package/dist/types/styles.d.ts +0 -7
  112. package/dist/types/tests/app-picker.a11y.test.d.ts +0 -1
  113. package/dist/types/tests/app-picker.data-testid.test.d.ts +0 -1
  114. package/dist/types/tests/app-picker.events.test.d.ts +0 -1
  115. package/dist/types/tests/app-picker.exports.test.d.ts +0 -1
  116. package/dist/types/tests/app-picker.get-owner-props.test.d.ts +0 -1
  117. package/dist/types/tests/app-picker.keyboard.test.d.ts +0 -1
  118. package/dist/types/typescript-testing/typescript-app-picker-valid.d.ts +0 -1
  119. 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.MutableRefObject<HTMLButtonElement>;
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
- onClose?: () => void;
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
- renderTrigger?: React.ComponentType<RenderTriggerProp>;
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: Omit<DSAppPickerT.DefaultProps, `dsAppPicker${Capitalize<string>}`>;
52
- export declare const DSAppPickerPropTypes: ValidationMap<unknown>;
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,2 @@
1
+ import type { DSAppPickerT } from '../react-desc-prop-types.js';
2
+ export declare const getChipId: (app: DSAppPickerT.AppItem, flatIndex: number) => string;
@@ -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.6",
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
- "@elliemae/ds-legacy-popover": "1.0.16",
40
- "@elliemae/ds-button-v2": "3.70.0-next.6",
41
- "@elliemae/ds-chip": "3.70.0-next.6",
42
- "@elliemae/ds-hooks-focus-trap": "3.70.0-next.6",
43
- "@elliemae/ds-grid": "3.70.0-next.6",
44
- "@elliemae/ds-props-helpers": "3.70.0-next.6",
45
- "@elliemae/ds-icons": "3.70.0-next.6",
46
- "@elliemae/ds-system": "3.70.0-next.6",
47
- "@elliemae/ds-typescript-helpers": "3.70.0-next.6"
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.9",
52
- "@elliemae/ds-monorepo-devops": "3.70.0-next.6",
53
- "@elliemae/ds-test-utils": "3.70.0-next.6"
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.9"
61
+ "styled-components": "~5.3.11"
60
62
  },
61
63
  "publishConfig": {
62
64
  "access": "public",
63
- "typeSafety": false
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": "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",
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
- }
@@ -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
@@ -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
- }
@@ -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
- }