@monolith-forensics/monolith-ui 1.8.1-dev.2 → 1.8.1-dev.4

package/dist/Calendar/Calendar.d.ts

@@ -9,9 +9,12 @@ interface CalendarProps {
     clearable?: boolean;
     min?: Date;
     max?: Date;
+    timeIntervalMinutes?: number;
+    minuteStep?: number;
+    timeZoneLabel?: string;
 }
 declare const Calendar: {
-    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, timeIntervalMinutes, minuteStep, timeZoneLabel, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Calendar;

package/dist/Calendar/Calendar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { CalendarContainer, CalendarHeader, CalendarHeaderControls, CalendarHeaderSelect, CalendarNavButton, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHourSelect, TimeHeader, TimeMinuteSelect, TimeItem, TimeItemActive, NoValueButton, } from "./CalendarStyles";
+import { CalendarContainer, CalendarHeader, CalendarHeaderControls, CalendarHeaderSelect, CalendarNavButton, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHeader, TimeHeaderValue, TimeItem, TimeItemActive, TimeSelectList, TimeZoneBadge, NoValueButton, } from "./CalendarStyles";
 import { DropDownMenu } from "../DropDownMenu";
-import calendar, { createLocalDate, isDate, isSameDay, isSameMonth, getDateISO, getMonthDays, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, HOURS24, HOURS12, MINUTES, } from "./calendarHelpers";
+import calendar, { createLocalDate, isDate, isSameDay, isSameMonth, getDateISO, getMonthDays, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, } from "./calendarHelpers";
 import moment from "moment";
 const checkValidRange = (value, min, max) => {
     if (min && moment(value).startOf("day").isBefore(moment(min).startOf("day")))
@@ -25,8 +25,10 @@ const MONTH_OPTIONS = Object.keys(CALENDAR_MONTHS).map((monthName, index) => ({
     label: monthName,
     value: index + 1,
 }));
-const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, }) => {
+const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, timeIntervalMinutes, minuteStep = 1, timeZoneLabel = "Local", }) => {
     const isControlled = useRef(value !== undefined);
+    const activeTimeRef = useRef(null);
+    const hasScrolledInitialTimeIntoView = useRef(false);
     const [valueState, setValueState] = useState(defaultValue);
     const _value = isControlled.current
         ? value
@@ -38,6 +40,36 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     let pressureTimer;
     let pressureTimeout;
     let dayTimeout;
+    const normalizedTimeInterval = Math.max(1, Math.min(1440, timeIntervalMinutes || minuteStep || 1));
+    const selectedMinutesOfDay = calendarState.hours * 60 + calendarState.minutes;
+    const timeOptions = useMemo(() => {
+        const steppedTimes = Array.from({ length: Math.ceil(1440 / normalizedTimeInterval) }, (_, index) => index * normalizedTimeInterval).filter((minutesOfDay) => minutesOfDay < 1440);
+        if (!steppedTimes.includes(selectedMinutesOfDay)) {
+            steppedTimes.push(selectedMinutesOfDay);
+        }
+        return steppedTimes
+            .sort((a, b) => a - b)
+            .map((minutesOfDay) => {
+            const hours = Math.floor(minutesOfDay / 60);
+            const minutes = minutesOfDay % 60;
+            return {
+                value: minutesOfDay,
+                hours,
+                minutes,
+                label: `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`,
+            };
+        });
+    }, [normalizedTimeInterval, selectedMinutesOfDay]);
+    useEffect(() => {
+        var _a;
+        if (!includeTime || hasScrolledInitialTimeIntoView.current)
+            return;
+        (_a = activeTimeRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            block: "center",
+            inline: "nearest",
+        });
+        hasScrolledInitialTimeIntoView.current = true;
+    }, [includeTime]);
     const syncCalendarState = (date) => {
         setCalendarState({
             month: +date.getMonth() + 1,
@@ -110,13 +142,15 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const { month, year } = calendarState;
         const monthName = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
         const yearOptions = getYearOptions();
-        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
-                                    style: { width: 75, maxHeight: 260 },
+        const selectedMonthOption = MONTH_OPTIONS.find((option) => option.value === month);
+        const selectedYearOption = yearOptions.find((option) => option.value === year);
+        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, value: selectedMonthOption ? [selectedMonthOption] : [], variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
+                                    style: { maxHeight: 260, width: 125 },
                                 }, buttonProps: {
                                     title: "Select month",
                                     size: "xxs",
                                     style: { minWidth: 95 },
-                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
+                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, value: selectedYearOption ? [selectedYearOption] : [], variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
                                     style: { width: 120, maxHeight: 260 },
                                 }, buttonProps: {
                                     title: "Select year",
@@ -151,6 +185,10 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const inMonth = month && year && isSameMonth(_date, createLocalDate(year, month, 1));
         const isDisabled = !checkValidRange(getDateISO(_date), min || null, max || null);
         const ariaCurrent = isToday ? "date" : undefined;
+        const handleDisabledAction = (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
         // The click handler
         const props = {
             "data-disabled": isDisabled,
@@ -160,8 +198,10 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
             "aria-pressed": Boolean(isCurrent),
             index,
             key: getDateISO(_date),
-            onClick: gotoDate(_date),
-            onKeyDown: handleActionKeyDown(() => gotoDate(_date)(undefined)),
+            onClick: isDisabled ? handleDisabledAction : gotoDate(_date),
+            onKeyDown: isDisabled
+                ? handleDisabledAction
+                : handleActionKeyDown(() => gotoDate(_date)(undefined)),
             role: "button",
             tabIndex: isDisabled ? -1 : 0,
             title: _date.toDateString(),
@@ -170,49 +210,85 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         // Conditionally render a styled date component
         return isCurrent ? (_jsx(HighlightedCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : isToday ? (_jsx(TodayCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : (_jsx(CalendarDate, Object.assign({}, props, { children: _date.getDate() })));
     };
-    const renderHours = () => {
-        const { hours } = calendarState;
-        const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
-        return hoursArray.map((hour, index) => {
-            const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
-            return (_jsx(HourComponent, { role: "button", tabIndex: 0, "aria-label": `Select ${hour.label}`, "aria-pressed": hour.value === hours, 
-                // value={hour.value}
-                onClick: (e) => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(hour.value)
-                        .minutes(calendarState.minutes)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }, onKeyDown: handleActionKeyDown(() => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(hour.value)
-                        .minutes(calendarState.minutes)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }), children: hour.label }, hour.value));
-        });
+    const isTimeOptionDisabled = (hours, minutes) => {
+        const candidate = moment(getWorkingDate())
+            .hours(hours)
+            .minutes(minutes)
+            .seconds(0)
+            .milliseconds(0);
+        if (min && candidate.isBefore(moment(min)))
+            return true;
+        if (max && candidate.isAfter(moment(max)))
+            return true;
+        return false;
     };
-    const renderMinutes = () => {
-        const { minutes } = calendarState;
-        return MINUTES.map((minute) => {
-            const MinuteComponent = minute.value === minutes ? TimeItemActive : TimeItem;
-            return (_jsx(MinuteComponent, { role: "button", tabIndex: 0, "aria-label": `Select ${minute.label} minutes`, "aria-pressed": minute.value === minutes, 
-                // value={minute}
-                onClick: (e) => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(calendarState.hours)
-                        .minutes(minute.value)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }, onKeyDown: handleActionKeyDown(() => {
-                    const newTime = moment(getWorkingDate())
-                        .hours(calendarState.hours)
-                        .minutes(minute.value)
-                        .toDate();
-                    commitDate(newTime, "time");
-                }), children: minute.label }, minute.value));
+    const renderTimeOptions = () => {
+        return timeOptions.map((timeOption, index) => {
+            const isActive = timeOption.value === selectedMinutesOfDay;
+            const isDisabled = isTimeOptionDisabled(timeOption.hours, timeOption.minutes);
+            const TimeComponent = isActive ? TimeItemActive : TimeItem;
+            const commitTime = () => {
+                if (isDisabled)
+                    return;
+                const newTime = moment(getWorkingDate())
+                    .hours(timeOption.hours)
+                    .minutes(timeOption.minutes)
+                    .seconds(0)
+                    .milliseconds(0)
+                    .toDate();
+                commitDate(newTime, "time");
+            };
+            return (_jsx(TimeComponent, { ref: isActive ? activeTimeRef : undefined, role: "button", tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled, "aria-disabled": isDisabled, "aria-label": `Select ${timeOption.label}`, "aria-pressed": isActive, onClick: commitTime, onKeyDown: handleTimeKeyDown(index, commitTime), children: timeOption.label }, timeOption.value));
         });
     };
+    const handleTimeKeyDown = (index, selectCurrent) => (evt) => {
+        const findEnabledIndex = (nextIndex, direction) => {
+            let boundedIndex = Math.max(0, Math.min(timeOptions.length - 1, nextIndex));
+            while (boundedIndex >= 0 &&
+                boundedIndex < timeOptions.length &&
+                isTimeOptionDisabled(timeOptions[boundedIndex].hours, timeOptions[boundedIndex].minutes)) {
+                boundedIndex += direction;
+            }
+            if (boundedIndex < 0 || boundedIndex >= timeOptions.length) {
+                return null;
+            }
+            return boundedIndex;
+        };
+        const commitOption = (nextIndex, direction) => {
+            const enabledIndex = findEnabledIndex(nextIndex, direction);
+            if (enabledIndex === null)
+                return;
+            const nextOption = timeOptions[enabledIndex];
+            const newTime = moment(getWorkingDate())
+                .hours(nextOption.hours)
+                .minutes(nextOption.minutes)
+                .seconds(0)
+                .milliseconds(0)
+                .toDate();
+            commitDate(newTime, "time");
+        };
+        if (evt.key === "Enter" || evt.key === " ") {
+            evt.preventDefault();
+            selectCurrent();
+            return;
+        }
+        if (evt.key === "ArrowDown") {
+            evt.preventDefault();
+            commitOption(index + 1, 1);
+        }
+        if (evt.key === "ArrowUp") {
+            evt.preventDefault();
+            commitOption(index - 1, -1);
+        }
+        if (evt.key === "Home") {
+            evt.preventDefault();
+            commitOption(0, 1);
+        }
+        if (evt.key === "End") {
+            evt.preventDefault();
+            commitOption(timeOptions.length - 1, -1);
+        }
+    };
     // new 2
     const gotoDate = (date) => (evt) => {
         evt && evt.preventDefault();
@@ -303,7 +379,7 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     // const clearDayTimeout = () => {
     //   dayTimeout && clearTimeout(dayTimeout);
     // };
-    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { role: "grid", "aria-label": `Calendar view for ${Object.keys(CALENDAR_MONTHS)[calendarState.month - 1]} ${calendarState.year}`, children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { type: "button", onClick: () => commitDate(null, "clear"), "aria-label": "Clear selected date", children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsx(TimeHeader, { children: "Select Time" }), _jsxs(TimePickerContainer, { children: [_jsx(TimeHourSelect, { children: renderHours() }), _jsx(TimeMinuteSelect, { children: renderMinutes() })] })] }))] }));
+    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { role: "grid", "aria-label": `Calendar view for ${Object.keys(CALENDAR_MONTHS)[calendarState.month - 1]} ${calendarState.year}`, children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { type: "button", onClick: () => commitDate(null, "clear"), "aria-label": "Clear selected date", children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsxs(TimeHeader, { children: [_jsx(TimeHeaderValue, { children: `${String(calendarState.hours).padStart(2, "0")}:${String(calendarState.minutes).padStart(2, "0")}` }), timeZoneLabel && _jsx(TimeZoneBadge, { children: timeZoneLabel })] }), _jsx(TimePickerContainer, { children: _jsx(TimeSelectList, { children: renderTimeOptions() }) })] }))] }));
 };
 Calendar.displayName = "Calendar";
 export default Calendar;

