@strapi/design-system 1.3.0 → 1.3.1-alpha.1

package/dist/Select/OptGroup.js

@@ -1,20 +1,40 @@
-import r from "prop-types";
-import t from "react";
-import { Option as m } from "./Option.js";
-const o = ({ children: e, label: p, ...a }) => {
-  const i = e.map((l) => l.props.value);
-  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(m, {
+var y = Object.defineProperty;
+var o = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var m = (e, r, t) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, s = (e, r) => {
+  for (var t in r || (r = {}))
+    n.call(r, t) && m(e, t, r[t]);
+  if (o)
+    for (var t of o(r))
+      u.call(r, t) && m(e, t, r[t]);
+  return e;
+};
+var d = (e, r) => {
+  var t = {};
+  for (var p in e)
+    n.call(e, p) && r.indexOf(p) < 0 && (t[p] = e[p]);
+  if (e != null && o)
+    for (var p of o(e))
+      r.indexOf(p) < 0 && u.call(e, p) && (t[p] = e[p]);
+  return t;
+};
+import a from "prop-types";
+import i from "react";
+import { Option as O } from "./Option.js";
+const c = (p) => {
+  var l = p, { children: e, label: r } = l, t = d(l, ["children", "label"]);
+  const f = e.map((g) => g.props.value);
+  return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(O, s({
     "data-opt-group": !0,
-    "data-opt-group-children": i,
-    "aria-label": `${p}, ${e.length} items`,
-    ...a
-  }, p), e);
+    "data-opt-group-children": f,
+    "aria-label": `${r}, ${e.length} items`
+  }, t), r), e);
 };
-o.propTypes = {
-  children: r.arrayOf(r.node).isRequired,
-  label: r.string.isRequired
+c.propTypes = {
+  children: a.arrayOf(a.node).isRequired,
+  label: a.string.isRequired
 };
-o.displayName = "OptGroup";
+c.displayName = "OptGroup";
 export {
-  o as OptGroup
+  c as OptGroup
 };

package/dist/Select/Option.cjs

@@ -1,15 +1,15 @@
-"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`
+"use strict";var v=Object.defineProperty;var n=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var p=(e,t,o)=>t in e?v(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,h=(e,t)=>{for(var o in t||(t={}))f.call(t,o)&&p(e,o,t[o]);if(n)for(var o of n(t))g.call(t,o)&&p(e,o,t[o]);return e};var y=(e,t)=>{var o={};for(var r in e)f.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&n)for(var r of n(e))t.indexOf(r)<0&&g.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),q=require("prop-types"),B=require("styled-components"),d=require("../Box/Box.cjs"),_=require("../Typography/Typography.cjs"),$=require("../Flex/Flex.cjs"),O=require("../BaseCheckbox/assets/checkmark.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=s(b),a=s(q),m=s(B),j=m.default.div`
   border: 1px solid
-    ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral300};
+    ${({theme:e,selected:t,indeterminate:o})=>t||o?e.colors.primary600:e.colors.neutral300};
   border-radius: ${({theme:e})=>e.borderRadius};
   height: 18px;
   width: 18px;
   position: relative;
   z-index: 1;
   overflow: hidden;
-  background-color: ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral0};
+  background-color: ${({theme:e,selected:t,indeterminate:o})=>t||o?e.colors.primary600:e.colors.neutral0};
 
