@edux-design/forms 0.0.13 → 0.0.14

package/dist/index.d.mts

@@ -247,6 +247,7 @@ declare const Option: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
  * @property {string} [listClassName] - optional class for the list element
  * @property {string} [optionClassName] - optional class for each option
  * @property {"default"|"small"} [size="default"] - size variant for the combobox input
+ * @property {"full"|"small"|"medium"|"large"} [width="full"] - width size for the combobox container
  */
 declare const ComboboxRoot: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 

package/dist/index.d.ts

@@ -247,6 +247,7 @@ declare const Option: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
  * @property {string} [listClassName] - optional class for the list element
  * @property {string} [optionClassName] - optional class for each option
  * @property {"default"|"small"} [size="default"] - size variant for the combobox input
+ * @property {"full"|"small"|"medium"|"large"} [width="full"] - width size for the combobox container
  */
 declare const ComboboxRoot: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 

package/dist/index.js

@@ -885,6 +885,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
     listClassName,
     optionClassName,
     size = "default",
+    width = "full",
     ...inputProps
   }, ref) => {
     const {
@@ -1003,6 +1004,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
         setContentWidth(anchorRef.current.offsetWidth);
       }
     }, [open]);
+    const isNarrowPopover = contentWidth > 0 && contentWidth < 100;
     const emitChange = (0, import_react10.useCallback)(
       (nextValue, option) => {
         if (!isControlled) {
@@ -1163,6 +1165,12 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
         input: "text-sm py-0.5"
       }
     };
+    const widthStyles = {
+      full: "w-full",
+      small: "w-[60px]",
+      medium: "w-[320px]",
+      large: "w-[400px]"
+    };
     const selectedChips = isMultiSelectEnabled && multiSelectedOptions.length > 0 ? multiSelectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_chips.Chip,
       {
@@ -1182,7 +1190,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
         "div",
         {
           ref: anchorRef,
-          className: (0, import_utils7.cx)("w-full", wrapperClassName),
+          className: (0, import_utils7.cx)(widthStyles[width], wrapperClassName),
           onMouseDown: isMultiSelectEnabled ? void 0 : handleSingleAnchorMouseDown,
           children: isMultiSelectEnabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
@@ -1293,7 +1301,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
           disableOutsidePointerEvents: false,
           onOpenAutoFocus: (event) => event.preventDefault(),
           className: (0, import_utils7.cx)(
-            "rounded-md border border-bg-base bg-white shadow-lg p-0 mt-1 max-h-60 overflow-auto",
+            "rounded-md border border-bg-base bg-white shadow-lg p-0 mt-1 max-h-60 overflow-auto overflow-x-hidden",
             contentClassName
           ),
           style: { width: contentWidth || void 0 },
@@ -1322,12 +1330,14 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
                   isActive && "bg-bg-subtle text-fg-base",
                   isSelected && "font-medium",
                   option.disabled && "opacity-50 cursor-not-allowed",
+                  isNarrowPopover && "min-w-0 px-8 justify-center",
                   optionClassName,
                   option.element.props.className
                 );
                 const originalOnClick = option.element.props.onClick;
                 const originalOnMouseDown = option.element.props.onMouseDown;
                 const optionContent = option.element.props.children ?? option.label;
+                const optionContentClassName = isNarrowPopover ? "w-full text-center truncate" : "truncate";
                 const checkboxIndicator = isMultiSelectEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "span",
                   {
@@ -1363,10 +1373,19 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
                     if (event.defaultPrevented) return;
                     selectOption(option);
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex w-full items-center justify-between gap-8", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate", children: optionContent }),
-                    checkboxIndicator
-                  ] })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "span",
+                    {
+                      className: (0, import_utils7.cx)(
+                        "flex w-full items-center gap-8",
+                        isNarrowPopover ? "justify-center" : "justify-between"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: optionContentClassName, children: optionContent }),
+                        checkboxIndicator
+                      ]
+                    }
+                  )
                 });
               })
             }

