@strapi/design-system 1.4.0-beta.2 → 1.4.1

package/dist/v2/SimpleMenu/SimpleMenu.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.1",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -31,7 +31,7 @@
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/react": "^6.5.13",
-    "@strapi/icons": "^1.4.0-beta.2",
+    "@strapi/icons": "^1.4.1",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
@@ -51,7 +51,7 @@
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.3.1",
+    "@strapi/icons": "^1.4.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -71,5 +71,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "55fb4e9e0ce47e86387205a922e7cf936df94fc8"
+  "gitHead": "50393ea4408afcbc45386001bb5d30559b6f02da"
 }