@northlight/ui 2.28.5 → 2.28.7

package/dist/umd/northlight.cjs

@@ -5644,7 +5644,16 @@
   };
 
   const Table$1 = {
-    parts: ["table", "th", "td"],
+    parts: [
+      "table",
+      "th",
+      "td",
+      "columnHeader",
+      "cell",
+      "caption",
+      "footer",
+      "tr"
+    ],
     variants: {
       rounded: () => ({
         table: {
@@ -5665,7 +5674,48 @@
           borderColor: "border.default",
           borderTopWidth: "xs"
         }
-      })
+      }),
+      striped: (props) => {
+        const { colorScheme: c = "gray" } = props;
+        return {
+          table: {
+            borderSpacing: "0",
+            borderCollapse: "separate",
+            borderRadius: "md",
+            borderColor: "border.default",
+            borderWidth: "xs",
+            p: "2"
+          },
+          columnHeader: {
+            color: "text.subdued",
+            bgColor: themeTools.mode(`${c}.100`, `${c}.700`)(props),
+            fontWeight: "bold",
+            textTransform: "none",
+            fontSize: "sm"
+          },
+          cell: {
+            bgColor: themeTools.mode(`${c}.100`, `${c}.700`)(props)
+          },
+          caption: {
+            color: themeTools.mode("gray.600", "gray.100")(props)
+          },
+          th: {
+            borderBottomWidth: "0"
+          },
+          tr: {
+            "&:nth-of-type(odd)": {
+              td: {
+                background: themeTools.mode(`${c}.100`, `${c}.700`)(props)
+              }
+            }
+          },
+          footer: {
+            tr: {
+              th: { borderBottomWidth: 0 }
+            }
+          }
+        };
+      }
     }
   };
 
@@ -6246,14 +6296,16 @@
     ));
   };
 
-  const DayLabels = React.memo(({
-    weekDays
-  }) => {
+  const DayLabels = React.memo(({ weekDays }) => {
     const { dayLabel } = system.useMultiStyleConfig("Calendar");
     const weekDaysWithIds = weekDays.map((day, i) => ({ label: day, _id: i }));
-    return /* @__PURE__ */ React.createElement(system.chakra.tr, null, /* @__PURE__ */ React.createElement(system.chakra.th, null), weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(system.chakra.th, { key: _id, __css: dayLabel }, label)));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(system.chakra.th, { key: _id, __css: dayLabel }, label)));
   });
 
+  const mondayFirstWeekDays = ["M", "T", "W", "T", "F", "S", "S"];
+  const sundayFirstWeekDays = ["S", "M", "T", "W", "T", "F", "S"];
+  const getWeekdays = (firstDayOfWeek) => firstDayOfWeek === "monday" ? mondayFirstWeekDays : sundayFirstWeekDays;
+
   var __defProp$1w = Object.defineProperty;
   var __getOwnPropSymbols$1w = Object.getOwnPropertySymbols;
   var __hasOwnProp$1w = Object.prototype.hasOwnProperty;
