@keboola/design 1.0.0

package/src/components/DiffView/util.ts

@@ -0,0 +1,311 @@
+import { diffLines, diffWords } from 'diff';
+
+export const DiffType = {
+  DEFAULT: 'default',
+  ADDED: 'added',
+  REMOVED: 'removed',
+} as const;
+
+type DiffTypeValue = (typeof DiffType)[keyof typeof DiffType];
+
+export type DiffInformation = {
+  value: string | DiffInformation[];
+  lineNumber: number;
+  type: DiffTypeValue;
+};
+
+export type LineInformation = {
+  left: DiffInformation;
+  right: DiffInformation;
+};
+
+type ComputedLineInformation = {
+  lineInformation: LineInformation[];
+  diffLines: number[];
+};
+
+type SidedDiffInformation = {
+  left: DiffInformation[];
+  right: DiffInformation[];
+};
+
+export type WordInformation = {
+  value: string;
+  type: DiffTypeValue;
+  lineNumber: number;
+};
+
+export type SideInformation = {
+  type: DiffTypeValue;
+  lineNumber: number;
+  words: WordInformation[];
+};
+
+export type DiffRow =
+  | { kind: 'fold'; blockStart: number; lineCount: number; key: string }
+  | { kind: 'line'; left: SideInformation; right: SideInformation; key: string };
+
+const EXTRA_LINES = 3;
+
+// Sentinel blockStart for the region after the last diff; keeps distance checks
+// inert and lets `expandedBlocks` key on a real value.
+const TAIL_BLOCK = Number.POSITIVE_INFINITY;
+
+type Counters = {
+  left: number;
+  right: number;
+  global: number;
+};
+
+type DiffChunk = ReturnType<typeof diffLines>[number];
+
+const splitLines = (value: string): string[] => {
+  if (value === '') return [];
+  return value.replace(/\n$/, '').split('\n');
+};
+
+const computeWordDiff = (oldValue: string, newValue: string): SidedDiffInformation => {
+  const result: SidedDiffInformation = { left: [], right: [] };
+
+  diffWords(oldValue, newValue).forEach(({ added, removed, value }) => {
+    if (added) {
+      result.right.push({ type: DiffType.ADDED, value, lineNumber: 0 });
+      return;
+    }
+    if (removed) {
+      result.left.push({ type: DiffType.REMOVED, value, lineNumber: 0 });
+      return;
+    }
+    const unchanged: DiffInformation = { type: DiffType.DEFAULT, value, lineNumber: 0 };
+    result.right.push(unchanged);
+    result.left.push(unchanged);
+  });
+
+  return result;
+};
+
+// Look ahead one chunk in the diff array and return the paired added-line string,
+// or null if there isn't one at the same lineIndex position.
+const findPairedAddedLine = (
+  diffArray: DiffChunk[],
+  blockIndex: number,
+  lineIndex: number,
+): string | null => {
+  const nextBlock = diffArray[blockIndex + 1];
+  if (!nextBlock?.added) return null;
+  return splitLines(nextBlock.value)[lineIndex] ?? null;
+};
+
+const buildUnchangedLine = (value: string, counters: Counters): LineInformation => {
+  counters.left += 1;
+  counters.right += 1;
+  return {
+    left: { type: DiffType.DEFAULT, value, lineNumber: counters.left },
+    right: { type: DiffType.DEFAULT, value, lineNumber: counters.right },
+  };
+};
+
+const buildAddedLine = (value: string, counters: Counters): LineInformation => {
+  counters.right += 1;
+  return {
+    left: {} as DiffInformation,
+    right: { type: DiffType.ADDED, value, lineNumber: counters.right },
+  };
+};
+
+const buildRemovedLine = (value: string, counters: Counters): LineInformation => {
+  counters.left += 1;
+  return {
+    left: { type: DiffType.REMOVED, value: value || ' ', lineNumber: counters.left },
+    right: {} as DiffInformation,
+  };
+};
+
+// Removed + paired added → one modification row with word-level diff.
+// Returns `isActualChange: false` for the quirky case where the two sides
+// resolve to the same string; the caller then omits it from diffLines.
+const buildModifiedLine = (
+  leftValue: string,
+  rightValue: string,
+  counters: Counters,
+): { line: LineInformation; isActualChange: boolean } => {
+  counters.left += 1;
+  counters.right += 1;
+  const displayLeft = leftValue || ' ';
+
+  if (displayLeft === rightValue) {
+    return {
+      line: {
+        left: { type: DiffType.DEFAULT, value: rightValue, lineNumber: counters.left },
+        right: { type: DiffType.DEFAULT, value: rightValue, lineNumber: counters.right },
+      },
+      isActualChange: false,
+    };
+  }
+
+  const { left, right } = computeWordDiff(leftValue, rightValue);
+  return {
+    line: {
+      left: { type: DiffType.REMOVED, value: left, lineNumber: counters.left },
+      right: { type: DiffType.ADDED, value: right, lineNumber: counters.right },
+    },
+    isActualChange: true,
+  };
+};
+
+export const computeLineInformation = (
+  oldString: string,
+  newString: string,
+  ignoreWhitespace?: boolean,
+): ComputedLineInformation => {
+  const diffArray = diffLines(oldString.trimEnd(), newString.trimEnd(), { ignoreWhitespace });
+  const counters: Counters = { left: 0, right: 0, global: 0 };
+  const lineInformation: LineInformation[] = [];
+  const diffLineSet = new Set<number>();
+  const consumedAddedLines = new Set<string>();
+
+  diffArray.forEach((block, blockIndex) => {
+    splitLines(block.value).forEach((value, lineIndex) => {
+      if (consumedAddedLines.has(`${blockIndex}-${lineIndex}`)) return;
+
+      if (block.removed) {
+        const paired = findPairedAddedLine(diffArray, blockIndex, lineIndex);
+        if (paired !== null) {
+          consumedAddedLines.add(`${blockIndex + 1}-${lineIndex}`);
+          const { line, isActualChange } = buildModifiedLine(value, paired, counters);
+          lineInformation.push(line);
+          if (isActualChange) diffLineSet.add(counters.global);
+        } else {
+          lineInformation.push(buildRemovedLine(value, counters));
+          diffLineSet.add(counters.global);
+        }
+      } else if (block.added) {
+        lineInformation.push(buildAddedLine(value, counters));
+        diffLineSet.add(counters.global);
+      } else {
+        lineInformation.push(buildUnchangedLine(value, counters));
+      }
+
+      counters.global += 1;
+    });
+  });
+
+  return {
+    lineInformation,
+    diffLines: [...diffLineSet].sort((a, b) => a - b),
+  };
+};
+
+type ContextSegment = { kind: 'context'; lines: LineInformation[]; firstIndex: number };
+type ChangeSegment = { kind: 'change'; lines: LineInformation[]; firstIndex: number };
+type Segment = ContextSegment | ChangeSegment;
+
+const toSegments = (
+  lineInformation: LineInformation[],
+  diffLineSet: ReadonlySet<number>,
+): Segment[] => {
+  const segments: Segment[] = [];
+  let current: Segment | null = null;
+
+  lineInformation.forEach((line, index) => {
+    const isChange = diffLineSet.has(index);
+    if (current === null || (current.kind === 'change') !== isChange) {
+      current = isChange
+        ? { kind: 'change', lines: [line], firstIndex: index }
+        : { kind: 'context', lines: [line], firstIndex: index };
+      segments.push(current);
+    } else {
+      current.lines.push(line);
+    }
+  });
+
+  return segments;
+};
+
+const normalizeSide = (side: DiffInformation): SideInformation => {
+  const raw = Array.isArray(side.value)
+    ? side.value
+    : [{ value: side.value, type: DiffType.DEFAULT, lineNumber: 0 }];
+
+  return {
+    type: side.type,
+    lineNumber: side.lineNumber,
+    words: raw.filter((w): w is WordInformation => typeof w.value === 'string'),
+  };
+};
+
+const renderLineRow = (line: LineInformation): DiffRow => ({
+  kind: 'line',
+  left: normalizeSide(line.left),
+  right: normalizeSide(line.right),
+  key: `${line.left.lineNumber}-${line.right.lineNumber}`,
+});
+
+const renderContextSegment = (
+  segment: ContextSegment,
+  nextChangeIndex: number,
+  hasPrevChange: boolean,
+  hasNextChange: boolean,
+  expanded: ReadonlySet<number>,
+): DiffRow[] => {
+  if (expanded.has(nextChangeIndex)) {
+    return segment.lines.map(renderLineRow);
+  }
+
+  const total = segment.lines.length;
+  const trail = hasPrevChange ? Math.min(EXTRA_LINES, total) : 0;
+  let lead = hasNextChange ? Math.min(EXTRA_LINES, total - trail) : 0;
+  let foldCount = total - trail - lead;
+
+  // Quirk from the original: a single trailing unchanged line is always rendered
+  // (no one-line fold at the tail). Absorb it into the lead slice.
+  if (!hasNextChange && foldCount === 1) {
+    foldCount = 0;
+    lead = 1;
+  }
+
+  const rows: DiffRow[] = [];
+  if (trail > 0) {
+    rows.push(...segment.lines.slice(0, trail).map(renderLineRow));
+  }
+  if (foldCount > 0) {
+    rows.push({
+      kind: 'fold',
+      blockStart: nextChangeIndex,
+      lineCount: foldCount,
+      key: hasNextChange
+        ? `fold-${nextChangeIndex}`
+        : `fold-tail-${segment.firstIndex + total - 1}`,
+    });
+  }
+  if (lead > 0) {
+    rows.push(...segment.lines.slice(trail + foldCount).map(renderLineRow));
+  }
+  return rows;
+};
+
+export const computeDiffRows = (
+  lineInformation: LineInformation[],
+  diffLines: number[],
+  expandedBlocks: number[],
+): DiffRow[] => {
+  const diffLineSet = new Set(diffLines);
+  const expanded = new Set(expandedBlocks);
+  const segments = toSegments(lineInformation, diffLineSet);
+
+  const rows: DiffRow[] = [];
+  let hasPrevChange = false;
+
+  segments.forEach((segment, i) => {
+    if (segment.kind === 'change') {
+      rows.push(...segment.lines.map(renderLineRow));
+      hasPrevChange = true;
+      return;
+    }
+    const nextChange = segments.slice(i + 1).find((s) => s.kind === 'change');
+    const nextStart = nextChange?.firstIndex ?? TAIL_BLOCK;
+    rows.push(...renderContextSegment(segment, nextStart, hasPrevChange, !!nextChange, expanded));
+  });
+
+  return rows;
+};

