shadcn-ui-react 0.7.13 → 0.7.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +41 -21
  2. package/dist/index.js +41 -21
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -7813,23 +7813,27 @@ var SelectContent = React46.forwardRef(
7813
7813
  cancelAnimationFrame(frame);
7814
7814
  };
7815
7815
  }, [context.activeValue, context.items, context.open]);
7816
- if (!context.open) {
7817
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
7818
- }
7819
- if (!mounted || !contentStyle) return null;
7816
+ if (!mounted) return null;
7817
+ const isVisible = context.open && Boolean(contentStyle);
7820
7818
  return (0, import_react_dom.createPortal)(
7821
7819
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
7822
7820
  "div",
7823
7821
  __spreadProps(__spreadValues({}, props), {
7824
7822
  ref: composeRefs(ref, context.contentRef),
7825
7823
  role: "listbox",
7824
+ "aria-hidden": !isVisible,
7826
7825
  "data-side": side,
7827
7826
  "data-select-content": true,
7828
7827
  className: cn(
7829
7828
  "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
7830
7829
  className
7831
7830
  ),
7832
- style: __spreadValues(__spreadValues({}, contentStyle), style),
7831
+ style: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
7832
+ position: "fixed",
7833
+ zIndex: 9999
7834
+ }), style), {
7835
+ display: isVisible ? void 0 : "none"
7836
+ }),
7833
7837
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
7834
7838
  "div",
