@tedi-design-system/react 18.2.0-rc.2 → 18.2.0-rc.4

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),J=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),Q=require("../../../buttons/closing-button/closing-button.cjs.js"),U=require("../../../content/calendar/calendar.cjs.js"),W=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),X=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),Z=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,a)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.getTime()-l.getTime())[0]:e&&typeof e=="object"&&"from"in e&&e.from instanceof Date?e.from:e&&typeof e=="object"&&"to"in e&&e.to instanceof Date?e.to:a??new Date,$=({title:e})=>{const{labelId:a,onOpenChange:o}=Z.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(J.Heading,{element:"h2",modifiers:"h4",id:a,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(Q.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:a,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,showNavigation:L,selectionLevel:f="days",initialView:g,initialMonth:y,modalProps:i,title:P,...R}=e,{getLabel:b}=X.useLabels(),[r,m]=d.useState(l),[V,M]=d.useState(g??f),[F,j]=d.useState(()=>D(l,y));d.useEffect(()=>{a&&(m(l),M(g??f),j(D(l,y)))},[a,l,f,g,y]);const I=d.useCallback((s,h)=>{m(n==="range"?Y=>W.resolveRangeSelection(s,Y,h):s)},[n]),K=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),z=n==="multiple"?Array.isArray(r)&&r.length>0:n==="range"?!!r&&typeof r=="object"&&"from"in r&&r.from instanceof Date:r instanceof Date,k=p===!0&&!z,E=()=>{k||(S(r),o(!1))},x=P??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:a,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":x,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:G.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx($,{title:x})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(U.Calendar,{...R,numberOfMonths:T,view:V,selectionLevel:f,currentMonth:F,setCurrentMonth:j,setView:M,mode:n,value:r,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,showNavigation:L,handleSelect:I,applyValue:K,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:E,disabled:k,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),Q=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),U=require("../../../buttons/closing-button/closing-button.cjs.js"),W=require("../../../content/calendar/calendar.cjs.js"),X=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),Z=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),$=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,r)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.getTime()-l.getTime())[0]:e&&typeof e=="object"&&"from"in e&&e.from instanceof Date?e.from:e&&typeof e=="object"&&"to"in e&&e.to instanceof Date?e.to:r??new Date,v=({title:e})=>{const{labelId:r,onOpenChange:o}=$.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(Q.Heading,{element:"h2",modifiers:"h4",id:r,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(U.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:r,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,dayStatus:L,showNavigation:P,selectionLevel:f="days",initialView:y,initialMonth:g,modalProps:i,title:R,...V}=e,{getLabel:b}=Z.useLabels(),[a,m]=d.useState(l),[F,M]=d.useState(y??f),[I,j]=d.useState(()=>D(l,g));d.useEffect(()=>{r&&(m(l),M(y??f),j(D(l,g)))},[r,l,f,y,g]);const K=d.useCallback((s,h)=>{m(n==="range"?G=>X.resolveRangeSelection(s,G,h):s)},[n]),z=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),E=n==="multiple"?Array.isArray(a)&&a.length>0:n==="range"?!!a&&typeof a=="object"&&"from"in a&&a.from instanceof Date:a instanceof Date,k=p===!0&&!E,Y=()=>{k||(S(a),o(!1))},x=R??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:r,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":x,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:J.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx(v,{title:x})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(W.Calendar,{...V,numberOfMonths:T,view:F,selectionLevel:f,currentMonth:I,setCurrentMonth:j,setView:M,mode:n,value:a,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,dayStatus:L,showNavigation:P,handleSelect:K,applyValue:z,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:Y,disabled:k,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { DateRange, DayPickerProps, Locale, Matcher } from 'react-day-picker';
+import { DayStatusFn } from '../../../content/calendar/calendar';
 import { ModalContentProps } from '../../../overlays/modal';
 import { CalendarView } from '../date-field';
 type DateFieldMode = 'single' | 'multiple' | 'range';
@@ -27,6 +28,8 @@ export interface DatePickerModalProps extends Omit<DayPickerProps, 'mode' | 'sel
     availableDays?: Date[] | ((date: Date) => boolean);
     footer?: React.ReactNode;
     monthYearSelectType?: 'dropdown' | 'grid';
+    /** Per-day status overlay forwarded to `Calendar`. */
+    dayStatus?: DayStatusFn;
     showNavigation?: boolean;
     selectionLevel?: CalendarView;
     /** Grid the calendar opens on, independent of `selectionLevel`. Defaults to `selectionLevel`. */

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.es.js

@@ -1,30 +1,30 @@
 import { jsx as o, jsxs as b } from "react/jsx-runtime";
-import P from "../../../../../../external/classnames/index.es.js";
-import { useState as g, useEffect as Q, useCallback as w } from "react";
-import { Heading as U } from "../../../base/typography/heading/heading.es.js";
+import Q from "../../../../../../external/classnames/index.es.js";
+import { useState as g, useEffect as U, useCallback as w } from "react";
+import { Heading as W } from "../../../base/typography/heading/heading.es.js";
 import { Button as T } from "../../../buttons/button/button.es.js";
-import { ClosingButton as W } from "../../../buttons/closing-button/closing-button.es.js";
-import { Calendar as X } from "../../../content/calendar/calendar.es.js";
-import { resolveRangeSelection as Z } from "../date-field-helpers.es.js";
+import { ClosingButton as X } from "../../../buttons/closing-button/closing-button.es.js";
+import { Calendar as Z } from "../../../content/calendar/calendar.es.js";
+import { resolveRangeSelection as $ } from "../date-field-helpers.es.js";
 import c from "./date-picker-modal.module.scss.es.js";
-import { useLabels as $ } from "../../../../providers/label-provider/use-labels.es.js";
+import { useLabels as v } from "../../../../providers/label-provider/use-labels.es.js";
 import { Modal as d } from "../../../overlays/modal/modal.es.js";
-import { useModal as v } from "../../../overlays/modal/modal-context.es.js";
-const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((a, l) => a.getTime() - l.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : n ?? /* @__PURE__ */ new Date(), ee = ({ title: e }) => {
-  const { labelId: n, onOpenChange: a } = v();
+import { useModal as ee } from "../../../overlays/modal/modal-context.es.js";
+const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((a, l) => a.getTime() - l.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : n ?? /* @__PURE__ */ new Date(), te = ({ title: e }) => {
+  const { labelId: n, onOpenChange: a } = ee();
   return /* @__PURE__ */ b("div", { className: c["tedi-date-picker-modal__header"], children: [
-    /* @__PURE__ */ o(U, { element: "h2", modifiers: "h4", id: n, className: c["tedi-date-picker-modal__title"], children: e }),
-    /* @__PURE__ */ o(W, { size: "small", onClick: () => a(!1) })
+    /* @__PURE__ */ o(W, { element: "h2", modifiers: "h4", id: n, className: c["tedi-date-picker-modal__title"], children: e }),
+    /* @__PURE__ */ o(X, { size: "small", onClick: () => a(!1) })
   ] });
-}, te = (e) => {
+}, ie = (e) => {
   const {
     open: n,
     onOpenChange: a,
     value: l,
     onConfirm: A,
     mode: t = "single",
-    numberOfMonths: j,
-    locale: S,
+    numberOfMonths: S,
+    locale: j,
     localeCode: x,
     showOutsideDays: O = !0,
     disabledMatchers: B,
@@ -32,30 +32,31 @@ const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [
     availableDays: H,
     footer: L,
     monthYearSelectType: V,
-    showNavigation: I,
+    dayStatus: I,
+    showNavigation: K,
     selectionLevel: m = "days",
     initialView: h,
     initialMonth: p,
     modalProps: i,
-    title: K,
-    ...q
-  } = e, { getLabel: y } = $(), [r, f] = g(l), [z, C] = g(h ?? m), [E, D] = g(() => _(l, p));
-  Q(() => {
+    title: q,
+    ...z
+  } = e, { getLabel: y } = v(), [r, f] = g(l), [E, C] = g(h ?? m), [F, D] = g(() => _(l, p));
+  U(() => {
     n && (f(l), C(h ?? m), D(_(l, p)));
   }, [n, l, m, h, p]);
-  const F = w(
+  const R = w(
     (s, u) => {
-      f(t === "range" ? (J) => Z(s, J, u) : s);
+      f(t === "range" ? (P) => $(s, P, u) : s);
     },
     [t]
-  ), R = w(
+  ), Y = w(
     (s) => {
       f((u) => t === "range" ? { from: s, to: void 0 } : t === "multiple" ? [...Array.isArray(u) ? u : [], s] : s);
     },
     [t]
-  ), Y = t === "multiple" ? Array.isArray(r) && r.length > 0 : t === "range" ? !!r && typeof r == "object" && "from" in r && r.from instanceof Date : r instanceof Date, M = k === !0 && !Y, G = () => {
+  ), G = t === "multiple" ? Array.isArray(r) && r.length > 0 : t === "range" ? !!r && typeof r == "object" && "from" in r && r.from instanceof Date : r instanceof Date, M = k === !0 && !G, J = () => {
     M || (A(r), a(!1));
-  }, N = K ?? y(t === "range" ? "date-field.modal-title-range" : t === "multiple" ? "date-field.modal-title-multiple" : "date-field.modal-title");
+  }, N = q ?? y(t === "range" ? "date-field.modal-title-range" : t === "multiple" ? "date-field.modal-title-multiple" : "date-field.modal-title");
   return /* @__PURE__ */ o(d, { open: n, onToggle: a, children: /* @__PURE__ */ b(
     d.Content,
     {
@@ -64,22 +65,22 @@ const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [
       ...i,
       md: { width: "max-content", ...i == null ? void 0 : i.md },
       sm: { width: "full", ...i == null ? void 0 : i.sm },
-      className: P(c["tedi-date-picker-modal"], i == null ? void 0 : i.className),
+      className: Q(c["tedi-date-picker-modal"], i == null ? void 0 : i.className),
       children: [
-        /* @__PURE__ */ o(d.Header, { children: /* @__PURE__ */ o(ee, { title: N }) }),
+        /* @__PURE__ */ o(d.Header, { children: /* @__PURE__ */ o(te, { title: N }) }),
         /* @__PURE__ */ o(d.Body, { className: c["tedi-date-picker-modal__body"], children: /* @__PURE__ */ o(
-          X,
+          Z,
           {
-            ...q,
-            numberOfMonths: j,
-            view: z,
+            ...z,
+            numberOfMonths: S,
+            view: E,
             selectionLevel: m,
-            currentMonth: E,
+            currentMonth: F,
             setCurrentMonth: D,
             setView: C,
             mode: t,
             value: r,
-            locale: S,
+            locale: j,
             localeCode: x,
             showOutsideDays: O,
             disabledMatchers: B,
@@ -87,22 +88,23 @@ const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [
             availableDays: H,
             footer: L,
             monthYearSelectType: V,
-            showNavigation: I,
-            handleSelect: F,
-            applyValue: R,
+            dayStatus: I,
+            showNavigation: K,
+            handleSelect: R,
+            applyValue: Y,
             className: c["tedi-date-picker-modal__calendar"],
             bordered: !1
           }
         ) }),
         /* @__PURE__ */ b(d.Footer, { children: [
           /* @__PURE__ */ o(T, { visualType: "secondary", onClick: () => a(!1), children: y("date-field.cancel") }),
-          /* @__PURE__ */ o(T, { onClick: G, disabled: M, children: y("date-field.confirm") })
+          /* @__PURE__ */ o(T, { onClick: J, disabled: M, children: y("date-field.confirm") })
         ] })
       ]
     }
   ) });
 };
-te.displayName = "DatePickerModal";
+ie.displayName = "DatePickerModal";
 export {
-  te as DatePickerModal
+  ie as DatePickerModal
 };