@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,41 @@
+"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 Spinner_exports = {};
+__export(Spinner_exports, {
+  Spinner: () => Spinner
+});
+module.exports = __toCommonJS(Spinner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Spinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 8 8",
+        to: "360 8 8",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ) })
+  ] }) });
+}
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Spinner.tsx"],
+  "sourcesContent": ["import React from 'react'\n\n/** @internal */\nexport function Spinner(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg width={16} height={16} viewBox=\"0 0 16 16\" {...props}>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMG;AAHI,SAAS,QAAQ,OAAsC;AAC7D,SACC,4CAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAa,GAAG,OACnD,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,gDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,MAAC;AAAA;AAAA,QACA,eAAc;AAAA,QACd,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,aAAY;AAAA;AAAA,IACb,GACD;AAAA,KACD,GACD;AAEF;",
+  "names": []
+}

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

@@ -0,0 +1,45 @@
+"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 StopFollowing_exports = {};
+__export(StopFollowing_exports, {
+  StopFollowing: () => StopFollowing
+});
+module.exports = __toCommonJS(StopFollowing_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_useActions = require("../hooks/useActions");
+var import_Button = require("./primitives/Button");
+const StopFollowing = (0, import_editor.track)(function ExitPenMode() {
+  const editor = (0, import_editor.useEditor)();
+  const actions = (0, import_useActions.useActions)();
+  if (!editor.getInstanceState().followingUserId) {
+    return null;
+  }
+  const action = actions["stop-following"];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      type: "normal",
+      label: action.label,
+      iconLeft: action.icon,
+      onClick: () => action.onSelect("people-menu")
+    }
+  );
+});
+//# sourceMappingURL=StopFollowing.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/StopFollowing.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { Button } from './primitives/Button'\n\nexport const StopFollowing = track(function ExitPenMode() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\n\tif (!editor.getInstanceState().followingUserId) {\n\t\treturn null\n\t}\n\n\tconst action = actions['stop-following']\n\n\treturn (\n\t\t<Button\n\t\t\ttype=\"normal\"\n\t\t\tlabel={action.label}\n\t\t\ticonLeft={action.icon}\n\t\t\tonClick={() => action.onSelect('people-menu')}\n\t\t/>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeE;AAfF,oBAAiC;AACjC,wBAA2B;AAC3B,oBAAuB;AAEhB,MAAM,oBAAgB,qBAAM,SAAS,cAAc;AACzD,QAAM,aAAS,yBAAU;AACzB,QAAM,cAAU,8BAAW;AAE3B,MAAI,CAAC,OAAO,iBAAiB,EAAE,iBAAiB;AAC/C,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,QAAQ,gBAAgB;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,SAAS,MAAM,OAAO,SAAS,aAAa;AAAA;AAAA,EAC7C;AAEF,CAAC;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js