package/dist/Calendar/CalendarStyles.d.ts

@@ -21,8 +21,9 @@ export declare const TodayCalendarDate: import("styled-components/dist/types").I
 export declare const TimeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimePickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeHourSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeMinuteSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeHeaderValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TimeZoneBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TimeSelectList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeItemActive: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 export declare const NoValueButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/Calendar/CalendarStyles.js

@@ -48,7 +48,9 @@ export const CalendarNavButton = styled.button `
 `;
 export const CalendarGrid = styled.div `
   display: grid;
-  grid-template: repeat(7, auto) / repeat(7, 1fr);
+  grid-template: repeat(7, auto) / repeat(7, 32px);
+  gap: 3px;
+  justify-content: center;
   justify-items: center;
 `;
 export const CalendarMonth = styled.div `
@@ -114,11 +116,18 @@ export const CalendarDate = styled(CalendarCell) `
   }
 
   &[data-disabled="true"] {
-    pointer-events: none;
-    color: ${({ theme }) => theme.palette.text.disabled};
-    background: ${({ theme }) => `${theme.palette.action.hover}99`};
-    opacity: 0.45;
-    border-style: dashed;
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    opacity: 0.62;
+    font-weight: 500;
+    text-decoration: line-through;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      background: transparent;
+      opacity: 0.62;
+    }
   }
 `;
 export const HighlightedCalendarDate = styled(CalendarDate) `
