@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ToggleToolLockedButton_exports = {};
+__export(ToggleToolLockedButton_exports, {
+  ToggleToolLockedButton: () => ToggleToolLockedButton
+});
+module.exports = __toCommonJS(ToggleToolLockedButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_classnames = __toESM(require("classnames"));
+var import_useBreakpoint = require("../../hooks/useBreakpoint");
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Button = require("../primitives/Button");
+const NOT_LOCKABLE_TOOLS = [
+  "select",
+  "hand",
+  "draw",
+  "eraser",
+  "text",
+  "zoom",
+  "laser",
+  "highlight"
+];
+function ToggleToolLockedButton({ activeToolId }) {
+  const editor = (0, import_editor.useEditor)();
+  const breakpoint = (0, import_useBreakpoint.useBreakpoint)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const isToolLocked = (0, import_editor.useValue)("is tool locked", () => editor.getInstanceState().isToolLocked, [
+    editor
+  ]);
+  if (!activeToolId || NOT_LOCKABLE_TOOLS.includes(activeToolId))
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      type: "normal",
+      title: msg("action.toggle-tool-lock"),
+      className: (0, import_classnames.default)("tlui-toolbar__lock-button", {
+        "tlui-toolbar__lock-button__mobile": breakpoint < 5
+      }),
+      icon: isToolLocked ? "lock" : "unlock",
+      onClick: () => editor.updateInstanceState({ isToolLocked: !isToolLocked }),
+      smallIcon: true
+    }
+  );
+}
+//# sourceMappingURL=ToggleToolLockedButton.js.map

package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx"],
+  "sourcesContent": ["import { useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\n\ninterface ToggleToolLockedButtonProps {\n\tactiveToolId?: string\n}\n\nconst NOT_LOCKABLE_TOOLS = [\n\t'select',\n\t'hand',\n\t'draw',\n\t'eraser',\n\t'text',\n\t'zoom',\n\t'laser',\n\t'highlight',\n]\n\nexport function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [\n\t\teditor,\n\t])\n\n\tif (!activeToolId || NOT_LOCKABLE_TOOLS.includes(activeToolId)) return null\n\n\treturn (\n\t\t<Button\n\t\t\ttype=\"normal\"\n\t\t\ttitle={msg('action.toggle-tool-lock')}\n\t\t\tclassName={classNames('tlui-toolbar__lock-button', {\n\t\t\t\t'tlui-toolbar__lock-button__mobile': breakpoint < 5,\n\t\t\t})}\n\t\t\ticon={isToolLocked ? 'lock' : 'unlock'}\n\t\t\tonClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCE;AAjCF,oBAAoC;AACpC,wBAAuB;AACvB,2BAA8B;AAC9B,4BAA+B;AAC/B,oBAAuB;AAMvB,MAAM,qBAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,uBAAuB,EAAE,aAAa,GAAgC;AACrF,QAAM,aAAS,yBAAU;AACzB,QAAM,iBAAa,oCAAc;AACjC,QAAM,UAAM,sCAAe;AAE3B,QAAM,mBAAe,wBAAS,kBAAkB,MAAM,OAAO,iBAAiB,EAAE,cAAc;AAAA,IAC7F;AAAA,EACD,CAAC;AAED,MAAI,CAAC,gBAAgB,mBAAmB,SAAS,YAAY;AAAG,WAAO;AAEvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,IAAI,yBAAyB;AAAA,MACpC,eAAW,kBAAAA,SAAW,6BAA6B;AAAA,QAClD,qCAAqC,aAAa;AAAA,MACnD,CAAC;AAAA,MACD,MAAM,eAAe,SAAS;AAAA,MAC9B,SAAS,MAAM,OAAO,oBAAoB,EAAE,cAAc,CAAC,aAAa,CAAC;AAAA,MACzE,WAAS;AAAA;AAAA,EACV;AAEF;",
+  "names": ["classNames"]
+}

package/dist-cjs/lib/ui/components/Toolbar/Toolbar.js

