@bonprix-ds/react-select 1.0.9 → 1.0.11

package/dist/no-styles.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Select.css

@@ -0,0 +1,7 @@
+/* Radix prepends focus guards to `body` while a dialog is open. Chromium saves the scroll anchor of a page that is
+   left as an `nth-child` path, which the guards shift, so going back would restore the scroll position of another
+   element. Without an anchor, Chromium restores the plain scroll offset. Keyed to the guards rather than to the
+   open state, so it holds through the closing animation and across every copy of the package on the page. */
+:root:has(> body > [data-radix-focus-guard]) {
+  overflow-anchor: none;
+}

package/dist/src/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../src/Select.tsx"],"sourcesContent":["import React from \"react\";\n\nimport SelectItem from \"./SelectItem\";\nimport SelectRoot, { type Props } from \"./SelectRoot\";\n\nexport type { Props };\n\nconst Select = (props: Props) => <SelectRoot {...props} />;\n\nSelect.displayName = \"Select\";\n\nSelect.Item = SelectItem;\n\nexport default Select;\n"],"mappings":";;;;;AAOA,IAAM,KAAU,MAAiB,kBAAC,GAAD,EAAY,GAAI,EAAQ,CAAA;AAEzD,EAAO,cAAc,UAErB,EAAO,OAAO"}
+{"version":3,"file":"Select.js","names":["SelectItem","SelectRoot","Select","props"],"sources":["../../src/Select.tsx"],"sourcesContent":["import React from \"react\";\n\nimport SelectItem from \"./SelectItem\";\nimport SelectRoot, { type Props } from \"./SelectRoot\";\n\nexport type { Props };\n\nconst Select = (props: Props) => <SelectRoot {...props} />;\n\nSelect.displayName = \"Select\";\n\nSelect.Item = SelectItem;\n\nexport default Select;\n"],"mappings":";;;;;AAOA,IAAME,KAAU,MAAiB,kBAACD,GAAD,EAAY,GAAIE,EAAQ,CAAA;AAEzD,EAAO,cAAc,UAErB,EAAO,OAAOH"}

package/dist/src/SelectItem.js

@@ -5,13 +5,13 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/SelectItem.tsx
 var r = t({
 	base: [
-		"px-1 py-2 typography-input-text outline-none select-none text-wrap",
-		"underline-offset-[30%] hover:underline data-[highlighted]:outline-none data-[highlighted]:underline data-[disabled]:no-underline",
+		"typography-input-text select-none text-wrap px-1 py-2 outline-none",
+		"underline-offset-[30%] hover:underline data-[highlighted]:underline data-[disabled]:no-underline data-[highlighted]:outline-none",
 		"data-[state=checked]:underline data-[state=checked]:decoration-[15%]",
-		"data-[state=checked]:hover:decoration-[25%] data-[state=checked]:data-[highlighted]:decoration-[25%]"
+		"data-[state=checked]:data-[highlighted]:decoration-[25%] data-[state=checked]:hover:decoration-[25%]"
 	],
 	variants: { disabled: {
-		false: "text-clr-primary cursor-pointer",
+		false: "cursor-pointer text-clr-primary",
 		true: "text-clr-disabled"
 	} }
 }), i = ({ children: t, value: i, disabled: a = !1, hidden: o = !1, ref: s }) => {

package/dist/src/SelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","names":[],"sources":["../../src/SelectItem.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport React, { ReactNode, RefObject } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: [\n    \"px-1 py-2 typography-input-text outline-none select-none text-wrap\",\n    \"underline-offset-[30%] hover:underline data-[highlighted]:outline-none data-[highlighted]:underline data-[disabled]:no-underline\", // focus/hover\n    \"data-[state=checked]:underline data-[state=checked]:decoration-[15%]\", // selected\n    \"data-[state=checked]:hover:decoration-[25%] data-[state=checked]:data-[highlighted]:decoration-[25%]\", // selected + focus/hover\n  ],\n  variants: {\n    disabled: {\n      false: \"text-clr-primary cursor-pointer\",\n      true: \"text-clr-disabled\",\n    },\n  },\n});\n\nexport interface SelectItemProps {\n  /** The value of the select item. This will be used as the value when the select is submitted. */\n  value: string;\n  /** The content text of the select item. */\n  children?: ReactNode;\n  /** If `true`, the select item will be disabled and not selectable. */\n  disabled?: boolean;\n  /** If `true`, the select item will be hidden from the dropdown menu. */\n  hidden?: boolean;\n  /** A reference to the root element of the select item. */\n  ref?: RefObject<HTMLDivElement>;\n}\n\nconst SelectItem = ({ children, value, disabled = false, hidden = false, ref }: SelectItemProps) => {\n  const base = generateClasses({ disabled });\n  return (\n    <SelectPrimitive.Item value={value} disabled={disabled} hidden={hidden} ref={ref} className={base}>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n};\n\nSelectItem.displayName = \"Select.Item\";\n\nexport default SelectItem;\n"],"mappings":";;;;;AAIA,IAAM,IAAkB,EAAG;CACzB,MAAM;EACJ;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC,GAeK,KAAc,EAAE,aAAU,UAAO,cAAW,IAAO,YAAS,IAAO,aAA2B;CAClG,IAAM,IAAO,EAAgB,EAAE,YAAS,CAAC;CACzC,OACE,kBAAC,EAAgB,MAAjB;EAA6B;EAAiB;EAAkB;EAAa;EAAK,WAAW;EAC3F,UAAA,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA;CAC1C,CAAA;AAE1B;AAEA,EAAW,cAAc"}
+{"version":3,"file":"SelectItem.js","names":["SelectPrimitive","generateClasses","tv","SelectItem","base"],"sources":["../../src/SelectItem.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport React, { ReactNode, RefObject } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: [\n    \"typography-input-text select-none text-wrap px-1 py-2 outline-none\",\n    \"underline-offset-[30%] hover:underline data-[highlighted]:underline data-[disabled]:no-underline data-[highlighted]:outline-none\", // focus/hover\n    \"data-[state=checked]:underline data-[state=checked]:decoration-[15%]\", // selected\n    \"data-[state=checked]:data-[highlighted]:decoration-[25%] data-[state=checked]:hover:decoration-[25%]\", // selected + focus/hover\n  ],\n  variants: {\n    disabled: {\n      false: \"cursor-pointer text-clr-primary\",\n      true: \"text-clr-disabled\",\n    },\n  },\n});\n\nexport interface SelectItemProps {\n  /** The value of the select item. This will be used as the value when the select is submitted. */\n  value: string;\n  /** The content text of the select item. */\n  children?: ReactNode;\n  /** If `true`, the select item will be disabled and not selectable. */\n  disabled?: boolean;\n  /** If `true`, the select item will be hidden from the dropdown menu. */\n  hidden?: boolean;\n  /** A reference to the root element of the select item. */\n  ref?: RefObject<HTMLDivElement>;\n}\n\nconst SelectItem = ({ children, value, disabled = false, hidden = false, ref }: SelectItemProps) => {\n  const base = generateClasses({ disabled });\n  return (\n    <SelectPrimitive.Item value={value} disabled={disabled} hidden={hidden} ref={ref} className={base}>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n};\n\nSelectItem.displayName = \"Select.Item\";\n\nexport default SelectItem;\n"],"mappings":";;;;;AAIA,IAAMC,IAAkBC,EAAG;CACzB,MAAM;EACJ;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC,GAeKC,KAAc,EAAE,aAAU,UAAO,cAAW,IAAO,YAAS,IAAO,aAA2B;CAClG,IAAMC,IAAOH,EAAgB,EAAE,YAAS,CAAC;CACzC,OACE,kBAACD,EAAgB,MAAjB;EAA6B;EAAiB;EAAkB;EAAa;EAAK,WAAWI;EAC3F,UAAA,kBAACJ,EAAgB,UAAjB,EAA2B,YAAmC,CAAA;CAC1C,CAAA;AAE1B;AAEA,EAAW,cAAc"}