@@ -163,49 +172,67 @@ export const TodayCalendarDate = styled(HighlightedCalendarDate) `
   }
 `;
 export const TimeContainer = styled.div `
+  position: relative;
+  flex: 0 0 132px;
   font-size: 12px;
-  width: 152px;
-  height: 100%;
+  width: 132px;
+  height: auto;
+  box-sizing: border-box;
   border: 1px solid ${(props) => props.theme.palette.divider};
-  border-left: none;
   border-radius: 4px;
+  background: ${(props) => props.theme.palette.input.background};
   overflow: hidden;
 `;
 export const TimePickerContainer = styled.div `
   display: flex;
-  height: 100%;
+  height: 238px;
 `;
 export const TimeHeader = styled.div `
-  font-weight: 500;
+  box-sizing: border-box;
+  font-weight: 600;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
   text-align: center;
-  padding: 5px;
-  line-height: 2.3;
+  padding: 6px 5px;
+  line-height: 1.25;
   height: 40px;
   user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 `;
-export const TimeHourSelect = styled.div `
-  border-right: 1px solid ${(props) => props.theme.palette.divider};
-  width: 50%;
-  height: 250px;
-  overflow-y: auto;
+export const TimeHeaderValue = styled.span `
+  color: ${(props) => props.theme.palette.text.primary};
 `;
-export const TimeMinuteSelect = styled.div `
-  width: 50%;
-  height: 250px;
+export const TimeZoneBadge = styled.span `
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: ${(props) => props.theme.palette.action.hover};
+  color: ${(props) => props.theme.palette.text.secondary};
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: uppercase;
+`;
+export const TimeSelectList = styled.div `
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
   overflow-y: auto;
 `;
 export const TimeItem = styled.div `
   font-weight: 500;
-  font-size: 10px;
+  font-size: 11px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 5px;
+  padding: 6px 5px;
   user-select: none;
   cursor: pointer;
   transition: all 0.2s ease-out;
+  border-radius: 4px;
+  margin: 1px 4px;
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
@@ -214,10 +241,22 @@ export const TimeItem = styled.div `
     outline: 2px solid ${(props) => props.theme.palette.primary.main};
     outline-offset: -2px;
   }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.palette.text.secondary};
