@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.2

package/dist/CarouselInput/CarouselSlide.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),u=require("prop-types"),i=require("styled-components"),n=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(d),t=l(u),p=l(i),f=p.default(n.Flex)`
+"use strict";var y=Object.defineProperty;var r=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var i=(e,l,t)=>l in e?y(e,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[l]=t,p=(e,l)=>{for(var t in l||(l={}))n.call(l,t)&&i(e,t,l[t]);if(r)for(var t of r(l))c.call(l,t)&&i(e,t,l[t]);return e};var f=(e,l)=>{var t={};for(var o in e)n.call(e,o)&&l.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&r)for(var o of r(e))l.indexOf(o)<0&&c.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),b=require("prop-types"),g=require("styled-components"),q=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},x=a(_),s=a(b),S=a(g),j=S.default(q.Flex)`
   display: ${({selected:e})=>e?"flex":"none"};
-`,o=({label:e,children:r,selected:s,...a})=>c.default.createElement(f,{selected:s,role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px",...a},r);o.defaultProps={selected:!1};o.propTypes={children:t.default.node.isRequired,label:t.default.string.isRequired,selected:t.default.bool};exports.CarouselSlide=o;
+`,d=C=>{var u=C,{label:e,children:l,selected:t}=u,o=f(u,["label","children","selected"]);return x.default.createElement(j,p({selected:t,role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px"},o),l)};d.defaultProps={selected:!1};d.propTypes={children:s.default.node.isRequired,label:s.default.string.isRequired,selected:s.default.bool};exports.CarouselSlide=d;

package/dist/CarouselInput/CarouselSlide.d.ts

@@ -0,0 +1,18 @@
+export function CarouselSlide({ label, children, selected, ...props }: {
+    [x: string]: any;
+    label: any;
+    children: any;
+    selected: any;
+}): JSX.Element;
+export namespace CarouselSlide {
+    namespace defaultProps {
+        const selected: boolean;
+    }
+    namespace propTypes {
+        export const children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        export const label: PropTypes.Validator<string>;
+        const selected_1: PropTypes.Requireable<boolean>;
+        export { selected_1 as selected };
+    }
+}
+import PropTypes from "prop-types";

package/dist/CarouselInput/CarouselSlide.js

@@ -1,26 +1,48 @@
-import s from "react";
-import r from "prop-types";
-import p from "styled-components";
-import { Flex as a } from "../Flex/Flex.js";
-const d = p(a)`
+var m = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var p = (e, o, r) => o in e ? m(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, n = (e, o) => {
+  for (var r in o || (o = {}))
+    a.call(o, r) && p(e, r, o[r]);
+  if (t)
+    for (var r of t(o))
+      d.call(o, r) && p(e, r, o[r]);
+  return e;
+};
+var c = (e, o) => {
+  var r = {};
+  for (var l in e)
+    a.call(e, l) && o.indexOf(l) < 0 && (r[l] = e[l]);
+  if (e != null && t)
+    for (var l of t(e))
+      o.indexOf(l) < 0 && d.call(e, l) && (r[l] = e[l]);
+  return r;
+};
+import u from "react";
+import i from "prop-types";
+import y from "styled-components";
+import { Flex as x } from "../Flex/Flex.js";
+const b = y(x)`
   display: ${({ selected: e }) => e ? "flex" : "none"};
-`, o = ({ label: e, children: l, selected: t, ...i }) => /* @__PURE__ */ s.createElement(d, {
-  selected: t,
-  role: "group",
-  "aria-roledescription": "slide",
-  "aria-label": e,
-  justifyContent: "center",
-  height: "124px",
-  ...i
-}, l);
-o.defaultProps = {
+`, f = (g) => {
+  var s = g, { label: e, children: o, selected: r } = s, l = c(s, ["label", "children", "selected"]);
+  return /* @__PURE__ */ u.createElement(b, n({
+    selected: r,
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": e,
+    justifyContent: "center",
+    height: "124px"
+  }, l), o);
+};
+f.defaultProps = {
   selected: !1
 };
-o.propTypes = {
-  children: r.node.isRequired,
-  label: r.string.isRequired,
-  selected: r.bool
+f.propTypes = {
+  children: i.node.isRequired,
+  label: i.string.isRequired,
+  selected: i.bool
 };
 export {
-  o as CarouselSlide
+  f as CarouselSlide
 };

package/dist/CarouselInput/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Carousel";
+export * from "./CarouselInput";
+export * from "./CarouselActions";
+export * from "./CarouselImage";
+export * from "./CarouselSlide";

package/dist/Checkbox/Checkbox.cjs

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

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,28 @@
+export function Checkbox({ children, disabled, id, hint, error, ...props }: {
+    [x: string]: any;
+    children: any;
+    disabled: any;
+    id: any;
+    hint: any;
+    error: any;
+}): JSX.Element;
+export namespace Checkbox {
+    namespace defaultProps {
+        const disabled: boolean;
+        const id: undefined;
+        const error: undefined;
+        const hint: undefined;
+    }
+    namespace propTypes {
+        export const children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        const disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        const error_1: PropTypes.Requireable<string>;
+        export { error_1 as error };
+        const hint_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        export { hint_1 as hint };
+        const id_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        export { id_1 as id };
+    }
+}
+import PropTypes from "prop-types";

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/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from "./Checkbox";

package/dist/Combobox/Combobox.cjs

@@ -1 +1 @@
-"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;
+"use strict";var qe=Object.defineProperty,ke=Object.defineProperties;var je=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var G=(e,s,r)=>s in e?qe(e,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[s]=r,A=(e,s)=>{for(var r in s||(s={}))J.call(s,r)&&G(e,r,s[r]);if(j)for(var r of j(s))Q.call(s,r)&&G(e,r,s[r]);return e},T=(e,s)=>ke(e,je(s));var X=(e,s)=>{var r={};for(var f in e)J.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&&Q.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"),Y=require("../Flex/Flex.cjs"),Z=require("../Select/components.cjs"),Re=require("../Popover/Popover.cjs"),we=require("../Box/Box.cjs"),ee=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:te,hint:B,label:h,labelAction:oe,loading:S,loadingMessage:ne,noOptionsMessage:ae,onChange:D,onClear:P,onCreateOption:re,onInputChange:_,onLoadMore:le,placeholder:se,required:ie,value:C}=V,ce=X(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"),R=`${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}`:"",z=()=>{D(null),q("")},Ce=o=>{_&&_(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&&z(),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(),w(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),w(o)},W=()=>{k.current=!0},w=o=>{const a=b[o];if(q(""),a){D(a.props.value),g(!1);return}r&&(re(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:W,isSelected:i})}),ve=()=>{I.current.focus(),P&&P(),z()},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:B,error:L,id:p},n.default.createElement(He.VisuallyHidden,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},C),n.default.createElement(Ve.Stack,{spacing:h||B||L?1:0},h&&n.default.createElement(De.FieldLabel,{action:oe,required:ie,id:R},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(ee.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?R:void 0,id:p,onBlur:m?void 0:xe,onClick:m?void 0:Ie,onInput:m?void 0:Ce,onKeyDown:m?void 0:ge,placeholder:C?"":se,readOnly:m,ref:I,role:"combobox",autoComplete:"off",autoCorrect:"off",spellCheck:"off",type:"text",value:u})),n.default.createElement(Y.Flex,null,(C||u)&&n.default.createElement(Z.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(Z.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:te&&!S?le:void 0},n.default.createElement("div",{role:"listbox",ref:be,id:`${p}-listbox`,"aria-labelledby":h?R: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:W,onClick:()=>w(),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(ee.Typography,{textColor:"neutral800"},ae(u))),S&&n.default.createElement(Y.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},n.default.createElement(Ae.Loader,{small:!0},ne)))))},$=e=>n.default.createElement(F,T(A({},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};$.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};$.propTypes=T(A({},F.propTypes),{onCreateOption:t.default.func.isRequired});exports.Combobox=F;exports.CreatableCombobox=$;

package/dist/Combobox/Combobox.d.ts

@@ -0,0 +1,99 @@
+export function Combobox({ children: nodes, clearLabel, creatable, createMessage, disabled, error, hasMoreItems, hint, label, labelAction, loading, loadingMessage, noOptionsMessage, onChange, onClear, onCreateOption, onInputChange, onLoadMore, placeholder, required, value, ...props }: {
+    [x: string]: any;
+    children: any;
+    clearLabel: any;
+    creatable: any;
+    createMessage: any;
+    disabled: any;
+    error: any;
+    hasMoreItems: any;
+    hint: any;
+    label: any;
+    labelAction: any;
+    loading: any;
+    loadingMessage: any;
+    noOptionsMessage: any;
+    onChange: any;
+    onClear: any;
+    onCreateOption: any;
+    onInputChange: any;
+    onLoadMore: any;
+    placeholder: any;
+    required: any;
+    value: any;
+}): JSX.Element;
+export namespace Combobox {
+    const defaultProps: {
+        'aria-label': undefined;
+        clearLabel: string;
+        creatable: boolean;
+        createMessage: (value: any) => string;
+        disabled: boolean;
+        error: undefined;
+        hasMoreItems: boolean;
+        hint: undefined;
+        label: undefined;
+        loading: boolean;
+        loadingMessage: string;
+        noOptionsMessage: () => string;
+        onClear: undefined;
+        onCreateOption: undefined;
+        onInputChange: undefined;
+        onLoadMore: undefined;
+        placeholder: string;
+        value: undefined;
+    };
+    const propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        clearLabel: PropTypes.Requireable<string>;
+        creatable: PropTypes.Requireable<boolean>;
+        createMessage: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<string>;
+        hasMoreItems: PropTypes.Requireable<boolean>;
+        hint: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        label: PropTypes.Requireable<string>;
+        labelAction: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        loading: PropTypes.Requireable<boolean>;
+        loadingMessage: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        onCreateOption: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onLoadMore: PropTypes.Requireable<(...args: any[]) => any>;
+        placeholder: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+    };
+}
+export function CreatableCombobox(props: any): JSX.Element;
+export namespace CreatableCombobox {
+    import defaultProps_1 = Combobox.defaultProps;
+    export { defaultProps_1 as defaultProps };
+    const propTypes_1: {
+        onCreateOption: PropTypes.Validator<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        clearLabel: PropTypes.Requireable<string>;
+        creatable: PropTypes.Requireable<boolean>;
+        createMessage: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<string>;
+        hasMoreItems: PropTypes.Requireable<boolean>;
+        hint: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        label: PropTypes.Requireable<string>;
+        labelAction: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        loading: PropTypes.Requireable<boolean>;
+        loadingMessage: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onLoadMore: PropTypes.Requireable<(...args: any[]) => any>;
+        placeholder: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+    };
+    export { propTypes_1 as propTypes };
+}
+import PropTypes from "prop-types";