@@ -0,0 +1,247 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Toolbar_exports = {};
+__export(Toolbar_exports, {
+  Toolbar: () => Toolbar
+});
+module.exports = __toCommonJS(Toolbar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_useBreakpoint = require("../../hooks/useBreakpoint");
+var import_useReadonly = require("../../hooks/useReadonly");
+var import_useToolbarSchema = require("../../hooks/useToolbarSchema");
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_ActionsMenu = require("../ActionsMenu");
+var import_DuplicateButton = require("../DuplicateButton");
+var import_MobileStylePanel = require("../MobileStylePanel");
+var import_RedoButton = require("../RedoButton");
+var import_TrashButton = require("../TrashButton");
+var import_UndoButton = require("../UndoButton");
+var import_Button = require("../primitives/Button");
+var M = __toESM(require("../primitives/DropdownMenu"));
+var import_shared = require("../primitives/shared");
+var import_ToggleToolLockedButton = require("./ToggleToolLockedButton");
+const Toolbar = (0, import_react.memo)(function Toolbar2() {
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const breakpoint = (0, import_useBreakpoint.useBreakpoint)();
+  const rMostRecentlyActiveDropdownItem = import_react.default.useRef(void 0);
+  const isReadonly = (0, import_useReadonly.useReadonly)();
+  const toolbarItems = (0, import_useToolbarSchema.useToolbarSchema)();
+  const laserTool = toolbarItems.find((item) => item.toolItem.id === "laser");
+  const activeToolId = (0, import_editor.useValue)("current tool id", () => editor.getCurrentToolId(), [editor]);
+  const geoState = (0, import_editor.useValue)(
+    "geo",
+    () => editor.getSharedStyles().getAsKnownValue(import_editor.GeoShapeGeoStyle),
+    [editor]
+  );
+  const showEditingTools = !isReadonly;
+  const getTitle = (item) => item.label ? `${msg(item.label)} ${item.kbd ? (0, import_shared.kbdStr)(item.kbd) : ""}` : "";
+  const activeTLUiToolbarItem = toolbarItems.find((item) => {
+    return isActiveTLUiToolItem(item.toolItem, activeToolId, geoState);
+  });
+  const { itemsInPanel, itemsInDropdown, dropdownFirstItem } = import_react.default.useMemo(() => {
+    const itemsInPanel2 = [];
+    const itemsInDropdown2 = [];
+    let dropdownFirstItem2;
+    const overflowIndex = Math.min(8, 5 + breakpoint);
+    for (let i = 4; i < toolbarItems.length; i++) {
+      const item = toolbarItems[i];
+      if (i < overflowIndex) {
+        itemsInPanel2.push(item);
+      } else {
+        if (item === activeTLUiToolbarItem) {
+          dropdownFirstItem2 = item;
+        }
+        itemsInDropdown2.push(item);
+      }
+    }
+    if (dropdownFirstItem2) {
+    } else {
+      if (!rMostRecentlyActiveDropdownItem.current) {
+        rMostRecentlyActiveDropdownItem.current = itemsInDropdown2[0];
+      }
+      dropdownFirstItem2 = rMostRecentlyActiveDropdownItem.current;
+      if (!itemsInDropdown2.includes(dropdownFirstItem2)) {
+        dropdownFirstItem2 = itemsInDropdown2[0];
+      }
+    }
+    rMostRecentlyActiveDropdownItem.current = dropdownFirstItem2;
+    if (itemsInDropdown2.length <= 2) {
+      itemsInPanel2.push(...itemsInDropdown2);
+      itemsInDropdown2.length = 0;
+    }
+    return { itemsInPanel: itemsInPanel2, itemsInDropdown: itemsInDropdown2, dropdownFirstItem: dropdownFirstItem2 };
+  }, [toolbarItems, activeTLUiToolbarItem, breakpoint]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__left", children: [
+      !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__extras", children: [
+        breakpoint < 6 && !(activeToolId === "hand" || activeToolId === "zoom") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__extras__controls tlui-buttons__horizontal", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_UndoButton.UndoButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RedoButton.RedoButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TrashButton.TrashButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DuplicateButton.DuplicateButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenu, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToggleToolLockedButton.ToggleToolLockedButton, { activeToolId })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: (0, import_classnames.default)("tlui-toolbar__tools", {
+            "tlui-toolbar__tools__mobile": breakpoint < 5
+          }),
+          children: [
+            toolbarItems.slice(0, 2).map(({ toolItem }) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ToolbarButton,
+                {
+                  item: toolItem,
+                  title: getTitle(toolItem),
+                  isSelected: isActiveTLUiToolItem(toolItem, activeToolId, geoState)
+                },
+                toolItem.id
+              );
+            }),
+            isReadonly && laserTool && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ToolbarButton,
+              {
+                item: laserTool.toolItem,
+                title: getTitle(laserTool.toolItem),
+                isSelected: isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)
+              },
+              laserTool.toolItem.id
+            ),
+            showEditingTools && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              toolbarItems.slice(2, 4).map(({ toolItem }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ToolbarButton,
+                {
+                  item: toolItem,
+                  title: getTitle(toolItem),
+                  isSelected: isActiveTLUiToolItem(toolItem, activeToolId, geoState)
+                },
+                toolItem.id
+              )),
+              itemsInPanel.map(({ toolItem }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ToolbarButton,
+                {
+                  item: toolItem,
+                  title: getTitle(toolItem),
+                  isSelected: isActiveTLUiToolItem(toolItem, activeToolId, geoState)
+                },
+                toolItem.id
+              )),
+              itemsInDropdown.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  ToolbarButton,
+                  {
+                    item: dropdownFirstItem.toolItem,
+                    title: getTitle(dropdownFirstItem.toolItem),
+                    isSelected: isActiveTLUiToolItem(
+                      dropdownFirstItem.toolItem,
+                      activeToolId,
+                      geoState
+                    )
+                  },
+                  dropdownFirstItem.toolItem.id
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(M.Root, { id: "toolbar overflow", modal: false, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_Button.Button,
+                    {
+                      className: "tlui-toolbar__overflow",
+                      icon: "chevron-up",
+                      type: "tool",
+                      "data-testid": "tools.more",
+                      title: msg("tool-panel.more")
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.Content, { side: "top", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverflowToolsContent, { toolbarItems: itemsInDropdown }) })
+                ] })
+              ] }) : null
+            ] })
+          ]
+        }
+      )
+    ] }),
+    breakpoint < 5 && !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-toolbar__tools", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MobileStylePanel.MobileStylePanel, {}) })
+  ] }) });
+});
+const OverflowToolsContent = (0, import_editor.track)(function OverflowToolsContent2({
+  toolbarItems
+}) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-buttons__grid", children: toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      M.Item,
+      {
+        type: "icon",
+        className: "tlui-button-grid__button",
+        "data-testid": `tools.more.${id}`,
+        "data-tool": id,
+        "data-geo": meta?.geo ?? "",
+        "aria-label": label,
+        onClick: () => onSelect("toolbar"),
+        title: label ? `${msg(label)} ${kbd ? (0, import_shared.kbdStr)(kbd) : ""}` : "",
+        icon
+      },
+      id
+    );
+  }) });
+});
+function ToolbarButton({
+  item,
+  title,
+  isSelected
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      type: "tool",
+      "data-testid": `tools.${item.id}`,
+      "data-tool": item.id,
+      "data-geo": item.meta?.geo ?? "",
+      "aria-label": item.label,
+      title,
+      icon: item.icon,
+      "data-state": isSelected ? "selected" : void 0,
+      onClick: () => item.onSelect("toolbar"),
+      onTouchStart: (e) => {
+        (0, import_editor.preventDefault)(e);
+        item.onSelect("toolbar");
+      }
+    }
+  );
+}
+const isActiveTLUiToolItem = (item, activeToolId, geoState) => {
+  return item.meta?.geo ? activeToolId === "geo" && geoState === item.meta?.geo : activeToolId === item.id;
+};
+//# sourceMappingURL=Toolbar.js.map