@@ -6284,21 +6336,25 @@
   };
   const CalendarGrid = React.memo(
     (_a) => {
-      var _b = _a, { state, locale } = _b, rest = __objRest$1e(_b, ["state", "locale"]);
+      var _b = _a, { state, locale, firstDayOfWeek } = _b, rest = __objRest$1e(_b, ["state", "locale", "firstDayOfWeek"]);
       const startDate = state.visibleRange.start;
-      const { gridProps, headerProps, weekDays } = calendar.useCalendarGrid(rest, state);
+      const { gridProps, headerProps } = calendar.useCalendarGrid(rest, state);
       const weeksInMonth = date.getWeeksInMonth(startDate, locale);
-      return /* @__PURE__ */ React.createElement(Table, __spreadValues$1w({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(react.Thead, __spreadValues$1w({}, headerProps), /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(react.Tbody, null, ramda.times((weekIndex) => /* @__PURE__ */ React.createElement(react.Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
-        (date) => date ? /* @__PURE__ */ React.createElement(
-          CalendarCell,
-          {
-            key: date.day,
-            state,
-            date,
-            currentMonth: startDate
-          }
-        ) : /* @__PURE__ */ React.createElement(react.chakra.td, null)
-      )), weeksInMonth)));
+      const weekDays = getWeekdays(firstDayOfWeek);
+      return /* @__PURE__ */ React.createElement(Table, __spreadValues$1w({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(react.Thead, __spreadValues$1w({}, headerProps), /* @__PURE__ */ React.createElement(react.Tr, null, /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(react.Tbody, null, ramda.times(
+        (weekIndex) => /* @__PURE__ */ React.createElement(react.Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
+          (date) => date ? /* @__PURE__ */ React.createElement(
+            CalendarCell,
+            {
+              key: date.day,
+              state,
+              date,
+              currentMonth: startDate
+            }
+          ) : /* @__PURE__ */ React.createElement(react.chakra.td, null)
+        )),
+        weeksInMonth
+      )));
     }
   );
 
@@ -6387,7 +6443,7 @@
         w: "max-content",
         textAlign: "center"
       },
-      months.map((month, i) => /* @__PURE__ */ React.createElement("option", { value: i }, month))
+      months.map((month, i) => /* @__PURE__ */ React.createElement("option", { value: i, key: `month-${i}` }, month))
     );
   };
 
@@ -6538,6 +6594,7 @@
         ring: isToday && !isSelected ? "1px" : "0px",
         ringColor: "blue.500",
         mx: "-1px",
+        ml: isToday ? "-2px " : void 0,
         my: "0a",
         w: "8",
         h: "8",
@@ -6597,10 +6654,12 @@
   const StandaloneCalendarGrid = (_a) => {
     var _b = _a, {
       state,
-      range
+      range,
+      firstDayOfWeek
     } = _b, rest = __objRest$1c(_b, [
       "state",
-      "range"
+      "range",
+      "firstDayOfWeek"
     ]);
     const { locale } = i18n.useLocale();
     const { calendarProps, prevButtonProps, nextButtonProps } = calendar.useCalendar(
@@ -6608,7 +6667,8 @@
       state
     );
     const startDate = state.visibleRange.start;
-    const { gridProps, headerProps, weekDays } = calendar.useCalendarGrid(rest, state);
+    const { gridProps, headerProps } = calendar.useCalendarGrid(rest, state);
+    const weekDays = getWeekdays(firstDayOfWeek);
     const weeksInMonth = date.getWeeksInMonth(startDate, locale);
     const weekNumberStart = React.useMemo(
       () => getWeekNumberAtStartOfMonth(
@@ -6618,24 +6678,21 @@
       ),
       [startDate.year, startDate.month]
     );
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.chakra.table, __spreadProps$g(__spreadValues$1t({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(react.chakra.thead, __spreadValues$1t({}, headerProps), /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(react.chakra.tbody, null, ramda.times(
-      (weekIndex) => {
-        const weekNumber = weekNumberStart + weekIndex;
-        return /* @__PURE__ */ React.createElement(react.chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(react.chakra.td, null, /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber > 52 ? weekNumber - 52 : weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
-          (date) => date ? /* @__PURE__ */ React.createElement(
-            RangeCell,
-            {
-              key: date.day,
-              state,
-              range,
-              date,
-              currentMonth: startDate
-            }
-          ) : /* @__PURE__ */ React.createElement(react.chakra.td, null)
-        ));
-      },
-      weeksInMonth
-    )))));
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.chakra.table, __spreadProps$g(__spreadValues$1t({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(react.chakra.thead, __spreadValues$1t({}, headerProps), /* @__PURE__ */ React.createElement(react.chakra.tr, null, /* @__PURE__ */ React.createElement(react.chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(react.chakra.tbody, null, ramda.times((weekIndex) => {
+      const weekNumber = weekNumberStart + weekIndex;
+      return /* @__PURE__ */ React.createElement(react.chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(react.chakra.td, null, /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber > 52 ? weekNumber - 52 : weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
+        (date) => date ? /* @__PURE__ */ React.createElement(
+          RangeCell,
+          {
+            key: date.day,
+            state,
+            range,
+            date,
+            currentMonth: startDate
+          }
+        ) : /* @__PURE__ */ React.createElement(react.chakra.td, null)
+      ));
+    }, weeksInMonth)))));
   };
 
   var __defProp$1s = Object.defineProperty;
@@ -6658,6 +6715,7 @@
   };
   var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
   const Calendar = (props) => {
+    const { firstDayOfWeek } = props;
     const { locale } = i18n.useLocale();
     const { container } = react.useMultiStyleConfig("Calendar");
     const state = calendar$1.useCalendarState(__spreadProps$f(__spreadValues$1s({}, props), {
@@ -6668,7 +6726,14 @@
       props,
       state
     );
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$f(__spreadValues$1s({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(CalendarGrid, { state, locale })));
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$f(__spreadValues$1s({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1s({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(
+      CalendarGrid,
+      {
+        state,
+        locale,
+        firstDayOfWeek
+      }
+    )));
   };
 
   var __defProp$1r = Object.defineProperty;
@@ -6698,7 +6763,8 @@
       isInvalid = false,
       dateFormat,
       minValue,
-      variant = "outline"
+      variant = "outline",
+      firstDayOfWeek = "monday"
     } = props;
     const ref = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
@@ -6719,19 +6785,15 @@
         onClose: () => state.setOpen(false),
         placement: "bottom-end"
       },
-      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(react.InputGroup, __spreadProps$e(__spreadValues$1r({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(StyledField, { isDisabled, isInvalid, variant }, /* @__PURE__ */ React.createElement(
-        react.Box,
+      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(react.InputGroup, __spreadProps$e(__spreadValues$1r({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
+        StyledField,
         {
-          paddingInlineStart: "1a",
-          paddingInlineEnd: 10
+          isDisabled,
+          isInvalid,
+          variant
         },
-        /* @__PURE__ */ React.createElement(
-          DateField,
-          __spreadProps$e(__spreadValues$1r({}, fieldProps), {
-            dateFormat
-          })
-        )
-      )), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1r({}, fieldProps), { dateFormat })))
+      ), /* @__PURE__ */ React.createElement(
         react.InputRightElement,
         {
           sx: { height: "100%", paddingRight: "1" },
@@ -6757,7 +6819,7 @@
           icon: /* @__PURE__ */ React.createElement(Icon$1, { as: icons.XCloseSolid })
         }
       ))),
-      state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$e(__spreadValues$1r({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(Calendar, __spreadValues$1r({}, calendarProps))))
+      state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$e(__spreadValues$1r({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$e(__spreadValues$1r({}, calendarProps), { firstDayOfWeek }))))
     );
   };
 
@@ -7052,7 +7114,7 @@
     fiscalStartMonth = 0,
     fiscalStartDay = 0,
     locale = "",
-    height = "2xs"
+    height = "17.5rem"
   }) => {
     const { quickDates, fiscalQuarters } = React.useMemo(
       () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
@@ -7074,8 +7136,7 @@
         pr: "4",
         _hover: { overflowY: "scroll" },
         w: "36",
-        display: shouldShow(quickDates) ? "initial" : "none",
-        mb: "4"
+        display: shouldShow(quickDates) ? "initial" : "none"
       },
       ramda.map(
         (quickDate) => validRange(quickDate.value, state) && /* @__PURE__ */ React.createElement(react.Box, { minH: "20px", key: `quick-select-${quickDate.label}` }, /* @__PURE__ */ React.createElement(
@@ -7095,7 +7156,7 @@
         borderTop: seperator,
         display: shouldShow(fiscalQuarters) ? "initial" : "none"
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(react.Spacer, null), /* @__PURE__ */ React.createElement(
       react.Flex,
       {
         justifyContent: "space-between",
@@ -7151,7 +7212,8 @@
       fiscalStartMonth,
       fiscalStartDay,
       minValue,
-      maxValue
+      maxValue,
+      firstDayOfWeek
     } = props;
     const { locale } = i18n.useLocale();
     const ref = React.useRef(null);
@@ -7209,13 +7271,15 @@
       StandaloneCalendarGrid,
       {
         state: calendarOneState,
-        range: value
+        range: value,
+        firstDayOfWeek
       }
     ))), /* @__PURE__ */ React.createElement(react.Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(react.Stack, { opacity: value && value.start ? "1" : "0.4" }, /* @__PURE__ */ React.createElement(react.Box, { p: "2" }, /* @__PURE__ */ React.createElement(Label$1, { size: "xs" }, "End date:"), /* @__PURE__ */ React.createElement(
       StandaloneCalendarGrid,
       {
         state: calendarTwoState,
-        range: value
+        range: value,
+        firstDayOfWeek
       }
     ))), /* @__PURE__ */ React.createElement(react.HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button$1, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button$1, { variant: "brand", onClick: handleClose, size: "sm" }, "Save"))))))));
   };
@@ -7269,7 +7333,8 @@
       value,
       minValue = "1994-03-08",
       maxValue,
-      renderInPortal = false
+      renderInPortal = false,
+      firstDayOfWeek
     } = props;
     const ref = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
@@ -7306,6 +7371,10 @@
     const handleClose = () => {
       state.setOpen(false);
     };
+    react.useOutsideClick({
+      ref,
+      handler: () => state.setOpen(false)
+    });
     return /* @__PURE__ */ React.createElement(
       Popover$1,
       {
@@ -7347,7 +7416,8 @@
           handleClose,
           fiscalStartMonth: fiscalStartMonth || 0,
           fiscalStartDay: fiscalStartDay || 0,
-          isClearable
+          isClearable,
+          firstDayOfWeek
         })
       ))))
     );