package/dist/index.mjs

@@ -856,6 +856,7 @@ var ComboboxRoot = forwardRef6(
     listClassName,
     optionClassName,
     size = "default",
+    width = "full",
     ...inputProps
   }, ref) => {
     const {
@@ -974,6 +975,7 @@ var ComboboxRoot = forwardRef6(
         setContentWidth(anchorRef.current.offsetWidth);
       }
     }, [open]);
+    const isNarrowPopover = contentWidth > 0 && contentWidth < 100;
     const emitChange = useCallback4(
       (nextValue, option) => {
         if (!isControlled) {
@@ -1134,6 +1136,12 @@ var ComboboxRoot = forwardRef6(
         input: "text-sm py-0.5"
       }
     };
+    const widthStyles = {
+      full: "w-full",
+      small: "w-[60px]",
+      medium: "w-[320px]",
+      large: "w-[400px]"
+    };
     const selectedChips = isMultiSelectEnabled && multiSelectedOptions.length > 0 ? multiSelectedOptions.map((option) => /* @__PURE__ */ jsx9(
       Chip,
       {
@@ -1153,7 +1161,7 @@ var ComboboxRoot = forwardRef6(
         "div",
         {
           ref: anchorRef,
-          className: cx7("w-full", wrapperClassName),
+          className: cx7(widthStyles[width], wrapperClassName),
           onMouseDown: isMultiSelectEnabled ? void 0 : handleSingleAnchorMouseDown,
           children: isMultiSelectEnabled ? /* @__PURE__ */ jsxs8(
             "div",
@@ -1264,7 +1272,7 @@ var ComboboxRoot = forwardRef6(
           disableOutsidePointerEvents: false,
           onOpenAutoFocus: (event) => event.preventDefault(),
           className: cx7(
-            "rounded-md border border-bg-base bg-white shadow-lg p-0 mt-1 max-h-60 overflow-auto",
+            "rounded-md border border-bg-base bg-white shadow-lg p-0 mt-1 max-h-60 overflow-auto overflow-x-hidden",
             contentClassName
           ),
           style: { width: contentWidth || void 0 },
@@ -1293,12 +1301,14 @@ var ComboboxRoot = forwardRef6(
                   isActive && "bg-bg-subtle text-fg-base",
                   isSelected && "font-medium",
                   option.disabled && "opacity-50 cursor-not-allowed",
+                  isNarrowPopover && "min-w-0 px-8 justify-center",
                   optionClassName,
                   option.element.props.className
                 );
                 const originalOnClick = option.element.props.onClick;
                 const originalOnMouseDown = option.element.props.onMouseDown;
                 const optionContent = option.element.props.children ?? option.label;
+                const optionContentClassName = isNarrowPopover ? "w-full text-center truncate" : "truncate";
                 const checkboxIndicator = isMultiSelectEnabled && /* @__PURE__ */ jsx9(
                   "span",
                   {
@@ -1334,10 +1344,19 @@ var ComboboxRoot = forwardRef6(
                     if (event.defaultPrevented) return;
                     selectOption(option);
                   },
-                  children: /* @__PURE__ */ jsxs8("span", { className: "flex w-full items-center justify-between gap-8", children: [
-                    /* @__PURE__ */ jsx9("span", { className: "truncate", children: optionContent }),
-                    checkboxIndicator
-                  ] })
+                  children: /* @__PURE__ */ jsxs8(
+                    "span",
+                    {
+                      className: cx7(
+                        "flex w-full items-center gap-8",
+                        isNarrowPopover ? "justify-center" : "justify-between"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx9("span", { className: optionContentClassName, children: optionContent }),
+                        checkboxIndicator
+                      ]
+                    }
+                  )
                 });
               })
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/forms",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "sideEffects": [
     "**/*.css"
   ],