@strapi/design-system 1.6.5 → 1.6.6

package/dist/TextInput/TextInput.js

@@ -1,51 +1,52 @@
-import r, { useRef as g, useImperativeHandle as E } from "react";
-import e from "prop-types";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as c, useRef as u, useImperativeHandle as h } from "react";
 import { Field as I } from "../Field/Field.js";
-import { FieldLabel as T } from "../Field/FieldLabel.js";
-import { FieldInput as y } from "../Field/FieldInput.js";
-import { FieldHint as A } from "../Field/FieldHint.js";
-import { FieldError as F } from "../Field/FieldError.js";
+import { FieldLabel as x } from "../Field/FieldLabel.js";
+import { FieldInput as F } from "../Field/FieldInput.js";
+import { FieldHint as T } from "../Field/FieldHint.js";
+import { FieldError as g } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as h } from "../Flex/Flex.js";
-import { useId as x } from "../hooks/useId.js";
-import { sizes as O } from "../themes/sizes.js";
-const o = r.forwardRef(
-  ({ size: a, startAction: m, endAction: d, name: p, hint: s, error: c, label: t, labelAction: f, id: u, required: b, ...i }, n) => {
-    const v = x(u), l = g(null);
-    if (!t && !i["aria-label"])
-      throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-    return E(n, () => ({
-      inputWrapperRef: l
-    })), /* @__PURE__ */ r.createElement("div", { ref: l }, /* @__PURE__ */ r.createElement(I, { name: p, hint: s, error: c, id: v, required: b }, /* @__PURE__ */ r.createElement(h, { direction: "column", alignItems: "stretch", gap: 1 }, t && /* @__PURE__ */ r.createElement(T, { action: f }, t), /* @__PURE__ */ r.createElement(y, { size: a, ref: n, startAction: m, endAction: d, ...i }), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(F, null))));
-  }
-);
-o.displayName = "TextInput";
-o.defaultProps = {
-  "aria-label": void 0,
-  label: void 0,
-  labelAction: void 0,
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  startAction: void 0,
-  size: "M",
-  endAction: void 0,
-  required: !1
-};
-o.propTypes = {
-  "aria-label": e.string,
-  endAction: e.element,
-  error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.bool, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.element,
-  name: e.string.isRequired,
-  required: e.bool,
-  size: e.oneOf(Object.keys(O.input)),
-  startAction: e.element
-};
+import { Flex as w } from "../Flex/Flex.js";
+import { useId as R } from "../hooks/useId.js";
+const b = c(({
+  name: t,
+  hint: n,
+  error: m,
+  label: e,
+  labelAction: p,
+  id: d,
+  required: a,
+  ...i
+}, l) => {
+  const f = R(d), o = u(null);
+  if (!e && !i["aria-label"])
+    throw new Error('The TextInput component needs a "label" or an "aria-label" props');
+  return h(l, () => ({
+    inputWrapperRef: o
+  })), r("div", {
+    ref: o,
+    children: r(I, {
+      name: t,
+      hint: n,
+      error: m,
+      id: f,
+      required: a,
+      children: s(w, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 1,
+        children: [e && r(x, {
+          action: p,
+          children: e
+        }), r(F, {
+          ...i
+        }), r(T, {}), r(g, {})]
+      })
+    })
+  });
+});
+b.displayName = "TextInput";
 export {
-  o as TextInput
+  b as TextInput
 };

package/dist/TimePicker/TimePicker.cjs

