@ceed/cds 0.0.125 → 0.0.127

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,412 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+var react_1 = __importStar(require("react"));
+var joy_1 = require("@mui/joy");
+// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
+var ChevronLeft_js_1 = __importDefault(require("@mui/icons-material/esm/ChevronLeft.js"));
+// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
+var ChevronRight_js_1 = __importDefault(require("@mui/icons-material/esm/ChevronRight.js"));
+var framer_motion_1 = require("framer-motion");
+var Button_1 = __importDefault(require("../Button"));
+var Typography_1 = __importDefault(require("../Typography"));
+var utils_1 = require("./utils");
+var IconButton_1 = __importDefault(require("../IconButton"));
+var use_calendar_props_1 = require("./hooks/use-calendar-props");
+var use_calendar_1 = require("./hooks/use-calendar");
+var CalendarRoot = (0, joy_1.styled)("div", {
+    name: "Calendar",
+    slot: "root",
+})({
+    maxWidth: "264px",
+});
+var CalendarHeader = (0, joy_1.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 = (0, joy_1.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 = (0, joy_1.styled)(framer_motion_1.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 = (0, joy_1.styled)("thead", {
+    name: "Calendar",
+    slot: "weekHeaderContainer",
+})({});
+var CalendarDayPickerContainer = (0, joy_1.styled)("tbody", {
+    name: "Calendar",
+    slot: "dayPickerContainer",
+})({});
+var CalendarSwitchViewButton = (0, joy_1.styled)(Button_1.default, {
+    name: "Calendar",
+    slot: "switchViewButton",
+})(function (_a) {
+    var ownerState = _a.ownerState;
+    return [
+        ownerState.view === "month" && {
+            pointerEvents: "none",
+        },
+    ];
+});
+var CalendarDayCell = (0, joy_1.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 = (0, joy_1.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 = (0, joy_1.styled)(Button_1.default, {
+    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 = (0, joy_1.styled)(Button_1.default, {
+    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 = (0, use_calendar_1.useCalendar)(ownerState), getPickerDayProps = _a.getPickerDayProps, getDayCellProps = _a.getDayCellProps;
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var calendarDates = (0, react_1.useMemo)(function () { return (0, utils_1.getCalendarDates)(ownerState.viewMonth); }, [ownerState.viewMonth]);
+    var weekdayNames = (0, react_1.useMemo)(function () { return (0, utils_1.getWeekdayNames)(ownerState.locale || "default"); }, [ownerState.locale]);
+    // effects
+    // handlers
+    return (react_1.default.createElement(CalendarViewContainer, { calendarType: "datePicker" },
+        react_1.default.createElement(framer_motion_1.AnimatePresence, { initial: false, custom: ownerState.direction },
+            react_1.default.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_1.default.createElement(CalendarWeekHeaderContainer, null,
+                    react_1.default.createElement("tr", null, weekdayNames.map(function (name, i) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("th", null,
+                            react_1.default.createElement(Typography_1.default, { level: "body-xs", textAlign: "center" }, name)),
+                        i < 6 && (react_1.default.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))); }))),
+                react_1.default.createElement(CalendarDayPickerContainer, null, calendarDates.map(function (weekDates, rowIndex) { return (react_1.default.createElement(react_1.Fragment, { key: "".concat(ownerState.viewMonth, "_").concat(rowIndex) },
+                    react_1.default.createElement("tr", null, weekDates.map(function (date, i) {
+                        return date ? (react_1.default.createElement(react_1.Fragment, { key: i },
+                            react_1.default.createElement(CalendarDayCell, __assign({}, getDayCellProps(date)),
+                                react_1.default.createElement(CalendarDay, __assign({ size: "sm", variant: "plain", color: "neutral" }, getPickerDayProps(date)), date)),
+                            i < 6 && (react_1.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))) : (react_1.default.createElement(react_1.Fragment, { key: i },
+                            react_1.default.createElement("td", null),
+                            i < 6 && (react_1.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))));
+                    })),
+                    rowIndex < calendarDates.length - 1 && (react_1.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        react_1.default.createElement("td", { colSpan: 13, style: { height: 4 } }))))); }))))));
+};
+var PickerMonths = function (props) {
+    var _a;
+    var ownerState = props.ownerState;
+    var _b = (0, use_calendar_1.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_1.default.createElement(CalendarViewContainer, { calendarType: isMonthRangeSelection ? 'monthPicker' : 'datePicker' },
+        react_1.default.createElement(framer_motion_1.AnimatePresence, { initial: false, custom: ownerState.direction },
+            react_1.default.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_1.default.createElement("tbody", null, chunkedMonths.map(function (months, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },
+                    react_1.default.createElement("tr", null, months.map(function (monthIndex, j) { return (react_1.default.createElement(react_1.Fragment, { key: monthIndex },
+                        react_1.default.createElement(CalendarMonthCell, __assign({}, getMonthCellProps(monthIndex)),
+                            react_1.default.createElement(CalendarMonth, __assign({ size: "sm", variant: "plain", color: "neutral" }, getPickerMonthProps(monthIndex)), (0, utils_1.getMonthNameFromIndex)(monthIndex, ownerState.locale))),
+                        j < 3 && (react_1.default.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))); })),
+                    i < chunkedMonths.length - 1 && (react_1.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        react_1.default.createElement("td", { colSpan: 7, style: { height: 4 } }))))); }))))));
+};
+/**
+ * @see https://mui.com/x/api/date-pickers/date-calendar/ 인터페이스 참고
+ */
+var Calendar = (0, react_1.forwardRef)(function (inProps, ref) {
+    // prop destruction
+    var _a = (0, use_calendar_props_1.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 = (0, use_calendar_1.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_1.default.createElement(CalendarRoot, __assign({ ref: ref }, others),
+        react_1.default.createElement(CalendarHeader, null,
+            react_1.default.createElement(IconButton_1.default, { size: "sm", onClick: onPrev },
+                react_1.default.createElement(ChevronLeft_js_1.default, null)),
+            react_1.default.createElement(CalendarSwitchViewButton, { ownerState: ownerState, variant: "plain", color: "neutral", onClick: onViewChange }, calendarTitle),
+            react_1.default.createElement(IconButton_1.default, { size: "sm", onClick: onNext },
+                react_1.default.createElement(ChevronRight_js_1.default, null))),
+        view === "day" && react_1.default.createElement(PickerDays, { ownerState: ownerState }),
+        view === "month" && react_1.default.createElement(PickerMonths, { ownerState: ownerState })));
+});
+exports.Calendar = Calendar;
+Calendar.displayName = "Calendar";

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

@@ -0,0 +1,84 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendarProps = void 0;
+var react_1 = require("react");
+var joy_1 = require("@mui/joy");
+var resolveView = function (view, views) {
+    return views.includes(view) ? view : views[0];
+};
+var useCalendarProps = function (inProps) {
+    var _a, _b;
+    var _c = (0, react_1.useState)(function () {
+        return resolveView(inProps.view || "day", inProps.views || ["day", "month"]);
+    }), uncontrolledView = _c[0], setUncontrolledView = _c[1];
+    var _d = (0, react_1.useState)(inProps.defaultValue), uncontrolledValue = _d[0], setUncontrolledValue = _d[1];
+    var _e = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, joy_1.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 = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { viewMonth: viewMonth, direction: direction })); }, [props, viewMonth, direction]);
+    return [props, ownerState];
+};
+exports.useCalendarProps = useCalendarProps;