package/dist-cjs/lib/ui/components/Toolbar/Toolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/Toolbar/Toolbar.tsx"],
+  "sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { DuplicateButton } from '../DuplicateButton'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { RedoButton } from '../RedoButton'\nimport { TrashButton } from '../TrashButton'\nimport { UndoButton } from '../UndoButton'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst geoState = useValue(\n\t\t'geo',\n\t\t() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),\n\t\t[editor]\n\t)\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t<div className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t<div className=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < 5,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tkey={laserTool.toolItem.id}\n\t\t\t\t\t\t\t\titem={laserTool.toolItem}\n\t\t\t\t\t\t\t\ttitle={getTitle(laserTool.toolItem)}\n\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={dropdownFirstItem.toolItem.id}\n\t\t\t\t\t\t\t\t\t\t\titem={dropdownFirstItem.toolItem}\n\t\t\t\t\t\t\t\t\t\t\ttitle={getTitle(dropdownFirstItem.toolItem)}\n\t\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(\n\t\t\t\t\t\t\t\t\t\t\t\tdropdownFirstItem.toolItem,\n\t\t\t\t\t\t\t\t\t\t\t\tactiveToolId,\n\t\t\t\t\t\t\t\t\t\t\t\tgeoState\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t<M.Root id=\"toolbar overflow\" modal={false}>\n\t\t\t\t\t\t\t\t\t\t\t<M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t<M.Content side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<OverflowToolsContent toolbarItems={itemsInDropdown} />\n\t\t\t\t\t\t\t\t\t\t\t</M.Content>\n\t\t\t\t\t\t\t\t\t\t</M.Root>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\t\tdata-tool={id}\n\t\t\t\t\t\tdata-geo={meta?.geo ?? ''}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype=\"tool\"\n\t\t\tdata-testid={`tools.${item.id}`}\n\t\t\tdata-tool={item.id}\n\t\t\tdata-geo={item.meta?.geo ?? ''}\n\t\t\taria-label={item.label}\n\t\t\ttitle={title}\n\t\t\ticon={item.icon}\n\t\t\tdata-state={isSelected ? 'selected' : undefined}\n\t\t\tonClick={() => item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
+  "mappings": "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",
+  "names": ["Toolbar", "React", "itemsInPanel", "itemsInDropdown", "dropdownFirstItem", "classNames", "OverflowToolsContent"]
+}

