@strapi/design-system 1.4.0-beta.2 → 1.4.1

package/dist/Link/Link.js

@@ -1,7 +1,7 @@
-var b = Object.defineProperty;
+var k = Object.defineProperty;
 var i = Object.getOwnPropertySymbols;
 var f = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
-var p = (e, r, o) => r in e ? b(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, v = (e, r) => {
+var p = (e, r, o) => r in e ? k(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, v = (e, r) => {
   for (var o in r || (r = {}))
     f.call(r, o) && p(e, o, r[o]);
   if (i)
@@ -18,15 +18,15 @@ var y = (e, r) => {
       r.indexOf(t) < 0 && u.call(e, t) && (o[t] = e[t]);
   return o;
 };
-import n from "react";
+import n, { forwardRef as x } from "react";
 import a from "prop-types";
 import g from "styled-components";
-import k from "@strapi/icons/ExternalLink";
-import { NavLink as x } from "react-router-dom";
+import R from "@strapi/icons/ExternalLink";
+import { NavLink as w } from "react-router-dom";
 import { Typography as h } from "../Typography/Typography.js";
 import { Box as I } from "../Box/Box.js";
-import { buttonFocusStyle as R } from "../themes/utils.js";
-const T = g.a`
+import { buttonFocusStyle as T } from "../themes/utils.js";
+const _ = g.a`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -55,19 +55,20 @@ const T = g.a`
     color: ${({ theme: e }) => e.colors.primary700};
   }
 
-  ${R};
+  ${T};
 `, l = g(I)`
   display: flex;
-`, d = (_) => {
-  var c = _, { href: e, to: r, children: o, disabled: t, startIcon: s, endIcon: m } = c, E = y(c, ["href", "to", "children", "disabled", "startIcon", "endIcon"]);
-  const L = e ? "_blank" : void 0, $ = e ? "noreferrer noopener" : void 0;
-  return /* @__PURE__ */ n.createElement(T, v({
-    as: r && !t ? x : "a",
-    target: L,
-    rel: $,
+`, d = x((C, L) => {
+  var c = C, { href: e, to: r, children: o, disabled: t, startIcon: s, endIcon: m } = c, E = y(c, ["href", "to", "children", "disabled", "startIcon", "endIcon"]);
+  const $ = e ? "_blank" : void 0, b = e ? "noreferrer noopener" : void 0;
+  return /* @__PURE__ */ n.createElement(_, v({
+    as: r && !t ? w : "a",
+    target: $,
+    rel: b,
     to: t ? void 0 : r,
     href: t ? "#" : e,
-    disabled: t
+    disabled: t,
+    ref: L
   }, E), s && /* @__PURE__ */ n.createElement(l, {
     as: "span",
     "aria-hidden": !0,
@@ -80,8 +81,8 @@ const T = g.a`
     as: "span",
     "aria-hidden": !0,
     paddingLeft: 2
-  }, /* @__PURE__ */ n.createElement(k, null)));
-};
+  }, /* @__PURE__ */ n.createElement(R, null)));
+});
 d.displayName = "Link";
 d.defaultProps = {
   endIcon: void 0,

package/dist/NumberInput/NumberInput.cjs

@@ -9,4 +9,4 @@
     height: ${4/16}rem;
     transform: ${({reverse:e})=>e?"rotateX(180deg)":void 0};
   }
