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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @dt-ui/react-dropdown
 
+## 1.0.0-beta.80
+
+### Minor Changes
+
+- feat: enable DropdownOption external customizations
+
+### Patch Changes
+
+- Updated dependencies [223664b]
+  - @dt-dds/react-box@1.0.0-beta.59
+
 ## 1.0.0-beta.79
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,8 +1,19 @@
 import { CustomTheme } from '@dt-dds/themes';
 import * as react from 'react';
-import { RefObject, ElementType, ComponentPropsWithoutRef, Ref, ReactElement } from 'react';
+import { ElementType, ComponentPropsWithoutRef, RefObject } from 'react';
 import { BaseProps } from '@dt-dds/react-core';
 
+type DropdownOptionBaseProps = BaseProps & {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    isHighlighted?: boolean;
+    isMulti?: boolean;
+};
+type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
+    as?: E;
+} & ComponentPropsWithoutRef<E>;
+declare const DropdownOption: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
+
 type DropdownVariant = 'outlined' | 'bottom-line';
 type DropdownFill = 'default' | 'contrast' | 'light';
 type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right';
@@ -19,35 +30,12 @@ interface DropdownProps extends BaseProps {
     isFocusable?: boolean;
 }
 declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLElement>> & {
-    Option: <E extends react.ElementType = "li">(props: (BaseProps & {
-        isDisabled?: boolean;
-        isSelected?: boolean;
-        isHighlighted?: boolean;
-        isMulti?: boolean;
-    } & {
-        as?: E | undefined;
-    } & react.PropsWithoutRef<react.ComponentProps<E>>) & {
-        ref?: react.Ref<Element>;
-    }) => react.ReactElement | null;
+    Option: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<react.ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
 };
 
-type DropdownOptionBaseProps = BaseProps & {
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    isHighlighted?: boolean;
-    isMulti?: boolean;
-};
-type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
-    as?: E;
-} & ComponentPropsWithoutRef<E>;
-type DropdownOptionComponent = <E extends ElementType = 'li'>(props: DropdownOptionProps<E> & {
-    ref?: Ref<Element>;
-}) => ReactElement | null;
-declare const DropdownOption: DropdownOptionComponent;
-
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {
     }
 }
 
-export { Dropdown, type DropdownFill, DropdownOption, type DropdownPlacement, type DropdownProps, type DropdownVariant };
+export { Dropdown, type DropdownFill, DropdownOption, type DropdownOptionBaseProps, type DropdownOptionProps, type DropdownPlacement, type DropdownProps, type DropdownVariant };

package/dist/index.d.ts

@@ -1,8 +1,19 @@
 import { CustomTheme } from '@dt-dds/themes';
 import * as react from 'react';
-import { RefObject, ElementType, ComponentPropsWithoutRef, Ref, ReactElement } from 'react';
+import { ElementType, ComponentPropsWithoutRef, RefObject } from 'react';
 import { BaseProps } from '@dt-dds/react-core';
 
+type DropdownOptionBaseProps = BaseProps & {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    isHighlighted?: boolean;
+    isMulti?: boolean;
+};
+type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
+    as?: E;
+} & ComponentPropsWithoutRef<E>;
+declare const DropdownOption: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
+
 type DropdownVariant = 'outlined' | 'bottom-line';
 type DropdownFill = 'default' | 'contrast' | 'light';
 type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right';
@@ -19,35 +30,12 @@ interface DropdownProps extends BaseProps {
     isFocusable?: boolean;
 }
 declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLElement>> & {
-    Option: <E extends react.ElementType = "li">(props: (BaseProps & {
-        isDisabled?: boolean;
-        isSelected?: boolean;
-        isHighlighted?: boolean;
-        isMulti?: boolean;
-    } & {
-        as?: E | undefined;
-    } & react.PropsWithoutRef<react.ComponentProps<E>>) & {
-        ref?: react.Ref<Element>;
-    }) => react.ReactElement | null;
+    Option: react.ForwardRefExoticComponent<Omit<DropdownOptionProps<react.ElementType>, "ref"> & react.RefAttributes<HTMLLIElement>>;
 };
 
-type DropdownOptionBaseProps = BaseProps & {
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    isHighlighted?: boolean;
-    isMulti?: boolean;
-};
-type DropdownOptionProps<E extends ElementType = 'li'> = DropdownOptionBaseProps & {
-    as?: E;
-} & ComponentPropsWithoutRef<E>;
-type DropdownOptionComponent = <E extends ElementType = 'li'>(props: DropdownOptionProps<E> & {
-    ref?: Ref<Element>;
-}) => ReactElement | null;
-declare const DropdownOption: DropdownOptionComponent;
-
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {
     }
 }
 
