@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/md-render/dist/index.js

@@ -1,4 +1,4 @@
-import { CodeBlock as CodeBlock3, getDefaultFilenameForLanguage } from "../../code-block/dist/index.js";
+import { CodeBlock as CodeBlock2, getDefaultFilenameForLanguage } from "../../code-block/dist/index.js";
 import { memo, forwardRef, useId, useMemo, Children, useState, useEffect, Fragment } from "react";
 import { Check } from "@choiceform/icons-react";
 import { ScrollArea } from "../../scroll-area/dist/index.js";
@@ -33,7 +33,7 @@ var mdRenderTv = tcv({
     tr: "",
     thead: "",
     tbody: "",
-    tableWrapper: "",
+    tableWrapper: "h-auto",
     strong: "",
     em: "",
     del: "",
@@ -276,12 +276,12 @@ var createMarkdownComponents = (tv, MentionComponent, mentionItems) => {
       }
       const language = extractLanguage(className);
       return /* @__PURE__ */ jsx(
-        CodeBlock3,
+        CodeBlock2,
         {
           className: tv.codeBlock(),
           lineThreshold: void 0,
           children: /* @__PURE__ */ jsx(
-            CodeBlock3.Code,
+            CodeBlock2.Code,
             {
               code: children,
               language
@@ -401,14 +401,15 @@ var INITIAL_COMPONENTS = {
     const language = extractLanguage(className);
     const effectiveFilename = filename ?? getDefaultFilenameForLanguage(language);
     return /* @__PURE__ */ jsxs(
-      CodeBlock3,
+      CodeBlock2,
       {
         language,
         filename: effectiveFilename,
         lineThreshold: void 0,
+        expandable: false,
         children: [
-          /* @__PURE__ */ jsx(CodeBlock3.Header, {}),
-          /* @__PURE__ */ jsx(CodeBlock3.Content, { code: children })
+          /* @__PURE__ */ jsx(CodeBlock2.Header, { showLineCount: false }),
+          /* @__PURE__ */ jsx(CodeBlock2.Content, { code: children })
         ]
       }
     );
@@ -475,7 +476,5 @@ var MdRender = memo(
   })
 );
 export {
-  MD_BLOCK_DEFAULT_ALLOWED_IMAGE_PREFIXES,
-  MD_BLOCK_DEFAULT_ALLOWED_LINK_PREFIXES,
   MdRender
 };

package/dist/components/md-render/src/components/markdown-components.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { CodeBlock as CodeBlock3 } from "../../../code-block/dist/index.js";
+import { CodeBlock as CodeBlock2 } from "../../../code-block/dist/index.js";
 import { Check } from "@choiceform/icons-react";
 import { ScrollArea } from "../../../scroll-area/dist/index.js";
 import { memo, Children } from "react";
@@ -60,12 +60,12 @@ const createMarkdownComponents = (tv, MentionComponent, mentionItems) => {
       }
       const language = extractLanguage(className);
       return /* @__PURE__ */ jsx(
-        CodeBlock3,
+        CodeBlock2,
         {
           className: tv.codeBlock(),
           lineThreshold: void 0,
           children: /* @__PURE__ */ jsx(
-            CodeBlock3.Code,
+            CodeBlock2.Code,
             {
               code: children,
               language

package/dist/components/md-render/src/index.d.ts

@@ -1,3 +1,2 @@
 export { MdRender } from './md-render';
 export type { MdRenderProps, MentionRenderProps } from './types';
-export * from './constants';

package/dist/components/md-render/src/md-render.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getDefaultFilenameForLanguage, CodeBlock as CodeBlock3 } from "../../code-block/dist/index.js";
+import { getDefaultFilenameForLanguage, CodeBlock as CodeBlock2 } from "../../code-block/dist/index.js";
 import { memo, forwardRef, useId, useMemo } from "react";
 import { mdRenderTv } from "./tv.js";
 import { useMdBlocks } from "./hooks/use-md-blocks.js";
@@ -17,14 +17,15 @@ const INITIAL_COMPONENTS = {
     const language = extractLanguage(className);
     const effectiveFilename = filename ?? getDefaultFilenameForLanguage(language);
     return /* @__PURE__ */ jsxs(
-      CodeBlock3,
+      CodeBlock2,
       {
         language,
         filename: effectiveFilename,
         lineThreshold: void 0,
+        expandable: false,
         children: [
-          /* @__PURE__ */ jsx(CodeBlock3.Header, {}),
-          /* @__PURE__ */ jsx(CodeBlock3.Content, { code: children })
+          /* @__PURE__ */ jsx(CodeBlock2.Header, { showLineCount: false }),
+          /* @__PURE__ */ jsx(CodeBlock2.Content, { code: children })
         ]
       }
     );

package/dist/components/md-render/src/tv.js

@@ -24,7 +24,7 @@ const mdRenderTv = tcv({
     tr: "",
     thead: "",
     tbody: "",
-    tableWrapper: "",
+    tableWrapper: "h-auto",
     strong: "",
     em: "",
     del: "",

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

@@ -0,0 +1,50 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { DropdownProps } from '../../dropdown/src';
+import { Placement } from '@floating-ui/react';
+import { ButtonProps } from '../../button/src';
+import * as react from 'react';
+
+interface MenubarDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * MenubarDivider - Separator component for Menubar
+ *
+ * Used to create visual separation between Menubar items
+ */
+declare const MenubarDivider: react.MemoExoticComponent<react.ForwardRefExoticComponent<MenubarDividerProps & react.RefAttributes<HTMLDivElement>>>;
+
+interface MenubarItemProps extends Omit<DropdownProps, "open" | "onOpenChange"> {
+    children?: React.ReactNode;
+    placement?: Placement;
+    disabled?: boolean;
+}
+declare const MenubarItem: react.NamedExoticComponent<MenubarItemProps>;
+
+interface MenubarTriggerProps extends Omit<ButtonProps, "children"> {
+    children?: ReactNode | ((active: boolean) => ReactNode);
+    prefixElement?: ReactNode;
+    suffixElement?: ReactNode;
+}
+declare const MenubarTrigger: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MenubarTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>>;
+
+/** Props inherited from Dropdown that can be set at Menubar level */
+type MenubarDropdownProps = Pick<DropdownProps, "variant" | "offset" | "portalId" | "root">;
+
+interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Child elements */
+    children?: ReactNode;
+    /** Whether the menubar is disabled */
+    disabled?: boolean;
+    /** Whether to loop focus when navigating */
+    loopFocus?: boolean;
+    /** Props to pass to all Dropdown components */
+    dropdownProps?: MenubarDropdownProps;
+}
+type MenubarComponentType = React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>> & {
+    Divider: typeof MenubarDivider;
+    Item: typeof MenubarItem;
+    Trigger: typeof MenubarTrigger;
+};
+declare const Menubar: MenubarComponentType;
+
+export { Menubar, type MenubarItemProps, type MenubarProps, type MenubarTriggerProps };

package/dist/components/menubar/src/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './menubar-divider';
+export * from './menubar-item';
+export * from './menubar-trigger';

package/dist/components/menubar/src/components/menubar-divider.d.ts

@@ -0,0 +1,8 @@
+export interface MenubarDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * MenubarDivider - Separator component for Menubar
+ *
+ * Used to create visual separation between Menubar items
+ */
+export declare const MenubarDivider: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<MenubarDividerProps & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/menubar/src/components/menubar-divider.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+import { MenubarDividerTv } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const MenubarDivider = memo(
+  forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    const tv = MenubarDividerTv();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: tcx(tv.root(), className),
+        ...rest
+      }
+    );
+  })
+);
+MenubarDivider.displayName = "MenubarDivider";
+export {
+  MenubarDivider
+};

package/dist/components/menubar/src/components/menubar-item.d.ts

@@ -0,0 +1,8 @@
+import { DropdownProps } from '../../../dropdown/src';
+import { Placement } from '@floating-ui/react';
+export interface MenubarItemProps extends Omit<DropdownProps, "open" | "onOpenChange"> {
+    children?: React.ReactNode;
+    placement?: Placement;
+    disabled?: boolean;
+}
+export declare const MenubarItem: import('react').NamedExoticComponent<MenubarItemProps>;

package/dist/components/menubar/src/components/menubar-item.js

@@ -0,0 +1,195 @@
+import { jsx } from "react/jsx-runtime";
+import { Dropdown as Dropdown2 } from "../../../dropdown/dist/index.js";
+import { useFloating, useDismiss, useInteractions } from "@floating-ui/react";
+import { memo, useId, useRef, useEffect, useCallback, useMemo, Children, isValidElement, cloneElement } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { MenubarTrigger } from "./menubar-trigger.js";
+import { useMenubarContext } from "../context/menubar-context.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const MenubarItemComponent = memo(function MenubarItemComponent2(props) {
+  const { children, placement: placementProp, disabled = false, ...itemDropdownProps } = props;
+  const {
+    activeMenuId,
+    hasAnyMenuOpen,
+    openMenu,
+    closeAllMenus,
+    registerItem,
+    unregisterItem,
+    rootDisabled,
+    dropdownProps
+  } = useMenubarContext();
+  const defaultPlacement = "bottom-start";
+  const placement = placementProp ?? defaultPlacement;
+  const menuId = useId();
+  const isOpen = activeMenuId === menuId;
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    registerItem({
+      id: menuId,
+      disabled,
+      triggerRef
+    });
+    return () => unregisterItem(menuId);
+  }, [menuId, disabled, registerItem, unregisterItem]);
+  const { refs, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open) => {
+      if (!open) {
+        closeAllMenus();
+      }
+    }
+  });
+  const dismiss = useDismiss(context, {
+    // Close on outside click, but exclude other items in menubar
+    outsidePress: (event) => {
+      if (!triggerRef.current) return true;
+      const target = event.target;
+      const menubar = triggerRef.current.closest('[role="menubar"]');
+      if (menubar == null ? void 0 : menubar.contains(target)) {
+        const clickedTrigger = target.closest("[data-menubar-trigger]");
+        if (clickedTrigger && clickedTrigger !== triggerRef.current) {
+          return false;
+        }
+      }
+      return true;
+    },
+    escapeKey: true,
+    bubbles: {
+      escapeKey: true,
+      outsidePress: true
+    }
+  });
+  const { getFloatingProps } = useInteractions([dismiss]);
+  useEffect(() => {
+    if (triggerRef.current) {
+      refs.setReference(triggerRef.current);
+    }
+  }, [refs]);
+  useEffect(() => {
+    if (contentRef.current) {
+      refs.setFloating(contentRef.current);
+    }
+  }, [refs, isOpen]);
+  const handleOpenChange = useEventCallback((open) => {
+    if (disabled || rootDisabled) return;
+    if (open) {
+      openMenu(menuId);
+    } else {
+      if (isOpen) {
+        closeAllMenus();
+      }
+    }
+  });
+  const handleTriggerMouseEnter = useCallback(() => {
+    if (disabled || rootDisabled) return;
+    if (hasAnyMenuOpen && !isOpen) {
+      openMenu(menuId);
+    }
+  }, [disabled, rootDisabled, hasAnyMenuOpen, isOpen, menuId, openMenu]);
+  const setTriggerRef = useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (node) {
+        refs.setReference(node);
+      }
+    },
+    [refs]
+  );
+  const setContentRef = useCallback(
+    (node) => {
+      contentRef.current = node;
+      if (node) {
+        refs.setFloating(node);
+      }
+    },
+    [refs]
+  );
+  const enhancedChildren = useMemo(
+    () => Children.map(children, (child) => {
+      if (!isValidElement(child)) return child;
+      if (child.type === MenubarTrigger) {
+        const childProps = child.props;
+        const originalRef = childProps.ref;
+        return /* @__PURE__ */ jsx(
+          Dropdown2.Trigger,
+          {
+            asChild: true,
+            disabled: disabled || rootDisabled,
+            children: cloneElement(child, {
+              ...child.props,
+              "data-menubar-trigger": "",
+              active: isOpen,
+              disabled: disabled || rootDisabled,
+              className: tcx(
+                "data-[multi-element=true]:border-transparent",
+                child.props.className
+              ),
+              ref: (node) => {
+                setTriggerRef(node);
+                if (typeof originalRef === "function") {
+                  originalRef(node);
+                } else if (originalRef && typeof originalRef === "object") {
+                  originalRef.current = node;
+                }
+              },
+              onMouseEnter: (e) => {
+                var _a, _b;
+                (_b = (_a = child.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
+                handleTriggerMouseEnter();
+              }
+            })
+          }
+        );
+      }
+      if (child.type === Dropdown2.Content) {
+        const childProps = child.props;
+        const originalRef = childProps.ref;
+        const floatingProps = getFloatingProps();
+        return cloneElement(child, {
+          ...child.props,
+          ...floatingProps,
+          ref: (node) => {
+            setContentRef(node);
+            if (typeof originalRef === "function") {
+              originalRef(node);
+            } else if (originalRef && typeof originalRef === "object") {
+              originalRef.current = node;
+            }
+          }
+        });
+      }
+      return child;
+    }),
+    [
+      children,
+      disabled,
+      rootDisabled,
+      isOpen,
+      setTriggerRef,
+      setContentRef,
+      handleTriggerMouseEnter,
+      getFloatingProps
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    Dropdown2,
+    {
+      ...dropdownProps,
+      ...itemDropdownProps,
+      placement,
+      open: isOpen && !disabled,
+      onOpenChange: handleOpenChange,
+      focusManagerProps: {
+        modal: false,
+        returnFocus: false
+      },
+      children: enhancedChildren
+    }
+  );
+});
+MenubarItemComponent.displayName = "MenubarItem";
+const MenubarItem = MenubarItemComponent;
+export {
+  MenubarItem
+};

package/dist/components/menubar/src/components/menubar-trigger.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '../../../button/src';
+import { ReactNode } from 'react';
+export interface MenubarTriggerProps extends Omit<ButtonProps, "children"> {
+    children?: ReactNode | ((active: boolean) => ReactNode);
+    prefixElement?: ReactNode;
+    suffixElement?: ReactNode;
+}
+export declare const MenubarTrigger: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<MenubarTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>>;

package/dist/components/menubar/src/components/menubar-trigger.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../../../button/dist/index.js";
+import { memo, forwardRef } from "react";
+import { MenubarTriggerTv } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const MenubarTrigger = memo(
+  forwardRef((props, ref) => {
+    const {
+      children,
+      className,
+      size = "default",
+      prefixElement,
+      suffixElement,
+      active,
+      disabled,
+      ...rest
+    } = props;
+    const tv = MenubarTriggerTv({
+      size,
+      hasPrefix: prefixElement !== void 0,
+      hasSuffix: suffixElement !== void 0
+    });
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        className: tcx(tv.root(), className),
+        variant: "ghost",
+        active,
+        disabled,
+        size,
+        ...rest,
+        children: [
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: prefixElement }),
+          typeof children === "function" ? children(active ?? false) : children,
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
+        ]
+      }
+    );
+  })
+);
+MenubarTrigger.displayName = "MenubarTrigger";
+export {
+  MenubarTrigger
+};