-  ${({theme:e,indeterminate:o})=>o&&`&::after {
+  ${({theme:e,indeterminate:t})=>t&&`&::after {
       content: '';
       display: block;
       position: relative;
@@ -27,14 +27,14 @@
   ${({selected:e})=>e&&`  
     &::after {
       content: '';
-      background: url(${k}) no-repeat no-repeat center center;
+      background: url(${O}) no-repeat no-repeat center center;
       width: 100%;
       height: 100%;
       position: absolute;
     }
 
   `}
-`,T=u.default(n.Box)`
+`,w=m.default(d.Box)`
   width: 100%;
   border: none;
   text-align: left;
@@ -46,4 +46,4 @@
   &:hover {
     background: ${({theme:e})=>e.colors.primary100};
   }
-`,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;
+`,i=E=>{var c=E,{selected:e,indeterminate:t,children:o,value:r,multi:x,isChild:k,startIcon:u}=c,R=y(c,["selected","indeterminate","children","value","multi","isChild","startIcon"]);const T=b.useRef(null);return l.default.createElement(w,h({as:"li",hasRadius:!0,paddingLeft:k?7:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:T,role:"option","aria-selected":e,background:"neutral0","data-strapi-value":r},R),l.default.createElement($.Flex,null,u&&l.default.createElement(d.Box,{paddingRight:2,"aria-hidden":!0},u),x&&l.default.createElement(d.Box,{paddingRight:2,"aria-hidden":!0},l.default.createElement(j,{selected:e,indeterminate:t})),l.default.createElement(_.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},o)))};i.defaultProps={isChild:!1,multi:!1,selected:!1,startIcon:void 0,indeterminate:!1};i.propTypes={children:a.default.oneOfType([a.default.string,a.default.number]).isRequired,indeterminate:a.default.bool,isChild:a.default.bool,multi:a.default.bool,selected:a.default.bool,startIcon:a.default.node,value:a.default.oneOfType([a.default.string,a.default.number]).isRequired};i.displayName="Option";exports.Option=i;

package/dist/Select/Option.js

@@ -1,22 +1,42 @@
-import t, { useRef as f } from "react";
-import o from "prop-types";
-import d from "styled-components";
-import { Box as a } from "../Box/Box.js";
-import { Typography as h } from "../Typography/Typography.js";
-import { Flex as g } from "../Flex/Flex.js";
-import b from "../BaseCheckbox/assets/checkmark.js";
-const y = d.div`
+var R = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var c = (e, o, r) => o in e ? R(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, f = (e, o) => {
+  for (var r in o || (o = {}))
+    u.call(o, r) && c(e, r, o[r]);
+  if (n)
+    for (var r of n(o))
+      m.call(o, r) && c(e, r, o[r]);
+  return e;
+};
+var h = (e, o) => {
+  var r = {};
+  for (var t in e)
+    u.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && n)
+    for (var t of n(e))
+      o.indexOf(t) < 0 && m.call(e, t) && (r[t] = e[t]);
+  return r;
+};
+import a, { useRef as $ } from "react";
+import i from "prop-types";
+import g from "styled-components";
+import { Box as l } from "../Box/Box.js";
+import { Typography as v } from "../Typography/Typography.js";
+import { Flex as w } from "../Flex/Flex.js";
+import E from "../BaseCheckbox/assets/checkmark.js";
+const T = g.div`
   border: 1px solid
-    ${({ theme: e, selected: r, indeterminate: i }) => r || i ? e.colors.primary600 : e.colors.neutral300};
+    ${({ theme: e, selected: o, indeterminate: r }) => o || r ? e.colors.primary600 : e.colors.neutral300};
   border-radius: ${({ theme: e }) => e.borderRadius};
   height: 18px;
   width: 18px;
   position: relative;
   z-index: 1;
   overflow: hidden;
-  background-color: ${({ theme: e, selected: r, indeterminate: i }) => r || i ? e.colors.primary600 : e.colors.neutral0};
+  background-color: ${({ theme: e, selected: o, indeterminate: r }) => o || r ? e.colors.primary600 : e.colors.neutral0};
 
-  ${({ theme: e, indeterminate: r }) => r && `&::after {
+  ${({ theme: e, indeterminate: o }) => o && `&::after {
       content: '';
       display: block;
       position: relative;
@@ -34,14 +54,14 @@ const y = d.div`
   ${({ selected: e }) => e && `  
     &::after {
       content: '';
-      background: url(${b}) no-repeat no-repeat center center;
+      background: url(${E}) no-repeat no-repeat center center;
       width: 100%;
       height: 100%;
       position: absolute;
     }
 
   `}
-`, x = d(a)`
+`, O = g(l)`
   width: 100%;
   border: none;
   text-align: left;
@@ -53,52 +73,52 @@ const y = d.div`
   &:hover {
     background: ${({ theme: e }) => e.colors.primary100};
   }
-`, n = ({ selected: e, indeterminate: r, children: i, value: p, multi: s, isChild: c, startIcon: l, ...u }) => {
-  const m = f(null);
-  return /* @__PURE__ */ t.createElement(x, {
+`, d = (C) => {
+  var s = C, { selected: e, indeterminate: o, children: r, value: t, multi: b, isChild: y, startIcon: p } = s, x = h(s, ["selected", "indeterminate", "children", "value", "multi", "isChild", "startIcon"]);
+  const k = $(null);
+  return /* @__PURE__ */ a.createElement(O, f({
     as: "li",
     hasRadius: !0,
-    paddingLeft: c ? 7 : 4,
+    paddingLeft: y ? 7 : 4,
     paddingRight: 4,
     paddingTop: 2,
     paddingBottom: 2,
-    ref: m,
+    ref: k,
     role: "option",
     "aria-selected": e,
     background: "neutral0",
-    "data-strapi-value": p,
-    ...u
-  }, /* @__PURE__ */ t.createElement(g, null, l && /* @__PURE__ */ t.createElement(a, {
+    "data-strapi-value": t
+  }, x), /* @__PURE__ */ a.createElement(w, null, p && /* @__PURE__ */ a.createElement(l, {
     paddingRight: 2,
     "aria-hidden": !0
-  }, l), s && /* @__PURE__ */ t.createElement(a, {
+  }, p), b && /* @__PURE__ */ a.createElement(l, {
     paddingRight: 2,
     "aria-hidden": !0
-  }, /* @__PURE__ */ t.createElement(y, {
+  }, /* @__PURE__ */ a.createElement(T, {
     selected: e,
-    indeterminate: r
-  })), /* @__PURE__ */ t.createElement(h, {
+    indeterminate: o
+  })), /* @__PURE__ */ a.createElement(v, {
     textColor: e ? "primary600" : "neutral800",
     fontWeight: e ? "bold" : null
-  }, i)));
+  }, r)));
 };
-n.defaultProps = {
+d.defaultProps = {
   isChild: !1,
   multi: !1,
   selected: !1,
   startIcon: void 0,
   indeterminate: !1
 };
-n.propTypes = {
-  children: o.oneOfType([o.string, o.number]).isRequired,
-  indeterminate: o.bool,
-  isChild: o.bool,
-  multi: o.bool,
-  selected: o.bool,
-  startIcon: o.node,
-  value: o.oneOfType([o.string, o.number]).isRequired
+d.propTypes = {
+  children: i.oneOfType([i.string, i.number]).isRequired,
+  indeterminate: i.bool,
+  isChild: i.bool,
+  multi: i.bool,
+  selected: i.bool,
+  startIcon: i.node,
+  value: i.oneOfType([i.string, i.number]).isRequired
 };
-n.displayName = "Option";
+d.displayName = "Option";
 export {
-  n as Option
+  d as Option
 };

package/dist/Select/Select.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),Z=require("prop-types"),ee=require("@strapi/icons/CarretDown"),te=require("@strapi/icons/Cross"),le=require("../themes/sizes.cjs"),ne=require("./SelectButton.cjs"),re=require("../Field/Field.cjs"),oe=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const ae=require("../Field/FieldHint.cjs"),se=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const ce=require("../Popover/Popover.cjs"),ie=require("../Stack/Stack.cjs"),w=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),H=require("../Box/Box.cjs"),de=require("../helpers/useId.cjs"),ue=require("./SelectList.cjs"),B=require("./components.cjs"),fe=require("./hooks/useButtonRef.cjs"),M=require("../VisuallyHidden/VisuallyHidden.cjs"),pe=require("./constants.cjs"),P=require("../helpers/escapeSelector.cjs"),ye=require("./SelectTags.cjs"),he=require("styled-components"),p=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},l=p(d),e=p(Z),me=p(ee),Ee=p(te),be=p(he),ge=be.default(T.Flex)`
+"use strict";var ae=Object.defineProperty;var S=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var z=(l,a,o)=>a in l?ae(l,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):l[a]=o,N=(l,a)=>{for(var o in a||(a={}))G.call(a,o)&&z(l,o,a[o]);if(S)for(var o of S(a))W.call(a,o)&&z(l,o,a[o]);return l};var J=(l,a)=>{var o={};for(var s in l)G.call(l,s)&&a.indexOf(s)<0&&(o[s]=l[s]);if(l!=null&&S)for(var s of S(l))a.indexOf(s)<0&&W.call(l,s)&&(o[s]=l[s]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),se=require("prop-types"),ce=require("@strapi/icons/CarretDown"),ie=require("@strapi/icons/Cross"),de=require("../themes/sizes.cjs"),ue=require("./SelectButton.cjs"),fe=require("../Field/Field.cjs"),pe=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const ye=require("../Field/FieldHint.cjs"),he=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const me=require("../Popover/Popover.cjs"),Ee=require("../Stack/Stack.cjs"),K=require("../Typography/Typography.cjs"),L=require("../Flex/Flex.cjs"),Q=require("../Box/Box.cjs"),be=require("../helpers/useId.cjs"),ge=require("./SelectList.cjs"),O=require("./components.cjs"),qe=require("./hooks/useButtonRef.cjs"),U=require("../VisuallyHidden/VisuallyHidden.cjs"),Fe=require("./constants.cjs"),V=require("../helpers/escapeSelector.cjs"),je=require("./SelectTags.cjs"),Se=require("styled-components"),m=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},n=m(p),e=m(se),ve=m(ce),xe=m(ie),Be=m(Se),Te=Be.default(L.Flex)`
   width: 100%;