@@ -1,12 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("react"),P=require("@strapi/icons"),z=require("prop-types"),E=require("styled-components"),R=require("../hooks/useId.cjs"),L=require("../Select/Select.cjs"),w=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const B=require("../themes/sizes.cjs"),d=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},a=d(I),e=d(z),x=d(E),D=x.default.div`
-  display: flex;
-  align-items: center;
-  svg {
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),q=require("@strapi/icons"),x=require("styled-components"),f=require("../Flex/Flex.cjs"),g=require("../hooks/useId.cjs"),M=require("../Select/Select.cjs"),b=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const $=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},y=$(x),I=({id:t,value:i,step:a=15,...d})=>{const p=g.useId(t),h=24,s=[];let c=0;for(let e=0;e<h;e++)for(c=0;c<60;)s.push(`${e<10?`0${e}`:e}:${c<10?`0${c}`:c}`),c+=a;const j=()=>{const[e,u]=i?.split(":")??[],m=s.reduce((r,o)=>{const[l]=o.split(":");return Math.abs(l-e)<Math.abs(r-e)?l:r},s[0].split(":")[0]),S=s.reduce((r,o)=>{const l=o.split(":")[1];return Math.abs(l-u)<Math.abs(r-u)?l:r},s[0].split(":")[1]);return`${m}:${S}`};return n.jsx(M.Select,{id:p,placeholder:"--:--",value:i?j():null,startIcon:n.jsx(v,{children:n.jsx(q.Clock,{})}),...d,children:s.map(e=>n.jsx(b.Option,{value:e,children:e},e))})},v=y.default(f.Flex)`
+  & > svg {
     height: 1rem;
     width: 1rem;
   }
 
