@dt-dds/react-dropdown 1.0.0-beta.67 → 1.0.0-beta.69

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @dt-ui/react-dropdown
 
+## 1.0.0-beta.69
+
+### Minor Changes
+
+- feat: implement new Dropdown
+- feat: add native attributes to Typography
+- feat: implement new Select field
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-core@1.0.0-beta.51
+  - @dt-dds/react-icon@1.0.0-beta.53
+  - @dt-dds/react-icon-button@1.0.0-beta.19
+  - @dt-dds/react-typography@1.0.0-beta.42
+  - @dt-dds/react-box@1.0.0-beta.48
+
+## 1.0.0-beta.68
+
+### Patch Changes
+
+- refactor: use component size from core
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-icon@1.0.0-beta.52
+  - @dt-dds/react-box@1.0.0-beta.47
+
 ## 1.0.0-beta.67
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # Dropdown Package
 
-The Dropdown Menu provide the users with a list of options on temporary surfaces.
+The Dropdown Menu provides the users with a box that can receive any content. It also provides an Option component.
 
 ## Dropdown Usage
 
@@ -15,13 +15,9 @@ const OPTIONS = [
 export const App = () => {
   return (
     <Dropdown>
-      <Dropdown.Select label='Label'>
-        {options.map((option) => (
-          <Dropdown.Option key={option.value} option={option}>
-            {option.text ?? option.value}
-          </Dropdown.Option>
-        ))}
-      </Dropdown.Select>
+      {options.map((option) => (
+        <Dropdown.Option key={option.value}>{option.text}</Dropdown.Option>
+      ))}
     </Dropdown>
   );
 };
@@ -31,56 +27,33 @@ export const App = () => {
 
 ### Dropdown
 
-| Property       | Type                  | Default    | Description                                               |
-| -------------- | --------------------- | ---------- | --------------------------------------------------------- |
-| `children`     | `ReactNode`           | -          | Child components to be rendered                           |
-| `defaultValue` | `DropdownOptionValue` | -          | Initial selected option                                   |
-| `style`        | `React.CSSProperties` | -          | Gives the Box Dropdown css properties                     |
-| `dataTestId`   | `string`              | `dropdown` | Customizable test identifier                              |
-| `name`         | `string`              | -          | The attribute to specify the name of the dropdown element |
-
-### Dropdown.Select
-
-| Property      | Type                  | Default           | Description                                                |
-| ------------- | --------------------- | ----------------- | ---------------------------------------------------------- |
-| `children`    | `ReactNode`           | -                 | Child components to be rendered                            |
-| `label`       | `string`              | -                 | A text to help users understand the scope of the dropdown. |
-| `style`       | `React.CSSProperties` | -                 | Gives the Box Dropdown css properties                      |
-| `dataTestId`  | `string`              | `dropdown-select` | Customizable test identifier                               |
-| `isDisabled`  | `boolean`             | `false`           | Set the dropdown disabled.                                 |
-| `hasBorder`   | `boolean`             | `true`            | Set a border to the component.                             |
-| `hasError`    | `boolean`             | `false`           | Set error state for dropdown                               |
-| `fill`        | `DropdownFill`        | `default`         | Styles the input with a specific background color          |
-| `variant`     | `DropdownVariant`     | `outlined`        | Styles the input with a specific border                    |
-| `hasDeselect` | `boolean`             | `false`           | Set if dropdown has deselect X button/icon                 |
-| `isRequired`  | `boolean`             | `false`           | Apply required style to the label field                    |
-
-### Dropdown.Menu
-
-| Property     | Type        | Default | Description                     |
-| ------------ | ----------- | ------- | ------------------------------- |
-| `children`   | `ReactNode` | -       | Child components to be rendered |
-| `dataTestId` | `string`    | `menu`  | Customizable test identifier    |
+| Property     | Type                             | Default    | Description                                                                 |
+| ------------ | -------------------------------- | ---------- | --------------------------------------------------------------------------- |
+| `children`   | `ReactNode`                      | —          | Child components/content to be rendered inside the dropdown.                |
+| `style`      | `React.CSSProperties`            | —          | Inline styles merged **after** computed positioning styles.                 |
+| `dataTestId` | `string`                         | `dropdown` | Customizable test identifier applied to the dropdown root element.          |
+| `isOpen`     | `boolean`                        | `false`    | Controls visibility. When `false`, the element is hidden via `aria-hidden`. |
+| `anchorRef`  | `RefObject<HTMLElement \| null>` | -          | Reference to the anchor element used for positioning.                       |
+| `matchWidth` | `boolean`                        | `true`     | If `true`, the dropdown width matches the anchor width.                     |
+| `offsetX`    | `number`                         | `4`        | Horizontal offset (px) for `left`/`right` placements.                       |
+| `offsetY`    | `number`                         | `4`        | Vertical offset (px) for `top`/`bottom` placements.                         |
+| `onClose`    | `() => void`                     | —          | Called when a click is detected outside the dropdown/anchor.                |
+| `as`         | `keyof JSX.IntrinsicElements`    | `"div"`    | Underlying HTML element (e.g., `"ul"` for list semantics).                  |
+| `placement`  | `DropdownPlacement`              | `bottom`   | Dropdown position.                                                          |
 
 ### Dropdown.Option
 
-| Property     | Type                                                        | Default                          | Description                                       |
-| ------------ | ----------------------------------------------------------- | -------------------------------- | ------------------------------------------------- |
-| `style`      | `React.CSSProperties`                                       | -                                | Gives the Dropdown option css properties          |
-| `children`   | `ReactNode`                                                 | -                                | Child components to be rendered                   |
-| `option`     | `DropdownOptionValue`                                       | -                                | The option object.                                |
-| `dataTestId` | `string`                                                    | `dropdown-option-{option.value}` | Customizable test identifier                      |
-| `isDisabled` | `boolean`                                                   | `false`                          | Set the dropdown disabled.                        |
-| `onClick`    | `(option: string, name: string, event: MouseEvent) => void` | -                                | The triggered function when clicked on the option |
-
-### Dropdown.Detail
-
-| Property     | Type        | Default         | Description                           |
-| ------------ | ----------- | --------------- | ------------------------------------- |
-| `children`   | `ReactNode` | -               | Child components to be rendered       |
-| `dataTestId` | `string`    | `dropdown-text` | Customizable test identifier          |
-| `isDisabled` | `boolean`   | `false`         | Disable the dropdown detail text      |
-| `hasError`   | `boolean`   | `false`         | Set error state for the dropdown text |
+| Property        | Type                                                  | Default           | Description                                                             |
+| --------------- | ----------------------------------------------------- | ----------------- | ----------------------------------------------------------------------- |
+| `style`         | `React.CSSProperties`                                 | —                 | Inline styles for the option element.                                   |
+| `children`      | `ReactNode`                                           | —                 | Content of the option.                                                  |
+| `dataTestId`    | `string`                                              | `dropdown-option` | Customizable test identifier for the option element.                    |
+| `isDisabled`    | `boolean`                                             | `false`           | When `true`, sets `aria-disabled` and blocks click/keyboard activation. |
+| `isSelected`    | `boolean`                                             | `false`           | Reflects selection state via `aria-selected` and styling.               |
+| `isHighlighted` | `boolean`                                             | `false`           | Adds `data-highlighted="true"` for hover/active row styling.            |
+| `isMulti`       | `boolean`                                             | `false`           | Optional styling hint for multi-select contexts (no selection logic).   |
+| `onClick`       | `(event: MouseEvent<HTMLLIElement>) => void`          | —                 | Click handler.                                                          |
+| `...rest`       | `React.LiHTMLAttributes<HTMLLIElement>` & `BaseProps` | —                 | Additional LI attributes (e.g., `role="option"`, `tabIndex`, etc.).     |
 
 ## Stack
 

package/dist/index.d.mts

@@ -1,78 +1,37 @@
 import { CustomTheme } from '@dt-dds/themes';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BaseProps } from '@dt-dds/react-core';
 import * as react from 'react';
-import { MouseEvent, ReactNode } from 'react';
+import react__default, { RefObject } from 'react';
 
-interface DropdownDetailProps extends BaseProps {
+interface DropdownOptionProps extends BaseProps, react__default.LiHTMLAttributes<HTMLLIElement> {
     isDisabled?: boolean;
-    hasError?: boolean;
+    isSelected?: boolean;
+    isHighlighted?: boolean;
+    isMulti?: boolean;
 }
-declare const DropdownDetail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownOption: react__default.ForwardRefExoticComponent<DropdownOptionProps & react__default.RefAttributes<HTMLLIElement>>;
 
-type DropdownOptionValue = {
-    text?: string;
-    value: string;
-};
 type DropdownVariant = 'outlined' | 'bottom-line';
 type DropdownFill = 'default' | 'contrast' | 'light';
-
-interface DropdownOptionProps extends BaseProps {
-    fill?: DropdownFill;
-    option: DropdownOptionValue;
-    isDisabled?: boolean;
-    onClick?: (option: string, name: string | undefined, event: MouseEvent<HTMLLIElement>) => void;
-}
-declare const DropdownOption: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
-
-type DropdownSelectProps = {
-    label?: string;
-    isDisabled?: boolean;
-    isRequired?: boolean;
-    hasBorder?: boolean;
-    hasError?: boolean;
-    hasDeselect?: boolean;
-    variant?: DropdownVariant;
-    fill?: DropdownFill;
-} & BaseProps;
-declare const DropdownSelect: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
-
-declare const DropdownContainer: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
-
-declare const DropdownMenu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
+type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right';
 
 interface DropdownProps extends BaseProps {
-    defaultValue?: DropdownOptionValue;
-    name?: string;
+    isOpen?: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    matchWidth?: boolean;
+    offsetX?: number;
+    offsetY?: number;
+    onClose?: () => void;
+    as?: keyof JSX.IntrinsicElements;
+    placement?: DropdownPlacement;
 }
-declare const Dropdown: {
-    ({ children, defaultValue, style, name, dataTestId, }: DropdownProps): react_jsx_runtime.JSX.Element;
-    Container: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
-    Detail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
-    Select: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
-    Option: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
-    Menu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLElement>> & {
+    Option: react.ForwardRefExoticComponent<DropdownOptionProps & react.RefAttributes<HTMLLIElement>>;
 };
 
-interface DropdownContextState {
-    state: DropdownOptionValue;
-    isOpen: boolean;
-    name?: string;
-    setState: React.Dispatch<React.SetStateAction<DropdownOptionValue>>;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface DropdownContextProviderProps {
-    children: ReactNode;
-    defaultValue?: DropdownOptionValue;
-    name?: string;
-}
-declare const DropdownContext: react.Context<DropdownContextState>;
-declare const DropdownContextProvider: ({ children, defaultValue, name, }: DropdownContextProviderProps) => react_jsx_runtime.JSX.Element;
-declare const useDropdownContext: () => DropdownContextState;
-
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {
     }
 }
 
-export { Dropdown, DropdownContainer, DropdownContext, DropdownContextProvider, DropdownDetail, type DropdownDetailProps, type DropdownFill, DropdownMenu, DropdownOption, type DropdownOptionProps, type DropdownOptionValue, DropdownSelect, type DropdownSelectProps, type DropdownVariant, useDropdownContext };
+export { Dropdown, type DropdownFill, DropdownOption, type DropdownOptionProps, type DropdownPlacement, type DropdownProps, type DropdownVariant };

package/dist/index.d.ts

@@ -1,78 +1,37 @@
 import { CustomTheme } from '@dt-dds/themes';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BaseProps } from '@dt-dds/react-core';
 import * as react from 'react';
-import { MouseEvent, ReactNode } from 'react';
+import react__default, { RefObject } from 'react';
 
-interface DropdownDetailProps extends BaseProps {
+interface DropdownOptionProps extends BaseProps, react__default.LiHTMLAttributes<HTMLLIElement> {
     isDisabled?: boolean;
-    hasError?: boolean;
+    isSelected?: boolean;
+    isHighlighted?: boolean;
+    isMulti?: boolean;
 }
-declare const DropdownDetail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownOption: react__default.ForwardRefExoticComponent<DropdownOptionProps & react__default.RefAttributes<HTMLLIElement>>;
 
-type DropdownOptionValue = {
-    text?: string;
-    value: string;
-};
 type DropdownVariant = 'outlined' | 'bottom-line';
 type DropdownFill = 'default' | 'contrast' | 'light';
-
-interface DropdownOptionProps extends BaseProps {
-    fill?: DropdownFill;
-    option: DropdownOptionValue;
-    isDisabled?: boolean;
-    onClick?: (option: string, name: string | undefined, event: MouseEvent<HTMLLIElement>) => void;
-}
-declare const DropdownOption: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
-
-type DropdownSelectProps = {
-    label?: string;
-    isDisabled?: boolean;
-    isRequired?: boolean;
-    hasBorder?: boolean;
-    hasError?: boolean;
-    hasDeselect?: boolean;
-    variant?: DropdownVariant;
-    fill?: DropdownFill;
-} & BaseProps;
-declare const DropdownSelect: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
-
-declare const DropdownContainer: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
-
-declare const DropdownMenu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
+type DropdownPlacement = 'bottom' | 'top' | 'left' | 'right';
 
 interface DropdownProps extends BaseProps {
-    defaultValue?: DropdownOptionValue;
-    name?: string;
+    isOpen?: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    matchWidth?: boolean;
+    offsetX?: number;
+    offsetY?: number;
+    onClose?: () => void;
+    as?: keyof JSX.IntrinsicElements;
+    placement?: DropdownPlacement;
 }
-declare const Dropdown: {
-    ({ children, defaultValue, style, name, dataTestId, }: DropdownProps): react_jsx_runtime.JSX.Element;
-    Container: ({ children, style, dataTestId, }: BaseProps) => react_jsx_runtime.JSX.Element;
-    Detail: ({ dataTestId, isDisabled, hasError, children, }: DropdownDetailProps) => react_jsx_runtime.JSX.Element;
-    Select: ({ children, label, style, dataTestId, isDisabled, isRequired, hasBorder, hasError, hasDeselect, variant, fill, }: DropdownSelectProps) => react_jsx_runtime.JSX.Element;
-    Option: ({ dataTestId, option, children, style, isDisabled, onClick, }: DropdownOptionProps) => react_jsx_runtime.JSX.Element;
-    Menu: ({ children, dataTestId, style }: BaseProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLElement>> & {
+    Option: react.ForwardRefExoticComponent<DropdownOptionProps & react.RefAttributes<HTMLLIElement>>;
 };
 
-interface DropdownContextState {
-    state: DropdownOptionValue;
-    isOpen: boolean;
-    name?: string;
-    setState: React.Dispatch<React.SetStateAction<DropdownOptionValue>>;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface DropdownContextProviderProps {
-    children: ReactNode;
-    defaultValue?: DropdownOptionValue;
-    name?: string;
-}
-declare const DropdownContext: react.Context<DropdownContextState>;
-declare const DropdownContextProvider: ({ children, defaultValue, name, }: DropdownContextProviderProps) => react_jsx_runtime.JSX.Element;
-declare const useDropdownContext: () => DropdownContextState;
-
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {
     }
 }
 
-export { Dropdown, DropdownContainer, DropdownContext, DropdownContextProvider, DropdownDetail, type DropdownDetailProps, type DropdownFill, DropdownMenu, DropdownOption, type DropdownOptionProps, type DropdownOptionValue, DropdownSelect, type DropdownSelectProps, type DropdownVariant, useDropdownContext };
+export { Dropdown, type DropdownFill, DropdownOption, type DropdownOptionProps, type DropdownPlacement, type DropdownProps, type DropdownVariant };