UNPKG

@findnlink/ui

Version:
1,666 lines 306 kB
var __defProp = Object.defineProperty; var __defProps = Object.defineProperties; var __getOwnPropDescs = Object.getOwnPropertyDescriptors; var __getOwnPropSymbols = Object.getOwnPropertySymbols; var __hasOwnProp = Object.prototype.hasOwnProperty; var __propIsEnum = Object.prototype.propertyIsEnumerable; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __spreadValues = (a, b2) => { for (var prop in b2 || (b2 = {})) if (__hasOwnProp.call(b2, prop)) __defNormalProp(a, prop, b2[prop]); if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b2)) { if (__propIsEnum.call(b2, prop)) __defNormalProp(a, prop, b2[prop]); } return a; }; var __spreadProps = (a, b2) => __defProps(a, __getOwnPropDescs(b2)); var __objRest = (source, exclude) => { var target = {}; for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop]; if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) { if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop]; } return target; }; import React, { useRef, useEffect, useState, useLayoutEffect, useMemo as useMemo$1, useContext, useReducer } from "react"; import ReactDOM, { unstable_batchedUpdates } from "react-dom"; const fontS$6 = "_fontS_u66oq_1"; const fontM$6 = "_fontM_u66oq_6"; const fontL$6 = "_fontL_u66oq_11"; const fontXL$6 = "_fontXL_u66oq_16"; const weightLight$5 = "_weightLight_u66oq_21"; const weightNormal$5 = "_weightNormal_u66oq_26"; const weightBold$5 = "_weightBold_u66oq_31"; const disabled$5 = "_disabled_u66oq_36"; const errorMessage$5 = "_errorMessage_u66oq_41"; const kanbanSkeleton$5 = "_kanbanSkeleton_u66oq_46"; const button = "_button_u66oq_51"; const primary = "_primary_u66oq_72"; var scss$b = { fontS: fontS$6, fontM: fontM$6, fontL: fontL$6, fontXL: fontXL$6, weightLight: weightLight$5, weightNormal: weightNormal$5, weightBold: weightBold$5, disabled: disabled$5, errorMessage: errorMessage$5, kanbanSkeleton: kanbanSkeleton$5, button, primary }; const _getClassNames = (parent, scss2, size, weight, disabled2) => { let className = [parent]; switch (size) { case "s": className.push(scss2.fontS); break; case "m": className.push(scss2.fontM); break; case "l": className.push(scss2.fontL); break; case "xl": className.push(scss2.fontXL); break; } switch (weight) { case "light": className.push(scss2.weightLight); break; case "normal": className.push(scss2.weightNormal); break; case "bold": className.push(scss2.weightBold); break; } if (disabled2) { className.push(scss2.disabled); } return className; }; var jsxRuntime = { exports: {} }; var reactJsxRuntime_production_min = {}; /* object-assign (c) Sindre Sorhus @license MIT */ var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols; var hasOwnProperty = Object.prototype.hasOwnProperty; var propIsEnumerable = Object.prototype.propertyIsEnumerable; function toObject(val) { if (val === null || val === void 0) { throw new TypeError("Object.assign cannot be called with null or undefined"); } return Object(val); } function shouldUseNative() { try { if (!Object.assign) { return false; } var test1 = new String("abc"); test1[5] = "de"; if (Object.getOwnPropertyNames(test1)[0] === "5") { return false; } var test2 = {}; for (var i = 0; i < 10; i++) { test2["_" + String.fromCharCode(i)] = i; } var order2 = Object.getOwnPropertyNames(test2).map(function(n2) { return test2[n2]; }); if (order2.join("") !== "0123456789") { return false; } var test3 = {}; "abcdefghijklmnopqrst".split("").forEach(function(letter) { test3[letter] = letter; }); if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") { return false; } return true; } catch (err) { return false; } } shouldUseNative() ? Object.assign : function(target, source) { var from; var to = toObject(target); var symbols; for (var s = 1; s < arguments.length; s++) { from = Object(arguments[s]); for (var key in from) { if (hasOwnProperty.call(from, key)) { to[key] = from[key]; } } if (getOwnPropertySymbols$1) { symbols = getOwnPropertySymbols$1(from); for (var i = 0; i < symbols.length; i++) { if (propIsEnumerable.call(from, symbols[i])) { to[symbols[i]] = from[symbols[i]]; } } } } return to; }; /** @license React v17.0.2 * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var f$2 = React, g$2 = 60103; reactJsxRuntime_production_min.Fragment = 60107; if (typeof Symbol === "function" && Symbol.for) { var h$2 = Symbol.for; g$2 = h$2("react.element"); reactJsxRuntime_production_min.Fragment = h$2("react.fragment"); } var m$2 = f$2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n$2 = Object.prototype.hasOwnProperty, p$2 = { key: true, ref: true, __self: true, __source: true }; function q$2(c2, a, k2) { var b2, d2 = {}, e2 = null, l2 = null; k2 !== void 0 && (e2 = "" + k2); a.key !== void 0 && (e2 = "" + a.key); a.ref !== void 0 && (l2 = a.ref); for (b2 in a) n$2.call(a, b2) && !p$2.hasOwnProperty(b2) && (d2[b2] = a[b2]); if (c2 && c2.defaultProps) for (b2 in a = c2.defaultProps, a) d2[b2] === void 0 && (d2[b2] = a[b2]); return { $$typeof: g$2, type: c2, key: e2, ref: l2, props: d2, _owner: m$2.current }; } reactJsxRuntime_production_min.jsx = q$2; reactJsxRuntime_production_min.jsxs = q$2; { jsxRuntime.exports = reactJsxRuntime_production_min; } const jsx = jsxRuntime.exports.jsx; const jsxs = jsxRuntime.exports.jsxs; const Fragment = jsxRuntime.exports.Fragment; const Button = (_a) => { var _b = _a, { children, primary: primary2, scale, weight, href, onClick, disabled: disabled2 } = _b, props = __objRest(_b, [ "children", "primary", "scale", "weight", "href", "onClick", "disabled" ]); const getClassNames = () => { let className = _getClassNames(scss$b.button, scss$b, scale, weight, disabled2); if (primary2) { className.push(scss$b.primary); } return className.join(" "); }; return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({ "data-testid": "button", onClick: (e2) => { if (disabled2) return; if (onClick) onClick(e2); if (href) window.open(href, "_blank"); }, className: getClassNames() }, props), { children })); }; const buttonGroup = "_buttonGroup_kjcg1_1"; var scss$a = { buttonGroup }; const ButtonGroup = ({ value, setValue, buttons, scale }) => { return /* @__PURE__ */ jsx("div", { className: scss$a.buttonGroup, children: buttons.map((button2, index) => /* @__PURE__ */ jsx(Button, { scale, onClick: () => setValue(button2), primary: value === button2, children: button2 }, index)) }); }; const card = "_card_9sl85_1"; var scss$9 = { card }; const Card = ({ children }) => { return /* @__PURE__ */ jsx("div", { "data-testid": "Card", className: scss$9.card, children }); }; const fontS$5 = "_fontS_951v6_1"; const fontM$5 = "_fontM_951v6_6"; const fontL$5 = "_fontL_951v6_11"; const fontXL$5 = "_fontXL_951v6_16"; const weightLight$4 = "_weightLight_951v6_21"; const weightNormal$4 = "_weightNormal_951v6_26"; const weightBold$4 = "_weightBold_951v6_31"; const disabled$4 = "_disabled_951v6_36"; const errorMessage$4 = "_errorMessage_951v6_41"; const kanbanSkeleton$4 = "_kanbanSkeleton_951v6_46"; const checkbox = "_checkbox_951v6_51"; var scss$8 = { fontS: fontS$5, fontM: fontM$5, fontL: fontL$5, fontXL: fontXL$5, weightLight: weightLight$4, weightNormal: weightNormal$4, weightBold: weightBold$4, disabled: disabled$4, errorMessage: errorMessage$4, kanbanSkeleton: kanbanSkeleton$4, checkbox }; const Checkbox = (_c) => { var _d = _c, { children, error: error2, size, weight } = _d, props = __objRest(_d, [ "children", "error", "size", "weight" ]); const getClassNames = () => { let className = _getClassNames(scss$8.checkbox, scss$8, size, weight, props.disabled); if (error2) { className.push(scss$8.error); } return className.join(" "); }; return /* @__PURE__ */ jsxs("span", { className: getClassNames(), children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({ id: "checkbox", type: "checkbox" }, props), { "data-testid": "Checkbox" })), /* @__PURE__ */ jsx("label", { htmlFor: "checkbox", children })] }); }; const menu = "_menu_kiun1_1"; var styles$5 = { menu }; const ContextMenu = ({ children, menu: menu2, open: open2, setOpen, location, setLocation, isDisabled }) => { const menuRef = useRef(null); useEffect(() => { if (isDisabled) setOpen(false); }, [isDisabled]); const handleClick = (e2) => { if (isDisabled) return; setOpen(true); setLocation({ x: e2.pageX, y: e2.pageY }); }; const onClickOff = (event) => { if (menuRef.current && !menuRef.current.contains(event.target)) { setOpen(false); } }; useEffect(() => { document.addEventListener("mousedown", onClickOff); return () => { document.removeEventListener("mousedown", onClickOff); }; }, []); return /* @__PURE__ */ jsxs(Fragment, { children: [React.cloneElement(children, { onContextMenu: (event) => { event.preventDefault(); handleClick(event); } }), open2 ? /* @__PURE__ */ jsx("div", { style: { left: location.x, top: location.y }, ref: menuRef, className: styles$5.menu, children: menu2 }) : null] }); }; const fontS$4 = "_fontS_1yui9_1"; const fontM$4 = "_fontM_1yui9_6"; const fontL$4 = "_fontL_1yui9_11"; const fontXL$4 = "_fontXL_1yui9_16"; var scss$7 = { fontS: fontS$4, fontM: fontM$4, fontL: fontL$4, fontXL: fontXL$4 }; const Icon = ({ icon: icon2, color, size }) => { const getClassNames = () => { let className = _getClassNames(scss$7.icon, scss$7, size, void 0, void 0); return className.join(" "); }; const returnSVG = () => { switch (icon2) { case "add": return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8.423", height: "8.423", viewBox: "0 0 8.423 8.423", children: /* @__PURE__ */ jsxs("g", { id: "Component_33_1", "data-name": "Component 33 \u2013 1", transform: "translate(1 1)", children: [/* @__PURE__ */ jsx("line", { id: "Line_845", "data-name": "Line 845", x2: "6.423", transform: "translate(0 3.211)", fill: "none", stroke: color, strokeLinecap: "round", strokeWidth: "2" }), /* @__PURE__ */ jsx("line", { id: "Line_846", "data-name": "Line 846", x2: "6.423", transform: "translate(3.211) rotate(90)", fill: "none", stroke: color, strokeLinecap: "round", strokeWidth: "2" })] }) }); case "itemMenu": return /* @__PURE__ */ jsxs("svg", { id: "Component_31", "data-name": "Component 31", xmlns: "http://www.w3.org/2000/svg", width: "3", height: "13", viewBox: "0 0 3 13", children: [/* @__PURE__ */ jsx("circle", { id: "Ellipse_1201", "data-name": "Ellipse 1201", cx: "1.5", cy: "1.5", r: "1.5", transform: "translate(3) rotate(90)", fill: "var(--text300)" }), /* @__PURE__ */ jsx("circle", { id: "Ellipse_1202", "data-name": "Ellipse 1202", cx: "1.5", cy: "1.5", r: "1.5", transform: "translate(3 5) rotate(90)", fill: "var(--text300)" }), /* @__PURE__ */ jsx("circle", { id: "Ellipse_1203", "data-name": "Ellipse 1203", cx: "1.5", cy: "1.5", r: "1.5", transform: "translate(3 10) rotate(90)", fill: "var(--text300)" })] }); case "arrow": return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8.523", height: "11.831", viewBox: "0 0 8.523 11.831", children: [/* @__PURE__ */ jsx("line", { id: "Line_867", "data-name": "Line 867", x2: "3.798", y2: "4.288", transform: "translate(2.117 9.714) rotate(-90)", fill: "none", stroke: "#a7a8a8", strokeLinecap: "round", strokeWidth: "3" }), /* @__PURE__ */ jsx("line", { id: "Line_868", "data-name": "Line 868", x1: "3.798", y2: "4.288", transform: "translate(2.117 5.916) rotate(-90)", fill: "none", stroke: "#a7a8a8", strokeLinecap: "round", strokeWidth: "3" })] }); case "cross": return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "11.839", height: "11.839", viewBox: "0 0 11.839 11.839", children: [/* @__PURE__ */ jsx("line", { id: "Line_869", "data-name": "Line 869", y2: "10.742", transform: "translate(9.717 2.122) rotate(45)", fill: "none", stroke: "var(--text300)", strokeLinecap: "round", strokeWidth: "3" }), /* @__PURE__ */ jsx("line", { id: "Line_870", "data-name": "Line 870", y2: "10.742", transform: "translate(9.717 9.717) rotate(135)", fill: "none", stroke: "var(--text300)", strokeLinecap: "round", strokeWidth: "3" })] }); case "edit": return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "11.756", height: "11.756", viewBox: "0 0 11.756 11.756", children: /* @__PURE__ */ jsx("path", { id: "Icon_material-edit", "data-name": "Icon material-edit", d: "M4.5,13.8v2.449H6.949L14.171,9.03,11.722,6.581ZM16.065,7.136a.65.65,0,0,0,0-.921L14.537,4.687a.65.65,0,0,0-.921,0l-1.2,1.2L14.87,8.331Z", transform: "translate(-4.5 -4.496)", fill: "var(--text300)" }) }); case "remove": return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12.281", height: "12.281", viewBox: "0 0 12.281 12.281", children: /* @__PURE__ */ jsx("path", { id: "Icon_material-remove-circle", "data-name": "Icon material-remove-circle", d: "M9.141,3a6.141,6.141,0,1,0,6.141,6.141A6.143,6.143,0,0,0,9.141,3Zm3.07,6.755H6.07V8.527h6.141Z", transform: "translate(-3 -3)", fill: "var(--text300)" }) }); case "lock": return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "11.92", height: "13.623", viewBox: "0 0 11.92 13.623", className: getClassNames(), children: /* @__PURE__ */ jsx("path", { id: "Icon_awesome-lock", "data-name": "Icon awesome-lock", d: "M10.643,5.96H10V4.044a4.044,4.044,0,1,0-8.089,0V5.96H1.277A1.277,1.277,0,0,0,0,7.237v5.109a1.277,1.277,0,0,0,1.277,1.277h9.366a1.277,1.277,0,0,0,1.277-1.277V7.237A1.277,1.277,0,0,0,10.643,5.96Zm-2.767,0H4.044V4.044a1.916,1.916,0,0,1,3.831,0Z", fill: "var(--text300)" }) }); case "eye": return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "11.927", viewBox: "0 0 18 11.927", className: getClassNames(), children: /* @__PURE__ */ jsx("path", { id: "Path_1084", "data-name": "Path 1084", d: "M17.892,69.51A10.029,10.029,0,0,0,9,64,10.031,10.031,0,0,0,.109,69.51a1,1,0,0,0,0,.907A10.029,10.029,0,0,0,9,75.927a10.031,10.031,0,0,0,8.891-5.51,1,1,0,0,0,0-.907ZM9,74.436a4.473,4.473,0,1,1,4.5-4.473A4.486,4.486,0,0,1,9,74.436Zm0-7.454a3,3,0,0,0-.791.118,1.479,1.479,0,0,1-.147,1.932,1.5,1.5,0,0,1-1.944.146,2.966,2.966,0,0,0,1.221,3.25,3.008,3.008,0,0,0,3.489-.11A2.972,2.972,0,0,0,9,66.982Z", transform: "translate(-0.001 -64)", fill: "#a7a8a8" }) }); case "eyeClosed": return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20.033", height: "16.027", viewBox: "0 0 20.033 16.027", className: getClassNames(), children: /* @__PURE__ */ jsx("path", { id: "Path_1085", "data-name": "Path 1085", d: "M10.018,12.517A4.491,4.491,0,0,1,5.545,8.351L2.261,5.813a10.433,10.433,0,0,0-1.149,1.74,1.013,1.013,0,0,0,0,.914,10.04,10.04,0,0,0,8.906,5.553,9.723,9.723,0,0,0,2.438-.327l-1.624-1.257A4.512,4.512,0,0,1,10.018,12.517Zm9.823,1.819-3.46-2.674a10.369,10.369,0,0,0,2.543-3.195,1.013,1.013,0,0,0,0-.914A10.04,10.04,0,0,0,10.018,2,9.646,9.646,0,0,0,5.407,3.18L1.424.1a.5.5,0,0,0-.7.088L.107.981a.5.5,0,0,0,.088.7L18.612,15.918a.5.5,0,0,0,.7-.088l.615-.791A.5.5,0,0,0,19.841,14.336ZM14.09,9.891,12.86,8.94A2.966,2.966,0,0,0,9.226,5.124a1.492,1.492,0,0,1,.291.883,1.46,1.46,0,0,1-.048.313l-2.3-1.781A4.455,4.455,0,0,1,10.018,3.5,4.5,4.5,0,0,1,14.525,8.01a4.4,4.4,0,0,1-.435,1.882Z", transform: "translate(-0.001 0.003)", fill: "#a7a8a8" }) }); default: return /* @__PURE__ */ jsx("svg", {}); } }; return returnSVG(); }; const fontS$3 = "_fontS_1x9c1_1"; const fontM$3 = "_fontM_1x9c1_6"; const fontL$3 = "_fontL_1x9c1_11"; const fontXL$3 = "_fontXL_1x9c1_16"; const weightLight$3 = "_weightLight_1x9c1_21"; const weightNormal$3 = "_weightNormal_1x9c1_26"; const weightBold$3 = "_weightBold_1x9c1_31"; const disabled$3 = "_disabled_1x9c1_36"; const errorMessage$3 = "_errorMessage_1x9c1_41"; const kanbanSkeleton$3 = "_kanbanSkeleton_1x9c1_46"; const input$2 = "_input_1x9c1_51"; const icon$2 = "_icon_1x9c1_75"; const password = "_password_1x9c1_81"; const error = "_error_1x9c1_41"; var scss$6 = { fontS: fontS$3, fontM: fontM$3, fontL: fontL$3, fontXL: fontXL$3, weightLight: weightLight$3, weightNormal: weightNormal$3, weightBold: weightBold$3, disabled: disabled$3, errorMessage: errorMessage$3, kanbanSkeleton: kanbanSkeleton$3, input: input$2, icon: icon$2, password, error }; const Input = (_e) => { var _f = _e, { error: error2, errorMessage: errorMessage2, scale, weight, type, icon: icon2, limit, value } = _f, props = __objRest(_f, [ "error", "errorMessage", "scale", "weight", "type", "icon", "limit", "value" ]); const [showPassword, setShowPassword] = useState(false); const getClassNames = () => { let className = _getClassNames(scss$6.input, scss$6, scale, weight, props.disabled); if (error2) { className.push(scss$6.error); } if (icon2 || type === "password") { className.push(scss$6.icon); } return className.join(" "); }; return /* @__PURE__ */ jsxs("div", { className: getClassNames(), children: [/* @__PURE__ */ jsxs("div", { children: [icon2 && icon2, type === "password" && /* @__PURE__ */ jsx(Icon, { size: scale, icon: "lock" }), /* @__PURE__ */ jsx("input", __spreadValues({ type: type === "password" && showPassword ? "text" : type, "data-testid": "Input" }, props)), type === "password" && /* @__PURE__ */ jsx("span", { className: scss$6.password, onClick: () => { setShowPassword((prev) => !prev); }, children: showPassword ? /* @__PURE__ */ jsx(Icon, { icon: "eyeClosed", size: scale }) : /* @__PURE__ */ jsx(Icon, { icon: "eye", size: scale }) }), limit && /* @__PURE__ */ jsxs("span", { className: scss$6.limit, children: [value.length, "/", props.maxLength] })] }), error2 && errorMessage2 && /* @__PURE__ */ jsx("span", { className: scss$6.errorMessage, children: errorMessage2 })] }); }; const board = "_board_1y65x_1"; const title = "_title_1y65x_6"; const skeletonWrapper = "_skeletonWrapper_1y65x_12"; const skeleton$1 = "_skeleton_1y65x_12"; const skeletonText = "_skeletonText_1y65x_23"; var styles$4 = { board, title, skeletonWrapper, skeleton: skeleton$1, skeletonText }; const column$1 = "_column_1jjlb_1"; const skeleton = "_skeleton_1jjlb_11"; var styles$3 = { column: column$1, skeleton }; const add$1 = "_add_13zh4_1"; const column = "_column_13zh4_14"; var styles$2 = { add: add$1, column }; const Add = ({ text: text2, onClick, isColumn }) => { return /* @__PURE__ */ jsxs("span", { "data-testid": "add", className: isColumn ? styles$2.add + " " + styles$2.column : styles$2.add, onClick, children: [/* @__PURE__ */ jsx(Icon, { icon: "add", color: "var(--text200)" }), " ", text2] }); }; const item = "_item_e949w_1"; const locked$1 = "_locked_e949w_17"; const borderAnimation$1 = "_borderAnimation_e949w_1"; const icon$1 = "_icon_e949w_23"; const lock$1 = "_lock_e949w_17"; const textWrapper$1 = "_textWrapper_e949w_38"; const input$1 = "_input_e949w_41"; const text$2 = "_text_e949w_38"; var styles$1 = { item, locked: locked$1, borderAnimation: borderAnimation$1, icon: icon$1, lock: lock$1, textWrapper: textWrapper$1, input: input$1, text: text$2 }; const Item = ({ text: text2, position: position3, _id, columnId, createdAt, updatedAt, isDragging, _deleteItem, columnIndex, itemIndex, _editItem, i18n, newItem, setNewItem, provided, _isEditingItem, locked: locked2 }) => { const [open2, setOpen] = useState(false); const [location, setLocation] = useState({ x: 0, y: 0 }); const [value, setValue] = useState(text2); const [editMode, setEditMode] = useState(newItem); useEffect(() => { _isEditingItem(columnIndex, itemIndex, editMode || isDragging); }, [editMode, isDragging]); useEffect(() => { setValue(text2); }, [text2]); function auto_grow(element) { element.style.height = "5px"; element.style.height = element.scrollHeight + "px"; } return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ContextMenu, { menu: /* @__PURE__ */ jsxs("div", { onClick: () => setOpen(false), children: [/* @__PURE__ */ jsxs("button", { onClick: () => { setEditMode(true); }, children: [/* @__PURE__ */ jsx(Icon, { icon: "edit" }), i18n.edit] }), /* @__PURE__ */ jsxs("button", { onClick: () => { _deleteItem(columnIndex, itemIndex); }, children: [/* @__PURE__ */ jsx(Icon, { icon: "remove" }), i18n.remove] })] }), open: open2, setOpen, location, setLocation, isDisabled: locked2, children: /* @__PURE__ */ jsxs("div", { "data-testid": "Item", className: locked2 ? styles$1.item + " " + styles$1.locked : styles$1.item, style: isDragging ? { border: "2px solid var(--text400)" } : {}, children: [/* @__PURE__ */ jsx("span", { className: styles$1.textWrapper, children: editMode ? /* @__PURE__ */ jsx("textarea", { className: styles$1.input, autoFocus: true, value, onChange: (e2) => { setValue(e2.target.value); auto_grow(e2.target); }, onBlur: (e2) => { setEditMode(false); setNewItem(false); _editItem(columnIndex, itemIndex, value); }, onFocus: (e2) => e2.currentTarget.setSelectionRange(e2.currentTarget.value.length, e2.currentTarget.value.length) }) : /* @__PURE__ */ jsx("span", { className: styles$1.text, children: value }) }), locked2 ? /* @__PURE__ */ jsx("div", { className: styles$1.icon + " " + styles$1.lock, children: /* @__PURE__ */ jsx(Icon, { icon: "lock" }) }) : /* @__PURE__ */ jsx("div", { className: styles$1.icon, onClick: (e2) => { setLocation({ x: e2.pageX, y: e2.pageY }); setOpen(true); }, children: /* @__PURE__ */ jsx(Icon, { icon: "itemMenu" }) })] }) }) }); }; const header$1 = "_header_1jjvd_1"; const locked = "_locked_1jjvd_15"; const borderAnimation = "_borderAnimation_1jjvd_1"; const icon = "_icon_1jjvd_21"; const lock = "_lock_1jjvd_15"; const textWrapper = "_textWrapper_1jjvd_35"; const itemCount = "_itemCount_1jjvd_41"; const text$1 = "_text_1jjvd_35"; const input = "_input_1jjvd_54"; const right = "_right_1jjvd_63"; var styles = { header: header$1, locked, borderAnimation, icon, lock, textWrapper, itemCount, text: text$1, input, right }; const Header = ({ text: text2, color, itemCount: itemCount2, dragHandleProps, _deleteColumn, _editColumn, columnIndex, isDragging, i18n, newColumn, setNewColumn, locked: locked2, _isEditingColumn }) => { const [open2, setOpen] = useState(false); const [location, setLocation] = useState({ x: 0, y: 0 }); const [value, setValue] = useState(text2); const [editMode, setEditMode] = useState(newColumn); useEffect(() => { _isEditingColumn(columnIndex, editMode || isDragging); }, [editMode, isDragging]); useEffect(() => { setValue(text2); }, [text2]); return /* @__PURE__ */ jsx(ContextMenu, { menu: /* @__PURE__ */ jsxs("div", { onClick: () => setOpen(false), children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { onClick: () => _editColumn(columnIndex, value, "var(--text200)"), style: { backgroundColor: "var(--text200)" } }), /* @__PURE__ */ jsx("span", { onClick: () => _editColumn(columnIndex, value, "#796AFF"), style: { backgroundColor: "#796AFF" } }), /* @__PURE__ */ jsx("span", { onClick: () => _editColumn(columnIndex, value, "#FF6A6A"), style: { backgroundColor: "#FF6A6A" } }), /* @__PURE__ */ jsx("span", { onClick: () => _editColumn(columnIndex, value, "#FC762A"), style: { backgroundColor: "#FC762A" } }), /* @__PURE__ */ jsx("span", { onClick: () => _editColumn(columnIndex, value, "#FFAD1F"), style: { backgroundColor: "#FFAD1F" } }), /* @__PURE__ */ jsx("span", { onClick: () => _editColumn(columnIndex, value, "#17BF63"), style: { backgroundColor: "#17BF63" } })] }), /* @__PURE__ */ jsx("hr", {}), /* @__PURE__ */ jsxs("button", { onClick: () => setEditMode(true), children: [/* @__PURE__ */ jsx(Icon, { icon: "edit" }), " ", i18n.edit] }), /* @__PURE__ */ jsxs("button", { onClick: () => { _deleteColumn(columnIndex); }, children: [/* @__PURE__ */ jsx(Icon, { icon: "remove" }), i18n.remove] })] }), open: open2, setOpen, location, setLocation, isDisabled: locked2, children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, dragHandleProps), { "data-testid": "Header", className: locked2 ? styles.header + " " + styles.locked : styles.header, style: isDragging ? { border: "2px solid var(--text400)", color } : { color }, children: [/* @__PURE__ */ jsxs("div", { className: styles.textWrapper, children: [/* @__PURE__ */ jsx("span", { className: styles.itemCount, children: itemCount2 }), editMode ? /* @__PURE__ */ jsx("input", { className: styles.input, autoFocus: true, value, onChange: (e2) => { setValue(e2.target.value); }, onBlur: (e2) => { setEditMode(false); setNewColumn(false); _editColumn(columnIndex, value, color); }, style: { color }, maxLength: 28 }) : /* @__PURE__ */ jsx("span", { children: text2 })] }), locked2 ? /* @__PURE__ */ jsx("div", { className: styles.icon + " " + styles.lock, children: /* @__PURE__ */ jsx(Icon, { icon: "lock" }) }) : /* @__PURE__ */ jsx("div", { className: styles.icon, onClick: (e2) => { setLocation({ x: e2.pageX, y: e2.pageY }); setOpen(true); }, children: /* @__PURE__ */ jsx(Icon, { icon: "itemMenu" }) })] })) }); }; function _setPrototypeOf(o, p2) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p3) { o2.__proto__ = p3; return o2; }; return _setPrototypeOf(o, p2); } function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); } function _extends() { _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function(sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function(key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function(key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function formatProdErrorMessage(code) { return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or use the non-minified dev environment for full errors. "; } var $$observable = function() { return typeof Symbol === "function" && Symbol.observable || "@@observable"; }(); var randomString = function randomString2() { return Math.random().toString(36).substring(7).split("").join("."); }; var ActionTypes = { INIT: "@@redux/INIT" + randomString(), REPLACE: "@@redux/REPLACE" + randomString(), PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() { return "@@redux/PROBE_UNKNOWN_ACTION" + randomString(); } }; function isPlainObject(obj) { if (typeof obj !== "object" || obj === null) return false; var proto = obj; while (Object.getPrototypeOf(proto) !== null) { proto = Object.getPrototypeOf(proto); } return Object.getPrototypeOf(obj) === proto; } function createStore$1(reducer2, preloadedState, enhancer) { var _ref2; if (typeof preloadedState === "function" && typeof enhancer === "function" || typeof enhancer === "function" && typeof arguments[3] === "function") { throw new Error(formatProdErrorMessage(0)); } if (typeof preloadedState === "function" && typeof enhancer === "undefined") { enhancer = preloadedState; preloadedState = void 0; } if (typeof enhancer !== "undefined") { if (typeof enhancer !== "function") { throw new Error(formatProdErrorMessage(1)); } return enhancer(createStore$1)(reducer2, preloadedState); } if (typeof reducer2 !== "function") { throw new Error(formatProdErrorMessage(2)); } var currentReducer = reducer2; var currentState = preloadedState; var currentListeners = []; var nextListeners = currentListeners; var isDispatching = false; function ensureCanMutateNextListeners() { if (nextListeners === currentListeners) { nextListeners = currentListeners.slice(); } } function getState() { if (isDispatching) { throw new Error(formatProdErrorMessage(3)); } return currentState; } function subscribe(listener) { if (typeof listener !== "function") { throw new Error(formatProdErrorMessage(4)); } if (isDispatching) { throw new Error(formatProdErrorMessage(5)); } var isSubscribed = true; ensureCanMutateNextListeners(); nextListeners.push(listener); return function unsubscribe() { if (!isSubscribed) { return; } if (isDispatching) { throw new Error(formatProdErrorMessage(6)); } isSubscribed = false; ensureCanMutateNextListeners(); var index = nextListeners.indexOf(listener); nextListeners.splice(index, 1); currentListeners = null; }; } function dispatch(action) { if (!isPlainObject(action)) { throw new Error(formatProdErrorMessage(7)); } if (typeof action.type === "undefined") { throw new Error(formatProdErrorMessage(8)); } if (isDispatching) { throw new Error(formatProdErrorMessage(9)); } try { isDispatching = true; currentState = currentReducer(currentState, action); } finally { isDispatching = false; } var listeners = currentListeners = nextListeners; for (var i = 0; i < listeners.length; i++) { var listener = listeners[i]; listener(); } return action; } function replaceReducer(nextReducer) { if (typeof nextReducer !== "function") { throw new Error(formatProdErrorMessage(10)); } currentReducer = nextReducer; dispatch({ type: ActionTypes.REPLACE }); } function observable() { var _ref; var outerSubscribe = subscribe; return _ref = { subscribe: function subscribe2(observer) { if (typeof observer !== "object" || observer === null) { throw new Error(formatProdErrorMessage(11)); } function observeState() { if (observer.next) { observer.next(getState()); } } observeState(); var unsubscribe = outerSubscribe(observeState); return { unsubscribe }; } }, _ref[$$observable] = function() { return this; }, _ref; } dispatch({ type: ActionTypes.INIT }); return _ref2 = { dispatch, subscribe, getState, replaceReducer }, _ref2[$$observable] = observable, _ref2; } function bindActionCreator(actionCreator, dispatch) { return function() { return dispatch(actionCreator.apply(this, arguments)); }; } function bindActionCreators$1(actionCreators, dispatch) { if (typeof actionCreators === "function") { return bindActionCreator(actionCreators, dispatch); } if (typeof actionCreators !== "object" || actionCreators === null) { throw new Error(formatProdErrorMessage(16)); } var boundActionCreators = {}; for (var key in actionCreators) { var actionCreator = actionCreators[key]; if (typeof actionCreator === "function") { boundActionCreators[key] = bindActionCreator(actionCreator, dispatch); } } return boundActionCreators; } function compose() { for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) { funcs[_key] = arguments[_key]; } if (funcs.length === 0) { return function(arg) { return arg; }; } if (funcs.length === 1) { return funcs[0]; } return funcs.reduce(function(a, b2) { return function() { return a(b2.apply(void 0, arguments)); }; }); } function applyMiddleware() { for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) { middlewares[_key] = arguments[_key]; } return function(createStore2) { return function() { var store = createStore2.apply(void 0, arguments); var _dispatch = function dispatch() { throw new Error(formatProdErrorMessage(15)); }; var middlewareAPI = { getState: store.getState, dispatch: function dispatch() { return _dispatch.apply(void 0, arguments); } }; var chain = middlewares.map(function(middleware) { return middleware(middlewareAPI); }); _dispatch = compose.apply(void 0, chain)(store.dispatch); return _objectSpread2(_objectSpread2({}, store), {}, { dispatch: _dispatch }); }; }; } var ReactPropTypesSecret$1 = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"; var ReactPropTypesSecret_1 = ReactPropTypesSecret$1; var ReactPropTypesSecret = ReactPropTypesSecret_1; function emptyFunction() { } function emptyFunctionWithReset() { } emptyFunctionWithReset.resetWarningCache = emptyFunction; var factoryWithThrowingShims = function() { function shim(props, propName, componentName, location, propFullName, secret) { if (secret === ReactPropTypesSecret) { return; } var err = new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"); err.name = "Invariant Violation"; throw err; } shim.isRequired = shim; function getShim() { return shim; } var ReactPropTypes = { array: shim, bool: shim, func: shim, number: shim, object: shim, string: shim, symbol: shim, any: shim, arrayOf: getShim, element: shim, elementType: shim, instanceOf: getShim, node: shim, objectOf: getShim, oneOf: getShim, oneOfType: getShim, shape: getShim, exact: getShim, checkPropTypes: emptyFunctionWithReset, resetWarningCache: emptyFunction }; ReactPropTypes.PropTypes = ReactPropTypes; return ReactPropTypes; }; { factoryWithThrowingShims(); } var ReactReduxContext = /* @__PURE__ */ React.createContext(null); function defaultNoopBatch(callback) { callback(); } var batch = defaultNoopBatch; var setBatch = function setBatch2(newBatch) { return batch = newBatch; }; var getBatch = function getBatch2() { return batch; }; function createListenerCollection() { var batch2 = getBatch(); var first = null; var last = null; return { clear: function clear() { first = null; last = null; }, notify: function notify2() { batch2(function() { var listener = first; while (listener) { listener.callback(); listener = listener.next; } }); }, get: function get2() { var listeners = []; var listener = first; while (listener) { listeners.push(listener); listener = listener.next; } return listeners; }, subscribe: function subscribe(callback) { var isSubscribed = true; var listener = last = { callback, next: null, prev: last }; if (listener.prev) { listener.prev.next = listener; } else { first = listener; } return function unsubscribe() { if (!isSubscribed || first === null) return; isSubscribed = false; if (listener.next) { listener.next.prev = listener.prev; } else { last = listener.prev; } if (listener.prev) { listener.prev.next = listener.next; } else { first = listener.next; } }; } }; } var nullListeners = { notify: function notify() { }, get: function get() { return []; } }; function createSubscription(store, parentSub) { var unsubscribe; var listeners = nullListeners; function addNestedSub(listener) { trySubscribe(); return listeners.subscribe(listener); } function notifyNestedSubs() { listeners.notify(); } function handleChangeWrapper() { if (subscription.onStateChange) { subscription.onStateChange(); } } function isSubscribed() { return Boolean(unsubscribe); } function trySubscribe() { if (!unsubscribe) { unsubscribe = parentSub ? parentSub.addNestedSub(handleChangeWrapper) : store.subscribe(handleChangeWrapper); listeners = createListenerCollection(); } } function tryUnsubscribe() { if (unsubscribe) { unsubscribe(); unsubscribe = void 0; listeners.clear(); listeners = nullListeners; } } var subscription = { addNestedSub, notifyNestedSubs, handleChangeWrapper, isSubscribed, trySubscribe, tryUnsubscribe, getListeners: function getListeners() { return listeners; } }; return subscription; } var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined" ? useLayoutEffect : useEffect; function Provider(_ref) { var store = _ref.store, context = _ref.context, children = _ref.children; var contextValue = useMemo$1(function() { var subscription = createSubscription(store); subscription.onStateChange = subscription.notifyNestedSubs; return { store, subscription }; }, [store]); var previousState = useMemo$1(function() { return store.getState(); }, [store]); useIsomorphicLayoutEffect$1(function() { var subscription = contextValue.subscription; subscription.trySubscribe(); if (previousState !== store.getState()) { subscription.notifyNestedSubs(); } return function() { subscription.tryUnsubscribe(); subscription.onStateChange = null; }; }, [contextValue, previousState]); var Context = context || ReactReduxContext; return /* @__PURE__ */ jsx(Context.Provider, { value: contextValue, children }); } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } var reactIs$2 = { exports: {} }; var reactIs_production_min$1 = {}; /** @license React v16.13.1 * react-is.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var b$1 = typeof Symbol === "function" && Symbol.for, c$1 = b$1 ? Symbol.for("react.element") : 60103, d$1 = b$1 ? Symbol.for("react.portal") : 60106, e$1 = b$1 ? Symbol.for("react.fragment") : 60107, f$1 = b$1 ? Symbol.for("react.strict_mode") : 60108, g$1 = b$1 ? Symbol.for("react.profiler") : 60114, h$1 = b$1 ? Symbol.for("react.provider") : 60109, k$1 = b$1 ? Symbol.for("react.context") : 60110, l$1 = b$1 ? Symbol.for("react.async_mode") : 60111, m$1 = b$1 ? Symbol.for("react.concurrent_mode") : 60111, n$1 = b$1 ? Symbol.for("react.forward_ref") : 60112, p$1 = b$1 ? Symbol.for("react.suspense") : 60113, q$1 = b$1 ? Symbol.for("react.suspense_list") : 60120, r$1 = b$1 ? Symbol.for("react.memo") : 60115, t = b$1 ? Symbol.for("react.lazy") : 60116, v$1 = b$1 ? Symbol.for("react.block") : 60121, w$1 = b$1 ? Symbol.for("react.fundamental") : 60117, x$1 = b$1 ? Symbol.for("react.responder") : 60118, y$1 = b$1 ? Symbol.for("react.scope") : 60119; function z$1(a) { if (typeof a === "object" && a !== null) { var u2 = a.$$typeof; switch (u2) { case c$1: switch (a = a.type, a) { case l$1: case m$1: case e$1: case g$1: case f$1: case p$1: return a; default: switch (a = a && a.$$typeof, a) { case k$1: case n$1: case t: case r$1: case h$1: return a; default: return u2; } } case d$1: return u2; } } } function A$1(a) { return z$1(a) === m$1; } reactIs_production_min$1.AsyncMode = l$1; reactIs_production_min$1.ConcurrentMode = m$1; reactIs_production_min$1.ContextConsumer = k$1; reactIs_production_min$1.ContextProvider = h$1; reactIs_production_min$1.Element = c$1; reactIs_production_min$1.ForwardRef = n$1; reactIs_production_min$1.Fragment = e$1; reactIs_production_min$1.Lazy = t; reactIs_production_min$1.Memo = r$1; reactIs_production_min$1.Portal = d$1; reactIs_production_min$1.Profiler = g$1; reactIs_production_min$1.StrictMode = f$1; reactIs_production_min$1.Suspense = p$1; reactIs_production_min$1.isAsyncMode = function(a) { return A$1(a) || z$1(a) === l$1; }; reactIs_production_min$1.isConcurrentMode = A$1; reactIs_production_min$1.isContextConsumer = function(a) { return z$1(a) === k$1; }; reactIs_production_min$1.isContextProvider = function(a) { return z$1(a) === h$1; }; reactIs_production_min$1.isElement = function(a) { return typeof a === "object" && a !== null && a.$$typeof === c$1; }; reactIs_production_min$1.isForwardRef = function(a) { return z$1(a) === n$1; }; reactIs_production_min$1.isFragment = function(a) { return z$1(a) === e$1; }; reactIs_production_min$1.isLazy = function(a) { return z$1(a) === t; }; reactIs_production_min$1.isMemo = function(a) { return z$1(a) === r$1; }; reactIs_production_min$1.isPortal = function(a) { return z$1(a) === d$1; }; reactIs_production_min$1.isProfiler = function(a) { return z$1(a) === g$1; }; reactIs_production_min$1.isStrictMode = function(a) { return z$1(a) === f$1; }; reactIs_production_min$1.isSuspense = function(a) { return z$1(a) === p$1; }; reactIs_production_min$1.isValidElementType = function(a) { return typeof a === "string" || typeof a === "function" || a === e$1 || a === m$1 || a === g$1 || a === f$1 || a === p$1 || a === q$1 || typeof a === "object" && a !== null && (a.$$typeof === t || a.$$typeof === r$1 || a.$$typeof === h$1 || a.$$typeof === k$1 || a.$$typeof === n$1 || a.$$typeof === w$1 || a.$$typeof === x$1 || a.$$typeof === y$1 || a.$$typeof === v$1); }; reactIs_production_min$1.typeOf = z$1; { reactIs$2.exports = reactIs_production_min$1; } var reactIs$1 = reactIs$2.exports; var REACT_STATICS = { childContextTypes: true, contextType: true, contextTypes: true, defaultProps: true, displayName: true, getDefaultProps: true, getDerivedStateFromError: true, getDerivedStateFromProps: true, mixins: true, propTypes: true, type: true }; var KNOWN_STATICS = { name: true, length: true, prototype: true, caller: true, callee: true, arguments: true, arity: true }; var FORWARD_REF_STATICS = { "$$typeof": true, render: true, defaultProps: true, displayName: true, propTypes: true }; var MEMO_STATICS = { "$$typeof": true, compare: true, defaultProps: true, displayName: true, propTypes: true, type: true }; var TYPE_STATICS = {}; TYPE_STATICS[reactIs$1.ForwardRef] = FORWARD_REF_STATICS; TYPE_STATICS[reactIs$1.Memo] = MEMO_STATICS; function getStatics(component) { if (reactIs$1.isMemo(component)) { return MEMO_STATICS; } return TYPE_STATICS[component["$$typeof"]] || REACT_STATICS; } var defineProperty = Object.defineProperty; var getOwnPropertyNames = Object.getOwnPropertyNames; var getOwnPropertySymbols = Object.getOwnPropertySymbols; var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; var getPrototypeOf = Object.getPrototypeOf; var objectPrototype = Object.prototype; function hoistNonReac