@ceed/cds 0.0.125 → 0.0.126

package/dist/components/Accordions/Accordions.js

@@ -0,0 +1,66 @@
+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 from "react";
+import { AccordionGroup as JoyAccordionGroup, Accordion as JoyAccordion, AccordionSummary as JoyAccordionSummary, AccordionDetails as JoyAccordionDetails, } from "@mui/joy";
+import { motion } from "framer-motion";
+var MotionAccordionSummary = motion(JoyAccordionSummary);
+var AccordionSummary = MotionAccordionSummary;
+export { AccordionSummary };
+AccordionSummary.displayName = "AccordionSummary";
+var MotionAccordionDetails = motion(JoyAccordionDetails);
+var AccordionDetails = MotionAccordionDetails;
+export { AccordionDetails };
+AccordionDetails.displayName = "AccordionDetails";
+var MotionAccordion = motion(JoyAccordion);
+function Accordion(props) {
+    // prop destruction
+    var summary = props.summary, details = props.details, variant = props.variant, color = props.color, innerProps = __rest(props, ["summary", "details", "variant", "color"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var inheritedVariant = variant === "solid" ? "solid" : undefined;
+    // effects
+    // handlers
+    return (React.createElement(MotionAccordion, __assign({ variant: inheritedVariant, color: color }, innerProps),
+        React.createElement(AccordionSummary, { variant: inheritedVariant, color: color }, summary),
+        React.createElement(AccordionDetails, { variant: inheritedVariant, color: color }, details)));
+}
+export { Accordion };
+Accordion.displayName = "Accordion";
+var MotionAccordions = motion(JoyAccordionGroup);
+function Accordions(props) {
+    // prop destruction
+    var variant = props.variant, color = props.color, items = props.items, innerProps = __rest(props, ["variant", "color", "items"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(MotionAccordions, __assign({ variant: variant, color: color }, innerProps), items.map(function (item, index) { return (React.createElement(Accordion, { summary: item.summary, details: item.details, index: index, variant: variant, color: color })); })));
+}
+export { Accordions };
+Accordions.displayName = "Accordions";

package/dist/components/Accordions/index.js

@@ -0,0 +1,3 @@
+import { Accordions } from "./Accordions";
+export * from "./Accordions";
+export default Accordions;

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,251 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { Autocomplete as JoyAutocomplete, AutocompleteOption as JoyAutocompleteOption, ListSubheader as JoyListSubheader, AutocompleteListbox as JoyAutocompleteListbox, ListItemDecorator, CircularProgress, styled, } from "@mui/joy";
+// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
+import CloseIcon from "@mui/icons-material/esm/Close.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Popper } from "@mui/base";
+import FormControl from "../FormControl";
+import FormLabel from "../FormLabel";
+import FormHelperText from "../FormHelperText";
+import Chip from "../Chip";
+import IconButton from "../IconButton";
+import Stack from "../Stack";
+var AutocompletePopper = styled(Popper, {
+    name: "Autocomplete",
+    slot: "Popper",
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        zIndex: theme.zIndex.tooltip,
+    });
+});
+var AutocompleteListBox = React.forwardRef(function (props, ref) {
+    // prop destruction
+    var anchorEl = props.anchorEl, open = props.open, modifiers = props.modifiers, children = props.children, _a = props.ownerState, loading = _a.loading, _b = _a.size, fontSize = _b === void 0 ? "md" : _b, innerProps = __rest(props, ["anchorEl", "open", "modifiers", "children", "ownerState"]);
+    // state, ref, querystring hooks
+    var parentRef = useRef(null);
+    // lib hooks
+    // NOTE: 부분 grouping은 불가능하다.
+    var isGrouped = children[0].every(function (child) { return child.hasOwnProperty("group"); });
+    var renderTargets = (function () {
+        if (loading) {
+            return [children[1]];
+        }
+        if (children[0].length === 0) {
+            return [children[2]];
+        }
+        if (isGrouped) {
+            return children[0].flatMap(function (child) { return __spreadArray([
+                React.createElement(JoyListSubheader, { key: child.key, component: "li" }, child.group)
+            ], child.children, true); });
+        }
+        return children[0];
+    })();
+    var virtualizer = useVirtualizer({
+        count: renderTargets.length,
+        // TODO: 하드코딩된 option height, autocomplete size에 대응하거나 동적 사이즈를 적용해야한다.
+        estimateSize: function () { return 36; },
+        getScrollElement: function () { return parentRef.current; },
+        overscan: 5,
+    });
+    // form hooks
+    // query hooks
+    // calculated values
+    var items = virtualizer.getVirtualItems();
+    // effects
+    useEffect(function () {
+        if (open) {
+            virtualizer.measure();
+        }
+    }, [open, virtualizer]);
+    // handlers
+    return (React.createElement(AutocompletePopper, { ref: ref, anchorEl: anchorEl, open: open, modifiers: modifiers },
+        React.createElement(JoyAutocompleteListbox, __assign({}, innerProps),
+            React.createElement("div", { ref: parentRef, style: { overflow: "auto" } },
+                React.createElement("div", { style: {
+                        height: "".concat(virtualizer.getTotalSize(), "px"),
+                        position: "relative",
+                    } }, items.map(function (_a) {
+                    var index = _a.index, size = _a.size, start = _a.start, key = _a.key;
+                    return React.cloneElement(renderTargets[index], {
+                        key: key,
+                        style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            fontSize: "var(--ceed-fontSize-".concat(fontSize, ")"),
+                            height: "".concat(size, "px"),
+                            transform: "translateY(".concat(start, "px)"),
+                            overflow: "visible",
+                        },
+                        children: (React.createElement("div", { style: {
+                                textOverflow: "ellipsis",
+                                textWrap: "nowrap",
+                                overflow: "hidden",
+                                width: "100%",
+                            } }, renderTargets[index].props.children)),
+                    });
+                }))))));
+});
+var AutocompleteDeleteSize = {
+    sm: "20px",
+    md: "24px",
+    lg: "28px",
+};
+var AutocompleteTagDelete = styled(IconButton, {
+    name: "Autocomplete",
+    slot: "tagDelete",
+})(function (_a) {
+    var theme = _a.theme, _b = _a.size, size = _b === void 0 ? "md" : _b;
+    return ({
+        width: AutocompleteDeleteSize[size],
+        height: AutocompleteDeleteSize[size],
+        minWidth: AutocompleteDeleteSize[size],
+        minHeight: AutocompleteDeleteSize[size],
+        borderRadius: "50%",
+    });
+});
+function Autocomplete(props) {
+    // prop destruction
+    var label = props.label, error = props.error, helperText = props.helperText, color = props.color, size = props.size, disabled = props.disabled, required = props.required, onChange = props.onChange, onChangeComplete = props.onChangeComplete, innerProps = __rest(props, ["label", "error", "helperText", "color", "size", "disabled", "required", "onChange", "onChangeComplete"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    var _a = useState(props.value || props.defaultValue), _value = _a[0], setValue = _a[1];
+    // form hooks
+    // query hooks
+    // calculated values
+    var options = useMemo(function () {
+        return props.options.map(function (option) {
+            if (typeof option !== "object") {
+                return {
+                    value: option,
+                    label: option,
+                };
+            }
+            return option;
+        });
+    }, [props.options]);
+    var optionMap = useMemo(function () {
+        var map = new Map();
+        options.forEach(function (option) {
+            map.set(option.value, option);
+        });
+        return map;
+    }, [options]);
+    var value = useMemo(function () {
+        if (props.loading) {
+            return {
+                value: "",
+                label: "",
+                startDecorator: (React.createElement(CircularProgress, { size: "sm", color: "neutral", variant: "plain", thickness: 3 })),
+            };
+        }
+        if (_value === null || _value === undefined) {
+            // NOTE: value가 undefined면 uncontrolled로 취급된다.
+            return null;
+        }
+        var convertValue = function (targetValue) {
+            var _a;
+            if (typeof targetValue !== "object") {
+                return (_a = optionMap.get(targetValue)) !== null && _a !== void 0 ? _a : targetValue;
+            }
+            // NOTE: value값이 같은 object가 넘어오면 선택된 option으로, Autocomplete에서 선택된 태그로 보여아한다.
+            return optionMap.get(targetValue.value);
+        };
+        if (Array.isArray(_value)) {
+            return _value.map(convertValue);
+        }
+        return convertValue(_value);
+    }, [_value, optionMap, props.loading]);
+    var applySize = useCallback(function (node) {
+        return React.isValidElement(node) && !props.loading
+            ? React.cloneElement(node, __assign({ size: size }))
+            : node;
+    }, [size, props.loading]);
+    var startDecorator = useMemo(function () {
+        return applySize((value === null || value === void 0 ? void 0 : value.startDecorator) || props.startDecorator);
+    }, [value, applySize, props.startDecorator]);
+    var endDecorator = useMemo(function () {
+        return applySize((value === null || value === void 0 ? void 0 : value.endDecorator) || props.endDecorator);
+    }, [value, applySize, props.endDecorator]);
+    // effects
+    // handlers
+    var handleChange = function (event, value) {
+        setValue(value);
+        var newValue = value;
+        var _value = Array.isArray(newValue)
+            ? newValue.map(function (value) { return value.value; })
+            : newValue === null || newValue === void 0 ? void 0 : newValue.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { 
+                // @ts-expect-error NOTE: multiple이 true일 때, value는 배열이다.
+                value: _value }) }));
+        if ((Array.isArray(newValue) &&
+            newValue.map(function (value) { return optionMap.get(value.value); })) ||
+            optionMap.get(newValue === null || newValue === void 0 ? void 0 : newValue.value)) {
+            onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { 
+                    // @ts-expect-error NOTE: multiple이 true일 때, value는 배열이다.
+                    value: _value }) }));
+        }
+    };
+    var autocomplete = (React.createElement(JoyAutocomplete, __assign({}, innerProps, { required: required, onChange: handleChange, color: error ? "danger" : color, value: value, options: options, size: size, disabled: disabled, startDecorator: startDecorator, endDecorator: endDecorator, getOptionLabel: function (option) { var _a; return "".concat((_a = option.value) !== null && _a !== void 0 ? _a : ""); }, renderTags: function (tags, getTagProps) {
+            return tags.map(function (tag, index) {
+                var _a = getTagProps({ index: index }), onClick = _a.onClick, rest = __rest(_a, ["onClick"]);
+                return applySize(React.createElement(Chip, __assign({ color: "primary" }, rest),
+                    React.createElement(Stack, { direction: "row", alignItems: "center", gap: 2, py: 0.5 },
+                        tag.value,
+                        applySize(React.createElement(AutocompleteTagDelete, { color: "primary", variant: "soft", onClick: onClick },
+                            React.createElement(CloseIcon, null))))));
+            });
+        }, slots: {
+            listbox: AutocompleteListBox,
+        }, renderOption: function (props, option) { return (React.createElement(JoyAutocompleteOption, __assign({}, props),
+            option.startDecorator && (React.createElement(ListItemDecorator, { sx: function (theme) { return ({
+                    marginInlineEnd: "var(--Input-gap, ".concat(theme.spacing(1), ")"),
+                }); } }, applySize(option.startDecorator))),
+            applySize(option.label),
+            option.endDecorator && (React.createElement(ListItemDecorator, { sx: function (theme) { return ({
+                    marginInlineStart: "var(--Input-gap, ".concat(theme.spacing(1), ")"),
+                }); } }, applySize(option.endDecorator))))); }, 
+        // TODO: Post React 18 update - validate this conversion, look like a hidden bug
+        renderGroup: function (params) { return params; } })));
+    if (label) {
+        return (React.createElement(FormControl, { required: required, color: color, size: size, error: error, disabled: disabled },
+            React.createElement(FormLabel, null, label),
+            autocomplete,
+            helperText && React.createElement(FormHelperText, null, helperText)));
+    }
+    return autocomplete;
+}
+export { Autocomplete };

