@dt-dds/react-dropdown 1.0.0-beta.78 → 1.0.0-beta.80

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 (6) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/index.d.mts +14 -26
  3. package/dist/index.d.ts +14 -26
  4. package/dist/index.js +19 -11
  5. package/dist/index.mjs +19 -11
  6. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @dt-ui/react-dropdown
2
2
 
3
+ ## 1.0.0-beta.80
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: enable DropdownOption external customizations
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [223664b]
12
+ - @dt-dds/react-box@1.0.0-beta.59
13
+
14
+ ## 1.0.0-beta.79
15
+
16
+ ### Patch Changes
17
+
18
+ - fix(config): update ESLint, TS, and Storybook config
19
+ - fix(icon-button): add missing @dt-dds/react-icon devDependency
20
+ - Updated dependencies
21
+ - Updated dependencies
22
+ - Updated dependencies [223664b]
23
+ - @dt-dds/react-core@1.0.0-beta.52
24
+ - @dt-dds/react-icon@1.0.0-beta.55
25
+ - @dt-dds/react-icon-button@1.0.0-beta.21
26
+ - @dt-dds/react-typography@1.0.0-beta.43
27
+ - @dt-dds/themes@1.0.0-beta.10
28
+ - @dt-dds/react-box@1.0.0-beta.58
29
+
3
30
  ## 1.0.0-beta.78
4
31
 
5
32
  ### Minor Changes
package/dist/index.d.mts CHANGED
@@ -1,8 +1,19 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react from 'react';
3
- import { RefObject, ElementType, ComponentPropsWithoutRef, Ref, ReactElement } from 'react';
3
+ import { ElementType, ComponentPropsWithoutRef, RefObject } from 'react';
4
4
  import { BaseProps } from '@dt-dds/react-core';
5
5
 
6
+ type DropdownOptionBaseProps = BaseProps & {
7
+ isDisabled?: boolean;
8
+ isSelected?: boolean;
9
+ isHighlighted?: boolean;
10
+ isMulti?: boolean;
11
+ };
12
+ type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
13
+ as?: E;
14
+ } & ComponentPropsWithoutRef<E>;
15
+ declare const DropdownOption: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
16
+
6
17
  type DropdownVariant = 'outlined' | 'bottom-line';
7
18
  type DropdownFill = 'default' | 'contrast' | 'light';
8
19
  type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right';
@@ -19,35 +30,12 @@ interface DropdownProps extends BaseProps {
19
30
  isFocusable?: boolean;
20
31
  }
21
32
  declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLElement>> & {
22
- Option: <E extends react.ElementType = "li">(props: (BaseProps & {
23
- isDisabled?: boolean;
24
- isSelected?: boolean;
25
- isHighlighted?: boolean;
26
- isMulti?: boolean;
27
- } & {
28
- as?: E | undefined;
29
- } & react.PropsWithoutRef<react.ComponentProps<E>>) & {
30
- ref?: react.Ref<Element>;
31
- }) => react.ReactElement | null;
33
+ Option: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<react.ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
32
34
  };
33
35
 
34
- type DropdownOptionBaseProps = BaseProps & {
35
- isDisabled?: boolean;
36
- isSelected?: boolean;
37
- isHighlighted?: boolean;
38
- isMulti?: boolean;
39
- };
40
- type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
41
- as?: E;
42
- } & ComponentPropsWithoutRef<E>;
43
- type DropdownOptionComponent = <E extends ElementType = 'li'>(props: DropdownOptionProps<E> & {
44
- ref?: Ref<Element>;
45
- }) => ReactElement | null;
46
- declare const DropdownOption: DropdownOptionComponent;
47
-
48
36
  declare module '@emotion/react' {
49
37
  interface Theme extends CustomTheme {
50
38
  }
51
39
  }
52
40
 
53
- export { Dropdown, type DropdownFill, DropdownOption, type DropdownPlacement, type DropdownProps, type DropdownVariant };
41
+ export { Dropdown, type DropdownFill, DropdownOption, type DropdownOptionBaseProps, type DropdownOptionProps, type DropdownPlacement, type DropdownProps, type DropdownVariant };
package/dist/index.d.ts CHANGED
@@ -1,8 +1,19 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react from 'react';
3
- import { RefObject, ElementType, ComponentPropsWithoutRef, Ref, ReactElement } from 'react';
3
+ import { ElementType, ComponentPropsWithoutRef, RefObject } from 'react';
4
4
  import { BaseProps } from '@dt-dds/react-core';
5
5
 
6
+ type DropdownOptionBaseProps = BaseProps & {
7
+ isDisabled?: boolean;
8
+ isSelected?: boolean;
9
+ isHighlighted?: boolean;
10
+ isMulti?: boolean;
11
+ };
12
+ type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
13
+ as?: E;
14
+ } & ComponentPropsWithoutRef<E>;
15
+ declare const DropdownOption: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
16
+
6
17
  type DropdownVariant = 'outlined' | 'bottom-line';