-  svg path {
-    fill: ${({theme:l})=>l.colors.neutral500};
+  & > svg path {
+    fill: ${({theme:t})=>t.colors.neutral500};
   }
-`,c=({disabled:l,error:p,hint:b,id:m,onClear:y,onChange:h,value:n,clearLabel:g,label:q,required:v,selectButtonTitle:O,step:T,size:S,...j})=>{const M=R.useId(m),_=24,s=[];let u=0;for(let t=0;t<_;t++)for(u=0;u<60;)s.push(`${t<10?`0${t}`:t}:${u<10?`0${u}`:u}`),u+=T;const $=()=>{const t=n.split(":")[0],f=n.split(":")[1],k=s.reduce((r,i)=>{const o=i.split(":")[0];return Math.abs(o-t)<Math.abs(r-t)?o:r},s[0].split(":")[0]),C=s.reduce((r,i)=>{const o=i.split(":")[1];return Math.abs(o-f)<Math.abs(r-f)?o:r},s[0].split(":")[1]);return`${k}:${C}`};return a.default.createElement(L.Select,{id:M,label:q,placeholder:"--:--",hint:b,onClear:y,clearLabel:g,error:p,value:n?$():null,size:S,onChange:h,disabled:l,required:v,selectButtonTitle:O,startIcon:a.default.createElement(D,null,a.default.createElement(P.Clock,null)),...j},s.map(t=>a.default.createElement(w.Option,{value:t,key:t},t)))};c.defaultProps={disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,onClear:void 0,required:!1,size:"M",selectButtonTitle:void 0,step:15,value:void 0};c.propTypes={clearLabel:e.default.string.isRequired,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(B.sizes.input)),step:e.default.number,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number])};exports.TimePicker=c;
+`;exports.TimePicker=I;

package/dist/TimePicker/TimePicker.js

@@ -1,110 +1,58 @@
-import n from "react";
-import { Clock as z } from "@strapi/icons";
-import e from "prop-types";
-import P from "styled-components";
-import { useId as R } from "../hooks/useId.js";
-import { Select as w } from "../Select/Select.js";
-import { Option as x } from "../Select/Option.js";
+import { jsx as i } from "react/jsx-runtime";
+import { Clock as $ } from "@strapi/icons";
+import g from "styled-components";
+import { Flex as M } from "../Flex/Flex.js";
+import { useId as b } from "../hooks/useId.js";
+import { Select as C } from "../Select/Select.js";
+import { Option as I } from "../Select/Option.js";
 import "../Select/OptGroup.js";
 import "../Select/MultiSelectNested.js";
 import "../Select/SelectList.js";
-import { sizes as B } from "../themes/sizes.js";
-const _ = P.div`
-  display: flex;
-  align-items: center;
-  svg {
+const S = ({
+  id: l,
+  value: m,
+  step: u = 15,
+  ...p
+}) => {
+  const a = b(l), h = 24, o = [];
+  let r = 0;
+  for (let t = 0; t < h; t++)
+    for (r = 0; r < 60; )
+      o.push(`${t < 10 ? `0${t}` : t}:${r < 10 ? `0${r}` : r}`), r += u;
+  return i(C, {
+    id: a,
+    placeholder: "--:--",
+    value: m ? (() => {
+      const [t, c] = m?.split(":") ?? [], d = o.reduce((e, n) => {
+        const [s] = n.split(":");
+        return Math.abs(s - t) < Math.abs(e - t) ? s : e;
+      }, o[0].split(":")[0]), f = o.reduce((e, n) => {
+        const s = n.split(":")[1];
+        return Math.abs(s - c) < Math.abs(e - c) ? s : e;
+      }, o[0].split(":")[1]);
+      return `${d}:${f}`;
+    })() : null,
+    startIcon: i(v, {
+      children: i($, {})
+    }),
+    ...p,
+    children: o.map((t) => i(I, {
+      value: t,
+      children: t
+    }, t))
+  });
+}, v = g(M)`
+  & > svg {
     height: 1rem;
     width: 1rem;
   }
 
-  svg path {
-    fill: ${({ theme: l }) => l.colors.neutral500};
+  & > svg path {
+    fill: ${({
+  theme: l
+}) => l.colors.neutral500};
   }
-`, m = ({
-  disabled: l,
-  error: c,
-  hint: d,
-  id: f,
-  onClear: b,
-  onChange: h,
-  value: a,
-  clearLabel: g,
-  label: y,
-  required: v,
-  selectButtonTitle: T,
-  step: O,
-  size: $,
-  ...C
-}) => {
-  const M = R(f), k = 24, r = [];
-  let o = 0;
-  for (let t = 0; t < k; t++)
-    for (o = 0; o < 60; )
-      r.push(`${t < 10 ? `0${t}` : t}:${o < 10 ? `0${o}` : o}`), o += O;
-  const q = () => {
-    const t = a.split(":")[0], p = a.split(":")[1], E = r.reduce((i, u) => {
-      const s = u.split(":")[0];
-      return Math.abs(s - t) < Math.abs(i - t) ? s : i;
-    }, r[0].split(":")[0]), I = r.reduce((i, u) => {
-      const s = u.split(":")[1];
-      return Math.abs(s - p) < Math.abs(i - p) ? s : i;
-    }, r[0].split(":")[1]);
-    return `${E}:${I}`;
-  };
-  return /* @__PURE__ */ n.createElement(
-    w,
-    {
-      id: M,
-      label: y,
-      placeholder: "--:--",
-      hint: d,
-      onClear: b,
-      clearLabel: g,
-      error: c,
-      value: a ? q() : null,
-      size: $,
-      onChange: h,
-      disabled: l,
-      required: v,
-      selectButtonTitle: T,
-      startIcon: /* @__PURE__ */ n.createElement(_, null, /* @__PURE__ */ n.createElement(z, null)),
-      ...C
-    },
-    r.map((t) => /* @__PURE__ */ n.createElement(x, { value: t, key: t }, t))
-  );
-};
-m.defaultProps = {
-  disabled: !1,
-  error: void 0,
-  hint: void 0,
-  id: void 0,
-  label: void 0,
-  onClear: void 0,
-  required: !1,
-  size: "M",
-  selectButtonTitle: void 0,
-  step: 15,
-  value: void 0
-};
-m.propTypes = {
-  clearLabel: e.string.isRequired,
-  disabled: e.bool,
-  error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.bool, e.node, e.arrayOf(e.node)]),
-  id: e.oneOfType([e.string, e.number]),
-  label: e.string,
-  onChange: e.func.isRequired,
-  onClear: e.func,
-  required: e.bool,
-  selectButtonTitle: e.string,
-  size: e.oneOf(Object.keys(B.input)),
-  step: e.number,
-  value: e.oneOfType([
-    e.arrayOf(e.oneOfType([e.string, e.number])),
-    e.string,
-    e.number
-  ])
-};
+`;
 export {
-  m as TimePicker
+  S as TimePicker
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "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.5",
+    "@strapi/icons": "^1.6.6",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
@@ -62,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",
@@ -77,5 +78,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "0c136e23f46fcce45a4d005c1cd99a6197ec35d1"
+  "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
-};