@bonprix-ds/react-select 1.0.6 → 1.0.8

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.
package/dist/index.d.ts CHANGED
@@ -46,7 +46,7 @@ declare const Select: {
46
46
  };
47
47
  export default Select;
48
48
 
49
- declare interface SelectItemProps {
49
+ export declare interface SelectItemProps {
50
50
  /** The value of the select item. This will be used as the value when the select is submitted. */
51
51
  value: string;
52
52
  /** The content text of the select item. */
@@ -2,12 +2,12 @@
2
2
  import { useId as e, useState as t } from "react";
3
3
  import { tv as n } from "tailwind-variants";
4
4
  import * as r from "@radix-ui/react-select";
5
- import { Fragment as i, 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";
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";
9
9
  //#region src/SelectRoot.tsx
10
- var d = n({
10
+ var u = n({
11
11
  slots: {
12
12
  trigger: "flex w-full align-center items-center gap-3 p-3 outline-none",
13
13
  icon: "w-5 h-5 fill-inherit shrink-0 [button[data-state='open']_span>&]:rotate-180",
@@ -22,72 +22,72 @@ var d = n({
22
22
  labelClone: "hidden sticky bottom-0 bg-clr-bg-main typography-input-label pb-[0.0625rem] pl-[0.6875rem] pe-2"
23
23
  },
24
24
  variants: { labelFloated: { true: { labelClone: "group-data-[side=top]/menu:block" } } }
25
- }), f = ({ id: n, name: f, label: p, onValueChange: m, children: h, disabled: g = !1, error: _ = !1, required: v = !1, helperText: y = "", errorText: b = "", ref: x, ...S }) => {
26
- let C = e(), w = n ?? 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] = t(A), { trigger: N, icon: P, menu: F, viewport: I, list: L, text: R, labelClone: z } = d({
27
- error: _,
28
- labelFloated: j
29
- }), B = u(), V;
30
- y && (V = T), _ && b && (V = V ? V + " " + E : E);
31
- let H = l();
32
- return /* @__PURE__ */ a(i, { children: /* @__PURE__ */ a(s, {
33
- label: p,
34
- id: w,
35
- required: v,
36
- labelFloated: j,
37
- disabled: g,
38
- error: _,
39
- errorText: b,
40
- errorTextId: E,
41
- helperText: y,
42
- helperTextId: T,
25
+ }), d = ({ id: n, name: d, label: f, onValueChange: p, children: m, disabled: h = !1, error: g = !1, required: _ = !1, helperText: v = "", errorText: y = "", ref: b, ...x }) => {
26
+ let S = e(), C = n ?? 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({
27
+ error: g,
28
+ labelFloated: A
29
+ }), z = l(), B;
30
+ v && (B = w), g && y && (B = B ? B + " " + T : T);
31
+ let V = c();
32
+ return /* @__PURE__ */ i(o, {
33
+ label: f,
34
+ id: C,
35
+ required: _,
36
+ labelFloated: A,
37
+ disabled: h,
38
+ error: g,
39
+ errorText: y,
40
+ errorTextId: T,
41
+ helperText: v,
42
+ helperTextId: w,
43
43
  componentName: "select",
44
- children: /* @__PURE__ */ o(r.Root, {
45
- name: f,
46
- disabled: g,
47
- value: O,
44
+ children: /* @__PURE__ */ a(r.Root, {
45
+ name: d,
46
+ disabled: h,
47
+ value: D,
48
48
  onValueChange: (e) => {
49
- M(!0), m && m(e);
49
+ j(!0), p && p(e);
50
50
  },
51
- defaultValue: k,
52
- children: [/* @__PURE__ */ o(r.Trigger, {
53
- id: w,
54
- className: N(),
55
- ref: x,
56
- "aria-describedby": V,
57
- "aria-invalid": _ ? "true" : void 0,
51
+ defaultValue: O,
52
+ children: [/* @__PURE__ */ a(r.Trigger, {
53
+ id: C,
54
+ className: M(),
55
+ ref: b,
56
+ "aria-describedby": B,
57
+ "aria-invalid": g ? "true" : void 0,
58
58
  "data-bpds": "select",
59
- children: [/* @__PURE__ */ a("span", {
60
- className: R(),
61
- children: /* @__PURE__ */ a(r.Value, {})
62
- }), /* @__PURE__ */ a(r.Icon, { children: /* @__PURE__ */ a(c, {
59
+ children: [/* @__PURE__ */ i("span", {
60
+ className: L(),
61
+ children: /* @__PURE__ */ i(r.Value, {})
62
+ }), /* @__PURE__ */ i(r.Icon, { children: /* @__PURE__ */ i(s, {
63
63
  variant: "arrow-down",
64
- className: P()
64
+ className: N()
65
65
  }) })]
66
- }), /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(r.Content, {
66
+ }), /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ i(r.Content, {
67
67
  position: "popper",
68
68
  side: "bottom",
69
69
  align: "start",
70
70
  alignOffset: -1,
71
- className: F(),
72
- style: { zIndex: B },
73
- collisionPadding: H ? { bottom: H + 10 } : void 0,
74
- children: /* @__PURE__ */ o(r.Viewport, {
75
- className: I(),
76
- children: [/* @__PURE__ */ a("div", {
77
- className: L(),
78
- children: h
79
- }), /* @__PURE__ */ o("div", {
80
- className: z(),
71
+ className: P(),
72
+ style: { zIndex: z },
73
+ collisionPadding: V ? { bottom: V + 10 } : void 0,
74
+ children: /* @__PURE__ */ a(r.Viewport, {
75
+ className: F(),
76
+ children: [/* @__PURE__ */ i("div", {
77
+ className: I(),
78
+ children: m
79
+ }), /* @__PURE__ */ a("div", {
80
+ className: R(),
81
81
  "aria-hidden": "true",
82
- children: [p, v && /* @__PURE__ */ a("span", { children: "*" })]
82
+ children: [f, _ && /* @__PURE__ */ i("span", { children: "*" })]
83
83
  })]
84
84
  })
85
85
  }) })]
86
86
  })
87
- }) });
87
+ });
88
88
  };
89
- f.displayName = "Select";
89
+ d.displayName = "Select";
90
90
  //#endregion
91
- export { f as default };
91
+ export { d as default };
92
92
 
93
93
  //# sourceMappingURL=SelectRoot.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SelectRoot.js","names":[],"sources":["../../src/SelectRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport Icon from \"@bonprix-ds/react-icon\";\nimport { useSafeAreaInsetBottom, useZIndex } from \"@bonprix-ds/utils\";\nimport React, { RefObject, useId, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\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 <>\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};\n\nSelectRoot.displayName = \"Select\";\n\nexport default SelectRoot;\n"],"mappings":";;;;;;;;;AASA,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,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;EACS;EACP,IAAI;EACM;EACI;EACJ;EACH;EACI;EACE;EACD;EACE;EACd,eAAc;EAEd,UAAA,kBAAC,EAAgB,MAAjB;GAA4B;GAAgB;GAAiB;GAAO,gBAtB/C,MAAkB;IAE3C,AADA,EAAgB,EAAI,GAChB,KACF,EAAc,CAAK;GAEvB;GAiB0H;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,EACd,CAAA;AAEN;AAEA,EAAW,cAAc"}
1
+ {"version":3,"file":"SelectRoot.js","names":[],"sources":["../../src/SelectRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport Icon from \"@bonprix-ds/react-icon\";\nimport { useSafeAreaInsetBottom, useZIndex } from \"@bonprix-ds/utils\";\nimport React, { RefObject, useId, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\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":";;;;;;;;;AASA,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonprix-ds/react-select",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Select component, implemented in React, for the Bonprix Design System.",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -22,7 +22,7 @@
22
22
  ],
23
23
  "keywords": [],
24
24
  "author": "",
25
- "license": "ISC",
25
+ "license": "UNLICENSED",
26
26
  "repository": {
27
27
  "type": "git",
28
28
  "url": "git+https://github.com/bonprix/design-system.git",
@@ -30,9 +30,9 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@radix-ui/react-select": "2.3.7",
33
- "@bonprix-ds/internal-components": "0.1.4",
34
- "@bonprix-ds/react-icon": "1.1.2",
35
- "@bonprix-ds/utils": "0.2.0"
33
+ "@bonprix-ds/internal-components": "0.2.0",
34
+ "@bonprix-ds/react-icon": "1.2.0",
35
+ "@bonprix-ds/utils": "0.2.2"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": "^19.0.0",
@@ -40,12 +40,12 @@
40
40
  "tailwind-variants": "0.3.1"
41
41
  },
42
42
  "devDependencies": {
43
- "vite": "8.2.1",
43
+ "vite": "8.2.2",
44
44
  "@types/react": "19.2.18",
45
- "@vitejs/plugin-react": "6.0.5",
45
+ "@vitejs/plugin-react": "6.1.1",
46
46
  "rollup-preserve-directives": "1.1.3",
47
- "unplugin-dts": "1.0.3",
48
- "@microsoft/api-extractor": "7.58.12"
47
+ "unplugin-dts": "1.1.0",
48
+ "@microsoft/api-extractor": "7.59.1"
49
49
  },
50
50
  "scripts": {
51
51
  "build": "vite build"