7
18
  type DropdownFill = 'default' | 'contrast' | 'light';
8
19
  type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right';
@@ -19,35 +30,12 @@ interface DropdownProps extends BaseProps {
19
30
  isFocusable?: boolean;
20
31
  }
21
32
  declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLElement>> & {
22
- Option: <E extends react.ElementType = "li">(props: (BaseProps & {
23
- isDisabled?: boolean;
24
- isSelected?: boolean;
25
- isHighlighted?: boolean;
26
- isMulti?: boolean;
27
- } & {
28
- as?: E | undefined;
29
- } & react.PropsWithoutRef<react.ComponentProps<E>>) & {
30
- ref?: react.Ref<Element>;
31
- }) => react.ReactElement | null;
33
+ Option: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<react.ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
32
34
  };
33
35
 
34
- type DropdownOptionBaseProps = BaseProps & {
35
- isDisabled?: boolean;
36
- isSelected?: boolean;
37
- isHighlighted?: boolean;
38
- isMulti?: boolean;
39
- };
40
- type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
41
- as?: E;
42
- } & ComponentPropsWithoutRef<E>;
43
- type DropdownOptionComponent = <E extends ElementType = 'li'>(props: DropdownOptionProps<E> & {
44
- ref?: Ref<Element>;
45
- }) => ReactElement | null;
46
- declare const DropdownOption: DropdownOptionComponent;
47
-
48
36
  declare module '@emotion/react' {
49
37
  interface Theme extends CustomTheme {
50
38
  }
51
39
  }
52
40
 