-export { Dropdown, type DropdownFill, DropdownOption, type DropdownPlacement, type DropdownProps, type DropdownVariant };
+export { Dropdown, type DropdownFill, DropdownOption, type DropdownOptionBaseProps, type DropdownOptionProps, type DropdownPlacement, type DropdownProps, type DropdownVariant };

package/dist/index.js

@@ -143,16 +143,23 @@ var DropdownOption = (0, import_react.forwardRef)(
       }
       onClick == null ? void 0 : onClick(e);
     };
+    const handleKeyDown = (e) => {
+      if (e.code === "Enter" || e.code === "Space") {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      }
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       DropdownOptionStyled,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
         tabIndex: isDisabled ? -1 : 0
-      }, rest), {
+      }, !isSelected && { role: "menuitem" }), rest), {
         "aria-disabled": isDisabled,
         "aria-selected": isSelected,
         "data-highlighted": isHighlighted,
         "data-testid": testId,
-        onClick: handleClick,
         ref,
         style,
         children
@@ -351,15 +358,15 @@ var Dropdown = Object.assign(
       });
       const dropdownNode = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         DropdownStyled,
-        __spreadProps(__spreadValues({
+        __spreadProps(__spreadValues(__spreadValues({
           as,
           "data-testid": dataTestId,
           ref: setMenuRef,
           role: "menu",
           style: __spreadValues(__spreadValues({}, floatingStyle), style)
-        }, rest), {
-          "aria-hidden": !isOpen,
-          onMouseDown: (e) => e.preventDefault(),
+        }, rest), !isFocusable && {
+          onMouseDown: (e) => e.preventDefault()
+        }), {
           children
         })
       );
@@ -377,7 +384,8 @@ var Dropdown = Object.assign(
             allowOutsideClick: true,
             onDeactivate: () => {
               onClose == null ? void 0 : onClose();
-            }
+            },
+            tabbableOptions: { displayCheck: "none" }
           },
           children: dropdownNode
         }

package/dist/index.mjs

@@ -111,16 +111,23 @@ var DropdownOption = forwardRef(
       }
       onClick == null ? void 0 : onClick(e);
     };
+    const handleKeyDown = (e) => {
+      if (e.code === "Enter" || e.code === "Space") {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      }
+    };
     return /* @__PURE__ */ jsx(
       DropdownOptionStyled,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
         tabIndex: isDisabled ? -1 : 0
-      }, rest), {
+      }, !isSelected && { role: "menuitem" }), rest), {
         "aria-disabled": isDisabled,
         "aria-selected": isSelected,
         "data-highlighted": isHighlighted,
         "data-testid": testId,
-        onClick: handleClick,
         ref,
         style,
         children
@@ -319,15 +326,15 @@ var Dropdown = Object.assign(
       });
       const dropdownNode = /* @__PURE__ */ jsx2(
         DropdownStyled,
-        __spreadProps(__spreadValues({
+        __spreadProps(__spreadValues(__spreadValues({
           as,
           "data-testid": dataTestId,
           ref: setMenuRef,
           role: "menu",
           style: __spreadValues(__spreadValues({}, floatingStyle), style)
-        }, rest), {
-          "aria-hidden": !isOpen,
-          onMouseDown: (e) => e.preventDefault(),
+        }, rest), !isFocusable && {
+          onMouseDown: (e) => e.preventDefault()
+        }), {
           children
         })
       );
@@ -345,7 +352,8 @@ var Dropdown = Object.assign(
             allowOutsideClick: true,
             onDeactivate: () => {
               onClose == null ? void 0 : onClose();
-            }
+            },
+            tabbableOptions: { displayCheck: "none" }
           },
           children: dropdownNode
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-dropdown",
-  "version": "1.0.0-beta.79",
+  "version": "1.0.0-beta.80",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,7 +20,7 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-box": "1.0.0-beta.58",
+    "@dt-dds/react-box": "1.0.0-beta.59",
     "@dt-dds/react-core": "1.0.0-beta.52",
     "@dt-dds/react-icon": "1.0.0-beta.55",
     "@dt-dds/react-icon-button": "1.0.0-beta.21",