package/dist/components/Autocomplete/index.js

@@ -0,0 +1,3 @@
+import { Autocomplete } from "./Autocomplete";
+export * from "./Autocomplete";
+export default Autocomplete;

package/dist/components/Box/Box.js

@@ -0,0 +1,6 @@
+import { Box as JoyBox } from "@mui/joy";
+import { motion } from "framer-motion";
+var MotionBox = motion(JoyBox);
+var Box = MotionBox;
+export { Box };
+Box.displayName = "Box";

package/dist/components/Box/index.js

@@ -0,0 +1,3 @@
+import { Box } from "./Box";
+export * from "./Box";
+export default Box;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,67 @@
+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 from "react";
+import { Breadcrumbs as JoyBreadcrumbs, Link as JoyLink, } from "@mui/joy";
+import Menu, { MenuButton, MenuItem } from "../Menu";
+import Dropdown from "../Dropdown";
+import Typography from "../Typography";
+function Breadcrumbs(props) {
+    // prop destruction
+    var crumbs = props.crumbs, size = props.size, _a = props.startCrumbCount, startCrumbCount = _a === void 0 ? 1 : _a, _b = props.endCrumbCount, endCrumbCount = _b === void 0 ? 3 : _b, _c = props.slots, _d = _c === void 0 ? { link: JoyLink } : _c, Link = _d.link, restSlots = __rest(_d, ["link"]), _e = props.slotProps, _f = _e === void 0 ? {
+        link: { color: "neutral" },
+    } : _e, linkProps = _f.link, restSlotProps = __rest(_f, ["link"]), innerProps = __rest(props, ["crumbs", "size", "startCrumbCount", "endCrumbCount", "slots", "slotProps"]);
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    var _endCrumbCount = Math.max(1, endCrumbCount);
+    var Crumb = function (props) {
+        if (props.type === "link" && Link) {
+            return (React.createElement(Link, __assign({ to: props.linkHref, href: props.linkHref }, linkProps), props.label));
+        }
+        else {
+            return React.createElement(Typography, null, props.label);
+        }
+    };
+    var frontCrumbs = crumbs
+        .slice(0, startCrumbCount)
+        .map(function (crumb) { return React.createElement(Crumb, __assign({}, crumb)); });
+    var backCrumbs = (startCrumbCount + _endCrumbCount > crumbs.length
+        ? crumbs.slice(startCrumbCount)
+        : crumbs.slice(-_endCrumbCount)).map(function (crumb) { return React.createElement(Crumb, __assign({}, crumb)); });
+    var collapsedCrumbs = crumbs
+        .slice(startCrumbCount, -_endCrumbCount)
+        .map(function (crumb) { return (React.createElement(MenuItem, null,
+        React.createElement(Crumb, __assign({}, crumb)))); });
+    // effects
+    // handlers
+    return (React.createElement(JoyBreadcrumbs, __assign({ size: size, slots: restSlots, slotProps: restSlotProps }, innerProps),
+        frontCrumbs,
+        collapsedCrumbs.length && (React.createElement(Dropdown, null,
+            React.createElement(MenuButton, { size: size, variant: "plain" }, "..."),
+            React.createElement(Menu, { size: size }, collapsedCrumbs))),
+        backCrumbs));
+}
+export { Breadcrumbs };
+Breadcrumbs.displayName = "Breadcrumbs";

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,3 @@
+import { Breadcrumbs } from "./Breadcrumbs";
+export * from "./Breadcrumbs";
+export default Breadcrumbs;

package/dist/components/Button/Button.js

@@ -0,0 +1,28 @@
+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 React, { forwardRef } from "react";
+import { Button as JoyButton } from "@mui/joy";
+import { motion } from "framer-motion";
+var MotionButton = motion(JoyButton);
+var Button = forwardRef(function (props, ref) {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(MotionButton, __assign({ ref: ref }, props)));
+});
+export { Button };
+Button.displayName = "Button";

package/dist/components/Button/index.js

@@ -0,0 +1,3 @@
+import { Button } from "./Button";
+export * from "./Button";
+export default Button;