package/dist/components/menubar/src/context/index.d.ts

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

package/dist/components/menubar/src/context/menubar-context.d.ts

@@ -0,0 +1,34 @@
+import { DropdownProps } from '../../../dropdown/src';
+export interface MenubarItemInfo {
+    id: string;
+    disabled: boolean;
+    triggerRef: React.RefObject<HTMLElement | null>;
+}
+/** Props inherited from Dropdown that can be set at Menubar level */
+export type MenubarDropdownProps = Pick<DropdownProps, "variant" | "offset" | "portalId" | "root">;
+export interface MenubarContextType {
+    /** Currently active menu ID */
+    activeMenuId: string | null;
+    /** Whether any menu is open */
+    hasAnyMenuOpen: boolean;
+    /** Open specified menu */
+    openMenu: (id: string) => void;
+    /** Close all menus */
+    closeAllMenus: () => void;
+    /** Whether to loop focus */
+    loopFocus: boolean;
+    /** Register menu item */
+    registerItem: (info: MenubarItemInfo) => void;
+    /** Unregister menu item */
+    unregisterItem: (id: string) => void;
+    /** Navigate to next menu item */
+    navigateNext: () => void;
+    /** Navigate to previous menu item */
+    navigatePrev: () => void;
+    /** Whether Menubar is disabled */
+    rootDisabled: boolean;
+    /** Dropdown props inherited from Menubar */
+    dropdownProps: MenubarDropdownProps;
+}
+export declare const MenubarContext: import('react').Context<MenubarContextType | null>;
+export declare function useMenubarContext(): MenubarContextType;

