mainstack-design-system 1.17.3 → 1.17.4

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.
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("./index-C8aODXfJ.cjs"),D=require("./index-4R9KShCu.cjs"),o=require("react"),I=require("./mainstack-design-system606.cjs"),y=require("./mainstack-design-system607.cjs"),b=o.forwardRef(({isDisabled:x,isError:C,isMultiSelect:s=!1,isSuccess:d,children:h,value:e,defaultValue:p,inputReadOnly:j,isCreatableSelect:q,options:u=[],isOptionOpen:A,onOptionOpenChange:P,onValueChange:f,onOptionSelect:R},n)=>{const O=o.useRef(null),[t,_]=o.useState(y.parseSelectOptions(u)),[i,v]=m.useControllableState({prop:e,defaultProp:y.mapDefaultValuesToSelectedOption({isMultiSelect:s,defaultValue:p,options:u}),onChange:f}),[E,c]=o.useState(()=>typeof e=="string"?t.map.get(e)?.label||"":typeof p=="string"&&t.map.get(p)?.label||""),[l,S]=m.useControllableState({prop:A,defaultProp:!1,onChange:P}),[T,g]=o.useState("idle");return o.useEffect(()=>{s||Array.isArray(e)||c(t.map.get(e)?.label||"")},[s,t.map,e]),a.jsx(I.SelectContext.Provider,{value:{defaultValue:p,options:t,selectedOption:i,isOptionOpen:l,isDisabled:x,isError:C,isMultiSelect:s,isSuccess:d,inputValue:E,inputReadOnly:j,previousAction:T,isCreatableSelect:q,rootElementRef:O,setOptions:_,setPreviousAction:g,setInputValue:c,setSelectedOption:v,onOptionOpenChange:S,onValueChange:f,onOptionSelect:R},children:a.jsx(D.Popover,{open:l,onOpenChange:r=>{S(l),i&&!Array.isArray(i)&&!r&&(c(t.map.get(i)?.label||""),g("selection"))},children:a.jsx("div",{ref:r=>{O.current=r,typeof n=="function"?n(r):typeof n=="object"&&n?.current&&(n.current=r)},"data-slot":"select-root",children:h})})})});b.displayName="SelectRoot";exports.SelectRoot=b;
2
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("./index-C8aODXfJ.cjs"),D=require("./index-4R9KShCu.cjs"),n=require("react"),I=require("./mainstack-design-system606.cjs"),y=require("./mainstack-design-system607.cjs"),b=n.forwardRef(({isDisabled:x,isError:C,isMultiSelect:s=!1,isSuccess:d,children:h,value:e,defaultValue:p,inputReadOnly:j,isCreatableSelect:q,options:u=[],isOptionOpen:A,onOptionOpenChange:P,onValueChange:f,onOptionSelect:R},r)=>{const O=n.useRef(null),[t,_]=n.useState(y.parseSelectOptions(u)),[i,v]=m.useControllableState({prop:e,defaultProp:y.mapDefaultValuesToSelectedOption({isMultiSelect:s,defaultValue:p,options:u}),onChange:f}),[E,l]=n.useState(()=>typeof e=="string"?t.map.get(e)?.label||"":typeof p=="string"&&t.map.get(p)?.label||""),[c,g]=m.useControllableState({prop:A,defaultProp:!1,onChange:P}),[T,S]=n.useState("idle");return n.useEffect(()=>{s||Array.isArray(e)||l(t.map.get(e)?.label||"")},[s,t.map,e]),a.jsx(I.SelectContext.Provider,{value:{defaultValue:p,options:t,selectedOption:i,isOptionOpen:c,isDisabled:x,isError:C,isMultiSelect:s,isSuccess:d,inputValue:E,inputReadOnly:j,previousAction:T,isCreatableSelect:q,rootElementRef:O,setOptions:_,setPreviousAction:S,setInputValue:l,setSelectedOption:v,onOptionOpenChange:g,onValueChange:f,onOptionSelect:R},children:a.jsx(D.Popover,{open:c,onOpenChange:o=>{console.log("open",o,c),g(c),i&&!Array.isArray(i)&&!o&&(l(t.map.get(i)?.label||""),S("selection"))},children:a.jsx("div",{ref:o=>{O.current=o,typeof r=="function"?r(o):typeof r=="object"&&r?.current&&(r.current=o)},"data-slot":"select-root",children:h})})})});b.displayName="SelectRoot";exports.SelectRoot=b;
@@ -2,7 +2,7 @@
2
2
  import { jsx as c } from "react/jsx-runtime";
