@strapi/design-system 1.6.0 → 1.6.2

package/dist/v2/SubNav/SubNavHeader.js

@@ -15,21 +15,21 @@ import { KeyboardKeys as j } from "../../helpers/keyboardKeys.js";
 const d = x(k)`
   width: ${24 / 16}rem;
   background-color: ${({ theme: l }) => l.colors.neutral200};
-`, u = ({ as: l, label: f, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
-  const [a, c] = L(!1), m = $(a), C = _("subnav-searchbar-clear", y), o = p(), i = p();
+`, f = ({ as: l, label: u, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
+  const [o, i] = L(!1), m = $(o), C = _(y), a = p(), c = p();
   w(() => {
-    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
-  }, [a, m]);
+    o && a.current && a.current.focus(), m && !o && c.current && c.current.focus();
+  }, [o, m]);
   const v = () => {
-    c((t) => !t);
+    i((t) => !t);
   }, B = (t) => {
-    E(t), o.current.focus();
+    E(t), a.current.focus();
   }, T = (t) => {
-    t.relatedTarget?.id !== C && c(!1);
+    t.relatedTarget?.id !== C && i(!1);
   }, R = (t) => {
-    t.key === j.ESCAPE && c(!1);
+    t.key === j.ESCAPE && i(!1);
   };
-  return a ? /* @__PURE__ */ e.createElement(n, {
+  return o ? /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 4,
     paddingTop: 5,
     paddingBottom: 2,
@@ -40,7 +40,7 @@ const d = x(k)`
     onChange: h,
     placeholder: "e.g: strapi-plugin-abcd",
     onKeyDown: R,
-    ref: o,
+    ref: a,
     onBlur: T,
     onClear: B,
     onSubmit: S,
@@ -60,8 +60,8 @@ const d = x(k)`
   }, /* @__PURE__ */ e.createElement(K, {
     variant: "beta",
     as: l
-  }, f), g && /* @__PURE__ */ e.createElement(P, {
-    ref: i,
+  }, u), g && /* @__PURE__ */ e.createElement(P, {
+    ref: c,
     onClick: v,
     label: s,
     icon: /* @__PURE__ */ e.createElement(D, null)
@@ -69,7 +69,7 @@ const d = x(k)`
     paddingTop: 4
   }, /* @__PURE__ */ e.createElement(d, null)));
 };
