@cognite/aura 0.3.0 → 0.3.2

package/dist/components/ui/core/date-time-pickers/index.js

@@ -0,0 +1,10 @@
+import { DatePicker as o } from "./date-picker/date-picker.js";
+import { DateRangePicker as i } from "./date-range-picker/date-range-picker.js";
+import { DateTimeRangePicker as a } from "./date-time-range-picker/date-time-range-picker.js";
+import { TimePicker as f } from "./time-picker/time-picker.js";
+export {
+  o as DatePicker,
+  i as DateRangePicker,
+  a as DateTimeRangePicker,
+  f as TimePicker
+};

package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.js

@@ -1,10 +1,10 @@
 import { jsxs as x, jsx as l } from "react/jsx-runtime";
 import C from "react";
 import { cn as b } from "../../../../../../lib/utils.js";
-import { getCalendarDays as _, getWeekdayNames as E, getWeekNumbers as O, isDateInRange as v, isSameDay as f, isToday as T, isOutsideMonth as B } from "../../utils/calendar-utils.js";
-import { CalendarHeader as K } from "../calendar-header/calendar-header.js";
+import { getCalendarDays as E, getWeekdayNames as O, getWeekNumbers as T, isDateInRange as v, isSameDay as f, isToday as B, isOutsideMonth as K } from "../../utils/calendar-utils.js";
+import { CalendarHeader as P } from "../calendar-header/calendar-header.js";
 import { DAYS_IN_WEEK as p } from "../constants.js";
