@strapi/design-system 1.6.4 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,11 +29,12 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.4",
+    "@strapi/icons": "^1.6.6",
     "@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",
@@ -61,6 +62,7 @@
     "develop": "vite build --watch",
     "build": "yarn build:prod",
     "build:prod": "vite build",
+    "clean": "rm -rf dist node_modules",
     "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
     "format": "yarn lint --fix",
@@ -76,5 +78,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "6c4710e399055cb8831c50d3b4a02bfbcc57aa04"
+  "gitHead": "be5ac8aa421db6f7c845c29a8df3c9528882d856"
 }

package/dist/DateTimePicker/DateTimePickerProps.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),d=require("prop-types"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},u=l(o),e=l(d),a=t=>u.default.createElement("div",{...t}),r={ariaLabel:void 0,clearLabel:"clear",disabled:!1,error:void 0,hint:void 0,label:void 0,labelAction:void 0,onClear:void 0,required:!1,selectButtonTitle:"select",size:"M",step:1,value:void 0},i={ariaLabel:e.default.string,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(["S","M"]),step:e.default.number,value:e.default.instanceOf(Date)};a.defaultProps=r;a.propTypes=i;exports.DateTimePickerProps=a;exports.dateTimePickerDefaultProps=r;exports.dateTimePickerPropTypes=i;

package/dist/DateTimePicker/DateTimePickerProps.js

@@ -1,40 +0,0 @@
-import t from "react";
-import e from "prop-types";
-const i = (r) => /* @__PURE__ */ t.createElement("div", { ...r }), o = {
-  ariaLabel: void 0,
-  clearLabel: "clear",
-  disabled: !1,
-  error: void 0,
-  hint: void 0,
-  label: void 0,
-  labelAction: void 0,
-  onClear: void 0,
-  required: !1,
-  selectButtonTitle: "select",
-  size: "M",
-  step: 1,
-  value: void 0
-}, l = {
-  ariaLabel: e.string,
-  clearLabel: e.string,
-  disabled: e.bool,
-  error: e.oneOfType([e.string, e.bool]),
-  hint: e.string,
-  label: e.string,
-  labelAction: e.element,
-  name: e.string.isRequired,
-  onChange: e.func.isRequired,
-  onClear: e.func,
-  required: e.bool,
-  selectButtonTitle: e.string,
-  size: e.oneOf(["S", "M"]),
-  step: e.number,
-  value: e.instanceOf(Date)
-};
-i.defaultProps = o;
-i.propTypes = l;
-export {
-  i as DateTimePickerProps,
-  o as dateTimePickerDefaultProps,
-  l as dateTimePickerPropTypes
-};

package/dist/DateTimePicker/__tests__/parseDate.test.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("../parseDate.cjs");describe("parseDate",()=>{it("should return a date",()=>{expect(e.parseDate("2021-11-05T15:37:29.592Z")instanceof Date).toBeTruthy()}),it("should return null if the passed params has not the right format",()=>{expect(e.parseDate("test")).toBeNull()})});

package/dist/DateTimePicker/__tests__/parseDate.test.js

@@ -1,8 +0,0 @@
-import { parseDate as t } from "../parseDate.js";
-describe("parseDate", () => {
-  it("should return a date", () => {
-    expect(t("2021-11-05T15:37:29.592Z") instanceof Date).toBeTruthy();
-  }), it("should return null if the passed params has not the right format", () => {
-    expect(t("test")).toBeNull();
-  });
-});

package/dist/DateTimePicker/parseDate.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=t=>{const e=Date.parse(t);return Number.isNaN(e)?null:new Date(e)};exports.parseDate=r;

package/dist/DateTimePicker/parseDate.js

@@ -1,7 +0,0 @@
-const r = (t) => {
-  const e = Date.parse(t);
-  return Number.isNaN(e) ? null : new Date(e);
-};
-export {
-  r as parseDate
-};

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("../hooks/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 k(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=k(W),o=k(U),c=re(Y),ne=[" ","Enter","ArrowUp","ArrowDown"],oe=({children:e,clearLabel:n="Clear",customizeContent:s=p=>p.toString(),disabled:i,error:b,hint:v,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:v,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 "../hooks/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
-};