@worknice/whiteboard 0.61.0 → 0.63.0

package/dist/presentation/TagSet.js

@@ -1,18 +1,81 @@
+"use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__ from "../icons/components/Close.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__ from "./TagSet.module.js";
-const TagSet = ({ tags, direction = "row" })=>{
+const TagSet = ({ tags, direction = "row", maxVisibleTags })=>{
+    const [isModalOpen, setIsModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const nonNullTags = tags.filter((badge)=>null !== badge && void 0 !== badge.value && null !== badge.value);
-    return nonNullTags.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-            __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
-            "row" === direction ? __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow : __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionColumn
-        ]),
+    if (0 === nonNullTags.length) return null;
+    const containerClassName = (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+        __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
+        "row" === direction ? __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow : __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionColumn
+    ]);
+    const hiddenTagCount = void 0 === maxVisibleTags ? 0 : Math.max(nonNullTags.length - maxVisibleTags, 0);
+    if (0 === hiddenTagCount) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: containerClassName,
         children: nonNullTags.map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
                 children: value
             }, key))
-    }) : null;
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                "aria-label": `Show all ${nonNullTags.length} tags`,
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(containerClassName, __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].overflowTrigger),
+                onClick: (event)=>{
+                    event.stopPropagation();
+                    setIsModalOpen(true);
+                },
+                title: `Show all ${nonNullTags.length} tags`,
+                type: "button",
+                children: [
+                    nonNullTags.slice(0, maxVisibleTags).map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+                            children: value
+                        }, key)),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                        font: "small-semibold",
+                        children: [
+                            "+",
+                            hiddenTagCount
+                        ]
+                    })
+                ]
+            }),
+            isModalOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
+                onClose: ()=>setIsModalOpen(false),
+                size: "small",
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+                    header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                        font: "h6",
+                        children: "Tags"
+                    }),
+                    actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__["default"], {}),
+                        onClick: ()=>setIsModalOpen(false),
+                        type: "ghost"
+                    }),
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].container,
+                                __WEBPACK_EXTERNAL_MODULE__TagSet_module_js_d14b95cb__["default"].directionRow
+                            ]),
+                            children: nonNullTags.map(({ key, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+                                    children: value
+                                }, key))
+                        })
+                    })
+                })
+            }) : null
+        ]
+    });
 };
 const TagSet_rslib_entry_ = TagSet;
 export { TagSet_rslib_entry_ as default };

package/dist/presentation/TagSet.module.js

@@ -2,6 +2,7 @@ import "./TagSet_module.css";
 const TagSet_module_rslib_entry_ = {
     container: "container-L0HAwG",
     directionRow: "directionRow-gPULoA",
-    directionColumn: "directionColumn-YfoXcq"
+    directionColumn: "directionColumn-YfoXcq",
+    overflowTrigger: "overflowTrigger-GgLKSJ"
 };
 export { TagSet_module_rslib_entry_ as default };

package/dist/presentation/TagSet_module.css

@@ -13,3 +13,13 @@
   flex-direction: column;
 }
 
+.overflowTrigger-GgLKSJ {
+  cursor: pointer;
+  align-items: center;
+}
+
+.overflowTrigger-GgLKSJ:focus-visible {
+  border-radius: var(--size-n3);
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+

package/dist/static/svg/ArrowsCompress.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor">
+  <path d="M553.5 121C562.9 111.6 562.9 96.4 553.5 87.1C544.1 77.8 528.9 77.7 519.6 87.1L384.6 222.1L384.6 136C384.6 122.7 373.9 112 360.6 112C347.3 112 336.6 122.7 336.6 136L336.6 280C336.6 293.3 347.3 304 360.6 304L504.6 304C517.9 304 528.6 293.3 528.6 280C528.6 266.7 517.9 256 504.6 256L418.5 256L553.5 121zM87.5 519C78.1 528.4 78.1 543.6 87.5 552.9C96.9 562.2 112.1 562.3 121.4 552.9L256.4 417.9L256.4 504C256.4 517.3 267.1 528 280.4 528C293.7 528 304.4 517.3 304.4 504L304.4 360C304.4 346.7 293.7 336 280.4 336L136.4 336C123.1 336 112.4 346.7 112.4 360C112.4 373.3 123.1 384 136.4 384L222.5 384L87.5 519z" />
+</svg>

package/dist/static/svg/ArrowsExpand.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor">
+  <path d="M359 247C349.6 256.4 349.6 271.6 359 280.9C368.4 290.2 383.6 290.3 392.9 280.9L527.9 145.9L527.9 232C527.9 245.3 538.6 256 551.9 256C565.2 256 575.9 245.3 575.9 232L575.9 88C575.9 74.7 565.2 64 551.9 64L408 64C394.7 64 384 74.7 384 88C384 101.3 394.7 112 408 112L494.1 112L359.1 247zM281 393C290.4 383.6 290.4 368.4 281 359.1C271.6 349.8 256.4 349.7 247.1 359.1L112 494.1L112 408C112 394.7 101.3 384 88 384C74.7 384 64 394.7 64 408L64 552C64 565.3 74.7 576 88 576L232 576C245.3 576 256 565.3 256 552C256 538.7 245.3 528 232 528L145.9 528L280.9 393z" />
+</svg>

package/dist/static/svg/FitView.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor">
+  <path d="M232 96C245.3 96 256 106.7 256 120C256 133.3 245.3 144 232 144L144 144L144 232C144 245.3 133.3 256 120 256C106.7 256 96 245.3 96 232L96 120C96 106.7 106.7 96 120 96L232 96zM96 408C96 394.7 106.7 384 120 384C133.3 384 144 394.7 144 408L144 496L232 496C245.3 496 256 506.7 256 520C256 533.3 245.3 544 232 544L120 544C106.7 544 96 533.3 96 520L96 408zM520 96C533.3 96 544 106.7 544 120L544 232C544 245.3 533.3 256 520 256C506.7 256 496 245.3 496 232L496 144L408 144C394.7 144 384 133.3 384 120C384 106.7 394.7 96 408 96L520 96zM496 408C496 394.7 506.7 384 520 384C533.3 384 544 394.7 544 408L544 520C544 533.3 533.3 544 520 544L408 544C394.7 544 384 533.3 384 520C384 506.7 394.7 496 408 496L496 496L496 408z" />
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.61.0",
+  "version": "0.63.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.44.0"
+    "@worknice/utils": "^0.46.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",