@strapi/design-system 0.0.0-599b75fb-test

package/dist/Combobox/Combobox.js

@@ -0,0 +1,287 @@
+import o, { useState as y, useRef as C, useEffect as _, useLayoutEffect as xe, Children as j, cloneElement as ye } from "react";
+import { Cross as Ie, CarretDown as Oe } from "@strapi/icons";
+import e from "prop-types";
+import { ComboboxOption as ke } from "./ComboboxOption.js";
+import { MainRow as Me, InputContainer as $e, ValueContainer as we, Input as Le } from "./components.js";
+import { filterOptions as q, maintainScrollVisibility as De, getActionFromKey as Re, MenuActions as b, getUpdatedIndex as R } from "./utils.js";
+import { Box as Be } from "../Box/Box.js";
+import { Field as Fe } from "../Field/Field.js";
+import { FieldLabel as Se } from "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { FieldHint as Te } from "../Field/FieldHint.js";
+import { FieldError as Ae } from "../Field/FieldError.js";
+import "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Flex as B } from "../Flex/Flex.js";
+import { KeyboardKeys as Pe } from "../helpers/keyboardKeys.js";
+import { useId as Ve } from "../hooks/useId.js";
+import { Loader as Ke } from "../Loader/Loader.js";
+import { Popover as Ne } from "../Popover/Popover.js";
+import { IconBox as He, CaretBox as Ue } from "../Select/components.js";
+import { Typography as z } from "../Typography/Typography.js";
+import { VisuallyHidden as _e } from "../VisuallyHidden/VisuallyHidden.js";
+const I = ({
+  children: s,
+  clearLabel: G,
+  creatable: h,
+  createMessage: J,
+  disabled: c,
+  error: O,
+  hasMoreItems: Q,
+  hint: $,
+  id: X,
+  label: E,
+  labelAction: Y,
+  loading: w,
+  loadingMessage: Z,
+  noOptionsMessage: ee,
+  onChange: F,
+  onClear: S,
+  onCreateOption: te,
+  onInputChange: T,
+  onLoadMore: oe,
+  placeholder: ne,
+  required: A,
+  value: d,
+  ...re
+}) => {
+  const ae = () => s.find((t) => t.props?.value.toLowerCase() === d.toLowerCase()).props?.children, [i, P] = y(0), [ie, le] = y(null), [l, V] = y(s), [u, se] = y(!1), [r, k] = y(""), v = C(), M = C(!1), x = C(), K = C(), ce = C(), N = C(!0), a = Ve(X), pe = `${a}-label`;
+  if (!E && !re["aria-label"])
+    throw new Error('The Combobox component needs a "label" or an "aria-label" props');
+  _(() => {
+    V(q(s, r));
+  }, [r, s]), _(() => {
+    u && v.current && De(v.current);
+  }, [i, u]), xe(() => {
+    N.current && (N.current = !1);
+  }, [d]);
+  const de = u ? `${a}-${i}` : "", H = () => {
+    F(null), k("");
+  }, fe = (t) => {
+    T && T(t);
+    const n = x.current.value;
+    V(q(s, n)), P(0), le(null), r !== n && k(n), u || f(!0, !1);
+  }, ue = (t) => {
+    const { key: n } = t, p = h && r ? l.length : l.length - 1, g = Re(n, u);
+    switch (d && !r && n === Pe.BACKSPACE && H(), g) {
+      case b.Next: {
+        if (i === p) {
+          m(0);
+          break;
+        }
+        m(R(i, p, g));
+        break;
+      }
+      case b.Previous: {
+        if (i === 0) {
+          m(p);
+          break;
+        }
+        m(R(i, p, g));
+        break;
+      }
+      case b.Last:
+      case b.First: {
+        if (i === p) {
+          m(0);
+          break;
+        }
+        m(R(i, p, g));
+        break;
+      }
+      case b.CloseSelect:
+        t.preventDefault(), L(i);
+        break;
+      case b.Close:
+        t.preventDefault(), f(!1);
+        break;
+      case b.Open:
+        f(!0);
+        break;
+    }
+  }, me = (t) => {
+    if (t.preventDefault(), d && !M.current && k(""), M.current) {
+      M.current = !1;
+      return;
+    }
+    f(!1, !1);
+  }, m = (t) => {
+    P(t);
+  }, be = (t) => {
+    m(t), L(t);
+  }, U = () => {
+    M.current = !0;
+  }, L = (t) => {
+    const n = l[t];
+    if (k(""), n) {
+      F(n.props.value), f(!1);
+      return;
+    }
+    h && (te(r), f(!1));
+  }, f = (t, n = !0) => {
+    se(t), n && x.current.focus();
+  }, ge = j.toArray(l).map((t, n) => {
+    const p = i === n;
+    return ye(t, {
+      id: `${a}-${n}`,
+      "aria-selected": ie === n,
+      "aria-posinset": n + 1,
+      "aria-setsize": j.toArray(l).length,
+      ref(g) {
+        p && (v.current = g);
+      },
+      onClick: () => be(n),
+      onMouseDown: U,
+      isSelected: p
+    });
+  }), Ce = () => {
+    x.current.focus(), S && S(), H();
+  }, he = () => {
+    x.current.focus(), f(!0);
+  }, Ee = () => {
+    const t = l.findIndex((n) => n.props?.children === r);
+    return r && t === -1;
+  }, ve = (t) => {
+    t.preventDefault(), f(t, !0);
+  };
+  let D;
+  return O ? D = `${a}-error` : $ && (D = `${a}-hint`), /* @__PURE__ */ o.createElement(Fe, { hint: $, error: O, id: a, required: A }, /* @__PURE__ */ o.createElement(_e, { "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions text" }, d), /* @__PURE__ */ o.createElement(B, { direction: "column", alignItems: "stretch", gap: E || $ || O ? 1 : 0 }, E && /* @__PURE__ */ o.createElement(Se, { action: Y }, E), /* @__PURE__ */ o.createElement(Me, { ref: K, $disabled: c, hasError: O }, /* @__PURE__ */ o.createElement($e, { wrap: "wrap" }, !r && d && /* @__PURE__ */ o.createElement(we, { id: `${a}-selected-value` }, /* @__PURE__ */ o.createElement(z, null, ae())), /* @__PURE__ */ o.createElement(
+    Le,
+    {
+      "aria-activedescendant": de,
+      "aria-autocomplete": "list",
+      "aria-controls": `${a}-listbox`,
+      "aria-disabled": c,
+      "aria-expanded": u,
+      "aria-haspopup": "listbox",
+      "aria-describedby": D,
+      autoComplete: "off",
+      autoCorrect: "off",
+      id: a,
+      onBlur: c ? void 0 : me,
+      onClick: c ? void 0 : ve,
+      onInput: c ? void 0 : fe,
+      onKeyDown: c ? void 0 : ue,
+      placeholder: d ? "" : ne,
+      readOnly: c,
+      ref: x,
+      required: A,
+      role: "combobox",
+      spellCheck: "off",
+      type: "text",
+      value: r
+    }
+  )), /* @__PURE__ */ o.createElement(B, null, (d || r) && /* @__PURE__ */ o.createElement(
+    He,
+    {
+      id: `${a}-clear`,
+      "aria-label": G,
+      disabled: c,
+      paddingLeft: 3,
+      as: "button",
+      onClick: Ce,
+      type: "button"
+    },
+    /* @__PURE__ */ o.createElement(Ie, null)
+  ), /* @__PURE__ */ o.createElement(
+    Ue,
+    {
+      disabled: c,
+      paddingLeft: 3,
+      "aria-hidden": !0,
+      as: "button",
+      onClick: he,
+      tabIndex: -1,
+      type: "button"
+    },
+    /* @__PURE__ */ o.createElement(Oe, null)
+  ))), /* @__PURE__ */ o.createElement(Te, null), /* @__PURE__ */ o.createElement(Ae, null)), u && /* @__PURE__ */ o.createElement(
+    Ne,
+    {
+      id: `${a}-popover`,
+      source: K,
+      spacing: 4,
+      fullWidth: !0,
+      intersectionId: `${a}-listbox-popover-intersection`,
+      onReachEnd: Q && !w ? oe : void 0
+    },
+    /* @__PURE__ */ o.createElement(
+      "div",
+      {
+        role: "listbox",
+        ref: ce,
+        id: `${a}-listbox`,
+        "aria-labelledby": E ? pe : void 0
+      },
+      (Boolean(l.length) || h) && /* @__PURE__ */ o.createElement(o.Fragment, null, ge, Ee() && h && /* @__PURE__ */ o.createElement(
+        ke,
+        {
+          isSelected: i === l.length,
+          ref: (t) => {
+            i === l.length && (v.current = t);
+          },
+          onMouseDown: U,
+          onClick: () => L(),
+          taindex: 0
+        },
+        J(r)
+      )),
+      !l.length && !h && !w && /* @__PURE__ */ o.createElement(Be, { paddingLeft: 4, paddingRight: 4, paddingTop: 2, paddingBottom: 2, ref: v }, /* @__PURE__ */ o.createElement(z, { textColor: "neutral800" }, ee(r))),
+      w && /* @__PURE__ */ o.createElement(B, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2 }, /* @__PURE__ */ o.createElement(Ke, { small: !0 }, Z))
+    )
+  ));
+}, W = (s) => /* @__PURE__ */ o.createElement(I, { ...s, creatable: !0 });
+I.defaultProps = {
+  "aria-label": void 0,
+  clearLabel: "clear",
+  creatable: !1,
+  createMessage: (s) => `Create "${s}"`,
+  disabled: !1,
+  error: void 0,
+  hasMoreItems: !1,
+  hint: void 0,
+  id: void 0,
+  label: void 0,
+  loading: !1,
+  loadingMessage: "Loading content...",
+  noOptionsMessage: () => "No results found",
+  onClear: void 0,
+  onCreateOption: void 0,
+  onInputChange: void 0,
+  onLoadMore: void 0,
+  placeholder: "Select or enter a value",
+  value: void 0
+};
+W.defaultProps = I.defaultProps;
+I.propTypes = {
+  "aria-label": e.string,
+  children: e.oneOfType([e.arrayOf(e.node), e.node]),
+  clearLabel: e.string,
+  creatable: e.bool,
+  createMessage: e.func,
+  disabled: e.bool,
+  error: e.string,
+  hasMoreItems: e.bool,
+  id: e.string,
+  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  label: e.string,
+  labelAction: e.element,
+  loading: e.bool,
+  loadingMessage: e.string,
+  noOptionsMessage: e.func,
+  onChange: e.func.isRequired,
+  onClear: e.func,
+  onCreateOption: e.func,
+  onInputChange: e.func,
+  onLoadMore: e.func,
+  placeholder: e.string,
+  value: e.string
+};
+W.propTypes = {
+  ...I.propTypes,
+  onCreateOption: e.func.isRequired
+};
+export {
+  I as Combobox,
+  W as CreatableCombobox
+};

