@strapi/design-system 1.6.1 → 1.6.2

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 (99) hide show
  1. package/dist/Accordion/Accordion.cjs +5 -5
  2. package/dist/Accordion/Accordion.js +24 -22
  3. package/dist/Avatar/Avatar.cjs +5 -16
  4. package/dist/Avatar/Avatar.js +44 -48
  5. package/dist/BaseRadio/BaseRadio.cjs +2 -2
  6. package/dist/BaseRadio/BaseRadio.js +25 -23
  7. package/dist/Card/Card.cjs +1 -1
  8. package/dist/Card/Card.js +1 -1
  9. package/dist/Card/CardHeader.cjs +1 -2
  10. package/dist/Card/CardHeader.js +1 -1
  11. package/dist/Card/CardTimer.cjs +1 -5
  12. package/dist/Card/CardTimer.js +14 -20
  13. package/dist/CarouselInput/CarouselInput.cjs +1 -1
  14. package/dist/CarouselInput/CarouselInput.js +9 -9
  15. package/dist/Checkbox/Checkbox.cjs +2 -2
  16. package/dist/Checkbox/Checkbox.js +16 -16
  17. package/dist/Combobox/Combobox.cjs +1 -1
  18. package/dist/Combobox/Combobox.js +139 -139
  19. package/dist/Combobox/ComboboxList.cjs +1 -1
  20. package/dist/Combobox/ComboboxList.js +5 -12
  21. package/dist/DateTimePicker/DateTimePicker.cjs +1 -1
  22. package/dist/DateTimePicker/DateTimePicker.js +71 -71
  23. package/dist/Dialog/Dialog.cjs +4 -7
  24. package/dist/Dialog/Dialog.js +30 -29
  25. package/dist/Field/Field.cjs +1 -1
  26. package/dist/Field/Field.js +6 -6
  27. package/dist/Field/FieldHint.cjs +1 -1
  28. package/dist/Field/FieldHint.js +4 -4
  29. package/dist/JSONInput/JSONInput.cjs +1 -1
  30. package/dist/JSONInput/JSONInput.js +45 -42
  31. package/dist/JSONInput/JSONInputContainer.cjs +5 -2
  32. package/dist/JSONInput/JSONInputContainer.js +6 -3
  33. package/dist/Layout/HeaderLayout.cjs +3 -8
  34. package/dist/Layout/HeaderLayout.js +38 -38
  35. package/dist/Main/SkipToContent.cjs +1 -2
  36. package/dist/Main/SkipToContent.js +1 -1
  37. package/dist/MainNav/MainNav.cjs +1 -6
  38. package/dist/MainNav/MainNav.js +15 -15
  39. package/dist/MainNav/NavFooter.cjs +1 -3
  40. package/dist/MainNav/NavFooter.js +3 -4
  41. package/dist/ModalLayout/ModalLayout.cjs +3 -9
  42. package/dist/ModalLayout/ModalLayout.js +24 -23
  43. package/dist/NumberInput/NumberInput.cjs +1 -1
  44. package/dist/NumberInput/NumberInput.js +18 -18
  45. package/dist/Select/Option.cjs +3 -7
  46. package/dist/Select/Option.js +6 -6
  47. package/dist/Select/Select.cjs +2 -2
  48. package/dist/Select/Select.js +57 -57
  49. package/dist/Select/SelectTags.cjs +1 -3
  50. package/dist/Select/SelectTags.js +4 -4
  51. package/dist/Select/SingleSelect.cjs +82 -0
  52. package/dist/Select/SingleSelect.js +285 -0
  53. package/dist/SimpleMenu/SimpleMenu.cjs +1 -1
  54. package/dist/SimpleMenu/SimpleMenu.js +10 -10
  55. package/dist/Stack/Stack.cjs +5 -5
  56. package/dist/Stack/Stack.js +7 -6
  57. package/dist/SubNav/SubNavHeader.cjs +1 -1
  58. package/dist/SubNav/SubNavHeader.js +15 -15
  59. package/dist/SubNav/SubNavLinkSection.cjs +2 -2
  60. package/dist/SubNav/SubNavLinkSection.js +6 -6
  61. package/dist/SubNav/SubNavSection.cjs +1 -1
  62. package/dist/SubNav/SubNavSection.js +12 -12
  63. package/dist/Table/Table.cjs +1 -3
  64. package/dist/Table/Table.js +2 -3
  65. package/dist/Tabs/TabGroup.cjs +1 -1
  66. package/dist/Tabs/TabGroup.js +11 -11
  67. package/dist/TextInput/TextInput.cjs +1 -1
  68. package/dist/TextInput/TextInput.js +18 -18
  69. package/dist/Textarea/Textarea.cjs +1 -1
  70. package/dist/Textarea/Textarea.js +1 -1
  71. package/dist/TimePicker/TimePicker.cjs +2 -2
  72. package/dist/TimePicker/TimePicker.js +1 -1
  73. package/dist/ToggleCheckbox/ToggleCheckbox.cjs +6 -6
  74. package/dist/ToggleCheckbox/ToggleCheckbox.js +45 -43
  75. package/dist/ToggleInput/ToggleInput.cjs +1 -1
  76. package/dist/ToggleInput/ToggleInput.js +10 -10
  77. package/dist/Tooltip/Tooltip.cjs +2 -3
  78. package/dist/Tooltip/Tooltip.js +18 -18
  79. package/dist/helpers/deprecations.cjs +1 -0
  80. package/dist/helpers/deprecations.js +13 -0
  81. package/dist/helpers/useId.cjs +1 -1
  82. package/dist/helpers/useId.js +11 -4
  83. package/dist/hooks/useIntersection.cjs +1 -0
  84. package/dist/hooks/useIntersection.js +23 -0
  85. package/dist/v2/MainNav/MainNav.cjs +1 -6
  86. package/dist/v2/MainNav/MainNav.js +15 -15
  87. package/dist/v2/MainNav/NavFooter.cjs +1 -3
  88. package/dist/v2/MainNav/NavFooter.js +3 -4
  89. package/dist/v2/SimpleMenu/SimpleMenu.cjs +1 -1
  90. package/dist/v2/SimpleMenu/SimpleMenu.js +12 -12
  91. package/dist/v2/SubNav/SubNavHeader.cjs +1 -1
  92. package/dist/v2/SubNav/SubNavHeader.js +15 -15
  93. package/dist/v2/SubNav/SubNavLinkSection.cjs +4 -4
  94. package/dist/v2/SubNav/SubNavLinkSection.js +8 -8
  95. package/dist/v2/SubNav/SubNavSection.cjs +1 -1
  96. package/dist/v2/SubNav/SubNavSection.js +4 -4
  97. package/package.json +3 -4
  98. package/dist/helpers/genId.cjs +0 -1
  99. package/dist/helpers/genId.js +0 -5
