@drivenets/design-system 0.0.1

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -0,0 +1,396 @@
+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/ds-typography';
+import DsTextInput from '../ds-text-input/ds-text-input';
+import type {
+	DsDropdownMenuActionsProps,
+	DsDropdownMenuContentProps,
+	DsDropdownMenuHeaderProps,
+	DsDropdownMenuItemGroupContentProps,
+	DsDropdownMenuItemGroupLabelProps,
+	DsDropdownMenuItemGroupProps,
+	DsDropdownMenuItemIndicatorProps,
+	DsDropdownMenuItemProps,
+	DsDropdownMenuLegacyProps,
+	DsDropdownMenuPositioning,
+	DsDropdownMenuRootProps,
+	DsDropdownMenuSeparatorProps,
+	DsDropdownMenuTriggerProps,
+} from './ds-dropdown-menu.types';
+
+/**
+ * Context to share state between Group and GroupLabel
+ */
+interface GroupContextValue {
+	collapsed: boolean;
+	toggle: () => void;
+}
+
+const GroupContext = createContext<GroupContextValue | null>(null);
+
+const DEFAULT_POSITIONING: DsDropdownMenuPositioning = {
+	placement: 'bottom-start' as const,
+	gutter: 4,
+};
+
+/**
+ * Root component - manages dropdown state
+ */
+const Root: React.FC<DsDropdownMenuRootProps> = ({
+	open,
+	onOpenChange,
+	onSelect,
+	onHighlightChange,
+	positioning: customPositioning,
+	preventCloseOnSelect = false,
+	children,
+}) => {
+	const positioning = {
+		...DEFAULT_POSITIONING,
+		...customPositioning,
+	};
+
+	return (
+		<Menu.Root
+			open={open}
+			onOpenChange={(details) => onOpenChange?.(details.open)}
+			onSelect={(details) => onSelect?.(details.value)}
+			onHighlightChange={(details) => onHighlightChange?.(details.highlightedValue)}
+			positioning={positioning}
+			closeOnSelect={!preventCloseOnSelect}
+		>
+			{children}
+		</Menu.Root>
+	);
+};
+
+/**
+ * Trigger component - wraps the trigger element
+ */
+const Trigger: React.FC<DsDropdownMenuTriggerProps> = Menu.Trigger;
+
+/**
+ * Content component - wraps the dropdown content
+ */
+const Content: React.FC<DsDropdownMenuContentProps> = ({
+	disablePortal = false,
+	children,
+	className,
+	style,
+}) => {
+	const Wrapper = disablePortal ? Fragment : Portal;
+
+	return (
+		<Wrapper>
+			<Menu.Positioner>
+				<Menu.Content className={classNames(styles.content, className)} style={style}>
+					{children}
+				</Menu.Content>
+			</Menu.Positioner>
+		</Wrapper>
+	);
+};
+
+/**
+ * Item component - renders a menu item
+ */
+const Item: React.FC<DsDropdownMenuItemProps> = ({
+	disabled,
+	selected,
+	value,
+	asChild,
+	onClick,
+	onSelect,
+	children,
+	className,
+	style,
+}) => {
+	return (
+		<Menu.Item
+			disabled={disabled}
+			className={classNames(
+				styles.item,
+				{
+					[styles.selected]: selected,
+				},
+				className,
+			)}
+			style={style}
+			value={value}
+			asChild={asChild}
+			onClick={onClick}
+			onSelect={onSelect}
+		>
+			{children}
+		</Menu.Item>
+	);
+};
+
+/**
+ * ItemIndicator component - renders a selection indicator (check icon by default)
+ */
+const ItemIndicator: React.FC<DsDropdownMenuItemIndicatorProps> = ({ children, className, style }) => {
+	return (
+		<span className={classNames(styles.indicator, className)} style={style}>
+			{children ?? <DsIcon icon="check" />}
+		</span>
+	);
+};
+
+/**
+ * Header component - sticky header container for search, filters, or other controls
+ */
+const Header: React.FC<DsDropdownMenuHeaderProps> = ({ children, className, style }) => {
+	return (
+		<div className={classNames(styles.header, className)} style={style}>
+			{children}
+		</div>
+	);
+};
+
+/**
+ * Actions component - footer container for action buttons
+ */
+const Actions: React.FC<DsDropdownMenuActionsProps> = ({ children, className, style }) => {
+	return (
+		<div
+			className={classNames(styles.actions, className)}
+			style={style}
+			role="menu"
+			aria-label="Menu actions"
+		>
+			{children}
+		</div>
+	);
+};
+
+/**
+ * ItemGroup component - collapsible group container
+ */
+const ItemGroup: React.FC<DsDropdownMenuItemGroupProps> = ({
+	children,
+	collapsed: controlledCollapsed,
+	onCollapsedChange,
+	className,
+	style,
+}) => {
+	const [internalCollapsed, setInternalCollapsed] = useState(false);
+
+	const isControlled = controlledCollapsed !== undefined;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+
+	const toggle = () => {
+		const newCollapsed = !collapsed;
+		if (!isControlled) {
+			setInternalCollapsed(newCollapsed);
+		}
+		onCollapsedChange?.(newCollapsed);
+	};
+
+	return (
+		<GroupContext.Provider value={{ collapsed, toggle }}>
+			<Menu.ItemGroup className={classNames(styles.group, className)} style={style}>
+				{children}
+			</Menu.ItemGroup>
+		</GroupContext.Provider>
+	);
+};
+
+/**
+ * ItemGroupLabel component - clickable group header with collapse indicator
+ */
+const ItemGroupLabel: React.FC<DsDropdownMenuItemGroupLabelProps> = ({ children, className, style }) => {
+	const context = useContext(GroupContext);
+
+	if (!context) {
+		// If not inside a Group, just render static label
+		return (
+			<Menu.ItemGroupLabel className={classNames(styles.groupLabel, className)} style={style}>
+				<DsTypography variant="body-sm-md">{children}</DsTypography>
+			</Menu.ItemGroupLabel>
+		);
+	}
+
+	const { collapsed, toggle } = context;
+
+	return (
+		<Menu.ItemGroupLabel asChild>
+			<button
+				type="button"
+				className={classNames(styles.groupLabel, styles.groupLabelCollapsible, className)}
+				style={style}
+				onClick={toggle}
+				onKeyDown={(e) => e.stopPropagation()}
+			>
+				<DsTypography variant="body-sm-md">{children}</DsTypography>
+				<DsIcon
+					icon="keyboard_arrow_down"
+					className={classNames(styles.groupLabelIcon, {
+						[styles.groupLabelIconRotated]: !collapsed,
+					})}
+				/>
+			</button>
+		</Menu.ItemGroupLabel>
+	);
+};
+
+/**
+ * ItemGroupContent component - collapsible content container
+ */
+const ItemGroupContent: React.FC<DsDropdownMenuItemGroupContentProps> = ({ children, className, style }) => {
+	const context = useContext(GroupContext);
+
+	if (context?.collapsed) {
+		return null;
+	}
+
+	return (
+		<div className={className} style={style}>
+			{children}
+		</div>
+	);
+};
+
+/**
+ * Separator component - renders a visual divider
+ */
+const Separator: React.FC<DsDropdownMenuSeparatorProps> = ({ className, style }) => {
+	return <Menu.Separator className={classNames(styles.separator, className)} style={style} />;
+};
+
+/**
+ * DEPRECATED: Legacy DsDropdownMenu component with options array
+ * Use compound component pattern instead
+ * @deprecated
+ */
+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>
+	);
+};
+
+/**
+ * Design system  DsDropdownMenu component
+ *
+ * @example
+ * <DsDropdownMenu.Root>
+ *   <DsDropdownMenu.Trigger>
+ *     <button>Open</button>
+ *   </DsDropdownMenu.Trigger>
+ *   <DsDropdownMenu.Content>
+ *     <DsDropdownMenu.Header>
+ *       <DsTextInput placeholder="Search..." />
+ *     </DsDropdownMenu.Header>
+ *     <DsDropdownMenu.Item value="item1">
+ *       Item 1
+ *       <DsDropdownMenu.ItemIndicator />
+ *     </DsDropdownMenu.Item>
+ *     <DsDropdownMenu.ItemGroup>
+ *       <DsDropdownMenu.ItemGroupLabel>Group Name</DsDropdownMenu.ItemGroupLabel>
+ *       <DsDropdownMenu.ItemGroupContent>
+ *         <DsDropdownMenu.Item value="item2">Item 2</DsDropdownMenu.Item>
+ *       </DsDropdownMenu.ItemGroupContent>
+ *     </DsDropdownMenu.ItemGroup>
+ *     <DsDropdownMenu.Separator />
+ *     <DsDropdownMenu.Actions>
+ *       <DsButton>Cancel</DsButton>
+ *       <DsButton>Apply</DsButton>
+ *     </DsDropdownMenu.Actions>
+ *   </DsDropdownMenu.Content>
+ * </DsDropdownMenu.Root>
+ */
+export const DsDropdownMenu = {
+	Root,
+	Trigger,
+	Content,
+	Item,
+	ItemIndicator,
+	Header,
+	Actions,
+	ItemGroup,
+	ItemGroupLabel,
+	ItemGroupContent,
+	Separator,
+};

