@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/CommonGrid/components/ColumnTitle/ColumnTitle.js

@@ -1,253 +1,132 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  width: 100%;\n  font-size: 0.8rem;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: ",
-        ";\n  position: static;\n  font-size: 1rem;\n  ",
-        "\n  margin-left: 6px;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ",
-        "\n  width: ",
-        "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  display: ",
-        ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ",
-        " {\n    display: flex;\n  }\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n  justify-content: ",
-        ";\n  display: flex;\n"
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import Icon from "../../../../Elements/Icon/Icon.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled$1, { css, x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useRef, useEffect } from "react";
-import Icon from "../../../../Elements/Icon/Icon";
-import styled, { x, css } from "@xstyled/styled-components";
-var WRAPPER_WIDTH = 35;
-var Wrap = styled.div(_templateObject());
-var Title = styled.h4(_templateObject1());
-var arrowStyles = css(_templateObject2());
-var InlineArrowWrap = styled.div(_templateObject3(), function(param) {
-    var $isPopup = param.$isPopup;
-    return $isPopup ? "none" : "flex";
-}, arrowStyles);
-var PopupArrowWrap = styled.div(_templateObject4(), arrowStyles, WRAPPER_WIDTH);
-var OverflowWrap = styled.div(_templateObject5());
-var WarningWrap = styled.div(_templateObject6(), function(param) {
-    var $isPopup = param.$isPopup;
-    return $isPopup ? "block" : "none";
-}, OverflowWrap);
-var Content = styled.div(_templateObject7(), function(param) {
-    var $isPopup = param.$isPopup;
-    return $isPopup ? "space-between" : "unset";
-});
-var ColumnTitle = function ColumnTitle(param) {
-    var title = param.title, isSortable = param.isSortable, onSetSort = param.onSetSort, sortValue = param.sortValue;
-    var _useState = _sliced_to_array(useState(false), 2), isOverflowing = _useState[0], setIsOverflowing = _useState[1];
-    var onSetAsc = useCallback(function() {
-        return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort("asc");
-    }, [
-        onSetSort
-    ]);
-    var onSetDesc = useCallback(function() {
-        return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort("desc");
-    }, [
-        onSetSort
-    ]);
-    var onSetNull = useCallback(function() {
-        return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null);
-    }, [
-        onSetSort
-    ]);
-    var isAsc = sortValue === "asc";
-    var isDesc = sortValue === "desc";
-    var wrapRef = useRef(null);
-    var contentRef = useRef(null);
-    useEffect(function() {
-        var wrapRefCopy = wrapRef.current;
-        var contentRefCopy = contentRef.current;
-        if (!wrapRefCopy || !contentRefCopy) return;
-        var resizeObserver = new ResizeObserver(function() {
-            var wrapWidth = wrapRefCopy.offsetWidth;
-            var contentWidth = contentRefCopy.offsetWidth + 42;
-            setIsOverflowing(wrapWidth <= contentWidth);
-        });
-        resizeObserver.observe(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
-        return function() {
-            resizeObserver.unobserve(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
-        };
-    }, [
-        wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current
-    ]);
-    var Arrows = /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-            /* @__PURE__ */ jsx(x.div, {
-                onClick: isAsc ? onSetNull : onSetAsc,
-                children: /* @__PURE__ */ jsx(Icon, {
-                    icon: "chevronUp",
-                    fill: isAsc ? "blue2" : "lightGray3"
-                })
-            }),
-            /* @__PURE__ */ jsx(x.div, {
-                onClick: isDesc ? onSetNull : onSetDesc,
-                children: /* @__PURE__ */ jsx(Icon, {
-                    icon: "chevronDown",
-                    fill: isDesc ? "blue2" : "lightGray3"
-                })
-            })
-        ]
-    });
-    return /* @__PURE__ */ jsx(Wrap, {
-        ref: wrapRef,
-        children: /* @__PURE__ */ jsxs(Content, {
-            $isPopup: isOverflowing,
-            children: [
-                /* @__PURE__ */ jsx("div", {
-                    children: /* @__PURE__ */ jsx(Title, {
-                        ref: contentRef,
-                        children: title
-                    })
-                }),
-                isSortable && /* @__PURE__ */ jsxs(Fragment, {
-                    children: [
-                        /* @__PURE__ */ jsx(WarningWrap, {
-                            $isPopup: isOverflowing,
-                            children: /* @__PURE__ */ jsx(Icon, {
-                                icon: "warningDual",
-                                fill: "black",
-                                secondaryColor: "yellow2"
-                            })
-                        }),
-                        /* @__PURE__ */ jsx(OverflowWrap, {
-                            $isPopup: isOverflowing,
-                            children: /* @__PURE__ */ jsx(PopupArrowWrap, {
-                                $isPopup: isOverflowing,
-                                children: Arrows
-                            })
-                        }),
-                        /* @__PURE__ */ jsx(InlineArrowWrap, {
-                            $isPopup: isOverflowing,
-                            children: Arrows
-                        })
-                    ]
-                })
-            ]
-        })
-    });
+//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle/ColumnTitle.tsx
+const WRAPPER_WIDTH = 35;
+const Wrap = styled$1.div`
+  width: 100%;
+  font-size: 0.8rem;
+`;
+const Title = styled$1.h4`
+  margin: unset;
+  align-self: center;
+  flex-shrink: 1;
+`;
+const arrowStyles = css`
+  flex-direction: row;
+  & > * {
+    cursor: pointer;
+  }
+`;
+const InlineArrowWrap = styled$1.div`
+  display: ${({ $isPopup }) => $isPopup ? "none" : "flex"};
+  position: static;
+  font-size: 1rem;
+  ${arrowStyles}
+  margin-left: 6px;
+`;
+const PopupArrowWrap = styled$1.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: -24px;
+  background-color: lightGray2;
+  font-size: 0.8rem;
+  border-radius: 0.4rem;
+  padding: 0 4px;
+  ${arrowStyles}
+  width: ${WRAPPER_WIDTH}px;
+  box-shadow: tooltipShadow;
+  z-index: 1;
+`;
+const OverflowWrap = styled$1.div`
+  display: none;
+  position: relative;
+  overflow: visible;
+  &:hover {
+    display: block;
+  }
+`;
+const WarningWrap = styled$1.div`
+  position: relative;
+  display: ${({ $isPopup }) => $isPopup ? "block" : "none"};
+  font-size: 0.7rem;
+  margin-right: 6px;
+  align-self: center;
+  &:hover + ${OverflowWrap} {
+    display: flex;
+  }
+`;
+const Content = styled$1.div`
+  justify-content: ${({ $isPopup }) => $isPopup ? "space-between" : "unset"};
+  display: flex;
+`;
+const ColumnTitle = ({ title, isSortable, onSetSort, sortValue }) => {
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	const onSetAsc = useCallback(() => onSetSort?.("asc"), [onSetSort]);
+	const onSetDesc = useCallback(() => onSetSort?.("desc"), [onSetSort]);
+	const onSetNull = useCallback(() => onSetSort?.(null), [onSetSort]);
+	const isAsc = sortValue === "asc";
+	const isDesc = sortValue === "desc";
+	const wrapRef = useRef(null);
+	const contentRef = useRef(null);
+	useEffect(() => {
+		const wrapRefCopy = wrapRef.current;
+		const contentRefCopy = contentRef.current;
+		if (!wrapRefCopy || !contentRefCopy) return;
+		const resizeObserver = new ResizeObserver(() => {
+			const wrapWidth = wrapRefCopy.offsetWidth;
+			setIsOverflowing(wrapWidth <= contentRefCopy.offsetWidth + 42);
+		});
+		resizeObserver.observe(wrapRefCopy?.parentNode);
+		return () => {
+			resizeObserver.unobserve(wrapRefCopy?.parentNode);
+		};
+	}, [wrapRef?.current]);
+	const Arrows = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
+		onClick: isAsc ? onSetNull : onSetAsc,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "chevronUp",
+			fill: isAsc ? "blue2" : "lightGray3"
+		})
+	}), /* @__PURE__ */ jsx(x.div, {
+		onClick: isDesc ? onSetNull : onSetDesc,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "chevronDown",
+			fill: isDesc ? "blue2" : "lightGray3"
+		})
+	})] });
+	return /* @__PURE__ */ jsx(Wrap, {
+		ref: wrapRef,
+		children: /* @__PURE__ */ jsxs(Content, {
+			$isPopup: isOverflowing,
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Title, {
+				ref: contentRef,
+				children: title
+			}) }), isSortable && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(WarningWrap, {
+					$isPopup: isOverflowing,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "warningDual",
+						fill: "black",
+						secondaryColor: "yellow2"
+					})
+				}),
+				/* @__PURE__ */ jsx(OverflowWrap, {
+					$isPopup: isOverflowing,
+					children: /* @__PURE__ */ jsx(PopupArrowWrap, {
+						$isPopup: isOverflowing,
+						children: Arrows
+					})
+				}),
+				/* @__PURE__ */ jsx(InlineArrowWrap, {
+					$isPopup: isOverflowing,
+					children: Arrows
+				})
+			] })]
+		})
+	});
 };
-var ColumnTitle_default = ColumnTitle;
-export { ColumnTitle_default as default };
+//#endregion
+export { ColumnTitle as default };

package/ui/Blocks/CommonGrid/components/ColumnTitle/index.js

@@ -1,3 +1,5 @@
-import ColumnTitle from "./ColumnTitle";
+import ColumnTitle from "./ColumnTitle.js";
+//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle/index.tsx
 var ColumnTitle_default = ColumnTitle;
+//#endregion
 export { ColumnTitle_default as default };

package/ui/Blocks/CommonGrid/components/ColumnTitle.js

@@ -1,108 +1,40 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  & + * {\n    margin-left: 1em;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import { SortingDown, SortingUp } from "./icons/Sorting.js";
 import React from "react";
-import { SortingUp, SortingDown } from "./icons/Sorting";
-import styled from "@xstyled/styled-components";
-var Title = styled.span(_templateObject());
-var ColumnTitle = function ColumnTitle(param) {
-    var title = param.title, isSortable = param.isSortable, onSetSort = param.onSetSort, sortValue = param.sortValue;
-    var _React_useState = _sliced_to_array(React.useState(0), 2), mouseDownTimestamp = _React_useState[0], setMouseDownTimestamp = _React_useState[1];
-    var handleMouseDown = React.useCallback(function() {
-        setMouseDownTimestamp(Date.now());
-    }, []);
-    var handleMouseUp = React.useCallback(function() {
-        var now = Date.now();
-        var duration = now - mouseDownTimestamp;
-        if (duration < 200) {
-            var newValue = sortValue ? sortValue === "asc" ? "desc" : null : "asc";
-            if (onSetSort) onSetSort(newValue);
-        }
-        setMouseDownTimestamp(0);
-    }, [
-        mouseDownTimestamp,
-        onSetSort,
-        sortValue
-    ]);
-    return /* @__PURE__ */ jsxs("div", {
-        onMouseDown: isSortable ? handleMouseDown : void 0,
-        onMouseUp: isSortable ? handleMouseUp : void 0,
-        className: isSortable ? "sortable" : "",
-        children: [
-            /* @__PURE__ */ jsx(Title, {
-                children: title
-            }),
-            isSortable && sortValue === "asc" && /* @__PURE__ */ jsx(SortingUp, {
-                width: "16"
-            }),
-            isSortable && sortValue === "desc" && /* @__PURE__ */ jsx(SortingDown, {
-                width: "16"
-            })
-        ]
-    });
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle.tsx
+const Title = styled$1.span`
+  & + * {
+    margin-left: 1em;
+  }
+`;
+const ColumnTitle = ({ title, isSortable, onSetSort, sortValue }) => {
+	const [mouseDownTimestamp, setMouseDownTimestamp] = React.useState(0);
+	const handleMouseDown = React.useCallback(() => {
+		setMouseDownTimestamp(Date.now());
+	}, []);
+	const handleMouseUp = React.useCallback(() => {
+		if (Date.now() - mouseDownTimestamp < 200) {
+			const newValue = sortValue ? sortValue === "asc" ? "desc" : null : "asc";
+			if (onSetSort) onSetSort(newValue);
+		}
+		setMouseDownTimestamp(0);
+	}, [
+		mouseDownTimestamp,
+		onSetSort,
+		sortValue
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		onMouseDown: isSortable ? handleMouseDown : void 0,
+		onMouseUp: isSortable ? handleMouseUp : void 0,
+		className: isSortable ? "sortable" : "",
+		children: [
+			/* @__PURE__ */ jsx(Title, { children: title }),
+			isSortable && sortValue === "asc" && /* @__PURE__ */ jsx(SortingUp, { width: "16" }),
+			isSortable && sortValue === "desc" && /* @__PURE__ */ jsx(SortingDown, { width: "16" })
+		]
+	});
 };
 var ColumnTitle_default = React.memo(ColumnTitle);
+//#endregion
 export { ColumnTitle_default as default };