@koobiq/react-components 0.0.1-beta.25 → 0.0.1-beta.26

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,2 @@
+import type { CalendarComponentProp } from './types';
+export declare const Calendar: CalendarComponentProp;

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mergeProps, clsx } from "@koobiq/react-core";
+import { useLocale, useCalendarState, createCalendar, useCalendar } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Calendar.module.css.js";
+import { CalendarHeader } from "./components/CalendarHeader/CalendarHeader.js";
+import { CalendarGrid } from "./components/CalendarGrid/CalendarGrid.js";
+const textNormal = utilClasses.typography["text-normal"];
+function CalendarRender(props, ref) {
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    createCalendar,
+    ...props,
+    locale
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    props,
+    state
+  );
+  const rootProps = mergeProps(
+    { className: clsx(s.base, textNormal, props.className), ref },
+    calendarProps
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    /* @__PURE__ */ jsx(
+      CalendarHeader,
+      {
+        state,
+        prevButtonProps,
+        nextButtonProps
+      }
+    ),
+    /* @__PURE__ */ jsx(CalendarGrid, { state })
+  ] });
+}
+const Calendar = forwardRef(CalendarRender);
+export {
+  Calendar
+};

package/dist/components/Calendar/Calendar.module.css.js

@@ -0,0 +1,14 @@
+const base = "kbq-calendar-fa3168";
+const open = "kbq-calendar-open-e506bb";
+const popover = "kbq-calendar-popover-a1d3d6";
+const s = {
+  base,
+  open,
+  popover
+};
+export {
+  base,
+  s as default,
+  open,
+  popover
+};

package/dist/components/Calendar/components/CalendarCell/CalendarCell.d.ts

@@ -0,0 +1,7 @@
+import type { CalendarState, AriaCalendarCellProps } from '@koobiq/react-primitives';
+type CalendarCellProps = {
+    state: CalendarState;
+    date: AriaCalendarCellProps['date'];
+};
+export declare function CalendarCell({ state, date }: CalendarCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarCell/CalendarCell.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHover, useFocusRing, clsx, mergeProps } from "@koobiq/react-core";
+import { today, useCalendarCell } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./CalendarCell.module.css.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+function CalendarCell({ state, date }) {
+  const ref = useRef(null);
+  const isToday = date.compare(today(state.timeZone)) === 0;
+  const {
+    cellProps,
+    isSelected,
+    isDisabled,
+    isPressed,
+    buttonProps,
+    isUnavailable,
+    formattedDate,
+    isOutsideVisibleRange
+  } = useCalendarCell({ date }, state, ref);
+  const { hoverProps, isHovered } = useHover({
+    isDisabled: isDisabled || isUnavailable
+  });
+  const { focusProps, isFocusVisible } = useFocusRing({});
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeProps(hoverProps, focusProps, buttonProps),
+      ref,
+      className: clsx(
+        s.base,
+        isToday && s.today,
+        isPressed && s.pressed,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        isSelected && s.selected,
+        isUnavailable && s.unavailable,
+        isSelected && textNormalMedium,
+        isFocusVisible && s.focusVisible
+      ),
+      hidden: isOutsideVisibleRange,
+      children: formattedDate
+    }
+  ) });
+}
+export {
+  CalendarCell
+};

package/dist/components/Calendar/components/CalendarCell/CalendarCell.module.css.js

@@ -0,0 +1,29 @@
+const base = "kbq-calendarcell-dc4d6e";
+const today = "kbq-calendarcell-today-04de99";
+const hovered = "kbq-calendarcell-hovered-c94a4e";
+const pressed = "kbq-calendarcell-pressed-a65ee0";
+const focusVisible = "kbq-calendarcell-focusVisible-d92d99";
+const selected = "kbq-calendarcell-selected-62a719";
+const disabled = "kbq-calendarcell-disabled-a2a975";
+const unavailable = "kbq-calendarcell-unavailable-a606f4";
+const s = {
+  base,
+  today,
+  hovered,
+  pressed,
+  focusVisible,
+  selected,
+  disabled,
+  unavailable
+};
+export {
+  base,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  pressed,
+  selected,
+  today,
+  unavailable
+};