53
- export { Dropdown, type DropdownFill, DropdownOption, type DropdownPlacement, type DropdownProps, type DropdownVariant };
41
+ export { Dropdown, type DropdownFill, DropdownOption, type DropdownOptionBaseProps, type DropdownOptionProps, type DropdownPlacement, type DropdownProps, type DropdownVariant };
package/dist/index.js CHANGED
@@ -65,9 +65,9 @@ __export(index_exports, {
65
65
  module.exports = __toCommonJS(index_exports);
66
66
 
67
67
  // src/Dropdown.tsx
68
- var import_react_core2 = require("@dt-dds/react-core");
69
- var import_focus_trap_react = require("focus-trap-react");
70
68
  var import_react3 = require("react");
69
+ var import_focus_trap_react = require("focus-trap-react");
70
+ var import_react_core2 = require("@dt-dds/react-core");
71
71
 
72
72
  // src/components/option/DropdownOption.tsx
73
73
  var import_react = require("react");
@@ -143,16 +143,23 @@ var DropdownOption = (0, import_react.forwardRef)(
143
143
  }
144
144
  onClick == null ? void 0 : onClick(e);
145
145
  };
146
+ const handleKeyDown = (e) => {
147
+ if (e.code === "Enter" || e.code === "Space") {
148
+ e.preventDefault();
149
+ onClick == null ? void 0 : onClick(e);
150
+ }
151
+ };
146
152
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
147
153
  DropdownOptionStyled,
148
- __spreadProps(__spreadValues({
154
+ __spreadProps(__spreadValues(__spreadValues({
155
+ onClick: handleClick,
156
+ onKeyDown: handleKeyDown,
149
157
  tabIndex: isDisabled ? -1 : 0
150
- }, rest), {
158
+ }, !isSelected && { role: "menuitem" }), rest), {
151
159
  "aria-disabled": isDisabled,
152
160
  "aria-selected": isSelected,
153
161
  "data-highlighted": isHighlighted,
154
162
  "data-testid": testId,
155
- onClick: handleClick,
156
163
  ref,
157
164
  style,
158
165
  children
@@ -170,8 +177,8 @@ var DropdownStyled = import_styled2.default.div`
170
177
  `;
171
178
 
172
179
  // src/hooks/useFloatingPosition.ts
173
- var import_react_core = require("@dt-dds/react-core");
174
180
  var import_react2 = require("react");
181
+ var import_react_core = require("@dt-dds/react-core");
175
182
  function basePos({
176
183
  placement,
177
184
  anchor,
@@ -351,15 +358,15 @@ var Dropdown = Object.assign(
351
358
  });
352
359
  const dropdownNode = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
353
360
  DropdownStyled,
354
- __spreadProps(__spreadValues({
361
+ __spreadProps(__spreadValues(__spreadValues({
355
362
  as,
356
363
  "data-testid": dataTestId,
357
364
  ref: setMenuRef,
358
365
  role: "menu",
359
366
  style: __spreadValues(__spreadValues({}, floatingStyle), style)
360
- }, rest), {
361
- "aria-hidden": !isOpen,
362
- onMouseDown: (e) => e.preventDefault(),
367
+ }, rest), !isFocusable && {
368
+ onMouseDown: (e) => e.preventDefault()
369
+ }), {
363
370
  children
364
371
  })
365
372
  );
@@ -377,7 +384,8 @@ var Dropdown = Object.assign(
377
384
  allowOutsideClick: true,
378
385
  onDeactivate: () => {
379
386
  onClose == null ? void 0 : onClose();
380
- }
387
+ },
388
+ tabbableOptions: { displayCheck: "none" }
381
389
  },
382
390
  children: dropdownNode
383
391
  }
package/dist/index.mjs CHANGED
@@ -31,9 +31,9 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
 
33
33
  // src/Dropdown.tsx
34
- import { Portal, useClickOutside } from "@dt-dds/react-core";
35
- import { FocusTrap } from "focus-trap-react";
36
34
  import { forwardRef as forwardRef2, useCallback, useRef } from "react";
35
+ import { FocusTrap } from "focus-trap-react";
36
+ import { Portal, useClickOutside } from "@dt-dds/react-core";
37
37
 
38
38
  // src/components/option/DropdownOption.tsx
39
39
  import {
@@ -111,16 +111,23 @@ var DropdownOption = forwardRef(
111
111
  }
112
112
  onClick == null ? void 0 : onClick(e);
113
113
  };
114
+ const handleKeyDown = (e) => {
115
+ if (e.code === "Enter" || e.code === "Space") {
116
+ e.preventDefault();
117
+ onClick == null ? void 0 : onClick(e);
118
+ }
119
+ };
114
120
  return /* @__PURE__ */ jsx(
115
121
  DropdownOptionStyled,
116
- __spreadProps(__spreadValues({
122
+ __spreadProps(__spreadValues(__spreadValues({
123
+ onClick: handleClick,
124
+ onKeyDown: handleKeyDown,
117
125
  tabIndex: isDisabled ? -1 : 0
118
- }, rest), {
126
+ }, !isSelected && { role: "menuitem" }), rest), {
119
127
  "aria-disabled": isDisabled,
120
128
  "aria-selected": isSelected,
121
129
  "data-highlighted": isHighlighted,
122
130
  "data-testid": testId,
123
- onClick: handleClick,
124
131
  ref,
125
132
  style,
126
133
  children
@@ -138,8 +145,8 @@ var DropdownStyled = styled2.div`
138
145
  `;
139
146
 
140
147
  // src/hooks/useFloatingPosition.ts
141
- import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
142
148
  import { useLayoutEffect, useState } from "react";
149
+ import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
143
150
  function basePos({
144
151
  placement,
145
152
  anchor,
@@ -319,15 +326,15 @@ var Dropdown = Object.assign(
319
326
  });
320
327
  const dropdownNode = /* @__PURE__ */ jsx2(
321
328
  DropdownStyled,
322
- __spreadProps(__spreadValues({
329
+ __spreadProps(__spreadValues(__spreadValues({
323
330
  as,
324
331
  "data-testid": dataTestId,
325
332
  ref: setMenuRef,
326
333
  role: "menu",
327
334
  style: __spreadValues(__spreadValues({}, floatingStyle), style)
328
- }, rest), {
329
- "aria-hidden": !isOpen,
330
- onMouseDown: (e) => e.preventDefault(),
335
+ }, rest), !isFocusable && {
336
+ onMouseDown: (e) => e.preventDefault()
337
+ }), {
331
338
  children
332
339
  })
333
340
  );
@@ -345,7 +352,8 @@ var Dropdown = Object.assign(
345
352
  allowOutsideClick: true,
346
353
  onDeactivate: () => {
347
354
  onClose == null ? void 0 : onClose();
348
- }
355
+ },
356
+ tabbableOptions: { displayCheck: "none" }
349
357
  },
350
358
  children: dropdownNode
351
359
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-dropdown",
3
- "version": "1.0.0-beta.78",
3
+ "version": "1.0.0-beta.80",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,12 +20,12 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-box": "1.0.0-beta.57",
24
- "@dt-dds/react-core": "1.0.0-beta.51",
25
- "@dt-dds/react-icon": "1.0.0-beta.54",
26
- "@dt-dds/react-icon-button": "1.0.0-beta.20",
27
- "@dt-dds/react-typography": "1.0.0-beta.42",
28
- "@dt-dds/themes": "1.0.0-beta.9",
23
+ "@dt-dds/react-box": "1.0.0-beta.59",
24
+ "@dt-dds/react-core": "1.0.0-beta.52",
25
+ "@dt-dds/react-icon": "1.0.0-beta.55",
26
+ "@dt-dds/react-icon-button": "1.0.0-beta.21",
27
+ "@dt-dds/react-typography": "1.0.0-beta.43",
28
+ "@dt-dds/themes": "1.0.0-beta.10",
29
29
  "focus-trap-react": "^11.0.4"
30
30
  },
31
31
  "devDependencies": {