@drivy/cobalt 0.35.0 → 0.36.0

package/components/Calendar/CalendarDayPicker/CalendarDayPicker.js

@@ -0,0 +1,43 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { CalendarDayPickerMonth } from './CalendarDayPickerMonth.js';
+import cx from 'classnames';
+import { Hint } from '../../Form/Hint.js';
+import addMonths from 'date-fns/addMonths';
+
+function CalendarDayPicker({ firstMonthDate = new Date(), numberOfMonths = 1, hint, firstAvailableDate = new Date(), lastAvailableDate, selectedDate, onChangeDate, onLeaveDate, onSelectDate, locale, }) {
+    const isFirstRender = useRef(true);
+    firstMonthDate.setHours(0, 0, 0, 0);
+    firstAvailableDate.setHours(0, 0, 0, 0);
+    const [internalSelectedDate, setInternalSelectedDate] = useState(selectedDate != null ? selectedDate : null);
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        selectedDate !== internalSelectedDate &&
+            setInternalSelectedDate(selectedDate);
+    }, [selectedDate]);
+    const handleSelectDate = (date) => {
+        setInternalSelectedDate(date);
+        onSelectDate && onSelectDate(date);
+    };
+    const handleChangeDate = (date, disabled) => {
+        const processChange = onChangeDate
+            ? onChangeDate(date, disabled) !== false
+            : true;
+        if (!processChange || disabled)
+            return;
+    };
+    const months = [firstMonthDate];
+    for (let i = 0; i < numberOfMonths - 1; i++) {
+        months.push(addMonths(months[months.length - 1], 1));
+    }
+    return (React.createElement("div", { className: "cobalt-CalendarDayPicker" },
+        React.createElement("div", { className: "cobalt-CalendarDayPicker__months-container" }, months.map((monthDate) => (React.createElement(CalendarDayPickerMonth, { key: monthDate.getTime(), month: monthDate, selectedDate: internalSelectedDate, onSelectDate: handleSelectDate, onChangeDate: handleChangeDate, onLeaveDate: onLeaveDate, firstAvailableDate: firstAvailableDate, lastAvailableDate: lastAvailableDate, locale: locale })))),
+        React.createElement("div", { className: cx("cobalt-CalendarDayPicker__message", {
+                "cobalt-CalendarDayPicker__message--show": !!hint,
+            }) }, hint && React.createElement(Hint, { status: hint.status }, hint.html))));
+}
+
+export { CalendarDayPicker };
+//# sourceMappingURL=CalendarDayPicker.js.map

package/components/Calendar/CalendarDayPicker/CalendarDayPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDayPicker.js","sources":["../../../../src/components/Calendar/CalendarDayPicker/CalendarDayPicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport { CalendarDayPickerMonth } from \"./CalendarDayPickerMonth\"\nimport classNames from \"classnames\"\nimport { Hint } from \"../../Form/Hint\"\nimport addMonths from \"date-fns/addMonths\"\nimport { FormElementStatus } from \"../../Form/form\"\n\ntype CalendarDayPickerPropsType = {\n  numberOfMonths?: number\n  firstMonthDate?: Date\n  firstAvailableDate?: Date\n  lastAvailableDate?: Date\n  selectedDate?: Date | null\n  hint?: {\n    status?: FormElementStatus\n    html: string\n  }\n  onChangeDate?: (date: Date, disabled: boolean) => boolean\n  onLeaveDate?: (date: Date) => void\n  onSelectDate?: (date: Date) => void\n  locale?: Record<string, unknown>\n}\n\nexport function CalendarDayPicker({\n  firstMonthDate = new Date(),\n  numberOfMonths = 1,\n  hint,\n  firstAvailableDate = new Date(),\n  lastAvailableDate,\n  selectedDate,\n  onChangeDate,\n  onLeaveDate,\n  onSelectDate,\n  locale,\n}: CalendarDayPickerPropsType) {\n  const isFirstRender = useRef(true)\n\n  firstMonthDate.setHours(0, 0, 0, 0)\n  firstAvailableDate.setHours(0, 0, 0, 0)\n\n  const [internalSelectedDate, setInternalSelectedDate] = useState<\n    Date | null | undefined\n  >(selectedDate != null ? selectedDate : null)\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n    selectedDate !== internalSelectedDate &&\n      setInternalSelectedDate(selectedDate)\n  }, [selectedDate])\n\n  const handleSelectDate = (date: Date) => {\n    setInternalSelectedDate(date)\n    onSelectDate && onSelectDate(date)\n  }\n\n  const handleChangeDate = (date: Date, disabled: boolean) => {\n    const processChange = onChangeDate\n      ? onChangeDate(date, disabled) !== false\n      : true\n\n    if (!processChange || disabled) return\n  }\n\n  const months = [firstMonthDate]\n  for (let i = 0; i < numberOfMonths - 1; i++) {\n    months.push(addMonths(months[months.length - 1], 1))\n  }\n\n  return (\n    <div className=\"cobalt-CalendarDayPicker\">\n      <div className=\"cobalt-CalendarDayPicker__months-container\">\n        {months.map((monthDate) => (\n          <CalendarDayPickerMonth\n            key={monthDate.getTime()}\n            month={monthDate}\n            selectedDate={internalSelectedDate}\n            onSelectDate={handleSelectDate}\n            onChangeDate={handleChangeDate}\n            onLeaveDate={onLeaveDate}\n            firstAvailableDate={firstAvailableDate}\n            lastAvailableDate={lastAvailableDate}\n            locale={locale}\n          />\n        ))}\n      </div>\n\n      <div\n        className={classNames(\"cobalt-CalendarDayPicker__message\", {\n          \"cobalt-CalendarDayPicker__message--show\": !!hint,\n        })}\n      >\n        {hint && <Hint status={hint.status}>{hint.html}</Hint>}\n      </div>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;;;AAuBgB,SAAA,iBAAiB,CAAC,EAChC,cAAc,GAAG,IAAI,IAAI,EAAE,EAC3B,cAAc,GAAG,CAAC,EAClB,IAAI,EACJ,kBAAkB,GAAG,IAAI,IAAI,EAAE,EAC/B,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,MAAM,GACqB,EAAA;AAC3B,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAElC,cAAc,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IACnC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEvC,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,YAAY,IAAI,IAAI,GAAG,YAAY,GAAG,IAAI,CAAC,CAAA;IAE7C,SAAS,CAAC,MAAK;QACb,IAAI,aAAa,CAAC,OAAO,EAAE;AACzB,YAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAA;YAC7B,OAAM;AACP,SAAA;AACD,QAAA,YAAY,KAAK,oBAAoB;YACnC,uBAAuB,CAAC,YAAY,CAAC,CAAA;AACzC,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AAElB,IAAA,MAAM,gBAAgB,GAAG,CAAC,IAAU,KAAI;QACtC,uBAAuB,CAAC,IAAI,CAAC,CAAA;AAC7B,QAAA,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,CAAA;AACpC,KAAC,CAAA;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,QAAiB,KAAI;QACzD,MAAM,aAAa,GAAG,YAAY;cAC9B,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,KAAK;cACtC,IAAI,CAAA;QAER,IAAI,CAAC,aAAa,IAAI,QAAQ;YAAE,OAAM;AACxC,KAAC,CAAA;AAED,IAAA,MAAM,MAAM,GAAG,CAAC,cAAc,CAAC,CAAA;AAC/B,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AAC3C,QAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AACrD,KAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA;QACvC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,4CAA4C,EACxD,EAAA,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,MACpB,KAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EACrB,GAAG,EAAE,SAAS,CAAC,OAAO,EAAE,EACxB,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,oBAAoB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,EAAA,CACd,CACH,CAAC,CACE;AAEN,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,mCAAmC,EAAE;gBACzD,yCAAyC,EAAE,CAAC,CAAC,IAAI;AAClD,aAAA,CAAC,IAED,IAAI,IAAI,oBAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAAG,IAAI,CAAC,IAAI,CAAQ,CAClD,CACF,EACP;AACH;;;;"}