+    opacity: 0.62;
+    text-decoration: line-through;
+
+    &:hover {
+      background: transparent;
+    }
+  }
 `;
 export const TimeItemActive = styled(TimeItem) `
   background: ${(props) => props.theme.palette.primary.main};
   color: white;
+  font-weight: 700;
   &:hover {
     background: ${(props) => props.theme.palette.primary.main};
   }

package/dist/Calendar/calendarHelpers.d.ts

@@ -39,7 +39,7 @@ export declare const CALENDAR_MONTHS: {
 export declare const CALENDAR_WEEKS = 6;
 export declare const zeroPad: (value: number, length: number) => string;
 export declare const createLocalDate: (year: number, month: number, day: number) => Date;
-export declare const getMonthDays: (month?: number, year?: number) => 28 | 29 | 30 | 31;
+export declare const getMonthDays: (month?: number, year?: number) => 28 | 30 | 29 | 31;
 export declare const getMonthFirstDay: (month?: number, year?: number) => number;
 export declare const isDate: (date: Date) => boolean;
 export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;

package/dist/CheckBox/CheckBox.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { useState, useEffect } from "react";
-import { FaCheckSquare, FaRegSquare, FaRegMinusSquare } from "react-icons/fa";
 import { getControlSizeTokens } from "../core";
 const CheckBox = styled(({ className, defaultValue = false, value, partialCheck = false, onChange = () => { }, }) => {
     const [checkedState, setCheckedState] = useState(defaultValue);
@@ -15,15 +14,47 @@ const CheckBox = styled(({ className, defaultValue = false, value, partialCheck
             setCheckedState(value);
     }, [value]);
     const _checked = value === undefined ? checkedState : value;
-    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx(FaRegMinusSquare, { className: "checkbox partial" })) : _checked === true ? (_jsx(FaCheckSquare, { className: "checkbox checked" })) : (_jsx(FaRegSquare, { className: "checkbox unchecked" })) }));
+    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx("span", { className: "checkbox partial" })) : _checked === true ? (_jsx("span", { className: "checkbox checked" })) : (_jsx("span", { className: "checkbox unchecked" })) }));
 }) `
   display: flex;
   align-items: center;
   cursor: pointer;
 
   .checkbox {
-    color: ${(props) => props.theme.palette.primary.main};
-    font-size: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    border-radius: 2px;
+  }
+
+  .checked,
+  .partial {
+    background-color: ${(props) => props.theme.palette.primary.main};
+  }
+
+  .checked::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    width: 32%;
+    height: 56%;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+    transform-origin: center;
+  }
+
+  .partial::after {
+    content: "";
+    width: 60%;
+    height: 2px;
+    background-color: #fff;
   }
 `;
 export default CheckBox;

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,29 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
+export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
     var _a;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const [selected, setSelected] = useState(defaultValue || []);