-`,se="",b=l.default.forwardRef((ie,T)=>{var q=ie,{size:e,startAction:n,name:a,hint:u,error:V,label:F,labelAction:x,locale:L,id:P,onValueChange:R,value:K,step:i,required:z,disabled:f}=q,O=k(q,["size","startAction","name","hint","error","label","labelAction","locale","id","onValueChange","value","step","required","disabled"]);const $=ne.useId("numberinput",P),h=L||le.getDefaultLocale(),c=g.useRef(new D.NumberParser(h,{style:"decimal"})),y=g.useRef(new D.NumberFormatter(h,{maximumFractionDigits:20})),[s,B]=oe.useControllableState({prop(t){const o=String(K);return isNaN(o)||o!==t&&t!==""?t:o},defaultProp:se,onChange(t){const o=c.current.parse(t);R(isNaN(o)?void 0:o)}}),d=t=>{B(String(t))},H=({target:{value:t}})=>{c.current.isValidPartialNumber(t)&&d(t)},v=()=>{if(!s){d(i);return}const t=c.current.parse(s),o=isNaN(t)?i:t+i;d(y.current.format(o))},I=()=>{if(!s){d(-i);return}const t=c.current.parse(s),o=isNaN(t)?-i:t-i;d(y.current.format(o))},M=t=>{if(!f)switch(t.key){case A.KeyboardKeys.DOWN:{t.preventDefault(),I();break}case A.KeyboardKeys.UP:{t.preventDefault(),v();break}}},U=()=>{if(s){const t=c.current.parse(s),o=isNaN(t)?"":y.current.format(t);d(o)}};return l.default.createElement(J.Field,{name:a,hint:u,error:V,id:$},l.default.createElement(re.Stack,{spacing:1},F&&l.default.createElement(Q.FieldLabel,{required:z,action:x},F),l.default.createElement(Z.FieldInput,E({ref:T,startAction:n,disabled:f,type:"text",inputmode:"decimal",onChange:H,onKeyDown:M,onBlur:U,value:s,size:e,endAction:l.default.createElement(l.default.Fragment,null,l.default.createElement(_,{disabled:f,"aria-hidden":!0,reverse:!0,onClick:v,tabIndex:-1,type:"button","data-testid":"ArrowUp"},l.default.createElement(C.Icon,{as:S.default,color:"neutral500"})),l.default.createElement(_,{disabled:f,"aria-hidden":!0,onClick:I,tabIndex:-1,type:"button","data-testid":"ArrowDown"},l.default.createElement(C.Icon,{as:S.default,color:"neutral500"})))},O)),l.default.createElement(ee.FieldHint,null),l.default.createElement(te.FieldError,null)))});b.displayName="NumberInput";b.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};b.propTypes={"aria-label":r.default.string,disabled:r.default.bool,error:r.default.string,hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.string,label:r.default.string,labelAction:r.default.element,locale:r.default.string,name:r.default.string.isRequired,onValueChange:r.default.func.isRequired,required:r.default.bool,size:r.default.oneOf(Object.keys(ae.sizes.input)),startAction:r.default.element,step:r.default.number,value:r.default.number};exports.NumberInput=b;
+`,se="",b=l.default.forwardRef((ie,T)=>{var q=ie,{size:e,startAction:n,name:a,hint:u,error:V,label:F,labelAction:x,locale:L,id:P,onValueChange:R,value:K,step:i,required:z,disabled:f}=q,O=k(q,["size","startAction","name","hint","error","label","labelAction","locale","id","onValueChange","value","step","required","disabled"]);const $=ne.useId("numberinput",P),h=L||le.getDefaultLocale(),c=g.useRef(new D.NumberParser(h,{style:"decimal"})),y=g.useRef(new D.NumberFormatter(h,{maximumFractionDigits:20})),[s,B]=oe.useControllableState({prop(t){const o=String(K);return isNaN(o)||o!==t&&t!==""?t:o},defaultProp:se,onChange(t){const o=c.current.parse(t);R(isNaN(o)?void 0:o)}}),d=t=>{B(String(t))},H=({target:{value:t}})=>{c.current.isValidPartialNumber(t)&&d(t)},v=()=>{if(!s){d(i);return}const t=c.current.parse(s),o=isNaN(t)?i:t+i;d(y.current.format(o))},I=()=>{if(!s){d(-i);return}const t=c.current.parse(s),o=isNaN(t)?-i:t-i;d(y.current.format(o))},M=t=>{if(!f)switch(t.key){case A.KeyboardKeys.DOWN:{t.preventDefault(),I();break}case A.KeyboardKeys.UP:{t.preventDefault(),v();break}}},U=()=>{if(s){const t=c.current.parse(s),o=isNaN(t)?"":y.current.format(t);d(o)}};return l.default.createElement(J.Field,{name:a,hint:u,error:V,id:$,required:z},l.default.createElement(re.Stack,{spacing:1},F&&l.default.createElement(Q.FieldLabel,{action:x},F),l.default.createElement(Z.FieldInput,E({ref:T,startAction:n,disabled:f,type:"text",inputmode:"decimal",onChange:H,onKeyDown:M,onBlur:U,value:s,size:e,endAction:l.default.createElement(l.default.Fragment,null,l.default.createElement(_,{disabled:f,"aria-hidden":!0,reverse:!0,onClick:v,tabIndex:-1,type:"button","data-testid":"ArrowUp"},l.default.createElement(C.Icon,{as:S.default,color:"neutral500"})),l.default.createElement(_,{disabled:f,"aria-hidden":!0,onClick:I,tabIndex:-1,type:"button","data-testid":"ArrowDown"},l.default.createElement(C.Icon,{as:S.default,color:"neutral500"})))},O)),l.default.createElement(ee.FieldHint,null),l.default.createElement(te.FieldError,null)))});b.displayName="NumberInput";b.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};b.propTypes={"aria-label":r.default.string,disabled:r.default.bool,error:r.default.string,hint:r.default.oneOfType([r.default.string,r.default.node,r.default.arrayOf(r.default.node)]),id:r.default.string,label:r.default.string,labelAction:r.default.element,locale:r.default.string,name:r.default.string.isRequired,onValueChange:r.default.func.isRequired,required:r.default.bool,size:r.default.oneOf(Object.keys(ae.sizes.input)),startAction:r.default.element,step:r.default.number,value:r.default.number};exports.NumberInput=b;

