@keboola/design 2.0.1 → 3.0.0

package/src/components/DiffView/util.ts

@@ -1,311 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,310 +0,0 @@
-import { type ComponentProps, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Settings } from '@keboola/design/icons';
-
-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={<Settings className="tw-size-4" />}>
-          Default - Icon
-        </DropdownMenu.Item>
-        <DropdownMenu.Item disabled>Default - Disabled</DropdownMenu.Item>
-        <DropdownMenu.Item disabled icon={<Settings className="tw-size-4" />}>
-          Default - Icon- Disabled
-        </DropdownMenu.Item>
-        <DropdownMenu.Item isLoading>Default - Loading</DropdownMenu.Item>
-        <DropdownMenu.Item isLoading icon={<Settings className="tw-size-4" />}>
-          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={<Settings className="tw-size-4" />}>
-          {/* 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

@@ -1,61 +0,0 @@
-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;