package/components/Calendar/CalendarDayPicker/CalendarDayPickerDay.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import cx from 'classnames';
+import { format } from 'date-fns';
+
+function CalendarDayPickerDay({ date, isToday, selected, disabled, onSelect, onMouseEnter, onMouseLeave, }) {
+    const handleSelectDate = () => {
+        !disabled && onSelect(date);
+    };
+    return (React.createElement("div", { className: cx("cobalt-CalendarDayPicker__day", {
+            "cobalt-CalendarDayPicker__day--today": isToday,
+            "cobalt-CalendarDayPicker__day--selected": selected,
+            "cobalt-CalendarDayPicker__day--disabled": disabled,
+        }), onMouseEnter: () => {
+            onMouseEnter && onMouseEnter(date, !!disabled);
+        }, onMouseLeave: () => {
+            onMouseLeave && onMouseLeave(date);
+        }, onClick: handleSelectDate, "data-day": format(date, "yyyy-MM-dd") },
+        React.createElement("div", { className: "cobalt-CalendarDayPicker__day-inner" }, date.getDate())));
+}
+function areEqual(prevProps, nextProps) {
+    return prevProps.selected === nextProps.selected;
+}
+const MemoizedComponent = React.memo(CalendarDayPickerDay, areEqual);
+MemoizedComponent.displayName = "CalendarDayPickerDay";
+
+export { MemoizedComponent as CalendarDayPickerDay };
+//# sourceMappingURL=CalendarDayPickerDay.js.map

package/components/Calendar/CalendarDayPicker/CalendarDayPickerDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDayPickerDay.js","sources":["../../../../src/components/Calendar/CalendarDayPicker/CalendarDayPickerDay.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { format } from \"date-fns\"\n\ntype CalendarDayPickerDayPropsType = {\n  date: Date\n  isToday?: boolean\n  selected?: boolean\n  disabled?: boolean\n  onSelect: (date: Date) => void\n  onMouseEnter?: (date: Date, disabled: boolean) => void\n  onMouseLeave?: (date: Date) => void\n}\n\nfunction CalendarDayPickerDay({\n  date,\n  isToday,\n  selected,\n  disabled,\n  onSelect,\n  onMouseEnter,\n  onMouseLeave,\n}: CalendarDayPickerDayPropsType) {\n  const handleSelectDate = () => {\n    !disabled && onSelect(date)\n  }\n\n  return (\n    <div\n      className={classNames(\"cobalt-CalendarDayPicker__day\", {\n        \"cobalt-CalendarDayPicker__day--today\": isToday,\n        \"cobalt-CalendarDayPicker__day--selected\": selected,\n        \"cobalt-CalendarDayPicker__day--disabled\": disabled,\n      })}\n      onMouseEnter={() => {\n        onMouseEnter && onMouseEnter(date, !!disabled)\n      }}\n      onMouseLeave={() => {\n        onMouseLeave && onMouseLeave(date)\n      }}\n      onClick={handleSelectDate}\n      data-day={format(date, \"yyyy-MM-dd\")}\n    >\n      <div className=\"cobalt-CalendarDayPicker__day-inner\">\n        {date.getDate()}\n      </div>\n    </div>\n  )\n}\n\nfunction areEqual(\n  prevProps: CalendarDayPickerDayPropsType,\n  nextProps: CalendarDayPickerDayPropsType\n) {\n  return prevProps.selected === nextProps.selected\n}\n\nconst MemoizedComponent = React.memo(CalendarDayPickerDay, areEqual)\nMemoizedComponent.displayName = \"CalendarDayPickerDay\"\n\nexport { MemoizedComponent as CalendarDayPickerDay }\n"],"names":["classNames"],"mappings":";;;;AAcA,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,YAAY,GACkB,EAAA;IAC9B,MAAM,gBAAgB,GAAG,MAAK;AAC5B,QAAA,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,+BAA+B,EAAE;AACrD,YAAA,sCAAsC,EAAE,OAAO;AAC/C,YAAA,yCAAyC,EAAE,QAAQ;AACnD,YAAA,yCAAyC,EAAE,QAAQ;AACpD,SAAA,CAAC,EACF,YAAY,EAAE,MAAK;YACjB,YAAY,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;AAChD,SAAC,EACD,YAAY,EAAE,MAAK;AACjB,YAAA,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,CAAA;SACnC,EACD,OAAO,EAAE,gBAAgB,EAAA,UAAA,EACf,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,EAAA;QAEpC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qCAAqC,EACjD,EAAA,IAAI,CAAC,OAAO,EAAE,CACX,CACF,EACP;AACH,CAAC;AAED,SAAS,QAAQ,CACf,SAAwC,EACxC,SAAwC,EAAA;AAExC,IAAA,OAAO,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,CAAA;AAClD,CAAC;AAEK,MAAA,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,EAAC;AACpE,iBAAiB,CAAC,WAAW,GAAG,sBAAsB;;;;"}

package/components/Calendar/CalendarDayPicker/CalendarDayPickerMonth.js

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+import { CalendarDayPickerDay as MemoizedComponent } from './CalendarDayPickerDay.js';
+import { format, isSameDay } from 'date-fns';
+import { getWeekDays, getMonthDaysByWeeks } from '../utils.js';
+
+function isDisabled(day, firstAvailableDate, lastAvailableDate) {
+    return (day.getTime() < firstAvailableDate.getTime() ||
+        (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime()));
+}
+function areEqualDays(date1, date2) {
+    return date1 != null && date2 != null && isSameDay(date1, date2);
+}
+const weekdays = getWeekDays();
+const today = new Date().setHours(0, 0, 0, 0);
+function CalendarDayPickerMonth({ month, selectedDate, onSelectDate, onChangeDate, onLeaveDate, firstAvailableDate, lastAvailableDate, locale, }) {
+    const byWeeks = useRef(getMonthDaysByWeeks(month));
+    const onMouseEnter = (day, disabled) => {
+        onChangeDate(day, disabled);
+    };
+    const onSelect = (targetDate) => {
+        if (!areEqualDays(targetDate, selectedDate)) {
+            onSelectDate(targetDate);
+        }
+    };
+    return (React.createElement("div", { className: "cobalt-CalendarDayPicker__month", "data-month": format(month, "yyyy-MM") },
+        React.createElement("div", { className: "cobalt-CalendarDayPicker__month-header" }, format(month, "MMMM yyyy", { locale })),
+        React.createElement("div", { className: "cobalt-CalendarDayPicker__month__weeks-container" },
+            React.createElement("div", { className: "cobalt-CalendarDayPicker__month__week-header" }, weekdays.map((weekday) => (React.createElement("div", { key: weekday.getTime(), className: "cobalt-CalendarDayPicker__month__day-header" }, format(weekday, "iiiiii", { locale }))))),
+            byWeeks.current.map((week, index) => (React.createElement("div", { key: index, className: "cobalt-CalendarDayPicker__month__week" }, week.map((day) => {
+                return (React.createElement(MemoizedComponent, { key: day.getTime(), onMouseEnter: onMouseEnter, onMouseLeave: onLeaveDate, date: day, onSelect: onSelect, isToday: isSameDay(day, today), disabled: isDisabled(day, firstAvailableDate, lastAvailableDate), selected: areEqualDays(day, selectedDate) }));
+            })))))));
+}
+
+export { CalendarDayPickerMonth };
+//# sourceMappingURL=CalendarDayPickerMonth.js.map

package/components/Calendar/CalendarDayPicker/CalendarDayPickerMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDayPickerMonth.js","sources":["../../../../src/components/Calendar/CalendarDayPicker/CalendarDayPickerMonth.tsx"],"sourcesContent":["import React, { useRef } from \"react\"\nimport { CalendarDayPickerDay } from \"./CalendarDayPickerDay\"\nimport { format, isSameDay } from \"date-fns\"\nimport { getMonthDaysByWeeks, getWeekDays } from \"../utils\"\n\ntype CalendarDayPickerMonthPropsType = {\n  month: Date\n  selectedDate?: Date | null\n  onSelectDate: (date: Date) => void\n  onChangeDate: (date: Date, disabled: boolean) => void\n  onLeaveDate?: (date: Date) => void\n  firstAvailableDate: Date\n  lastAvailableDate?: Date\n  locale: any\n}\n\nfunction isDisabled(\n  day: Date,\n  firstAvailableDate: Date,\n  lastAvailableDate: Date | undefined\n) {\n  return (\n    day.getTime() < firstAvailableDate.getTime() ||\n    (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime())\n  )\n}\n\nfunction areEqualDays(\n  date1: Date | null | undefined,\n  date2: Date | null | undefined\n) {\n  return date1 != null && date2 != null && isSameDay(date1, date2)\n}\n\nconst weekdays = getWeekDays()\nconst today = new Date().setHours(0, 0, 0, 0)\n\nexport function CalendarDayPickerMonth({\n  month,\n  selectedDate,\n  onSelectDate,\n  onChangeDate,\n  onLeaveDate,\n  firstAvailableDate,\n  lastAvailableDate,\n  locale,\n}: CalendarDayPickerMonthPropsType) {\n  const byWeeks = useRef(getMonthDaysByWeeks(month))\n\n  const onMouseEnter = (day: Date, disabled: boolean) => {\n    onChangeDate(day, disabled)\n  }\n\n  const onSelect = (targetDate: Date) => {\n    if (!areEqualDays(targetDate, selectedDate)) {\n      onSelectDate(targetDate)\n    }\n  }\n\n  return (\n    <div\n      className=\"cobalt-CalendarDayPicker__month\"\n      data-month={format(month, \"yyyy-MM\")}\n    >\n      <div className=\"cobalt-CalendarDayPicker__month-header\">\n        {format(month, \"MMMM yyyy\", { locale })}\n      </div>\n      <div className=\"cobalt-CalendarDayPicker__month__weeks-container\">\n        <div className=\"cobalt-CalendarDayPicker__month__week-header\">\n          {weekdays.map((weekday) => (\n            <div\n              key={weekday.getTime()}\n              className=\"cobalt-CalendarDayPicker__month__day-header\"\n            >\n              {format(weekday, \"iiiiii\", { locale })}\n            </div>\n          ))}\n        </div>\n        {byWeeks.current.map((week, index) => (\n          <div key={index} className=\"cobalt-CalendarDayPicker__month__week\">\n            {week.map((day) => {\n              return (\n                <CalendarDayPickerDay\n                  key={day.getTime()}\n                  onMouseEnter={onMouseEnter}\n                  onMouseLeave={onLeaveDate}\n                  date={day}\n                  onSelect={onSelect}\n                  isToday={isSameDay(day, today)}\n                  disabled={isDisabled(\n                    day,\n                    firstAvailableDate,\n                    lastAvailableDate\n                  )}\n                  selected={areEqualDays(day, selectedDate)}\n                />\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["CalendarDayPickerDay"],"mappings":"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"}