package/dist/components/menubar/src/context/menubar-context.js

@@ -0,0 +1,13 @@
+import { useContext, createContext } from "react";
+const MenubarContext = createContext(null);
+function useMenubarContext() {
+  const context = useContext(MenubarContext);
+  if (!context) {
+    throw new Error("Menubar.Item must be used within a Menubar");
+  }
+  return context;
+}
+export {
+  MenubarContext,
+  useMenubarContext
+};

package/dist/components/menubar/src/index.d.ts

@@ -0,0 +1,3 @@
+export { Menubar } from './menubar';
+export type { MenubarProps } from './menubar';
+export type { MenubarItemProps, MenubarTriggerProps } from './components';

package/dist/components/menubar/src/menubar.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { MenubarDivider } from './components/menubar-divider';
+import { MenubarItem } from './components/menubar-item';
+import { MenubarTrigger } from './components/menubar-trigger';
+import { MenubarDropdownProps } from './context';
+export interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Child elements */
+    children?: ReactNode;
+    /** Whether the menubar is disabled */
+    disabled?: boolean;
+    /** Whether to loop focus when navigating */
+    loopFocus?: boolean;
+    /** Props to pass to all Dropdown components */
+    dropdownProps?: MenubarDropdownProps;
+}
+type MenubarComponentType = React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>> & {
+    Divider: typeof MenubarDivider;
+    Item: typeof MenubarItem;
+    Trigger: typeof MenubarTrigger;
+};
+export declare const Menubar: MenubarComponentType;
+export {};