@@ -1,13 +1,13 @@
1
1
  import e, { useRef as h, useState as E, useEffect as v } from "react";
2
- import b from "styled-components";
3
- import n from "prop-types";
2
+ import R from "styled-components";
3
+ import t from "prop-types";
4
4
  import { Typography as c } from "../Typography/Typography.js";
5
5
  import { Box as i } from "../Box/Box.js";
6
6
  import { Flex as l } from "../Flex/Flex.js";
7
- import { useElementOnScreen as R } from "../helpers/useElementOnScreen.js";
7
+ import { useElementOnScreen as b } from "../helpers/useElementOnScreen.js";
8
8
  import { useResizeObserver as w } from "../helpers/useResizeObserver.js";
9
- const x = () => {
10
- const t = h(null), [o, a] = E(null), [r, d] = R({
9
+ const L = () => {
10
+ const n = h(null), [o, a] = E(null), [r, d] = b({
11
11
  root: null,
12
12
  rootMargin: "0px",
13
13
  threshold: 0
@@ -15,51 +15,51 @@ const x = () => {
15
15
  return w(r, () => {
16
16
  r.current && a(r.current.getBoundingClientRect());
17
17
  }), v(() => {
18
- t.current && a(t.current.getBoundingClientRect());
19
- }, [t]), {
18
+ n.current && a(n.current.getBoundingClientRect());
19
+ }, [n]), {
20
20
  containerRef: r,
21
21
  isVisible: d,
22
- baseHeaderLayoutRef: t,
22
+ baseHeaderLayoutRef: n,
23
23
  headerSize: o
24
24
  };
25
- }, p = (t) => {
26
- const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = x();
25
+ }, p = (n) => {
26
+ const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = L();
27
27
  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
28
28
  style: { height: d?.height },
29
29
  ref: o
30
30
  }, a && /* @__PURE__ */ e.createElement(s, {
31
31
  ref: r,
32
- ...t
32
+ ...n
33
33
  })), !a && /* @__PURE__ */ e.createElement(s, {
34
- ...t,
34
+ ...n,
35
35
  sticky: !0,
36
36
  width: d?.width
37
37
  }));
38
38
  };
39
39
  p.displayName = "HeaderLayout";
40
- const L = b(i)`
41
- position: fixed;
42
- top: 0;
43
- right: 0;
44
- width: ${(t) => t.width}px;
45
- z-index: 4;
46
- box-shadow: ${({ theme: t }) => t.shadows.tableShadow};
40
+ const x = R(i)`
41
+ width: ${(n) => n.width}px;
47
42
  `, s = e.forwardRef(
48
- ({ navigationAction: t, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
43
+ ({ navigationAction: n, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
49
44
  const m = typeof r == "string";
50
- return f ? /* @__PURE__ */ e.createElement(L, {
45
+ return f ? /* @__PURE__ */ e.createElement(x, {
51
46
  paddingLeft: 6,
52
47
  paddingRight: 6,
53
48
  paddingTop: 3,
54
49
  paddingBottom: 3,
50
+ position: "fixed",
51
+ top: 0,
52
+ right: 0,
55
53
  background: "neutral0",
54
+ shadow: "tableShadow",
56
55
  width: g,
56
+ zIndex: 4,
57
57
  "data-strapi-header-sticky": !0
58
58
  }, /* @__PURE__ */ e.createElement(l, {
59
59
  justifyContent: "space-between"
60
- }, /* @__PURE__ */ e.createElement(l, null, t && /* @__PURE__ */ e.createElement(i, {
60
+ }, /* @__PURE__ */ e.createElement(l, null, n && /* @__PURE__ */ e.createElement(i, {
61
61
  paddingRight: 3
62
- }, t), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, {
62
+ }, n), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, {
63
63
  variant: "beta",
64
64
  as: "h1",
65
65
  ...u
@@ -75,12 +75,12 @@ const L = b(i)`
75
75
  paddingLeft: 10,
76
76
  paddingRight: 10,
77
77
  paddingBottom: 8,
78
- paddingTop: t ? 6 : 8,
78
+ paddingTop: n ? 6 : 8,
79
79
  background: "neutral100",
80
80
  "data-strapi-header": !0
81
- }, t ? /* @__PURE__ */ e.createElement(i, {
81
+ }, n ? /* @__PURE__ */ e.createElement(i, {
82
82
  paddingBottom: 2
83
- }, t) : null, /* @__PURE__ */ e.createElement(l, {
83
+ }, n) : null, /* @__PURE__ */ e.createElement(l, {
84
84
  justifyContent: "space-between"
85
85
  }, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement(c, {
86
86
  as: "h1",
@@ -105,13 +105,13 @@ s.defaultProps = {
105
105
  width: void 0
106
106
  };
107
107
  s.propTypes = {
108
- navigationAction: n.node,
109
- primaryAction: n.node,
110
- secondaryAction: n.node,
111
- sticky: n.bool,
112
- subtitle: n.oneOfType([n.string, n.node]),
113
- title: n.string.isRequired,
114
- width: n.number
108
+ navigationAction: t.node,
109
+ primaryAction: t.node,
110
+ secondaryAction: t.node,
111
+ sticky: t.bool,
112
+ subtitle: t.oneOfType([t.string, t.node]),
113
+ title: t.string.isRequired,
114
+ width: t.number
115
115
  };
116
116
  p.defaultProps = {
117
117
  navigationAction: void 0,
@@ -120,11 +120,11 @@ p.defaultProps = {
120
120
  subtitle: void 0
121
121
  };
122
122
  p.propTypes = {
123
- navigationAction: n.node,
124
- primaryAction: n.node,
125
- secondaryAction: n.node,
126
- subtitle: n.oneOfType([n.string, n.node]),
127
- title: n.string.isRequired
123
+ navigationAction: t.node,
124
+ primaryAction: t.node,
125
+ secondaryAction: t.node,
126
+ subtitle: t.oneOfType([t.string, t.node]),
127
+ title: t.string.isRequired
128
128
  };
129
129
  export {
130
130
  s as BaseHeaderLayout,
@@ -1,6 +1,5 @@
1
1
  "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=require("styled-components"),r=require("prop-types"),a=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=t(n),u=t(s),l=t(r),d=u.default(a.Box)`
2
2
  text-decoration: none;
3
- position: absolute;
4
3
  z-index: 9999;
5
4
  left: -100%;
6
5
  top: -100%;
@@ -9,4 +8,4 @@
9
8
  left: ${({theme:e})=>e.spaces[3]};
10
9
  top: ${({theme:e})=>e.spaces[3]};
11
10
  }
12
- `,o=({children:e})=>c.default.createElement(d,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,hasRadius:!0},e);o.propTypes={children:l.default.node.isRequired};exports.SkipToContent=o;
11
+ `,o=({children:e})=>c.default.createElement(d,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,position:"absolute",hasRadius:!0},e);o.propTypes={children:l.default.node.isRequired};exports.SkipToContent=o;
@@ -4,7 +4,6 @@ import r from "prop-types";
4
4
  import { Box as n } from "../Box/Box.js";
5
5
  const p = t(n)`
6
6
  text-decoration: none;
7
- position: absolute;
8
7
  z-index: 9999;
9
8
  left: -100%;
10
9
  top: -100%;
@@ -19,6 +18,7 @@ const p = t(n)`
19
18
  background: "primary600",
20
19
  color: "neutral0",
21
20
  padding: 3,
21
+ position: "absolute",
22
22
  hasRadius: !0
23
23
  }, o);
24
24
  a.propTypes = {
@@ -1,9 +1,4 @@
1
1
  "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("styled-components"),s=require("prop-types"),c=require("../Flex/Flex.cjs"),i=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=u.default(c.Flex)`
2
2
  width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
3
- background: ${({theme:e})=>e.colors.neutral0};
4
- position: sticky;
5
- top: 0;
6
- height: 100vh;
7
- z-index: 2;
8
3
  border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
9
- `,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",direction:"column",as:"nav",condensed:e,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;
4
+ `,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;
@@ -1,23 +1,23 @@
1
- import e from "react";
1
+ import o from "react";
2
2
  import n from "styled-components";
3
3
  import a from "prop-types";
4
4
  import { Flex as i } from "../Flex/Flex.js";
5
- import { MainNavContext as l } from "./MainNavContext.js";
6
- const m = n(i)`
7
- width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
8
- background: ${({ theme: o }) => o.colors.neutral0};
9
- position: sticky;
10
- top: 0;
11
- height: 100vh;
12
- z-index: 2;
13
- border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
14
- `, r = ({ condensed: o, ...t }) => /* @__PURE__ */ e.createElement(l.Provider, {
15
- value: o
16
- }, /* @__PURE__ */ e.createElement(m, {
5
+ import { MainNavContext as m } from "./MainNavContext.js";
6
+ const p = n(i)`
7
+ width: ${({ condensed: e }) => e ? "max-content" : `${224 / 16}rem`};
8
+ border-right: 1px solid ${({ theme: e }) => e.colors.neutral150};
9
+ `, r = ({ condensed: e, ...t }) => /* @__PURE__ */ o.createElement(m.Provider, {
10
+ value: e
11
+ }, /* @__PURE__ */ o.createElement(p, {
17
12
  alignItems: "normal",
18
- direction: "column",
19
13
  as: "nav",
20
- condensed: o,
14
+ background: "neutral0",
15
+ condensed: e,
16
+ direction: "column",
17
+ height: "100vh",
18
+ position: "sticky",
19
+ top: 0,
20
+ zIndex: 2,
21
21
  ...t
22
22
  }));
23
23
  r.defaultProps = {
@@ -1,3 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),s=require("prop-types"),a=require("styled-components"),l=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=t(r),u=t(s),c=t(a),d=c.default(l.Box)`
2
- position: relative;
3
- `,o=({children:e})=>n.default.createElement(d,null,e);o.displayName="NavFooter";o.propTypes={children:u.default.node.isRequired};exports.NavFooter=o;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),a=require("prop-types"),s=require("../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=o(r),c=o(a),t=({children:e})=>u.default.createElement(s.Box,{position:"relative"},e);t.displayName="NavFooter";t.propTypes={children:c.default.node.isRequired};exports.NavFooter=t;
@@ -1,10 +1,9 @@
1
1
  import r from "react";
2
2
  import t from "prop-types";
3
- import i from "styled-components";
4
3
  import { Box as p } from "../Box/Box.js";
5
- const m = i(p)`
6
- position: relative;
7
- `, e = ({ children: o }) => /* @__PURE__ */ r.createElement(m, null, o);
4
+ const e = ({ children: o }) => /* @__PURE__ */ r.createElement(p, {
5
+ position: "relative"
6
+ }, o);
8
7
  e.displayName = "NavFooter";
9
8
  e.propTypes = {
10
9
  children: t.node.isRequired
@@ -1,12 +1,6 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("styled-components"),d=require("prop-types"),p=require("../Box/Box.cjs"),f=require("../FocusTrap/FocusTrap.cjs"),y=require("../Portal/Portal.cjs"),m=require("./ModalContext.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../helpers/useLockScroll.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(c),r=o(i),a=o(d),g=r.default.div`
2
- position: fixed;
3
- z-index: 4;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("styled-components"),d=require("prop-types"),p=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),y=require("../FocusTrap/FocusTrap.cjs"),m=require("../Portal/Portal.cjs"),x=require("./ModalContext.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../helpers/useLockScroll.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(c),a=o(i),r=o(d),g=a.default(f.Flex)`
4
2
  inset: 0;
5
3
  background: ${({theme:e})=>`${e.colors.neutral800}1F`};
6
- padding: 0 ${({theme:e})=>e.spaces[8]};
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
10
- `,x=r.default(p.Box)`
4
+ `,j=a.default(p.Box)`
11
5
  width: ${830/16}rem;
12
- `,l=({onClose:e,labelledBy:s,...n})=>(q(!0),t.default.createElement(y.Portal,null,t.default.createElement(m.ModalContext.Provider,{value:e},t.default.createElement(g,null,t.default.createElement(f.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(x,{"aria-labelledby":s,onClick:u=>u.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0,...n})))))));l.propTypes={labelledBy:a.default.string.isRequired,onClose:a.default.func.isRequired};exports.ModalLayout=l;
6
+ `,l=({onClose:e,labelledBy:s,...u})=>(q(!0),t.default.createElement(m.Portal,null,t.default.createElement(x.ModalContext.Provider,{value:e},t.default.createElement(g,{justifyContent:"center",paddingLeft:8,paddingRight:8,position:"fixed",zIndex:4},t.default.createElement(y.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(j,{"aria-labelledby":s,onClick:n=>n.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0,...u})))))));l.propTypes={labelledBy:r.default.string.isRequired,onClose:r.default.func.isRequired};exports.ModalLayout=l;
@@ -1,31 +1,32 @@
1
- import o from "react";
1
+ import e from "react";
2
2
  import t from "styled-components";
3
3
  import r from "prop-types";
4
- import { Box as n } from "../Box/Box.js";
5
- import { FocusTrap as m } from "../FocusTrap/FocusTrap.js";
6
- import { Portal as p } from "../Portal/Portal.js";
4
+ import { Box as l } from "../Box/Box.js";
5
+ import { Flex as m } from "../Flex/Flex.js";
6
+ import { FocusTrap as p } from "../FocusTrap/FocusTrap.js";
7
+ import { Portal as d } from "../Portal/Portal.js";
7
8
  import { ModalContext as s } from "./ModalContext.js";
8
- import { DismissibleLayer as d } from "../DismissibleLayer/DismissibleLayer.js";
9
+ import { DismissibleLayer as u } from "../DismissibleLayer/DismissibleLayer.js";
9
10
  import c from "../helpers/useLockScroll.js";
10
- const u = t.div`
11
- position: fixed;
12
- z-index: 4;
11
+ const f = t(m)`
13
12
  inset: 0;
14
- background: ${({ theme: e }) => `${e.colors.neutral800}1F`};
15
- padding: 0 ${({ theme: e }) => e.spaces[8]};
16
- display: flex;
17
- align-items: center;
18
- justify-content: center;
19
- `, f = t(n)`
13
+ background: ${({ theme: o }) => `${o.colors.neutral800}1F`};
14
+ `, y = t(l)`
20
15
  width: ${830 / 16}rem;
21
- `, y = ({ onClose: e, labelledBy: a, ...i }) => (c(!0), /* @__PURE__ */ o.createElement(p, null, /* @__PURE__ */ o.createElement(s.Provider, {
22
- value: e
23
- }, /* @__PURE__ */ o.createElement(u, null, /* @__PURE__ */ o.createElement(m, null, /* @__PURE__ */ o.createElement(d, {
24
- onEscapeKeyDown: e,
25
- onPointerDownOutside: e
26
- }, /* @__PURE__ */ o.createElement(f, {
16
+ `, g = ({ onClose: o, labelledBy: a, ...i }) => (c(!0), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(s.Provider, {
17
+ value: o
18
+ }, /* @__PURE__ */ e.createElement(f, {
19
+ justifyContent: "center",
20
+ paddingLeft: 8,
21
+ paddingRight: 8,
22
+ position: "fixed",
23
+ zIndex: 4
24
+ }, /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement(u, {
25
+ onEscapeKeyDown: o,
26
+ onPointerDownOutside: o
27
+ }, /* @__PURE__ */ e.createElement(y, {
27
28
  "aria-labelledby": a,
28
- onClick: (l) => l.stopPropagation(),
29
+ onClick: (n) => n.stopPropagation(),
29
30
  background: "neutral0",
30
31
  hasRadius: !0,
31
32
  shadow: "popupShadow",
@@ -33,10 +34,10 @@ const u = t.div`
33
34
  "aria-modal": !0,
34
35
  ...i
35
36
  })))))));
36
- y.propTypes = {
37
+ g.propTypes = {
37
38
  labelledBy: r.string.isRequired,
38
39
  onClose: r.func.isRequired
39
40
  };
40
41
  export {
41
- y as ModalLayout
42
+ g as ModalLayout
42
43
  };
@@ -9,4 +9,4 @@
9
9
  height: ${4/16}rem;
10
10
  transform: ${({reverse:r})=>r?"rotateX(180deg)":void 0};
11
11
  }
12
- `,Z="",d=a.default.forwardRef(({size:r,startAction:N,name:j,hint:w,error:E,label:p,labelAction:k,locale:D,id:A,onValueChange:C,value:S,step:o,required:V,disabled:s,...x},_)=>{const L=Y.useId("numberinput",A),b=D||G.getDefaultLocale(),i=f.useRef(new q.NumberParser(b,{style:"decimal"})),c=f.useRef(new q.NumberFormatter(b,{maximumFractionDigits:20})),[l,P]=J.useControllableState({prop(e){const n=String(S);return isNaN(n)||n!==e&&e!==""?e:n},defaultProp:Z,onChange(e){const n=i.current.parse(e);C(isNaN(n)?void 0:n)}}),u=e=>{P(String(e))},R=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&u(e)},y=()=>{if(!l){u(o);return}const e=i.current.parse(l),n=isNaN(e)?o:e+o;u(c.current.format(n))},g=()=>{if(!l){u(-o);return}const e=i.current.parse(l),n=isNaN(e)?-o:e-o;u(c.current.format(n))},K=e=>{if(!s)switch(e.key){case v.KeyboardKeys.DOWN:{e.preventDefault(),g();break}case v.KeyboardKeys.UP:{e.preventDefault(),y();break}}},z=()=>{if(l){const e=i.current.parse(l),n=isNaN(e)?"":c.current.format(e);u(n)}};return a.default.createElement($.Field,{name:j,hint:w,error:E,id:L,required:V},a.default.createElement(W.Stack,{spacing:1},p&&a.default.createElement(B.FieldLabel,{action:k},p),a.default.createElement(H.FieldInput,{ref:_,startAction:N,disabled:s,type:"text",inputmode:"decimal",onChange:R,onKeyDown:K,onBlur:z,value:l,size:r,endAction:a.default.createElement(a.default.Fragment,null,a.default.createElement(I,{disabled:s,"aria-hidden":!0,reverse:!0,onClick:y,tabIndex:-1,type:"button","data-testid":"ArrowUp"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"})),a.default.createElement(I,{disabled:s,"aria-hidden":!0,onClick:g,tabIndex:-1,type:"button","data-testid":"ArrowDown"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"}))),...x}),a.default.createElement(M.FieldHint,null),a.default.createElement(U.FieldError,null)))});d.displayName="NumberInput";d.defaultProps={"aria-label":void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,labelAction:void 0,locale:void 0,required:!1,size:"M",startAction:void 0,step:1,value:void 0};d.propTypes={"aria-label":t.default.string,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.string,label:t.default.string,labelAction:t.default.element,locale:t.default.string,name:t.default.string.isRequired,onValueChange:t.default.func.isRequired,required:t.default.bool,size:t.default.oneOf(Object.keys(X.sizes.input)),startAction:t.default.element,step:t.default.number,value:t.default.number};exports.NumberInput=d;
12
+ `,Z="",d=a.default.forwardRef(({size:r,startAction:N,name:j,hint:w,error:E,label:p,labelAction:k,locale:D,id:A,onValueChange:C,value:S,step:o,required:V,disabled:u,...x},_)=>{const L=Y.useId(A),b=D||G.getDefaultLocale(),i=f.useRef(new q.NumberParser(b,{style:"decimal"})),c=f.useRef(new q.NumberFormatter(b,{maximumFractionDigits:20})),[l,P]=J.useControllableState({prop(e){const n=String(S);return isNaN(n)||n!==e&&e!==""?e:n},defaultProp:Z,onChange(e){const n=i.current.parse(e);C(isNaN(n)?void 0:n)}}),s=e=>{P(String(e))},R=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&s(e)},y=()=>{if(!l){s(o);return}const e=i.current.parse(l),n=isNaN(e)?o:e+o;s(c.current.format(n))},g=()=>{if(!l){s(-o);return}const e=i.current.parse(l),n=isNaN(e)?-o:e-o;s(c.current.format(n))},K=e=>{if(!u)switch(e.key){case v.KeyboardKeys.DOWN:{e.preventDefault(),g();break}case v.KeyboardKeys.UP:{e.preventDefault(),y();break}}},z=()=>{if(l){const e=i.current.parse(l),n=isNaN(e)?"":c.current.format(e);s(n)}};return a.default.createElement($.Field,{name:j,hint:w,error:E,id:L,required:V},a.default.createElement(W.Stack,{spacing:1},p&&a.default.createElement(B.FieldLabel,{action:k},p),a.default.createElement(H.FieldInput,{ref:_,startAction:N,disabled:u,type:"text",inputmode:"decimal",onChange:R,onKeyDown:K,onBlur:z,value:l,size:r,endAction:a.default.createElement(a.default.Fragment,null,a.default.createElement(I,{disabled:u,"aria-hidden":!0,reverse:!0,onClick:y,tabIndex:-1,type:"button","data-testid":"ArrowUp"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"})),a.default.createElement(I,{disabled:u,"aria-hidden":!0,onClick:g,tabIndex:-1,type:"button","data-testid":"ArrowDown"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"}))),...x}),a.default.createElement(M.FieldHint,null),a.default.createElement(U.FieldError,null)))});d.displayName="NumberInput";d.defaultProps={"aria-label":void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,labelAction:void 0,locale:void 0,required:!1,size:"M",startAction:void 0,step:1,value:void 0};d.propTypes={"aria-label":t.default.string,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.string,label:t.default.string,labelAction:t.default.element,locale:t.default.string,name:t.default.string.isRequired,onValueChange:t.default.func.isRequired,required:t.default.bool,size:t.default.oneOf(Object.keys(X.sizes.input)),startAction:t.default.element,step:t.default.number,value:t.default.number};exports.NumberInput=d;
@@ -28,7 +28,7 @@ const h = L.button`
28
28
  height: ${4 / 16}rem;
29
29
  transform: ${({ reverse: n }) => n ? "rotateX(180deg)" : void 0};
30
30
  }
31
- `, J = "", c = t.forwardRef(
31
+ `, J = "", u = t.forwardRef(
32
32
  ({
33
33
  size: n,
34
34
  startAction: w,
@@ -43,39 +43,39 @@ const h = L.button`
43
43
  value: k,
44
44
  step: i,
45
45
  required: C,
46
- disabled: s,
46
+ disabled: m,
47
47
  ...P
48
48
  }, R) => {
49
- const O = X("numberinput", D), p = x || Y(), m = g(new T(p, { style: "decimal" })), u = g(new z(p, { maximumFractionDigits: 20 })), [a, S] = G({
49
+ const O = X(D), p = x || Y(), s = g(new T(p, { style: "decimal" })), c = g(new z(p, { maximumFractionDigits: 20 })), [a, S] = G({
50
50
  prop(e) {
51
51
  const o = String(k);
52
52
  return isNaN(o) || o !== e && e !== "" ? e : o;
53
53
  },
54
54
  defaultProp: J,
55
55
  onChange(e) {
56
- const o = m.current.parse(e);
56
+ const o = s.current.parse(e);
57
57
  F(isNaN(o) ? void 0 : o);
58
58
  }
59
59
  }), l = (e) => {
60
60
  S(String(e));
61
61
  }, $ = ({ target: { value: e } }) => {
62
- m.current.isValidPartialNumber(e) && l(e);
62
+ s.current.isValidPartialNumber(e) && l(e);
63
63
  }, f = () => {
64
64
  if (!a) {
65
65
  l(i);
66
66
  return;
67
67
  }
68
- const e = m.current.parse(a), o = isNaN(e) ? i : e + i;
69
- l(u.current.format(o));
68
+ const e = s.current.parse(a), o = isNaN(e) ? i : e + i;
69
+ l(c.current.format(o));
70
70
  }, b = () => {
71
71
  if (!a) {
72
72
  l(-i);
73
73
  return;
74
74
  }
75
- const e = m.current.parse(a), o = isNaN(e) ? -i : e - i;
76
- l(u.current.format(o));
75
+ const e = s.current.parse(a), o = isNaN(e) ? -i : e - i;
76
+ l(c.current.format(o));
77
77
  }, q = (e) => {
78
- if (!s)
78
+ if (!m)
79
79
  switch (e.key) {
80
80
  case y.DOWN: {
81
81
  e.preventDefault(), b();
@@ -88,7 +88,7 @@ const h = L.button`
88
88
  }
89
89
  }, K = () => {
90
90
  if (a) {
91
- const e = m.current.parse(a), o = isNaN(e) ? "" : u.current.format(e);
91
+ const e = s.current.parse(a), o = isNaN(e) ? "" : c.current.format(e);
92
92
  l(o);
93
93
  }
94
94
  };
@@ -105,7 +105,7 @@ const h = L.button`
105
105
  }, d), /* @__PURE__ */ t.createElement(_, {
106
106
  ref: R,
107
107
  startAction: w,
108
- disabled: s,
108
+ disabled: m,
109
109
  type: "text",
110
110
  inputmode: "decimal",
111
111
  onChange: $,
@@ -114,7 +114,7 @@ const h = L.button`
114
114
  value: a,
115
115
  size: n,
116
116
  endAction: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, {
117
- disabled: s,
117
+ disabled: m,
118
118
  "aria-hidden": !0,
119
119
  reverse: !0,
120
120
  onClick: f,
@@ -125,7 +125,7 @@ const h = L.button`
125
125
  as: v,
126
126
  color: "neutral500"
127
127
  })), /* @__PURE__ */ t.createElement(h, {
128
- disabled: s,
128
+ disabled: m,
129
129
  "aria-hidden": !0,
130
130
  onClick: b,
131
131
  tabIndex: -1,
@@ -139,8 +139,8 @@ const h = L.button`
139
139
  }), /* @__PURE__ */ t.createElement(j, null), /* @__PURE__ */ t.createElement(H, null)));
140
140
  }
141
141
  );
142
- c.displayName = "NumberInput";
143
- c.defaultProps = {
142
+ u.displayName = "NumberInput";
143
+ u.defaultProps = {
144
144
  "aria-label": void 0,
145
145
  disabled: !1,
146
146
  error: void 0,
@@ -155,7 +155,7 @@ c.defaultProps = {
155
155
  step: 1,
156
156
  value: void 0
157
157
  };
158
- c.propTypes = {
158
+ u.propTypes = {
159
159
  "aria-label": r.string,
160
160
  disabled: r.bool,
161
161
  error: r.string,
@@ -173,5 +173,5 @@ c.propTypes = {
173
173
  value: r.number
174
174
  };
175
175
  export {
176
- c as NumberInput
176
+ u as NumberInput
177
177
  };
@@ -1,12 +1,8 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),y=require("prop-types"),b=require("styled-components"),n=require("../Box/Box.cjs"),m=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),k=require("../BaseCheckbox/assets/checkmark.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(s),t=i(y),u=i(b),R=u.default.div`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),y=require("prop-types"),m=require("styled-components"),l=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),k=require("../BaseCheckbox/assets/checkmark.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(s),t=i(y),u=i(m),R=u.default(l.Box)`
2
2
  border: 1px solid
3
3
  ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral300};
4
- border-radius: ${({theme:e})=>e.borderRadius};
5
4
  height: 18px;
6
5
  width: 18px;
7
- position: relative;
8
- z-index: 1;
9
- overflow: hidden;
10
6
  background-color: ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral0};
11
7
 
12
8
  ${({theme:e,indeterminate:o})=>o&&`&::after {
@@ -34,7 +30,7 @@
34
30
  }
35
31
 
36
32
  `}
37
- `,T=u.default(n.Box)`
33
+ `,T=u.default(l.Box)`
38
34
  width: 100%;
39
35
  border: none;
40
36
  text-align: left;
@@ -46,4 +42,4 @@
46
42
  &:hover {
47
43
  background: ${({theme:e})=>e.colors.primary100};
48
44
  }
49
- `,l=({selected:e,indeterminate:o,children:a,value:c,multi:p,isChild:f,startIcon:d,...g})=>{const h=s.useRef(null);return r.default.createElement(T,{as:"li",hasRadius:!0,paddingLeft:f?7:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:h,role:"option","aria-selected":e,background:"neutral0","data-strapi-value":c,...g},r.default.createElement(x.Flex,null,d&&r.default.createElement(n.Box,{paddingRight:2,"aria-hidden":!0},d),p&&r.default.createElement(n.Box,{paddingRight:2,"aria-hidden":!0},r.default.createElement(R,{selected:e,indeterminate:o})),r.default.createElement(m.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},a)))};l.defaultProps={isChild:!1,multi:!1,selected:!1,startIcon:void 0,indeterminate:!1};l.propTypes={children:t.default.oneOfType([t.default.string,t.default.number]).isRequired,indeterminate:t.default.bool,isChild:t.default.bool,multi:t.default.bool,selected:t.default.bool,startIcon:t.default.node,value:t.default.oneOfType([t.default.string,t.default.number]).isRequired};l.displayName="Option";exports.Option=l;
45
+ `,n=({selected:e,indeterminate:o,children:a,value:c,multi:p,isChild:f,startIcon:d,...h})=>{const g=s.useRef(null);return r.default.createElement(T,{as:"li",hasRadius:!0,paddingLeft:f?7:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:g,role:"option","aria-selected":e,background:"neutral0","data-strapi-value":c,...h},r.default.createElement(b.Flex,null,d&&r.default.createElement(l.Box,{paddingRight:2,"aria-hidden":!0},d),p&&r.default.createElement(l.Box,{paddingRight:2,"aria-hidden":!0},r.default.createElement(R,{hasRadius:!0,overflow:"hidden",position:"relative",indeterminate:o,selected:e,zIndex:1})),r.default.createElement(x.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},a)))};n.defaultProps={isChild:!1,multi:!1,selected:!1,startIcon:void 0,indeterminate:!1};n.propTypes={children:t.default.oneOfType([t.default.string,t.default.number]).isRequired,indeterminate:t.default.bool,isChild:t.default.bool,multi:t.default.bool,selected:t.default.bool,startIcon:t.default.node,value:t.default.oneOfType([t.default.string,t.default.number]).isRequired};n.displayName="Option";exports.Option=n;
@@ -5,15 +5,11 @@ import { Box as a } from "../Box/Box.js";
5
5
  import { Typography as h } from "../Typography/Typography.js";
6
6
  import { Flex as g } from "../Flex/Flex.js";
7
7
  import b from "../BaseCheckbox/assets/checkmark.js";
8
- const y = d.div`
8
+ const y = d(a)`
9
9
  border: 1px solid
10
10
  ${({ theme: e, selected: r, indeterminate: i }) => r || i ? e.colors.primary600 : e.colors.neutral300};
11
- border-radius: ${({ theme: e }) => e.borderRadius};
12
11
  height: 18px;
13
12
  width: 18px;
14
- position: relative;
15
- z-index: 1;
16
- overflow: hidden;
17
13
  background-color: ${({ theme: e, selected: r, indeterminate: i }) => r || i ? e.colors.primary600 : e.colors.neutral0};
18
14
 
19
15
  ${({ theme: e, indeterminate: r }) => r && `&::after {
@@ -75,8 +71,12 @@ const y = d.div`
75
71
  paddingRight: 2,
76
72
  "aria-hidden": !0
77
73
  }, /* @__PURE__ */ t.createElement(y, {
74
+ hasRadius: !0,
75
+ overflow: "hidden",
76
+ position: "relative",
77
+ indeterminate: r,
78
78
  selected: e,
79
- indeterminate: r
79
+ zIndex: 1
80
80
  })), /* @__PURE__ */ t.createElement(h, {
81
81
  textColor: e ? "primary600" : "neutral800",
82
82
  fontWeight: e ? "bold" : null
@@ -1,3 +1,3 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),le=require("prop-types"),ne=require("styled-components"),P=require("@strapi/icons"),re=require("../themes/sizes.cjs"),oe=require("./SelectButton.cjs"),ae=require("../Field/Field.cjs"),se=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const ie=require("../Field/FieldHint.cjs"),ce=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const de=require("../Popover/Popover.cjs"),ue=require("../Stack/Stack.cjs"),A=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),z=require("../Box/Box.cjs"),fe=require("../helpers/useId.cjs"),pe=require("./SelectList.cjs"),T=require("./components.cjs"),ye=require("./hooks/useButtonRef.cjs"),G=require("../VisuallyHidden/VisuallyHidden.cjs"),he=require("./constants.cjs"),W=require("../helpers/escapeSelector.cjs"),me=require("./SelectTags.cjs"),v=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},l=v(u),e=v(le),Ee=v(ne),ge=Ee.default(x.Flex)`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),le=require("prop-types"),ne=require("styled-components"),M=require("@strapi/icons"),re=require("../themes/sizes.cjs"),oe=require("./SelectButton.cjs"),ae=require("../Field/Field.cjs"),se=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const ie=require("../Field/FieldHint.cjs"),ce=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const de=require("../Popover/Popover.cjs"),ue=require("../Stack/Stack.cjs"),P=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),A=require("../Box/Box.cjs"),fe=require("../helpers/useId.cjs"),pe=require("./SelectList.cjs"),T=require("./components.cjs"),ye=require("./hooks/useButtonRef.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),he=require("./constants.cjs"),G=require("../helpers/escapeSelector.cjs"),me=require("./SelectTags.cjs"),v=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},l=v(u),e=v(le),Ee=v(ne),ge=Ee.default(x.Flex)`
2
2
  width: 100%;
3
- `,I=({label:o,labelAction:N,id:J,children:K,customizeContent:p,placeholder:b,onChange:F,value:n,hint:S,error:y,disabled:i,clearLabel:C,onClear:O,onReachEnd:Q,multi:a,required:U,selectButtonTitle:V,size:X,startIcon:R,withTags:h,...Y})=>{const r=fe.useId("select",J),[m,E]=u.useState(void 0),L=ye.useButtonRef(m),$=u.useRef(null),_=`${r}-label`,g=`${r}-content`,k=typeof y=="string";let j;if(k?j=`${r}-error`:S&&(j=`${r}-hint`),h&&!a)throw new Error('The "withTags" props can only be used when the "multi" prop is present');const Z=()=>{E(void 0)},ee=()=>{i||(O(),L.current.focus())},D=t=>{t.preventDefault(),!i&&(t.nativeEvent.which===3||t.nativeEvent.button===2||E(he.DownState.Mouse))},q=(t,s=!0)=>{a?F(n.includes(t)?n.filter(c=>c!==t):[...n,t]):(F(t),s&&E(void 0))},w=t=>{F(n.includes(t[0])?n.filter((s,c,f)=>f.indexOf(s)<0,t):[...n,...t])};let B,H=[];const M=(t,s)=>{const c=`${r}-option-${t.props.value}`,f=a?n.includes(t.props.value):t.props.value===n;return f&&(h?H.push({label:t.props.children,value:t.props.value}):B=t.props.children),u.cloneElement(t,{id:W.escapeSelector(c),onClick:()=>q(t.props.value),selected:f,multi:a,isChild:s})},te=u.Children.toArray(K).map(t=>{if(t.type.displayName==="OptGroup"){const s=`${r}-option-${t.props.label}`,c=t.props.children.every(d=>n.includes(d.props.value)),f=!c&&t.props.children.some(d=>n.includes(d.props.value));return u.cloneElement(t,{id:W.escapeSelector(s),onClick:()=>w(t.props.children.map(d=>d.props.value)),selected:c,indeterminate:f,multi:a,children:u.Children.toArray(t.props.children).map(d=>M(d,!0)),value:t.props.label})}return M(t)});return l.default.createElement(ae.Field,{hint:S,error:y,id:r,required:U},l.default.createElement(ue.Stack,{spacing:o||S||k?1:0},o&&l.default.createElement(se.FieldLabel,{action:N},o),l.default.createElement(T.SelectButtonWrapper,{size:X,hasError:Boolean(y),disabled:i,ref:$},l.default.createElement(oe.SelectButton,{ref:L,labelledBy:`${r} ${_} ${g}`,"aria-describedby":j,expanded:Boolean(m),onTrigger:E,id:r,hasError:Boolean(y),disabled:i,onMouseDown:D,...Y}),l.default.createElement(ge,{justifyContent:"space-between"},l.default.createElement(x.Flex,null,R&&l.default.createElement(z.Box,{paddingLeft:3,"aria-hidden":!0},R),h&&l.default.createElement(me.SelectTags,{tags:H,onRemoveTag:q,disabled:i}),l.default.createElement(z.Box,{paddingLeft:4,paddingRight:4},h?l.default.createElement(l.default.Fragment,null,!n||n.length===0?l.default.createElement(A.Typography,{ellipsis:!0,id:g,textColor:"neutral600"},b):null,l.default.createElement(G.VisuallyHidden,{as:"span",id:g},p?p(n):B||b,n.join(", "))):l.default.createElement(A.Typography,{ellipsis:!0,id:g,textColor:n?"neutral800":"neutral600"},p?p(n):B||b,a&&l.default.createElement(G.VisuallyHidden,{as:"span"},n.join(", "))))),l.default.createElement(x.Flex,null,(a&&n&&n.length||!a&&n)&&O&&l.default.createElement(T.IconBox,{as:"button",type:"button",onClick:ee,"aria-label":C,"aria-disabled":i,title:C},l.default.createElement(P.Cross,null)),l.default.createElement(T.CaretBox,{paddingLeft:3,"aria-hidden":!0,as:"button",type:"button",onMouseDown:D,tabIndex:-1,disabled:i,title:V},l.default.createElement(P.CarretDown,null))))),l.default.createElement(ie.FieldHint,null),l.default.createElement(ce.FieldError,null)),m&&l.default.createElement(de.Popover,{source:$,spacing:4,fullWidth:!0,intersectionId:`select-list-intersection-${r}`,onReachEnd:Q},l.default.createElement(pe.SelectList,{selectId:r,labelledBy:o?_:void 0,onEscape:Z,expanded:m,onSelectItem:(t,s)=>s?w(t):q(t,!1),multi:a},te)))};I.defaultProps={"aria-label":void 0,children:[],clearLabel:"Clear",customizeContent:void 0,disabled:!1,id:void 0,label:void 0,labelAction:void 0,multi:!1,onChange(){},onClear:void 0,onReachEnd:void 0,value:void 0,hint:void 0,error:void 0,placeholder:"Select...",required:!1,selectButtonTitle:"Carret Down Button",size:"M",startIcon:void 0,withTags:!1};I.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,customizeContent:e.default.func,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,labelAction:e.default.element,multi:e.default.bool,onChange:e.default.func,onClear:e.default.func,onReachEnd:e.default.func,placeholder:e.default.string,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(re.sizes.input)),startIcon:e.default.element,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number]),withTags:e.default.bool};exports.Select=I;
3
+ `,I=({label:o,labelAction:W,id:N,children:J,customizeContent:y,placeholder:b,onChange:F,value:n,hint:S,error:p,disabled:i,clearLabel:C,onClear:O,onReachEnd:K,multi:a,required:Q,selectButtonTitle:U,size:V,startIcon:R,withTags:h,...X})=>{const r=fe.useId(N),[m,E]=u.useState(void 0),L=ye.useButtonRef(m),$=u.useRef(null),_=`${r}-label`,g=`${r}-content`,Y=typeof p=="string";let j;if(p?j=`${r}-error`:S&&(j=`${r}-hint`),h&&!a)throw new Error('The "withTags" props can only be used when the "multi" prop is present');const Z=()=>{E(void 0)},ee=()=>{i||(O(),L.current.focus())},k=t=>{t.preventDefault(),!i&&(t.nativeEvent.which===3||t.nativeEvent.button===2||E(he.DownState.Mouse))},q=(t,s=!0)=>{a?F(n.includes(t)?n.filter(c=>c!==t):[...n,t]):(F(t),s&&E(void 0))},D=t=>{F(n.includes(t[0])?n.filter((s,c,f)=>f.indexOf(s)<0,t):[...n,...t])};let B,w=[];const H=(t,s)=>{const c=`${r}-option-${t.props.value}`,f=a?n.includes(t.props.value):t.props.value===n;return f&&(h?w.push({label:t.props.children,value:t.props.value}):B=t.props.children),u.cloneElement(t,{id:G.escapeSelector(c),onClick:()=>q(t.props.value),selected:f,multi:a,isChild:s})},te=u.Children.toArray(J).map(t=>{if(t.type.displayName==="OptGroup"){const s=`${r}-option-${t.props.label}`,c=t.props.children.every(d=>n.includes(d.props.value)),f=!c&&t.props.children.some(d=>n.includes(d.props.value));return u.cloneElement(t,{id:G.escapeSelector(s),onClick:()=>D(t.props.children.map(d=>d.props.value)),selected:c,indeterminate:f,multi:a,children:u.Children.toArray(t.props.children).map(d=>H(d,!0)),value:t.props.label})}return H(t)});return l.default.createElement(ae.Field,{hint:S,error:p,id:r,required:Q},l.default.createElement(ue.Stack,{spacing:o||S||Y?1:0},o&&l.default.createElement(se.FieldLabel,{action:W},o),l.default.createElement(T.SelectButtonWrapper,{size:V,hasError:Boolean(p),disabled:i,ref:$},l.default.createElement(oe.SelectButton,{ref:L,labelledBy:`${r} ${_} ${g}`,"aria-describedby":j,expanded:Boolean(m),onTrigger:E,id:r,hasError:Boolean(p),disabled:i,onMouseDown:k,...X}),l.default.createElement(ge,{justifyContent:"space-between"},l.default.createElement(x.Flex,null,R&&l.default.createElement(A.Box,{paddingLeft:3,"aria-hidden":!0},R),h&&l.default.createElement(me.SelectTags,{tags:w,onRemoveTag:q,disabled:i}),l.default.createElement(A.Box,{paddingLeft:4,paddingRight:4},h?l.default.createElement(l.default.Fragment,null,!n||n.length===0?l.default.createElement(P.Typography,{ellipsis:!0,id:g,textColor:"neutral600"},b):null,l.default.createElement(z.VisuallyHidden,{as:"span",id:g},y?y(n):B||b,n.join(", "))):l.default.createElement(P.Typography,{ellipsis:!0,id:g,textColor:n?"neutral800":"neutral600"},y?y(n):B||b,a&&l.default.createElement(z.VisuallyHidden,{as:"span"},n.join(", "))))),l.default.createElement(x.Flex,null,(a&&n&&n.length||!a&&n)&&O&&l.default.createElement(T.IconBox,{as:"button",type:"button",onClick:ee,"aria-label":C,"aria-disabled":i,title:C},l.default.createElement(M.Cross,null)),l.default.createElement(T.CaretBox,{paddingLeft:3,"aria-hidden":!0,as:"button",type:"button",onMouseDown:k,tabIndex:-1,disabled:i,title:U},l.default.createElement(M.CarretDown,null))))),l.default.createElement(ie.FieldHint,null),l.default.createElement(ce.FieldError,null)),m&&l.default.createElement(de.Popover,{source:$,spacing:4,fullWidth:!0,intersectionId:`select-list-intersection-${r}`,onReachEnd:K},l.default.createElement(pe.SelectList,{selectId:r,labelledBy:o?_:void 0,onEscape:Z,expanded:m,onSelectItem:(t,s)=>s?D(t):q(t,!1),multi:a},te)))};I.defaultProps={"aria-label":void 0,children:[],clearLabel:"Clear",customizeContent:void 0,disabled:!1,id:void 0,label:void 0,labelAction:void 0,multi:!1,onChange(){},onClear:void 0,onReachEnd:void 0,value:void 0,hint:void 0,error:void 0,placeholder:"Select...",required:!1,selectButtonTitle:"Carret Down Button",size:"M",startIcon:void 0,withTags:!1};I.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,customizeContent:e.default.func,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,labelAction:e.default.element,multi:e.default.bool,onChange:e.default.func,onClear:e.default.func,onReachEnd:e.default.func,placeholder:e.default.string,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(re.sizes.input)),startIcon:e.default.element,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number]),withTags:e.default.bool};exports.Select=I;