package/dist/components/Calendar/components/CalendarCell/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarCell';

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.d.ts

@@ -0,0 +1,6 @@
+import { type AriaCalendarGridProps, type CalendarState } from '@koobiq/react-primitives';
+type CalendarGridProps = {
+    state: CalendarState;
+} & AriaCalendarGridProps;
+export declare function CalendarGrid({ state, ...props }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { useLocale, useCalendarGrid, getWeeksInMonth } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./CalendarGrid.module.css.js";
+import { CalendarCell } from "../CalendarCell/CalendarCell.js";
+const textNormal = utilClasses.typography["text-normal"];
+function CalendarGrid({ state, ...props }) {
+  const { locale } = useLocale();
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    { ...props, weekdayStyle: "short" },
+    state
+  );
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+  return /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, textNormal), children: [
+    /* @__PURE__ */ jsxs("thead", { ...headerProps, children: [
+      /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, i) => /* @__PURE__ */ jsx("th", { className: clsx(s.weekDay, textNormal), children: day }, i)) }),
+      /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 7, className: s.divider }) })
+    ] }),
+    /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+    ) }, weekIndex)) })
+  ] });
+}
+export {
+  CalendarGrid
+};

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.module.css.js

@@ -0,0 +1,14 @@
+const base = "kbq-calendargrid-1a43cf";
+const weekDay = "kbq-calendargrid-weekDay-94b083";
+const divider = "kbq-calendargrid-divider-3ec061";
+const s = {
+  base,
+  weekDay,
+  divider
+};
+export {
+  base,
+  s as default,
+  divider,
+  weekDay
+};

package/dist/components/Calendar/components/CalendarGrid/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarGrid';

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.d.ts

@@ -0,0 +1,8 @@
+import { type CalendarState, type CalendarAria } from '@koobiq/react-primitives';
+type CalendarHeaderProps = {
+    prevButtonProps: CalendarAria['prevButtonProps'];
+    nextButtonProps: CalendarAria['nextButtonProps'];
+    state: CalendarState;
+};
+export declare const CalendarHeader: (props: CalendarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconChevronLeft16, IconCircleXs16, IconChevronRight16 } from "@koobiq/react-icons";
+import { useLocalizedStringFormatter, today } from "@koobiq/react-primitives";
+import intlMessages from "../../intl.json.js";
+import s from "./CalendarHeader.module.css.js";
+import { CalendarMonthDropdown } from "../CalendarMonthDropdown/CalendarMonthDropdown.js";
+import { CalendarYearDropdown } from "../CalendarYearDropdown/CalendarYearDropdown.js";
+import { Button } from "../../../Button/Button.js";
+const CalendarHeader = (props) => {
+  const { prevButtonProps, nextButtonProps, state } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
+    /* @__PURE__ */ jsx(CalendarMonthDropdown, { state }),
+    /* @__PURE__ */ jsx(CalendarYearDropdown, { state }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...prevButtonProps,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconChevronLeft16, {}),
+          onlyIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": stringFormatter.format("today"),
+          onPress: () => {
+            const date = today(state.timeZone);
+            state.setFocusedDate(date);
+          },
+          isDisabled: state.isDisabled,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconCircleXs16, {}),
+          onlyIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...nextButtonProps,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconChevronRight16, {}),
+          onlyIcon: true
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  CalendarHeader
+};

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-calendarheader-562d41";
+const actions = "kbq-calendarheader-actions-4e94a2";
+const s = {
+  base,
+  actions
+};
+export {
+  actions,
+  base,
+  s as default
+};