-function P({
+function _({
   isOutsideMonth: r,
   isSelected: t,
   isToday: s,
@@ -42,14 +42,14 @@ const W = ({
   onDateHover: i,
   className: N
 }) => {
-  const [n, m] = t, h = _(r), M = E(), k = o ? O(h) : [], Y = () => {
+  const [n, m] = t, h = E(r), M = O(), k = o ? T(h) : [], Y = () => {
     a(r.subtract(1, "month"));
   }, D = () => {
     a(r.add(1, "month"));
   }, w = (e) => {
     const d = {
-      isOutsideMonth: B(e, r),
-      isToday: T(e),
+      isOutsideMonth: K(e, r),
+      isToday: B(e),
       isSelected: f(e, n) || f(e, m),
       isRangeStart: f(e, n),
       isRangeEnd: f(e, m),
@@ -64,7 +64,7 @@ const W = ({
   };
   return /* @__PURE__ */ x("div", { "data-slot": "calendar", className: b("flex flex-col gap-4", N), children: [
     /* @__PURE__ */ l(
-      K,
+      P,
       {
         displayedMonth: r,
         onPrevMonth: Y,
@@ -96,7 +96,7 @@ const W = ({
               /* @__PURE__ */ l(
                 "div",
                 {
-                  className: P(u),
+                  className: _(u),
                   onClick: () => c(e),
                   onMouseEnter: () => i?.(e),
                   onMouseLeave: () => i?.(null),

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.d.ts

@@ -7,7 +7,7 @@ export interface DateTimeInputProps {
     value: [Dayjs | null, Dayjs | null] | Dayjs | null;
     format: string;
     placeholder?: string;
-    onClick: () => void;
+    onClick?: () => void;
     isOpen: boolean;
     className?: string;
     ariaLabel?: string;

package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js

@@ -37,11 +37,11 @@ const v = "Date picker", C = () => {
           "relative flex items-center cursor-pointer w-full group",
           i
         ),
-        onClick: n,
         role: "combobox",
         "aria-label": l,
         "aria-expanded": t,
         "aria-controls": c,
+        onClick: n,
         children: [
           /* @__PURE__ */ r(
             R,

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.d.ts

@@ -1,5 +1,4 @@
 export interface UsePopoverStateOptions {
-    onClose?: () => void;
     onBackspace?: () => void;
 }
 export interface UsePopoverStateReturn {
@@ -7,6 +6,5 @@ export interface UsePopoverStateReturn {
     setIsOpen: (isOpen: boolean) => void;
     popoverRef: React.RefObject<HTMLDivElement>;
     inputRef: React.RefObject<HTMLDivElement>;
-    handleTogglePopover: () => void;
 }
 export declare const usePopoverState: (options?: UsePopoverStateOptions) => UsePopoverStateReturn;

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js

@@ -1,40 +1,24 @@
-import { useState as I, useRef as f, useCallback as L, useEffect as T } from "react";
-const g = (p = {}) => {
-  const { onClose: s, onBackspace: c } = p, [a, n] = I(!1), i = f(null), r = f(null), m = L(() => {
-    n((o) => !o);
-  }, []);
-  return T(() => {
-    if (!a) return;
-    const o = (t) => {
-      const e = t.target;
-      if (!(e instanceof Node)) return;
-      const l = i.current?.contains(e) ?? !1, k = r.current?.contains(e) ?? !1, v = t.composedPath().some(
-        (d) => d instanceof HTMLElement && d.hasAttribute("data-picker-overlay")
-      );
-      !l && !k && !v && (n(!1), s?.());
-    }, u = (t) => {
-      if (t.key === "Escape") {
-        n(!1), s?.();
-        return;
+import { useState as f, useRef as c, useEffect as p } from "react";
+const m = (r = {}) => {
+  const { onBackspace: t } = r, [n, a] = f(!1), u = c(null), i = c(null);
+  return p(() => {
+    if (!n) return;
+    const s = (o) => {
+      if (o.key === "Backspace" && t) {
+        const { target: e } = o;
+        e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable || (o.preventDefault(), t());
       }
-      if (t.key === "Backspace" && c) {
-        const { target: e } = t;
-        e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable || (t.preventDefault(), c());
-      }
-    }, E = setTimeout(() => {
-      document.addEventListener("mousedown", o);
-    }, 0);
-    return document.addEventListener("keydown", u), () => {
-      clearTimeout(E), document.removeEventListener("mousedown", o), document.removeEventListener("keydown", u);
     };
-  }, [a, s, c]), {
-    isOpen: a,
-    setIsOpen: n,
-    popoverRef: i,
-    inputRef: r,
-    handleTogglePopover: m
+    return document.addEventListener("keydown", s), () => {
+      document.removeEventListener("keydown", s);
+    };
+  }, [n, t]), {
+    isOpen: n,
+    setIsOpen: a,
+    popoverRef: u,
+    inputRef: i
   };
 };
 export {
-  g as usePopoverState
+  m as usePopoverState
 };

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.d.ts

@@ -0,0 +1,23 @@
+import { Dayjs } from 'dayjs';
+export interface UseSingleDateStateOptions {
+    value: Dayjs | null;
+    defaultDate: Dayjs;
+    /** Transforms a clicked date before storing; pass time-of-day defaults for datetime variants. */
+    mapDate?: (date: Dayjs) => Dayjs;
+    /** Called when a date is selected; used for auto-apply in date-only variants. */
+    onDateSelected?: (date: Dayjs) => void;
+}
+export interface UseSingleDateStateReturn {
+    tempDate: Dayjs | null;
+    displayedMonth: Dayjs;
+    /** Synchronous ref — use inside callbacks to avoid stale closures. */
+    stateRef: React.MutableRefObject<{
+        tempDate: Dayjs | null;
+    }>;
+    handleDateClick: (date: Dayjs) => void;
+    handleMonthChange: (month: Dayjs) => void;
+    /** Returns true when a date was cleared, false when already empty. */
+    clearDate: () => boolean;
+    resetDate: (value: Dayjs | null) => void;
+}
+export declare const useSingleDateState: ({ value, defaultDate, mapDate, onDateSelected, }: UseSingleDateStateOptions) => UseSingleDateStateReturn;

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.js

@@ -0,0 +1,32 @@
+import { useState as l, useRef as i } from "react";
+const g = ({
+  value: e,
+  defaultDate: a,
+  mapDate: r,
+  onDateSelected: D
+}) => {
+  const [p, h] = l(e), [u, o] = l(
+    () => e ?? a
+  ), n = i({ tempDate: e }), s = (t) => {
+    n.current.tempDate = t, h(t);
+  };
+  return {
+    tempDate: p,
+    displayedMonth: u,
+    stateRef: n,
+    handleDateClick: (t) => {
+      const c = r ? r(t) : t;
+      s(c), D?.(c);
+    },
+    handleMonthChange: (t) => {
+      o(t);
+    },
+    clearDate: () => n.current.tempDate === null ? !1 : (s(null), !0),
+    resetDate: (t) => {
+      s(t), o(t ?? a);
+    }
+  };
+};
+export {
+  g as useSingleDateState
+};

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePickerPanel } from './time-picker-panel';
+export type { TimePickerPanelProps } from './time-picker-panel';

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+type TimePickerPanelBaseProps = {
+    hour: number;
+    minute: number;
+    onHourChange: (hour: number) => void;
+    onMinuteChange: (minute: number) => void;
+    className?: string;
+};
+export type TimePickerPanelProps = TimePickerPanelBaseProps & ({
+    timeFormat: '12h';
+    amPm: 'AM' | 'PM';
+    onAmPmChange: (amPm: 'AM' | 'PM') => void;
+} | {
+    timeFormat?: '24h';
+    amPm?: undefined;
+    onAmPmChange?: undefined;
+});
+export declare const TimePickerPanel: FC<TimePickerPanelProps>;
+export {};

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js

@@ -0,0 +1,41 @@
+import { jsxs as r, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { cn as h } from "../../../../../../lib/utils.js";
+import { AmPmScroll as d } from "../am-pm-scroll/am-pm-scroll.js";
+import { TimePickerScroll as a } from "../time-picker-scroll/time-picker-scroll.js";
+const f = (m) => {
+  const { hour: t, minute: i, onHourChange: n, onMinuteChange: l, className: o } = m, s = m.timeFormat ?? "24h";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "time-picker-panel",
+      className: h("flex items-stretch", o),
+      children: [
+        /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
+          a,
+          {
+            value: t,
+            onChange: n,
+            type: "hour",
+            timeFormat: s
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+        /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
+          a,
+          {
+            value: i,
+            onChange: l,
+            type: "minute"
+          }
+        ) }),
+        m.timeFormat === "12h" && /* @__PURE__ */ r(c, { children: [
+          /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(d, { value: m.amPm, onChange: m.onAmPmChange }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  f as TimePickerPanel
+};

package/dist/components/ui/core/date-time-pickers/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { TimePicker } from './time-picker';
+export type { TimePickerProps, ShortcutItem } from './time-picker';
+export type { UseTimePickerProps, UseTimePickerReturn } from './types';

package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { Dayjs } from 'dayjs';
+import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
+import { TimeFormat } from '../utils/format-utils';
+export type { ShortcutItem };
+export interface TimePickerProps {
+    value: Dayjs | null;
+    onChange: (time: Dayjs | null) => void;
+    timeFormat?: TimeFormat;
+    format?: string;
+    placeholder?: string;
+    shortcuts?: ShortcutItem[];
+    defaultDate?: Dayjs;
+    className?: string;
+}
+export declare const TimePicker: FC<TimePickerProps>;

package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js

@@ -0,0 +1,100 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { cn as T } from "../../../../../lib/utils.js";
+import { Button as b } from "../../button/button.js";
+import { Popover as w, PopoverTrigger as H, PopoverContent as M } from "../../popover/popover.js";
+import { DateTimeInput as O } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as S } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { TimePickerPanel as h } from "../shared/time-picker-panel/time-picker-panel.js";
+import { useTimePicker as j } from "./use-time-picker.js";
+const z = ({
+  value: p,
+  onChange: c,
+  timeFormat: r = "24h",
+  format: d,
+  placeholder: s,
+  shortcuts: n,
+  defaultDate: f,
+  className: u
+}) => {
+  const g = d ?? (r === "12h" ? "h:mm A" : "HH:mm"), {
+    isOpen: a,
+    hour: i,
+    minute: l,
+    amPm: v,
+    displayValue: C,
+    handleOpenChange: P,
+    handleApply: x,
+    handleHourChange: t,
+    handleMinuteChange: m,
+    handleAmPmChange: k,
+    handleApplyShortcut: N,
+    inputRef: y,
+    popoverRef: A
+  } = j({ value: p, onChange: c, timeFormat: r, defaultDate: f });
+  return /* @__PURE__ */ e("div", { "data-slot": "time-picker", className: T("relative w-full", u), children: /* @__PURE__ */ o(w, { open: a, onOpenChange: P, children: [
+    /* @__PURE__ */ e(H, { render: /* @__PURE__ */ e("div", { ref: y, className: "w-full" }), children: /* @__PURE__ */ e(
+      O,
+      {
+        value: C,
+        format: g,
+        placeholder: s,
+        isOpen: a,
+        variant: "time",
+        ariaLabel: "Time picker"
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        ref: A,
+        className: "rounded-xl w-auto p-0",
+        side: "bottom",
+        align: "start",
+        children: /* @__PURE__ */ o("div", { "data-slot": "time-picker-content", className: "flex flex-col", children: [
+          /* @__PURE__ */ o("div", { className: "flex flex-row", children: [
+            n && n.length > 0 && /* @__PURE__ */ e(
+              S,
+              {
+                shortcuts: n,
+                onShortcutClick: N
+              }
+            ),
+            r === "12h" ? /* @__PURE__ */ e(
+              h,
+              {
+                hour: i,
+                minute: l,
+                amPm: v,
+                timeFormat: "12h",
+                onHourChange: t,
+                onMinuteChange: m,
+                onAmPmChange: k
+              }
+            ) : /* @__PURE__ */ e(
+              h,
+              {
+                hour: i,
+                minute: l,
+                timeFormat: "24h",
+                onHourChange: t,
+                onMinuteChange: m
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex p-2 border-t border-border", children: /* @__PURE__ */ e(
+            b,
+            {
+              variant: "secondary",
+              className: "w-full",
+              onClick: x,
+              children: "Apply"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] }) });
+};
+export {
+  z as TimePicker
+};

package/dist/components/ui/core/date-time-pickers/time-picker/types.d.ts

@@ -0,0 +1,23 @@
+import { Dayjs } from 'dayjs';
+import { TimeFormat } from '../utils/format-utils';
+export interface UseTimePickerProps {
+    value: Dayjs | null;
+    onChange: (time: Dayjs | null) => void;
+    timeFormat?: TimeFormat;
+    defaultDate?: Dayjs;
+}
+export interface UseTimePickerReturn {
+    isOpen: boolean;
+    hour: number;
+    minute: number;
+    amPm: 'AM' | 'PM';
+    displayValue: Dayjs | null;
+    handleOpenChange: (open: boolean) => void;
+    handleApply: () => void;
+    handleHourChange: (hour: number) => void;
+    handleMinuteChange: (minute: number) => void;
+    handleAmPmChange: (amPm: 'AM' | 'PM') => void;
+    handleApplyShortcut: (shortcutValue: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
+    inputRef: React.RefObject<HTMLDivElement>;
+    popoverRef: React.RefObject<HTMLDivElement>;
+}

package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.d.ts

@@ -0,0 +1,3 @@
+import { UseTimePickerProps, UseTimePickerReturn } from './types';
+export type { UseTimePickerProps, UseTimePickerReturn };
+export declare const useTimePicker: ({ value, onChange, timeFormat, defaultDate, }: UseTimePickerProps) => UseTimePickerReturn;

package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.js

@@ -0,0 +1,64 @@
+import { useRef as g, useCallback as B, useEffect as D } from "react";
+import H from "dayjs";
+import { DEFAULT_MINUTE as p, DEFAULT_START_HOUR as u } from "../shared/constants.js";
+import { usePopoverState as M } from "../shared/hooks/use-popover-state.js";
+import { useTimeState as _ } from "../shared/hooks/use-time-state.js";
+const z = ({
+  value: n,
+  onChange: t,
+  timeFormat: h = "24h",
+  defaultDate: d = H()
+}) => {
+  const s = g(() => {
+  }), { isOpen: r, setIsOpen: o, popoverRef: f, inputRef: A } = M({
+    onBackspace: B(() => s.current(), [])
+  }), T = _({
+    initialHour: n?.hour() ?? u,
+    initialMinute: n?.minute() ?? p,
+    timeFormat: h
+  }), {
+    hour: y,
+    minute: c,
+    amPm: O,
+    hour24: R,
+    handleHourChange: S,
+    handleMinuteChange: k,
+    handleAmPmChange: C,
+    resetTime: E
+  } = T, i = n ?? d, l = (e) => e.hour(R).minute(c).second(0).millisecond(0), P = (e) => i.hour(e.hour()).minute(e.minute()).second(0).millisecond(0), U = r ? l(i) : n, a = () => {
+    E(
+      n?.hour() ?? u,
+      n?.minute() ?? p
+    );
+  }, b = () => {
+    n !== null && (t(null), a());
+  };
+  return D(() => {
+    s.current = b;
+  }), {
+    isOpen: r,
+    hour: y,
+    minute: c,
+    amPm: O,
+    displayValue: U,
+    handleOpenChange: (e) => {
+      a(), o(e);
+    },
+    handleApply: () => {
+      const e = l(i);
+      t(e), o(!1);
+    },
+    handleHourChange: S,
+    handleMinuteChange: k,
+    handleAmPmChange: C,
+    handleApplyShortcut: (e) => {
+      const m = Array.isArray(e) ? e[0] : e;
+      t(m ? P(m) : null), o(!1);
+    },
+    inputRef: A,
+    popoverRef: f
+  };
+};
+export {
+  z as useTimePicker
+};

package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.js

@@ -1,7 +1,7 @@
 import r from "dayjs";
-import c from "dayjs/plugin/isBetween";
-import d from "dayjs/plugin/isSameOrBefore";
-import m from "dayjs/plugin/weekOfYear";
+import c from "dayjs/plugin/isBetween.js";
+import d from "dayjs/plugin/isSameOrBefore.js";
+import m from "dayjs/plugin/weekOfYear.js";
 import { DAYS_IN_WEEK as u } from "../shared/constants.js";
 r.extend(c);
 r.extend(d);

package/dist/components/ui/core/date-time-pickers/utils/time-utils.js

@@ -1,5 +1,5 @@
 import m from "dayjs";
-import u from "dayjs/plugin/customParseFormat";
+import u from "dayjs/plugin/customParseFormat.js";
 import { HOURS_IN_12H as t, HOURS_IN_DAY as f, MINUTES_IN_HOUR as s, MINUTE_INCREMENT as o } from "../shared/constants.js";
 m.extend(u);
 const c = (r = "24h") => r === "12h" ? Array.from({ length: t }, (e, n) => n + 1) : Array.from({ length: f }, (e, n) => n), M = () => Array.from(

package/dist/components/ui/core/dropdown-menu/dropdown-menu.d.ts

@@ -1,6 +1,5 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
-import { SeparatorProps } from '@base-ui/react';
-import { MenuCheckboxItemProps, MenuGroupLabelProps, MenuItemProps, MenuRadioItemProps, MenuSubmenuTriggerProps, Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { ComponentProps, ComponentRef, ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): ReactNode;
 declare function DropdownMenuPortal({ container, ...props }: MenuPrimitive.Portal.Props): ReactNode;
 declare function DropdownMenuTrigger({ children, ...props }: MenuPrimitive.Trigger.Props): ReactNode;
@@ -8,23 +7,26 @@ declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, cla
     container?: MenuPrimitive.Portal.Props['container'];
 }): ReactNode;
 declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): ReactNode;
-declare const DropdownMenuItem: ForwardRefExoticComponent<Omit<MenuItemProps & {
+type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
-}, 'ref'> & RefAttributes<HTMLElement>>;
-declare const DropdownMenuCheckboxItem: ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, 'ref'> & RefAttributes<HTMLElement>>;
+};
+declare const DropdownMenuItem: ForwardRefExoticComponent<Omit<DropdownMenuItemProps, 'ref'> & RefAttributes<ComponentRef<typeof MenuPrimitive.Item>>>;
+declare const DropdownMenuCheckboxItem: ForwardRefExoticComponent<Omit<MenuPrimitive.CheckboxItem.Props, 'ref'> & RefAttributes<ComponentRef<typeof MenuPrimitive.CheckboxItem>>>;
 declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): ReactNode;
-declare const DropdownMenuRadioItem: ForwardRefExoticComponent<Omit<MenuRadioItemProps, 'ref'> & RefAttributes<HTMLElement>>;
-declare const DropdownMenuLabel: ForwardRefExoticComponent<Omit<MenuGroupLabelProps & {
+declare const DropdownMenuRadioItem: ForwardRefExoticComponent<Omit<MenuPrimitive.RadioItem.Props, 'ref'> & RefAttributes<ComponentRef<typeof MenuPrimitive.RadioItem>>>;
+type DropdownMenuLabelProps = MenuPrimitive.GroupLabel.Props & {
     inset?: boolean;
-}, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuHeader: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSeparator: ForwardRefExoticComponent<Omit<SeparatorProps, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuShortcut: ForwardRefExoticComponent<ComponentProps<'span'> & RefAttributes<HTMLSpanElement>>;
+};
+declare const DropdownMenuLabel: ForwardRefExoticComponent<Omit<DropdownMenuLabelProps, 'ref'> & RefAttributes<ComponentRef<typeof MenuPrimitive.GroupLabel>>>;
+declare const DropdownMenuHeader: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: ForwardRefExoticComponent<Omit<MenuPrimitive.Separator.Props, 'ref'> & RefAttributes<ComponentRef<typeof MenuPrimitive.Separator>>>;
+declare const DropdownMenuShortcut: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, 'ref'> & RefAttributes<HTMLSpanElement>>;
 declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): ReactNode;
-declare const DropdownMenuSubTrigger: ForwardRefExoticComponent<Omit<MenuSubmenuTriggerProps & {
+type DropdownMenuSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {
     inset?: boolean;
-}, 'ref'> & RefAttributes<HTMLElement>>;
+};
+declare const DropdownMenuSubTrigger: ForwardRefExoticComponent<Omit<DropdownMenuSubTriggerProps, 'ref'> & RefAttributes<ComponentRef<typeof MenuPrimitive.SubmenuTrigger>>>;
 declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: ComponentProps<typeof DropdownMenuContent>): ReactNode;
-declare const DropdownMenuSectionLabel: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSectionLabel: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>>;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuSectionLabel, };