@okshaun/components 0.5.2 → 0.5.4

package/dist/index.d.ts

@@ -801,6 +801,50 @@ export declare type MenuItemProps = Omit<BoxProps, 'children'> & {
 
 export declare type MenuItemType = 'action' | 'single-select' | 'multi-select';
 
+export declare const MenuList: default_2.ForwardRefExoticComponent<Omit<MenuListProps, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenuListDivider: default_2.FC<MenuListDividerProps>;
+
+export declare type MenuListDividerProps = Omit<BoxProps, 'children' | keyof MenuVariantProps> & MenuVariantProps;
+
+export declare const MenuListGroup: default_2.FC<MenuListGroupProps>;
+
+export declare type MenuListGroupProps = Omit<BoxProps, 'title' | keyof MenuVariantProps> & MenuVariantProps & {
+    /** Group label */
+    label?: string;
+    /** Children (MenuListItem components) */
+    children: React.ReactNode;
+};
+
+export declare const MenuListItem: default_2.ForwardRefExoticComponent<Omit<MenuListItemProps, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare type MenuListItemProps = Omit<BoxProps, 'children' | 'onClick' | keyof MenuVariantProps> & MenuVariantProps & {
+    /** Item behavior type */
+    type?: MenuItemType;
+    /** Selected state (for single-select and multi-select) */
+    selected?: boolean;
+    /** Active highlight state (controlled externally) */
+    active?: boolean;
+    /** Click handler */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Disable the item */
+    disabled?: boolean;
+    /** Primary label (required) */
+    label: string | React.ReactNode;
+    /** Secondary description text */
+    description?: string;
+    /** Icon on the left side */
+    iconLeft?: IconNamesList;
+    /** Icon on the right side */
+    iconRight?: IconNamesList;
+    /** Text to highlight (for autocomplete/search scenarios) */
+    highlightMatch?: string;
+    /** Selection indicator style (only for select types) */
+    selectionIndicator?: SelectionIndicator;
+};
+
+export declare type MenuListProps = Omit<BoxProps, keyof MenuVariantProps> & MenuVariantProps;
+
 export declare type MenuProps = Omit<BoxProps, keyof MenuVariantProps> & MenuVariantProps & {
     /** Controlled open state (REQUIRED) */
     open: boolean;

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { forwardRef, useMemo, createElement, useEffect, useState, useRef, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore } from "react";
+import React__default, { forwardRef, useMemo, createElement, useEffect, useState, useRef, createContext, useContext, useCallback, useLayoutEffect, useId as useId$1, useSyncExternalStore } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import { b as breakpoints, c as containerSizes } from "./size.primitives-j2MFgtrT.js";
@@ -3520,7 +3520,7 @@ const Chip = ({
     after: hasAfter
   });
   const iconSize = chipSizeToIconSize[size2];
-  const handleClick = () => {
+  const handleClick = (e) => {
     if (dismissable && onDismiss) {
       onDismiss();
     } else if (isSelectable && groupContext) {
@@ -3532,7 +3532,7 @@ const Chip = ({
         groupContext.onChange(newValues);
       }
     } else if (onClick) {
-      onClick();
+      onClick(e);
     }
   };
   const handleKeyDown = (e) => {
@@ -8447,7 +8447,7 @@ const Menu = ({
     ) }) })
   ] });
 };