package/dist/components/Calendar/components/CalendarHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarHeader';

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarState } from '@koobiq/react-primitives';
+type CalendarMonthDropdownProps = {
+    state: CalendarState;
+};
+export declare function CalendarMonthDropdown({ state }: CalendarMonthDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useBoolean, clsx } from "@koobiq/react-core";
+import { IconChevronDown16 } from "@koobiq/react-icons";
+import { useDateFormatter } from "@koobiq/react-primitives";
+import s from "../../Calendar.module.css.js";
+import { Menu } from "../../../Menu/Menu.js";
+import { capitalizeFirstLetter } from "../../../../utils/capitalizeFirstLetter/capitalizeFirstLetter.js";
+import { Button } from "../../../Button/Button.js";
+function CalendarMonthDropdown({ state }) {
+  const months = [];
+  const disabledKeys = /* @__PURE__ */ new Set();
+  const [isOpen, { on, off }] = useBoolean();
+  const longFormatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone
+  });
+  const shortFormatter = useDateFormatter({
+    month: "short",
+    timeZone: state.timeZone
+  });
+  const selectedMonthName = shortFormatter.format(
+    state.focusedDate.toDate(state.timeZone)
+  );
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!menuRef.current || !state.focusedDate.month) return;
+    const container = menuRef.current;
+    const selectedEl = container.querySelector(
+      `[data-key="${state.focusedDate.month}"]`
+    );
+    if (selectedEl instanceof HTMLElement) {
+      const containerHeight = container.offsetHeight;
+      const elementTop = selectedEl.offsetTop;
+      const elementHeight = selectedEl.offsetHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    }
+  }, [state.focusedDate.month, isOpen]);
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(
+    state.focusedDate
+  );
+  const minDate = state.minValue;
+  const maxDate = state.maxValue;
+  for (let i = 1; i <= numMonths; i++) {
+    const date = state.focusedDate.set({ month: i });
+    const isBeforeMin = minDate && date.compare(minDate) < 0;
+    const isAfterMax = maxDate && date.compare(maxDate) > 0;
+    if (isBeforeMin || isAfterMax) {
+      disabledKeys.add(i);
+    }
+    months.push({
+      id: i,
+      name: longFormatter.format(date.toDate(state.timeZone))
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      control: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          className: clsx(isOpen && s.open),
+          variant: "contrast-transparent",
+          isDisabled: state.isDisabled,
+          endIcon: /* @__PURE__ */ jsx(IconChevronDown16, {}),
+          children: capitalizeFirstLetter(selectedMonthName).replace(/\.$/, "")
+        }
+      ),
+      className: s.popover,
+      slotProps: {
+        list: {
+          ref: menuRef
+        },
+        popover: {
+          maxBlockSize: 265,
+          slotProps: {
+            transition: {
+              onEnter: on,
+              onExited: off
+            }
+          }
+        }
+      },
+      items: months,
+      disabledKeys,
+      selectionMode: "single",
+      selectedKeys: /* @__PURE__ */ new Set([state.focusedDate.month]),
+      onSelectionChange: (keys) => {
+        const value = Array.from(keys)[0];
+        const date = state.focusedDate.set({ month: +value });
+        state.setFocusedDate(date);
+      },
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { children: capitalizeFirstLetter(item.name) })
+    }
+  );
+}
+export {
+  CalendarMonthDropdown
+};