package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.tsx

@@ -0,0 +1,262 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import type { Menu } from '@ark-ui/react/menu';
+import type { IconType } from '../ds-icon';
+
+/**
+ * Base positioning type
+ */
+type BasePositioning = NonNullable<Menu.RootProps['positioning']>;
+
+/**
+ * Positioning options for dropdown menu
+ */
+export type DsDropdownMenuPositioning = Pick<BasePositioning, 'placement' | 'gutter' | 'sameWidth'>;
+
+/**
+ * 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
+ */
+export interface DsDropdownMenuRootProps {
+	/**
+	 * Whether the dropdown is open (controlled mode)
+	 */
+	open?: boolean;
+	/**
+	 * Callback when open state changes
+	 */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * Callback when an item is selected
+	 */
+	onSelect?: (value: string) => void;
+	/**
+	 * Callback when the highlighted item changes
+	 */
+	onHighlightChange?: (value: string | null) => void;
+	/**
+	 * Positioning options for the dropdown
+	 */
+	positioning?: DsDropdownMenuPositioning;
+	/**
+	 * Prevents the menu from closing when any item is selected
+	 * @default false
+	 */
+	preventCloseOnSelect?: boolean;
+	/**
+	 * Root content
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * Props for the DsDropdownMenu Trigger component
+ */
+export type DsDropdownMenuTriggerProps = Menu.TriggerProps;
+
+/**
+ * Props for the DsDropdownMenu Content component
+ */
+export interface DsDropdownMenuContentProps extends Pick<
+	Menu.ContentProps,
+	'className' | 'style' | 'children'
+> {
+	/**
+	 * Whether to render in place instead of using portals
+	 * @default false
+	 */
+	disablePortal?: boolean;
+}
+
+/**
+ * Props for the DsDropdownMenu Item component
+ */
+export interface DsDropdownMenuItemProps extends Pick<
+	Menu.ItemProps,
+	'disabled' | 'asChild' | 'className' | 'style' | 'onSelect' | 'onClick' | 'value' | 'children'
+> {
+	/**
+	 * Whether the item is selected (applies selected styling)
+	 */
+	selected?: boolean;
+}
+
+/**
+ * Props for the DsDropdownMenu ItemIndicator component
+ */
+export interface DsDropdownMenuItemIndicatorProps {
+	/**
+	 * Custom content to render as the indicator (defaults to check icon)
+	 */
+	children?: ReactNode;
+	/**
+	 * Optional CSS class name
+	 */
+	className?: string;
+	/**
+	 * Optional inline styles
+	 */
+	style?: CSSProperties;
+}
+
+/**
+ * Props for the DsDropdownMenu Header component
+ */
+export interface DsDropdownMenuHeaderProps {
+	/**
+	 * The header content (typically a search input or filter controls)
+	 */
+	children: ReactNode;
+	/**
+	 * Optional CSS class name
+	 */
+	className?: string;
+	/**
+	 * Optional inline styles
+	 */
+	style?: CSSProperties;
+}
+
+/**
+ * Props for the DsDropdownMenu Actions component
+ */
+export interface DsDropdownMenuActionsProps {
+	/**
+	 * The action buttons or elements
+	 */
+	children: ReactNode;
+	/**
+	 * Optional CSS class name
+	 */
+	className?: string;
+	/**
+	 * Optional inline styles
+	 */
+	style?: CSSProperties;
+}
+
+/**
+ * Props for the DsDropdownMenu ItemGroup component
+ */
+export interface DsDropdownMenuItemGroupProps extends Menu.ItemGroupProps {
+	/**
+	 * Whether the group is collapsed
+	 */
+	collapsed?: boolean;
+	/**
+	 * Callback when collapse state changes
+	 */
+	onCollapsedChange?: (collapsed: boolean) => void;
+}
+
+/**
+ * Props for the DsDropdownMenu ItemGroupLabel component
+ */
+export type DsDropdownMenuItemGroupLabelProps = Menu.ItemGroupLabelProps;
+
+/**
+ * Props for the DsDropdownMenu ItemGroupContent component
+ */
+export interface DsDropdownMenuItemGroupContentProps {
+	/**
+	 * The content to show/hide based on collapsed state
+	 */
+	children: ReactNode;
+	/**
+	 * Optional CSS class name
+	 */
+	className?: string;
+	/**
+	 * Optional inline styles
+	 */
+	style?: CSSProperties;
+}
+
+/**
+ * Props for the DsDropdownMenu Separator component
+ */
+export type DsDropdownMenuSeparatorProps = Menu.SeparatorProps;

package/src/components/ds-dropdown-menu/index.tsx

@@ -0,0 +1,2 @@
+export { DsDropdownMenu, DsDropdownMenuLegacy } from './ds-dropdown-menu';
+export * from './ds-dropdown-menu.types';