@@ -0,0 +1,138 @@
+"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 DoubleDropdownPicker_exports = {};
+__export(DoubleDropdownPicker_exports, {
+  DoubleDropdownPicker: () => DoubleDropdownPicker
+});
+module.exports = __toCommonJS(DoubleDropdownPicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+var React = __toESM(require("react"));
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Button = require("../primitives/Button");
+var DropdownMenu = __toESM(require("../primitives/DropdownMenu"));
+const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker2({
+  label,
+  uiTypeA,
+  uiTypeB,
+  labelA,
+  labelB,
+  itemsA,
+  itemsB,
+  styleA,
+  styleB,
+  valueA,
+  valueB,
+  onValueChange
+}) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const iconA = React.useMemo(
+    () => itemsA.find((item) => valueA.type === "shared" && valueA.value === item.value)?.icon ?? "mixed",
+    [itemsA, valueA]
+  );
+  const iconB = React.useMemo(
+    () => itemsB.find((item) => valueB.type === "shared" && valueB.value === item.value)?.icon ?? "mixed",
+    [itemsB, valueB]
+  );
+  if (valueA === void 0 && valueB === void 0)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__double-select-picker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { title: msg(label), className: "tlui-style-panel__double-select-picker-label", children: msg(label) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-buttons__horizontal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu.Root, { id: `style panel ${uiTypeA} A`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_dropdown_menu.Trigger,
+          {
+            asChild: true,
+            onTouchEnd: (e) => (0, import_editor.preventDefault)(e),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.Button,
+              {
+                type: "icon",
+                "data-testid": `style.${uiTypeA}`,
+                title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
+                icon: iconA,
+                invertIcon: true,
+                smallIcon: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Content, { side: "bottom", align: "end", sideOffset: 0, alignOffset: -2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-buttons__grid", children: itemsA.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DropdownMenu.Item,
+            {
+              type: "icon",
+              title: msg(labelA) + " \u2014 " + msg(`${uiTypeA}-style.${item.value}`),
+              "data-testid": `style.${uiTypeA}.${item.value}`,
+              icon: item.icon,
+              onClick: () => onValueChange(styleA, item.value, false),
+              invertIcon: true
+            },
+            item.value
+          );
+        }) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu.Root, { id: `style panel ${uiTypeB}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_dropdown_menu.Trigger,
+          {
+            asChild: true,
+            onTouchEnd: (e) => (0, import_editor.preventDefault)(e),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.Button,
+              {
+                type: "icon",
+                "data-testid": `style.${uiTypeB}`,
+                title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
+                icon: iconB,
+                smallIcon: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Content, { side: "bottom", align: "end", sideOffset: 0, alignOffset: -2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-buttons__grid", children: itemsB.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DropdownMenu.Item,
+            {
+              type: "icon",
+              title: msg(labelB) + " \u2014 " + msg(`${uiTypeB}-style.${item.value}`),
+              "data-testid": `style.${uiTypeB}.${item.value}`,
+              icon: item.icon,
+              onClick: () => onValueChange(styleB, item.value, false)
+            },
+            item.value
+          );
+        }) }) })
+      ] })
+    ] })
+  ] });
+});
+//# sourceMappingURL=DoubleDropdownPicker.js.map

package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, preventDefault } from '@bigbluebutton/editor'\nimport { Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Button } from '../primitives/Button'\nimport * as DropdownMenu from '../primitives/DropdownMenu'\nimport { StyleValuesForUi } from './styles'\n\ninterface DoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nexport const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T extends string>({\n\tlabel,\n\tuiTypeA,\n\tuiTypeB,\n\tlabelA,\n\tlabelB,\n\titemsA,\n\titemsB,\n\tstyleA,\n\tstyleB,\n\tvalueA,\n\tvalueB,\n\tonValueChange,\n}: DoubleDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\n\tconst iconA = React.useMemo(\n\t\t() =>\n\t\t\titemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsA, valueA]\n\t)\n\tconst iconB = React.useMemo(\n\t\t() =>\n\t\t\titemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsB, valueB]\n\t)\n\n\tif (valueA === undefined && valueB === undefined) return null\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(label)}\n\t\t\t</div>\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeA} A`}>\n\t\t\t\t\t<Trigger\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={iconA as any}\n\t\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Trigger>\n\t\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiTypeA}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleA, item.value, false)}\n\t\t\t\t\t\t\t\t\t\tinvertIcon\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})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t</DropdownMenu.Root>\n\t\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeB}`}>\n\t\t\t\t\t<Trigger\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={iconB as any}\n\t\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Trigger>\n\t\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleB, item.value, false)}\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})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t</DropdownMenu.Root>\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["DoubleDropdownPicker"]
+}

package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js

@@ -0,0 +1,89 @@
+"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 DropdownPicker_exports = {};
+__export(DropdownPicker_exports, {
+  DropdownPicker: () => DropdownPicker
+});
+module.exports = __toCommonJS(DropdownPicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+var React = __toESM(require("react"));
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Button = require("../primitives/Button");
+var DropdownMenu = __toESM(require("../primitives/DropdownMenu"));
+const DropdownPicker = React.memo(function DropdownPicker2({
+  id,
+  label,
+  uiType,
+  style,
+  items,
+  type,
+  value,
+  onValueChange
+}) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const icon = React.useMemo(
+    () => items.find((item) => value.type === "shared" && item.value === value.value)?.icon,
+    [items, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu.Root, { id: `style panel ${id}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_dropdown_menu.Trigger,
+      {
+        asChild: true,
+        onTouchEnd: (e) => (0, import_editor.preventDefault)(e),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Button.Button,
+          {
+            type,
+            "data-testid": `style.${uiType}`,
+            title: value.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiType}-style.${value.value}`),
+            label,
+            icon: icon ?? "mixed"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Content, { side: "left", align: "center", alignOffset: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-buttons__grid", children: items.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DropdownMenu.Item,
+        {
+          type: "icon",
+          "data-testid": `style.${uiType}.${item.value}`,
+          title: msg(`${uiType}-style.${item.value}`),
+          icon: item.icon,
+          onClick: () => onValueChange(style, item.value, false)
+        },
+        item.value
+      );
+    }) }) })
+  ] });
+});
+//# sourceMappingURL=DropdownPicker.js.map

package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, preventDefault } from '@bigbluebutton/editor'\nimport { Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Button, TLUiButtonProps } from '../primitives/Button'\nimport * as DropdownMenu from '../primitives/DropdownMenu'\nimport { StyleValuesForUi } from './styles'\n\ninterface DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: TLUiButtonProps['type']\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nexport const DropdownPicker = React.memo(function DropdownPicker<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\treturn (\n\t\t<DropdownMenu.Root id={`style panel ${id}`}>\n\t\t\t<Trigger\n\t\t\t\tasChild\n\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttitle={\n\t\t\t\t\t\tvalue.type === 'mixed'\n\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t: msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\t\t\t\t\t}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\ticon={(icon as TLUiIconType) ?? 'mixed'}\n\t\t\t\t/>\n\t\t\t</Trigger>\n\t\t\t<DropdownMenu.Content side=\"left\" align=\"center\" alignOffset={0}>\n\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\ttitle={msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}\n\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\tonClick={() => onValueChange(style, item.value, false)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Content>\n\t\t</DropdownMenu.Root>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCE;AAvCF,oBAAuD;AACvD,iCAAwB;AACxB,YAAuB;AAEvB,4BAA+B;AAE/B,oBAAwC;AACxC,mBAA8B;AAcvB,MAAM,iBAAiB,MAAM,KAAK,SAASA,gBAAiC;AAAA,EAClF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,UAAM,sCAAe;AAE3B,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,SACC,6CAAC,aAAa,MAAb,EAAkB,IAAI,eAAe,EAAE,IACvC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAO;AAAA,QAEP,YAAY,CAAC,UAAM,8BAAe,CAAC;AAAA,QAEnC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,OACC,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AAAA,YAE9D;AAAA,YACA,MAAO,QAAyB;AAAA;AAAA,QACjC;AAAA;AAAA,IACD;AAAA,IACA,4CAAC,aAAa,SAAb,EAAqB,MAAK,QAAO,OAAM,UAAS,aAAa,GAC7D,sDAAC,SAAI,WAAU,sBACb,gBAAM,IAAI,CAAC,SAAS;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,MAAK;AAAA,UACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,UAC1C,OAAO,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,UAEhE,MAAM,KAAK;AAAA,UACX,SAAS,MAAM,cAAc,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA,QAFhD,KAAK;AAAA,MAGX;AAAA,IAEF,CAAC,GACF,GACD;AAAA,KACD;AAEF,CAAC;",
+  "names": ["DropdownPicker"]
+}