package/dist/components/Calendar/components/CalendarMonthDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarMonthDropdown';

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarState } from '@koobiq/react-primitives';
+type CalendarYearDropdownProps = {
+    state: CalendarState;
+};
+export declare function CalendarYearDropdown({ state }: CalendarYearDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useBoolean, clsx } from "@koobiq/react-core";
+import { IconChevronDown16 } from "@koobiq/react-icons";
+import "@koobiq/react-primitives";
+import s from "../../Calendar.module.css.js";
+import { Menu } from "../../../Menu/Menu.js";
+import { Button } from "../../../Button/Button.js";
+function CalendarYearDropdown({ state }) {
+  const years = [];
+  const [isOpen, { on, off }] = useBoolean();
+  const menuRef = useRef(null);
+  const minYear = state.minValue?.year ?? state.focusedDate.year - 20;
+  const maxYear = state.maxValue?.year ?? state.focusedDate.year + 20;
+  for (let y = minYear; y <= maxYear; y++) {
+    years.push({ id: y });
+  }
+  useEffect(() => {
+    if (!menuRef.current || !state.focusedDate.year) return;
+    const container = menuRef.current;
+    const selectedEl = container.querySelector(
+      `[data-key="${state.focusedDate.year}"]`
+    );
+    if (selectedEl instanceof HTMLElement) {
+      const containerHeight = container.offsetHeight;
+      const elementTop = selectedEl.offsetTop;
+      const elementHeight = selectedEl.offsetHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    }
+  }, [state.focusedDate.year, isOpen]);
+  const selectedYearName = years.find(({ id }) => id === state.focusedDate.year)?.id ?? "";
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      slotProps: {
+        list: {
+          ref: menuRef
+        },
+        popover: {
+          maxBlockSize: 265,
+          slotProps: {
+            transition: {
+              onEnter: on,
+              onExited: off
+            }
+          }
+        }
+      },
+      control: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          className: clsx(isOpen && s.open),
+          variant: "contrast-transparent",
+          endIcon: /* @__PURE__ */ jsx(IconChevronDown16, {}),
+          isDisabled: state.isDisabled,
+          children: selectedYearName
+        }
+      ),
+      className: s.popover,
+      items: years,
+      selectionMode: "single",
+      selectedKeys: /* @__PURE__ */ new Set([state.focusedDate.year]),
+      onSelectionChange: (keys) => {
+        const value = Array.from(keys)[0];
+        const date = state.focusedDate.set({ year: +value });
+        state.setFocusedDate(date);
+      },
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { textValue: String(item.id), children: item.id })
+    }
+  );
+}
+export {
+  CalendarYearDropdown
+};

package/dist/components/Calendar/components/CalendarYearDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarYearDropdown';

package/dist/components/Calendar/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CalendarGrid';
+export * from './CalendarHeader';

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Calendar';
+export * from './types';

package/dist/components/Calendar/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "today": "Сегодня" },
+  "en-US": { "today": "Today" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/Calendar/types.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentRef, ReactElement, Ref } from 'react';
+import type { AriaCalendarProps, DateValue } from '@koobiq/react-primitives';
+type CalendarPropMinValue<T extends DateValue> = AriaCalendarProps<T>['minValue'];
+type CalendarPropMaxValue<T extends DateValue> = AriaCalendarProps<T>['maxValue'];
+type CalendarPropValue<T extends DateValue> = AriaCalendarProps<T>['value'];
+type CalendarPropDefaultValue<T extends DateValue> = AriaCalendarProps<T>['defaultValue'];
+type CalendarPropOnChange<T extends DateValue> = AriaCalendarProps<T>['onChange'];
+type CalendarPropIsDisabled<T extends DateValue> = AriaCalendarProps<T>['isDisabled'];
+type CalendarPropFirstDayOfWeek<T extends DateValue> = AriaCalendarProps<T>['firstDayOfWeek'];
+type CalendarPropIsDateUnavailable<T extends DateValue> = AriaCalendarProps<T>['isDateUnavailable'];
+type CalendarPropFocusedValue<T extends DateValue> = AriaCalendarProps<T>['focusedValue'];
+type CalendarPropDefaultFocusedValue<T extends DateValue> = AriaCalendarProps<T>['defaultFocusedValue'];
+type CalendarPropOnFocusChange<T extends DateValue> = AriaCalendarProps<T>['onFocusChange'];
+export type CalendarProps<T extends DateValue> = {
+    /** Ref to the root container. */
+    ref?: Ref<HTMLDivElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The minimum allowed date that a user may select. */
+    minValue?: CalendarPropMinValue<T>;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: CalendarPropMaxValue<T>;
+    /** The current value (controlled). */
+    value?: CalendarPropValue<T>;
+    /** The default value (uncontrolled). */
+    defaultValue?: CalendarPropDefaultValue<T>;
+    /** Handler that is called when the value changes. */
+    onChange?: CalendarPropOnChange<T>;
+    /**
+     * Whether the calendar is disabled.
+     * @default false
+     */
+    isDisabled?: CalendarPropIsDisabled<T>;
+    /**
+     * The day that starts the week.
+     */
+    firstDayOfWeek?: CalendarPropFirstDayOfWeek<T>;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: CalendarPropIsDateUnavailable<T>;
+    /** Controls the currently focused date within the calendar. */
+    focusedValue?: CalendarPropFocusedValue<T>;
+    /** The date that is focused when the calendar first mounts (uncountrolled). */
+    defaultFocusedValue?: CalendarPropDefaultFocusedValue<T>;
+    /** Handler that is called when the focused date changes. */
+    onFocusChange?: CalendarPropOnFocusChange<T>;
+};
+export type CalendarComponentProp = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
+export type CalendarRef = ComponentRef<'div'>;
+export {};

