@ceed/cds 0.0.127 → 0.0.128

package/dist/components/Calendar/Calendar.js

@@ -1,412 +0,0 @@
-"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

@@ -1,84 +0,0 @@
-"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;