@strapi/design-system 1.4.2 → 1.5.0

package/dist/Checkbox/Checkbox.js

@@ -1,83 +1,64 @@
-var h = Object.defineProperty;
-var m = Object.getOwnPropertySymbols;
-var f = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var s = (e, r, o) => r in e ? h(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, p = (e, r) => {
-  for (var o in r || (r = {}))
-    f.call(r, o) && s(e, o, r[o]);
-  if (m)
-    for (var o of m(r))
-      b.call(r, o) && s(e, o, r[o]);
-  return e;
-};
-var u = (e, r) => {
-  var o = {};
-  for (var t in e)
-    f.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
-  if (e != null && m)
-    for (var t of m(e))
-      r.indexOf(t) < 0 && b.call(e, t) && (o[t] = e[t]);
-  return o;
-};
-import n from "react";
-import E from "styled-components";
-import i from "prop-types";
-import { BaseCheckbox as g } from "../BaseCheckbox/BaseCheckbox.js";
-import { Stack as k } from "../Stack/Stack.js";
-import { Field as T } from "../Field/Field.js";
+import r from "react";
+import c from "styled-components";
+import e from "prop-types";
+import { BaseCheckbox as s } from "../BaseCheckbox/BaseCheckbox.js";
+import { Stack as f } from "../Stack/Stack.js";
+import { Field as b } from "../Field/Field.js";
 import "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as C } from "../Field/FieldHint.js";
-import { FieldError as F } from "../Field/FieldError.js";
-import { useField as v } from "../Field/FieldContext.js";
+import { FieldHint as u } from "../Field/FieldHint.js";
+import { FieldError as x } from "../Field/FieldError.js";
+import { useField as y } from "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Box as O } from "../Box/Box.js";
-import { useId as $ } from "../helpers/useId.js";
-import { Typography as B } from "../Typography/Typography.js";
-const I = E(B)`
+import { Box as h } from "../Box/Box.js";
+import { useId as E } from "../helpers/useId.js";
+import { Typography as g } from "../Typography/Typography.js";
+const k = c(g)`
   display: flex;
   align-items: flex-start;
   * {
-    cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+    cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
   }
-`, L = (e) => {
-  const { id: r } = v();
-  return /* @__PURE__ */ n.createElement(g, p({
-    id: r
-  }, e));
-}, x = (P) => {
-  var c = P, { children: e, disabled: r, id: o, hint: t, error: d } = c, y = u(c, ["children", "disabled", "id", "hint", "error"]);
-  const l = $("checkbox", o);
-  let a;
-  return d ? a = `${l}-error` : t && (a = `${l}-hint`), /* @__PURE__ */ n.createElement(T, {
-    id: l,
-    hint: t,
-    error: d
-  }, /* @__PURE__ */ n.createElement(k, {
+`, T = (o) => {
+  const { id: t } = y();
+  return /* @__PURE__ */ r.createElement(s, {
+    id: t,
+    ...o
+  });
+}, a = ({ children: o, disabled: t, id: p, hint: m, error: l, ...d }) => {
+  const i = E("checkbox", p);
+  let n;
+  return l ? n = `${i}-error` : m && (n = `${i}-hint`), /* @__PURE__ */ r.createElement(b, {
+    id: i,
+    hint: m,
+    error: l
+  }, /* @__PURE__ */ r.createElement(f, {
     spacing: 1
-  }, /* @__PURE__ */ n.createElement(I, {
+  }, /* @__PURE__ */ r.createElement(k, {
     as: "label",
     textColor: "neutral800",
-    disabled: r
-  }, /* @__PURE__ */ n.createElement(L, p({
-    disabled: r,
-    "aria-describedby": a
-  }, y)), /* @__PURE__ */ n.createElement(O, {
+    disabled: t
+  }, /* @__PURE__ */ r.createElement(T, {
+    disabled: t,
+    "aria-describedby": n,
+    ...d
+  }), /* @__PURE__ */ r.createElement(h, {
     paddingLeft: 2
-  }, e)), /* @__PURE__ */ n.createElement(C, null), /* @__PURE__ */ n.createElement(F, null)));
+  }, o)), /* @__PURE__ */ r.createElement(u, null), /* @__PURE__ */ r.createElement(x, null)));
 };
