@strapi/design-system 1.6.6 → 1.7.0-alpha.0

package/README.md

@@ -0,0 +1,55 @@
+<p align="center">
+  <a href="https://strapi.io">
+    <img src="./assets/logo.svg" width="318px" alt="Strapi logo" />
+  </a>
+</p>
+<p align="center">
+<a style='margin-right:10px' href="https://design-system.strapi.io/">Documentation</a>|<a style='margin-left:10px' href="https://design-system-git-main-strapijs.vercel.app/">Try components</a></p>
+<br />
+
+[![Version](https://img.shields.io/npm/v/@strapi/design-system?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
+[![Downloads](https://img.shields.io/npm/dt/@strapi/design-system.svg?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
+[![Discord Shield](https://img.shields.io/discord/811989166782021633?style=flat&colorA=4945ff&colorB=4945ff&label=discord&logo=discord&logoColor=f0f0ff)](https://discord.gg/strapi)
+
+# Welcome! 👋👋👋
+
+Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build
+plugins more efficiently.
+
+## Installation
+
+Install Strapi Design System and itdesign-system dependencies:
+
+```sh
+$ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
+
+# or
+
+$ npm i react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
+```
+
+## Getting Started
+
+Wrap your application with the `ThemeProvider` and pass the default `lightTheme` or `darkTheme` provided by `@strapi/design-system`.
+
+```jsx
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+
+function MyApp({ children }) {
+  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
+}
+
+export default App;
+```
+
+Then, checkout the complete [Storybook documentation](https://design-system-git-main-strapijs.vercel.app/) to find the components you want to use and how to use them.
+
+## Contributing
+
+Please follow our [CONTRIBUTING](https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md) guidelines.
+
+## License
+
+Licensed under the MIT License, Copyright © 2015-present [Strapi Solutions SAS](https://strapi.io).
+
+See [LICENSE](https://github.com/strapi/design-system/blob/main/LICENSE) for more information.

package/dist/BaseButton/BaseButton.cjs

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),c=require("react"),i=require("styled-components"),d=require("../Flex/Flex.cjs"),p=require("../themes/utils.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=t(c),b=t(i),s=b.default(d.Flex)`
-  svg {
+  > svg {
     height: ${({theme:e})=>e.spaces[3]};
     width: ${({theme:e})=>e.spaces[3]};
 

package/dist/BaseButton/BaseButton.js

@@ -4,7 +4,7 @@ import i from "styled-components";
 import { Flex as u } from "../Flex/Flex.js";
 import { buttonFocusStyle as p } from "../themes/utils.js";
 const d = i(u)`
-  svg {
+  > svg {
     height: ${({
   theme: t
 }) => t.spaces[3]};

package/dist/BaseLink/BaseLink.cjs

@@ -1,3 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),f=require("react"),i=require("styled-components"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(f),_=a(i),p=_.default.a`
-  cursor: pointer;
-`,n=d.default.forwardRef(({href:e,rel:s="noreferrer noopener",target:o="_self",disabled:t=!1,isExternal:r=!1,...u},l)=>c.jsx(p,{ref:l,target:r?"_blank":o,rel:r?s:void 0,href:t?"#":e,"aria-disabled":t,...u}));n.displayName="BaseLink";exports.BaseLink=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),c=require("react"),f=require("../Box/Box.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=l(c),a=d.default.forwardRef(({href:e,rel:o="noreferrer noopener",target:n="_self",disabled:r=!1,isExternal:t=!1,...s},u)=>i.jsx(f.Box,{as:"a",ref:u,target:t?"_blank":n,rel:t?o:void 0,href:r?"#":e,"aria-disabled":r,cursor:"pointer",...s}));a.displayName="BaseLink";exports.BaseLink=a;

package/dist/BaseLink/BaseLink.js

@@ -1,22 +1,22 @@
 import { jsx as s } from "react/jsx-runtime";
 import i from "react";
-import l from "styled-components";
-const m = l.a`
-  cursor: pointer;
-`, p = i.forwardRef(({
+import { Box as m } from "../Box/Box.js";
+const p = i.forwardRef(({
   href: o,
   rel: a = "noreferrer noopener",
   target: f = "_self",
-  disabled: e = !1,
-  isExternal: r = !1,
-  ...t
-}, n) => s(m, {
-  ref: n,
-  target: r ? "_blank" : f,
-  rel: r ? a : void 0,
-  href: e ? "#" : o,
-  "aria-disabled": e,
-  ...t
+  disabled: r = !1,
+  isExternal: e = !1,
+  ...n
+}, t) => s(m, {
+  as: "a",
+  ref: t,
+  target: e ? "_blank" : f,
+  rel: e ? a : void 0,
+  href: r ? "#" : o,
+  "aria-disabled": r,
+  cursor: "pointer",
+  ...n
 }));
 p.displayName = "BaseLink";
 export {

package/dist/Combobox/Combobox.cjs

@@ -1 +1,104 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),_=require("@strapi/icons"),he=require("prop-types"),ve=require("./ComboboxOption.cjs"),O=require("./components.cjs"),l=require("./utils.cjs"),Ee=require("../Box/Box.cjs"),Fe=require("../Field/Field.cjs"),Ie=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 R=require("../Flex/Flex.cjs"),qe=require("../helpers/keyboardKeys.cjs"),je=require("../hooks/useId.cjs"),ke=require("../Loader/Loader.cjs"),Le=require("../Popover/Popover.cjs"),N=require("../Select/components.cjs"),U=require("../Typography/Typography.cjs"),Re=require("../VisuallyHidden/VisuallyHidden.cjs"),z=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=z(a),e=z(he),C=({children:r,clearLabel:W,creatable:x,createMessage:G,disabled:d,error:F,hasMoreItems:J,hint:q,id:Q,label:h,labelAction:X,loading:j,loadingMessage:Y,noOptionsMessage:Z,onChange:A,onClear:T,onCreateOption:ee,onInputChange:$,onLoadMore:te,placeholder:oe,required:w,value:p,...ne})=>{const ae=()=>r.find(t=>t.props?.value.toLowerCase()===p.toLowerCase()).props?.children,[c,B]=a.useState(0),[re,le]=a.useState(null),[u,D]=a.useState(r),[m,ie]=a.useState(!1),[i,I]=a.useState(""),v=a.useRef(),M=a.useRef(!1),E=a.useRef(),P=a.useRef(),se=a.useRef(),V=a.useRef(!0),s=je.useId(Q),ce=`${s}-label`;if(!h&&!ne["aria-label"])throw new Error('The Combobox component needs a "label" or an "aria-label" props');a.useEffect(()=>{D(l.filterOptions(r,i))},[i,r]),a.useEffect(()=>{m&&v.current&&l.maintainScrollVisibility(v.current)},[c,m]),a.useLayoutEffect(()=>{V.current&&(V.current=!1)},[p]);const ue=m?`${s}-${c}`:"",K=()=>{A(null),I("")},de=t=>{$&&$(t);const n=E.current.value;D(l.filterOptions(r,n)),B(0),le(null),i!==n&&I(n),m||b(!0,!1)},fe=t=>{const{key:n}=t,f=x&&i?u.length:u.length-1,y=l.getActionFromKey(n,m);switch(p&&!i&&n===qe.KeyboardKeys.BACKSPACE&&K(),y){case l.MenuActions.Next:{if(c===f){g(0);break}g(l.getUpdatedIndex(c,f,y));break}case l.MenuActions.Previous:{if(c===0){g(f);break}g(l.getUpdatedIndex(c,f,y));break}case l.MenuActions.Last:case l.MenuActions.First:{if(c===f){g(0);break}g(l.getUpdatedIndex(c,f,y));break}case l.MenuActions.CloseSelect:t.preventDefault(),k(c);break;case l.MenuActions.Close:t.preventDefault(),b(!1);break;case l.MenuActions.Open:b(!0);break}},pe=t=>{if(t.preventDefault(),p&&!M.current&&I(""),M.current){M.current=!1;return}b(!1,!1)},g=t=>{B(t)},be=t=>{g(t),k(t)},H=()=>{M.current=!0},k=t=>{const n=u[t];if(I(""),n){A(n.props.value),b(!1);return}x&&(ee(i),b(!1))},b=(t,n=!0)=>{ie(t),n&&E.current.focus()},me=a.Children.toArray(u).map((t,n)=>{const f=c===n;return a.cloneElement(t,{id:`${s}-${n}`,"aria-selected":re===n,"aria-posinset":n+1,"aria-setsize":a.Children.toArray(u).length,ref(y){f&&(v.current=y)},onClick:()=>be(n),onMouseDown:H,isSelected:f})}),ge=()=>{E.current.focus(),T&&T(),K()},ye=()=>{E.current.focus(),b(!0)},Ce=()=>{const t=u.findIndex(n=>n.props?.children===i);return i&&t===-1},xe=t=>{t.preventDefault(),b(t,!0)};let L;return F?L=`${s}-error`:q&&(L=`${s}-hint`),o.default.createElement(Fe.Field,{hint:q,error:F,id:s,required:w},o.default.createElement(Re.VisuallyHidden,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},p),o.default.createElement(R.Flex,{direction:"column",alignItems:"stretch",gap:h||q||F?1:0},h&&o.default.createElement(Ie.FieldLabel,{action:X},h),o.default.createElement(O.MainRow,{ref:P,$disabled:d,hasError:F},o.default.createElement(O.InputContainer,{wrap:"wrap"},!i&&p&&o.default.createElement(O.ValueContainer,{id:`${s}-selected-value`},o.default.createElement(U.Typography,null,ae())),o.default.createElement(O.Input,{"aria-activedescendant":ue,"aria-autocomplete":"list","aria-controls":`${s}-listbox`,"aria-disabled":d,"aria-expanded":m,"aria-haspopup":"listbox","aria-describedby":L,autoComplete:"off",autoCorrect:"off",id:s,onBlur:d?void 0:pe,onClick:d?void 0:xe,onInput:d?void 0:de,onKeyDown:d?void 0:fe,placeholder:p?"":oe,readOnly:d,ref:E,required:w,role:"combobox",spellCheck:"off",type:"text",value:i})),o.default.createElement(R.Flex,null,(p||i)&&o.default.createElement(N.IconBox,{id:`${s}-clear`,"aria-label":W,disabled:d,paddingLeft:3,as:"button",onClick:ge,type:"button"},o.default.createElement(_.Cross,null)),o.default.createElement(N.CaretBox,{disabled:d,paddingLeft:3,"aria-hidden":!0,as:"button",onClick:ye,tabIndex:-1,type:"button"},o.default.createElement(_.CarretDown,null)))),o.default.createElement(Me.FieldHint,null),o.default.createElement(Oe.FieldError,null)),m&&o.default.createElement(Le.Popover,{id:`${s}-popover`,source:P,spacing:4,fullWidth:!0,intersectionId:`${s}-listbox-popover-intersection`,onReachEnd:J&&!j?te:void 0},o.default.createElement("div",{role:"listbox",ref:se,id:`${s}-listbox`,"aria-labelledby":h?ce:void 0},(Boolean(u.length)||x)&&o.default.createElement(o.default.Fragment,null,me,Ce()&&x&&o.default.createElement(ve.ComboboxOption,{isSelected:c===u.length,ref:t=>{c===u.length&&(v.current=t)},onMouseDown:H,onClick:()=>k(),taindex:0},G(i))),!u.length&&!x&&!j&&o.default.createElement(Ee.Box,{paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:v},o.default.createElement(U.Typography,{textColor:"neutral800"},Z(i))),j&&o.default.createElement(R.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},o.default.createElement(ke.Loader,{small:!0},Y)))))},S=r=>o.default.createElement(C,{...r,creatable:!0});C.defaultProps={"aria-label":void 0,clearLabel:"clear",creatable:!1,createMessage:r=>`Create "${r}"`,disabled:!1,error:void 0,hasMoreItems:!1,hint:void 0,id: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};S.defaultProps=C.defaultProps;C.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,id:e.default.string,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};S.propTypes={...C.propTypes,onCreateOption:e.default.func.isRequired};exports.Combobox=C;exports.CreatableCombobox=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),re=require("react"),R=require("@strapi/icons"),n=require("@strapi/ui-primitives"),te=require("styled-components"),V=require("../Box/Box.cjs"),ne=require("../Field/Field.cjs"),se=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const le=require("../Field/FieldHint.cjs"),ie=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const j=require("../Flex/Flex.cjs"),ae=require("../hooks/useControllableState.cjs"),ce=require("../hooks/useId.cjs"),de=require("../hooks/useIntersection.cjs"),ue=require("../Loader/Loader.cjs");require("../themes/lightTheme/index.cjs");require("../themes/darkTheme/index.cjs");require("lodash");const he=require("../themes/utils.cjs"),b=require("../Typography/Typography.cjs"),be=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function pe(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const c=pe(re),l=be(te),O=({children:e,clearLabel:r="clear",creatable:s=!1,createMessage:i=g=>`Create "${g}"`,disabled:d=!1,error:u,hasMoreItems:S=!1,hint:B,id:_,label:L,labelAction:P,loading:x=!1,loadingMessage:E="Loading content...",noOptionsMessage:D=()=>"No results found",onChange:m,onClear:f,onCreateOption:C,onInputChange:$,onLoadMore:y,placeholder:H="Select or enter a value",required:F=!1,defaultTextValue:M,textValue:N,value:z})=>{const[g,W]=c.useState(!1),[a,I]=ae.useControllableState({prop:N,defaultProp:M}),[A,q]=c.useState(""),w=c.useRef(null),T=c.useRef(null),U=c.useRef(null),h=ce.useId(_),G=t=>{f&&!d&&(I(""),q(""),f(t),T.current.focus())},J=t=>{W(t)},K=t=>{I(t)},Q=t=>{q(t)},X=t=>{$&&$(t)},Y=t=>{m&&m(t)},v=`intersection-${h}`,Z=t=>{y&&S&&!x&&y(t)},k=()=>{C&&a&&C(a)};de.useIntersection(w,Z,{selectorToWatch:`#${v}`,skipWhen:!g});const ee=`${h}-hint`,oe=`${h}-error`;return o.jsx(ne.Field,{hint:B,error:u,id:h,required:F,children:o.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(se.FieldLabel,{action:P,children:L}),o.jsxs(n.Combobox.Root,{autocomplete:s?"list":"both",onOpenChange:J,onTextValueChange:K,textValue:a,allowCustomValue:!0,disabled:d,required:F,value:z,onValueChange:Y,filterValue:A,onFilterValueChange:Q,children:[o.jsxs(ge,{$hasError:Boolean(u),children:[o.jsx(je,{placeholder:H,id:h,"aria-invalid":Boolean(u),"aria-labelledby":`${ee} ${oe}`,onChange:X,ref:T}),o.jsxs(j.Flex,{as:"span",gap:3,children:[a&&f?o.jsx(fe,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:G,"aria-disabled":d,"aria-label":r,title:r,ref:U,children:o.jsx(R.Cross,{})}):null,o.jsx(me,{children:o.jsx(R.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Ce,{sideOffset:4,children:o.jsxs($e,{ref:w,children:[e,s?o.jsx(n.Combobox.CreateItem,{onPointerUp:k,onClick:k,asChild:!0,children:o.jsx(p,{children:o.jsx(b.Typography,{children:i(a??"")})})}):null,!s&&!x?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(p,{$hasHover:!1,children:o.jsx(b.Typography,{children:D(a??"")})})}):null,x?o.jsx(j.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(ue.Loader,{small:!0,children:E})}):null,o.jsx(V.Box,{id:v,width:"100%",height:"1px"})]})})})]}),o.jsx(le.FieldHint,{}),o.jsx(ie.FieldError,{})]})})},xe=e=>o.jsx(O,{...e,creatable:!0}),fe=l.default(V.Box)`
+  border: none;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`,ge=l.default(n.Combobox.Trigger)`
+  position: relative;
+  border: 1px solid ${({theme:e,$hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
+  padding-right: ${({theme:e})=>e.spaces[3]};
+  padding-left: ${({theme:e})=>e.spaces[3]};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  background: ${({theme:e})=>e.colors.neutral0};
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({theme:e})=>e.spaces[4]};
+
+  &[data-disabled] {
+    color: ${({theme:e})=>e.colors.neutral600};
+    background: ${({theme:e})=>e.colors.neutral150};
+    cursor: not-allowed;
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({theme:e,$hasError:r})=>he.inputFocusStyle()({theme:e,hasError:r})};
+`,je=l.default(n.Combobox.TextInput)`
+  width: 100%;
+  font-size: ${14/16}rem;
+  color: ${({theme:e})=>e.colors.neutral800};
+  min-height: ${40/16}rem;
+  border: none;
+  background-color: transparent;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`,me=l.default(n.Combobox.Icon)`
+  & > svg {
+    width: ${6/16}rem;
+
+    & > path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`,Ce=l.default(n.Combobox.Content)`
+  background: ${({theme:e})=>e.colors.neutral0};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  border: 1px solid ${({theme:e})=>e.colors.neutral150};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  width: var(--radix-combobox-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+`,$e=l.default(n.Combobox.Viewport)`
+  padding: ${({theme:e})=>e.spaces[1]};
+`,ye=c.forwardRef(({children:e,value:r,disabled:s,textValue:i,...d},u)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:i,children:o.jsx(p,{ref:u,...d,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(b.Typography,{children:e})})})})),p=l.default.div`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
+  background-color: ${({theme:e})=>e.colors.neutral0};
+  border-radius: ${({theme:e})=>e.borderRadius};
+
+  &[data-selected] {
+    background-color: ${({theme:e})=>e.colors.primary100};
+
+    ${b.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+      font-weight: bold;
+    }
+  }
+
+  &:hover,
+  &[data-highlighted] {
+    outline: none;
+    background-color: ${({theme:e,$hasHover:r=!0})=>r?e.colors.primary100:e.colors.neutral0};
+  }
+
+  &[data-highlighted] {
+    ${b.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+      font-weight: bold;
+    }
+  }
+`;exports.Combobox=O;exports.CreatableCombobox=xe;exports.Option=ye;exports.OptionBox=p;