package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js

@@ -1,24 +1,9 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { CalendarRangePickerDay as MemoizedComponent } from './CalendarRangePickerDay.js';
 import cx from 'classnames';
-import { startOfMonth, endOfMonth, eachDayOfInterval, startOfWeek, endOfWeek, format, isSameDay, getDay, differenceInCalendarDays } from 'date-fns';
+import { startOfMonth, endOfMonth, format, isSameDay, differenceInCalendarDays } from 'date-fns';
+import { getMonthDaysByWeeks, getWeekDays } from '../utils.js';
 
-function daysByWeeks(monthDate) {
-    const firstDayOfMonth = startOfMonth(monthDate);
-    const firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1;
-    const lastDayOfMonth = endOfMonth(monthDate);
-    const days = eachDayOfInterval({
-        start: firstDayOfMonth,
-        end: lastDayOfMonth,
-    });
-    return days.reduce((acc, day, index) => {
-        if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {
-            acc.push([]);
-        }
-        acc[acc.length - 1].push(day);
-        return acc;
-    }, []);
-}
 function isDisabled(day, firstAvailableDate, lastAvailableDate) {
     return (day.getTime() < firstAvailableDate.getTime() ||
         (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime()));
@@ -51,14 +36,11 @@ function isRangeExceeded(startDate, endDate, rangeLimit) {
 function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate = false, isEditingEndDate = false, rangeLimit, firstAvailableDate, lastAvailableDate, locale, }) {
     const firstDayOfMonth = useMemo(() => startOfMonth(date), []);
     const lastDayOfMonth = useMemo(() => endOfMonth(date), []);
-    const byWeeks = useMemo(() => daysByWeeks(date), []);
+    const byWeeks = useMemo(() => getMonthDaysByWeeks(date), []);
     // we use a state for the selected Date to allow the onSelect event to be memoized then still triggering some logic with updated data thanks to the setter+useEffect dependency mechanism
     const [selectedDate, setSelectedDate] = useState(null);
     const today = new Date().setHours(0, 0, 0, 0);
-    const weekdays = useMemo(() => eachDayOfInterval({
-        start: startOfWeek(today, { weekStartsOn: 1 }),
-        end: endOfWeek(today, { weekStartsOn: 1 }),
-    }), []);
+    const weekdays = useMemo(() => getWeekDays(), []);
     const isOutOfRange = isRangeExceeded(startDate, endDate, rangeLimit);
     const isOutOfRangeStartDate = !!isEditingStartDate && isOutOfRange;
     const onMouseEnter = (day, disabled) => {

package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarRangePickerMonth.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\"\nimport { CalendarRangePickerDay } from \"./CalendarRangePickerDay\"\nimport classNames from \"classnames\"\nimport {\n  eachDayOfInterval,\n  startOfMonth,\n  endOfMonth,\n  format,\n  isSameDay,\n  getDay,\n  differenceInCalendarDays,\n  startOfWeek,\n  endOfWeek,\n} from \"date-fns\"\n\ntype Props = {\n  date: Date\n  startDate?: Date\n  endDate?: Date\n  onSelectDate: (date: Date, isOutOfRange?: boolean) => void\n  onChangeDate: (date: Date, isOutOfRange: boolean, disabled: boolean) => void\n  onLeaveDate?: (date: Date) => void\n  isEditingStartDate?: boolean\n  isEditingEndDate?: boolean\n  rangeLimit?: number\n  firstAvailableDate: Date\n  lastAvailableDate?: Date\n  locale: any\n}\n\nfunction daysByWeeks(monthDate: Date): Date[][] {\n  const firstDayOfMonth = startOfMonth(monthDate)\n  const firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1\n  const lastDayOfMonth = endOfMonth(monthDate)\n  const days = eachDayOfInterval({\n    start: firstDayOfMonth,\n    end: lastDayOfMonth,\n  })\n\n  return days.reduce((acc: Date[][], day, index) => {\n    if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {\n      acc.push([])\n    }\n    acc[acc.length - 1].push(day)\n    return acc\n  }, [])\n}\n\nfunction isDisabled(\n  day: Date,\n  firstAvailableDate: Date,\n  lastAvailableDate: Date | undefined\n) {\n  return (\n    day.getTime() < firstAvailableDate.getTime() ||\n    (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime())\n  )\n}\n\nfunction isInvalid(\n  day: Date,\n  startDate: Date | undefined,\n  rangeLimit: number | undefined,\n  isOutOfRange: boolean,\n  isEditingEndDate: boolean | undefined\n) {\n  return (\n    rangeLimit != null &&\n    isOutOfRange &&\n    isEditingEndDate &&\n    startDate != null &&\n    differenceInCalendarDays(day, startDate) >= rangeLimit\n  )\n}\n\nfunction isRange(\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  isOutOfRangeStartDate: boolean\n) {\n  return !!(startDate && endDate) && !isOutOfRangeStartDate\n}\n\nfunction isSelected(\n  day: Date,\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  isStartDay: boolean,\n  isEndDay: boolean,\n  isOutOfRangeStartDate: boolean\n) {\n  return (\n    isStartDay ||\n    isEndDay ||\n    (!isOutOfRangeStartDate &&\n      endDate &&\n      day.getTime() <= endDate.getTime() &&\n      startDate &&\n      day.getTime() > startDate.getTime())\n  )\n}\n\nfunction isRangeExceeded(\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  rangeLimit: number | undefined\n) {\n  return (\n    rangeLimit != null &&\n    startDate != null &&\n    endDate != null &&\n    differenceInCalendarDays(endDate, startDate) >= rangeLimit\n  )\n}\n\nexport function CalendarRangePickerMonth({\n  date,\n  onSelectDate,\n  onChangeDate,\n  onLeaveDate,\n  startDate,\n  endDate,\n  isEditingStartDate = false,\n  isEditingEndDate = false,\n  rangeLimit,\n  firstAvailableDate,\n  lastAvailableDate,\n  locale,\n}: Props) {\n  const firstDayOfMonth = useMemo(() => startOfMonth(date), [])\n  const lastDayOfMonth = useMemo(() => endOfMonth(date), [])\n  const byWeeks = useMemo(() => daysByWeeks(date), [])\n\n  // we use a state for the selected Date to allow the onSelect event to be memoized then still triggering some logic with updated data thanks to the setter+useEffect dependency mechanism\n  const [selectedDate, setSelectedDate] = useState<Date | null>(null)\n\n  const today = new Date().setHours(0, 0, 0, 0)\n\n  const weekdays: Date[] = useMemo(\n    () =>\n      eachDayOfInterval({\n        start: startOfWeek(today, { weekStartsOn: 1 }),\n        end: endOfWeek(today, { weekStartsOn: 1 }),\n      }),\n    []\n  )\n\n  const isOutOfRange = isRangeExceeded(startDate, endDate, rangeLimit)\n\n  const isOutOfRangeStartDate = !!isEditingStartDate && isOutOfRange\n\n  const onMouseEnter = (day: Date, disabled: boolean) => {\n    let isDayOutOfRange = false\n    if (rangeLimit != null) {\n      if (isEditingStartDate) {\n        isDayOutOfRange =\n          endDate != null &&\n          differenceInCalendarDays(endDate, day) >= rangeLimit\n      } else if (isEditingEndDate) {\n        isDayOutOfRange =\n          startDate != null &&\n          differenceInCalendarDays(day, startDate) >= rangeLimit\n      }\n    }\n\n    onChangeDate(day, isDayOutOfRange, disabled)\n  }\n\n  useEffect(() => {\n    // on Date selection...\n    if (selectedDate) {\n      if (isEditingStartDate) {\n        onSelectDate(\n          selectedDate,\n          isRangeExceeded(selectedDate, endDate, rangeLimit)\n        )\n      } else {\n        onSelectDate(\n          selectedDate,\n          isRangeExceeded(startDate, selectedDate, rangeLimit)\n        )\n      }\n    }\n  }, [selectedDate])\n\n  return (\n    <div\n      className={classNames(\"cobalt-CalendarRangePicker__month\", {\n        \"cobalt-CalendarRangePicker__month--invalid\":\n          isOutOfRange && !isEditingStartDate,\n      })}\n      data-month={format(date, \"yyyy-MM\")}\n    >\n      <div className=\"cobalt-CalendarRangePicker__month-header\">\n        {format(date, \"MMMM yyyy\", { locale })}\n      </div>\n      <div className=\"cobalt-CalendarRangePicker__month__weeks-container\">\n        <div className=\"cobalt-CalendarRangePicker__month__week-header\">\n          {weekdays.map((weekday) => (\n            <div\n              key={weekday.getTime()}\n              className=\"cobalt-CalendarRangePicker__month__day-header\"\n            >\n              {format(weekday, \"iiiiii\", { locale })}\n            </div>\n          ))}\n        </div>\n        {byWeeks.map((week, index) => (\n          <div key={index} className=\"cobalt-CalendarRangePicker__month__week\">\n            {week.map((day) => {\n              const isStartDay = startDate != null && isSameDay(day, startDate)\n              const isEndDay = endDate != null && isSameDay(day, endDate)\n              return (\n                <CalendarRangePickerDay\n                  key={day.getTime()}\n                  isEditingStartDate={!!isEditingStartDate}\n                  isEditingEndDate={!!isEditingEndDate}\n                  date={day}\n                  onMouseEnter={onMouseEnter}\n                  onMouseLeave={onLeaveDate}\n                  onSelect={setSelectedDate}\n                  isToday={isSameDay(day, today)}\n                  isStartDay={isStartDay}\n                  isEndDay={isEndDay}\n                  isFirstDayOfMonth={isSameDay(day, firstDayOfMonth)}\n                  isLastDayOfMonth={isSameDay(day, lastDayOfMonth)}\n                  isRange={isRange(startDate, endDate, isOutOfRangeStartDate)}\n                  invalid={isInvalid(\n                    day,\n                    startDate,\n                    rangeLimit,\n                    isOutOfRange,\n                    isEditingEndDate\n                  )}\n                  subdued={\n                    (isStartDay && isEditingEndDate) ||\n                    (isEndDay && isEditingStartDate)\n                  }\n                  disabled={isDisabled(\n                    day,\n                    firstAvailableDate,\n                    lastAvailableDate\n                  )}\n                  selected={isSelected(\n                    day,\n                    startDate,\n                    endDate,\n                    isStartDay,\n                    isEndDay,\n                    isOutOfRangeStartDate\n                  )}\n                />\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["classNames","CalendarRangePickerDay"],"mappings":"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"}
+{"version":3,"file":"CalendarRangePickerMonth.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\"\nimport { CalendarRangePickerDay } from \"./CalendarRangePickerDay\"\nimport classNames from \"classnames\"\nimport {\n  startOfMonth,\n  endOfMonth,\n  format,\n  isSameDay,\n  differenceInCalendarDays,\n} from \"date-fns\"\nimport { getMonthDaysByWeeks, getWeekDays } from \"../utils\"\n\ntype Props = {\n  date: Date\n  startDate?: Date\n  endDate?: Date\n  onSelectDate: (date: Date, isOutOfRange?: boolean) => void\n  onChangeDate: (date: Date, isOutOfRange: boolean, disabled: boolean) => void\n  onLeaveDate?: (date: Date) => void\n  isEditingStartDate?: boolean\n  isEditingEndDate?: boolean\n  rangeLimit?: number\n  firstAvailableDate: Date\n  lastAvailableDate?: Date\n  locale: any\n}\n\nfunction isDisabled(\n  day: Date,\n  firstAvailableDate: Date,\n  lastAvailableDate: Date | undefined\n) {\n  return (\n    day.getTime() < firstAvailableDate.getTime() ||\n    (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime())\n  )\n}\n\nfunction isInvalid(\n  day: Date,\n  startDate: Date | undefined,\n  rangeLimit: number | undefined,\n  isOutOfRange: boolean,\n  isEditingEndDate: boolean | undefined\n) {\n  return (\n    rangeLimit != null &&\n    isOutOfRange &&\n    isEditingEndDate &&\n    startDate != null &&\n    differenceInCalendarDays(day, startDate) >= rangeLimit\n  )\n}\n\nfunction isRange(\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  isOutOfRangeStartDate: boolean\n) {\n  return !!(startDate && endDate) && !isOutOfRangeStartDate\n}\n\nfunction isSelected(\n  day: Date,\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  isStartDay: boolean,\n  isEndDay: boolean,\n  isOutOfRangeStartDate: boolean\n) {\n  return (\n    isStartDay ||\n    isEndDay ||\n    (!isOutOfRangeStartDate &&\n      endDate &&\n      day.getTime() <= endDate.getTime() &&\n      startDate &&\n      day.getTime() > startDate.getTime())\n  )\n}\n\nfunction isRangeExceeded(\n  startDate: Date | undefined,\n  endDate: Date | undefined,\n  rangeLimit: number | undefined\n) {\n  return (\n    rangeLimit != null &&\n    startDate != null &&\n    endDate != null &&\n    differenceInCalendarDays(endDate, startDate) >= rangeLimit\n  )\n}\n\nexport function CalendarRangePickerMonth({\n  date,\n  onSelectDate,\n  onChangeDate,\n  onLeaveDate,\n  startDate,\n  endDate,\n  isEditingStartDate = false,\n  isEditingEndDate = false,\n  rangeLimit,\n  firstAvailableDate,\n  lastAvailableDate,\n  locale,\n}: Props) {\n  const firstDayOfMonth = useMemo(() => startOfMonth(date), [])\n  const lastDayOfMonth = useMemo(() => endOfMonth(date), [])\n  const byWeeks = useMemo(() => getMonthDaysByWeeks(date), [])\n\n  // we use a state for the selected Date to allow the onSelect event to be memoized then still triggering some logic with updated data thanks to the setter+useEffect dependency mechanism\n  const [selectedDate, setSelectedDate] = useState<Date | null>(null)\n\n  const today = new Date().setHours(0, 0, 0, 0)\n\n  const weekdays: Date[] = useMemo(() => getWeekDays(), [])\n\n  const isOutOfRange = isRangeExceeded(startDate, endDate, rangeLimit)\n\n  const isOutOfRangeStartDate = !!isEditingStartDate && isOutOfRange\n\n  const onMouseEnter = (day: Date, disabled: boolean) => {\n    let isDayOutOfRange = false\n    if (rangeLimit != null) {\n      if (isEditingStartDate) {\n        isDayOutOfRange =\n          endDate != null &&\n          differenceInCalendarDays(endDate, day) >= rangeLimit\n      } else if (isEditingEndDate) {\n        isDayOutOfRange =\n          startDate != null &&\n          differenceInCalendarDays(day, startDate) >= rangeLimit\n      }\n    }\n\n    onChangeDate(day, isDayOutOfRange, disabled)\n  }\n\n  useEffect(() => {\n    // on Date selection...\n    if (selectedDate) {\n      if (isEditingStartDate) {\n        onSelectDate(\n          selectedDate,\n          isRangeExceeded(selectedDate, endDate, rangeLimit)\n        )\n      } else {\n        onSelectDate(\n          selectedDate,\n          isRangeExceeded(startDate, selectedDate, rangeLimit)\n        )\n      }\n    }\n  }, [selectedDate])\n\n  return (\n    <div\n      className={classNames(\"cobalt-CalendarRangePicker__month\", {\n        \"cobalt-CalendarRangePicker__month--invalid\":\n          isOutOfRange && !isEditingStartDate,\n      })}\n      data-month={format(date, \"yyyy-MM\")}\n    >\n      <div className=\"cobalt-CalendarRangePicker__month-header\">\n        {format(date, \"MMMM yyyy\", { locale })}\n      </div>\n      <div className=\"cobalt-CalendarRangePicker__month__weeks-container\">\n        <div className=\"cobalt-CalendarRangePicker__month__week-header\">\n          {weekdays.map((weekday) => (\n            <div\n              key={weekday.getTime()}\n              className=\"cobalt-CalendarRangePicker__month__day-header\"\n            >\n              {format(weekday, \"iiiiii\", { locale })}\n            </div>\n          ))}\n        </div>\n        {byWeeks.map((week, index) => (\n          <div key={index} className=\"cobalt-CalendarRangePicker__month__week\">\n            {week.map((day) => {\n              const isStartDay = startDate != null && isSameDay(day, startDate)\n              const isEndDay = endDate != null && isSameDay(day, endDate)\n              return (\n                <CalendarRangePickerDay\n                  key={day.getTime()}\n                  isEditingStartDate={!!isEditingStartDate}\n                  isEditingEndDate={!!isEditingEndDate}\n                  date={day}\n                  onMouseEnter={onMouseEnter}\n                  onMouseLeave={onLeaveDate}\n                  onSelect={setSelectedDate}\n                  isToday={isSameDay(day, today)}\n                  isStartDay={isStartDay}\n                  isEndDay={isEndDay}\n                  isFirstDayOfMonth={isSameDay(day, firstDayOfMonth)}\n                  isLastDayOfMonth={isSameDay(day, lastDayOfMonth)}\n                  isRange={isRange(startDate, endDate, isOutOfRangeStartDate)}\n                  invalid={isInvalid(\n                    day,\n                    startDate,\n                    rangeLimit,\n                    isOutOfRange,\n                    isEditingEndDate\n                  )}\n                  subdued={\n                    (isStartDay && isEditingEndDate) ||\n                    (isEndDay && isEditingStartDate)\n                  }\n                  disabled={isDisabled(\n                    day,\n                    firstAvailableDate,\n                    lastAvailableDate\n                  )}\n                  selected={isSelected(\n                    day,\n                    startDate,\n                    endDate,\n                    isStartDay,\n                    isEndDay,\n                    isOutOfRangeStartDate\n                  )}\n                />\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["classNames","CalendarRangePickerDay"],"mappings":"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"}

package/components/Calendar/utils.js

@@ -0,0 +1,29 @@
+import setISODay from 'date-fns/setISODay';
+import startOfMonth from 'date-fns/startOfMonth';
+import getDay from 'date-fns/getDay';
+import endOfMonth from 'date-fns/endOfMonth';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+
+const getWeekDays = () => {
+    const now = new Date().setHours(0, 0, 0, 0);
+    return [...Array(7).keys()].map((index) => setISODay(now, index + 1));
+};
+const getMonthDaysByWeeks = (monthDate) => {
+    const firstDayOfMonth = startOfMonth(monthDate);
+    const firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1;
+    const lastDayOfMonth = endOfMonth(monthDate);
+    const days = eachDayOfInterval({
+        start: firstDayOfMonth,
+        end: lastDayOfMonth,
+    });
+    return days.reduce((acc, day, index) => {
+        if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(day);
+        return acc;
+    }, []);
+};
+
+export { getMonthDaysByWeeks, getWeekDays };
+//# sourceMappingURL=utils.js.map

package/components/Calendar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/Calendar/utils.ts"],"sourcesContent":["import setISODay from \"date-fns/setISODay\"\nimport startOfMonth from \"date-fns/startOfMonth\"\nimport getDay from \"date-fns/getDay\"\nimport endOfMonth from \"date-fns/endOfMonth\"\nimport eachDayOfInterval from \"date-fns/eachDayOfInterval\"\n\nexport const getWeekDays = () => {\n  const now = new Date().setHours(0, 0, 0, 0)\n  return [...Array(7).keys()].map((index) => setISODay(now, index + 1))\n}\n\nexport const getMonthDaysByWeeks = (monthDate: Date): Date[][] => {\n  const firstDayOfMonth = startOfMonth(monthDate)\n  const firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1\n  const lastDayOfMonth = endOfMonth(monthDate)\n  const days = eachDayOfInterval({\n    start: firstDayOfMonth,\n    end: lastDayOfMonth,\n  })\n\n  return days.reduce((acc: Date[][], day, index) => {\n    if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {\n      acc.push([])\n    }\n    acc[acc.length - 1].push(day)\n    return acc\n  }, [])\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;AACvE,EAAC;AAEY,MAAA,mBAAmB,GAAG,CAAC,SAAe,KAAc;AAC/D,IAAA,MAAM,eAAe,GAAG,YAAY,CAAC,SAAS,CAAC,CAAA;IAC/C,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;AACzD,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAC5C,MAAM,IAAI,GAAG,iBAAiB,CAAC;AAC7B,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,GAAG,EAAE,cAAc;AACpB,KAAA,CAAC,CAAA;IAEF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAa,EAAE,GAAG,EAAE,KAAK,KAAI;AAC/C,QAAA,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,qBAAqB,IAAI,CAAC,KAAK,CAAC,EAAE;AAC5D,YAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACb,SAAA;AACD,QAAA,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC7B,QAAA,OAAO,GAAG,CAAA;KACX,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}

package/components/Modal/index.js

@@ -12,7 +12,7 @@ import { getScrollbarWidth } from '../utils/dom.js';
 // Only for the API, render nothing, we use ModalFooterInternal internally
 const ModalFooterAPI = (_props) => null;
 const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
-const _Modal = forwardRef(({ ["aria-label"]: ariaLabel, children, isOpen, close, overflowHidden = true, initialFocusRef, bodySpacing, onDismissAttempt, onHidden, onShow, title, skipAnimation = { enter: false, leave: false }, fullHeight, fullWidth, }, ref) => {
+const _Modal = forwardRef(({ ["aria-label"]: ariaLabel, children, isOpen, className, close, overflowHidden = true, initialFocusRef, bodySpacing, onDismissAttempt, onHidden, onShow, title, skipAnimation = { enter: false, leave: false }, fullHeight, fullWidth, }, ref) => {
     const defaultBodyStyle = useRef({
         paddingRight: document.body.style.paddingRight,
         overflow: document.body.style.overflow,
@@ -91,7 +91,7 @@ const _Modal = forwardRef(({ ["aria-label"]: ariaLabel, children, isOpen, close,
         return;
     };
     return (React.createElement(React.Fragment, null, transition((styles, isOpenState) => isOpenState && (React.createElement(AnimatedDialogOverlay, { initialFocusRef: initialFocusRef, onDismiss: getDismissHandler(close), className: "cobalt-modal__overlay", style: { opacity: styles.overlayOpacity }, onTouchEnd: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), dangerouslyBypassScrollLock: true },
-        React.createElement(AnimatedDialogContent, { className: cx("cobalt-modal", {
+        React.createElement(AnimatedDialogContent, { className: cx("cobalt-modal", className, {
                 "cobalt-modal--desktop": !isMobile,
                 "cobalt-modal--mobile": isMobile,
                 "cobalt-modal--overflowHidden": overflowHidden,

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: string\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      [\"aria-label\"]: ariaLabel,\n      children,\n      isOpen,\n      close,\n      overflowHidden = true,\n      initialFocusRef,\n      bodySpacing,\n      onDismissAttempt,\n      onHidden,\n      onShow,\n      title,\n      skipAnimation = { enter: false, leave: false },\n      fullHeight,\n      fullWidth,\n    }: ModalPropsType,\n    ref\n  ) => {\n    const defaultBodyStyle = useRef({\n      paddingRight: document.body.style.paddingRight,\n      overflow: document.body.style.overflow,\n      isRestored: false,\n    })\n\n    const restoreDefaultBodyStyle = () => {\n      if (defaultBodyStyle.current && !defaultBodyStyle.current.isRestored) {\n        const { overflow, paddingRight } = defaultBodyStyle.current\n\n        document.body.style.overflow = overflow\n        document.body.style.paddingRight = paddingRight\n\n        defaultBodyStyle.current.isRestored = true\n      }\n    }\n\n    useEffect(() => {\n      // disable / enable body scroll\n      // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n      // https://github.com/reach/reach-ui/issues/678\n      // dangerouslyBypassScrollLock is used to disabled it\n      // + fake scrollbar width to avoid visual layout shift\n      if (isOpen) {\n        defaultBodyStyle.current.isRestored = false\n\n        document.body.style.paddingRight = `${\n          getScrollbarWidth() +\n          parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n        }px` // to avoid visual shift due to removing an existing scrollbar\n\n        document.body.style.overflow = \"hidden\"\n      }\n      return () => {\n        isOpen && restoreDefaultBodyStyle()\n      }\n    }, [isOpen])\n\n    const { isMobile } = useBreakpoint()\n\n    const transformTransitionOut = isMobile ? 500 : -20\n\n    const springConfig = { tension: 300, friction: 30, clamp: true }\n\n    const transition = useTransition(isOpen, {\n      from: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n      },\n      enter: {\n        immediate: skipAnimation.enter,\n        overlayOpacity: 1,\n        modalTransform: 0,\n        config: springConfig,\n      },\n      leave: {\n        immediate: skipAnimation.leave,\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n        config: springConfig,\n      },\n      onStart: (_a: unknown, _b: unknown, isReady: boolean) => {\n        isReady && isOpen && onShow && onShow()\n      },\n      onDestroyed: (isTransitioned) => {\n        !isOpen && restoreDefaultBodyStyle()\n        if (onHidden && isTransitioned) onHidden()\n      },\n    })\n\n    const AnimatedDialogOverlay = animated(DialogOverlay)\n    const AnimatedDialogContent = animated(DialogContent)\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n\n    let header: React.ReactNode = null\n    if (title || close) {\n      header = <ModalHeader title={title} {...(close ? { close } : {})} />\n    }\n    const hasHeader = !!title || !!close\n\n    let footer: React.ReactNode = null\n    if (React.isValidElement(modalFooter)) {\n      footer = <ModalFooter {...modalFooter.props} />\n    }\n\n    const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n      if (onClose) return onClose\n      if (onDismissAttempt) return onDismissAttempt\n      return\n    }\n\n    return (\n      <>\n        {transition(\n          (styles, isOpenState) =>\n            isOpenState && (\n              <AnimatedDialogOverlay\n                initialFocusRef={initialFocusRef}\n                onDismiss={getDismissHandler(close)}\n                className=\"cobalt-modal__overlay\"\n                style={{ opacity: styles.overlayOpacity }}\n                onTouchEnd={(e) => e.stopPropagation()}\n                onMouseUp={(e) => e.stopPropagation()}\n                dangerouslyBypassScrollLock\n              >\n                <AnimatedDialogContent\n                  className={cx(\"cobalt-modal\", {\n                    \"cobalt-modal--desktop\": !isMobile,\n                    \"cobalt-modal--mobile\": isMobile,\n                    \"cobalt-modal--overflowHidden\": overflowHidden,\n                    \"cobalt-modal--fullHeight\": fullHeight,\n                    \"cobalt-modal--fullWidth\": fullWidth,\n                  })}\n                  aria-label={ariaLabel}\n                  style={{ translateY: styles.modalTransform }}\n                  ref={ref}\n                >\n                  {header}\n                  <ModalBody\n                    bodySpacing={bodySpacing}\n                    hasHeader={hasHeader}\n                    hasFooter={!!footer}\n                  >\n                    {children}\n                  </ModalBody>\n                  {footer}\n                </AnimatedDialogContent>\n              </AnimatedDialogOverlay>\n            )\n        )}\n      </>\n    )\n  }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Custom css classes to add to the modal\n   */\n  className?: string\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: string\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      [\"aria-label\"]: ariaLabel,\n      children,\n      isOpen,\n      className,\n      close,\n      overflowHidden = true,\n      initialFocusRef,\n      bodySpacing,\n      onDismissAttempt,\n      onHidden,\n      onShow,\n      title,\n      skipAnimation = { enter: false, leave: false },\n      fullHeight,\n      fullWidth,\n    }: ModalPropsType,\n    ref\n  ) => {\n    const defaultBodyStyle = useRef({\n      paddingRight: document.body.style.paddingRight,\n      overflow: document.body.style.overflow,\n      isRestored: false,\n    })\n\n    const restoreDefaultBodyStyle = () => {\n      if (defaultBodyStyle.current && !defaultBodyStyle.current.isRestored) {\n        const { overflow, paddingRight } = defaultBodyStyle.current\n\n        document.body.style.overflow = overflow\n        document.body.style.paddingRight = paddingRight\n\n        defaultBodyStyle.current.isRestored = true\n      }\n    }\n\n    useEffect(() => {\n      // disable / enable body scroll\n      // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n      // https://github.com/reach/reach-ui/issues/678\n      // dangerouslyBypassScrollLock is used to disabled it\n      // + fake scrollbar width to avoid visual layout shift\n      if (isOpen) {\n        defaultBodyStyle.current.isRestored = false\n\n        document.body.style.paddingRight = `${\n          getScrollbarWidth() +\n          parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n        }px` // to avoid visual shift due to removing an existing scrollbar\n\n        document.body.style.overflow = \"hidden\"\n      }\n      return () => {\n        isOpen && restoreDefaultBodyStyle()\n      }\n    }, [isOpen])\n\n    const { isMobile } = useBreakpoint()\n\n    const transformTransitionOut = isMobile ? 500 : -20\n\n    const springConfig = { tension: 300, friction: 30, clamp: true }\n\n    const transition = useTransition(isOpen, {\n      from: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n      },\n      enter: {\n        immediate: skipAnimation.enter,\n        overlayOpacity: 1,\n        modalTransform: 0,\n        config: springConfig,\n      },\n      leave: {\n        immediate: skipAnimation.leave,\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n        config: springConfig,\n      },\n      onStart: (_a: unknown, _b: unknown, isReady: boolean) => {\n        isReady && isOpen && onShow && onShow()\n      },\n      onDestroyed: (isTransitioned) => {\n        !isOpen && restoreDefaultBodyStyle()\n        if (onHidden && isTransitioned) onHidden()\n      },\n    })\n\n    const AnimatedDialogOverlay = animated(DialogOverlay)\n    const AnimatedDialogContent = animated(DialogContent)\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n\n    let header: React.ReactNode = null\n    if (title || close) {\n      header = <ModalHeader title={title} {...(close ? { close } : {})} />\n    }\n    const hasHeader = !!title || !!close\n\n    let footer: React.ReactNode = null\n    if (React.isValidElement(modalFooter)) {\n      footer = <ModalFooter {...modalFooter.props} />\n    }\n\n    const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n      if (onClose) return onClose\n      if (onDismissAttempt) return onDismissAttempt\n      return\n    }\n\n    return (\n      <>\n        {transition(\n          (styles, isOpenState) =>\n            isOpenState && (\n              <AnimatedDialogOverlay\n                initialFocusRef={initialFocusRef}\n                onDismiss={getDismissHandler(close)}\n                className=\"cobalt-modal__overlay\"\n                style={{ opacity: styles.overlayOpacity }}\n                onTouchEnd={(e) => e.stopPropagation()}\n                onMouseUp={(e) => e.stopPropagation()}\n                dangerouslyBypassScrollLock\n              >\n                <AnimatedDialogContent\n                  className={cx(\"cobalt-modal\", className, {\n                    \"cobalt-modal--desktop\": !isMobile,\n                    \"cobalt-modal--mobile\": isMobile,\n                    \"cobalt-modal--overflowHidden\": overflowHidden,\n                    \"cobalt-modal--fullHeight\": fullHeight,\n                    \"cobalt-modal--fullWidth\": fullWidth,\n                  })}\n                  aria-label={ariaLabel}\n                  style={{ translateY: styles.modalTransform }}\n                  ref={ref}\n                >\n                  {header}\n                  <ModalBody\n                    bodySpacing={bodySpacing}\n                    hasHeader={hasHeader}\n                    hasFooter={!!footer}\n                  >\n                    {children}\n                  </ModalBody>\n                  {footer}\n                </AnimatedDialogContent>\n              </AnimatedDialogOverlay>\n            )\n        )}\n      </>\n    )\n  }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":";;;;;;;;;;;AA6EA;AACa,MAAA,cAAc,GAAG,CAAC,MAA4B,KAAK,KAAI;MAEvD,yBAAyB,GAAG,CACvC,SAA0B,KAE1B,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,IAAI,KAAK,eAAc;AAEtE,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EACE,CAAC,YAAY,GAAG,SAAS,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,cAAc,GAAG,IAAI,EACrB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,aAAa,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAC9C,UAAU,EACV,SAAS,GACM,EACjB,GAAG,KACD;IACF,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAC9B,QAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;AAC9C,QAAA,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;AACtC,QAAA,UAAU,EAAE,KAAK;AAClB,KAAA,CAAC,CAAA;IAEF,MAAM,uBAAuB,GAAG,MAAK;QACnC,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,UAAU,EAAE;YACpE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAA;YAE3D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;YACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAA;AAE/C,YAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAA;AAC3C,SAAA;AACH,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;;;;;;AAMb,QAAA,IAAI,MAAM,EAAE;AACV,YAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAA;YAE3C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,CACjC,EAAA,iBAAiB,EAAE;AACnB,gBAAA,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAClE,CAAI,EAAA,CAAA,CAAA;YAEJ,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACxC,SAAA;AACD,QAAA,OAAO,MAAK;YACV,MAAM,IAAI,uBAAuB,EAAE,CAAA;AACrC,SAAC,CAAA;AACH,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAEZ,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAA;AAEpC,IAAA,MAAM,sBAAsB,GAAG,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAE,CAAA;AAEnD,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;AAEhE,IAAA,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE;AACvC,QAAA,IAAI,EAAE;AACJ,YAAA,cAAc,EAAE,CAAC;AACjB,YAAA,cAAc,EAAE,sBAAsB;AACvC,SAAA;AACD,QAAA,KAAK,EAAE;YACL,SAAS,EAAE,aAAa,CAAC,KAAK;AAC9B,YAAA,cAAc,EAAE,CAAC;AACjB,YAAA,cAAc,EAAE,CAAC;AACjB,YAAA,MAAM,EAAE,YAAY;AACrB,SAAA;AACD,QAAA,KAAK,EAAE;YACL,SAAS,EAAE,aAAa,CAAC,KAAK;AAC9B,YAAA,cAAc,EAAE,CAAC;AACjB,YAAA,cAAc,EAAE,sBAAsB;AACtC,YAAA,MAAM,EAAE,YAAY;AACrB,SAAA;QACD,OAAO,EAAE,CAAC,EAAW,EAAE,EAAW,EAAE,OAAgB,KAAI;AACtD,YAAA,OAAO,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,EAAE,CAAA;SACxC;AACD,QAAA,WAAW,EAAE,CAAC,cAAc,KAAI;AAC9B,YAAA,CAAC,MAAM,IAAI,uBAAuB,EAAE,CAAA;YACpC,IAAI,QAAQ,IAAI,cAAc;AAAE,gBAAA,QAAQ,EAAE,CAAA;SAC3C;AACF,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AACrD,IAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IAErD,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAC1D,yBAAyB,CAAC,CAAC,CAAC,CAC7B,CAAA;IAED,IAAI,MAAM,GAAoB,IAAI,CAAA;IAClC,IAAI,KAAK,IAAI,KAAK,EAAE;QAClB,MAAM,GAAG,oBAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,EAAM,IAAC,KAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAA,CAAI,CAAA;AACrE,KAAA;IACD,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAA;IAEpC,IAAI,MAAM,GAAoB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE;QACrC,MAAM,GAAG,oBAAC,WAAW,EAAA,EAAA,GAAK,WAAW,CAAC,KAAK,GAAI,CAAA;AAChD,KAAA;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,OAAiC,KAAI;AAC9D,QAAA,IAAI,OAAO;AAAE,YAAA,OAAO,OAAO,CAAA;AAC3B,QAAA,IAAI,gBAAgB;AAAE,YAAA,OAAO,gBAAgB,CAAA;QAC7C,OAAM;AACR,KAAC,CAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,UAAU,CACT,CAAC,MAAM,EAAE,WAAW,KAClB,WAAW,KACT,KAAA,CAAA,aAAA,CAAC,qBAAqB,EAAA,EACpB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC,EACnC,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,cAAc,EAAE,EACzC,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EACtC,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EACrC,2BAA2B,EAAA,IAAA,EAAA;QAE3B,KAAC,CAAA,aAAA,CAAA,qBAAqB,IACpB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE;gBACvC,uBAAuB,EAAE,CAAC,QAAQ;AAClC,gBAAA,sBAAsB,EAAE,QAAQ;AAChC,gBAAA,8BAA8B,EAAE,cAAc;AAC9C,gBAAA,0BAA0B,EAAE,UAAU;AACtC,gBAAA,yBAAyB,EAAE,SAAS;AACrC,aAAA,CAAC,EACU,YAAA,EAAA,SAAS,EACrB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,cAAc,EAAE,EAC5C,GAAG,EAAE,GAAG,EAAA;YAEP,MAAM;AACP,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACR,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,CAAC,CAAC,MAAM,EAAA,EAElB,QAAQ,CACC;AACX,YAAA,MAAM,CACe,CACF,CACzB,CACJ,CACA,EACJ;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,OAAO,CAAA;AAE5B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE;;;;"}

package/index.js

@@ -13,6 +13,7 @@ export { Flag } from './components/Flag/index.js';
 export { Flash } from './components/Flash/index.js';
 export { default as Helper } from './components/Helper/index.js';
 export { CalendarRangePicker } from './components/Calendar/CalendarRangePicker/CalendarRangePicker.js';
+export { CalendarDayPicker } from './components/Calendar/CalendarDayPicker/CalendarDayPicker.js';
 export { Card, CardSection } from './components/Card/index.js';
 export { BUNDLED_ICONS, Icon, iconColors, isIconSource } from './components/Icon/index.js';
 export { default as Modal } from './components/Modal/index.js';
@@ -45,6 +46,7 @@ export { CalendarView } from './components/Calendar/CalendarView/index.js';
 export { default as Popover } from './components/Popover/index.js';
 export { default as HorizontalList, HorizontalListPaddingBlock } from './components/HorizontalList/index.js';
 export { default as useBreakpoint } from './hooks/useBreakpoint.js';
+export { getMonthDaysByWeeks, getWeekDays } from './components/Calendar/utils.js';
 export { default as AccountDetailsIcon } from './components/Icon/__generated__/AccountDetailsIcon.js';
 export { default as AddPictureIcon } from './components/Icon/__generated__/AddPictureIcon.js';
 export { default as AirConditioningIcon } from './components/Icon/__generated__/AirConditioningIcon.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -34,8 +34,8 @@
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "4.0.2",
-    "postcss": "8.4.28",
+    "nanoid": "5.0.1",
+    "postcss": "8.4.30",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -44,42 +44,42 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@getaround-eu/babel-preset-app": "1.4.2",
-    "@getaround-eu/eslint-config": "2.0.4",
+    "@getaround-eu/babel-preset-app": "1.4.4",
+    "@getaround-eu/eslint-config": "3.0.0",
     "@getaround-eu/prettier-config": "1.2.0",
-    "@getaround-eu/stylelint-config": "2.0.1",
+    "@getaround-eu/stylelint-config": "3.0.0",
     "@getaround-eu/ts-config": "2.2.0",
     "@percy/storybook": "4.3.6",
     "@rollup/plugin-json": "6.0.0",
-    "@rushstack/eslint-patch": "1.3.3",
-    "@storybook/addon-essentials": "7.3.2",
-    "@storybook/addons": "7.3.2",
-    "@storybook/blocks": "7.3.2",
-    "@storybook/react": "7.3.2",
-    "@storybook/react-webpack5": "7.3.2",
+    "@rushstack/eslint-patch": "1.4.0",
+    "@storybook/addon-essentials": "7.4.2",
+    "@storybook/addons": "7.4.2",
+    "@storybook/blocks": "7.4.2",
+    "@storybook/react": "7.4.2",
+    "@storybook/react-webpack5": "7.4.2",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.1",
-    "@types/jest": "29.5.3",
+    "@types/jest": "29.5.5",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/prettier": "2.7.3",
+    "@types/prettier": "3.0.0",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "core-js": "3.32.1",
+    "core-js": "3.32.2",
     "css-loader": "6.8.1",
-    "eslint": "8.47.0",
+    "eslint": "8.49.0",
     "eslint-plugin-storybook": "^0.6.13",
     "file-loader": "6.2.0",
-    "jest": "29.6.3",
-    "jest-environment-jsdom": "29.6.3",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "nested-object-access": "^0.2.5",
     "np": "8.0.4",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "7.3.3",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -88,22 +88,22 @@
     "regenerator-runtime": "0.14.0",
     "remark-gfm": "^3.0.1",
     "rollup": "2.79.1",
-    "rollup-plugin-copy": "3.4.0",
+    "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.35.0",
-    "sass": "1.66.1",
+    "sass": "1.67.0",
     "sass-loader": "13.3.2",
-    "sharp": "0.32.5",
+    "sharp": "0.32.6",
     "sharp-cli": "4.1.1",
-    "storybook": "7.3.2",
+    "storybook": "7.4.2",
     "style-loader": "3.3.3",
     "stylelint": "15.10.3",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.0.2",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   },
   "scripts": {
     "build": "./scripts/build.sh",

package/styles/components/Calendar/CalendarDayPicker/index.scss

@@ -0,0 +1,175 @@
+@use "sass:math";
+
+.cobalt-CalendarDayPicker {
+  $calendar-day-inner-height: 24px;
+  $calendar-day-padding: 6px;
+  $calendar-day-size: $calendar-day-inner-height + ($calendar-day-padding * 2);
+  $calendar-selected-size: $calendar-day-inner-height + 8px;
+
+  @mixin disk {
+    position: absolute;
+    z-index: -1;
+    top: math.div($calendar-day-inner-height - $calendar-selected-size, 2);
+    left: 0;
+    right: 0;
+
+    margin: auto;
+
+    height: $calendar-selected-size;
+    width: $calendar-selected-size;
+
+    content: "";
+
+    border-radius: 50%;
+  }
+
+  position: relative;
+
+  @include breakpoint($until: sm) {
+    &__months-container {
+      flex-direction: column;
+
+      gap: spacing(sm);
+    }
+  }
+
+  &__months-container {
+    display: flex;
+  }
+
+  &__months-container > &__month {
+    margin: 0 8px;
+  }
+
+  &__month {
+    @include bg-color(secondary);
+    flex: 1;
+  }
+
+  &__month-header {
+    @include c-text-title-sm;
+    @include text-color(base);
+    margin-bottom: 12px;
+    padding: 4px;
+
+    text-align: center;
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+
+  &__month__week {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    margin: 0;
+  }
+
+  &__month__week ~ &__month__week {
+    justify-content: flex-start;
+  }
+
+  &__month__week-header {
+    display: flex;
+    margin-bottom: 6px;
+  }
+
+  &__month__day-header {
+    @include text-color(subdued);
+    flex: 1;
+
+    text-align: center;
+    text-transform: capitalize;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  &__day {
+    position: relative;
+
+    z-index: 1;
+
+    padding: $calendar-day-padding 0;
+
+    box-sizing: border-box;
+
+    flex-basis: calc(100% / 7);
+
+    min-width: $calendar-selected-size;
+
+    text-align: center;
+
+    font-size: 13px;
+
+    line-height: $calendar-day-inner-height;
+
+    cursor: pointer;
+
+    .cobalt-CalendarDayPicker__day-inner {
+      position: relative;
+
+      z-index: 1;
+    }
+
+    &--today {
+      @include text-color(accent);
+      font-weight: 600;
+    }
+
+    &:not(&--disabled):not(&--selected):hover
+      .cobalt-CalendarDayPicker__day-inner {
+      font-weight: 600;
+    }
+
+    &:not(&--disabled):not(&--selected):hover
+      .cobalt-CalendarDayPicker__day-inner:after {
+      @include disk;
+      @include bg-color(accentAlt);
+    }
+
+    &--selected .cobalt-CalendarDayPicker__day-inner:after {
+      @include disk;
+      @include bg-color(accent);
+
+      box-shadow: var(--c-background-accentAlt) 0 2px 6px 0;
+    }
+
+    &--selected .cobalt-CalendarDayPicker__day-inner {
+      @include text-color(inversed);
+      font-weight: 600;
+    }
+
+    &--disabled {
+      color: var(--c-navy-200);
+
+      cursor: auto;
+    }
+  }
+
+  &__message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin: 0;
+
+    padding: 0 spacing(sm);
+
+    height: 0;
+
+    opacity: 0;
+
+    transition:
+      height 350ms,
+      opacity 350ms;
+
+    &--show {
+      height: 40px;
+
+      opacity: 1;
+    }
+
+    .cobalt-Hint {
+      margin: 0;
+    }
+  }
+}

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -135,7 +135,8 @@
     }
 
     &--disabled {
-      @include text-color(subdued);
+      color: var(--c-navy-200);
+
       cursor: auto;
     }
 
@@ -172,7 +173,8 @@
       .cobalt-CalendarRangePicker__day-inner:before {
       @include start-end-day;
 
-      box-shadow: var(--c-background-secondary) 0 0 0 2px,
+      box-shadow:
+        var(--c-background-secondary) 0 0 0 2px,
         var(--c-background-accent) 0 0 0 4px;
     }
 
@@ -350,7 +352,9 @@
 
     opacity: 0;
 
-    transition: height 350ms, opacity 350ms;
+    transition:
+      height 350ms,
+      opacity 350ms;
 
     &--show {
       height: 40px;

package/styles/components/Form/Autocomplete/index.scss

@@ -42,7 +42,9 @@
 
     background-color: color(white);
 
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06), 0 6px 6px 0 rgba(0, 0, 0, 0.04),
+    box-shadow:
+      0 2px 2px 0 rgba(0, 0, 0, 0.06),
+      0 6px 6px 0 rgba(0, 0, 0, 0.04),
       0 8px 8px 0 rgba(0, 0, 0, 0.06);
 
     border-top-width: 0;

package/styles/components.scss

@@ -3,6 +3,7 @@
 @import "./components/BulletList/index";
 @import "./components/Buttons/index";
 @import "./components/Calendar/CalendarRangePicker/index";
+@import "./components/Calendar/CalendarDayPicker/index";
 @import "./components/Callout/index";
 @import "./components/Card/index";
 @import "./components/Cell/index";

package/types/components/Calendar/CalendarDayPicker/CalendarDayPicker.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { FormElementStatus } from "../../Form/form";
+type CalendarDayPickerPropsType = {
+    numberOfMonths?: number;
+    firstMonthDate?: Date;
+    firstAvailableDate?: Date;
+    lastAvailableDate?: Date;
+    selectedDate?: Date | null;
+    hint?: {
+        status?: FormElementStatus;
+        html: string;
+    };
+    onChangeDate?: (date: Date, disabled: boolean) => boolean;
+    onLeaveDate?: (date: Date) => void;
+    onSelectDate?: (date: Date) => void;
+    locale?: Record<string, unknown>;
+};
+export declare function CalendarDayPicker({ firstMonthDate, numberOfMonths, hint, firstAvailableDate, lastAvailableDate, selectedDate, onChangeDate, onLeaveDate, onSelectDate, locale, }: CalendarDayPickerPropsType): React.JSX.Element;
+export {};

package/types/components/Calendar/CalendarDayPicker/CalendarDayPickerDay.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type CalendarDayPickerDayPropsType = {
+    date: Date;
+    isToday?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    onSelect: (date: Date) => void;
+    onMouseEnter?: (date: Date, disabled: boolean) => void;
+    onMouseLeave?: (date: Date) => void;
+};
+declare function CalendarDayPickerDay({ date, isToday, selected, disabled, onSelect, onMouseEnter, onMouseLeave, }: CalendarDayPickerDayPropsType): React.JSX.Element;
+declare const MemoizedComponent: React.MemoExoticComponent<typeof CalendarDayPickerDay>;
+export { MemoizedComponent as CalendarDayPickerDay };

package/types/components/Calendar/CalendarDayPicker/CalendarDayPickerMonth.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type CalendarDayPickerMonthPropsType = {
+    month: Date;
+    selectedDate?: Date | null;
+    onSelectDate: (date: Date) => void;
+    onChangeDate: (date: Date, disabled: boolean) => void;
+    onLeaveDate?: (date: Date) => void;
+    firstAvailableDate: Date;
+    lastAvailableDate?: Date;
+    locale: any;
+};
+export declare function CalendarDayPickerMonth({ month, selectedDate, onSelectDate, onChangeDate, onLeaveDate, firstAvailableDate, lastAvailableDate, locale, }: CalendarDayPickerMonthPropsType): React.JSX.Element;
+export {};

package/types/components/Calendar/CalendarDayPicker/index.d.ts

@@ -0,0 +1 @@
+export { CalendarDayPicker } from "./CalendarDayPicker";

package/types/components/Calendar/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getWeekDays: () => Date[];
+export declare const getMonthDaysByWeeks: (monthDate: Date) => Date[][];

package/types/components/Modal/index.d.ts

@@ -17,6 +17,10 @@ export type ModalPropsType = {
      * State to show or hide the modal/dialog
      */
     isOpen: boolean;
+    /**
+     * Custom css classes to add to the modal
+     */
+    className?: string;
     /**
      * Action to fire if the user try to dismiss when the modal is not closeable
      */

package/types/index.d.ts

@@ -13,6 +13,7 @@ export { Flag } from "./components/Flag";
 export { Flash } from "./components/Flash";
 export { default as Helper } from "./components/Helper";
 export { CalendarRangePicker } from "./components/Calendar/CalendarRangePicker";
+export { CalendarDayPicker } from "./components/Calendar/CalendarDayPicker";
 export { Card, CardSection } from "./components/Card";
 export * from "./components/Icon";
 export { default as Modal } from "./components/Modal";
@@ -46,3 +47,5 @@ export { default as Popover } from "./components/Popover";
 export { default as HorizontalList, HorizontalListPaddingBlock, } from "./components/HorizontalList";
 /** HOOKS */
 export { default as useBreakpoint } from "./hooks/useBreakpoint";
+/** utils **/
+export * from "./components/Calendar/utils";