-x.defaultProps = {
+a.defaultProps = {
   disabled: !1,
   id: void 0,
   error: void 0,
   hint: void 0
 };
-x.propTypes = {
-  children: i.node.isRequired,
-  disabled: i.bool,
-  error: i.string,
-  hint: i.oneOfType([i.string, i.node, i.arrayOf(i.node)]),
-  id: i.oneOfType([i.string, i.number])
+a.propTypes = {
+  children: e.node.isRequired,
+  disabled: e.bool,
+  error: e.string,
+  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  id: e.oneOfType([e.string, e.number])
 };
 export {
-  x as Checkbox
+  a as Checkbox
 };

package/dist/Combobox/Combobox.cjs

@@ -1 +1 @@
-"use strict";var qe=Object.defineProperty,ke=Object.defineProperties;var je=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var Q=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var J=(e,s,r)=>s in e?qe(e,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[s]=r,w=(e,s)=>{for(var r in s||(s={}))Q.call(s,r)&&J(e,r,s[r]);if(j)for(var r of j(s))X.call(s,r)&&J(e,r,s[r]);return e},A=(e,s)=>ke(e,je(s));var Y=(e,s)=>{var r={};for(var f in e)Q.call(e,f)&&s.indexOf(f)<0&&(r[f]=e[f]);if(e!=null&&j)for(var f of j(e))s.indexOf(f)<0&&X.call(e,f)&&(r[f]=e[f]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),Me=require("prop-types"),Oe=require("@strapi/icons/CarretDown"),Le=require("@strapi/icons/Cross"),Se=require("../helpers/useId.cjs"),c=require("./utils.cjs"),Z=require("../Flex/Flex.cjs"),ee=require("../Select/components.cjs"),Re=require("../Popover/Popover.cjs"),we=require("../Box/Box.cjs"),te=require("../Typography/Typography.cjs"),Ae=require("../Loader/Loader.cjs"),M=require("./components.cjs"),Te=require("./ComboboxOption.cjs"),$e=require("./ComboboxList.cjs"),Be=require("../Field/Field.cjs"),De=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Pe=require("../Field/FieldHint.cjs"),_e=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Ve=require("../Stack/Stack.cjs"),Ke=require("../helpers/keyboardKeys.cjs"),He=require("../VisuallyHidden/VisuallyHidden.cjs"),O=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=O(l),t=O(Me),Ne=O(Oe),Ue=O(Le),F=ze=>{var V=ze,{children:e,clearLabel:s,creatable:r,createMessage:f,disabled:m,error:L,hasMoreItems:oe,hint:$,label:h,labelAction:ne,loading:S,loadingMessage:ae,noOptionsMessage:re,onChange:B,onClear:D,onCreateOption:le,onInputChange:P,onLoadMore:se,placeholder:ie,required:_,value:C}=V,ce=Y(V,["children","clearLabel","creatable","createMessage","disabled","error","hasMoreItems","hint","label","labelAction","loading","loadingMessage","noOptionsMessage","onChange","onClear","onCreateOption","onInputChange","onLoadMore","placeholder","required","value"]);const ue=()=>{var o;return(o=e.find(a=>{var i;return((i=a.props)==null?void 0:i.value.toLowerCase())===C.toLowerCase()}).props)==null?void 0:o.children},[d,K]=l.useState(0),[de,fe]=l.useState(null),[b,H]=l.useState(e),[x,pe]=l.useState(!1),[u,q]=l.useState(""),v=l.useRef(),k=l.useRef(!1),I=l.useRef(),N=l.useRef(),be=l.useRef(),U=l.useRef(!0),p=Se.useId("combobox"),z=`${p}-label`;if(!h&&!ce["aria-label"])throw new Error('The Combobox component needs a "label" or an "aria-label" props');l.useEffect(()=>{H(c.filterOptions(e,u))},[u,e]),l.useEffect(()=>{x&&v.current&&c.maintainScrollVisibility(v.current)},[d,x]),l.useLayoutEffect(()=>{U.current&&(U.current=!1)},[C]);const me=x?`${p}-${d}`:"",W=()=>{B(null),q("")},Ce=o=>{P&&P(o);const a=I.current.value;H(c.filterOptions(e,a)),K(0),fe(null),u!==a&&q(a),x||g(!0,!1)},ge=o=>{const{key:a}=o,i=r&&u?b.length:b.length-1,E=c.getActionFromKey(a,x);switch(C&&!u&&a===Ke.KeyboardKeys.BACKSPACE&&W(),E){case c.MenuActions.Next:{if(d===i){y(0);break}y(c.getUpdatedIndex(d,i,E));break}case c.MenuActions.Previous:{if(d===0){y(i);break}y(c.getUpdatedIndex(d,i,E));break}case c.MenuActions.Last:case c.MenuActions.First:{if(d===i){y(0);break}y(c.getUpdatedIndex(d,i,E));break}case c.MenuActions.CloseSelect:o.preventDefault(),R(d);break;case c.MenuActions.Close:o.preventDefault(),g(!1);break;case c.MenuActions.Open:g(!0);break}},xe=o=>{if(o.preventDefault(),C&&!k.current&&q(""),k.current){k.current=!1;return}g(!1,!1)},y=o=>{K(o)},ye=o=>{y(o),R(o)},G=()=>{k.current=!0},R=o=>{const a=b[o];if(q(""),a){B(a.props.value),g(!1);return}r&&(le(u),g(!1))},g=(o,a=!0)=>{pe(o),a&&I.current.focus()},he=l.Children.toArray(b).map((o,a)=>{const i=d===a;return l.cloneElement(o,{id:`${p}-${a}`,"aria-selected":de===a,"aria-posinset":a+1,"aria-setsize":l.Children.toArray(b).length,ref(E){i&&(v.current=E)},onClick:()=>ye(a),onMouseDown:G,isSelected:i})}),ve=()=>{I.current.focus(),D&&D(),W()},Ee=()=>{I.current.focus(),g(!0)},Fe=()=>{const o=b.findIndex(a=>{var i;return((i=a.props)==null?void 0:i.children)===u});return u&&o===-1},Ie=o=>{o.preventDefault(),g(o,!0)};return n.default.createElement(Be.Field,{hint:$,error:L,id:p,required:_},n.default.createElement(He.VisuallyHidden,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},C),n.default.createElement(Ve.Stack,{spacing:h||$||L?1:0},h&&n.default.createElement(De.FieldLabel,{action:ne},h),n.default.createElement(M.MainRow,{ref:N,$disabled:m,hasError:L},n.default.createElement(M.InputContainer,{wrap:"wrap"},!u&&C&&n.default.createElement(M.ValueContainer,{id:`${p}-selected-value`},n.default.createElement(te.Typography,null,ue())),n.default.createElement(M.Input,{"aria-activedescendant":me,"aria-autocomplete":"list","aria-controls":`${p}-listbox`,"aria-disabled":m,"aria-expanded":x,"aria-haspopup":"listbox","aria-labelledby":h?z:void 0,autoComplete:"off",autoCorrect:"off",id:p,onBlur:m?void 0:xe,onClick:m?void 0:Ie,onInput:m?void 0:Ce,onKeyDown:m?void 0:ge,placeholder:C?"":ie,readOnly:m,ref:I,required:_,role:"combobox",spellCheck:"off",type:"text",value:u})),n.default.createElement(Z.Flex,null,(C||u)&&n.default.createElement(ee.IconBox,{id:`${p}-clear`,"aria-label":s,disabled:m,paddingLeft:3,as:"button",onClick:ve,type:"button"},n.default.createElement(Ue.default,null)),n.default.createElement(ee.CaretBox,{disabled:m,paddingLeft:3,"aria-hidden":!0,as:"button",onClick:Ee,tabIndex:-1,type:"button"},n.default.createElement(Ne.default,null)))),n.default.createElement(Pe.FieldHint,null),n.default.createElement(_e.FieldError,null)),x&&n.default.createElement(Re.Popover,{id:`${p}-popover`,source:N,spacing:4,fullWidth:!0,intersectionId:`${p}-listbox-popover-intersection`,onReachEnd:oe&&!S?se:void 0},n.default.createElement("div",{role:"listbox",ref:be,id:`${p}-listbox`,"aria-labelledby":h?z:void 0},(Boolean(b.length)||r)&&n.default.createElement(n.default.Fragment,null,n.default.createElement($e.ComboboxList,{activeOptionRef:v,options:he}),Fe()&&r&&n.default.createElement(Te.ComboboxOption,{isSelected:d===b.length,ref:o=>{d===b.length&&(v.current=o)},onMouseDown:G,onClick:()=>R(),taindex:0},f(u))),!b.length&&!r&&!S&&n.default.createElement(we.Box,{paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:v},n.default.createElement(te.Typography,{textColor:"neutral800"},re(u))),S&&n.default.createElement(Z.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},n.default.createElement(Ae.Loader,{small:!0},ae)))))},T=e=>n.default.createElement(F,A(w({},e),{creatable:!0}));F.defaultProps={"aria-label":void 0,clearLabel:"clear",creatable:!1,createMessage:e=>`Create "${e}"`,disabled:!1,error:void 0,hasMoreItems:!1,hint:void 0,label:void 0,loading:!1,loadingMessage:"Loading content...",noOptionsMessage:()=>"No results found",onClear:void 0,onCreateOption:void 0,onInputChange:void 0,onLoadMore:void 0,placeholder:"Select or enter a value",value:void 0};T.defaultProps=F.defaultProps;F.propTypes={"aria-label":t.default.string,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]),clearLabel:t.default.string,creatable:t.default.bool,createMessage:t.default.func,disabled:t.default.bool,error:t.default.string,hasMoreItems:t.default.bool,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),label:t.default.string,labelAction:t.default.element,loading:t.default.bool,loadingMessage:t.default.string,noOptionsMessage:t.default.func,onChange:t.default.func.isRequired,onClear:t.default.func,onCreateOption:t.default.func,onInputChange:t.default.func,onLoadMore:t.default.func,placeholder:t.default.string,value:t.default.string};T.propTypes=A(w({},F.propTypes),{onCreateOption:t.default.func.isRequired});exports.Combobox=F;exports.CreatableCombobox=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),ge=require("prop-types"),xe=require("@strapi/icons/CarretDown"),ye=require("@strapi/icons/Cross"),he=require("../helpers/useId.cjs"),l=require("./utils.cjs"),H=require("../Flex/Flex.cjs"),N=require("../Select/components.cjs"),ve=require("../Popover/Popover.cjs"),Ee=require("../Box/Box.cjs"),U=require("../Typography/Typography.cjs"),Fe=require("../Loader/Loader.cjs"),q=require("./components.cjs"),Ie=require("./ComboboxOption.cjs"),qe=require("./ComboboxList.cjs"),ke=require("../Field/Field.cjs"),je=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Me=require("../Field/FieldHint.cjs"),Oe=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Le=require("../Stack/Stack.cjs"),Se=require("../helpers/keyboardKeys.cjs"),Re=require("../VisuallyHidden/VisuallyHidden.cjs"),k=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=k(a),e=k(ge),we=k(xe),Ae=k(ye),h=({children:r,clearLabel:z,creatable:v,createMessage:W,disabled:d,error:j,hasMoreItems:G,hint:S,label:g,labelAction:J,loading:M,loadingMessage:Q,noOptionsMessage:X,onChange:R,onClear:w,onCreateOption:Y,onInputChange:A,onLoadMore:Z,placeholder:ee,required:T,value:p,...te})=>{const oe=()=>r.find(t=>t.props?.value.toLowerCase()===p.toLowerCase()).props?.children,[i,$]=a.useState(0),[ne,ae]=a.useState(null),[u,B]=a.useState(r),[m,re]=a.useState(!1),[s,F]=a.useState(""),x=a.useRef(),I=a.useRef(!1),E=a.useRef(),D=a.useRef(),le=a.useRef(),P=a.useRef(!0),c=he.useId("combobox"),_=`${c}-label`;if(!g&&!te["aria-label"])throw new Error('The Combobox component needs a "label" or an "aria-label" props');a.useEffect(()=>{B(l.filterOptions(r,s))},[s,r]),a.useEffect(()=>{m&&x.current&&l.maintainScrollVisibility(x.current)},[i,m]),a.useLayoutEffect(()=>{P.current&&(P.current=!1)},[p]);const se=m?`${c}-${i}`:"",V=()=>{R(null),F("")},ie=t=>{A&&A(t);const n=E.current.value;B(l.filterOptions(r,n)),$(0),ae(null),s!==n&&F(n),m||b(!0,!1)},ce=t=>{const{key:n}=t,f=v&&s?u.length:u.length-1,y=l.getActionFromKey(n,m);switch(p&&!s&&n===Se.KeyboardKeys.BACKSPACE&&V(),y){case l.MenuActions.Next:{if(i===f){C(0);break}C(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.Previous:{if(i===0){C(f);break}C(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.Last:case l.MenuActions.First:{if(i===f){C(0);break}C(l.getUpdatedIndex(i,f,y));break}case l.MenuActions.CloseSelect:t.preventDefault(),O(i);break;case l.MenuActions.Close:t.preventDefault(),b(!1);break;case l.MenuActions.Open:b(!0);break}},ue=t=>{if(t.preventDefault(),p&&!I.current&&F(""),I.current){I.current=!1;return}b(!1,!1)},C=t=>{$(t)},de=t=>{C(t),O(t)},K=()=>{I.current=!0},O=t=>{const n=u[t];if(F(""),n){R(n.props.value),b(!1);return}v&&(Y(s),b(!1))},b=(t,n=!0)=>{re(t),n&&E.current.focus()},fe=a.Children.toArray(u).map((t,n)=>{const f=i===n;return a.cloneElement(t,{id:`${c}-${n}`,"aria-selected":ne===n,"aria-posinset":n+1,"aria-setsize":a.Children.toArray(u).length,ref(y){f&&(x.current=y)},onClick:()=>de(n),onMouseDown:K,isSelected:f})}),pe=()=>{E.current.focus(),w&&w(),V()},be=()=>{E.current.focus(),b(!0)},me=()=>{const t=u.findIndex(n=>n.props?.children===s);return s&&t===-1},Ce=t=>{t.preventDefault(),b(t,!0)};return o.default.createElement(ke.Field,{hint:S,error:j,id:c,required:T},o.default.createElement(Re.VisuallyHidden,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},p),o.default.createElement(Le.Stack,{spacing:g||S||j?1:0},g&&o.default.createElement(je.FieldLabel,{action:J},g),o.default.createElement(q.MainRow,{ref:D,$disabled:d,hasError:j},o.default.createElement(q.InputContainer,{wrap:"wrap"},!s&&p&&o.default.createElement(q.ValueContainer,{id:`${c}-selected-value`},o.default.createElement(U.Typography,null,oe())),o.default.createElement(q.Input,{"aria-activedescendant":se,"aria-autocomplete":"list","aria-controls":`${c}-listbox`,"aria-disabled":d,"aria-expanded":m,"aria-haspopup":"listbox","aria-labelledby":g?_:void 0,autoComplete:"off",autoCorrect:"off",id:c,onBlur:d?void 0:ue,onClick:d?void 0:Ce,onInput:d?void 0:ie,onKeyDown:d?void 0:ce,placeholder:p?"":ee,readOnly:d,ref:E,required:T,role:"combobox",spellCheck:"off",type:"text",value:s})),o.default.createElement(H.Flex,null,(p||s)&&o.default.createElement(N.IconBox,{id:`${c}-clear`,"aria-label":z,disabled:d,paddingLeft:3,as:"button",onClick:pe,type:"button"},o.default.createElement(Ae.default,null)),o.default.createElement(N.CaretBox,{disabled:d,paddingLeft:3,"aria-hidden":!0,as:"button",onClick:be,tabIndex:-1,type:"button"},o.default.createElement(we.default,null)))),o.default.createElement(Me.FieldHint,null),o.default.createElement(Oe.FieldError,null)),m&&o.default.createElement(ve.Popover,{id:`${c}-popover`,source:D,spacing:4,fullWidth:!0,intersectionId:`${c}-listbox-popover-intersection`,onReachEnd:G&&!M?Z:void 0},o.default.createElement("div",{role:"listbox",ref:le,id:`${c}-listbox`,"aria-labelledby":g?_:void 0},(Boolean(u.length)||v)&&o.default.createElement(o.default.Fragment,null,o.default.createElement(qe.ComboboxList,{activeOptionRef:x,options:fe}),me()&&v&&o.default.createElement(Ie.ComboboxOption,{isSelected:i===u.length,ref:t=>{i===u.length&&(x.current=t)},onMouseDown:K,onClick:()=>O(),taindex:0},W(s))),!u.length&&!v&&!M&&o.default.createElement(Ee.Box,{paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:x},o.default.createElement(U.Typography,{textColor:"neutral800"},X(s))),M&&o.default.createElement(H.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},o.default.createElement(Fe.Loader,{small:!0},Q)))))},L=r=>o.default.createElement(h,{...r,creatable:!0});h.defaultProps={"aria-label":void 0,clearLabel:"clear",creatable:!1,createMessage:r=>`Create "${r}"`,disabled:!1,error:void 0,hasMoreItems:!1,hint:void 0,label:void 0,loading:!1,loadingMessage:"Loading content...",noOptionsMessage:()=>"No results found",onClear:void 0,onCreateOption:void 0,onInputChange:void 0,onLoadMore:void 0,placeholder:"Select or enter a value",value:void 0};L.defaultProps=h.defaultProps;h.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,creatable:e.default.bool,createMessage:e.default.func,disabled:e.default.bool,error:e.default.string,hasMoreItems:e.default.bool,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string,labelAction:e.default.element,loading:e.default.bool,loadingMessage:e.default.string,noOptionsMessage:e.default.func,onChange:e.default.func.isRequired,onClear:e.default.func,onCreateOption:e.default.func,onInputChange:e.default.func,onLoadMore:e.default.func,placeholder:e.default.string,value:e.default.string};L.propTypes={...h.propTypes,onCreateOption:e.default.func.isRequired};exports.Combobox=h;exports.CreatableCombobox=L;