@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,164 +1,199 @@
-import t, { useRef as T, useEffect as g, useState as x, Children as $, cloneElement as F } from "react";
-import n from "prop-types";
-import h from "styled-components";
-import V from "@strapi/icons/CarretDown";
-import { Typography as M } from "../../Typography/Typography.js";
-import { Box as S } from "../../Box/Box.js";
-import { Flex as q } from "../../Flex/Flex.js";
-import { Button as O } from "../../Button/Button.js";
-import { BaseLink as W } from "../../BaseLink/BaseLink.js";
-import { POPOVER_PLACEMENTS as _, Popover as z } from "../../Popover/Popover.js";
-import { getOptionStyle as R } from "./utils.js";
-import { useId as j } from "../../helpers/useId.js";
-import { KeyboardKeys as i } from "../../helpers/keyboardKeys.js";
-const U = h.button`
+var J = Object.defineProperty;
+var h = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
+var K = (e, r, n) => r in e ? J(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, d = (e, r) => {
+  for (var n in r || (r = {}))
+    A.call(r, n) && K(e, n, r[n]);
+  if (h)
+    for (var n of h(r))
+      L.call(r, n) && K(e, n, r[n]);
+  return e;
+};
+var w = (e, r) => {
+  var n = {};
+  for (var s in e)
+    A.call(e, s) && r.indexOf(s) < 0 && (n[s] = e[s]);
+  if (e != null && h)
+    for (var s of h(e))
+      r.indexOf(s) < 0 && L.call(e, s) && (n[s] = e[s]);
+  return n;
+};
+import i, { useRef as x, useEffect as C, useState as N, Children as Q, cloneElement as X } from "react";
+import o from "prop-types";
+import k from "styled-components";
+import { useCallbackRef as $ } from "@radix-ui/react-use-callback-ref";
+import Y from "@strapi/icons/CarretDown";
+import { Typography as F } from "../../Typography/Typography.js";
+import { Box as R } from "../../Box/Box.js";
+import { Flex as Z } from "../../Flex/Flex.js";
+import { Button as V } from "../../Button/Button.js";
+import { BaseLink as ee } from "../../BaseLink/BaseLink.js";
+import { POPOVER_PLACEMENTS as ne, Popover as te } from "../../Popover/Popover.js";
+import { getOptionStyle as q } from "./utils.js";
+import { useId as oe } from "../../helpers/useId.js";
+import { KeyboardKeys as c } from "../../helpers/keyboardKeys.js";
+const re = k.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${R}
-`, G = h(W)`
+  ${q}
+`, se = k(ee)`
   text-decoration: none;
-  ${R}
-`, H = h.span`
+  ${q}
+`, ie = k.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, J = h(O)`
-  padding: ${({ theme: r }) => `${r.spaces[1]} ${r.spaces[3]}`};
-`, b = ({ as: r, children: u, onClick: m, isFocused: a, isLink: f, ...d }) => {
-  const c = T();
-  g(() => {
-    a && c.current && c.current.focus();
-  }, [a]);
-  const y = {
-    tabIndex: a ? 0 : -1,
-    ref: c,
-    role: "menuitem",
-    ...d
-  }, P = (s) => {
-    (s.key === i.SPACE || s.key === i.ENTER) && m();
+`, ae = k(V)`
+  padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
+`, W = (b) => {
+  var y = b, { as: e, children: r, onClick: n, isFocused: s, isLink: D } = y, I = w(y, ["as", "children", "onClick", "isFocused", "isLink"]);
+  const p = x();
+  C(() => {
+    s && p.current && p.current.focus();
+  }, [s]);
+  const O = d({
+    tabIndex: s ? 0 : -1,
+    ref: p,
+    role: "menuitem"
+  }, I), E = (l) => {
+    (l.key === c.SPACE || l.key === c.ENTER) && n();
   };
-  return f ? /* @__PURE__ */ t.createElement(G, {
-    as: r,
-    ...y
-  }, /* @__PURE__ */ t.createElement(S, {
+  return D ? /* @__PURE__ */ i.createElement(se, d({
+    as: e
+  }, O), /* @__PURE__ */ i.createElement(R, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(M, null, u))) : /* @__PURE__ */ t.createElement(U, {
-    onKeyDown: P,
-    onMouseDown: m,
-    type: "button",
-    ...y
-  }, /* @__PURE__ */ t.createElement(S, {
+  }, /* @__PURE__ */ i.createElement(F, null, r))) : /* @__PURE__ */ i.createElement(re, d({
+    onKeyDown: E,
+    onMouseDown: n,
+    type: "button"
+  }, O), /* @__PURE__ */ i.createElement(R, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(M, null, u)));
+  }, /* @__PURE__ */ i.createElement(F, null, r)));
 };
-b.defaultProps = {
-  onClick: () => {
+W.defaultProps = {
+  as: void 0,
+  onClick() {
   },
   isFocused: !1,
   isLink: !1
 };
-b.propTypes = {
-  as: n.elementType,
-  children: n.node.isRequired,
-  isFocused: n.bool,
-  isLink: n.bool,
-  onClick: n.func
+W.propTypes = {
+  as: o.elementType,
+  children: o.node.isRequired,
+  isFocused: o.bool,
+  isLink: o.bool,
+  onClick: o.func
 };
-const k = ({
-  label: r,
-  children: u,
-  id: m,
-  as: a,
-  onOpen: f = () => {
-  },
-  onClose: d = () => {
-  },
-  size: c,
-  popoverPlacement: y,
-  ...P
-}) => {
-  const s = T(), w = j("simplemenu", m), D = T(!1), [l, p] = x(!1), [C, I] = x(0), E = $.toArray(u), B = a || (c === "S" ? J : O);
-  g(() => {
-    if (["string", "number"].includes(typeof r)) {
-      const e = E.findIndex((o) => o.props.children === r);
-      e !== -1 && I(e);
+const P = (O) => {
+  var E = O, {
+    label: e,
+    children: r,
+    id: n,
+    as: s,
+    onOpen: D = () => {
+    },
+    onClose: I = () => {
+    },
+    size: b,
+    popoverPlacement: y
+  } = E, p = w(E, [
+    "label",
+    "children",
+    "id",
+    "as",
+    "onOpen",
+    "onClose",
+    "size",
+    "popoverPlacement"
+  ]);
+  const l = x(), v = oe("simplemenu", n), u = x(!1), [m, f] = N(!1), [T, S] = N(0), g = Q.toArray(r), _ = s || (b === "S" ? ae : V);
+  C(() => {
+    if (["string", "number"].includes(typeof e)) {
+      const t = g.findIndex((a) => a.props.children === e);
+      t !== -1 && S(t);
     }
-  }, [r]), g(() => {
-    D?.current ? l && typeof f == "function" ? f() : typeof d == "function" && d() : D.current = !0;
-  }, [D, l]), g(() => {
-    t.isValidElement(r) && C == -1 && s.current.focus();
-  }, [r, C]);
-  const v = (e) => {
-    l && (e.key === i.ESCAPE && (e.stopPropagation(), p(!1), s.current.focus()), e.key === i.DOWN && I((o) => o === E.length - 1 ? 0 : o + 1), e.key === i.UP && I((o) => o === 0 ? E.length - 1 : o - 1));
-  }, K = (e) => {
-    (e.key === i.ENTER || e.key === i.SPACE) && p((o) => !o);
-  }, A = (e) => {
-    e.preventDefault(), e.currentTarget.contains(e.relatedTarget) || p(!1);
-  }, L = (e) => {
-    e.preventDefault(), p((o) => !o);
-  }, N = E.map((e, o) => /* @__PURE__ */ t.createElement(q, {
+  }, [e]);
+  const B = $(D), M = $(I);
+  C(() => {
+    u != null && u.current ? m ? B() : M() : u.current = !0;
+  }, [u, m, B, M]), C(() => {
+    i.isValidElement(e) && T === -1 && l.current.focus();
+  }, [e, T]);
+  const z = (t) => {
+    m && (t.key === c.ESCAPE && (t.stopPropagation(), f(!1), l.current.focus()), t.key === c.DOWN && S((a) => a === g.length - 1 ? 0 : a + 1), t.key === c.UP && S((a) => a === 0 ? g.length - 1 : a - 1));
+  }, j = (t) => {
+    (t.key === c.ENTER || t.key === c.SPACE) && f((a) => !a);
+  }, U = (t) => {
+    t.preventDefault(), t.currentTarget.contains(t.relatedTarget) || f(!1);
+  }, G = (t) => {
+    t.preventDefault(), f((a) => !a);
+  }, H = g.map((t, a) => /* @__PURE__ */ i.createElement(Z, {
     as: "li",
-    key: o,
+    key: a,
     justifyContent: "center",
     role: "menuitem"
-  }, F(e, {
-    onClick: () => {
-      e.props.onClick(), p(!1), s.current.focus();
+  }, X(t, {
+    onClick() {
+      t.props.onClick(), f(!1), l.current.focus();
     },
-    isFocused: C === o
+    isFocused: T === a
   })));
-  return /* @__PURE__ */ t.createElement("div", {
-    onKeyDown: v
-  }, /* @__PURE__ */ t.createElement(B, {
-    label: t.isValidElement(r) ? null : r,
+  return /* @__PURE__ */ i.createElement("div", {
+    onKeyDown: z
+  }, /* @__PURE__ */ i.createElement(_, d({
+    label: i.isValidElement(e) ? null : e,
     "aria-haspopup": !0,
-    "aria-expanded": l,
-    "aria-controls": w,
-    onKeyDown: K,
-    onMouseDown: L,
-    ref: s,
+    "aria-expanded": m,
+    "aria-controls": v,
+    onKeyDown: j,
+    onMouseDown: G,
+    ref: l,
     type: "button",
     variant: "ghost",
-    endIcon: /* @__PURE__ */ t.createElement(H, null, /* @__PURE__ */ t.createElement(V, {
+    endIcon: /* @__PURE__ */ i.createElement(ie, null, /* @__PURE__ */ i.createElement(Y, {
       "aria-hidden": !0
-    })),
-    ...P
-  }, r), l && /* @__PURE__ */ t.createElement(z, {
-    onBlur: A,
+    }))
+  }, p), e), m && /* @__PURE__ */ i.createElement(te, {
+    onBlur: U,
     placement: y,
-    source: s,
+    source: l,
     spacing: 4
-  }, /* @__PURE__ */ t.createElement(S, {
+  }, /* @__PURE__ */ i.createElement(R, {
     role: "menu",
     as: "ul",
     padding: 1,
-    id: w
-  }, N)));
+    id: v
+  }, H)));
 };
-k.defaultProps = {
+P.defaultProps = {
   as: void 0
 };
-k.displayName = "SimpleMenu";
-k.defaultProps = {
+P.displayName = "SimpleMenu";
+P.defaultProps = {
+  id: void 0,
+  onClose() {
+  },
+  onOpen() {
+  },
   popoverPlacement: "bottom-start",
   size: "M"
 };
-k.propTypes = {
-  as: n.any,
-  children: n.oneOfType([n.arrayOf(n.node), n.node]).isRequired,
-  id: n.string,
-  label: n.oneOfType([n.string, n.number, n.element]).isRequired,
-  onClose: n.func,
-  onOpen: n.func,
-  popoverPlacement: n.oneOf(_),
-  size: n.oneOf(["S", "M"])
+P.propTypes = {
+  as: o.any,
+  children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired,
+  id: o.string,
+  label: o.oneOfType([o.string, o.number, o.element]).isRequired,
+  onClose: o.func,
+  onOpen: o.func,
+  popoverPlacement: o.oneOf(ne),
+  size: o.oneOf(["S", "M"])
 };
 export {
-  b as MenuItem,
-  k as SimpleMenu
+  W as MenuItem,
+  P as SimpleMenu
 };

package/dist/v2/SubNav/SubNav.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("styled-components"),u=require("prop-types"),d=require("../../Grid/Grid.cjs");require("../../Grid/GridItem.cjs");const t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(s),c=t(i),n=t(u),r=`${232/16}rem`,p=c.default(d.Grid)`
-  width: ${r};
+"use strict";var b=Object.defineProperty;var a=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var i=(e,t,r)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))u.call(t,r)&&i(e,r,t[r]);if(a)for(var r of a(t))d.call(t,r)&&i(e,r,t[r]);return e};var c=(e,t)=>{var r={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&d.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("styled-components"),v=require("prop-types"),_=require("../../Grid/Grid.cjs");require("../../Grid/GridItem.cjs");const s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},g=s(f),h=s(y),q=s(v),n=`${232/16}rem`,G=h.default(_.Grid)`
+  width: ${n};
   background: ${({theme:e})=>e.colors.neutral100};
   position: sticky;
   top: 0;
@@ -7,4 +7,4 @@
   overflow-y: auto;
   border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
   z-index: 1;
-`,o=({ariaLabel:e,...a})=>l.default.createElement(p,{"aria-label":e,as:"nav",...a});o.propTypes={ariaLabel:n.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;
+`,p=r=>{var o=r,{ariaLabel:e}=o,t=c(o,["ariaLabel"]);return g.default.createElement(G,l({"aria-label":e,as:"nav"},t))};p.propTypes={ariaLabel:q.default.string.isRequired};exports.SubNav=p;exports.subNavWidth=n;

package/dist/v2/SubNav/SubNav.js

@@ -1,10 +1,30 @@
-import t from "react";
-import e from "styled-components";
-import i from "prop-types";
-import { Grid as a } from "../../Grid/Grid.js";
+var m = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
+var a = (r, o, t) => o in r ? m(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, l = (r, o) => {
+  for (var t in o || (o = {}))
+    p.call(o, t) && a(r, t, o[t]);
+  if (i)
+    for (var t of i(o))
+      s.call(o, t) && a(r, t, o[t]);
+  return r;
+};
+var n = (r, o) => {
+  var t = {};
+  for (var e in r)
+    p.call(r, e) && o.indexOf(e) < 0 && (t[e] = r[e]);
+  if (r != null && i)
+    for (var e of i(r))
+      o.indexOf(e) < 0 && s.call(r, e) && (t[e] = r[e]);
+  return t;
+};
+import d from "react";
+import u from "styled-components";
+import c from "prop-types";
+import { Grid as b } from "../../Grid/Grid.js";
 import "../../Grid/GridItem.js";
-const p = `${232 / 16}rem`, s = e(a)`
-  width: ${p};
+const f = `${232 / 16}rem`, h = u(b)`
+  width: ${f};
   background: ${({ theme: r }) => r.colors.neutral100};
   position: sticky;
   top: 0;
@@ -12,15 +32,17 @@ const p = `${232 / 16}rem`, s = e(a)`
   overflow-y: auto;
   border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
   z-index: 1;
-`, l = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t.createElement(s, {
-  "aria-label": r,
-  as: "nav",
-  ...o
-});
-l.propTypes = {
-  ariaLabel: i.string.isRequired
+`, v = (t) => {
+  var e = t, { ariaLabel: r } = e, o = n(e, ["ariaLabel"]);
+  return /* @__PURE__ */ d.createElement(h, l({
+    "aria-label": r,
+    as: "nav"
+  }, o));
+};
+v.propTypes = {
+  ariaLabel: c.string.isRequired
 };
 export {
-  l as SubNav,
-  p as subNavWidth
+  v as SubNav,
+  f as subNavWidth
 };

package/dist/v2/SubNav/SubNavHeader.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("prop-types"),_=require("styled-components"),I=require("@strapi/icons/Search"),R=require("../../Flex/Flex.cjs"),D=require("../../Typography/Typography.cjs"),P=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),F=require("../../Divider/Divider.cjs"),K=require("../../Searchbar/Searchbar.cjs"),L=require("../../Searchbar/SearchForm.cjs"),k=require("../../helpers/useId.cjs"),w=require("../../helpers/usePrevious.cjs"),O=require("../../helpers/keyboardKeys.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),r=l(C),H=l(_),M=l(I),p=H.default(F.Divider)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),_=require("prop-types"),I=require("styled-components"),R=require("@strapi/icons/Search"),D=require("../../Flex/Flex.cjs"),P=require("../../Typography/Typography.cjs"),F=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),K=require("../../Divider/Divider.cjs"),L=require("../../Searchbar/Searchbar.cjs"),k=require("../../Searchbar/SearchForm.cjs"),w=require("../../helpers/useId.cjs"),O=require("../../helpers/usePrevious.cjs"),H=require("../../helpers/keyboardKeys.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),r=l(_),M=l(I),N=l(R),g=M.default(K.Divider)`
   width: ${24/16}rem;
   background-color: ${({theme:t})=>t.colors.neutral200};
-`,i=({as:t,label:h,searchLabel:f,searchable:g,onChange:b,value:y,onClear:m,onSubmit:S,id:v})=>{const[n,u]=o.useState(!1),B=w.usePrevious(n),q=k.useId("subnav-searchbar-clear",v),c=o.useRef(),d=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),B&&!n&&d.current&&d.current.focus()},[n]);const E=()=>{u(a=>!a)},j=a=>{m(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&u(!1)},x=a=>{a.key===O.KeyboardKeys.ESCAPE&&u(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:y,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:S,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(p,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(R.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},h),g&&e.default.createElement(P.IconButton,{ref:d,onClick:E,label:f,icon:e.default.createElement(M.default,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(p,null)))};i.defaultProps={as:"h2",searchable:!1,onChange:()=>{},onClear:()=>{},onSubmit:()=>{},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;
+`,i=({as:t,label:b,searchLabel:f,searchable:y,onChange:m,value:S,onClear:v,onSubmit:B,id:q})=>{const[n,u]=o.useState(!1),p=O.usePrevious(n),E=w.useId("subnav-searchbar-clear",q),c=o.useRef(),d=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&d.current&&d.current.focus()},[n,p]);const j=()=>{u(a=>!a)},T=a=>{v(a),c.current.focus()},x=a=>{var h;((h=a.relatedTarget)==null?void 0:h.id)!==E&&u(!1)},C=a=>{a.key===H.KeyboardKeys.ESCAPE&&u(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(k.SearchForm,null,e.default.createElement(L.Searchbar,{name:"searchbar",value:S,onChange:m,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:C,ref:c,onBlur:x,onClear:T,onSubmit:B,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(g,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(D.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(P.Typography,{variant:"beta",as:t},b),y&&e.default.createElement(F.IconButton,{ref:d,onClick:j,label:f,icon:e.default.createElement(N.default,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(g,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;

package/dist/v2/SubNav/SubNavHeader.js

@@ -1,88 +1,89 @@
-import e, { useState as L, useRef as m, useEffect as w } from "react";
+import e, { useState as w, useRef as d, useEffect as x } from "react";
 import r from "prop-types";
-import x from "styled-components";
-import D from "@strapi/icons/Search";
-import { Flex as I } from "../../Flex/Flex.js";
-import { Typography as K } from "../../Typography/Typography.js";
-import { IconButton as P } from "../../IconButton/IconButton.js";
+import D from "styled-components";
+import I from "@strapi/icons/Search";
+import { Flex as K } from "../../Flex/Flex.js";
+import { Typography as P } from "../../Typography/Typography.js";
+import { IconButton as k } from "../../IconButton/IconButton.js";
 import { Box as n } from "../../Box/Box.js";
-import { Divider as k } from "../../Divider/Divider.js";
-import { Searchbar as O } from "../../Searchbar/Searchbar.js";
-import { SearchForm as F } from "../../Searchbar/SearchForm.js";
-import { useId as _ } from "../../helpers/useId.js";
-import { usePrevious as $ } from "../../helpers/usePrevious.js";
-import { KeyboardKeys as j } from "../../helpers/keyboardKeys.js";
-const p = x(k)`
+import { Divider as O } from "../../Divider/Divider.js";
+import { Searchbar as F } from "../../Searchbar/Searchbar.js";
+import { SearchForm as _ } from "../../Searchbar/SearchForm.js";
+import { useId as $ } from "../../helpers/useId.js";
+import { usePrevious as j } from "../../helpers/usePrevious.js";
+import { KeyboardKeys as q } from "../../helpers/keyboardKeys.js";
+const u = D(O)`
   width: ${24 / 16}rem;
   background-color: ${({ theme: l }) => l.colors.neutral200};
-`, d = ({ as: l, label: u, searchLabel: s, searchable: f, onChange: g, value: h, onClear: b, onSubmit: E, id: S }) => {
-  const [a, c] = L(!1), y = $(a), C = _("subnav-searchbar-clear", S), o = m(), i = m();
-  w(() => {
-    a && o.current && o.current.focus(), y && !a && i.current && i.current.focus();
-  }, [a]);
-  const v = () => {
+`, f = ({ as: l, label: g, searchLabel: s, searchable: h, onChange: b, value: E, onClear: S, onSubmit: y, id: C }) => {
+  const [a, c] = w(!1), m = j(a), v = $("subnav-searchbar-clear", C), o = d(), i = d();
+  x(() => {
+    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
+  }, [a, m]);
+  const B = () => {
     c((t) => !t);
-  }, B = (t) => {
-    b(t), o.current.focus();
   }, T = (t) => {
-    t.relatedTarget?.id !== C && c(!1);
+    S(t), o.current.focus();
   }, R = (t) => {
-    t.key === j.ESCAPE && c(!1);
+    var p;
+    ((p = t.relatedTarget) == null ? void 0 : p.id) !== v && c(!1);
+  }, L = (t) => {
+    t.key === q.ESCAPE && c(!1);
   };
   return a ? /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 4,
     paddingTop: 5,
     paddingBottom: 2,
     paddingRight: 4
-  }, /* @__PURE__ */ e.createElement(F, null, /* @__PURE__ */ e.createElement(O, {
+  }, /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(F, {
     name: "searchbar",
-    value: h,
-    onChange: g,
+    value: E,
+    onChange: b,
     placeholder: "e.g: strapi-plugin-abcd",
-    onKeyDown: R,
+    onKeyDown: L,
     ref: o,
-    onBlur: T,
-    onClear: B,
-    onSubmit: E,
+    onBlur: R,
+    onClear: T,
+    onSubmit: y,
     clearLabel: "Clear",
     size: "S"
   }, s)), /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 2,
     paddingTop: 4
-  }, /* @__PURE__ */ e.createElement(p, null))) : /* @__PURE__ */ e.createElement(n, {
+  }, /* @__PURE__ */ e.createElement(u, null))) : /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 6,
     paddingTop: 6,
     paddingBottom: 2,
     paddingRight: 4
-  }, /* @__PURE__ */ e.createElement(I, {
+  }, /* @__PURE__ */ e.createElement(K, {
     justifyContent: "space-between",
     alignItems: "flex-start"
-  }, /* @__PURE__ */ e.createElement(K, {
+  }, /* @__PURE__ */ e.createElement(P, {
     variant: "beta",
     as: l
-  }, u), f && /* @__PURE__ */ e.createElement(P, {
+  }, g), h && /* @__PURE__ */ e.createElement(k, {
     ref: i,
-    onClick: v,
+    onClick: B,
     label: s,
-    icon: /* @__PURE__ */ e.createElement(D, null)
+    icon: /* @__PURE__ */ e.createElement(I, null)
   })), /* @__PURE__ */ e.createElement(n, {
     paddingTop: 4
-  }, /* @__PURE__ */ e.createElement(p, null)));
+  }, /* @__PURE__ */ e.createElement(u, null)));
 };
-d.defaultProps = {
+f.defaultProps = {
   as: "h2",
   searchable: !1,
-  onChange: () => {
+  onChange() {
   },
-  onClear: () => {
+  onClear() {
   },
-  onSubmit: () => {
+  onSubmit() {
   },
   value: "",
   searchLabel: "",
   id: void 0
 };
-d.propTypes = {
+f.propTypes = {
   as: r.string,
   id: r.string,
   label: r.string.isRequired,
@@ -94,5 +95,5 @@ d.propTypes = {
   value: r.string
 };
 export {
-  d as SubNavHeader
+  f as SubNavHeader
 };

package/dist/v2/SubNav/SubNavLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/Dot"),n=require("../../Box/Box.cjs"),c=require("../../Typography/Typography.cjs"),i=require("../../Flex/Flex.cjs"),B=require("../../BaseLink/BaseLink.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(m),l=a(b),s=a(h),$=a(x),v=s.default(n.Box)`
+"use strict";var L=Object.defineProperty;var n=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,t,l)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,g=(e,t)=>{for(var l in t||(t={}))f.call(t,l)&&p(e,l,t[l]);if(n)for(var l of n(t))y.call(t,l)&&p(e,l,t[l]);return e};var m=(e,t)=>{var l={};for(var o in e)f.call(e,o)&&t.indexOf(o)<0&&(l[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&y.call(e,o)&&(l[o]=e[o]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),_=require("prop-types"),k=require("styled-components"),S=require("@strapi/icons/Dot"),u=require("../../Box/Box.cjs"),x=require("../../Typography/Typography.cjs"),b=require("../../Flex/Flex.cjs"),q=require("../../BaseLink/BaseLink.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=s(T),a=s(_),c=s(k),E=s(S),j=c.default(u.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -15,7 +15,7 @@
       svg > * {
         fill: ${e.colors.primary700};
       }
-      ${c.Typography} {
+      ${x.Typography} {
         color: ${e.colors.primary700};
         font-weight: 500;
       }
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,u=s.default($.default)`
+`,h=c.default(E.default)`
   width: ${12/16}rem;
   height: ${4/16}rem;
   * {
-    fill: ${({theme:e,$active:o})=>o?e.colors.primary600:e.colors.neutral600};
+    fill: ${({theme:e,$active:t})=>t?e.colors.primary600:e.colors.neutral600};
   }
-`,k=s.default.div`
+`,w=c.default.div`
   svg {
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,r=t.default.forwardRef(({children:e,icon:o,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>t.default.createElement(v,{as:p,icon:o,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y},t.default.createElement(i.Flex,null,o?t.default.createElement(k,null,o):t.default.createElement(u,null),t.default.createElement(n.Box,{paddingLeft:2},t.default.createElement(c.Typography,{as:"span"},e))),d&&t.default.createElement(n.Box,{as:i.Flex,paddingRight:4},t.default.createElement(u,{$active:!0}))));r.displayName="SubNavLink";r.defaultProps={as:B.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};r.propTypes={as:l.default.elementType,children:l.default.node,icon:l.default.element,isSubSectionChild:l.default.bool,link:l.default.element,withBullet:l.default.bool};exports.SubNavLink=r;
+`,i=r.default.forwardRef((F,v)=>{var d=F,{children:e,icon:t,withBullet:l,as:o,isSubSectionChild:B}=d,$=m(d,["children","icon","withBullet","as","isSubSectionChild"]);return r.default.createElement(j,g({as:o,icon:t,background:"neutral100",paddingLeft:B?9:7,paddingBottom:2,paddingTop:2,ref:v},$),r.default.createElement(b.Flex,null,t?r.default.createElement(w,null,t):r.default.createElement(h,null),r.default.createElement(u.Box,{paddingLeft:2},r.default.createElement(x.Typography,{as:"span"},e))),l&&r.default.createElement(u.Box,{as:b.Flex,paddingRight:4},r.default.createElement(h,{$active:!0})))});i.displayName="SubNavLink";i.defaultProps={as:q.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};i.propTypes={as:a.default.elementType,children:a.default.node.isRequired,icon:a.default.element,isSubSectionChild:a.default.bool,withBullet:a.default.bool};exports.SubNavLink=i;