@choice-ui/react 1.9.6 → 1.9.8

package/dist/components/code-block/dist/index.js

@@ -1,4 +1,4 @@
-import React__default, { memo, useState, useEffect, useRef, useCallback } from "react";
+import React__default, { memo, useState, useEffect } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 import { codeToHtml } from "shiki";
 import { useEventCallback } from "usehooks-ts";
@@ -34,34 +34,13 @@ function useCodeBlock({
     if (!code || typeof code !== "string") {
       return;
     }
-    const onSuccess = () => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    };
-    if (typeof navigator !== "undefined" && navigator.clipboard) {
-      try {
-        await navigator.clipboard.writeText(code);
-        onSuccess();
-        return;
-      } catch {
-      }
-    }
-    const textArea = document.createElement("textarea");
     try {
-      textArea.value = code;
-      textArea.style.cssText = "position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent;";
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      const successful = document.execCommand("copy");
-      if (successful) {
-        onSuccess();
-      }
-    } catch {
-    } finally {
-      if (textArea.parentNode) {
-        textArea.parentNode.removeChild(textArea);
+      if (typeof navigator !== "undefined" && navigator.clipboard) {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
       }
+    } catch (error) {
     }
   });
   return {
@@ -77,15 +56,12 @@ function useScrollDetection({
   scrollRef,
   contentRef,
   isExpanded,
-  codeExpanded
+  codeExpanded,
+  children
 }) {
   const [needsScroll, setNeedsScroll] = useState(false);
-  const debounceRef = useRef(null);
-  const checkScrollNeeded = useCallback(() => {
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-    debounceRef.current = setTimeout(() => {
+  useEffect(() => {
+    const checkScrollNeeded = () => {
       if (!scrollRef.current || !contentRef.current) {
         setNeedsScroll(false);
         return;
@@ -95,30 +71,50 @@ function useScrollDetection({
         const content = contentRef.current;
         const hasScroll = content.scrollHeight > viewport.clientHeight;
         setNeedsScroll(hasScroll);
-      } catch {
+      } catch (error) {
         setNeedsScroll(false);
       }
-    }, 50);
-  }, [scrollRef, contentRef]);
-  useEffect(() => {
+    };
     const timeoutId = setTimeout(checkScrollNeeded, 100);
     window.addEventListener("resize", checkScrollNeeded);
     let resizeObserver = null;
-    if (typeof ResizeObserver !== "undefined" && contentRef.current) {
+    if (typeof ResizeObserver !== "undefined") {
       resizeObserver = new ResizeObserver(checkScrollNeeded);
-      resizeObserver.observe(contentRef.current);
+      if (contentRef.current) {
+        resizeObserver.observe(contentRef.current);
+      }
     }
     return () => {
       clearTimeout(timeoutId);
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
       window.removeEventListener("resize", checkScrollNeeded);
       resizeObserver == null ? void 0 : resizeObserver.disconnect();
     };
-  }, [checkScrollNeeded, isExpanded, codeExpanded]);
+  }, [scrollRef, contentRef, isExpanded, codeExpanded, children]);
   return needsScroll;
 }
+function useLineCount(children) {
+  const [lineCount, setLineCount] = useState(0);
+  useEffect(() => {
+    try {
+      const codeContent = React__default.Children.toArray(children).map((child) => {
+        var _a;
+        if (React__default.isValidElement(child) && ((_a = child.props) == null ? void 0 : _a.code) && typeof child.props.code === "string") {
+          return child.props.code;
+        }
+        return "";
+      }).join("");
+      if (codeContent) {
+        const lines = codeContent.split("\n").length;
+        setLineCount(lines);
+      } else {
+        setLineCount(0);
+      }
+    } catch (error) {
+      setLineCount(0);
+    }
+  }, [children]);
+  return lineCount;
+}
 function useTheme() {
   const [theme, setTheme] = useState(() => {
     if (typeof window === "undefined") return "light";
@@ -180,46 +176,34 @@ var codeBlockCodeTv = tcv({
   base: "text-message-code w-fit min-w-full bg-transparent font-mono [&>pre]:!bg-transparent [&>pre]:px-4 [&>pre]:py-4"
 });
 var CodeBlockCode = memo(function CodeBlockCode2(props) {
-  const { children, language = "tsx", className, variant: variantProp, codeBlock, ...rest } = props;
+  const { code, language = "tsx", className, variant: variantProp, codeBlock, ...rest } = props;
   const systemTheme = useTheme();
   const resolvedVariant = variantProp ?? ((codeBlock == null ? void 0 : codeBlock.variant) === "default" ? void 0 : codeBlock == null ? void 0 : codeBlock.variant);
   const theme = resolvedVariant ?? systemTheme;
   const [highlightedHtml, setHighlightedHtml] = useState(null);
   useEffect(() => {
-    let isMounted = true;
     async function highlight() {
-      if (!children) {
-        if (isMounted) setHighlightedHtml("<pre><code></code></pre>");
+      if (!code) {
+        setHighlightedHtml("<pre><code></code></pre>");
         return;
       }
       const resolvedLang = resolveLanguage(language);
-      const themeConfig = theme === "light" ? "github-light" : "github-dark";
       try {
-        const html = await codeToHtml(children, {
+        const html = await codeToHtml(code, {
           lang: resolvedLang,
-          theme: themeConfig
+          theme: theme === "light" ? "github-light" : "github-dark"
         });
-        if (isMounted) setHighlightedHtml(html);
+        setHighlightedHtml(html);
       } catch {
-        try {
-          const html = await codeToHtml(children, {
-            lang: "text",
-            theme: themeConfig
-          });
-          if (isMounted) setHighlightedHtml(html);
-        } catch {
-          if (isMounted) {
-            const escaped = children.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-            setHighlightedHtml(`<pre><code>${escaped}</code></pre>`);
-          }
-        }
+        const html = await codeToHtml(code, {
+          lang: "text",
+          theme: theme === "light" ? "github-light" : "github-dark"
+        });
+        setHighlightedHtml(html);
       }
     }
     highlight();
-    return () => {
-      isMounted = false;
-    };
-  }, [children, language, theme]);
+  }, [code, language, theme]);
   const classNames = codeBlockCodeTv({ className });
   return highlightedHtml ? /* @__PURE__ */ jsx(
     "div",
@@ -233,29 +217,10 @@ var CodeBlockCode = memo(function CodeBlockCode2(props) {
     {
       className: tcx("min-w-0", classNames),
       ...rest,
-      children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) })
+      children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) })
     }
   );
 });
-function extractCodeFromChildren(children) {
-  if (!children) return "";
-  try {
-    return React__default.Children.toArray(children).map((child) => {
-      var _a, _b;
-      if (React__default.isValidElement(child)) {
-        if (((_a = child.props) == null ? void 0 : _a.code) && typeof child.props.code === "string") {
-          return child.props.code;
-        }
-        if (((_b = child.props) == null ? void 0 : _b.children) && typeof child.props.children === "string") {
-          return child.props.children;
-        }
-      }
-      return "";
-    }).filter(Boolean).join("");
-  } catch {
-    return "";
-  }
-}
 var icons = {
   js: /* @__PURE__ */ jsxs(
     "svg",
@@ -943,8 +908,9 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
     handleCopy,
     variant
   } = codeBlock;
-  const canExpand = Boolean(handleExpand);
-  const canCopy = Boolean(handleCopy);
+  if (!handleExpand || !handleCopy) {
+    return null;
+  }
   const tv = codeBlockHeaderTv({ isExpanded, variant });
   let icon = null;
   try {
@@ -968,17 +934,17 @@ var CodeBlockHeader = memo(function CodeBlockHeader2(props) {
       children
     ] }),
     /* @__PURE__ */ jsxs("div", { className: tv.actions(), children: [
-      isExpanded && canCopy && /* @__PURE__ */ jsx(
+      isExpanded && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),
           variant: variant === "dark" ? "dark" : "ghost",
-          onClick: () => handleCopy == null ? void 0 : handleCopy(),
+          onClick: () => handleCopy(),
           tooltip: { content: copyTooltipContent },
           children: copied ? /* @__PURE__ */ jsx(Check, { className: "text-success-foreground" }) : /* @__PURE__ */ jsx(ClipboardSmall, {})
         }
       ),
-      expandable && canExpand && /* @__PURE__ */ jsx(
+      expandable && /* @__PURE__ */ jsx(
         IconButton,
         {
           className: tv.button(),
@@ -1006,10 +972,9 @@ var codeBlockFooterTv = tcv({
       },
       false: {
         footer: [
-          "bg-secondary-background/80 absolute inset-x-0 bottom-0 z-3",
+          "bg-secondary-background/90 absolute inset-x-0 bottom-0 z-3",
           "opacity-0 group-hover:opacity-100",
-          "hover:bg-tertiary-background",
-          "backdrop-blur-xs"
+          "hover:bg-tertiary-background"
         ]
       }
     }
@@ -1023,7 +988,7 @@ var CodeBlockFooter = memo(function CodeBlockFooter2(props) {
   if (!codeBlock) return null;
   const { isExpanded, codeExpanded, handleCodeExpand, lineCount, lineThreshold, needsScroll } = codeBlock;
   const tv = codeBlockFooterTv({ codeExpanded });
-  if (lineThreshold && !(lineCount > lineThreshold || needsScroll || codeExpanded) || !isExpanded) {
+  if (!(lineCount > lineThreshold || needsScroll || codeExpanded) || !isExpanded) {
     return null;
   }
   return /* @__PURE__ */ jsx(
@@ -1035,26 +1000,24 @@ var CodeBlockFooter = memo(function CodeBlockFooter2(props) {
     }
   );
 });
-var LINE_HEIGHT_PX = 16;
-var HEIGHT_PADDING_PX = 32 + 40;
 var codeBlockTv = tcv({
   slots: {
-    code: "overflow-hidden min-h-0 flex-1",
+    code: "overflow-hidden",
     content: "flex w-fit flex-col overflow-clip p-[inherit]"
   }
 });
-var CodeBlockContent = memo(function CodeBlockContent2(props) {
-  const { className, codeBlock, withScrollArea = true, children } = props;
+function CodeBlockContent(props) {
+  const { code, className, codeBlock, withScrollArea = true } = props;
   if (!codeBlock) return null;
   const { language, isExpanded, codeExpanded, scrollRef, contentRef, lineCount, lineThreshold } = codeBlock;
   if (!isExpanded) {
     return null;
   }
-  if (typeof children !== "string") {
+  if (typeof code !== "string") {
     return null;
   }
   const tv = codeBlockTv();
-  const shouldLimitHeight = lineThreshold && lineCount > lineThreshold && !codeExpanded;
+  const shouldLimitHeight = lineCount > lineThreshold && !codeExpanded;
   return /* @__PURE__ */ jsx(Fragment, { children: withScrollArea ? /* @__PURE__ */ jsx(
     ScrollArea,
     {
@@ -1067,7 +1030,7 @@ var CodeBlockContent = memo(function CodeBlockContent2(props) {
         {
           ref: scrollRef,
           style: {
-            maxHeight: shouldLimitHeight ? `${lineThreshold * LINE_HEIGHT_PX + HEIGHT_PADDING_PX}px` : "none"
+            maxHeight: shouldLimitHeight ? `${lineThreshold * 14 + 32}px` : "none"
           },
           children: /* @__PURE__ */ jsx(
             ScrollArea.Content,
@@ -1077,9 +1040,9 @@ var CodeBlockContent = memo(function CodeBlockContent2(props) {
               children: /* @__PURE__ */ jsx(
                 CodeBlockCode,
                 {
+                  code,
                   language,
-                  codeBlock,
-                  children
+                  codeBlock
                 }
               )
             }
@@ -1090,19 +1053,19 @@ var CodeBlockContent = memo(function CodeBlockContent2(props) {
   ) : /* @__PURE__ */ jsx("div", { className: tcx(tv.content(), className), children: /* @__PURE__ */ jsx(
     CodeBlockCode,
     {
+      code,
       language,
-      codeBlock,
-      children
+      codeBlock
     }
   ) }) });
-});
+}
 var CodeBlockRoot = memo(function CodeBlock(props) {
   const {
     children,
     className,
     filename,
     language = "code",
-    lineThreshold,
+    lineThreshold = 20,
     expandable = true,
     defaultExpanded = true,
     defaultCodeExpanded = false,
@@ -1114,6 +1077,7 @@ var CodeBlockRoot = memo(function CodeBlock(props) {
     resize: "smooth",
     initial: "smooth"
   });
+  const codeContentRef = React__default.useRef("");
   const {
     isExpanded,
     codeExpanded,
@@ -1128,25 +1092,34 @@ var CodeBlockRoot = memo(function CodeBlock(props) {
     onCodeExpandChange,
     scrollToBottom
   });
-  const codeContent = React__default.useMemo(() => extractCodeFromChildren(children), [children]);
-  const lineCount = React__default.useMemo(
-    () => codeContent ? codeContent.split("\n").length : 0,
-    [codeContent]
-  );
   const handleCopy = React__default.useCallback(
     (code) => {
-      const codeToUse = code || codeContent;
+      const codeToUse = code || codeContentRef.current;
       if (codeToUse) {
         originalHandleCopy(codeToUse);
       }
     },
-    [originalHandleCopy, codeContent]
+    [originalHandleCopy]
   );
+  React__default.useEffect(() => {
+    try {
+      React__default.Children.forEach(children, (child) => {
+        if (React__default.isValidElement(child) && child.props) {
+          if (child.props.code && typeof child.props.code === "string") {
+            codeContentRef.current = child.props.code;
+          }
+        }
+      });
+    } catch {
+    }
+  }, [children]);
+  const lineCount = useLineCount(children);
   const needsScroll = useScrollDetection({
     scrollRef,
     contentRef,
     isExpanded,
-    codeExpanded
+    codeExpanded,
+    children
   });
   const contextValue = React__default.useMemo(
     () => ({
@@ -1205,7 +1178,7 @@ var CodeBlockRoot = memo(function CodeBlock(props) {
     "div",
     {
       className: tcx(
-        "group/code-block relative flex flex-col overflow-hidden rounded-lg",
+        "group/code-block relative overflow-hidden rounded-lg",
         variant === "default" && "bg-secondary-background",
         variant === "light" && "bg-gray-100",
         variant === "dark" && "bg-gray-700",

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

@@ -452,37 +452,8 @@ interface ColorAreaProps {
 }
 declare const ColorArea: react.MemoExoticComponent<react.ForwardRefExoticComponent<ColorAreaProps & react.RefAttributes<HTMLDivElement>>>;
 
-interface ColorSliderThumbProps {
-    className?: string;
-    size?: number;
-}
-declare function ColorSliderThumb(props: ColorSliderThumbProps): react_jsx_runtime.JSX.Element;
-declare namespace ColorSliderThumb {
-    var displayName: string;
-}
-
-interface ColorSliderTrackProps {
-    className?: string;
-    children?: React.ReactNode;
-    /**
-     * Height of the track in pixels.
-     * This prop is extracted by the parent ColorSlider and passed via context.
-     */
-    height?: number;
-}
-/**
- * ColorSliderTrack - The track background of the color slider.
- * Renders the gradient background based on slider type (hue, alpha, etc.)
- * Can contain custom children for additional visual elements.
- */
-declare function ColorSliderTrack(props: ColorSliderTrackProps): react_jsx_runtime.JSX.Element;
-declare namespace ColorSliderTrack {
-    var displayName: string;
-}
-
 interface ColorSliderProps {
     backgroundStyle?: CSSProperties;
-    children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     hue?: number;
@@ -490,18 +461,14 @@ interface ColorSliderProps {
     onChangeEnd?: () => void;
     onChangeStart?: () => void;
     position: number;
+    thumbSize?: number;
+    trackSize?: {
+        height?: number;
+        width?: number;
+    };
     type: PickerSliderType;
-    /**
-     * Width of the slider track in pixels.
-     * If not provided (undefined or false), the width will be auto-calculated from the container.
-     */
-    width?: number | boolean;
-}
-interface ColorSliderComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>> {
-    Thumb: typeof ColorSliderThumb;
-    Track: typeof ColorSliderTrack;
 }
-declare const ColorSlider: ColorSliderComponent;
+declare const ColorSlider: react.MemoExoticComponent<react.ForwardRefExoticComponent<ColorSliderProps & react.RefAttributes<HTMLDivElement>>>;
 
 interface ColorSwatchProps extends Omit<HTMLProps<HTMLDivElement>, "color"> {
     alpha?: number;

package/dist/components/colors/src/color-image-paint/color-image-paint.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../../../button/dist/index.js";
-import { Range as Range2 } from "../../../range/dist/index.js";
+import { Range } from "../../../range/dist/index.js";
 import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { ColorImageToolbar } from "./color-image-toolbar.js";
@@ -209,7 +209,7 @@ const ColorImagePaint = memo(function ColorImagePaint2(props) {
           return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: styles.adjustLabel(), children: (_a2 = features == null ? void 0 : features.labels) == null ? void 0 : _a2[filterName] }),
             /* @__PURE__ */ jsx(
-              Range2,
+              Range,
               {
                 min: -100,
                 max: 100,

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

@@ -7,12 +7,6 @@ interface DropdownProps {
      * @default true
      */
     autoSelectFirstItem?: boolean;
-    /**
-     * Whether to avoid collisions by flipping or shifting the dropdown position.
-     * When false, the dropdown will strictly follow the placement direction.
-     * @default true
-     */
-    avoidCollisions?: boolean;
     children?: React.ReactNode;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;

package/dist/components/dropdown/dist/index.js

@@ -13,7 +13,6 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
     autoSelectFirstItem = true,
-    avoidCollisions = true,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -54,7 +53,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   });
-  const { nodeId, item, isNested, tree } = useMenuTree({
+  const { nodeId, item, isNested } = useMenuTree({
     disabledNested,
     handleOpenChange,
     isControlledOpen
@@ -78,14 +77,11 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     });
   });
   const lastPositionRef = useRef(null);
-  const middleware = useMemo(() => {
-    const baseMiddleware = [
-      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 })
-    ];
-    if (avoidCollisions) {
-      baseMiddleware.push(flip(), shift());
-    }
-    baseMiddleware.push(
+  const middleware = useMemo(
+    () => [
+      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
+      flip(),
+      shift(),
       size({
         padding: 4,
         apply({ elements, availableHeight, rects }) {
@@ -108,9 +104,9 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
           }
         }
       })
-    );
-    return baseMiddleware;
-  }, [isNested, offsetDistance, matchTriggerWidth, scrollRef, avoidCollisions]);
+    ],
+    [isNested, offsetDistance, matchTriggerWidth, scrollRef]
+  );
   const { refs, floatingStyles, context, isPositioned } = useFloating({
     nodeId,
     open: isControlledOpen,
@@ -169,17 +165,11 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     bubbles: true,
     escapeKey: true
   });
-  const handleNavigate = useEventCallback((index) => {
-    setActiveIndex(index);
-    if (tree && index !== null) {
-      tree.events.emit("navigate", { nodeId, index });
-    }
-  });
   const listNavigation = useListNavigation(context, {
     listRef: elementsRef,
     activeIndex,
     nested: isNested,
-    onNavigate: handleNavigate,
+    onNavigate: setActiveIndex,
     loop: true
   });
   const typeahead = useTypeahead(context, {

package/dist/components/emoji-picker/dist/index.d.ts

@@ -15,24 +15,12 @@ type VirtualItem = {
     emojis: EmojiData[];
     type: "emojis";
 };
-interface CategoryNames {
-    activities: string;
-    animalsNature: string;
-    flags: string;
-    foodDrink: string;
-    frequentlyUsed: string;
-    objects: string;
-    smileysPeople: string;
-    symbols: string;
-    travelPlaces: string;
-}
 interface UseEmojiDataProps {
-    categoryNames?: CategoryNames;
     columns: number;
     searchQuery: string;
     showFrequentlyUsed: boolean;
 }
-declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed, categoryNames, }: UseEmojiDataProps): {
+declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
     categorizedData: VirtualItem[];
     categoryIndexMap: Map<EmojiCategory, number>;
     searchResults: {
@@ -61,25 +49,8 @@ interface EmojiPickerProps {
     showCategories?: boolean;
     showFrequentlyUsed?: boolean;
     showSearch?: boolean;
-    showFooter?: boolean;
     value?: EmojiData | null;
     variant?: "default" | "dark" | "light";
-    i18n?: {
-        noEmojisFoundTitle?: string;
-        noEmojisFoundDescription?: string;
-        footerPickAnEmoji?: string;
-        categories?: {
-            frequentlyUsed: string;
-            smileysPeople: string;
-            animalsNature: string;
-            foodDrink: string;
-            travelPlaces: string;
-            activities: string;
-            objects: string;
-            symbols: string;
-            flags: string;
-        };
-    };
 }
 declare const EmojiPicker: React.NamedExoticComponent<EmojiPickerProps>;