package/dist/components/Menu/Menu.js

@@ -21,7 +21,7 @@ function MenuRender(props, ref) {
     anchorRef,
     className,
     slotProps,
-    ...otherProps
+    ...other
   } = props;
   const state = useMenuTriggerState({ ...props, isOpen: open });
   const domRef = useDOMRef(ref);
@@ -45,12 +45,13 @@ function MenuRender(props, ref) {
     },
     slotProps?.popover
   );
+  const listProps = mergeProps(menuProps, other, slotProps?.list);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
       ref: controlRef,
       ...menuTriggerProps
     }),
-    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...otherProps, ...menuProps }) })
+    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...listProps }) })
   ] });
 }
 const MenuComponent = forwardRef(MenuRender);

package/dist/components/Menu/components/MenuInner/MenuInner.d.ts

@@ -1,3 +1,6 @@
+import type { ComponentRef, ReactElement } from 'react';
 import type { AriaMenuOptions } from '@koobiq/react-primitives';
 export type MenuInnerProps<T> = AriaMenuOptions<T>;
-export declare function MenuInner<T extends object>(props: MenuInnerProps<T>): import("react/jsx-runtime").JSX.Element;
+export type MenuInnerComponentProp = <T extends object>(props: MenuInnerProps<T>) => ReactElement | null;
+export type MenuInnerRef = ComponentRef<'ul'>;
+export declare const MenuInner: MenuInnerComponentProp;

package/dist/components/Menu/components/MenuInner/MenuInner.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
-import { clsx } from "@koobiq/react-core";
+import { forwardRef } from "react";
+import { useDOMRef, clsx } from "@koobiq/react-core";
 import { useTreeState, useMenu } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
 import s from "./MenuInner.module.css.js";
@@ -10,10 +10,10 @@ import { Divider } from "../../../Divider/Divider.js";
 import { MenuHeader } from "../MenuHeader/MenuHeader.js";
 import { MenuItem } from "../MenuItem/MenuItem.js";
 const { list } = utilClasses;
-function MenuInner(props) {
+function MenuInnerRender(props, ref) {
   const state = useTreeState(props);
-  const ref = useRef(null);
-  const { menuProps } = useMenu(props, state, ref);
+  const domRef = useDOMRef(ref);
+  const { menuProps } = useMenu(props, state, domRef);
   const multiple = props.selectionMode === "multiple";
   const renderItems = (treeState) => [...treeState.collection].map((item) => {
     switch (item.type) {
@@ -35,11 +35,12 @@ function MenuInner(props) {
       ...menuProps,
       className: clsx(s.base, list),
       ...multiple && { "aria-multiselectable": true },
-      ref,
+      ref: domRef,
       children: renderItems(state)
     }
   );
 }
+const MenuInner = forwardRef(MenuInnerRender);
 export {
   MenuInner
 };

package/dist/components/Menu/types.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
 import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
-import type { PopoverInnerProps, PopoverPropPlacement } from '../Popover';
+import type { PopoverBaseProps, PopoverPropPlacement } from '../Popover';
 export type MenuPropControl = (props: ButtonOptions & {
     ref?: Ref<HTMLButtonElement>;
 }) => ReactElement;
@@ -55,7 +55,8 @@ export type MenuProps<T extends object> = {
     ref?: Ref<HTMLDivElement>;
     /** The props used for each slot inside. */
     slotProps?: {
-        popover?: PopoverInnerProps;
+        popover?: PopoverBaseProps;
+        list?: ComponentPropsWithRef<'ul'>;
     };
 };
 export type MenuComponentProps = <T extends object>(props: MenuProps<T>) => ReactElement | null;