-`,C=({label:r,labelAction:A,id:z,children:G,customizeContent:y,placeholder:q,onChange:F,value:n,hint:j,error:f,disabled:c,clearLabel:W,onClear:I,onReachEnd:N,multi:a,required:J,size:K,startIcon:O,withTags:h,...Q})=>{const o=de.useId("select",z),[m,E]=d.useState(void 0),L=fe.useButtonRef(m),R=d.useRef(null),S=`${o}-label`,b=`${o}-content`,U=f?`${o}-error`:j?`${o}-hint`:void 0;if(h&&!a)throw new Error('The "withTags" props can only be used when the "multi" prop is present');const V=()=>{E(void 0)},X=()=>{c||(I(),L.current.focus())},_=t=>{t.preventDefault(),!c&&(t.nativeEvent.which===3||t.nativeEvent.button===2||E(pe.DownState.Mouse))},v=(t,s=!0)=>{a?F(n.includes(t)?n.filter(u=>u!==t):[...n,t]):(F(t),s&&E(void 0))},$=t=>{F(n.includes(t[0])?n.filter(function(s){return this.indexOf(s)<0},t):[...n,...t])};let x,D=[];const k=(t,s)=>{const u=`${o}-option-${t.props.value}`,g=a?n.includes(t.props.value):t.props.value===n;return g&&(h?D.push({label:t.props.children,value:t.props.value}):x=t.props.children),d.cloneElement(t,{id:P.escapeSelector(u),onClick:()=>v(t.props.value),selected:g,multi:a,isChild:s})},Y=d.Children.toArray(G).map(t=>{if(t.type.displayName==="OptGroup"){const s=`${o}-option-${t.props.label}`,u=t.props.children.every(i=>n.includes(i.props.value)),g=!u&&t.props.children.some(i=>n.includes(i.props.value));return d.cloneElement(t,{id:P.escapeSelector(s),onClick:()=>$(t.props.children.map(i=>i.props.value)),selected:u,indeterminate:g,multi:a,children:d.Children.toArray(t.props.children).map(i=>k(i,!0)),value:t.props.label})}else return k(t)});return l.default.createElement(re.Field,{hint:j,error:f,id:o},l.default.createElement(ie.Stack,{spacing:r||j||f?1:0},r&&l.default.createElement(oe.FieldLabel,{required:J,as:"span",id:S,action:A},r),l.default.createElement(B.SelectButtonWrapper,{size:K,hasError:Boolean(f),disabled:c,ref:R},l.default.createElement(ne.SelectButton,{ref:L,labelledBy:`${S} ${b}`,"aria-describedby":U,expanded:Boolean(m),onTrigger:E,id:o,hasError:Boolean(f),disabled:c,onMouseDown:_,...Q}),l.default.createElement(ge,{justifyContent:"space-between"},l.default.createElement(T.Flex,null,O&&l.default.createElement(H.Box,{paddingLeft:3,"aria-hidden":!0},O),h&&l.default.createElement(ye.SelectTags,{tags:D,onRemoveTag:v,disabled:c}),l.default.createElement(H.Box,{paddingLeft:4,paddingRight:4},h?l.default.createElement(l.default.Fragment,null,!n||n.length===0?l.default.createElement(w.Typography,{ellipsis:!0,id:b,textColor:"neutral600"},q):null,l.default.createElement(M.VisuallyHidden,{as:"span",id:b},y?y(n):x||q,n.join(", "))):l.default.createElement(w.Typography,{ellipsis:!0,id:b,textColor:n?"neutral800":"neutral600"},y?y(n):x||q,a&&l.default.createElement(M.VisuallyHidden,{as:"span"},n.join(", "))))),l.default.createElement(T.Flex,null,(a&&n&&n.length||!a&&n)&&I&&l.default.createElement(B.IconBox,{as:"button",type:"button",onClick:X,"aria-label":W,"aria-disabled":c},l.default.createElement(Ee.default,null)),l.default.createElement(B.CaretBox,{paddingLeft:3,"aria-hidden":!0,as:"button",type:"button",onMouseDown:_,tabIndex:-1,disabled:c},l.default.createElement(me.default,null))))),l.default.createElement(ae.FieldHint,null),l.default.createElement(se.FieldError,null)),m&&l.default.createElement(ce.Popover,{source:R,spacing:4,fullWidth:!0,intersectionId:`select-list-intersection-${o}`,onReachEnd:N},l.default.createElement(ue.SelectList,{selectId:o,labelledBy:r?S:void 0,onEscape:V,expanded:m,onSelectItem:(t,s)=>s?$(t):v(t,!1),multi:a},Y)))};C.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,size:"M",startIcon:void 0,withTags:!1};C.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.string,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,size:e.default.oneOf(Object.keys(le.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=C;
+`,R=Ce=>{var D=Ce,{label:l,labelAction:a,id:o,children:s,customizeContent:E,placeholder:v,onChange:x,value:r,hint:B,error:h,disabled:u,clearLabel:X,onClear:_,onReachEnd:Y,multi:i,required:Z,size:ee,startIcon:$,withTags:b}=D,te=J(D,["label","labelAction","id","children","customizeContent","placeholder","onChange","value","hint","error","disabled","clearLabel","onClear","onReachEnd","multi","required","size","startIcon","withTags"]);const c=be.useId("select",o),[g,q]=p.useState(void 0),k=qe.useButtonRef(g),w=p.useRef(null),T=`${c}-label`,F=`${c}-content`,le=h?`${c}-error`:B?`${c}-hint`:void 0;if(b&&!i)throw new Error('The "withTags" props can only be used when the "multi" prop is present');const ne=()=>{q(void 0)},re=()=>{u||(_(),k.current.focus())},H=t=>{t.preventDefault(),!u&&(t.nativeEvent.which===3||t.nativeEvent.button===2||q(Fe.DownState.Mouse))},C=(t,d=!0)=>{i?x(r.includes(t)?r.filter(y=>y!==t):[...r,t]):(x(t),d&&q(void 0))},M=t=>{x(r.includes(t[0])?r.filter(function(d){return this.indexOf(d)<0},t):[...r,...t])};let I,P=[];const A=(t,d)=>{const y=`${c}-option-${t.props.value}`,j=i?r.includes(t.props.value):t.props.value===r;return j&&(b?P.push({label:t.props.children,value:t.props.value}):I=t.props.children),p.cloneElement(t,{id:V.escapeSelector(y),onClick:()=>C(t.props.value),selected:j,multi:i,isChild:d})},oe=p.Children.toArray(s).map(t=>{if(t.type.displayName==="OptGroup"){const d=`${c}-option-${t.props.label}`,y=t.props.children.every(f=>r.includes(f.props.value)),j=!y&&t.props.children.some(f=>r.includes(f.props.value));return p.cloneElement(t,{id:V.escapeSelector(d),onClick:()=>M(t.props.children.map(f=>f.props.value)),selected:y,indeterminate:j,multi:i,children:p.Children.toArray(t.props.children).map(f=>A(f,!0)),value:t.props.label})}else return A(t)});return n.default.createElement(fe.Field,{hint:B,error:h,id:c},n.default.createElement(Ee.Stack,{spacing:l||B||h?1:0},l&&n.default.createElement(pe.FieldLabel,{required:Z,as:"span",id:T,action:a},l),n.default.createElement(O.SelectButtonWrapper,{size:ee,hasError:Boolean(h),disabled:u,ref:w},n.default.createElement(ue.SelectButton,N({ref:k,labelledBy:`${T} ${F}`,"aria-describedby":le,expanded:Boolean(g),onTrigger:q,id:c,hasError:Boolean(h),disabled:u,onMouseDown:H},te)),n.default.createElement(Te,{justifyContent:"space-between"},n.default.createElement(L.Flex,null,$&&n.default.createElement(Q.Box,{paddingLeft:3,"aria-hidden":!0},$),b&&n.default.createElement(je.SelectTags,{tags:P,onRemoveTag:C,disabled:u}),n.default.createElement(Q.Box,{paddingLeft:4,paddingRight:4},b?n.default.createElement(n.default.Fragment,null,!r||r.length===0?n.default.createElement(K.Typography,{ellipsis:!0,id:F,textColor:"neutral600"},v):null,n.default.createElement(U.VisuallyHidden,{as:"span",id:F},E?E(r):I||v,r.join(", "))):n.default.createElement(K.Typography,{ellipsis:!0,id:F,textColor:r?"neutral800":"neutral600"},E?E(r):I||v,i&&n.default.createElement(U.VisuallyHidden,{as:"span"},r.join(", "))))),n.default.createElement(L.Flex,null,(i&&r&&r.length||!i&&r)&&_&&n.default.createElement(O.IconBox,{as:"button",type:"button",onClick:re,"aria-label":X,"aria-disabled":u},n.default.createElement(xe.default,null)),n.default.createElement(O.CaretBox,{paddingLeft:3,"aria-hidden":!0,as:"button",type:"button",onMouseDown:H,tabIndex:-1,disabled:u},n.default.createElement(ve.default,null))))),n.default.createElement(ye.FieldHint,null),n.default.createElement(he.FieldError,null)),g&&n.default.createElement(me.Popover,{source:w,spacing:4,fullWidth:!0,intersectionId:`select-list-intersection-${c}`,onReachEnd:Y},n.default.createElement(ge.SelectList,{selectId:c,labelledBy:l?T:void 0,onEscape:ne,expanded:g,onSelectItem:(t,d)=>d?M(t):C(t,!1),multi:i},oe)))};R.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,size:"M",startIcon:void 0,withTags:!1};R.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.string,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,size:e.default.oneOf(Object.keys(de.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=R;