@strapi/design-system 1.7.0 → 1.7.2-alpha.0

package/dist/Combobox/Combobox.js

@@ -3,54 +3,23 @@ import * as a from "react";
 import { Cross as re, CarretDown as oe } from "@strapi/icons";
 import { Combobox as t } from "@strapi/ui-primitives";
 import l from "styled-components";
+import { useControllableState as te } from "../hooks/useControllableState.js";
+import { useId as ne } from "../hooks/useId.js";
+import { useIntersection as le } from "../hooks/useIntersection.js";
+import { inputFocusStyle as ie } from "../themes/utils.js";
+import { Loader as ae } from "../Loader/Loader.js";
 import { Box as B } from "../Box/Box.js";
-import { Field as te } from "../Field/Field.js";
-import { FieldLabel as ne } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as le } from "../Field/FieldHint.js";
-import { FieldError as ie } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { useControllableState as ae } from "../hooks/useControllableState.js";
-import { useId as se } from "../hooks/useId.js";
-import { useIntersection as de } from "../hooks/useIntersection.js";
-import { Loader as ce } from "../Loader/Loader.js";
-import "../themes/lightTheme/index.js";
-import "../themes/darkTheme/index.js";
-import "lodash";
-import { inputFocusStyle as ue } from "../themes/utils.js";
 import { Typography as p } from "../Typography/Typography.js";