package/dist/NumberInput/NumberInput.js

@@ -131,11 +131,11 @@ const C = M.button`
       name: o,
       hint: l,
       error: P,
-      id: z
+      id: z,
+      required: K
     }, /* @__PURE__ */ a.createElement(ee, {
       spacing: 1
     }, g && /* @__PURE__ */ a.createElement(G, {
-      required: K,
       action: R
     }, g), /* @__PURE__ */ a.createElement(J, A({
       ref: T,

package/dist/Select/Select.cjs

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

package/dist/Select/Select.js

@@ -35,7 +35,7 @@ import "../Field/FieldAction.js";
 import { Popover as ge } from "../Popover/Popover.js";
 import { Stack as ve } from "../Stack/Stack.js";
 import { Typography as Q } from "../Typography/Typography.js";
-import { Flex as R } from "../Flex/Flex.js";
+import { Flex as $ } from "../Flex/Flex.js";
 import { Box as U } from "../Box/Box.js";
 import { useId as Be } from "../helpers/useId.js";
 import { SelectList as Oe } from "./SelectList.js";
@@ -45,10 +45,10 @@ import { VisuallyHidden as X } from "../VisuallyHidden/VisuallyHidden.js";
 import { DownState as xe } from "./constants.js";
 import { escapeSelector as Y } from "../helpers/escapeSelector.js";
 import { SelectTags as $e } from "./SelectTags.js";
-const Re = de(R)`
+const Re = de($)`
   width: 100%;
 `, Z = (we) => {
-  var F = we, {
+  var L = we, {
     label: o,
     labelAction: l,
     id: i,
@@ -60,16 +60,16 @@ const Re = de(R)`
     hint: C,
     error: E,
     disabled: m,
-    clearLabel: w,
-    onClear: D,
+    clearLabel: R,
+    onClear: w,
     onReachEnd: V,
     multi: p,
     required: ee,
     selectButtonTitle: te,
     size: re,
-    startIcon: L,
+    startIcon: D,
     withTags: b
-  } = F, oe = N(F, [
+  } = L, oe = N(L, [
     "label",
     "labelAction",
     "id",
@@ -91,29 +91,29 @@ const Re = de(R)`
     "startIcon",
     "withTags"
   ]);
-  const a = Be("select", i), [y, g] = ae(void 0), M = Se(y), k = pe(null), I = `${a}-label`, v = `${a}-content`, j = typeof E == "string";
-  let S;
-  if (j ? S = `${a}-error` : C && (S = `${a}-hint`), b && !p)
+  const a = Be("select", i), [y, g] = ae(void 0), F = Se(y), M = pe(null), k = `${a}-label`, v = `${a}-content`, j = typeof E == "string";
+  let I;
+  if (j ? I = `${a}-error` : C && (I = `${a}-hint`), b && !p)
     throw new Error('The "withTags" props can only be used when the "multi" prop is present');
   const ne = () => {
     g(void 0);
   }, ie = () => {
-    m || (D(), M.current.focus());
+    m || (w(), F.current.focus());
   }, A = (t) => {
     t.preventDefault(), !m && (t.nativeEvent.which === 3 || t.nativeEvent.button === 2 || g(xe.Mouse));
-  }, x = (t, c = !0) => {
+  }, S = (t, c = !0) => {
     p ? T(n.includes(t) ? n.filter((d) => d !== t) : [...n, t]) : (T(t), c && g(void 0));
   }, P = (t) => {
     T(
       n.includes(t[0]) ? n.filter((c, d, u) => u.indexOf(c) < 0, t) : [...n, ...t]
     );
   };
-  let $, _ = [];
+  let x, _ = [];
   const q = (t, c) => {
     const d = `${a}-option-${t.props.value}`, u = p ? n.includes(t.props.value) : t.props.value === n;
-    return u && (b ? _.push({ label: t.props.children, value: t.props.value }) : $ = t.props.children), K(t, {
+    return u && (b ? _.push({ label: t.props.children, value: t.props.value }) : x = t.props.children), K(t, {
       id: Y(d),
-      onClick: () => x(t.props.value),
+      onClick: () => S(t.props.value),
       selected: u,
       multi: p,
       isChild: c
@@ -136,23 +136,22 @@ const Re = de(R)`
   return /* @__PURE__ */ r.createElement(he, {
     hint: C,
     error: E,
-    id: a
+    id: a,
+    required: ee
   }, /* @__PURE__ */ r.createElement(ve, {
     spacing: o || C || j ? 1 : 0
   }, o && /* @__PURE__ */ r.createElement(Ee, {
-    required: ee,
     as: "span",
-    id: I,
     action: l
   }, o), /* @__PURE__ */ r.createElement(Te, {
     size: re,
     hasError: Boolean(E),
     disabled: m,
-    ref: k
+    ref: M
   }, /* @__PURE__ */ r.createElement(ue, W({
-    ref: M,
-    labelledBy: `${I} ${v}`,
-    "aria-describedby": S,
+    ref: F,
+    labelledBy: `${k} ${v}`,
+    "aria-describedby": I,
     expanded: Boolean(y),
     onTrigger: g,
     id: a,
@@ -161,12 +160,12 @@ const Re = de(R)`
     onMouseDown: A
   }, oe)), /* @__PURE__ */ r.createElement(Re, {
     justifyContent: "space-between"
-  }, /* @__PURE__ */ r.createElement(R, null, L && /* @__PURE__ */ r.createElement(U, {
+  }, /* @__PURE__ */ r.createElement($, null, D && /* @__PURE__ */ r.createElement(U, {
     paddingLeft: 3,
     "aria-hidden": !0
-  }, L), b && /* @__PURE__ */ r.createElement($e, {
+  }, D), b && /* @__PURE__ */ r.createElement($e, {
     tags: _,
-    onRemoveTag: x,
+    onRemoveTag: S,
     disabled: m
   }), /* @__PURE__ */ r.createElement(U, {
     paddingLeft: 4,
@@ -178,19 +177,19 @@ const Re = de(R)`
   }, O) : null, /* @__PURE__ */ r.createElement(X, {
     as: "span",
     id: v
-  }, h ? h(n) : $ || O, n.join(", "))) : /* @__PURE__ */ r.createElement(Q, {
+  }, h ? h(n) : x || O, n.join(", "))) : /* @__PURE__ */ r.createElement(Q, {
     ellipsis: !0,
     id: v,
     textColor: n ? "neutral800" : "neutral600"
-  }, h ? h(n) : $ || O, p && /* @__PURE__ */ r.createElement(X, {
+  }, h ? h(n) : x || O, p && /* @__PURE__ */ r.createElement(X, {
     as: "span"
-  }, n.join(", "))))), /* @__PURE__ */ r.createElement(R, null, (p && n && n.length || !p && n) && D && /* @__PURE__ */ r.createElement(Ce, {
+  }, n.join(", "))))), /* @__PURE__ */ r.createElement($, null, (p && n && n.length || !p && n) && w && /* @__PURE__ */ r.createElement(Ce, {
     as: "button",
     type: "button",
     onClick: ie,
-    "aria-label": w,
+    "aria-label": R,
     "aria-disabled": m,
-    title: w
+    title: R
   }, /* @__PURE__ */ r.createElement(me, null)), /* @__PURE__ */ r.createElement(Ie, {
     paddingLeft: 3,
     "aria-hidden": !0,
@@ -201,17 +200,17 @@ const Re = de(R)`
     disabled: m,
     title: te
   }, /* @__PURE__ */ r.createElement(ce, null))))), /* @__PURE__ */ r.createElement(be, null), /* @__PURE__ */ r.createElement(ye, null)), y && /* @__PURE__ */ r.createElement(ge, {
-    source: k,
+    source: M,
     spacing: 4,
     fullWidth: !0,
     intersectionId: `select-list-intersection-${a}`,
     onReachEnd: V
   }, /* @__PURE__ */ r.createElement(Oe, {
     selectId: a,
-    labelledBy: o ? I : void 0,
+    labelledBy: o ? k : void 0,
     onEscape: ne,
     expanded: y,
-    onSelectItem: (t, c) => c ? P(t) : x(t, !1),
+    onSelectItem: (t, c) => c ? P(t) : S(t, !1),
     multi: p
   }, le)));
 };

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -1,19 +1,35 @@
-"use strict";var Z=Object.defineProperty;var v=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var j=(e,a,n)=>a in e?Z(e,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[a]=n,E=(e,a)=>{for(var n in a||(a={}))F.call(a,n)&&j(e,n,a[n]);if(v)for(var n of v(a))A.call(a,n)&&j(e,n,a[n]);return e};var I=(e,a)=>{var n={};for(var r in e)F.call(e,r)&&a.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&v)for(var r of v(e))a.indexOf(r)<0&&A.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),ee=require("prop-types"),te=require("styled-components"),ne=require("react-router-dom"),N=require("@radix-ui/react-use-callback-ref"),oe=require("@strapi/icons/CarretDown"),$=require("../Typography/Typography.cjs"),q=require("../Box/Box.cjs"),ae=require("../Flex/Flex.cjs"),L=require("../Button/Button.cjs"),V=require("../Popover/Popover.cjs"),W=require("./utils.cjs"),re=require("../helpers/useId.cjs"),c=require("../helpers/keyboardKeys.cjs"),K=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=K(l),t=K(ee),C=K(te),se=K(oe),ue=C.default.button`
+"use strict";var Z=Object.defineProperty;var C=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var $=(e,r,n)=>r in e?Z(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,i=(e,r)=>{for(var n in r||(r={}))F.call(r,n)&&$(e,n,r[n]);if(C)for(var n of C(r))A.call(r,n)&&$(e,n,r[n]);return e};var D=(e,r)=>{var n={};for(var s in e)F.call(e,s)&&r.indexOf(s)<0&&(n[s]=e[s]);if(e!=null&&C)for(var s of C(e))r.indexOf(s)<0&&A.call(e,s)&&(n[s]=e[s]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),ee=require("prop-types"),te=require("styled-components"),ne=require("react-router-dom"),N=require("@radix-ui/react-use-callback-ref"),oe=require("@strapi/icons/CarretDown"),I=require("../Typography/Typography.cjs"),re=require("../Link/Link.cjs"),K=require("../Box/Box.cjs"),ae=require("../Flex/Flex.cjs"),V=require("../Button/Button.cjs"),W=require("../Popover/Popover.cjs"),O=require("./utils.cjs"),se=require("../helpers/useId.cjs"),d=require("../helpers/keyboardKeys.cjs"),R=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=R(l),t=R(ee),v=R(te),ue=R(oe),le=v.default.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${W.getOptionStyle}
-`,le=C.default(ne.NavLink)`
+  ${O.getOptionStyle}
+`,ce=v.default(ne.NavLink)`
   text-decoration: none;
-  ${W.getOptionStyle}
-`,ce=C.default.span`
+  ${O.getOptionStyle}
+`,de=v.default(re.Link)`
+  /* Removing Link hover effect */
+  &:hover {
+    color: currentColor;
+  }
+
+  &:focus-visible {
+    /* Removing Link focus-visible after properties and reset to global outline */
+    outline: 2px solid ${({theme:e})=>e.colors.primary600};
+    outline-offset: 2px;
+    &:after {
+      content: none;
+    }
+  }
+
+  ${O.getOptionStyle}
+`,ie=v.default.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`,de=C.default(L.Button)`
+`,fe=v.default(V.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,B=S=>{var h=S,{children:e,onClick:a,to:n,isFocused:r}=h,P=I(h,["children","onClick","to","isFocused"]);const i=l.useRef();l.useEffect(()=>{r&&i.current&&i.current.focus()},[r]);const d=E({tabIndex:r?0:-1,ref:i,role:"menuitem"},P),k=R=>{(R.key===c.KeyboardKeys.SPACE||R.key===c.KeyboardKeys.ENTER)&&a()};return n?s.default.createElement(le,E({to:n},d),s.default.createElement(q.Box,{padding:2},s.default.createElement($.Typography,null,e))):s.default.createElement(ue,E({onKeyDown:k,onMouseDown:a,type:"button"},d),s.default.createElement(q.Box,{padding:2},s.default.createElement($.Typography,null,e)))};B.defaultProps={as:void 0,onClick(){},isFocused:!1,to:void 0};B.propTypes={as:t.default.elementType,children:t.default.node.isRequired,isFocused:t.default.bool,onClick:t.default.func,to:t.default.string};const g=R=>{var O=R,{label:e,children:a,id:n,as:r,onOpen:P=()=>{},onClose:S=()=>{},size:h,popoverPlacement:i,onReachEnd:d}=O,k=I(O,["label","children","id","as","onOpen","onClose","size","popoverPlacement","onReachEnd"]);const f=l.useRef(),x=re.useId("simplemenu",n),p=l.useRef(!1),[y,m]=l.useState(!1),[T,D]=l.useState(0),b=l.Children.toArray(a),z=h==="S"?de:L.Button,U=r||z,w=!!d&&typeof d=="function";l.useEffect(()=>{if(["string","number"].includes(typeof e)){const o=b.findIndex(u=>u.props.children===e);o!==-1&&D(o)}},[e]);const M=N.useCallbackRef(P),_=N.useCallbackRef(S);l.useEffect(()=>{p!=null&&p.current?y?M():_():p.current=!0},[p,_,M,y]),l.useEffect(()=>{s.default.isValidElement(e)&&T===-1&&f.current.focus()},[e,T]);const H=o=>{y&&(o.key===c.KeyboardKeys.ESCAPE&&(o.stopPropagation(),m(!1),f.current.focus()),o.key===c.KeyboardKeys.DOWN&&D(u=>u===b.length-1?0:u+1),o.key===c.KeyboardKeys.UP&&D(u=>u===0?b.length-1:u-1))},G=o=>{(o.key===c.KeyboardKeys.ENTER||o.key===c.KeyboardKeys.SPACE)&&m(u=>!u)},J=o=>{o.preventDefault(),o.currentTarget.contains(o.relatedTarget)||m(!1)},Q=o=>{o.preventDefault(),m(u=>!u)},X=()=>{w&&d()},Y=b.map((o,u)=>s.default.createElement(ae.Flex,{as:"li",key:u,justifyContent:"center",role:"menuitem"},l.cloneElement(o,{onClick(){o.props.onClick(),m(!1),f.current.focus()},isFocused:T===u})));return s.default.createElement("div",{onKeyDown:H},s.default.createElement(U,E({label:s.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":x,onKeyDown:G,onMouseDown:Q,ref:f,type:"button",variant:"ghost",endIcon:s.default.createElement(ce,null,s.default.createElement(se.default,{"aria-hidden":!0}))},k),e),y&&s.default.createElement(V.Popover,{onBlur:J,placement:i,source:f,onReachEnd:X,intersectionId:w?`popover-${x}`:void 0,spacing:4},s.default.createElement(q.Box,{role:"menu",as:"ul",padding:1,id:x},Y)))};g.defaultProps={as:void 0};g.displayName="SimpleMenu";g.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};g.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(V.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=B;exports.SimpleMenu=g;
+`,S=w=>{var b=w,{children:e,onClick:r,to:n,isFocused:s,href:f}=b,P=D(b,["children","onClick","to","isFocused","href"]);const c=l.useRef();l.useEffect(()=>{s&&c.current&&c.current.focus()},[s]);const p=i({tabIndex:s?0:-1,ref:c,role:"menuitem"},P),M=y=>{(y.key===d.KeyboardKeys.SPACE||y.key===d.KeyboardKeys.ENTER)&&r()};return n&&!f?a.default.createElement(ce,i({to:n},p),a.default.createElement(K.Box,{padding:2},a.default.createElement(I.Typography,null,e))):f&&!n?a.default.createElement(de,i({isExternal:!0,href:f},p),a.default.createElement(K.Box,{padding:2},a.default.createElement(I.Typography,null,e))):a.default.createElement(le,i({onKeyDown:M,onMouseDown:r,type:"button"},p),a.default.createElement(K.Box,{padding:2},a.default.createElement(I.Typography,null,e)))};S.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};S.propTypes={as:t.default.elementType,children:t.default.node.isRequired,href:t.default.string,isFocused:t.default.bool,onClick:t.default.func,to:t.default.string};const k=M=>{var y=M,{label:e,children:r,id:n,as:s,onOpen:f=()=>{},onClose:P=()=>{},size:w,popoverPlacement:b,onReachEnd:c}=y,p=D(y,["label","children","id","as","onOpen","onClose","size","popoverPlacement","onReachEnd"]);const m=l.useRef(),T=se.useId("simplemenu",n),E=l.useRef(!1),[g,h]=l.useState(!1),[q,B]=l.useState(0),x=l.Children.toArray(r),z=w==="S"?fe:V.Button,U=s||z,j=!!c&&typeof c=="function";l.useEffect(()=>{if(["string","number"].includes(typeof e)){const o=x.findIndex(u=>u.props.children===e);o!==-1&&B(o)}},[e]);const _=N.useCallbackRef(f),L=N.useCallbackRef(P);l.useEffect(()=>{E!=null&&E.current?g?_():L():E.current=!0},[E,L,_,g]),l.useEffect(()=>{a.default.isValidElement(e)&&q===-1&&m.current.focus()},[e,q]);const H=o=>{g&&(o.key===d.KeyboardKeys.ESCAPE&&(o.stopPropagation(),h(!1),m.current.focus()),o.key===d.KeyboardKeys.DOWN&&B(u=>u===x.length-1?0:u+1),o.key===d.KeyboardKeys.UP&&B(u=>u===0?x.length-1:u-1))},G=o=>{(o.key===d.KeyboardKeys.ENTER||o.key===d.KeyboardKeys.SPACE)&&h(u=>!u)},J=o=>{o.preventDefault(),o.currentTarget.contains(o.relatedTarget)||h(!1)},Q=o=>{o.preventDefault(),h(u=>!u)},X=()=>{j&&c()},Y=x.map((o,u)=>a.default.createElement(ae.Flex,{as:"li",key:u,justifyContent:"center",role:"menuitem"},l.cloneElement(o,{onClick(){o.props.onClick(),h(!1),m.current.focus()},isFocused:q===u})));return a.default.createElement("div",{onKeyDown:H},a.default.createElement(U,i({label:a.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":g,"aria-controls":T,onKeyDown:G,onMouseDown:Q,ref:m,type:"button",variant:"ghost",endIcon:a.default.createElement(ie,null,a.default.createElement(ue.default,{"aria-hidden":!0}))},p),e),g&&a.default.createElement(W.Popover,{onBlur:J,placement:b,source:m,onReachEnd:X,intersectionId:j?`popover-${T}`:void 0,spacing:4},a.default.createElement(K.Box,{role:"menu",as:"ul",padding:1,id:T},Y)))};k.defaultProps={as:void 0};k.displayName="SimpleMenu";k.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};k.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(W.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=S;exports.SimpleMenu=k;