-u.defaultProps = {
+f.defaultProps = {
   as: "h2",
   searchable: !1,
   onChange() {
@@ -82,7 +82,7 @@ u.defaultProps = {
   searchLabel: "",
   id: void 0
 };
-u.propTypes = {
+f.propTypes = {
   as: r.string,
   id: r.string,
   label: r.string.isRequired,
@@ -94,5 +94,5 @@ u.propTypes = {
   value: r.string
 };
 export {
-  u as SubNavHeader
+  f as SubNavHeader
 };

package/dist/v2/SubNav/SubNavLinkSection.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons"),l=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),q=require("../../helpers/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(m),i=d(h),v=i.default(l.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons"),l=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),q=require("../../helpers/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(m),i=d(h),E=i.default(l.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral700};
     }
   }
-`,E=i.default.button`
+`,k=i.default.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`,k=i.default.div`
+`,v=i.default.div`
   display: flex;
   align-items: center;
   width: ${12/16}rem;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,s=({label:e,children:c,id:p})=>{const[n,f]=o.useState(!0),u=q.useId("subnav-list",p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(v,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(E,{onClick:g,"aria-expanded":n,"aria-controls":u},t.default.createElement(k,{rotated:n},t.default.createElement(x.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:u},o.Children.map(c,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={id:void 0};s.propTypes={children:r.default.node.isRequired,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;
+`,s=({label:e,children:c,id:p})=>{const[n,f]=o.useState(!0),u=q.useId(p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":n,"aria-controls":u},t.default.createElement(v,{rotated:n},t.default.createElement(x.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:u},o.Children.map(c,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={id:void 0};s.propTypes={children:r.default.node.isRequired,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -4,8 +4,8 @@ import a from "styled-components";
 import { CarretDown as h } from "@strapi/icons";
 import { Box as i } from "../../Box/Box.js";
 import { Flex as E } from "../../Flex/Flex.js";
-import { Typography as b } from "../../Typography/Typography.js";
-import { useId as y } from "../../helpers/useId.js";
+import { Typography as y } from "../../Typography/Typography.js";
+import { useId as b } from "../../helpers/useId.js";
 const k = a(i)`
   svg {
     height: ${4 / 16}rem;
@@ -13,19 +13,19 @@ const k = a(i)`
       fill: ${({ theme: t }) => t.colors.neutral700};
     }
   }
-`, v = a.button`
+`, x = a.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`, x = a.div`
+`, S = a.div`
   display: flex;
   align-items: center;
   width: ${12 / 16}rem;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
 `, l = ({ label: t, children: p, id: s }) => {
-  const [r, m] = f(!0), d = y("subnav-list", s), c = () => {
+  const [r, m] = f(!0), d = b(s), c = () => {
     m((n) => !n);
   };
   return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(k, {
@@ -35,17 +35,17 @@ const k = a(i)`
     paddingRight: 4
   }, /* @__PURE__ */ e.createElement(E, {
     justifyContent: "space-between"
-  }, /* @__PURE__ */ e.createElement(v, {
+  }, /* @__PURE__ */ e.createElement(x, {
     onClick: c,
     "aria-expanded": r,
     "aria-controls": d
-  }, /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement(S, {
     rotated: r
   }, /* @__PURE__ */ e.createElement(h, {
     "aria-hidden": !0
   })), /* @__PURE__ */ e.createElement(i, {
     paddingLeft: 2
-  }, /* @__PURE__ */ e.createElement(b, {
+  }, /* @__PURE__ */ e.createElement(y, {
     as: "span",
     fontWeight: "semiBold",
     textColor: "neutral800"

package/dist/v2/SubNav/SubNavSection.cjs

@@ -5,4 +5,4 @@
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(q.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
+`,s=({collapsable:e,label:c,badgeLabel:o,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId(f),S=()=>{g(l=>!l)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:o?6:0},t.default.createElement(q.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),o&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},o))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(l,b)=>t.default.createElement("li",{key:b},l))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;

package/dist/v2/SubNav/SubNavSection.js

@@ -4,8 +4,8 @@ import h from "styled-components";
 import { Box as l } from "../../Box/Box.js";
 import { Badge as E } from "../../Badge/Badge.js";
 import { Stack as S } from "../../Stack/Stack.js";
-import { SubNavSectionLabel as v } from "./SubNavSectionLabel.js";
-import { useId as k } from "../../helpers/useId.js";
+import { SubNavSectionLabel as k } from "./SubNavSectionLabel.js";
+import { useId as v } from "../../helpers/useId.js";
 const C = h(l)`
   svg {
     height: ${4 / 16}rem;
@@ -14,7 +14,7 @@ const C = h(l)`
     }
   }
 `, p = ({ collapsable: r, label: s, badgeLabel: o, children: d, id: m }) => {
-  const [a, c] = f(!0), n = k("subnav-list", m), u = () => {
+  const [a, c] = f(!0), n = v(m), u = () => {
     c((i) => !i);
   };
   return /* @__PURE__ */ e.createElement(S, {
@@ -27,7 +27,7 @@ const C = h(l)`
   }, /* @__PURE__ */ e.createElement(l, {
     position: "relative",
     paddingRight: o ? 6 : 0
-  }, /* @__PURE__ */ e.createElement(v, {
+  }, /* @__PURE__ */ e.createElement(k, {
     onClick: u,
     ariaExpanded: a,
     ariaControls: n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.0",
+    "@strapi/icons": "^1.6.2",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
@@ -58,7 +58,6 @@
   },
   "scripts": {
     "develop": "vite build --watch",
-    "prebuild": "rimraf dist",
     "build": "yarn build:prod",
     "build:prod": "vite build",
     "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
@@ -74,5 +73,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "766fe3d1c3c863d5e44e7b78a10847deb6ca412e"
+  "gitHead": "5a9b4b4b34eeadcb762aa331727a4f1b944fdb3d"
 }

package/dist/helpers/genId.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});let e=0;const t=()=>++e;exports.genId=t;

package/dist/helpers/genId.js

@@ -1,5 +0,0 @@
-let e = 0;
-const t = () => ++e;
-export {
-  t as genId
-};