package/dist-cjs/lib/ui/components/TrashButton.js

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TrashButton_exports = {};
+__export(TrashButton_exports, {
+  TrashButton: () => TrashButton
+});
+module.exports = __toCommonJS(TrashButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_useActions = require("../hooks/useActions");
+var import_useReadonly = require("../hooks/useReadonly");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var import_shared = require("./primitives/shared");
+const TrashButton = (0, import_editor.track)(function TrashButton2() {
+  const editor = (0, import_editor.useEditor)();
+  const actions = (0, import_useActions.useActions)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const action = actions["delete"];
+  const isReadonly = (0, import_useReadonly.useReadonly)();
+  if (isReadonly)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      icon: action.icon,
+      type: "icon",
+      onClick: () => action.onSelect("quick-actions"),
+      disabled: !(editor.isIn("select") && editor.getSelectedShapeIds().length > 0),
+      title: `${msg(action.label)} ${(0, import_shared.kbdStr)(action.kbd)}`,
+      smallIcon: true
+    }
+  );
+});
+//# sourceMappingURL=TrashButton.js.map

package/dist-cjs/lib/ui/components/TrashButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/TrashButton.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const TrashButton = track(function TrashButton() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst action = actions['delete']\n\n\tconst isReadonly = useReadonly()\n\n\tif (isReadonly) return null\n\n\treturn (\n\t\t<Button\n\t\t\ticon={action.icon}\n\t\t\ttype=\"icon\"\n\t\t\tonClick={() => action.onSelect('quick-actions')}\n\t\t\tdisabled={!(editor.isIn('select') && editor.getSelectedShapeIds().length > 0)}\n\t\t\ttitle={`${msg(action.label!)} ${kbdStr(action.kbd!)}`}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBE;AAlBF,oBAAiC;AACjC,wBAA2B;AAC3B,yBAA4B;AAC5B,4BAA+B;AAC/B,oBAAuB;AACvB,oBAAuB;AAEhB,MAAM,kBAAc,qBAAM,SAASA,eAAc;AACvD,QAAM,aAAS,yBAAU;AACzB,QAAM,cAAU,8BAAW;AAC3B,QAAM,UAAM,sCAAe;AAC3B,QAAM,SAAS,QAAQ,QAAQ;AAE/B,QAAM,iBAAa,gCAAY;AAE/B,MAAI;AAAY,WAAO;AAEvB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAK;AAAA,MACL,SAAS,MAAM,OAAO,SAAS,eAAe;AAAA,MAC9C,UAAU,EAAE,OAAO,KAAK,QAAQ,KAAK,OAAO,oBAAoB,EAAE,SAAS;AAAA,MAC3E,OAAO,GAAG,IAAI,OAAO,KAAM,CAAC,QAAI,sBAAO,OAAO,GAAI,CAAC;AAAA,MACnD,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["TrashButton"]
+}

package/dist-cjs/lib/ui/components/UndoButton.js

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var UndoButton_exports = {};
+__export(UndoButton_exports, {
+  UndoButton: () => UndoButton
+});
+module.exports = __toCommonJS(UndoButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_useActions = require("../hooks/useActions");
+var import_useCanUndo = require("../hooks/useCanUndo");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var import_shared = require("./primitives/shared");
+const UndoButton = (0, import_react.memo)(function UndoButton2() {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const canUndo = (0, import_useCanUndo.useCanUndo)();
+  const actions = (0, import_useActions.useActions)();
+  const undo = actions["undo"];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      "data-testid": "main.undo",
+      icon: undo.icon,
+      type: "icon",
+      title: `${msg(undo.label)} ${(0, import_shared.kbdStr)(undo.kbd)}`,
+      disabled: !canUndo,
+      onClick: () => undo.onSelect("quick-actions"),
+      smallIcon: true
+    }
+  );
+});
+//# sourceMappingURL=UndoButton.js.map

