@strapi/design-system 1.6.3 → 1.6.5

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -1,10 +1,10 @@
 import e from "react";
+import { CarretDown as s } from "@strapi/icons";
 import r from "prop-types";
 import p from "styled-components";
-import { CarretDown as s } from "@strapi/icons";
-import { Typography as n } from "../../Typography/Typography.js";
-import { Box as l } from "../../Box/Box.js";
+import { Box as n } from "../../Box/Box.js";
 import { Flex as u } from "../../Flex/Flex.js";
+import { Typography as l } from "../../Typography/Typography.js";
 const i = p(u)`
   border: none;
   padding: 0;
@@ -13,27 +13,18 @@ const i = p(u)`
   display: flex;
   align-items: center;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, m = ({ collapsable: t, label: a, onClick: d, ariaExpanded: o, ariaControls: c }) => t ? /* @__PURE__ */ e.createElement(i, {
-  as: "button",
-  onClick: d,
-  "aria-expanded": o,
-  "aria-controls": c,
-  textAlign: "left"
-}, /* @__PURE__ */ e.createElement(l, {
-  paddingRight: 1
-}, /* @__PURE__ */ e.createElement(n, {
-  variant: "sigma",
-  textColor: "neutral600"
-}, a)), t && /* @__PURE__ */ e.createElement(f, {
-  rotated: o
-}, /* @__PURE__ */ e.createElement(s, {
-  "aria-hidden": !0
-}))) : /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(l, {
-  paddingRight: 1
-}, /* @__PURE__ */ e.createElement(n, {
-  variant: "sigma",
-  textColor: "neutral600"
-}, a)));
+`, m = ({ collapsable: t, label: a, onClick: d, ariaExpanded: o, ariaControls: c }) => t ? /* @__PURE__ */ e.createElement(
+  i,
+  {
+    as: "button",
+    onClick: d,
+    "aria-expanded": o,
+    "aria-controls": c,
+    textAlign: "left"
+  },
+  /* @__PURE__ */ e.createElement(n, { paddingRight: 1 }, /* @__PURE__ */ e.createElement(l, { variant: "sigma", textColor: "neutral600" }, a)),
+  t && /* @__PURE__ */ e.createElement(f, { rotated: o }, /* @__PURE__ */ e.createElement(s, { "aria-hidden": !0 }))
+) : /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(n, { paddingRight: 1 }, /* @__PURE__ */ e.createElement(l, { variant: "sigma", textColor: "neutral600" }, a)));
 m.defaultProps = {
   ariaControls: null,
   ariaExpanded: null,

package/dist/v2/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("prop-types"),l=require("../../Stack/Stack.cjs"),i=require("../../Box/Box.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(o),d=a(s),r=({children:e,...c})=>t.default.createElement(i.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(l.Stack,{as:"ol",spacing:2,...c},o.Children.map(e,(n,u)=>t.default.createElement("li",{key:u},n))));r.propTypes={children:d.default.node.isRequired};exports.SubNavSections=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),i=require("prop-types"),d=require("../../Box/Box.cjs"),p=require("../../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(r),f=a(i),c=({children:e,spacing:l=2,horizontal:o=!1,...n})=>t.default.createElement(d.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(p.Flex,{as:"ol",gap:l,direction:o?"row":"column",alignItems:o?"center":"stretch",...n},r.Children.map(e,(s,u)=>t.default.createElement("li",{key:u},s))));c.propTypes={children:f.default.node.isRequired};exports.SubNavSections=c;

package/dist/v2/SubNav/SubNavSections.js

@@ -1,20 +1,21 @@
 import e, { Children as i } from "react";
-import m from "prop-types";
-import { Stack as n } from "../../Stack/Stack.js";
-import { Box as a } from "../../Box/Box.js";
-const c = ({ children: r, ...t }) => /* @__PURE__ */ e.createElement(a, {
-  paddingTop: 2,
-  paddingBottom: 4
-}, /* @__PURE__ */ e.createElement(n, {
-  as: "ol",
-  spacing: 2,
-  ...t
-}, i.map(r, (o, p) => /* @__PURE__ */ e.createElement("li", {
-  key: p
-}, o))));
-c.propTypes = {
-  children: m.node.isRequired
+import a from "prop-types";
+import { Box as c } from "../../Box/Box.js";
+import { Flex as l } from "../../Flex/Flex.js";
+const d = ({ children: t, spacing: o = 2, horizontal: r = !1, ...m }) => /* @__PURE__ */ e.createElement(c, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(
+  l,
+  {
+    as: "ol",
+    gap: o,
+    direction: r ? "row" : "column",
+    alignItems: r ? "center" : "stretch",
+    ...m
+  },
+  i.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
+));
+d.propTypes = {
+  children: a.node.isRequired
 };
 export {
-  c as SubNavSections
+  d as SubNavSections
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -22,21 +22,23 @@
     "@floating-ui/react-dom": "^1.0.0",
     "@internationalized/number": "^3.1.1",
     "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@uiw/react-codemirror": "4.8.1",
+    "@uiw/react-codemirror": "^4.19.7",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.3",
+    "@strapi/icons": "^1.6.5",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.6",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
+    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.1.11",
     "cross-env": "^7.0.3",
@@ -61,6 +63,8 @@
     "build": "yarn build:prod",
     "build:prod": "vite build",
     "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
+    "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
+    "format": "yarn lint --fix",
     "test": "jest -c jest.config.js",
     "test:ts": "tsc --noEmit",
     "test:watch": "jest -c jest.config.js --watchAll",
@@ -73,5 +77,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "475dab0bd887ffc86edd026365c78adad4ffbc36"
+  "gitHead": "0c136e23f46fcce45a4d005c1cd99a6197ec35d1"
 }

package/dist/Select/SingleSelect.cjs

@@ -1,82 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),W=require("react"),U=require("@radix-ui/react-select"),w=require("@strapi/icons"),Y=require("styled-components"),G=require("../Field/Field.cjs"),J=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Q=require("../Field/FieldHint.cjs"),X=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Z=require("../Stack/Stack.cjs"),g=require("../Box/Box.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Typography/Typography.cjs"),ee=require("../helpers/useId.cjs"),te=require("../hooks/useIntersection.cjs"),I=require("../themes/utils.cjs"),re=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function v(e){if(e&&e.__esModule)return e;const n=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(n,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const h=v(W),o=v(U),c=re(Y),ne=[" ","Enter","ArrowUp","ArrowDown"],oe=({children:e,clearLabel:n="Clear",customizeContent:s=p=>p.toString(),disabled:i,error:b,hint:k,id:R,label:T,labelAction:O,onChange:$,onClear:a,onReachEnd:m,placeholder:_,required:y,selectButtonTitle:he,startIcon:S,size:B="M",value:f})=>{const p=h.useRef(null),x=h.useRef(null),d=h.useRef(null),[D,C]=h.useState(""),[E,P]=h.useState(!1),u=ee.useId(R),V=`${u}-hint`,M=`${u}-error`,N=r=>{$?$(typeof f=="number"?Number(r):r):C(r)},z=r=>{a&&!i&&(a(r),x.current.focus())},A=r=>{P(r)},H=r=>{d.current&&d.current===r.target.closest("div")&&r.preventDefault()},K=r=>{ne.includes(r.key)&&d.current&&d.current===r.target.closest("div")&&!i&&a&&(r.preventDefault(),a(r),x.current.focus())},F=`intersection-${u}`,L=r=>{m&&m(r)};te.useIntersection(p,L,{selectorToWatch:`#${F}`,skipWhen:!E});const l=typeof f<"u"?f.toString():D;return t.jsx(G.Field,{hint:k,error:b,id:u,required:y,children:t.jsxs(Z.Stack,{spacing:1,children:[t.jsx(J.FieldLabel,{action:O,children:T}),t.jsxs(o.Root,{onOpenChange:A,disabled:i,required:y,onValueChange:N,value:l,children:[t.jsxs(ie,{id:u,"aria-labelledby":`${V} ${M}`,"aria-disabled":i,$hasError:Boolean(b),$size:B,onPointerDown:H,onKeyDown:K,ref:x,children:[t.jsxs(q.Flex,{as:"span",gap:4,children:[S&&t.jsx(g.Box,{as:"span","aria-hidden":!0,children:S}),t.jsx(j.Typography,{ellipsis:!0,textColor:l?"neutral800":"neutral600",children:t.jsx(o.Value,{"aria-label":l,children:l?s(l):_})})]}),t.jsxs(q.Flex,{as:"span",gap:3,children:[l&&a?t.jsx(se,{hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:z,"aria-disabled":i,"aria-label":n,title:n,ref:d,children:t.jsx(w.Cross,{})}):null,t.jsx(le,{children:t.jsx(w.CarretDown,{})})]})]}),t.jsx(o.Portal,{children:t.jsx(ce,{position:"popper",sideOffset:4,children:t.jsxs(ae,{ref:p,children:[e,t.jsx(g.Box,{id:F,width:"100%",height:"1px"})]})})})]}),t.jsx(Q.FieldHint,{}),t.jsx(X.FieldError,{})]})})},se=c.default(g.Box)`
-  border: none;
-
-  svg {
-    height: ${11/16}rem;
-    width: ${11/16}rem;
-  }
-
-  svg path {
-    fill: ${({theme:e})=>e.colors.neutral600};
-  }
-`,ie=c.default(o.Trigger)`
-  position: relative;
-  border: 1px solid ${({theme:e,$hasError:n})=>n?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;
-  min-height: ${({theme:e,$size:n})=>I.getThemeSize("input")({theme:e,size:n})};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({theme:e})=>e.spaces[4]};
-
-  &[aria-disabled='true'] {
-    color: ${e=>e.theme.colors.neutral600};
-    background: ${e=>e.theme.colors.neutral150};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({theme:e,$hasError:n})=>I.inputFocusStyle()({theme:e,hasError:n})};
-`,le=c.default(o.Icon)`
-  & > svg {
-    width: ${6/16}rem;
-
-    & > path {
-      fill: ${({theme:e})=>e.colors.neutral600};
-    }
-  }
-`,ce=c.default(o.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-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-`,ae=c.default(o.Viewport)`
-  padding: ${({theme:e})=>e.spaces[1]};
-`,de=({children:e,startIcon:n,value:s})=>t.jsxs(ue,{textValue:e.toString(),value:s.toString(),children:[n&&t.jsx(g.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:n}),t.jsx(j.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:e})})]}),ue=c.default(o.Item)`
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${e=>e.theme.borderRadius};
-  padding: ${e=>`${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({theme:e})=>e.spaces[4]};
-  background-color: ${({theme:e})=>e.colors.neutral0};
-  display: flex;
-  align-items: center;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({theme:e})=>e.colors.primary100};
-  }
-
-  &:hover {
-    background-color: ${({theme:e})=>e.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${j.Typography} {
-      font-weight: bold;
-      color: ${({theme:e})=>e.colors.primary600};
-    }
-  }
-`;exports.SingleSelect=oe;exports.SingleSelectOption=de;

package/dist/Select/SingleSelect.js

@@ -1,285 +0,0 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import * as h from "react";
-import * as n from "@radix-ui/react-select";
-import { Cross as H, CarretDown as M } from "@strapi/icons";
-import s from "styled-components";
-import { Field as U } from "../Field/Field.js";
-import { FieldLabel as Y } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as _ } from "../Field/FieldHint.js";
-import { FieldError as G } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Stack as J } from "../Stack/Stack.js";
-import { Box as m } from "../Box/Box.js";
-import { Flex as I } from "../Flex/Flex.js";
-import { Typography as b } from "../Typography/Typography.js";
-import { useId as L } from "../helpers/useId.js";
-import { useIntersection as Q } from "../hooks/useIntersection.js";
-import { getThemeSize as X, inputFocusStyle as Z } from "../themes/utils.js";
-const ee = [" ", "Enter", "ArrowUp", "ArrowDown"], Te = ({
-  children: e,
-  clearLabel: o = "Clear",
-  customizeContent: g = (p) => p.toString(),
-  disabled: a,
-  error: w,
-  hint: k,
-  id: T,
-  label: C,
-  labelAction: D,
-  onChange: x,
-  onClear: c,
-  onReachEnd: y,
-  placeholder: E,
-  required: S,
-  selectButtonTitle: se,
-  startIcon: v,
-  size: F = "M",
-  value: f
-}) => {
-  const p = h.useRef(null), $ = h.useRef(null), d = h.useRef(null), [O, B] = h.useState(""), [V, N] = h.useState(!1), u = L(T), P = `${u}-hint`, j = `${u}-error`, z = (r) => {
-    x ? x(typeof f == "number" ? Number(r) : r) : B(r);
-  }, K = (r) => {
-    c && !a && (c(r), $.current.focus());
-  }, q = (r) => {
-    N(r);
-  }, A = (r) => {
-    d.current && d.current === r.target.closest("div") && r.preventDefault();
-  }, W = (r) => {
-    ee.includes(r.key) && d.current && d.current === r.target.closest("div") && !a && c && (r.preventDefault(), c(r), $.current.focus());
-  }, R = `intersection-${u}`;
-  Q(p, (r) => {
-    y && y(r);
-  }, {
-    selectorToWatch: `#${R}`,
-    skipWhen: !V
-  });
-  const l = typeof f < "u" ? f.toString() : O;
-  return t(U, {
-    hint: k,
-    error: w,
-    id: u,
-    required: S,
-    children: i(J, {
-      spacing: 1,
-      children: [t(Y, {
-        action: D,
-        children: C
-      }), i(n.Root, {
-        onOpenChange: q,
-        disabled: a,
-        required: S,
-        onValueChange: z,
-        value: l,
-        children: [i(te, {
-          id: u,
-          "aria-labelledby": `${P} ${j}`,
-          "aria-disabled": a,
-          $hasError: Boolean(w),
-          $size: F,
-          onPointerDown: A,
-          onKeyDown: W,
-          ref: $,
-          children: [i(I, {
-            as: "span",
-            gap: 4,
-            children: [v && t(m, {
-              as: "span",
-              "aria-hidden": !0,
-              children: v
-            }), t(b, {
-              ellipsis: !0,
-              textColor: l ? "neutral800" : "neutral600",
-              children: t(n.Value, {
-                "aria-label": l,
-                children: l ? g(l) : E
-              })
-            })]
-          }), i(I, {
-            as: "span",
-            gap: 3,
-            children: [l && c ? t(re, {
-              hasRadius: !0,
-              background: "transparent",
-              role: "button",
-              tabIndex: 0,
-              onClick: K,
-              "aria-disabled": a,
-              "aria-label": o,
-              title: o,
-              ref: d,
-              children: t(H, {})
-            }) : null, t(oe, {
-              children: t(M, {})
-            })]
-          })]
-        }), t(n.Portal, {
-          children: t(ne, {
-            position: "popper",
-            sideOffset: 4,
-            children: i(ie, {
-              ref: p,
-              children: [e, t(m, {
-                id: R,
-                width: "100%",
-                height: "1px"
-              })]
-            })
-          })
-        })]
-      }), t(_, {}), t(G, {})]
-    })
-  });
-}, re = s(m)`
-  border: none;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral600};
-  }
-`, te = s(n.Trigger)`
-  position: relative;
-  border: 1px solid ${({
-  theme: e,
-  $hasError: o
-}) => o ? 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;
-  min-height: ${({
-  theme: e,
-  $size: o
-}) => X("input")({
-  theme: e,
-  size: o
-})};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({
-  theme: e
-}) => e.spaces[4]};
-
-  &[aria-disabled='true'] {
-    color: ${(e) => e.theme.colors.neutral600};
-    background: ${(e) => e.theme.colors.neutral150};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({
-  theme: e,
-  $hasError: o
-}) => Z()({
-  theme: e,
-  hasError: o
-})};
-`, oe = s(n.Icon)`
-  & > svg {
-    width: ${6 / 16}rem;
-
-    & > path {
-      fill: ${({
-  theme: e
-}) => e.colors.neutral600};
-    }
-  }
-`, ne = s(n.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-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-`, ie = s(n.Viewport)`
-  padding: ${({
-  theme: e
-}) => e.spaces[1]};
-`, Ce = ({
-  children: e,
-  startIcon: o,
-  value: g
-}) => i(le, {
-  textValue: e.toString(),
-  value: g.toString(),
-  children: [o && t(m, {
-    as: "span",
-    paddingRight: 2,
-    "aria-hidden": !0,
-    children: o
-  }), t(b, {
-    textColor: "neutral800",
-    children: t(n.ItemText, {
-      children: e
-    })
-  })]
-}), le = s(n.Item)`
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${(e) => e.theme.borderRadius};
-  padding: ${(e) => `${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({
-  theme: e
-}) => e.spaces[4]};
-  background-color: ${({
-  theme: e
-}) => e.colors.neutral0};
-  display: flex;
-  align-items: center;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
-  }
-
-  &:hover {
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${b} {
-      font-weight: bold;
-      color: ${({
-  theme: e
-}) => e.colors.primary600};
-    }
-  }
-`;
-export {
-  Te as SingleSelect,
-  Ce as SingleSelectOption
-};