@bonprix-ds/react-select 1.0.10 → 1.0.11

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/src/SelectRoot.js +62 -57
  2. package/dist/src/SelectRoot.js.map +1 -1
  3. package/package.json +2 -1
package/dist/src/SelectRoot.js CHANGED
@@ -1,14 +1,14 @@
1
1
  "use client";
2
- import { useId as e, useState as t } from "react";
3
- import * as n from "@radix-ui/react-select";
4
- import { tv as r } from "tailwind-variants";
5
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
- import { InputWrapper as o } from "@bonprix-ds/internal-components";
7
- import s from "@bonprix-ds/react-icon";
8
- import { useSafeAreaInsetBottom as c, useZIndex as l } from "@bonprix-ds/utils";
2
+ import { useId as e, useRef as t, useState as n } from "react";
3
+ import * as r from "@radix-ui/react-select";
4
+ import { tv as i } from "tailwind-variants";
5
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
+ import { InputWrapper as s } from "@bonprix-ds/internal-components";
7
+ import c from "@bonprix-ds/react-icon";
8
+ import { useSafeAreaInsetBottom as l, useZIndex as u } from "@bonprix-ds/utils";
9
9
  import "#styles";
10
10
  //#region src/SelectRoot.tsx
11
- var u = r({
11
+ var d = i({
12
12
  slots: {
13
13
  trigger: "align-center flex w-full items-center gap-3 p-3 outline-none",
14
14
  icon: "h-5 w-5 shrink-0 fill-inherit [button[data-state='open']_span>&]:rotate-180",
@@ -23,72 +23,77 @@ var u = r({
23
23
  labelClone: "typography-input-label sticky bottom-0 hidden bg-clr-bg-main pb-[0.0625rem] pe-2 pl-[0.6875rem]"
24
24
  },
25
25
  variants: { labelFloated: { true: { labelClone: "group-data-[side=top]/menu:block" } } }
26
- }), 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 }) => {
27
- 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({
28
- error: g,
29
- labelFloated: A
30
- }), z = l(), B;
31
- v && (B = w), g && y && (B = B ? B + " " + T : T);
32
- let V = c();
33
- return /* @__PURE__ */ i(o, {
34
- label: f,
35
- id: C,
36
- required: _,
37
- labelFloated: A,
38
- disabled: h,
39
- error: g,
40
- errorText: y,
41
- errorTextId: T,
42
- helperText: v,
43
- helperTextId: w,
26
+ }), 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 }) => {
27
+ 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({
28
+ error: _,
29
+ labelFloated: j
30
+ }), B = u(), V;
31
+ y && (V = T), _ && b && (V = V ? V + " " + E : E);
32
+ let H = l(), U = t(!1);
33
+ return /* @__PURE__ */ a(s, {
34
+ label: p,
35
+ id: w,
36
+ required: v,
37
+ labelFloated: j,
38
+ disabled: g,
39
+ error: _,
40
+ errorText: b,
41
+ errorTextId: E,
42
+ helperText: y,
43
+ helperTextId: T,
44
44
  componentName: "select",
45
- children: /* @__PURE__ */ a(n.Root, {
46
- name: d,
47
- disabled: h,
48
- value: D,
45
+ children: /* @__PURE__ */ o(r.Root, {
46
+ name: f,
47
+ disabled: g,
48
+ value: O,
49
49
  onValueChange: (e) => {
50
- j(!0), p && p(e);
50
+ M(!0), m && m(e);
51
51
  },
52
- defaultValue: O,
53
- children: [/* @__PURE__ */ a(n.Trigger, {
54
- id: C,
55
- className: M(),
56
- ref: b,
57
- "aria-describedby": B,
58
- "aria-invalid": g ? "true" : void 0,
52
+ defaultValue: k,
53
+ children: [/* @__PURE__ */ o(r.Trigger, {
54
+ id: w,
55
+ className: N(),
56
+ ref: x,
57
+ "aria-describedby": V,
58
+ "aria-invalid": _ ? "true" : void 0,
59
59
  "data-bpds": "select",
60
- children: [/* @__PURE__ */ i("span", {
61
- className: L(),
62
- children: /* @__PURE__ */ i(n.Value, {})
63
- }), /* @__PURE__ */ i(n.Icon, { children: /* @__PURE__ */ i(s, {
60
+ onPointerDown: () => U.current = !1,
61
+ onClick: (e) => {
62
+ U.current && (U.current = !1, e.preventDefault());
63
+ },
64
+ children: [/* @__PURE__ */ a("span", {
65
+ className: R(),
66
+ children: /* @__PURE__ */ a(r.Value, {})
67
+ }), /* @__PURE__ */ a(r.Icon, { children: /* @__PURE__ */ a(c, {
64
68
  variant: "arrow-down",
65
- className: N()
69
+ className: P()
66
70
  }) })]
67
- }), /* @__PURE__ */ i(n.Portal, { children: /* @__PURE__ */ i(n.Content, {
71
+ }), /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(r.Content, {
68
72
  position: "popper",
69
73
  side: "bottom",
70
74
  align: "start",
71
75
  alignOffset: -1,
72
- className: P(),
73
- style: { zIndex: z },
74
- collisionPadding: V ? { bottom: V + 10 } : void 0,
75
- children: /* @__PURE__ */ a(n.Viewport, {
76
- className: F(),
77
- children: [/* @__PURE__ */ i("div", {
78
- className: I(),
79
- children: m
80
- }), /* @__PURE__ */ a("div", {
81
- className: R(),
76
+ className: F(),
77
+ style: { zIndex: B },
78
+ collisionPadding: H ? { bottom: H + 10 } : void 0,
79
+ onPointerDownOutside: (e) => U.current = e.detail.originalEvent.pointerType !== "mouse",
80
+ children: /* @__PURE__ */ o(r.Viewport, {
81
+ className: I(),
82
+ children: [/* @__PURE__ */ a("div", {
83
+ className: L(),
84
+ children: h
85
+ }), /* @__PURE__ */ o("div", {
86
+ className: z(),
82
87
  "aria-hidden": "true",
83
- children: [f, _ && /* @__PURE__ */ i("span", { children: "*" })]
88
+ children: [p, v && /* @__PURE__ */ a("span", { children: "*" })]
84
89
  })]
85
90
  })
86
91
  }) })]
87
92
  })
88
93
  });
89
94
  };
90
- d.displayName = "Select";
95
+ f.displayName = "Select";
91
96
  //#endregion
92
- export { d as default };
97
+ export { f as default };
93
98
 
94
99
  //# sourceMappingURL=SelectRoot.js.map
package/dist/src/SelectRoot.js.map CHANGED
@@ -1 +1 @@
1
- {"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","InputWrapper","onValueChange","trigger","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, 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 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":";;;;;;;;;;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;CASnD,OACE,kBAACC,GAAD;EACS;EACP,IAAInB;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,GAChBW,KACFA,EAAcf,CAAK;GAEvB;GAgBwH;GAApH,UAAA,CACE,kBAACb,EAAgB,SAAjB;IACE,IAAIQ;IACJ,WAAWqB,EAAQ;IACd;IACL,oBAAkBR;IAClB,gBAAcE,IAAQ,SAAS,KAAA;IAC/B,aAAU;IANZ,UAAA,CAQE,kBAAC,QAAD;KAAM,WAAWO,EAAK;KACpB,UAAA,kBAAC9B,EAAgB,OAAjB,CAAwB,CAAA;IACpB,CAAA,GACN,kBAACA,EAAgB,MAAjB,EAAA,UACE,kBAACC,GAAD;KAAM,SAAQ;KAAa,WAAW8B,EAAK;IAAI,CAAA,EAC3B,CAAA,CACC;GACzB,CAAA,GAAA,kBAAC/B,EAAgB,QAAjB,EAAA,UACE,kBAACA,EAAgB,SAAjB;IACE,UAAS;IACT,MAAK;IACL,OAAM;IACN,aAAa;IACb,WAAWgC,EAAK;IAChB,OAAO,EAAE,UAAO;IAChB,kBAAkBP,IAAsB,EAAE,QAAQA,IAAsB,GAAG,IAAI,KAAA;IAE/E,UAAA,kBAACzB,EAAgB,UAAjB;KAA0B,WAAWiC,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"}
1
+ {"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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonprix-ds/react-select",
3
- "version": "1.0.10",
3
+ "version": "1.0.11",
4
4
  "description": "Select component, implemented in React, for the Bonprix Design System.",
5
5
  "keywords": [],
6
6
  "license": "UNLICENSED",
@@ -50,6 +50,7 @@
50
50
  "@testing-library/dom": "10.4.2",
51
51
  "@testing-library/react": "16.3.3",
52
52
  "@types/react": "19.3.0",
53
+ "@vitest/browser-playwright": "4.1.11",
53
54
  "vite": "8.3.2",
54
55
  "vitest": "4.1.11",
55
56
  "@bonprix-ds/vite-config": "0.0.0"