@ceed/cds 0.0.124 → 0.0.126

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,383 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Fragment, forwardRef, useMemo } from "react";
+import { styled } from "@mui/joy";
+// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
+import ChevronLeftIcon from "@mui/icons-material/esm/ChevronLeft.js";
+// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
+import ChevronRightIcon from "@mui/icons-material/esm/ChevronRight.js";
+import { AnimatePresence, motion } from "framer-motion";
+import Button from "../Button";
+import Typography from "../Typography";
+import { getCalendarDates, getMonthNameFromIndex, getWeekdayNames, } from "./utils";
+import IconButton from "../IconButton";
+import { useCalendarProps } from "./hooks/use-calendar-props";
+import { useCalendar } from "./hooks/use-calendar";
+var CalendarRoot = styled("div", {
+    name: "Calendar",
+    slot: "root",
+})({
+    maxWidth: "264px",
+});
+var CalendarHeader = styled("div", {
+    name: "Calendar",
+    slot: "calendarHeader",
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: theme.spacing(1),
+    });
+});
+var CalendarViewContainer = styled("div", {
+    name: "Calendar",
+    slot: "viewContainer",
+})(function (_a) {
+    var theme = _a.theme, calendarType = _a.calendarType;
+    return ({
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+        position: "relative",
+        overflow: "hidden",
+        minHeight: calendarType === 'datePicker' ? "250px" : "unset",
+    });
+});
+var CalendarViewTable = styled(motion.table, {
+    name: "Calendar",
+    slot: "viewTable",
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderSpacing: 0,
+        "& td, & th": {
+            padding: 0,
+        },
+        "& th": {
+            paddingTop: theme.spacing(1),
+            paddingBottom: theme.spacing(1),
+        },
+    });
+});
+var CalendarWeekHeaderContainer = styled("thead", {
+    name: "Calendar",
+    slot: "weekHeaderContainer",
+})({});
+var CalendarDayPickerContainer = styled("tbody", {
+    name: "Calendar",
+    slot: "dayPickerContainer",
+})({});
+var CalendarSwitchViewButton = styled(Button, {
+    name: "Calendar",
+    slot: "switchViewButton",
+})(function (_a) {
+    var ownerState = _a.ownerState;
+    return [
+        ownerState.view === "month" && {
+            pointerEvents: "none",
+        },
+    ];
+});
+var CalendarDayCell = styled("td", {
+    name: "Calendar",
+    slot: "dayCell",
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        // aria-current=date === range에 포함된 버튼
+        "&[aria-current=date]": {
+            position: "relative",
+            "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+                backgroundColor: "rgb(".concat(theme.palette.primary.lightChannel, ")"),
+            },
+            '& + td[aria-hidden] + td[aria-current="date"]::before': {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                left: "-10px",
+                bottom: 0,
+                width: "16px",
+                backgroundColor: "rgb(".concat(theme.palette.primary.lightChannel, ")"),
+                zIndex: -1,
+            },
+        },
+    });
+});
+var CalendarMonthCell = styled("td", {
+    name: "Calendar",
+    slot: "monthCell",
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        // aria-current=date === range에 포함된 버튼
+        "&[aria-current=date]": {
+            position: "relative",
+            "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+                backgroundColor: "rgb(".concat(theme.palette.primary.lightChannel, ")"),
+            },
+            '& + td[aria-hidden] + td[aria-current="date"]::before': {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                left: "-10px",
+                bottom: 0,
+                width: "16px",
+                backgroundColor: "rgb(".concat(theme.palette.primary.lightChannel, ")"),
+                zIndex: -1,
+            },
+        },
+    });
+});
+var CalendarMonth = styled(Button, {
+    name: "Calendar",
+    slot: "month",
+})(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected, disabled = _a.disabled;
+    return [
+        {
+            width: "59px",
+            // height: "32px",
+            textAlign: "center",
+            "&:hover": {
+                color: theme.palette.primary.softColor,
+                backgroundColor: theme.palette.primary.softHoverBg,
+            },
+            "&:active": {
+                color: theme.palette.primary.softColor,
+                backgroundColor: theme.palette.primary.softActiveBg,
+            },
+        },
+        isSelected && {
+            backgroundColor: theme.palette.primary.solidBg,
+            color: theme.palette.primary.solidColor,
+            "&:hover": {
+                color: theme.palette.primary.solidColor,
+                backgroundColor: theme.palette.primary.solidHoverBg,
+            },
+            "&:active": {
+                color: theme.palette.primary.solidColor,
+                backgroundColor: theme.palette.primary.solidActiveBg,
+            },
+        },
+        disabled && {
+            color: theme.palette.neutral.solidDisabledColor,
+            backgroundColor: theme.palette.neutral.solidDisabledBg,
+        },
+    ];
+});
+var CalendarDay = styled(Button, {
+    name: "Calendar",
+    slot: "day",
+})(function (_a) {
+    var theme = _a.theme, isToday = _a.isToday, isSelected = _a.isSelected, disabled = _a.disabled;
+    return [
+        {
+            width: "32px",
+            height: "32px",
+            textAlign: "center",
+            "&:hover": {
+                color: theme.palette.primary.softColor,
+                backgroundColor: theme.palette.primary.softHoverBg,
+            },
+            "&:active": {
+                color: theme.palette.primary.softColor,
+                backgroundColor: theme.palette.primary.softActiveBg,
+            },
+        },
+        // NOTE: enabled, disabled 일때만 border 적용
+        isToday &&
+            !isSelected && {
+            "&:not([aria-current=date]):not(:hover)": {
+                border: "1px solid ".concat(theme.palette.neutral.outlinedBorder),
+            },
+        },
+        isSelected && {
+            backgroundColor: theme.palette.primary.solidBg,
+            color: theme.palette.primary.solidColor,
+            "&:hover": {
+                color: theme.palette.primary.solidColor,
+                backgroundColor: theme.palette.primary.solidHoverBg,
+            },
+            "&:active": {
+                color: theme.palette.primary.solidColor,
+                backgroundColor: theme.palette.primary.solidActiveBg,
+            },
+        },
+        disabled && {
+            color: theme.palette.neutral.solidDisabledColor,
+            backgroundColor: theme.palette.neutral.solidDisabledBg,
+        },
+    ];
+});
+var variants = {
+    enter: function (direction) {
+        return {
+            x: direction > 0 ? 300 : -300,
+            opacity: 0,
+        };
+    },
+    center: {
+        position: 'relative',
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: function (direction) {
+        return {
+            position: 'absolute',
+            zIndex: 0,
+            x: direction < 0 ? 300 : -300,
+            opacity: 0,
+        };
+    },
+};
+var swipeConfidenceThreshold = 10000;
+var swipePower = function (offset, velocity) {
+    return Math.abs(offset) * velocity;
+};
+var PickerDays = function (props) {
+    // prop destruction
+    var ownerState = props.ownerState;
+    // lib hooks
+    var _a = useCalendar(ownerState), getPickerDayProps = _a.getPickerDayProps, getDayCellProps = _a.getDayCellProps;
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var calendarDates = useMemo(function () { return getCalendarDates(ownerState.viewMonth); }, [ownerState.viewMonth]);
+    var weekdayNames = useMemo(function () { return getWeekdayNames(ownerState.locale || "default"); }, [ownerState.locale]);
+    // effects
+    // handlers
+    return (React.createElement(CalendarViewContainer, { calendarType: "datePicker" },
+        React.createElement(AnimatePresence, { initial: false, custom: ownerState.direction },
+            React.createElement(CalendarViewTable
+            // #region framer-motion
+            , { 
+                // #region framer-motion
+                key: "".concat(ownerState.viewMonth.toString(), "_").concat(ownerState.direction), custom: ownerState.direction, variants: variants, initial: "enter", animate: "center", exit: "exit", transition: {
+                    x: { type: "spring", stiffness: 300, damping: 30 },
+                    opacity: { duration: 0.2 },
+                }, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: function (e, _a) {
+                    var _b, _c;
+                    var offset = _a.offset, velocity = _a.velocity;
+                    var swipe = swipePower(offset.x, velocity.x);
+                    if (swipe < -swipeConfidenceThreshold) {
+                        var date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() + 1);
+                        (_b = ownerState.onMonthChange) === null || _b === void 0 ? void 0 : _b.call(ownerState, date);
+                    }
+                    else if (swipe > swipeConfidenceThreshold) {
+                        var date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() - 1);
+                        (_c = ownerState.onMonthChange) === null || _c === void 0 ? void 0 : _c.call(ownerState, date);
+                    }
+                } },
+                React.createElement(CalendarWeekHeaderContainer, null,
+                    React.createElement("tr", null, weekdayNames.map(function (name, i) { return (React.createElement(React.Fragment, null,
+                        React.createElement("th", null,
+                            React.createElement(Typography, { level: "body-xs", textAlign: "center" }, name)),
+                        i < 6 && (React.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))); }))),
+                React.createElement(CalendarDayPickerContainer, null, calendarDates.map(function (weekDates, rowIndex) { return (React.createElement(Fragment, { key: "".concat(ownerState.viewMonth, "_").concat(rowIndex) },
+                    React.createElement("tr", null, weekDates.map(function (date, i) {
+                        return date ? (React.createElement(Fragment, { key: i },
+                            React.createElement(CalendarDayCell, __assign({}, getDayCellProps(date)),
+                                React.createElement(CalendarDay, __assign({ size: "sm", variant: "plain", color: "neutral" }, getPickerDayProps(date)), date)),
+                            i < 6 && (React.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))) : (React.createElement(Fragment, { key: i },
+                            React.createElement("td", null),
+                            i < 6 && (React.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))));
+                    })),
+                    rowIndex < calendarDates.length - 1 && (React.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        React.createElement("td", { colSpan: 13, style: { height: 4 } }))))); }))))));
+};
+var PickerMonths = function (props) {
+    var _a;
+    var ownerState = props.ownerState;
+    var _b = useCalendar(ownerState), getPickerMonthProps = _b.getPickerMonthProps, getMonthCellProps = _b.getMonthCellProps;
+    var chunkedMonths = Array.from({ length: 12 }, function (_, i) { return i; }).reduce(function (acc, month) {
+        if (acc[acc.length - 1].length === 4) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(month);
+        return acc;
+    }, [[]]);
+    var isMonthRangeSelection = !((_a = ownerState.views) === null || _a === void 0 ? void 0 : _a.find(function (view) { return view === 'day'; })) && ownerState.rangeSelection;
+    return (React.createElement(CalendarViewContainer, { calendarType: isMonthRangeSelection ? 'monthPicker' : 'datePicker' },
+        React.createElement(AnimatePresence, { initial: false, custom: ownerState.direction },
+            React.createElement(CalendarViewTable
+            // #region framer-motion
+            , { 
+                // #region framer-motion
+                key: "".concat(ownerState.viewMonth.getFullYear(), "_").concat(ownerState.direction), custom: ownerState.direction, variants: variants, initial: "enter", animate: "center", exit: "exit", transition: {
+                    x: { type: "spring", stiffness: 300, damping: 30 },
+                    opacity: { duration: 0.2 },
+                }, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: function (e, _a) {
+                    var _b, _c;
+                    var offset = _a.offset, velocity = _a.velocity;
+                    var swipe = swipePower(offset.x, velocity.x);
+                    if (swipe < -swipeConfidenceThreshold) {
+                        var date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() + 1);
+                        (_b = ownerState.onMonthChange) === null || _b === void 0 ? void 0 : _b.call(ownerState, date);
+                    }
+                    else if (swipe > swipeConfidenceThreshold) {
+                        var date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() - 1);
+                        (_c = ownerState.onMonthChange) === null || _c === void 0 ? void 0 : _c.call(ownerState, date);
+                    }
+                } },
+                React.createElement("tbody", null, chunkedMonths.map(function (months, i) { return (React.createElement(Fragment, { key: i },
+                    React.createElement("tr", null, months.map(function (monthIndex, j) { return (React.createElement(Fragment, { key: monthIndex },
+                        React.createElement(CalendarMonthCell, __assign({}, getMonthCellProps(monthIndex)),
+                            React.createElement(CalendarMonth, __assign({ size: "sm", variant: "plain", color: "neutral" }, getPickerMonthProps(monthIndex)), getMonthNameFromIndex(monthIndex, ownerState.locale))),
+                        j < 3 && (React.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))); })),
+                    i < chunkedMonths.length - 1 && (React.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        React.createElement("td", { colSpan: 7, style: { height: 4 } }))))); }))))));
+};
+/**
+ * @see https://mui.com/x/api/date-pickers/date-calendar/ 인터페이스 참고
+ */
+var Calendar = forwardRef(function (inProps, ref) {
+    // prop destruction
+    var _a = useCalendarProps(inProps), props = _a[0], ownerState = _a[1];
+    var value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, locale = props.locale, onViewChange = props.onViewChange, onMonthChange = props.onMonthChange, view = props.view, views = props.views, rangeSelection = props.rangeSelection, others = __rest(props, ["value", "defaultValue", "onChange", "locale", "onViewChange", "onMonthChange", "view", "views", "rangeSelection"]);
+    // lib hooks
+    var _b = useCalendar(ownerState), calendarTitle = _b.calendarTitle, onPrev = _b.onPrev, onNext = _b.onNext;
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(CalendarRoot, __assign({ ref: ref }, others),
+        React.createElement(CalendarHeader, null,
+            React.createElement(IconButton, { size: "sm", onClick: onPrev },
+                React.createElement(ChevronLeftIcon, null)),
+            React.createElement(CalendarSwitchViewButton, { ownerState: ownerState, variant: "plain", color: "neutral", onClick: onViewChange }, calendarTitle),
+            React.createElement(IconButton, { size: "sm", onClick: onNext },
+                React.createElement(ChevronRightIcon, null))),
+        view === "day" && React.createElement(PickerDays, { ownerState: ownerState }),
+        view === "month" && React.createElement(PickerMonths, { ownerState: ownerState })));
+});
+export { Calendar };
+Calendar.displayName = "Calendar";