package/dist/Combobox/ComboboxList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("prop-types"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=r(t),o=({options:e})=>e;o.propTypes={options:s.default.array.isRequired};exports.ComboboxList=o;

package/dist/Combobox/ComboboxList.js

@@ -0,0 +1,8 @@
+import r from "prop-types";
+const p = ({ options: o }) => o;
+p.propTypes = {
+  options: r.array.isRequired
+};
+export {
+  p as ComboboxList
+};

package/dist/Combobox/ComboboxOption.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("prop-types"),i=require("./components.cjs"),s=require("../Typography/Typography.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=n(a),o=n(d),t=a.forwardRef(({isSelected:e,children:p,...u},l)=>r.default.createElement(i.OptionBox,{hasRadius:!0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,role:"option",background:"neutral0",isSelected:e,ref:l,...u},r.default.createElement(s.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},p)));t.defaultProps={isSelected:!1};t.propTypes={children:o.default.oneOfType([o.default.string,o.default.number]).isRequired,isSelected:o.default.bool};t.displayName="ComboboxOption";exports.ComboboxOption=t;

package/dist/Combobox/ComboboxOption.js

@@ -0,0 +1,31 @@
+import t, { forwardRef as a } from "react";
+import o from "prop-types";
+import { OptionBox as d } from "./components.js";
+import { Typography as m } from "../Typography/Typography.js";
+const r = a(({ isSelected: e, children: p, ...i }, n) => /* @__PURE__ */ t.createElement(
+  d,
+  {
+    hasRadius: !0,
+    paddingLeft: 4,
+    paddingRight: 4,
+    paddingTop: 2,
+    paddingBottom: 2,
+    role: "option",
+    background: "neutral0",
+    isSelected: e,
+    ref: n,
+    ...i
+  },
+  /* @__PURE__ */ t.createElement(m, { textColor: e ? "primary600" : "neutral800", fontWeight: e ? "bold" : null }, p)
+));
+r.defaultProps = {
+  isSelected: !1
+};
+r.propTypes = {
+  children: o.oneOfType([o.string, o.number]).isRequired,
+  isSelected: o.bool
+};
+r.displayName = "ComboboxOption";
+export {
+  r as ComboboxOption
+};

package/dist/Combobox/components.cjs

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),i=require("../Box/Box.cjs"),n=require("../Flex/Flex.cjs"),l=require("../themes/utils.cjs"),a=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},t=a(r),s=t.default(n.Flex)`
+  position: relative;
+  border: 1px solid ${({theme:o,hasError:e})=>e?o.colors.danger600:o.colors.neutral200};
+  padding-right: ${({theme:o})=>o.spaces[3]};
+  padding-left: ${({theme:o})=>o.spaces[3]};
+  border-radius: ${({theme:o})=>o.borderRadius};
+  background: ${({theme:o})=>o.colors.neutral0};
+
+  ${({theme:o,$disabled:e})=>e?`
+    color: ${o.colors.neutral600};
+    background: ${o.colors.neutral150};
+  `:void 0}
+
+  ${l.inputFocusStyle()}
+`,u=t.default.div`
+  padding: 1px 2px;
+  grid-area: 1 / 1 / 2 / 3;
+`,d=t.default(n.Flex)`
+  display: grid;
+  flex: 1 1 0%;
+  position: relative;
+`,c=t.default.input`
+  display: inline-grid;
+  grid-area: 1 / 1 / 2 / 3;
+  grid-template-columns: 0px min-content;
+  background: transparent;
+  min-height: ${40/16}rem;
+  border: none;
+  flex: 1;
+  font-size: ${14/16}rem;
+  color: ${({theme:o})=>o.colors.neutral800};
+  outline: none;
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+    outline-offset: 0;
+  }
+  &[aria-disabled='true'] {
+    background: inherit;
+    color: inherit;
+    cursor: not-allowed;
+  }
+`,p=t.default(i.Box)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  ${({isSelected:o,theme:e})=>o&&`background: ${e.colors.primary100};`}
+
+  &:hover {
+    background: ${({theme:o})=>o.colors.primary100};
+  }
+`;exports.Input=c;exports.InputContainer=d;exports.MainRow=s;exports.OptionBox=p;exports.ValueContainer=u;

package/dist/Combobox/components.js

@@ -0,0 +1,64 @@
+import n from "styled-components";
+import { Box as i } from "../Box/Box.js";
+import { Flex as e } from "../Flex/Flex.js";
+import { inputFocusStyle as t } from "../themes/utils.js";
+const c = n(e)`
+  position: relative;
+  border: 1px solid ${({ theme: o, hasError: r }) => r ? o.colors.danger600 : o.colors.neutral200};
+  padding-right: ${({ theme: o }) => o.spaces[3]};
+  padding-left: ${({ theme: o }) => o.spaces[3]};
+  border-radius: ${({ theme: o }) => o.borderRadius};
+  background: ${({ theme: o }) => o.colors.neutral0};
+
+  ${({ theme: o, $disabled: r }) => r ? `
+    color: ${o.colors.neutral600};
+    background: ${o.colors.neutral150};
+  ` : void 0}
+
+  ${t()}
+`, p = n.div`
+  padding: 1px 2px;
+  grid-area: 1 / 1 / 2 / 3;
+`, u = n(e)`
+  display: grid;
+  flex: 1 1 0%;
+  position: relative;
+`, g = n.input`
+  display: inline-grid;
+  grid-area: 1 / 1 / 2 / 3;
+  grid-template-columns: 0px min-content;
+  background: transparent;
+  min-height: ${40 / 16}rem;
+  border: none;
+  flex: 1;
+  font-size: ${14 / 16}rem;
+  color: ${({ theme: o }) => o.colors.neutral800};
+  outline: none;
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+    outline-offset: 0;
+  }
+  &[aria-disabled='true'] {
+    background: inherit;
+    color: inherit;
+    cursor: not-allowed;
+  }
+`, $ = n(i)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  ${({ isSelected: o, theme: r }) => o && `background: ${r.colors.primary100};`}
+
+  &:hover {
+    background: ${({ theme: o }) => o.colors.primary100};
+  }
+`;
+export {
+  g as Input,
+  u as InputContainer,
+  c as MainRow,
+  $ as OptionBox,
+  p as ValueContainer
+};