3
3
  import { u as y } from "./index-437EL2iq.js";
4
4
  import { P as I } from "./index-RoCFhqzC.js";
5
- import { forwardRef as N, useRef as T, useState as l, useEffect as k } from "react";
5
+ import { forwardRef as N, useRef as T, useState as a, useEffect as k } from "react";
6
6
  import { SelectContext as q } from "./mainstack-design-system606.js";
7
7
  import { parseSelectOptions as z, mapDefaultValuesToSelectedOption as B } from "./mainstack-design-system607.js";
8
8
  const F = N(
@@ -21,10 +21,10 @@ const F = N(
21
21
  onOptionOpenChange: d,
22
22
  onValueChange: f,
23
23
  onOptionSelect: j
24
- }, e) => {
25
- const O = T(null), [t, E] = l(
24
+ }, n) => {
25
+ const O = T(null), [t, E] = a(
26
26
  z(m)
27
- ), [i, R] = y({
27
+ ), [s, R] = y({
28
28
  prop: o,
29
29
  defaultProp: B({
30
30
  isMultiSelect: r,
@@ -32,21 +32,21 @@ const F = N(
32
32
  options: m
33
33
  }),
34
34
  onChange: f
35
- }), [v, s] = l(() => typeof o == "string" ? t.map.get(o)?.label || "" : typeof p == "string" && t.map.get(p)?.label || ""), [a, u] = y({
35
+ }), [v, l] = a(() => typeof o == "string" ? t.map.get(o)?.label || "" : typeof p == "string" && t.map.get(p)?.label || ""), [i, g] = y({
36
36
  prop: x,
37
37
  defaultProp: !1,
38
38
  onChange: d
39
- }), [D, g] = l("idle");
39
+ }), [D, u] = a("idle");
40
40
  return k(() => {
41
- r || Array.isArray(o) || s(t.map.get(o)?.label || "");
41
+ r || Array.isArray(o) || l(t.map.get(o)?.label || "");
42
42
  }, [r, t.map, o]), /* @__PURE__ */ c(
43
43
  q.Provider,
44
44
  {
45
45
  value: {
46
46
  defaultValue: p,
47
47
  options: t,
48
- selectedOption: i,
49
- isOptionOpen: a,
48
+ selectedOption: s,
49
+ isOptionOpen: i,
50
50
  isDisabled: b,
51
51
  isError: h,
52
52
  isMultiSelect: r,
@@ -57,25 +57,25 @@ const F = N(
57
57
  isCreatableSelect: S,
58
58
  rootElementRef: O,
59
59
  setOptions: E,
60
- setPreviousAction: g,
61
- setInputValue: s,
60
+ setPreviousAction: u,
61
+ setInputValue: l,
62
62
  setSelectedOption: R,
63
- onOptionOpenChange: u,
63
+ onOptionOpenChange: g,
64
64
  onValueChange: f,
65
65
  onOptionSelect: j
66
66
  },
67
67
  children: /* @__PURE__ */ c(
68
68
  I,
69
69
  {
70
- open: a,
71
- onOpenChange: (n) => {
72
- u(a), i && !Array.isArray(i) && !n && (s(t.map.get(i)?.label || ""), g("selection"));
70
+ open: i,
71
+ onOpenChange: (e) => {
72
+ console.log("open", e, i), g(i), s && !Array.isArray(s) && !e && (l(t.map.get(s)?.label || ""), u("selection"));
73
73
  },
74
74
  children: /* @__PURE__ */ c(
75
75
  "div",
76
76
  {
77
- ref: (n) => {
78
- O.current = n, typeof e == "function" ? e(n) : typeof e == "object" && e?.current && (e.current = n);
77
+ ref: (e) => {
78
+ O.current = e, typeof n == "function" ? n(e) : typeof n == "object" && n?.current && (n.current = e);
79
79
  },
80
80
  "data-slot": "select-root",
81
81
  children: C
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),j=require("./mainstack-design-system450.cjs"),O=require("./mainstack-design-system451.cjs");require("./mainstack-design-system449.cjs");require("./mainstack-design-system366.cjs");const v=require("./mainstack-design-system93.cjs"),N=require("./mainstack-design-system196.cjs");require("./player-CocaNyQC.cjs");const o=require("./utils-s-0cOrOT.cjs"),R=require("./mainstack-design-system606.cjs"),w=require("./index-4R9KShCu.cjs"),d=g.forwardRef(({onClick:r,children:u,className:p,onChange:i,...a},m)=>{const{isOptionOpen:s,inputValue:x,inputReadOnly:c,isDisabled:f,isError:I,isSuccess:h,selectedOption:l,isMultiSelect:n,setSelectedOption:q,setPreviousAction:_,setInputValue:b,onOptionOpenChange:y}=R.useSelectContext();return e.jsx(w.PopoverAnchor,{role:"combobox","aria-haspopup":"listbox","aria-expanded":s,"aria-controls":"select-portal","aria-owns":"select-portal",children:e.jsxs(j.InputRoot,{className:o.cn(n&&"mds:h-auto mds:py-10 ",p),children:[e.jsxs("div",{className:o.cn("mds:flex mds:flex-1 mds:h-auto mds:min-h-auto mds:items-center mds:flex-wrap mds:gap-6"),children:[u,e.jsx(O.InputField,{...a,readOnly:c,"data-slot":"select-input-field","data-select-options-opened":s,tabIndex:3,value:x,isError:I,isSuccess:h,disabled:f,className:o.cn(n&&"mds:h-auto mds:min-h-auto"),onChange:t=>{i&&i(t),_("typing"),b(t.currentTarget.value)},onClick:t=>{r&&r(t);const S=t.currentTarget;y(!0),c||S.focus()},ref:m,...a})]}),e.jsxs("div",{className:"mds:flex mds:items-center mds:gap-6",children:[n&&Array.isArray(l)&&l.length>0&&e.jsx(v,{role:"button",variant:"filled",className:"mds:size-20 mds:cursor-pointer mds:text-secondary",onClick:()=>{q([])}}),e.jsx(N,{"data-select-options-opened":s,className:"mds:size-16 mds:transition-transform mds:transition-1000 mds:data-[select-options-opened=true]:rotate-180"})]})]})})});d.displayName="SelectInputField";exports.SelectInputField=d;
2
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),j=require("./mainstack-design-system450.cjs"),O=require("./mainstack-design-system451.cjs");require("./mainstack-design-system449.cjs");require("./mainstack-design-system366.cjs");const v=require("./mainstack-design-system93.cjs"),N=require("./mainstack-design-system196.cjs");require("./player-CocaNyQC.cjs");const o=require("./utils-s-0cOrOT.cjs"),R=require("./mainstack-design-system606.cjs"),w=require("./index-4R9KShCu.cjs"),d=g.forwardRef(({onClick:i,children:u,className:p,onChange:r,...a},m)=>{const{isOptionOpen:s,inputValue:x,inputReadOnly:c,isDisabled:f,isError:I,isSuccess:h,selectedOption:l,isMultiSelect:n,setSelectedOption:q,setPreviousAction:_,setInputValue:b,onOptionOpenChange:y}=R.useSelectContext();return e.jsx(w.PopoverAnchor,{role:"combobox","aria-haspopup":"listbox","aria-expanded":s,"aria-controls":"select-portal","aria-owns":"select-portal",children:e.jsxs(j.InputRoot,{className:o.cn(n&&"mds:h-auto mds:py-10 ",p),children:[e.jsxs("div",{className:o.cn("mds:flex mds:flex-1 mds:h-auto mds:min-h-auto mds:items-center mds:flex-wrap mds:gap-6"),children:[u,e.jsx(O.InputField,{...a,readOnly:c,"data-slot":"select-input-field","data-select-options-opened":s,tabIndex:3,value:x,isError:I,isSuccess:h,disabled:f,className:o.cn(n&&"mds:h-auto mds:min-h-auto"),onChange:t=>{r&&r(t),_("typing"),b(t.currentTarget.value)},onClick:t=>{i&&i(t);const S=t.currentTarget;y(!s),c||S.focus()},ref:m,...a})]}),e.jsxs("div",{className:"mds:flex mds:items-center mds:gap-6",children:[n&&Array.isArray(l)&&l.length>0&&e.jsx(v,{role:"button",variant:"filled",className:"mds:size-20 mds:cursor-pointer mds:text-secondary",onClick:()=>{q([])}}),e.jsx(N,{"data-select-options-opened":s,className:"mds:size-16 mds:transition-transform mds:transition-1000 mds:data-[select-options-opened=true]:rotate-180"})]})]})})});d.displayName="SelectInputField";exports.SelectInputField=d;
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- import { jsx as t, jsxs as r } from "react/jsx-runtime";
2
+ import { jsx as o, jsxs as r } from "react/jsx-runtime";
3
3
  import { forwardRef as N } from "react";
4
4
  import { InputRoot as S } from "./mainstack-design-system450.js";
5
5
  import { InputField as w } from "./mainstack-design-system451.js";
@@ -14,7 +14,7 @@ import { d as R } from "./index-RoCFhqzC.js";
14
14
  const j = N(
15
15
  ({ onClick: a, children: p, className: c, onChange: n, ...d }, u) => {
16
16
  const {
17
- isOptionOpen: o,
17
+ isOptionOpen: t,
18
18
  inputValue: f,
19
19
  inputReadOnly: m,
20
20
  isDisabled: h,
@@ -27,12 +27,12 @@ const j = N(
27
27
  setInputValue: O,
28
28
  onOptionOpenChange: g
29
29
  } = F();
30
- return /* @__PURE__ */ t(
30
+ return /* @__PURE__ */ o(
31
31
  R,
32
32
  {
33
33
  role: "combobox",
34
34
  "aria-haspopup": "listbox",
35
- "aria-expanded": o,
35
+ "aria-expanded": t,
36
36
  "aria-controls": "select-portal",
37
37
  "aria-owns": "select-portal",
38
38
  children: /* @__PURE__ */ r(
@@ -48,13 +48,13 @@ const j = N(
48
48
  ),
49
49
  children: [
50
50
  p,
51
- /* @__PURE__ */ t(
51
+ /* @__PURE__ */ o(
52
52
  w,
53
53
  {
54
54
  ...d,
55
55
  readOnly: m,
56
56
  "data-slot": "select-input-field",
57
- "data-select-options-opened": o,
57
+ "data-select-options-opened": t,
58
58
  tabIndex: 3,
59
59
  value: f,
60
60
  isError: x,
@@ -67,7 +67,7 @@ const j = N(
67
67
  onClick: (e) => {
68
68
  a && a(e);
69
69
  const v = e.currentTarget;
70
- g(!0), m || v.focus();
70
+ g(!t), m || v.focus();
71
71
  },
72
72
  ref: u,
73
73
  ...d
@@ -77,7 +77,7 @@ const j = N(
77
77
  }
78
78
  ),
79
79
  /* @__PURE__ */ r("div", { className: "mds:flex mds:items-center mds:gap-6", children: [
80
- s && Array.isArray(l) && l.length > 0 && /* @__PURE__ */ t(
80
+ s && Array.isArray(l) && l.length > 0 && /* @__PURE__ */ o(
81
81
  A,
82
82
  {
83
83
  role: "button",
@@ -88,10 +88,10 @@ const j = N(
88
88
  }
89
89
  }
90
90
  ),
91
- /* @__PURE__ */ t(
91
+ /* @__PURE__ */ o(
92
92
  C,
93
93
  {
94
- "data-select-options-opened": o,
94
+ "data-select-options-opened": t,
95
95
  className: "mds:size-16 mds:transition-transform mds:transition-1000 mds:data-[select-options-opened=true]:rotate-180"
96
96
  }
97
97
  )
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("./index-4R9KShCu.cjs"),p=require("react"),m=require("./utils-s-0cOrOT.cjs"),u=require("./mainstack-design-system606.cjs"),a=p.forwardRef(({children:i,onWheel:t,onTouchMove:o,className:c,...l},d)=>{const{isOptionOpen:n}=u.useSelectContext();return s.jsx(r.PopoverPortal,{forceMount:!0,children:s.jsx(r.PopoverContent,{"data-slot":"select-portal",role:"listbox",sideOffset:6,"data-select-options-opened":n,className:m.cn(" mds:hidden mds:will-change-transform mds:z-100 mds:data-[state=open]:animate-content-fade-in mds:animate-content-fade-out mds:w-(--radix-popover-trigger-width) ",n&&"mds:block",c),ref:d,onWheel:e=>{e.stopPropagation(),t&&t(e)},onTouchMove:e=>{e.stopPropagation(),o&&o(e)},...l,children:i})})});a.displayName="SelectPortal";exports.SelectPortal=a;
2
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("./index-4R9KShCu.cjs"),u=require("react"),m=require("./utils-s-0cOrOT.cjs"),f=require("./mainstack-design-system606.cjs"),a=u.forwardRef(({children:i,onWheel:t,onTouchMove:o,className:c,...l},d)=>{const{isOptionOpen:n,onOptionOpenChange:p}=f.useSelectContext();return s.jsx(r.PopoverPortal,{forceMount:!0,children:s.jsx(r.PopoverContent,{"data-slot":"select-portal",role:"listbox",sideOffset:6,"data-select-options-opened":n,className:m.cn(" mds:hidden mds:will-change-transform mds:z-100 mds:data-[state=open]:animate-content-fade-in mds:animate-content-fade-out mds:w-(--radix-popover-trigger-width) ",n&&"mds:block",c),ref:d,onInteractOutside:()=>{p(!1)},onWheel:e=>{e.stopPropagation(),t&&t(e)},onTouchMove:e=>{e.stopPropagation(),o&&o(e)},...l,children:i})})});a.displayName="SelectPortal";exports.SelectPortal=a;
@@ -1,25 +1,28 @@
1
1
  'use client';
2
- import { jsx as a } from "react/jsx-runtime";
3
- import { b as d, c as p } from "./index-RoCFhqzC.js";
4
- import { forwardRef as l } from "react";
5
- import { c } from "./utils-Z5JtG_Bc.js";
6
- import { useSelectContext as f } from "./mainstack-design-system606.js";
7
- const P = l(
8
- ({ children: s, onWheel: o, onTouchMove: e, className: n, ...i }, m) => {
9
- const { isOptionOpen: r } = f();
10
- return /* @__PURE__ */ a(d, { forceMount: !0, children: /* @__PURE__ */ a(
11
- p,
2
+ import { jsx as r } from "react/jsx-runtime";
3
+ import { b as m, c as l } from "./index-RoCFhqzC.js";
4
+ import { forwardRef as c } from "react";
5
+ import { c as f } from "./utils-Z5JtG_Bc.js";
6
+ import { useSelectContext as P } from "./mainstack-design-system606.js";
7
+ const g = c(
8
+ ({ children: n, onWheel: o, onTouchMove: e, className: s, ...i }, p) => {
9
+ const { isOptionOpen: a, onOptionOpenChange: d } = P();
10
+ return /* @__PURE__ */ r(m, { forceMount: !0, children: /* @__PURE__ */ r(
11
+ l,
12
12
  {
13
13
  "data-slot": "select-portal",
14
14
  role: "listbox",
15
15
  sideOffset: 6,
16
- "data-select-options-opened": r,
17
- className: c(
16
+ "data-select-options-opened": a,
17
+ className: f(
18
18
  " mds:hidden mds:will-change-transform mds:z-100 mds:data-[state=open]:animate-content-fade-in mds:animate-content-fade-out mds:w-(--radix-popover-trigger-width) ",
19
- r && "mds:block",
20
- n
19
+ a && "mds:block",
20
+ s
21
21
  ),
22
- ref: m,
22
+ ref: p,
23
+ onInteractOutside: () => {
24
+ d(!1);
25
+ },
23
26
  onWheel: (t) => {
24
27
  t.stopPropagation(), o && o(t);
25
28
  },
@@ -27,12 +30,12 @@ const P = l(
27
30
  t.stopPropagation(), e && e(t);
28
31
  },
29
32
  ...i,
30
- children: s
33
+ children: n
31
34
  }
32
35
  ) });
33
36
  }
34
37
  );
35
- P.displayName = "SelectPortal";
38
+ g.displayName = "SelectPortal";
36
39
  export {
37
- P as SelectPortal
40
+ g as SelectPortal
38
41
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mainstack-design-system",
3
- "version": "1.17.3",
3
+ "version": "1.17.4",
4
4
  "type": "module",
5
5
  "main": "./dist/mainstack-design-system.cjs",
6
6
  "module": "./dist/mainstack-design-system.js",