package/dist/components/Calendar/hooks/use-calendar-props.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useCallback, useMemo, useState } from "react";
+import { useThemeProps } from "@mui/joy";
+var resolveView = function (view, views) {
+    return views.includes(view) ? view : views[0];
+};
+export var useCalendarProps = function (inProps) {
+    var _a, _b;
+    var _c = useState(function () {
+        return resolveView(inProps.view || "day", inProps.views || ["day", "month"]);
+    }), uncontrolledView = _c[0], setUncontrolledView = _c[1];
+    var _d = useState(inProps.defaultValue), uncontrolledValue = _d[0], setUncontrolledValue = _d[1];
+    var _e = useState(function () {
+        var _a, _b;
+        var today = new Date();
+        today.setDate(1);
+        today.setHours(0, 0, 0, 0);
+        return ((_a = inProps.value) === null || _a === void 0 ? void 0 : _a[0]) || ((_b = inProps.defaultValue) === null || _b === void 0 ? void 0 : _b[0]) || today;
+    }), viewMonth = _e[0], setViewMonth = _e[1];
+    var _f = useState([0, 0]), _g = _f[0], page = _g[0], direction = _g[1], setPage = _f[1];
+    var resolvedView = (_a = inProps.view) !== null && _a !== void 0 ? _a : uncontrolledView;
+    var paginate = function (newDirection) {
+        setPage([page + newDirection, newDirection]);
+    };
+    var handleViewMonthChange = useCallback(function (newMonth) {
+        var _a;
+        setViewMonth(newMonth);
+        if (resolvedView === "month") {
+            if (viewMonth.getFullYear() !== newMonth.getFullYear()) {
+                paginate(newMonth > viewMonth ? 1 : -1);
+            }
+        }
+        else {
+            paginate(newMonth > viewMonth ? 1 : -1);
+        }
+        (_a = inProps.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(inProps, newMonth);
+    }, [inProps.onMonthChange, viewMonth, resolvedView]);
+    var props = useThemeProps({
+        props: __assign(__assign({ locale: "default", views: ["day", "month"], view: resolvedView, value: (_b = inProps.value) !== null && _b !== void 0 ? _b : uncontrolledValue }, inProps), { 
+            // overrides
+            onChange: inProps.value
+                ? // Controlled
+                    inProps.onChange
+                : // Uncontrolled
+                    function (value) {
+                        var _a;
+                        setUncontrolledValue(value);
+                        (_a = inProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inProps, value);
+                    }, onMonthChange: handleViewMonthChange, onViewChange: function () {
+                var newView = resolvedView === "month" ? "day" : "month";
+                var isAllowedView = !inProps.views
+                    ? true
+                    : inProps.views.includes(newView);
+                if (!isAllowedView || inProps.view === newView)
+                    return;
+                if (inProps.onViewChange) {
+                    inProps.onViewChange(newView);
+                }
+                else {
+                    setUncontrolledView(newView);
+                }
+            } }),
+        name: "Calendar",
+    });
+    /**
+     * For ownerState
+     */
+    var ownerState = useMemo(function () { return (__assign(__assign({}, props), { viewMonth: viewMonth, direction: direction })); }, [props, viewMonth, direction]);
+    return [props, ownerState];
+};