7835
7839
  {
@@ -7840,7 +7844,7 @@ var SelectContent = React46.forwardRef(
7840
7844
  "scrollbar-gutter-stable"
7841
7845
  ),
7842
7846
  style: {
7843
- maxHeight: contentStyle.maxHeight,
7847
+ maxHeight: contentStyle == null ? void 0 : contentStyle.maxHeight,
7844
7848
  overflowX: "hidden",
7845
7849
  overflowY: "auto",
7846
7850
  overscrollBehavior: "contain",
@@ -8518,7 +8522,6 @@ var FormSelect = ({
8518
8522
  const form = (0, import_react_hook_form5.useFormContext)();
8519
8523
  const controllerControl = control != null ? control : form == null ? void 0 : form.control;
8520
8524
  const sizeClasses = getFormSizeClasses(size, customSize);
8521
- const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
8522
8525
  const normalizedOptions = React48.useMemo(() => {
8523
8526
  if (options) return options;
8524
8527
  return (items != null ? items : []).map((item) => {
@@ -8608,7 +8611,7 @@ var FormSelect = ({
8608
8611
  field.onBlur();
8609
8612
  }
8610
8613
  }
8611
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
8614
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
8612
8615
  Select2,
8613
8616
  {
8614
8617
  value: (_b = field.value) != null ? _b : "",
@@ -8617,19 +8620,36 @@ var FormSelect = ({
8617
8620
  if (!nextOpen) field.onBlur();
8618
8621
  },
8619
8622
  disabled,
8620
- children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
8621
- SelectTrigger,
8622
- {
8623
- className: classNameDefault ? cn(
8624
- formControlBase,
8625
- formInputVariants[variant],
8626
- triggerSizeClass,
8627
- hasError && formControlErrorClass,
8628
- className
8629
- ) : className,
8630
- children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
8631
- }
8632
- ) })
8623
+ size,
8624
+ customSize,
8625
+ variant,
8626
+ invalid: hasError,
8627
+ children: [
8628
+ /* @__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 }) }) }),
8629
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
8630
+ SelectContent,
8631
+ {
8632
+ position: "popper",
8633
+ sideOffset: 6,
8634
+ className: cn(
8635
+ "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
8636
+ contentClassName
8637
+ ),
8638
+ onWheelCapture: (event) => event.stopPropagation(),
8639
+ onTouchMoveCapture: (event) => event.stopPropagation(),
8640
+ children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
8641
+ SelectItem,
8642
+ {
8643
+ value: option.value,
8644
+ disabled: option.disabled,
8645
+ className: cn(sizeClasses.selectItem, itemClassName),
8646
+ children: option.label
8647
+ },
8648
+ option.value
8649
+ ))
8650
+ }
8651
+ )
8652
+ ]
8633
8653
  }
8634
8654
  ),
8635
8655
  fieldError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
package/dist/index.js CHANGED
@@ -7537,23 +7537,27 @@ var SelectContent = React46.forwardRef(
7537
7537
  cancelAnimationFrame(frame);
7538
7538
  };
7539
7539
  }, [context.activeValue, context.items, context.open]);
7540
- if (!context.open) {
7541
- return /* @__PURE__ */ jsx24("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
7542
- }
7543
- if (!mounted || !contentStyle) return null;
7540
+ if (!mounted) return null;
7541
+ const isVisible = context.open && Boolean(contentStyle);
7544
7542
  return createPortal(
7545
7543
  /* @__PURE__ */ jsx24(
7546
7544
  "div",
7547
7545
  __spreadProps(__spreadValues({}, props), {
7548
7546
  ref: composeRefs(ref, context.contentRef),
7549
7547
  role: "listbox",
7548
+ "aria-hidden": !isVisible,
7550
7549
  "data-side": side,
7551
7550
  "data-select-content": true,
7552
7551
  className: cn(
7553
7552
  "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
7554
7553
  className
7555
7554
  ),
7556
- style: __spreadValues(__spreadValues({}, contentStyle), style),
7555
+ style: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
7556
+ position: "fixed",
7557
+ zIndex: 9999
7558
+ }), style), {
7559
+ display: isVisible ? void 0 : "none"
7560
+ }),
7557
7561
  children: /* @__PURE__ */ jsx24(
7558
7562
  "div",
7559
7563
  {
@@ -7564,7 +7568,7 @@ var SelectContent = React46.forwardRef(
7564
7568
  "scrollbar-gutter-stable"
7565
7569
  ),
7566
7570
  style: {
7567
- maxHeight: contentStyle.maxHeight,
7571
+ maxHeight: contentStyle == null ? void 0 : contentStyle.maxHeight,
7568
7572
  overflowX: "hidden",
7569
7573
  overflowY: "auto",
7570
7574
  overscrollBehavior: "contain",
@@ -8242,7 +8246,6 @@ var FormSelect = ({
8242
8246
  const form = useFormContext4();
8243
8247
  const controllerControl = control != null ? control : form == null ? void 0 : form.control;
8244
8248
  const sizeClasses = getFormSizeClasses(size, customSize);
8245
- const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
8246
8249
  const normalizedOptions = React48.useMemo(() => {
8247
8250
  if (options) return options;
8248
8251
  return (items != null ? items : []).map((item) => {
@@ -8332,7 +8335,7 @@ var FormSelect = ({
8332
8335
  field.onBlur();
8333
8336
  }
8334
8337
  }
8335
- ) }) : /* @__PURE__ */ jsx26(
8338
+ ) }) : /* @__PURE__ */ jsxs16(
8336
8339
  Select2,
8337
8340
  {
8338
8341
  value: (_b = field.value) != null ? _b : "",
@@ -8341,19 +8344,36 @@ var FormSelect = ({
8341
8344
  if (!nextOpen) field.onBlur();
8342
8345
  },
8343
8346
  disabled,
8344
- children: /* @__PURE__ */ jsx26(FormControl, { children: /* @__PURE__ */ jsx26(
8345
- SelectTrigger,
8346
- {
8347
- className: classNameDefault ? cn(
8348
- formControlBase,
8349
- formInputVariants[variant],
8350
- triggerSizeClass,
8351
- hasError && formControlErrorClass,
8352
- className
8353
- ) : className,
8354
- children: /* @__PURE__ */ jsx26(SelectValue, { placeholder })
8355
- }
8356
- ) })
8347
+ size,
8348
+ customSize,
8349
+ variant,
8350
+ invalid: hasError,
8351
+ children: [
8352
+ /* @__PURE__ */ jsx26(FormControl, { children: /* @__PURE__ */ jsx26(SelectTrigger, { className, children: /* @__PURE__ */ jsx26(SelectValue, { placeholder }) }) }),
8353
+ /* @__PURE__ */ jsx26(
8354
+ SelectContent,
8355
+ {
8356
+ position: "popper",
8357
+ sideOffset: 6,
8358
+ className: cn(
8359
+ "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
8360
+ contentClassName
8361
+ ),
8362
+ onWheelCapture: (event) => event.stopPropagation(),
8363
+ onTouchMoveCapture: (event) => event.stopPropagation(),
8364
+ children: normalizedOptions.map((option) => /* @__PURE__ */ jsx26(
8365
+ SelectItem,
8366
+ {
8367
+ value: option.value,
8368
+ disabled: option.disabled,
8369
+ className: cn(sizeClasses.selectItem, itemClassName),
8370
+ children: option.label
8371
+ },
8372
+ option.value
8373
+ ))
8374
+ }
8375
+ )
8376
+ ]
8357
8377
  }
8358
8378
  ),
8359
8379
  fieldError ? /* @__PURE__ */ jsx26(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shadcn-ui-react",
3
- "version": "0.7.13",
3
+ "version": "0.7.14",
4
4
  "private": false,
5
5
  "author": "Bleker <bleker@gliyen.com>",
6
6
  "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",