package/dist/src/SelectRoot.d.ts

@@ -1,4 +1,5 @@
 import React, { RefObject } from "react";
+import "./Select.css";
 interface BaseProps {
     /** The id of the input field. */
     id?: string;

package/dist/src/SelectRoot.js

@@ -1,93 +1,99 @@
 "use client";
-import { useId as e, useState as t } from "react";
-import * as n from "@radix-ui/react-select";
-import { tv as r } from "tailwind-variants";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { InputWrapper as o } from "@bonprix-ds/internal-components";
-import s from "@bonprix-ds/react-icon";
-import { useSafeAreaInsetBottom as c, useZIndex as l } from "@bonprix-ds/utils";
+import { useId as e, useRef as t, useState as n } from "react";
+import * as r from "@radix-ui/react-select";
+import { tv as i } from "tailwind-variants";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { InputWrapper as s } from "@bonprix-ds/internal-components";
+import c from "@bonprix-ds/react-icon";
+import { useSafeAreaInsetBottom as l, useZIndex as u } from "@bonprix-ds/utils";
+import "#styles";
 //#region src/SelectRoot.tsx
-var u = r({
+var d = i({
 	slots: {
-		trigger: "flex w-full align-center items-center gap-3 p-3 outline-none",
-		icon: "w-5 h-5 fill-inherit shrink-0 [button[data-state='open']_span>&]:rotate-180",
+		trigger: "align-center flex w-full items-center gap-3 p-3 outline-none",
+		icon: "h-5 w-5 shrink-0 fill-inherit [button[data-state='open']_span>&]:rotate-180",
 		menu: [
-			"group/menu preflight bg-clr-bg-main overflow-hidden whitespace-nowrap",
-			"border border-clr-primary rounded data-[side=top]:rounded-b-none data-[side=bottom]:rounded-t-none",
+			"group/menu preflight overflow-hidden whitespace-nowrap bg-clr-bg-main",
+			"rounded border border-clr-primary data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none",
 			"w-[calc(var(--radix-select-trigger-width)+0.125rem)]"
 		],
-		viewport: "max-h-[calc(283/16*1rem)] group-data-[side=top]/menu:max-h-[calc(302/16*1rem)] overscroll-none",
+		viewport: "max-h-[calc(283/16*1rem)] overscroll-none group-data-[side=top]/menu:max-h-[calc(302/16*1rem)]",
 		list: "flex flex-col gap-1 p-2",
-		text: ["h-[1lh] typography-input-text grow text-left truncate", "text-clr-primary"],
-		labelClone: "hidden sticky bottom-0 bg-clr-bg-main typography-input-label pb-[0.0625rem] pl-[0.6875rem] pe-2"
+		text: ["typography-input-text h-[1lh] grow truncate text-left", "text-clr-primary"],
+		labelClone: "typography-input-label sticky bottom-0 hidden bg-clr-bg-main pb-[0.0625rem] pe-2 pl-[0.6875rem]"
 	},
 	variants: { labelFloated: { true: { labelClone: "group-data-[side=top]/menu:block" } } }
-}), d = ({ id: r, name: d, label: f, onValueChange: p, children: m, disabled: h = !1, error: g = !1, required: _ = !1, helperText: v = "", errorText: y = "", ref: b, ...x }) => {
-	let S = e(), C = r ?? S, w = e(), T = e(), E = x.value !== void 0, D = E ? x.value : void 0, O = E ? void 0 : x.defaultValue, k = E ? !!x.value : !!O, [A, j] = t(k), { trigger: M, icon: N, menu: P, viewport: F, list: I, text: L, labelClone: R } = u({
-		error: g,
-		labelFloated: A
-	}), z = l(), B;
-	v && (B = w), g && y && (B = B ? B + " " + T : T);
-	let V = c();
-	return /* @__PURE__ */ i(o, {
-		label: f,
-		id: C,
-		required: _,
-		labelFloated: A,
-		disabled: h,
-		error: g,
-		errorText: y,
-		errorTextId: T,
-		helperText: v,
-		helperTextId: w,
+}), f = ({ id: i, name: f, label: p, onValueChange: m, children: h, disabled: g = !1, error: _ = !1, required: v = !1, helperText: y = "", errorText: b = "", ref: x, ...S }) => {
+	let C = e(), w = i ?? C, T = e(), E = e(), D = S.value !== void 0, O = D ? S.value : void 0, k = D ? void 0 : S.defaultValue, A = D ? !!S.value : !!k, [j, M] = n(A), { trigger: N, icon: P, menu: F, viewport: I, list: L, text: R, labelClone: z } = d({
+		error: _,
+		labelFloated: j
+	}), B = u(), V;
+	y && (V = T), _ && b && (V = V ? V + " " + E : E);
+	let H = l(), U = t(!1);
+	return /* @__PURE__ */ a(s, {
+		label: p,
+		id: w,
+		required: v,
+		labelFloated: j,
+		disabled: g,
+		error: _,
+		errorText: b,
+		errorTextId: E,
+		helperText: y,
+		helperTextId: T,
 		componentName: "select",
-		children: /* @__PURE__ */ a(n.Root, {
-			name: d,
-			disabled: h,
-			value: D,
+		children: /* @__PURE__ */ o(r.Root, {
+			name: f,
+			disabled: g,
+			value: O,
 			onValueChange: (e) => {
-				j(!0), p && p(e);
+				M(!0), m && m(e);
 			},
-			defaultValue: O,
-			children: [/* @__PURE__ */ a(n.Trigger, {
-				id: C,
-				className: M(),
-				ref: b,
-				"aria-describedby": B,
-				"aria-invalid": g ? "true" : void 0,
+			defaultValue: k,
+			children: [/* @__PURE__ */ o(r.Trigger, {
+				id: w,
+				className: N(),
+				ref: x,
+				"aria-describedby": V,
+				"aria-invalid": _ ? "true" : void 0,
 				"data-bpds": "select",
-				children: [/* @__PURE__ */ i("span", {
-					className: L(),
-					children: /* @__PURE__ */ i(n.Value, {})
-				}), /* @__PURE__ */ i(n.Icon, { children: /* @__PURE__ */ i(s, {
+				onPointerDown: () => U.current = !1,
+				onClick: (e) => {
+					U.current && (U.current = !1, e.preventDefault());
+				},
+				children: [/* @__PURE__ */ a("span", {
+					className: R(),
+					children: /* @__PURE__ */ a(r.Value, {})
+				}), /* @__PURE__ */ a(r.Icon, { children: /* @__PURE__ */ a(c, {
 					variant: "arrow-down",
-					className: N()
+					className: P()
 				}) })]
-			}), /* @__PURE__ */ i(n.Portal, { children: /* @__PURE__ */ i(n.Content, {
+			}), /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(r.Content, {
 				position: "popper",
 				side: "bottom",
 				align: "start",
 				alignOffset: -1,
-				className: P(),
-				style: { zIndex: z },
-				collisionPadding: V ? { bottom: V + 10 } : void 0,
-				children: /* @__PURE__ */ a(n.Viewport, {
-					className: F(),
-					children: [/* @__PURE__ */ i("div", {
-						className: I(),
-						children: m
-					}), /* @__PURE__ */ a("div", {
-						className: R(),
+				className: F(),
+				style: { zIndex: B },
+				collisionPadding: H ? { bottom: H + 10 } : void 0,
+				onPointerDownOutside: (e) => U.current = e.detail.originalEvent.pointerType !== "mouse",
+				children: /* @__PURE__ */ o(r.Viewport, {
+					className: I(),
+					children: [/* @__PURE__ */ a("div", {
+						className: L(),
+						children: h
+					}), /* @__PURE__ */ o("div", {
+						className: z(),
 						"aria-hidden": "true",
-						children: [f, _ && /* @__PURE__ */ i("span", { children: "*" })]
+						children: [p, v && /* @__PURE__ */ a("span", { children: "*" })]
 					})]
 				})
 			}) })]
 		})
 	});
 };
-d.displayName = "Select";
+f.displayName = "Select";
 //#endregion
-export { d as default };
+export { f as default };
 
 //# sourceMappingURL=SelectRoot.js.map

package/dist/src/SelectRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectRoot.js","names":[],"sources":["../../src/SelectRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport React, { RefObject, useId, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport Icon from \"@bonprix-ds/react-icon\";\nimport { useSafeAreaInsetBottom, useZIndex } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n  slots: {\n    trigger: \"flex w-full align-center items-center gap-3 p-3 outline-none\",\n    icon: \"w-5 h-5 fill-inherit shrink-0 [button[data-state='open']_span>&]:rotate-180\",\n    menu: [\n      \"group/menu preflight bg-clr-bg-main overflow-hidden whitespace-nowrap\",\n      \"border border-clr-primary rounded data-[side=top]:rounded-b-none data-[side=bottom]:rounded-t-none\",\n      \"w-[calc(var(--radix-select-trigger-width)+0.125rem)]\", // border is managed on InputWrapper, we need to add 0.125rem here to stay flush visually\n    ],\n    // max-height when opened to bottom : 6.5 x 38px (item height) + 5 x 4px (gap) + 8px x 2 (padding top or bottom) = 283px\n    // max-height when opened to top:    283px + 19px label clone = 302px\n    viewport: \"max-h-[calc(283/16*1rem)] group-data-[side=top]/menu:max-h-[calc(302/16*1rem)] overscroll-none\",\n    list: \"flex flex-col gap-1 p-2\",\n    text: [\n      \"h-[1lh] typography-input-text grow text-left truncate\",\n      // override Safari iOS UA bluish style coming from the button tag\n      \"text-clr-primary\",\n    ],\n    labelClone: \"hidden sticky bottom-0 bg-clr-bg-main typography-input-label pb-[0.0625rem] pl-[0.6875rem] pe-2\", // mimick label\n  },\n  variants: {\n    labelFloated: {\n      // We show a label clone inside the dropdown whenever the actual label is floated and hidden behind the dropdown.\n      // Whehn not floated, the label is still visible inside the Select box as kind of a placeholder, so no need to duplicate it then.\n      true: { labelClone: \"group-data-[side=top]/menu:block\" },\n    },\n  },\n});\n\ninterface BaseProps {\n  /** The id of the input field. */\n  id?: string;\n  /** The visible label for the input field. */\n  label: string;\n  /** This is where Select.Item subcomponents should be placed. */\n  children: React.ReactNode;\n  /** The name of the input field. */\n  name?: string;\n  /** If `true`, disables the input. */\n  disabled?: boolean;\n  /** If `true`, the input field is in an error state. Required for `errorText` to be shown. */\n  error?: boolean;\n  /** If `true`, marks the input as required. */\n  required?: boolean;\n  /** A text that further describes the field and helps with filling out the form correctly. */\n  helperText?: string;\n  /** A text message that appears when the field is invalid. Only visible when `error` is set to `true`. */\n  errorText?: string;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> */\n  describedBy?: string;\n  /** Reference to the root element of the select. */\n  ref?: RefObject<HTMLButtonElement>;\n}\n\ninterface ControlledSelectProps extends BaseProps {\n  /** The current value of the select. Should be used in conjunction with `onValueChange`. */\n  value: string;\n  /** The default value of the select. Should be used when select is uncontrolled. */\n  defaultValue?: never;\n  /** Callback that is triggered when the value changes. */\n  onValueChange: (value: string) => void;\n}\n\ninterface UncontrolledSelectProps extends BaseProps {\n  value?: never;\n  defaultValue: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport type Props = ControlledSelectProps | UncontrolledSelectProps;\n\nconst SelectRoot = ({\n  id,\n  name,\n  label,\n  onValueChange,\n  children,\n  disabled = false,\n  error = false,\n  required = false,\n  helperText = \"\",\n  errorText = \"\",\n  ref,\n  ...unionProps\n}: Props) => {\n  const generatedId = useId();\n  const calculatedId = id ?? generatedId;\n  const helperTextId = useId();\n  const errorTextId = useId();\n\n  const isControlled = unionProps.value !== undefined;\n  const value = isControlled ? unionProps.value : undefined;\n  const defaultValue = isControlled ? undefined : unionProps.defaultValue;\n  const initialLabelFloated = isControlled ? !!unionProps.value : !!defaultValue;\n  const [labelFloated, setLabelFloated] = useState(initialLabelFloated);\n\n  const variations = { error, labelFloated };\n  const { trigger, icon, menu, viewport, list, text, labelClone } = generateClasses(variations);\n  const zIndex = useZIndex();\n\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n\n  const safeAreaInsetBottom = useSafeAreaInsetBottom();\n\n  const handleValueChange = (value: string) => {\n    setLabelFloated(true);\n    if (onValueChange) {\n      onValueChange(value);\n    }\n  };\n\n  return (\n    <InputWrapper\n      label={label}\n      id={calculatedId}\n      required={required}\n      labelFloated={labelFloated}\n      disabled={disabled}\n      error={error}\n      errorText={errorText}\n      errorTextId={errorTextId}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      componentName=\"select\"\n    >\n      <SelectPrimitive.Root name={name} disabled={disabled} value={value} onValueChange={handleValueChange} defaultValue={defaultValue}>\n        <SelectPrimitive.Trigger\n          id={calculatedId}\n          className={trigger()}\n          ref={ref}\n          aria-describedby={ariaDescribedBy}\n          aria-invalid={error ? \"true\" : undefined}\n          data-bpds=\"select\"\n        >\n          <span className={text()}>\n            <SelectPrimitive.Value />\n          </span>\n          <SelectPrimitive.Icon>\n            <Icon variant=\"arrow-down\" className={icon()} />\n          </SelectPrimitive.Icon>\n        </SelectPrimitive.Trigger>\n        <SelectPrimitive.Portal>\n          <SelectPrimitive.Content\n            position=\"popper\"\n            side=\"bottom\"\n            align=\"start\"\n            alignOffset={-1} // no idea why we suddently need to adjust it\n            className={menu()}\n            style={{ zIndex }}\n            collisionPadding={safeAreaInsetBottom ? { bottom: safeAreaInsetBottom + 10 } : undefined}\n          >\n            <SelectPrimitive.Viewport className={viewport()}>\n              <div className={list()}>{children}</div>\n              {/* Scrollbar should go until the end. So we need to use a pseudo element instad of padding */}\n              <div className={labelClone()} aria-hidden=\"true\">\n                {label}\n                {required && <span>*</span>}\n              </div>\n            </SelectPrimitive.Viewport>\n          </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n      </SelectPrimitive.Root>\n    </InputWrapper>\n  );\n};\n\nSelectRoot.displayName = \"Select\";\n\nexport default SelectRoot;\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,SAAS;EACT,MAAM;EACN,MAAM;GACJ;GACA;GACA;EACF;EAGA,UAAU;EACV,MAAM;EACN,MAAM,CACJ,yDAEA,kBACF;EACA,YAAY;CACd;CACA,UAAU,EACR,cAAc,EAGZ,MAAM,EAAE,YAAY,mCAAmC,EACzD,EACF;AACF,CAAC,GA4CK,KAAc,EAClB,OACA,SACA,UACA,kBACA,aACA,cAAW,IACX,WAAQ,IACR,cAAW,IACX,gBAAa,IACb,eAAY,IACZ,QACA,GAAG,QACQ;CACX,IAAM,IAAc,EAAM,GACpB,IAAe,KAAM,GACrB,IAAe,EAAM,GACrB,IAAc,EAAM,GAEpB,IAAe,EAAW,UAAU,KAAA,GACpC,IAAQ,IAAe,EAAW,QAAQ,KAAA,GAC1C,IAAe,IAAe,KAAA,IAAY,EAAW,cACrD,IAAsB,IAAe,CAAC,CAAC,EAAW,QAAQ,CAAC,CAAC,GAC5D,CAAC,GAAc,KAAmB,EAAS,CAAmB,GAG9D,EAAE,YAAS,SAAM,SAAM,aAAU,SAAM,SAAM,kBAAe,EAAgB;EAD7D;EAAO;CACsD,CAAU,GACtF,IAAS,EAAU,GAErB;CAIJ,AAHI,MACF,IAAkB,IAEhB,KAAS,MACX,IAAkB,IAAkB,IAAkB,MAAM,IAAc;CAG5E,IAAM,IAAsB,EAAuB;CASnD,OACE,kBAAC,GAAD;EACS;EACP,IAAI;EACM;EACI;EACJ;EACH;EACI;EACE;EACD;EACE;EACd,eAAc;EAEd,UAAA,kBAAC,EAAgB,MAAjB;GAA4B;GAAgB;GAAiB;GAAO,gBArB7C,MAAkB;IAE3C,AADA,EAAgB,EAAI,GAChB,KACF,EAAc,CAAK;GAEvB;GAgBwH;GAApH,UAAA,CACE,kBAAC,EAAgB,SAAjB;IACE,IAAI;IACJ,WAAW,EAAQ;IACd;IACL,oBAAkB;IAClB,gBAAc,IAAQ,SAAS,KAAA;IAC/B,aAAU;IANZ,UAAA,CAQE,kBAAC,QAAD;KAAM,WAAW,EAAK;KACpB,UAAA,kBAAC,EAAgB,OAAjB,CAAwB,CAAA;IACpB,CAAA,GACN,kBAAC,EAAgB,MAAjB,EAAA,UACE,kBAAC,GAAD;KAAM,SAAQ;KAAa,WAAW,EAAK;IAAI,CAAA,EAC3B,CAAA,CACC;GACzB,CAAA,GAAA,kBAAC,EAAgB,QAAjB,EAAA,UACE,kBAAC,EAAgB,SAAjB;IACE,UAAS;IACT,MAAK;IACL,OAAM;IACN,aAAa;IACb,WAAW,EAAK;IAChB,OAAO,EAAE,UAAO;IAChB,kBAAkB,IAAsB,EAAE,QAAQ,IAAsB,GAAG,IAAI,KAAA;IAE/E,UAAA,kBAAC,EAAgB,UAAjB;KAA0B,WAAW,EAAS;KAA9C,UAAA,CACE,kBAAC,OAAD;MAAK,WAAW,EAAK;MAAI;KAAc,CAAA,GAEvC,kBAAC,OAAD;MAAK,WAAW,EAAW;MAAG,eAAY;MAA1C,UAAA,CACG,GACA,KAAY,kBAAC,QAAD,EAAA,UAAM,IAAO,CAAA,CACvB;KACmB,CAAA,CAAA;;GACH,CAAA,EACH,CAAA,CACJ;;CACV,CAAA;AAElB;AAEA,EAAW,cAAc"}
+{"version":3,"file":"SelectRoot.js","names":["SelectPrimitive","Icon","generateClasses","tv","SelectRoot","unionProps","generatedId","useId","calculatedId","id","helperTextId","errorTextId","isControlled","value","defaultValue","initialLabelFloated","labelFloated","setLabelFloated","useState","zIndex","useZIndex","ariaDescribedBy","helperText","error","errorText","safeAreaInsetBottom","useSafeAreaInsetBottom","ignoreTriggerClickRef","useRef","InputWrapper","onValueChange","trigger","event","text","icon","menu","viewport","list","labelClone","label","required"],"sources":["../../src/SelectRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport React, { RefObject, useId, useRef, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport Icon from \"@bonprix-ds/react-icon\";\nimport { useSafeAreaInsetBottom, useZIndex } from \"@bonprix-ds/utils\";\n\nimport \"./Select.css\";\n\nconst generateClasses = tv({\n  slots: {\n    trigger: \"align-center flex w-full items-center gap-3 p-3 outline-none\",\n    icon: \"h-5 w-5 shrink-0 fill-inherit [button[data-state='open']_span>&]:rotate-180\",\n    menu: [\n      \"group/menu preflight overflow-hidden whitespace-nowrap bg-clr-bg-main\",\n      \"rounded border border-clr-primary data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none\",\n      \"w-[calc(var(--radix-select-trigger-width)+0.125rem)]\", // border is managed on InputWrapper, we need to add 0.125rem here to stay flush visually\n    ],\n    // max-height when opened to bottom : 6.5 x 38px (item height) + 5 x 4px (gap) + 8px x 2 (padding top or bottom) = 283px\n    // max-height when opened to top:    283px + 19px label clone = 302px\n    viewport: \"max-h-[calc(283/16*1rem)] overscroll-none group-data-[side=top]/menu:max-h-[calc(302/16*1rem)]\",\n    list: \"flex flex-col gap-1 p-2\",\n    text: [\n      \"typography-input-text h-[1lh] grow truncate text-left\",\n      // override Safari iOS UA bluish style coming from the button tag\n      \"text-clr-primary\",\n    ],\n    labelClone: \"typography-input-label sticky bottom-0 hidden bg-clr-bg-main pb-[0.0625rem] pe-2 pl-[0.6875rem]\", // mimick label\n  },\n  variants: {\n    labelFloated: {\n      // We show a label clone inside the dropdown whenever the actual label is floated and hidden behind the dropdown.\n      // Whehn not floated, the label is still visible inside the Select box as kind of a placeholder, so no need to duplicate it then.\n      true: { labelClone: \"group-data-[side=top]/menu:block\" },\n    },\n  },\n});\n\ninterface BaseProps {\n  /** The id of the input field. */\n  id?: string;\n  /** The visible label for the input field. */\n  label: string;\n  /** This is where Select.Item subcomponents should be placed. */\n  children: React.ReactNode;\n  /** The name of the input field. */\n  name?: string;\n  /** If `true`, disables the input. */\n  disabled?: boolean;\n  /** If `true`, the input field is in an error state. Required for `errorText` to be shown. */\n  error?: boolean;\n  /** If `true`, marks the input as required. */\n  required?: boolean;\n  /** A text that further describes the field and helps with filling out the form correctly. */\n  helperText?: string;\n  /** A text message that appears when the field is invalid. Only visible when `error` is set to `true`. */\n  errorText?: string;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> */\n  describedBy?: string;\n  /** Reference to the root element of the select. */\n  ref?: RefObject<HTMLButtonElement>;\n}\n\ninterface ControlledSelectProps extends BaseProps {\n  /** The current value of the select. Should be used in conjunction with `onValueChange`. */\n  value: string;\n  /** The default value of the select. Should be used when select is uncontrolled. */\n  defaultValue?: never;\n  /** Callback that is triggered when the value changes. */\n  onValueChange: (value: string) => void;\n}\n\ninterface UncontrolledSelectProps extends BaseProps {\n  value?: never;\n  defaultValue: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport type Props = ControlledSelectProps | UncontrolledSelectProps;\n\nconst SelectRoot = ({\n  id,\n  name,\n  label,\n  onValueChange,\n  children,\n  disabled = false,\n  error = false,\n  required = false,\n  helperText = \"\",\n  errorText = \"\",\n  ref,\n  ...unionProps\n}: Props) => {\n  const generatedId = useId();\n  const calculatedId = id ?? generatedId;\n  const helperTextId = useId();\n  const errorTextId = useId();\n\n  const isControlled = unionProps.value !== undefined;\n  const value = isControlled ? unionProps.value : undefined;\n  const defaultValue = isControlled ? undefined : unionProps.defaultValue;\n  const initialLabelFloated = isControlled ? !!unionProps.value : !!defaultValue;\n  const [labelFloated, setLabelFloated] = useState(initialLabelFloated);\n\n  const variations = { error, labelFloated };\n  const { trigger, icon, menu, viewport, list, text, labelClone } = generateClasses(variations);\n  const zIndex = useZIndex();\n\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n\n  const safeAreaInsetBottom = useSafeAreaInsetBottom();\n\n  // Radix closes the Select on the pointerdown of a tap outside of it, but opens it on the click of a tap on the trigger.\n  // On an open Select, a tap on the trigger is both, so its click would open the Select again.\n  const ignoreTriggerClickRef = useRef(false);\n\n  const handleValueChange = (value: string) => {\n    setLabelFloated(true);\n    if (onValueChange) {\n      onValueChange(value);\n    }\n  };\n\n  return (\n    <InputWrapper\n      label={label}\n      id={calculatedId}\n      required={required}\n      labelFloated={labelFloated}\n      disabled={disabled}\n      error={error}\n      errorText={errorText}\n      errorTextId={errorTextId}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      componentName=\"select\"\n    >\n      <SelectPrimitive.Root name={name} disabled={disabled} value={value} onValueChange={handleValueChange} defaultValue={defaultValue}>\n        <SelectPrimitive.Trigger\n          id={calculatedId}\n          className={trigger()}\n          ref={ref}\n          aria-describedby={ariaDescribedBy}\n          aria-invalid={error ? \"true\" : undefined}\n          data-bpds=\"select\"\n          onPointerDown={() => (ignoreTriggerClickRef.current = false)}\n          onClick={(event) => {\n            if (ignoreTriggerClickRef.current) {\n              ignoreTriggerClickRef.current = false;\n              event.preventDefault();\n            }\n          }}\n        >\n          <span className={text()}>\n            <SelectPrimitive.Value />\n          </span>\n          <SelectPrimitive.Icon>\n            <Icon variant=\"arrow-down\" className={icon()} />\n          </SelectPrimitive.Icon>\n        </SelectPrimitive.Trigger>\n        <SelectPrimitive.Portal>\n          <SelectPrimitive.Content\n            position=\"popper\"\n            side=\"bottom\"\n            align=\"start\"\n            alignOffset={-1} // no idea why we suddently need to adjust it\n            className={menu()}\n            style={{ zIndex }}\n            collisionPadding={safeAreaInsetBottom ? { bottom: safeAreaInsetBottom + 10 } : undefined}\n            onPointerDownOutside={(event) => (ignoreTriggerClickRef.current = event.detail.originalEvent.pointerType !== \"mouse\")}\n          >\n            <SelectPrimitive.Viewport className={viewport()}>\n              <div className={list()}>{children}</div>\n              {/* Scrollbar should go until the end. So we need to use a pseudo element instad of padding */}\n              <div className={labelClone()} aria-hidden=\"true\">\n                {label}\n                {required && <span>*</span>}\n              </div>\n            </SelectPrimitive.Viewport>\n          </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n      </SelectPrimitive.Root>\n    </InputWrapper>\n  );\n};\n\nSelectRoot.displayName = \"Select\";\n\nexport default SelectRoot;\n"],"mappings":";;;;;;;;;;AAYA,IAAME,IAAkBC,EAAG;CACzB,OAAO;EACL,SAAS;EACT,MAAM;EACN,MAAM;GACJ;GACA;GACA;EACF;EAGA,UAAU;EACV,MAAM;EACN,MAAM,CACJ,yDAEA,kBACF;EACA,YAAY;CACd;CACA,UAAU,EACR,cAAc,EAGZ,MAAM,EAAE,YAAY,mCAAmC,EACzD,EACF;AACF,CAAC,GA4CKC,KAAc,EAClB,OACA,SACA,UACA,kBACA,aACA,cAAW,IACX,WAAQ,IACR,cAAW,IACX,gBAAa,IACb,eAAY,IACZ,QACA,GAAGC,QACQ;CACX,IAAMC,IAAcC,EAAM,GACpBC,IAAeC,KAAMH,GACrBI,IAAeH,EAAM,GACrBI,IAAcJ,EAAM,GAEpBK,IAAeP,EAAW,UAAU,KAAA,GACpCQ,IAAQD,IAAeP,EAAW,QAAQ,KAAA,GAC1CS,IAAeF,IAAe,KAAA,IAAYP,EAAW,cACrDU,IAAsBH,IAAe,CAAC,CAACP,EAAW,QAAQ,CAAC,CAACS,GAC5D,CAACE,GAAcC,KAAmBC,EAASH,CAAmB,GAG9D,EAAE,YAAS,SAAM,SAAM,aAAU,SAAM,SAAM,kBAAeb,EAAgB;EAD7D;EAAO;CACsD,CAAU,GACtFiB,IAASC,EAAU,GAErBC;CAIJ,AAHIC,MACF,IAAkBZ,IAEhBa,KAASC,MACX,IAAkBH,IAAkBA,IAAkB,MAAMV,IAAcA;CAG5E,IAAMc,IAAsBC,EAAuB,GAI7CC,IAAwBC,EAAO,EAAK;CAS1C,OACE,kBAACC,GAAD;EACS;EACP,IAAIrB;EACM;EACI;EACJ;EACH;EACI;EACE;EACD;EACE;EACd,eAAc;EAEd,UAAA,kBAACR,EAAgB,MAAjB;GAA4B;GAAgB;GAAiB;GAAO,gBArB7C,MAAkB;IAE3C,AADAiB,EAAgB,EAAI,GAChBa,KACFA,EAAcjB,CAAK;GAEvB;GAgBwH;GAApH,UAAA,CACE,kBAACb,EAAgB,SAAjB;IACE,IAAIQ;IACJ,WAAWuB,EAAQ;IACd;IACL,oBAAkBV;IAClB,gBAAcE,IAAQ,SAAS,KAAA;IAC/B,aAAU;IACV,qBAAsB,EAAsB,UAAU;IACtD,UAAU,MAAU;KAClB,AAAII,EAAsB,YACxB,EAAsB,UAAU,IAChCK,EAAM,eAAe;IAEzB;IAbF,UAAA,CAeE,kBAAC,QAAD;KAAM,WAAWC,EAAK;KACpB,UAAA,kBAACjC,EAAgB,OAAjB,CAAwB,CAAA;IACpB,CAAA,GACN,kBAACA,EAAgB,MAAjB,EAAA,UACE,kBAACC,GAAD;KAAM,SAAQ;KAAa,WAAWiC,EAAK;IAAI,CAAA,EAC3B,CAAA,CACC;GACzB,CAAA,GAAA,kBAAClC,EAAgB,QAAjB,EAAA,UACE,kBAACA,EAAgB,SAAjB;IACE,UAAS;IACT,MAAK;IACL,OAAM;IACN,aAAa;IACb,WAAWmC,EAAK;IAChB,OAAO,EAAE,UAAO;IAChB,kBAAkBV,IAAsB,EAAE,QAAQA,IAAsB,GAAG,IAAI,KAAA;IAC/E,uBAAuB,MAAW,EAAsB,UAAUO,EAAM,OAAO,cAAc,gBAAgB;IAE7G,UAAA,kBAAChC,EAAgB,UAAjB;KAA0B,WAAWoC,EAAS;KAA9C,UAAA,CACE,kBAAC,OAAD;MAAK,WAAWC,EAAK;MAAI;KAAc,CAAA,GAEvC,kBAAC,OAAD;MAAK,WAAWC,EAAW;MAAG,eAAY;MAA1C,UAAA,CACGC,GACAC,KAAY,kBAAC,QAAD,EAAA,UAAM,IAAO,CAAA,CACvB;KACmB,CAAA,CAAA;;GACH,CAAA,EACH,CAAA,CACJ;;CACV,CAAA;AAElB;AAEA,EAAW,cAAc"}

package/dist/styles.js

@@ -0,0 +1 @@
+import "./src/Select.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/react-select",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Select component, implemented in React, for the Bonprix Design System.",
   "keywords": [],
   "license": "UNLICENSED",
@@ -17,9 +17,18 @@
     "!dist/**/*.test.d.ts"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "./dist/styles.js"
+  ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "imports": {
+    "#styles": {
+      "browser": "./dist/styles.js",
+      "default": "./dist/no-styles.js"
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -33,19 +42,22 @@
   },
   "dependencies": {
     "@radix-ui/react-select": "2.3.7",
-    "@bonprix-ds/internal-components": "0.2.1",
-    "@bonprix-ds/react-icon": "1.2.1",
-    "@bonprix-ds/utils": "0.2.2"
+    "@bonprix-ds/internal-components": "0.2.2",
+    "@bonprix-ds/react-icon": "1.2.2",
+    "@bonprix-ds/utils": "0.3.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
-    "@vitejs/plugin-react": "6.1.1",
-    "rollup-preserve-directives": "1.1.3",
-    "vite": "8.3.0"
+    "@vitest/browser-playwright": "4.1.11",
+    "vite": "8.3.2",
+    "vitest": "4.1.11",
+    "@bonprix-ds/vite-config": "0.0.0"
   },
   "peerDependencies": {
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19",
+    "react-dom": "^19",
     "tailwind-variants": "0.3.1"
   },
   "scripts": {