-const highlightText = (text2, match) => {
+const highlightText$1 = (text2, match) => {
   if (!match || typeof text2 !== "string") return text2;
   const regex = new RegExp(`(${match.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
   const parts = text2.split(regex);
@@ -8516,7 +8516,7 @@ const MenuItem = ({
     return /* @__PURE__ */ jsx(Box, { className: classes.menuItemIndicator, children: selected && /* @__PURE__ */ jsx(Icon, { name: "check", size: "20" }) });
   };
   const renderLabel = () => {
-    const labelContent = typeof label2 === "string" && highlightMatch ? highlightText(label2, highlightMatch) : label2;
+    const labelContent = typeof label2 === "string" && highlightMatch ? highlightText$1(label2, highlightMatch) : label2;
     return /* @__PURE__ */ jsx(Box, { className: classes.menuItemLabel, children: labelContent });
   };
   return /* @__PURE__ */ jsxs(
@@ -8582,6 +8582,149 @@ const MenuGroup = ({
     }
   );
 };
+const MenuList = React__default.forwardRef(
+  ({ size: size2, indicatorPosition, role = "listbox", className, ...props }, ref) => {
+    const [cssClassName, otherProps] = splitProps(props);
+    const classes = menu({ size: size2, indicatorPosition });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        role,
+        className: cx(classes.menu, cssClassName, className),
+        ...otherProps
+      }
+    );
+  }
+);
+MenuList.displayName = "MenuList";
+const highlightText = (text2, match) => {
+  if (!match || typeof text2 !== "string") return text2;
+  const regex = new RegExp(`(${match.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  const parts = text2.split(regex);
+  return parts.map(
+    (part, i) => regex.test(part) ? /* @__PURE__ */ jsx("mark", { children: part }, i) : part
+  );
+};
+const MenuListItem = React__default.forwardRef(
+  ({
+    type = "action",
+    selected = false,
+    active = false,
+    onClick,
+    disabled = false,
+    label: label2,
+    description,
+    iconLeft,
+    iconRight,
+    highlightMatch,
+    selectionIndicator = "checkmark",
+    size: size2,
+    indicatorPosition,
+    role = "option",
+    className,
+    ...props
+  }, ref) => {
+    const [cssClassName, otherProps] = splitProps(props);
+    const classes = menu({ size: size2, indicatorPosition });
+    const checkboxId = useId$1();
+    const isSelectable = type === "single-select" || type === "multi-select";
+    const showIndicator = isSelectable;
+    const handleClick = useCallback(
+      (event) => {
+        if (disabled) return;
+        onClick == null ? void 0 : onClick(event);
+      },
+      [disabled, onClick]
+    );
+    const renderIndicator = () => {
+      if (!showIndicator) return null;
+      if (selectionIndicator === "checkbox") {
+        return /* @__PURE__ */ jsx(Box, { className: classes.menuItemIndicator, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            name: `menu-list-item-checkbox-${checkboxId}`,
+            checked: selected,
+            onChange: () => {
+            },
+            tabIndex: -1,
+            "aria-hidden": true
+          }
+        ) });
+      }
+      return /* @__PURE__ */ jsx(Box, { className: classes.menuItemIndicator, children: selected && /* @__PURE__ */ jsx(Icon, { name: "check", size: "20" }) });
+    };
+    const renderLabel = () => {
+      const labelContent = typeof label2 === "string" && highlightMatch ? highlightText(label2, highlightMatch) : label2;
+      return /* @__PURE__ */ jsx(Box, { className: classes.menuItemLabel, children: labelContent });
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        role,
+        "aria-disabled": disabled,
+        "aria-selected": selected,
+        "data-selected": selected,
+        "data-active": active,
+        className: cx(classes.menuItem, cssClassName, className),
+        onClick: handleClick,
+        ...otherProps,
+        children: [
+          renderIndicator(),
+          iconLeft && /* @__PURE__ */ jsx(Box, { className: classes.menuItemIconLeft, children: /* @__PURE__ */ jsx(Icon, { name: iconLeft, size: "24" }) }),
+          /* @__PURE__ */ jsxs(Box, { className: classes.menuItemContent, children: [
+            renderLabel(),
+            description && /* @__PURE__ */ jsx(Box, { className: classes.menuItemDescription, children: description })
+          ] }),
+          iconRight && /* @__PURE__ */ jsx(Box, { className: classes.menuItemIconRight, children: /* @__PURE__ */ jsx(Icon, { name: iconRight, size: "24" }) })
+        ]
+      }
+    );
+  }
+);
+MenuListItem.displayName = "MenuListItem";
+const MenuListDivider = ({
+  size: size2,
+  indicatorPosition,
+  className,
+  ...props
+}) => {
+  const [cssClassName, otherProps] = splitProps(props);
+  const classes = menu({ size: size2, indicatorPosition });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "separator",
+      className: cx(classes.menuDivider, cssClassName, className),
+      ...otherProps
+    }
+  );
+};
+const MenuListGroup = ({
+  label: label2,
+  size: size2,
+  indicatorPosition,
+  children,
+  className,
+  ...props
+}) => {
+  const [cssClassName, otherProps] = splitProps(props);
+  const classes = menu({ size: size2, indicatorPosition });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "group",
+      "aria-label": label2,
+      className: cx(classes.menuGroup, cssClassName, className),
+      ...otherProps,
+      children: [
+        label2 && /* @__PURE__ */ jsx(Box, { className: classes.menuGroupLabel, children: label2 }),
+        children
+      ]
+    }
+  );
+};
 const caretStyles = css({
   transitionProperty: "transform",
   transitionDuration: "normal",
@@ -8654,7 +8797,6 @@ const Autocomplete = ({
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(null);
   const listRef = useRef([]);
-  const classes = menu({ size: size$12, indicatorPosition });
   const filteredOptions = useMemo(() => {
     if (!value) return options;
     return options.filter((option) => filterFn(option, value));
@@ -8755,47 +8897,42 @@ const Autocomplete = ({
       }
     ),
     open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: context2, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsx(
-      Box,
+      MenuList,
       {
         ref: refs.setFloating,
         style: floatingStyles,
-        className: classes.menu,
         id: `${id ?? name}-listbox`,
         role: "listbox",
+        size: size$12,
+        indicatorPosition,
         ...getFloatingProps(),
-        children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx(Box, { className: classes.menuItem, "aria-disabled": "true", children: /* @__PURE__ */ jsx(Box, { className: classes.menuItemContent, children: /* @__PURE__ */ jsx(Box, { className: classes.menuItemLabel, children: noResultsMessage }) }) }) : filteredOptions.map((option, index2) => {
+        children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx(
+          MenuListItem,
+          {
+            label: noResultsMessage,
+            disabled: true,
+            size: size$12,
+            indicatorPosition
+          }
+        ) : filteredOptions.map((option, index2) => {
           const isActive = activeIndex === index2;
-          const highlightLabel = () => {
-            if (!value) return option.label;
-            const regex = new RegExp(
-              `(${value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
-              "gi"
-            );
-            const parts = option.label.split(regex);
-            return parts.map(
-              (part, i) => regex.test(part) ? /* @__PURE__ */ jsx("mark", { children: part }, i) : part
-            );
-          };
-          return /* @__PURE__ */ jsxs(
-            Box,
+          return /* @__PURE__ */ jsx(
+            MenuListItem,
             {
               ref: (node) => {
                 listRef.current[index2] = node;
               },
-              role: "option",
+              active: isActive,
               "aria-selected": isActive,
-              "aria-disabled": option.disabled,
-              "data-active": isActive,
-              className: classes.menuItem,
+              disabled: option.disabled,
+              label: option.label,
+              description: option.description,
+              iconLeft: option.icon,
+              highlightMatch: value || void 0,
               onClick: () => handleOptionClick(option),
-              ...getItemProps(),
-              children: [
-                option.icon && /* @__PURE__ */ jsx(Box, { className: classes.menuItemIconLeft, children: /* @__PURE__ */ jsx(Icon, { name: option.icon, size: "24" }) }),
-                /* @__PURE__ */ jsxs(Box, { className: classes.menuItemContent, children: [
-                  /* @__PURE__ */ jsx(Box, { className: classes.menuItemLabel, children: highlightLabel() }),
-                  option.description && /* @__PURE__ */ jsx(Box, { className: classes.menuItemDescription, children: option.description })
-                ] })
-              ]
+              size: size$12,
+              indicatorPosition,
+              ...getItemProps()
             },
             option.id
           );
@@ -9016,6 +9153,10 @@ export {
   MenuDivider,
   MenuGroup,
   MenuItem,
+  MenuList,
+  MenuListDivider,
+  MenuListGroup,
+  MenuListItem,
   MenuTrigger,
   Pre,
   Radio,