shadcn-ui-react 0.7.12 → 0.7.14

package/dist/index.cjs

@@ -7813,22 +7813,27 @@ var SelectContent = React46.forwardRef(
         cancelAnimationFrame(frame);
       };
     }, [context.activeValue, context.items, context.open]);
-    if (!context.open) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
-    }
-    if (!mounted || !contentStyle) return null;
+    if (!mounted) return null;
+    const isVisible = context.open && Boolean(contentStyle);
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         __spreadProps(__spreadValues({}, props), {
           ref: composeRefs(ref, context.contentRef),
           role: "listbox",
+          "aria-hidden": !isVisible,
           "data-side": side,
+          "data-select-content": true,
           className: cn(
-            "min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
             className
           ),
-          style: __spreadValues(__spreadValues({}, contentStyle), style),
+          style: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
+            position: "fixed",
+            zIndex: 9999
+          }), style), {
+            display: isVisible ? void 0 : "none"
+          }),
           children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
@@ -7839,7 +7844,7 @@ var SelectContent = React46.forwardRef(
                 "scrollbar-gutter-stable"
               ),
               style: {
-                maxHeight: contentStyle.maxHeight,
+                maxHeight: contentStyle == null ? void 0 : contentStyle.maxHeight,
                 overflowX: "hidden",
                 overflowY: "auto",
                 overscrollBehavior: "contain",
@@ -8255,8 +8260,9 @@ function SearchableSelectBase({
       "div",
       {
         ref: contentRef,
+        "data-searchable-select-content": true,
         className: cn(
-          "overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
+          "pointer-events-auto overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
           contentClassName
         ),
         style: __spreadProps(__spreadValues({}, contentStyle), {
@@ -8516,7 +8522,6 @@ var FormSelect = ({
   const form = (0, import_react_hook_form5.useFormContext)();
   const controllerControl = control != null ? control : form == null ? void 0 : form.control;
   const sizeClasses = getFormSizeClasses(size, customSize);
-  const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
   const normalizedOptions = React48.useMemo(() => {
     if (options) return options;
     return (items != null ? items : []).map((item) => {
@@ -8606,7 +8611,7 @@ var FormSelect = ({
                 field.onBlur();
               }
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Select2,
             {
               value: (_b = field.value) != null ? _b : "",
@@ -8615,19 +8620,36 @@ var FormSelect = ({
                 if (!nextOpen) field.onBlur();
               },
               disabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                SelectTrigger,
-                {
-                  className: classNameDefault ? cn(
-                    formControlBase,
-                    formInputVariants[variant],
-                    triggerSizeClass,
-                    hasError && formControlErrorClass,
-                    className
-                  ) : className,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
-                }
-              ) })
+              size,
+              customSize,
+              variant,
+              invalid: hasError,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectTrigger, { className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  SelectContent,
+                  {
+                    position: "popper",
+                    sideOffset: 6,
+                    className: cn(
+                      "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
+                      contentClassName
+                    ),
+                    onWheelCapture: (event) => event.stopPropagation(),
+                    onTouchMoveCapture: (event) => event.stopPropagation(),
+                    children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      SelectItem,
+                      {
+                        value: option.value,
+                        disabled: option.disabled,
+                        className: cn(sizeClasses.selectItem, itemClassName),
+                        children: option.label
+                      },
+                      option.value
+                    ))
+                  }
+                )
+              ]
             }
           ),
           fieldError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -9836,7 +9858,7 @@ var TableHead = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -9850,7 +9872,7 @@ var TableCell = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "p-2 align-middle has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)

package/dist/index.js

@@ -7537,22 +7537,27 @@ var SelectContent = React46.forwardRef(
         cancelAnimationFrame(frame);
       };
     }, [context.activeValue, context.items, context.open]);
-    if (!context.open) {
-      return /* @__PURE__ */ jsx24("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
-    }
-    if (!mounted || !contentStyle) return null;
+    if (!mounted) return null;
+    const isVisible = context.open && Boolean(contentStyle);
     return createPortal(
       /* @__PURE__ */ jsx24(
         "div",
         __spreadProps(__spreadValues({}, props), {
           ref: composeRefs(ref, context.contentRef),
           role: "listbox",
+          "aria-hidden": !isVisible,
           "data-side": side,
+          "data-select-content": true,
           className: cn(
-            "min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
             className
           ),
-          style: __spreadValues(__spreadValues({}, contentStyle), style),
+          style: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
+            position: "fixed",
+            zIndex: 9999
+          }), style), {
+            display: isVisible ? void 0 : "none"
+          }),
           children: /* @__PURE__ */ jsx24(
             "div",
             {
@@ -7563,7 +7568,7 @@ var SelectContent = React46.forwardRef(
                 "scrollbar-gutter-stable"
               ),
               style: {
-                maxHeight: contentStyle.maxHeight,
+                maxHeight: contentStyle == null ? void 0 : contentStyle.maxHeight,
                 overflowX: "hidden",
                 overflowY: "auto",
                 overscrollBehavior: "contain",
@@ -7979,8 +7984,9 @@ function SearchableSelectBase({
       "div",
       {
         ref: contentRef,
+        "data-searchable-select-content": true,
         className: cn(
-          "overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
+          "pointer-events-auto overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
           contentClassName
         ),
         style: __spreadProps(__spreadValues({}, contentStyle), {
@@ -8240,7 +8246,6 @@ var FormSelect = ({
   const form = useFormContext4();
   const controllerControl = control != null ? control : form == null ? void 0 : form.control;
   const sizeClasses = getFormSizeClasses(size, customSize);
-  const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
   const normalizedOptions = React48.useMemo(() => {
     if (options) return options;
     return (items != null ? items : []).map((item) => {
@@ -8330,7 +8335,7 @@ var FormSelect = ({
                 field.onBlur();
               }
             }
-          ) }) : /* @__PURE__ */ jsx26(
+          ) }) : /* @__PURE__ */ jsxs16(
             Select2,
             {
               value: (_b = field.value) != null ? _b : "",
@@ -8339,19 +8344,36 @@ var FormSelect = ({
                 if (!nextOpen) field.onBlur();
               },
               disabled,
-              children: /* @__PURE__ */ jsx26(FormControl, { children: /* @__PURE__ */ jsx26(
-                SelectTrigger,
-                {
-                  className: classNameDefault ? cn(
-                    formControlBase,
-                    formInputVariants[variant],
-                    triggerSizeClass,
-                    hasError && formControlErrorClass,
-                    className
-                  ) : className,
-                  children: /* @__PURE__ */ jsx26(SelectValue, { placeholder })
-                }
-              ) })
+              size,
+              customSize,
+              variant,
+              invalid: hasError,
+              children: [
+                /* @__PURE__ */ jsx26(FormControl, { children: /* @__PURE__ */ jsx26(SelectTrigger, { className, children: /* @__PURE__ */ jsx26(SelectValue, { placeholder }) }) }),
+                /* @__PURE__ */ jsx26(
+                  SelectContent,
+                  {
+                    position: "popper",
+                    sideOffset: 6,
+                    className: cn(
+                      "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
+                      contentClassName
+                    ),
+                    onWheelCapture: (event) => event.stopPropagation(),
+                    onTouchMoveCapture: (event) => event.stopPropagation(),
+                    children: normalizedOptions.map((option) => /* @__PURE__ */ jsx26(
+                      SelectItem,
+                      {
+                        value: option.value,
+                        disabled: option.disabled,
+                        className: cn(sizeClasses.selectItem, itemClassName),
+                        children: option.label
+                      },
+                      option.value
+                    ))
+                  }
+                )
+              ]
             }
           ),
           fieldError ? /* @__PURE__ */ jsx26(
@@ -9596,7 +9618,7 @@ var TableHead = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -9610,7 +9632,7 @@ var TableCell = React63.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        "p-2 align-middle has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)

package/dist/style.css

@@ -61,10 +61,13 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -631,6 +634,9 @@
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .max-h-\[calc\(100vh-2rem\)\] {
+    max-height: calc(100vh - 2rem);
+  }
   .max-h-full {
     max-height: 100%;
   }
@@ -718,6 +724,9 @@
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[calc\(100vw-1rem\)\] {
+    width: calc(100vw - 1rem);
+  }
   .w-full {
     width: 100%;
   }
@@ -1479,6 +1488,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1491,6 +1503,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1548,6 +1563,9 @@
   .text-left {
     text-align: left;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -2979,6 +2997,11 @@
       opacity: 50%;
     }
   }
+  .has-\[\[role\=checkbox\]\]\:pr-0 {
+    &:has(*:is([role=checkbox])) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
   .aria-selected\:bg-accent {
     &[aria-selected=true] {
       background-color: var(--accent);
@@ -3713,11 +3736,52 @@
       display: none;
     }
   }
+  .sm\:w-fit {
+    @media (width >= 40rem) {
+      width: -moz-fit-content;
+      width: fit-content;
+    }
+  }
+  .sm\:max-w-2xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-2xl);
+    }
+  }
+  .sm\:max-w-3xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-3xl);
+    }
+  }
+  .sm\:max-w-\[calc\(100vw-2rem\)\] {
+    @media (width >= 40rem) {
+      max-width: calc(100vw - 2rem);
+    }
+  }
+  .sm\:max-w-lg {
+    @media (width >= 40rem) {
+      max-width: var(--container-lg);
+    }
+  }
+  .sm\:max-w-md {
+    @media (width >= 40rem) {
+      max-width: var(--container-md);
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
     }
   }
+  .sm\:max-w-xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-xl);
+    }
+  }
+  .sm\:max-w-xs {
+    @media (width >= 40rem) {
+      max-width: var(--container-xs);
+    }
+  }
   .sm\:grid-cols-\[1fr_auto\] {
     @media (width >= 40rem) {
       grid-template-columns: 1fr auto;
@@ -4212,11 +4276,6 @@
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
-  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
-    &:has([role=checkbox]) {
-      padding-right: calc(var(--spacing) * 0);
-    }
-  }
   .\*\:\[\[role\=checkbox\]\]\:translate-y-0\.5 {
     :is(& > *) {
       &:is([role=checkbox]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.12",
+  "version": "0.7.14",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",