package/src/components/DotsLoader.tsx

@@ -0,0 +1,22 @@
+import { cn } from '../utils/classNames';
+
+type DotsLoaderProps = {
+  className?: string;
+};
+
+const DOT_CLASS_NAME = cn('tw-h-1.5', 'tw-w-1.5', 'tw-rounded-full', 'tw-bg-neutral-700');
+
+export const DotsLoader = ({ className }: DotsLoaderProps) => {
+  return (
+    <div
+      className={cn(
+        'tw-relative -tw-m-0.5 tw-flex tw-items-center tw-justify-center tw-gap-1',
+        className,
+      )}
+    >
+      <div className={cn(DOT_CLASS_NAME, 'tw-animate-dot-pulse-1')} />
+      <div className={cn(DOT_CLASS_NAME, 'tw-animate-dot-pulse-2')} />
+      <div className={cn(DOT_CLASS_NAME, 'tw-animate-dot-pulse-3')} />
+    </div>
+  );
+};

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,306 @@
+import { type ComponentProps, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+
+import { DropdownMenu } from './DropdownMenu';
+
+const meta = {
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    variant: 'default',
+    defaultOpen: true,
+  },
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (props) => (
+    <DropdownMenu {...props}>
+      <DropdownMenu.Trigger asChild>
+        <Button argo={props.variant === 'argo'}>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>Fruits</DropdownMenu.Label>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item>Apples</DropdownMenu.Item>
+        <DropdownMenu.Item>Blueberries</DropdownMenu.Item>
+        <DropdownMenu.Item>Melons</DropdownMenu.Item>
+
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item>Carrots</DropdownMenu.Item>
+        <DropdownMenu.Item>Others</DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};
+
+export const MenuItems: Story = {
+  render: (props) => (
+    <DropdownMenu {...props}>
+      <DropdownMenu.Trigger asChild>
+        <Button argo={props.variant === 'argo'}>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.Item>Default</DropdownMenu.Item>
+        <DropdownMenu.Item icon="cog">Default - Icon</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Default - Disabled</DropdownMenu.Item>
+        <DropdownMenu.Item icon="cog" disabled>
+          Default - Icon- Disabled
+        </DropdownMenu.Item>
+        <DropdownMenu.Item isLoading>Default - Loading</DropdownMenu.Item>
+        <DropdownMenu.Item icon="cog" isLoading>
+          Default - Icon - Loading
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>Default - Selected</DropdownMenu.Item>
+        <DropdownMenu.Item>With Icon</DropdownMenu.Item>
+
+        <DropdownMenu.Item asChild>
+          {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Anchor</a>
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item asChild icon="cog">
+          {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Anchor - Icon</a>
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item asChild disabled>
+          {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Anchor - Disabled</a>
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item asChild>
+          {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Anchor - Selected</a>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};
+
+export const SubMenu: Story = {
+  render: (props) => (
+    <DropdownMenu {...props}>
+      <DropdownMenu.Trigger asChild>
+        <Button argo={props.variant === 'argo'}>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Sub Menu</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.RadioGroup value="dark">
+              <DropdownMenu.RadioItem value="dark">Dark</DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value="system">System</DropdownMenu.RadioItem>
+            </DropdownMenu.RadioGroup>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Group>
+              <DropdownMenu.Item>More...</DropdownMenu.Item>
+            </DropdownMenu.Group>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};
+
+export const Scrolling: Story = {
+  render: (props) => (
+    <DropdownMenu {...props}>
+      <DropdownMenu.Trigger asChild>
+        <Button argo={props.variant === 'argo'}>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content viewPortClassName="tw-max-h-40">
+        {['Dev Branch 1', 'Dev Branch 2', 'Dev Branch 3', 'Dev Branch 4', 'Dev Branch 5'].map(
+          (branch) => (
+            <DropdownMenu.Item asChild key={branch}>
+              {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+              <a href="#">
+                {branch}
+                <DropdownMenu.ItemDescription>Mar 4 02:49 PM</DropdownMenu.ItemDescription>
+              </a>
+            </DropdownMenu.Item>
+          ),
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};
+
+const RadioGroupDemo = (props: ComponentProps<typeof DropdownMenu>) => {
+  const [value, setValue] = useState<'dark' | 'light' | 'system'>('light');
+  return (
+    <DropdownMenu {...props}>
+      <DropdownMenu.Trigger asChild>
+        <Button>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
+          <DropdownMenu.RadioItem value="dark">Dark</DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem value="system" disabled>
+            System
+            <DropdownMenu.ItemDescription>disabled</DropdownMenu.ItemDescription>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+
+        <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
+          <DropdownMenu.RadioItem indicatorAlign="end" value="dark">
+            Dark
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem indicatorAlign="end" value="light">
+            Light
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem indicatorAlign="end" value="system" disabled>
+            System
+            <DropdownMenu.ItemDescription>disabled</DropdownMenu.ItemDescription>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+
+        <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
+          <DropdownMenu.RadioItem indicatorAlign="end" indicator="check" value="dark">
+            Dark
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem indicatorAlign="end" indicator="check" value="light">
+            Light
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem indicatorAlign="end" indicator="check" value="system" disabled>
+            System
+            <DropdownMenu.ItemDescription>disabled</DropdownMenu.ItemDescription>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+
+        <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
+          <DropdownMenu.RadioItem isLoading value="dark">
+            Dark
+            <DropdownMenu.ItemDescription>loading</DropdownMenu.ItemDescription>
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem indicatorAlign="end" indicator="check" isLoading value="system">
+            System
+            <DropdownMenu.ItemDescription>loading · end-aligned</DropdownMenu.ItemDescription>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+export const RadioGroup: Story = {
+  render: RadioGroupDemo,
+};
+
+const CheckboxesDemo = (props: ComponentProps<typeof DropdownMenu>) => {
+  const [isAChecked, setIsAChecked] = useState(false);
+  const [isBChecked, setIsBChecked] = useState(false);
+
+  return (
+    <DropdownMenu {...props} defaultOpen>
+      <DropdownMenu.Trigger asChild>
+        <Button>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>Checkbox Indicator</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem checked={isAChecked} onCheckedChange={setIsAChecked}>
+          Option A
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem checked={isBChecked} onCheckedChange={setIsBChecked}>
+          Option B
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem disabled>
+          Option C<DropdownMenu.ItemDescription>disabled</DropdownMenu.ItemDescription>
+        </DropdownMenu.CheckboxItem>
+
+        <DropdownMenu.Label>Switch Indicator</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem
+          indicator="switch"
+          checked={isAChecked}
+          onCheckedChange={setIsAChecked}
+        >
+          Option A
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
+          indicator="switch"
+          checked={isBChecked}
+          onCheckedChange={setIsBChecked}
+        >
+          Option B
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem indicator="switch" disabled>
+          Option C<DropdownMenu.ItemDescription>disabled</DropdownMenu.ItemDescription>
+        </DropdownMenu.CheckboxItem>
+
+        <DropdownMenu.Label>Check Indicator</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem
+          indicator="check"
+          indicatorAlign="end"
+          checked={isAChecked}
+          onCheckedChange={setIsAChecked}
+        >
+          Option A
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
+          indicator="check"
+          indicatorAlign="end"
+          checked={isBChecked}
+          onCheckedChange={setIsBChecked}
+        >
+          Option B
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem indicator="check" indicatorAlign="end" disabled>
+          Option C<DropdownMenu.ItemDescription>disabled</DropdownMenu.ItemDescription>
+        </DropdownMenu.CheckboxItem>
+
+        <DropdownMenu.Label>Loading</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem isLoading checked={isAChecked}>
+          Option A<DropdownMenu.ItemDescription>checkbox · loading</DropdownMenu.ItemDescription>
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem indicator="switch" isLoading checked={isBChecked}>
+          Option B<DropdownMenu.ItemDescription>switch · loading</DropdownMenu.ItemDescription>
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem indicator="check" indicatorAlign="end" isLoading checked>
+          Option C<DropdownMenu.ItemDescription>check · loading · end</DropdownMenu.ItemDescription>
+        </DropdownMenu.CheckboxItem>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+export const Checkboxes: Story = {
+  render: CheckboxesDemo,
+};
+
+export const ItemDescriptions: Story = {
+  render: (props) => (
+    <DropdownMenu {...props} defaultOpen>
+      <DropdownMenu.Trigger asChild>
+        <Button>Open Dropdown Menu</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content className="tw-w-72">
+        <DropdownMenu.Group>
+          <DropdownMenu.Item>
+            Basic
+            <DropdownMenu.ItemDescription>Description</DropdownMenu.ItemDescription>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Hide on Hover
+            <DropdownMenu.ItemDescription hideOnHover>Description</DropdownMenu.ItemDescription>
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import type { ComponentProps } from 'react';
+import { Group, Root } from '@radix-ui/react-dropdown-menu';
+
+import { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem';
+import { DropdownMenuContent } from './DropdownMenuContent';
+import type { DropdownMenuVariant } from './DropdownMenuContext';
+import { DropdownMenuContext } from './DropdownMenuContext';
+import { DropdownMenuItem } from './DropdownMenuItem';
+import { DropdownMenuItemDescription } from './DropdownMenuItemDescription';
+import { DropdownMenuLabel } from './DropdownMenuLabel';
+import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from './DropdownMenuRadioGroup';
+import { DropdownMenuSeparator } from './DropdownMenuSeparator';
+import { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from './DropdownMenuSub';
+import { DropdownMenuTrigger } from './DropdownMenuTrigger';
+
+type Props = ComponentProps<typeof Root> & {
+  variant?: DropdownMenuVariant;
+};
+
+export const DropdownMenu = ({
+  // change a default value to false, for modal property, as it is not used in most cases
+  modal = false,
+  variant = 'default',
+  ...props
+}: Props) => {
+  const contextValue = useMemo(() => ({ variant }), [variant]);
+
+  return (
+    <DropdownMenuContext value={contextValue}>
+      <Root {...props} modal={modal} />
+    </DropdownMenuContext>
+  );
+};
+
+/**
+ * Main Layout
+ */
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Group = Group;
+
+/**
+ * Sub Layout
+ */
+DropdownMenu.Sub = DropdownMenuSub;
+DropdownMenu.SubContent = DropdownMenuSubContent;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+
+/**
+ * Items can be used either Sub ar Main Layout
+ */
+DropdownMenu.Separator = DropdownMenuSeparator;
+DropdownMenu.Label = DropdownMenuLabel;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.CheckboxItem = DropdownMenuCheckboxItem;
+DropdownMenu.RadioGroup = DropdownMenuRadioGroup;
+DropdownMenu.RadioItem = DropdownMenuRadioItem;
+
+// item content
+DropdownMenu.ItemDescription = DropdownMenuItemDescription;