+    const [internalSelected, setInternalSelected] = useState(defaultValue || []);
+    const isControlled = value !== undefined;
+    const selected = isControlled ? value || [] : internalSelected;
+    const updateSelected = (newSelected, diff) => {
+        if (!isControlled) {
+            setInternalSelected(newSelected);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
+    };
+    const isSameItem = (a, b) => isObjectArray ? (a === null || a === void 0 ? void 0 : a.value) === (b === null || b === void 0 ? void 0 : b.value) : a === b;
     const handleAddItem = (item) => {
-        setSelected((prev) => {
-            let newSelected = [...prev, item];
-            const diff = [item];
-            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
-            return newSelected;
-        });
+        if (!multiselect) {
+            updateSelected([item], [item]);
+            return;
+        }
+        const nextSelected = selected.some((selectedItem) => isSameItem(selectedItem, item))
+            ? selected
+            : [...selected, item];
+        updateSelected(nextSelected, [item]);
     };
     const handleRemoveItem = (item) => {
-        setSelected((prev) => {
-            let newSelected = prev.filter((i) => isObjectArray ? (i === null || i === void 0 ? void 0 : i.value) !== (item === null || item === void 0 ? void 0 : item.value) : i !== item);
-            const diff = [item];
-            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
-            return newSelected;
-        });
+        const newSelected = selected.filter((i) => !isSameItem(i, item));
+        updateSelected(newSelected, [item]);
+    };
+    const handleSetSelected = (newSelected, diff) => {
+        updateSelected(newSelected, diff);
     };
     const handleMenuClose = () => { };
     const handleScrollToBottom = (e) => {
         onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
+    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };

package/dist/DropDownMenu/components/MenuComponent.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
-import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, size as floatingSize, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { getControlSizeTokens } from "../../core";
 import { MenuContext } from "./MenuContext";
@@ -43,6 +43,11 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
             }),
             flip(),
             shift(),
+            floatingSize({
+                apply({ rects, elements }) {
+                    elements.floating.style.setProperty("--mfui-dropdown-reference-width", `${rects.reference.width}px`);
+                },
+            }),
         ],
         whileElementsMounted: autoUpdate,
     });

package/dist/DropDownMenu/components/MenuItem.js

@@ -76,6 +76,12 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
       pointer-events: "none";
     }
 
+    &[data-selected="true"] {
+      background-color: ${(props) => props.theme.palette.primary.main}20;
+      color: ${(props) => props.theme.palette.primary.main};
+      font-weight: 600;
+    }
+
     &:hover {
       background-color: ${(props) => props.theme.palette.action.hover};
       color: ${(props) => props.theme.palette.text.primary};

package/dist/DropDownMenu/components/MenuItemList.d.ts

@@ -11,11 +11,13 @@ export declare const MenuItemList: React.FC<{
     selected?: DropDownItem[];
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
+    enableSelectAll?: boolean;
     grouped?: boolean;
     onAddNew?: (value: string) => void;
     size?: Size;
     handleAddItem: (item: DropDownItem) => void;
     handleRemoveItem: (item: DropDownItem) => void;
+    handleSetSelected: (selected: DropDownItem[], diff: DropDownItem[]) => void;
     onItemSelect?: (item: DropDownItem) => void;
     renderOption?: (item: DropDownItem) => React.ReactNode;
     onScroll?: (e: Event) => void;