package/dist/Combobox/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./Combobox.cjs"),b=require("./ComboboxOption.cjs");exports.Combobox=o.Combobox;exports.CreatableCombobox=o.CreatableCombobox;exports.ComboboxOption=b.ComboboxOption;

package/dist/Combobox/index.js

@@ -0,0 +1,7 @@
+import { Combobox as m, CreatableCombobox as r } from "./Combobox.js";
+import { ComboboxOption as e } from "./ComboboxOption.js";
+export {
+  m as Combobox,
+  e as ComboboxOption,
+  r as CreatableCombobox
+};

package/dist/Combobox/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("compute-scroll-into-view"),r=require("../helpers/keyboardKeys.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=a(l),t={Close:"Close",CloseSelect:"CloseSelect",First:"First",Last:"Last",Next:"Next",Open:"Open",PageDown:"PageDown",PageUp:"PageUp",Previous:"Previous",Select:"Select",Space:"Space",Type:"Type"},u={Close:"Close",First:"First",Last:"Last",Next:"Next",Open:"Open",Previous:"Previous",Select:"Select",UpLevel:"UpLevel"};function d(e=[],o=null,s=[]){const n=String(o??"").toLowerCase();return n?e.filter(i=>i.props.children.toString().toLowerCase().includes(n)&&s.indexOf(i)<0):e}function p(e,o){if(!o&&e===r.KeyboardKeys.DOWN)return t.Open;if(e===r.KeyboardKeys.DOWN)return t.Next;if(e===r.KeyboardKeys.UP)return t.Previous;if(e===r.KeyboardKeys.HOME)return t.First;if(e===r.KeyboardKeys.END)return t.Last;if(e===r.KeyboardKeys.ESCAPE)return t.Close;if(e===r.KeyboardKeys.ENTER)return t.CloseSelect;if(e===r.KeyboardKeys.BACKSPACE||e===r.KeyboardKeys.CLEAR||e.length===1)return t.Type}function f(e,o,s){switch(s){case t.First:return 0;case t.Last:return o;case t.Previous:return Math.max(0,e-1);case t.Next:return Math.min(o,e+1);default:return e}}function y(e){c.default(e,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:s,top:n,left:i})=>{s.scrollTop=n,s.scrollLeft=i})}exports.MenuActions=t;exports.TreeActions=u;exports.filterOptions=d;exports.getActionFromKey=p;exports.getUpdatedIndex=f;exports.maintainScrollVisibility=y;

package/dist/Combobox/utils.js

@@ -0,0 +1,78 @@
+import l from "compute-scroll-into-view";
+import { KeyboardKeys as r } from "../helpers/keyboardKeys.js";
+const t = {
+  Close: "Close",
+  CloseSelect: "CloseSelect",
+  First: "First",
+  Last: "Last",
+  Next: "Next",
+  Open: "Open",
+  PageDown: "PageDown",
+  PageUp: "PageUp",
+  Previous: "Previous",
+  Select: "Select",
+  Space: "Space",
+  Type: "Type"
+}, f = {
+  Close: "Close",
+  First: "First",
+  Last: "Last",
+  Next: "Next",
+  Open: "Open",
+  Previous: "Previous",
+  Select: "Select",
+  UpLevel: "UpLevel"
+};
+function d(e = [], n = null, i = []) {
+  const o = String(n ?? "").toLowerCase();
+  return o ? e.filter((s) => s.props.children.toString().toLowerCase().includes(o) && i.indexOf(s) < 0) : e;
+}
+function C(e, n) {
+  if (!n && e === r.DOWN)
+    return t.Open;
+  if (e === r.DOWN)
+    return t.Next;
+  if (e === r.UP)
+    return t.Previous;
+  if (e === r.HOME)
+    return t.First;
+  if (e === r.END)
+    return t.Last;
+  if (e === r.ESCAPE)
+    return t.Close;
+  if (e === r.ENTER)
+    return t.CloseSelect;
+  if (e === r.BACKSPACE || e === r.CLEAR || e.length === 1)
+    return t.Type;
+}
+function S(e, n, i) {
+  switch (i) {
+    case t.First:
+      return 0;
+    case t.Last:
+      return n;
+    case t.Previous:
+      return Math.max(0, e - 1);
+    case t.Next:
+      return Math.min(n, e + 1);
+    default:
+      return e;
+  }
+}
+function P(e) {
+  l(e, {
+    scrollMode: "if-needed",
+    block: "nearest",
+    inline: "nearest"
+  }).forEach(({ el: i, top: o, left: s }) => {
+    i.scrollTop = o, i.scrollLeft = s;
+  });
+}
+export {
+  t as MenuActions,
+  f as TreeActions,
+  d as filterOptions,
+  C as getActionFromKey,
+  S as getUpdatedIndex,
+  P as maintainScrollVisibility
+};

package/dist/DatePicker/DatePicker.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("react"),f=require("@strapi/icons"),b=require("styled-components"),k=require("./components.cjs"),P=require("./DatePickerCalendar.cjs"),R=require("./utils/formatDate.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const T=require("../Field/FieldAction.cjs"),v=require("../helpers/getDefaultLocale.cjs"),A=require("../TextInput/TextInput.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},L=I(b),S=({ariaLabel:e,onClear:i,clearLabel:j="Clear",initialDate:D,locale:h,maxDate:m,minDate:q,onChange:l,selectedDate:a,disabled:n=!1,...x})=>{const[o,c]=p.useState(!1),r=p.useRef(null),u=h||v.getDefaultLocale(),d=a?R.formatDate(a,u):"",g=()=>{n||c(s=>!s)},y=()=>{n||i&&(i(),r.current.inputWrapperRef.current.focus())},F=s=>{l&&l(s),c(!1)},C=()=>{c(!1)};return t.jsxs(k.DatePickerWrapper,{bold:o,children:[t.jsx(A.TextInput,{ref:r,onClick:g,onChange:()=>{},value:d,startAction:t.jsx(f.Calendar,{"aria-hidden":!0}),endAction:i&&d?t.jsx(T.FieldAction,{label:j,onClick:y,"aria-disabled":n||void 0,children:t.jsx(_,{})}):void 0,"aria-autocomplete":"none","aria-label":e,disabled:n,type:"text",...x}),r.current&&r.current.inputWrapperRef&&o&&t.jsx(P.DatePickerCalendar,{selectedDate:a,initialDate:D,onChange:F,onEscape:C,locale:u,popoverSource:r.current.inputWrapperRef,minDate:q,maxDate:m})]})},_=L.default(f.Cross)`
+  height: ${11/16}rem;
+  width: ${11/16}rem;
+
+  path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`;exports.DatePicker=S;

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,83 @@
+import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import { useState as y, useRef as W } from "react";
+import { Cross as v, Calendar as A } from "@strapi/icons";
+import P from "styled-components";
+import { DatePickerWrapper as S } from "./components.js";
+import { DatePickerCalendar as $ } from "./DatePickerCalendar.js";
+import { formatDate as j } from "./utils/formatDate.js";
+import "../Field/Field.js";
+import "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import "../Field/FieldContext.js";
+import "../Typography/Typography.js";
+import { FieldAction as E } from "../Field/FieldAction.js";
+import { getDefaultLocale as V } from "../helpers/getDefaultLocale.js";
+import { TextInput as w } from "../TextInput/TextInput.js";
+const X = ({
+  ariaLabel: o,
+  onClear: i,
+  clearLabel: s = "Clear",
+  initialDate: u,
+  locale: d,
+  maxDate: h,
+  minDate: C,
+  onChange: p,
+  selectedDate: a,
+  disabled: t = !1,
+  ...D
+}) => {
+  const [c, n] = y(!1), e = W(null), m = d || V(), f = a ? j(a, m) : "", g = () => {
+    t || n((l) => !l);
+  }, x = () => {
+    t || i && (i(), e.current.inputWrapperRef.current.focus());
+  }, b = (l) => {
+    p && p(l), n(!1);
+  }, k = () => {
+    n(!1);
+  };
+  return R(S, {
+    bold: c,
+    children: [r(w, {
+      ref: e,
+      onClick: g,
+      onChange: () => {
+      },
+      value: f,
+      startAction: r(A, {
+        "aria-hidden": !0
+      }),
+      endAction: i && f ? r(E, {
+        label: s,
+        onClick: x,
+        "aria-disabled": t || void 0,
+        children: r(F, {})
+      }) : void 0,
+      "aria-autocomplete": "none",
+      "aria-label": o,
+      disabled: t,
+      type: "text",
+      ...D
+    }), e.current && e.current.inputWrapperRef && c && r($, {
+      selectedDate: a,
+      initialDate: u,
+      onChange: b,
+      onEscape: k,
+      locale: m,
+      popoverSource: e.current.inputWrapperRef,
+      minDate: C,
+      maxDate: h
+    })]
+  });
+}, F = P(v)`
+  height: ${11 / 16}rem;
+  width: ${11 / 16}rem;
+
+  path {
+    fill: ${({
+  theme: o
+}) => o.colors.neutral600};
+  }
+`;
+export {
+  X as DatePicker
+};

package/dist/DatePicker/DatePickerCalendar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),T=require("react"),L=require("./components.cjs"),O=require("./DatePickerTd.cjs"),a=require("./DatePickerTh.cjs"),H=require("./utils/getDayOfWeek.cjs"),V=require("./utils/getMonths.cjs"),$=require("./utils/generateWeeks.cjs"),E=require("./utils/getYears.cjs"),I=require("./utils/formatDate.cjs"),h=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),z=require("../FocusTrap/FocusTrap.cjs"),A=require("../helpers/getDefaultLocale.cjs"),G=require("../RawTable/RawTable.cjs");require("../RawTable/RawTableContext.cjs");const J=require("../RawTable/RawThead.cjs"),K=require("../RawTable/RawTbody.cjs"),g=require("../RawTable/RawTr.cjs"),i=require("../SimpleMenu/SimpleMenu.cjs"),N=require("../VisuallyHidden/VisuallyHidden.cjs"),Q=({onEscape:s,popoverSource:l,...o})=>e.jsx(L.DatePickerPopover,{source:l,role:"dialog","aria-modal":"true",spacing:4,children:e.jsx(z.FocusTrap,{onEscape:s,children:e.jsx(D,{...o})})}),D=({selectedDate:s,initialDate:l=new Date,locale:o,onChange:j,minDate:p,maxDate:w})=>{const[c,d]=T.useState(l),[x,k,R]=$.generateWeeks(c,s),{sun:m,mon:q,tue:P,wed:f,thu:M,fri:b,sat:C}=H.getDayOfWeek(),u=V.getMonths(),y=E.getYears(p,w),F=o||A.getDefaultLocale();T.useEffect(()=>{s&&d(s)},[s]);const S=t=>{const r=new Date(c);r.setMonth(u.indexOf(t)),d(r)},B=t=>{const r=new Date(c);r.setFullYear(t),d(r)},Y=t=>()=>{j&&j(t)};return e.jsxs(h.Box,{padding:4,children:[e.jsx(h.Box,{paddingBottom:4,paddingLeft:2,paddingRight:2,children:e.jsxs(_.Flex,{children:[e.jsx(i.SimpleMenu,{label:u[c.getMonth()],children:u.map(t=>e.jsx(i.MenuItem,{onClick:()=>S(t),children:t},t))}),e.jsx(h.Box,{paddingLeft:2,children:e.jsx(i.SimpleMenu,{label:c.getFullYear(),children:y.map(t=>e.jsx(i.MenuItem,{onClick:()=>B(t),children:t},t))})})]})}),e.jsxs(G.RawTable,{colCount:7,rowCount:x.length+1,initialCol:R,initialRow:k,role:"grid",children:[e.jsx(J.RawThead,{children:e.jsxs(g.RawTr,{"aria-rowindex":1,children:[e.jsx(a.DatePickerTh,{children:m}),e.jsx(a.DatePickerTh,{children:q}),e.jsx(a.DatePickerTh,{children:P}),e.jsx(a.DatePickerTh,{children:f}),e.jsx(a.DatePickerTh,{children:M}),e.jsx(a.DatePickerTh,{children:b}),e.jsx(a.DatePickerTh,{children:C})]})}),e.jsx(K.RawTbody,{children:x.map((t,r)=>e.jsx(g.RawTr,{children:t.map(({date:n,outsideMonth:W,isSelected:v})=>e.jsxs(O.DatePickerTd,{outsideMonth:W,onSelectDay:Y(n),isSelected:v,children:[e.jsx("span",{"aria-hidden":!0,children:n.getDate()}),e.jsx(N.VisuallyHidden,{children:e.jsx("span",{children:I.formatDate(n,F)})})]},`${n.getFullYear()}-${n.getMonth()+1}-${n.getDate()}`))},r))})]})]})};exports.DatePickerCalendar=Q;exports.DatePickerCalendarContent=D;