package/dist-cjs/lib/ui/components/UndoButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/UndoButton.tsx"],
+  "sourcesContent": ["import { memo } from 'react'\nimport { useActions } from '../hooks/useActions'\nimport { useCanUndo } from '../hooks/useCanUndo'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const UndoButton = memo(function UndoButton() {\n\tconst msg = useTranslation()\n\tconst canUndo = useCanUndo()\n\tconst actions = useActions()\n\n\tconst undo = actions['undo']\n\n\treturn (\n\t\t<Button\n\t\t\tdata-testid=\"main.undo\"\n\t\t\ticon={undo.icon}\n\t\t\ttype=\"icon\"\n\t\t\ttitle={`${msg(undo.label!)} ${kbdStr(undo.kbd!)}`}\n\t\t\tdisabled={!canUndo}\n\t\t\tonClick={() => undo.onSelect('quick-actions')}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeE;AAfF,mBAAqB;AACrB,wBAA2B;AAC3B,wBAA2B;AAC3B,4BAA+B;AAC/B,oBAAuB;AACvB,oBAAuB;AAEhB,MAAM,iBAAa,mBAAK,SAASA,cAAa;AACpD,QAAM,UAAM,sCAAe;AAC3B,QAAM,cAAU,8BAAW;AAC3B,QAAM,cAAU,8BAAW;AAE3B,QAAM,OAAO,QAAQ,MAAM;AAE3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,MAAK;AAAA,MACL,OAAO,GAAG,IAAI,KAAK,KAAM,CAAC,QAAI,sBAAO,KAAK,GAAI,CAAC;AAAA,MAC/C,UAAU,CAAC;AAAA,MACX,SAAS,MAAM,KAAK,SAAS,eAAe;AAAA,MAC5C,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["UndoButton"]
+}

package/dist-cjs/lib/ui/components/primitives/Button.js