-const he = ({
-  children: e,
-  clearLabel: n = "clear",
-  creatable: s = !1,
-  createMessage: m = (b) => `Create "${b}"`,
-  disabled: d = !1,
-  error: c,
-  hasMoreItems: O = !1,
-  hint: j,
-  id: E,
-  label: z,
-  labelAction: P,
-  loading: f = !1,
-  loadingMessage: q = "Loading content...",
-  noOptionsMessage: D = () => "No results found",
-  onChange: C,
-  onClear: g,
-  onCreateOption: w,
-  onInputChange: I,
-  onLoadMore: v,
-  placeholder: H = "Select or enter a value",
-  required: V = !1,
-  defaultTextValue: N,
-  textValue: W,
-  value: L
-}) => {
-  const [b, U] = a.useState(!1), [i, y] = ae({
+import { Field as se } from "../Field/Field.js";
+import { Flex as $ } from "../Flex/Flex.js";
+import { FieldLabel as de } from "../Field/FieldLabel.js";
+import { FieldHint as ce } from "../Field/FieldHint.js";
+import { FieldError as ue } from "../Field/FieldError.js";
+const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMessage: f = (b) => `Create "${b}"`, disabled: d = !1, error: c, hasMoreItems: O = !1, hint: j, id: E, label: z, labelAction: P, loading: m = !1, loadingMessage: q = "Loading content...", noOptionsMessage: D = () => "No results found", onChange: C, onClear: g, onCreateOption: w, onInputChange: I, onLoadMore: v, placeholder: H = "Select or enter a value", required: V = !1, defaultTextValue: N, textValue: W, value: L }) => {
+  const [b, U] = a.useState(!1), [i, y] = te({
     prop: W,
     defaultProp: N
-  }), [A, R] = a.useState(""), k = a.useRef(null), T = a.useRef(null), G = a.useRef(null), u = se(E), J = (o) => {
+  }), [A, R] = a.useState(""), k = a.useRef(null), T = a.useRef(null), G = a.useRef(null), u = ne(E), J = (o) => {
     g && !d && (y(""), R(""), g(o), T.current.focus());
   }, K = (o) => {
     U(o);
@@ -62,113 +31,22 @@ const he = ({
     I && I(o);
   }, Z = (o) => {
     C && C(o);
-  }, F = `intersection-${u}`, _ = (o) => {
-    v && O && !f && v(o);
+  }, F = `intersection-${CSS.escape(u)}`, _ = (o) => {
+    v && O && !m && v(o);
   }, S = () => {
     w && i && w(i);
   };
-  de(k, _, {
+  le(k, _, {
     selectorToWatch: `#${F}`,
+    /**
+     * We need to know when the select is open because only then will viewportRef
+     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+     */
     skipWhen: !b
   });
   const M = `${u}-hint`, ee = `${u}-error`;
-  return r(te, {
-    hint: j,
-    error: c,
-    id: u,
-    required: V,
-    children: h($, {
-      direction: "column",
-      alignItems: "stretch",
-      gap: 1,
-      children: [r(ne, {
-        action: P,
-        children: z
-      }), h(t.Root, {
-        autocomplete: s ? "list" : "both",
-        onOpenChange: K,
-        onTextValueChange: Q,
-        textValue: i,
-        allowCustomValue: !0,
-        disabled: d,
-        required: V,
-        value: L,
-        onValueChange: Z,
-        filterValue: A,
-        onFilterValueChange: X,
-        children: [h(me, {
-          $hasError: Boolean(c),
-          children: [r(fe, {
-            placeholder: H,
-            id: u,
-            "aria-invalid": Boolean(c),
-            "aria-labelledby": `${M} ${ee}`,
-            onChange: Y,
-            ref: T
-          }), h($, {
-            as: "span",
-            gap: 3,
-            children: [i && g ? r(pe, {
-              as: "button",
-              hasRadius: !0,
-              background: "transparent",
-              type: "button",
-              onClick: J,
-              "aria-disabled": d,
-              "aria-label": n,
-              title: n,
-              ref: G,
-              children: r(re, {})
-            }) : null, r(ge, {
-              children: r(oe, {})
-            })]
-          })]
-        }), r(t.Portal, {
-          children: r(be, {
-            sideOffset: 4,
-            children: h($e, {
-              ref: k,
-              children: [e, s ? r(t.CreateItem, {
-                onPointerUp: S,
-                onClick: S,
-                asChild: !0,
-                children: r(x, {
-                  children: r(p, {
-                    children: m(i ?? "")
-                  })
-                })
-              }) : null, !s && !f ? r(t.NoValueFound, {
-                asChild: !0,
-                children: r(x, {
-                  $hasHover: !1,
-                  children: r(p, {
-                    children: D(i ?? "")
-                  })
-                })
-              }) : null, f ? r($, {
-                justifyContent: "center",
-                alignItems: "center",
-                paddingTop: 2,
-                paddingBottom: 2,
-                children: r(ce, {
-                  small: !0,
-                  children: q
-                })
-              }) : null, r(B, {
-                id: F,
-                width: "100%",
-                height: "1px"
-              })]
-            })
-          })
-        })]
-      }), r(le, {}), r(ie, {})]
-    })
-  });
-}, We = (e) => r(he, {
-  ...e,
-  creatable: !0
-}), pe = l(B)`
+  return r(se, { hint: j, error: c, id: u, required: V, children: h($, { direction: "column", alignItems: "stretch", gap: 1, children: [r(de, { action: P, children: z }), h(t.Root, { autocomplete: s ? "list" : "both", onOpenChange: K, onTextValueChange: Q, textValue: i, allowCustomValue: !0, disabled: d, required: V, value: L, onValueChange: Z, filterValue: A, onFilterValueChange: X, children: [h(fe, { $hasError: !!c, children: [r(me, { placeholder: H, id: u, "aria-invalid": !!c, "aria-labelledby": `${M} ${ee}`, onChange: Y, ref: T }), h($, { as: "span", gap: 3, children: [i && g ? r(pe, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: J, "aria-disabled": d, "aria-label": n, title: n, ref: G, children: r(re, {}) }) : null, r(ge, { children: r(oe, {}) })] })] }), r(t.Portal, { children: r(be, { sideOffset: 4, children: h($e, { ref: k, children: [e, s ? r(t.CreateItem, { onPointerUp: S, onClick: S, asChild: !0, children: r(x, { children: r(p, { children: f(i ?? "") }) }) }) : null, !s && !m ? r(t.NoValueFound, { asChild: !0, children: r(x, { $hasHover: !1, children: r(p, { children: D(i ?? "") }) }) }) : null, m ? r($, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(ae, { small: !0, children: q }) }) : null, r(B, { id: F, width: "100%", height: "1px" })] }) }) })] }), r(ce, {}), r(ue, {})] }) });
+}, ze = (e) => r(he, { ...e, creatable: !0 }), pe = l(B)`
   border: none;
 
   svg {
@@ -177,43 +55,24 @@ const he = ({
   }
 
   svg path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral600};
+    fill: ${({ theme: e }) => e.colors.neutral600};
   }
-`, me = l(t.Trigger)`
+`, fe = l(t.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};
+  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;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: ${({
-  theme: e
-}) => e.spaces[4]};
+  gap: ${({ theme: e }) => e.spaces[4]};
 
   &[data-disabled] {
-    color: ${({
-  theme: e
-}) => e.colors.neutral600};
-    background: ${({
-  theme: e
-}) => e.colors.neutral150};
+    color: ${({ theme: e }) => e.colors.neutral600};
+    background: ${({ theme: e }) => e.colors.neutral150};
     cursor: not-allowed;
   }
 
@@ -222,19 +81,11 @@ const he = ({
     outline: none;
   }
 
-  ${({
-  theme: e,
-  $hasError: n
-}) => ue()({
-  theme: e,
-  hasError: n
-})};
-`, fe = l(t.TextInput)`
+  ${({ theme: e, $hasError: n }) => ie()({ theme: e, hasError: n })};
+`, me = l(t.TextInput)`
   width: 100%;
   font-size: ${14 / 16}rem;
-  color: ${({
-  theme: e
-}) => e.colors.neutral800};
+  color: ${({ theme: e }) => e.colors.neutral800};
   min-height: ${40 / 16}rem;
   border: none;
   background-color: transparent;
@@ -251,9 +102,7 @@ const he = ({
     width: ${6 / 16}rem;
 
     & > path {
-      fill: ${({
-  theme: e
-}) => e.colors.neutral600};
+      fill: ${({ theme: e }) => e.colors.neutral600};
     }
   }
 
@@ -261,76 +110,31 @@ const he = ({
     cursor: inherit;
   }
 `, be = l(t.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};
+  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-combobox-trigger-width);
   /* This is from the design-system figma file. */
   max-height: 15rem;
-  z-index: ${({
-  theme: e
-}) => e.zIndices[1]};
+  z-index: ${({ theme: e }) => e.zIndices[1]};
 `, $e = l(t.Viewport)`
-  padding: ${({
-  theme: e
-}) => e.spaces[1]};
-`, Le = a.forwardRef(({
-  children: e,
-  value: n,
-  disabled: s,
-  textValue: m,
-  ...d
-}, c) => r(t.ComboboxItem, {
-  asChild: !0,
-  value: n,
-  disabled: s,
-  textValue: m,
-  children: r(x, {
-    ref: c,
-    ...d,
-    children: r(t.ItemText, {
-      asChild: !0,
-      children: r(p, {
-        children: e
-      })
-    })
-  })
-})), x = l.div`
+  padding: ${({ theme: e }) => e.spaces[1]};
+`, Pe = a.forwardRef(({ children: e, value: n, disabled: s, textValue: f, ...d }, c) => r(t.ComboboxItem, { asChild: !0, value: n, disabled: s, textValue: f, children: r(x, { ref: c, ...d, children: r(t.ItemText, { asChild: !0, children: r(p, { children: e }) }) }) })), x = l.div`
   width: 100%;
   border: none;
   text-align: left;
   outline-offset: -3px;
-  padding: ${({
-  theme: e
-}) => e.spaces[2]} ${({
-  theme: e
-}) => e.spaces[4]};
-  background-color: ${({
-  theme: e
-}) => e.colors.neutral0};
-  border-radius: ${({
-  theme: e
-}) => e.borderRadius};
+  padding: ${({ theme: e }) => e.spaces[2]} ${({ theme: e }) => e.spaces[4]};
+  background-color: ${({ theme: e }) => e.colors.neutral0};
+  border-radius: ${({ theme: e }) => e.borderRadius};
   user-select: none;
 
   &[data-selected] {
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
+    background-color: ${({ theme: e }) => e.colors.primary100};
 
     ${p} {
-      color: ${({
-  theme: e
-}) => e.colors.primary600};
+      color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
   }
@@ -338,24 +142,19 @@ const he = ({
   &:hover,
   &[data-highlighted] {
     outline: none;
-    background-color: ${({
-  theme: e,
-  $hasHover: n = !0
-}) => n ? e.colors.primary100 : e.colors.neutral0};
+    background-color: ${({ theme: e, $hasHover: n = !0 }) => n ? e.colors.primary100 : e.colors.neutral0};
   }
 
   &[data-highlighted] {
     ${p} {
-      color: ${({
-  theme: e
-}) => e.colors.primary600};
+      color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
   }
 `;
 export {
   he as Combobox,
-  We as CreatableCombobox,
-  Le as Option,
+  ze as CreatableCombobox,
+  Pe as Option,
   x as OptionBox
 };

package/dist/Combobox/ComboboxList.cjs

@@ -1 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=({options:t})=>e.jsx(e.Fragment,{children:t});exports.ComboboxList=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");/**
+ * @preserve
+ * @deprecated
+ * This component was deprecated in 1.6.2. It will be removed in the next major release 2.0.0.
+ */const o=({options:t})=>e.jsx(e.Fragment,{children:t});exports.ComboboxList=o;

package/dist/Combobox/ComboboxList.js

@@ -1,9 +1,10 @@
 import { jsx as r, Fragment as t } from "react/jsx-runtime";
-const m = ({
-  options: o
-}) => r(t, {
-  children: o
-});
+/**
+ * @preserve
+ * @deprecated
+ * This component was deprecated in 1.6.2. It will be removed in the next major release 2.0.0.
+ */
+const m = ({ options: o }) => r(t, { children: o });
 export {
   m as ComboboxList
 };

package/dist/Combobox/ComboboxOption.cjs

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

package/dist/Combobox/index.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,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/DatePicker/DatePicker.cjs

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

package/dist/DatePicker/DatePicker.js

@@ -5,85 +5,67 @@ import m from "styled-components";
 import { DatePickerWrapper as A } from "./components.js";
 import { DatePickerCalendar as P } 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 I } from "../helpers/getDefaultLocale.js";
-import { TextInput as V } from "../TextInput/TextInput.js";
-const Y = ({
+import { getDefaultLocale as E } from "../helpers/getDefaultLocale.js";
+import { TextInput as I } from "../TextInput/TextInput.js";
+import { FieldAction as V } from "../Field/FieldAction.js";
+const N = ({
+  /**
+   * DatePicker props
+   */
   ariaLabel: e,
-  onClear: i,
+  onClear: a,
   clearLabel: u = "Clear",
+  /**
+   * DatePickerCalendar props
+   */
   initialDate: d,
   locale: h,
   maxDate: C,
   minDate: D,
   onChange: c,
-  selectedDate: a,
+  selectedDate: n,
+  /**
+   * TextInput props
+   */
   disabled: o = !1,
   ...g
 }) => {
-  const [p, n] = S(!1), t = W(null), s = h || I(), f = a ? j(a, s) : "", x = () => {
-    o || n((l) => !l);
+  const [s, i] = S(!1), t = W(null), f = h || E(), p = n ? j(n, f) : "", x = () => {
+    o || i((l) => !l);
   }, b = () => {
-    o || i && (i(), t.current.inputWrapperRef.current.focus());
+    o || a && (a(), t.current.inputWrapperRef.current.focus());
   }, k = (l) => {
-    c && c(l), n(!1);
+    c && c(l), i(!1);
   }, y = () => {
-    n(!1);
+    i(!1);
   };
-  return R(A, {
-    bold: p,
-    children: [r(V, {
-      ref: t,
-      onClick: x,
-      onChange: () => {
-      },
-      value: f,
-      startAction: r(F, {
-        "aria-hidden": !0
-      }),
-      endAction: i && f ? r(E, {
-        label: u,
-        onClick: b,
-        "aria-disabled": o || void 0,
-        children: r(w, {})
-      }) : void 0,
-      "aria-autocomplete": "none",
-      "aria-label": e,
-      disabled: o,
-      type: "text",
-      ...g
-    }), t.current && t.current.inputWrapperRef && p && r(P, {
-      selectedDate: a,
-      initialDate: d,
-      onChange: k,
-      onEscape: y,
-      locale: s,
-      popoverSource: t.current.inputWrapperRef,
-      minDate: D,
-      maxDate: C
-    })]
-  });
+  return R(A, { bold: s, children: [r(I, {
+    ref: t,
+    onClick: x,
+    // Prevent input from changing for now
+    onChange: () => {
+    },
+    value: p,
+    startAction: r(F, { "aria-hidden": !0 }),
+    endAction: a && p ? r(V, { label: u, onClick: b, "aria-disabled": o || void 0, children: r(w, {}) }) : void 0,
+    "aria-autocomplete": "none",
+    "aria-label": e,
+    disabled: o,
+    type: "text",
+    ...g
+  }), t.current && t.current.inputWrapperRef && s && r(P, { selectedDate: n, initialDate: d, onChange: k, onEscape: y, locale: f, popoverSource: t.current.inputWrapperRef, minDate: D, maxDate: C })] });
 }, w = m($)`
   height: ${11 / 16}rem;
   width: ${11 / 16}rem;
 
   path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral600};
+    fill: ${({ theme: e }) => e.colors.neutral600};
   }
 `, F = m(v)`
   & > path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral500};
+    fill: ${({ theme: e }) => e.colors.neutral500};
   }
 `;
 export {
-  Y as DatePicker
+  N as DatePicker
 };

package/dist/DatePicker/DatePickerCalendar.cjs

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