Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/design-system/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,7 @@
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-radio-group": "^1.3.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tooltip": "^1.2.8",
"@radix-ui/react-visually-hidden": "^1.2.4",
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use '../../styles/typography';
@use '../../styles/shared/dropdown';

.content {
Expand Down Expand Up @@ -111,20 +110,3 @@
.triggerItemIcon {
margin-left: auto;
}

/** Legacy classes */
.contentLegacy {
@include dropdown.dropdown-content;
min-width: 200px;
width: var(--radix-select-trigger-width);
}

.viewportLegacy {
@include dropdown.dropdown-viewport;
}

.itemLegacy {
@include dropdown.dropdown-item;
@include typography.p-special;
@include typography.ellipsis;
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import type React from 'react';
import { createContext, Fragment, useContext, useState } from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Menu } from '@ark-ui/react/menu';
import { Portal } from '@ark-ui/react/portal';
import classNames from 'classnames';
import styles from './ds-dropdown-menu.module.scss';
import { DsIcon } from '../ds-icon';
import { DsTypography } from '../ds-typography';
import { DsTextInput } from '../ds-text-input';
import type {
DsDropdownMenuActionsProps,
DsDropdownMenuContentProps,
Expand All @@ -17,7 +15,6 @@ import type {
DsDropdownMenuItemGroupProps,
DsDropdownMenuItemIndicatorProps,
DsDropdownMenuItemProps,
DsDropdownMenuLegacyProps,
DsDropdownMenuPositioning,
DsDropdownMenuRootProps,
DsDropdownMenuSeparatorProps,
Expand Down Expand Up @@ -279,95 +276,6 @@ const TriggerItem: React.FC<DsDropdownMenuTriggerItemProps> = ({ className, styl
);
};

/**
* DEPRECATED: Legacy DsDropdownMenu component with options array
* Use compound component pattern instead
* @deprecated
*/
/* c8 ignore start */
export const DsDropdownMenuLegacy: React.FC<DsDropdownMenuLegacyProps> = ({
options,
children,
contentGap = 0,
className,
style,
align = 'center',
side = 'bottom',
disablePortal = false,
disableSearch = true,
selected,
onSelect,
}) => {
const [open, setOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState('');

const Wrapper = disablePortal ? Fragment : DropdownMenu.Portal;

const filteredOptions = disableSearch
? options
: options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));

return (
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
<Wrapper>
<DropdownMenu.Content
className={classNames(styles.contentLegacy, styles.viewportLegacy)}
sideOffset={contentGap}
align={align}
side={side}
>
{!disableSearch && (
<DsTextInput
placeholder="Search"
value={searchTerm}
onValueChange={setSearchTerm}
slots={{
startAdornment: <DsIcon icon="search" size="tiny" />,
}}
onKeyDown={(e) => e.stopPropagation()}
/>
)}
{filteredOptions.map((option, i) => (
<DropdownMenu.Item
key={i}
disabled={option.disabled}
className={classNames(
styles.itemLegacy,
{
[styles.selected]: selected === option.value,
},
className,
)}
style={style}
onClick={(e) => {
e.stopPropagation();

if (!option.disabled) {
if (option.value) {
onSelect?.(option.value);
}
option.onClick?.(e);
setOpen(false);
}
}}
>
{option.icon && <DsIcon icon={option.icon} className={styles.itemIcon} />}
<span className={styles.label}>{option.label}</span>
{option.value && selected === option.value && (
<span className={styles.indicator}>
<DsIcon icon="check" />
</span>
)}
</DropdownMenu.Item>
))}
</DropdownMenu.Content>
</Wrapper>
</DropdownMenu.Root>
);
};
/* c8 ignore stop */

/**
* Design system DsDropdownMenu component
*
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { CSSProperties, MouseEvent, ReactNode } from 'react';
import type { CSSProperties, ReactNode } from 'react';
import type { Menu } from '@ark-ui/react/menu';
import type { IconType } from '../ds-icon';

/**
* Base positioning type
Expand All @@ -15,92 +14,6 @@ export type DsDropdownMenuPositioning = Pick<
'placement' | 'gutter' | 'sameWidth' | 'getAnchorRect'
>;

/**
* DEPRECATED: Legacy dropdown menu option configuration
* Use compound component pattern instead
* @deprecated
*/
export interface DsDropdownMenuOptionLegacy {
/**
* Display label for the menu option
*/
label: string;
/**
* Optional icon to display
*/
icon?: IconType;
/**
* Whether this option is disabled
*/
disabled?: boolean;
/**
* Click handler for the option
*/
onClick?: (e: MouseEvent<HTMLElement>) => void;
/**
* Optional value for selection tracking
*/
value?: string;
}

/**
* DEPRECATED: Legacy props for DsDropdownMenuLegacy component
* Use compound component pattern instead
* @deprecated
*/
export interface DsDropdownMenuLegacyProps {
/**
* The options to be displayed in the dropdown menu
*/
options: DsDropdownMenuOptionLegacy[];
/**
* Optional children to be rendered inside the component
* Typically used for the trigger element
*/
children?: ReactNode | undefined;
/**
* The gap between the trigger and dropdown content in pixels
* @default 0
*/
contentGap?: number;
/**
* Additional CSS class names
*/
className?: string;
/**
* Optional inline styles to apply to the component
*/
style?: CSSProperties;
/**
* The alignment of the dropdown content
* @default 'center'
*/
align?: 'start' | 'center' | 'end';
/**
* The side of the dropdown content
* @default 'bottom'
*/
side?: 'top' | 'right' | 'bottom' | 'left';
/**
* Whether to render in place instead of using portals
* @default false
*/
disablePortal?: boolean;
/**
* Whether to disable the search functionality
* @default false
*/
disableSearch?: boolean;
/**
* Currently selected value (for selection tracking)
*/
selected?: string;
/**
* Callback when an option with a value is selected
*/
onSelect?: (value: string) => void;
}

/**
* Props for the DsDropdownMenu Root component
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { DsDropdownMenu, DsDropdownMenuLegacy } from './ds-dropdown-menu';
export { DsDropdownMenu } from './ds-dropdown-menu';
export * from './ds-dropdown-menu.types';
Loading
Loading