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

package/dist/Checkbox/Checkbox.js

@@ -1,64 +1,83 @@
-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";
+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 "../Field/FieldLabel.js";
 import "../Field/FieldInput.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 { FieldHint as C } from "../Field/FieldHint.js";
+import { FieldError as F } from "../Field/FieldError.js";
+import { useField as v } from "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-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)`
+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)`
   display: flex;
   align-items: flex-start;
   * {
-    cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
+    cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
   }
-`, 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, {
+`, 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, {
     spacing: 1
-  }, /* @__PURE__ */ r.createElement(k, {
+  }, /* @__PURE__ */ n.createElement(I, {
     as: "label",
     textColor: "neutral800",
-    disabled: t
-  }, /* @__PURE__ */ r.createElement(T, {
-    disabled: t,
-    "aria-describedby": n,
-    ...d
-  }), /* @__PURE__ */ r.createElement(h, {
+    disabled: r
+  }, /* @__PURE__ */ n.createElement(L, p({
+    disabled: r,
+    "aria-describedby": a
+  }, y)), /* @__PURE__ */ n.createElement(O, {
     paddingLeft: 2
-  }, o)), /* @__PURE__ */ r.createElement(u, null), /* @__PURE__ */ r.createElement(x, null)));
+  }, e)), /* @__PURE__ */ n.createElement(C, null), /* @__PURE__ */ n.createElement(F, null)));
 };
-a.defaultProps = {
+x.defaultProps = {
   disabled: !1,
   id: void 0,
   error: void 0,
   hint: void 0
 };
-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])
+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])
 };
 export {
-  a as Checkbox
+  x as Checkbox
 };

package/dist/Combobox/Combobox.cjs

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