@@ -0,0 +1,79 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(Button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_classnames = __toESM(require("classnames"));
+var React = __toESM(require("react"));
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Spinner = require("../Spinner");
+var import_Icon = require("./Icon");
+var import_Kbd = require("./Kbd");
+const Button = React.forwardRef(function Button2({
+  label,
+  icon,
+  invertIcon,
+  iconLeft,
+  smallIcon,
+  kbd,
+  isChecked = false,
+  type,
+  children,
+  spinner,
+  ...props
+}, ref) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const labelStr = label ? msg(label) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      draggable: false,
+      type: "button",
+      ...props,
+      title: props.title ?? labelStr,
+      className: (0, import_classnames.default)("tlui-button", `tlui-button__${type}`, props.className),
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: iconLeft, className: "tlui-button__icon-left", small: true }),
+        children,
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-button__label", draggable: false, children: [
+          labelStr,
+          isChecked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: "check" })
+        ] }),
+        kbd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Kbd.Kbd, { children: kbd }),
+        icon && !spinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon, small: !!label || smallIcon, invertIcon }),
+        spinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {})
+      ]
+    }
+  );
+});
+//# sourceMappingURL=Button.js.map

package/dist-cjs/lib/ui/components/primitives/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Button.tsx"],
+  "sourcesContent": ["import classnames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Spinner } from '../Spinner'\nimport { Icon } from './Icon'\nimport { Kbd } from './Kbd'\n\n/** @public */\nexport interface TLUiButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tloading?: boolean // TODO: loading spinner\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\tspinner?: boolean\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\tsmallIcon?: boolean\n\tkbd?: string\n\tisChecked?: boolean\n\tinvertIcon?: boolean\n\ttype: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help'\n}\n\n/** @public */\nexport const Button = React.forwardRef<HTMLButtonElement, TLUiButtonProps>(function Button(\n\t{\n\t\tlabel,\n\t\ticon,\n\t\tinvertIcon,\n\t\ticonLeft,\n\t\tsmallIcon,\n\t\tkbd,\n\t\tisChecked = false,\n\t\ttype,\n\t\tchildren,\n\t\tspinner,\n\t\t...props\n\t},\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst labelStr = label ? msg(label) : ''\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tdraggable={false}\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t\ttitle={props.title ?? labelStr}\n\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t>\n\t\t\t{iconLeft && <Icon icon={iconLeft} className=\"tlui-button__icon-left\" small />}\n\t\t\t{children}\n\t\t\t{label && (\n\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t{labelStr}\n\t\t\t\t\t{isChecked && <Icon icon=\"check\" />}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{kbd && <Kbd>{kbd}</Kbd>}\n\t\t\t{icon && !spinner && (\n\t\t\t\t<Icon icon={icon} small={!!label || smallIcon} invertIcon={invertIcon} />\n\t\t\t)}\n\t\t\t{spinner && <Spinner />}\n\t\t</button>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDgB;AArDhB,wBAAuB;AACvB,YAAuB;AAEvB,4BAA+B;AAE/B,qBAAwB;AACxB,kBAAqB;AACrB,iBAAoB;AAkBb,MAAM,SAAS,MAAM,WAA+C,SAASA,QACnF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAC3B,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS;AAAA,MACtB,eAAW,kBAAAC,SAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,MAE3E;AAAA,oBAAY,4CAAC,oBAAK,MAAM,UAAU,WAAU,0BAAyB,OAAK,MAAC;AAAA,QAC3E;AAAA,QACA,SACA,6CAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C;AAAA;AAAA,UACA,aAAa,4CAAC,oBAAK,MAAK,SAAQ;AAAA,WAClC;AAAA,QAEA,OAAO,4CAAC,kBAAK,eAAI;AAAA,QACjB,QAAQ,CAAC,WACT,4CAAC,oBAAK,MAAY,OAAO,CAAC,CAAC,SAAS,WAAW,YAAwB;AAAA,QAEvE,WAAW,4CAAC,0BAAQ;AAAA;AAAA;AAAA,EACtB;AAEF,CAAC;",
+  "names": ["Button", "classnames"]
+}