@bigbluebutton/tldraw 2.0.0-alpha.26 → 2.0.0-alpha.27

package/dist-cjs/lib/shapes/poll/components/CustomizedAxisTick.js

@@ -0,0 +1,52 @@
+"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 CustomizedAxisTick_exports = {};
+__export(CustomizedAxisTick_exports, {
+  default: () => CustomizedAxisTick_default
+});
+module.exports = __toCommonJS(CustomizedAxisTick_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function getAverageCharacterWidth(text, font) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return null;
+  ctx.font = font;
+  const textWidth = ctx.measureText(text).width;
+  const averageAdvance = textWidth / text.length;
+  return averageAdvance;
+}
+const TICK_SIZE = 6;
+const AVERAGE_CHAR_WIDTH = getAverageCharacterWidth("0", "Source Sans Pro") ?? 6;
+const ELLIPSIS = "...";
+const CustomizedAxisTick = (props) => {
+  const { payload, ...restProps } = props;
+  const { width } = restProps;
+  const numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH);
+  const restValue = payload.value.substring(numberOfChars, payload.value.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("text", { ...restProps, children: [
+    payload.value.substring(
+      0,
+      restValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars
+    ),
+    restValue.length > 0 && ELLIPSIS
+  ] }) });
+};
+var CustomizedAxisTick_default = CustomizedAxisTick;
+//# sourceMappingURL=CustomizedAxisTick.js.map

package/dist-cjs/lib/shapes/poll/components/CustomizedAxisTick.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/poll/components/CustomizedAxisTick.tsx"],
+  "sourcesContent": ["function getAverageCharacterWidth(text: string, font: string) {\n\tconst canvas = document.createElement('canvas')\n\tconst ctx = canvas.getContext('2d')\n\n\tif (!ctx) return null\n\n\tctx.font = font\n\n\tconst textWidth = ctx.measureText(text).width\n\tconst averageAdvance = textWidth / text.length\n\n\treturn averageAdvance\n}\n\nconst TICK_SIZE = 6\nconst AVERAGE_CHAR_WIDTH = getAverageCharacterWidth('0', 'Source Sans Pro') ?? 6\nconst ELLIPSIS = '...'\n\nconst CustomizedAxisTick = (props: any) => {\n\tconst { payload, ...restProps } = props\n\tconst { width } = restProps\n\tconst numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH)\n\tconst restValue = payload.value.substring(numberOfChars, payload.value.length)\n\n\treturn (\n\t\t<g>\n\t\t\t<text {...restProps}>\n\t\t\t\t{payload.value.substring(\n\t\t\t\t\t0,\n\t\t\t\t\trestValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars\n\t\t\t\t)}\n\t\t\t\t{restValue.length > 0 && ELLIPSIS}\n\t\t\t</text>\n\t\t</g>\n\t)\n}\n\nexport default CustomizedAxisTick\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBE;AAzBF,SAAS,yBAAyB,MAAc,MAAc;AAC7D,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAElC,MAAI,CAAC;AAAK,WAAO;AAEjB,MAAI,OAAO;AAEX,QAAM,YAAY,IAAI,YAAY,IAAI,EAAE;AACxC,QAAM,iBAAiB,YAAY,KAAK;AAExC,SAAO;AACR;AAEA,MAAM,YAAY;AAClB,MAAM,qBAAqB,yBAAyB,KAAK,iBAAiB,KAAK;AAC/E,MAAM,WAAW;AAEjB,MAAM,qBAAqB,CAAC,UAAe;AAC1C,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI;AAClC,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,gBAAgB,KAAK,OAAO,QAAQ,aAAa,kBAAkB;AACzE,QAAM,YAAY,QAAQ,MAAM,UAAU,eAAe,QAAQ,MAAM,MAAM;AAE7E,SACC,4CAAC,OACA,uDAAC,UAAM,GAAG,WACR;AAAA,YAAQ,MAAM;AAAA,MACd;AAAA,MACA,UAAU,SAAS,IAAI,gBAAgB,SAAS,SAAS;AAAA,IAC1D;AAAA,IACC,UAAU,SAAS,KAAK;AAAA,KAC1B,GACD;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": []
+}

package/dist-cjs/lib/shapes/poll/components/poll-content.js

@@ -33,6 +33,7 @@ __export(poll_content_exports, {
 module.exports = __toCommonJS(poll_content_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_recharts = require("recharts");
+var import_CustomizedAxisTick = __toESM(require("./CustomizedAxisTick"));
 var import_styles = __toESM(require("./styles"));
 const caseInsensitiveReducer = (acc, item) => {
   const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase());
@@ -92,7 +93,7 @@ const ChatPollContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.default.PollText, { children: pollData.questionText }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "90%", height: useHeight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data: translatedAnswers, layout: "vertical", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { type: "number", allowDecimals: false }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { width: 80, type: "category", dataKey: "pollAnswer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { width: 80, type: "category", dataKey: "pollAnswer", tick: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomizedAxisTick.default, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "numVotes", fill: "#0C57A7" })
     ] }) })
   ] });

package/dist-cjs/lib/shapes/poll/components/poll-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
-  "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFG;AArFH,sBAAiE;AAEjE,oBAAmB;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,4CAAC,yBAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa;AAAA,MACvD,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
-  "names": ["Styled"]
+  "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwFG;AAtFH,sBAAiE;AAEjE,gCAA+B;AAC/B,oBAAmB;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,4CAAC,yBAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,4CAAC,0BAAAC,SAAA,EAAmB,GAAI;AAAA,MACrF,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
+  "names": ["Styled", "CustomizedAxisTick"]
 }

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

@@ -68,7 +68,7 @@ const Toolbar = (0, import_react.memo)(function Toolbar2() {
     const itemsInPanel2 = [];
     const itemsInDropdown2 = [];
     let dropdownFirstItem2;
-    const overflowIndex = Math.min(8, 5 + breakpoint);
+    const overflowIndex = Math.min(9, 6 + breakpoint);
     for (let i = 4; i < toolbarItems.length; i++) {
       const item = toolbarItems[i];
       if (i < overflowIndex) {

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

@@ -1,7 +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 { MobileStylePanel } from '../MobileStylePanel'\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\t<ActionsMenu />\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"],
+  "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 { MobileStylePanel } from '../MobileStylePanel'\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(9, 6 + 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\t<ActionsMenu />\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/hooks/useToolbarSchema.js

@@ -54,6 +54,7 @@ function ToolbarSchemaProvider({ overrides, children }) {
     const schema = (0, import_editor.compact)([
       toolbarItem(tools.select),
       toolbarItem(tools.hand),
+      toolbarItem(tools.highlight),
       toolbarItem(tools.draw),
       toolbarItem(tools.eraser),
       toolbarItem(tools.arrow),
@@ -78,7 +79,6 @@ function ToolbarSchemaProvider({ overrides, children }) {
       toolbarItem(tools["arrow-down"]),
       toolbarItem(tools["arrow-right"]),
       toolbarItem(tools.line),
-      toolbarItem(tools.highlight),
       toolbarItem(tools.frame),
       toolbarItem(tools.laser)
     ]);

package/dist-cjs/lib/ui/hooks/useToolbarSchema.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/hooks/useToolbarSchema.tsx"],
-  "sourcesContent": ["import { Editor, compact, useEditor } from '@bigbluebutton/editor'\nimport React from 'react'\nimport { TLUiToolItem, TLUiToolsContextType, useTools } from './useTools'\n\n/** @public */\nexport type TLUiToolbarItem = {\n\tid: string\n\ttype: 'item'\n\treadonlyOk: boolean\n\ttoolItem: TLUiToolItem\n}\n\n/** @public */\nexport function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem {\n\treturn {\n\t\tid: toolItem.id,\n\t\ttype: 'item',\n\t\treadonlyOk: toolItem.readonlyOk,\n\t\ttoolItem,\n\t}\n}\n\n/** @public */\nexport type TLUiToolbarSchemaContextType = TLUiToolbarItem[]\n\n/** @internal */\nexport const ToolbarSchemaContext = React.createContext([] as TLUiToolbarSchemaContextType)\n\n/** @public */\nexport type TLUiToolbarSchemaProviderProps = {\n\toverrides?: (\n\t\teditor: Editor,\n\t\tschema: TLUiToolbarSchemaContextType,\n\t\tmore: { tools: TLUiToolsContextType }\n\t) => TLUiToolbarSchemaContextType\n\tchildren: any\n}\n\n/** @internal */\nexport function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchemaProviderProps) {\n\tconst editor = useEditor()\n\n\tconst tools = useTools()\n\n\tconst toolbarSchema = React.useMemo<TLUiToolbarSchemaContextType>(() => {\n\t\tconst schema: TLUiToolbarSchemaContextType = compact([\n\t\t\ttoolbarItem(tools.select),\n\t\t\ttoolbarItem(tools.hand),\n\t\t\ttoolbarItem(tools.draw),\n\t\t\ttoolbarItem(tools.eraser),\n\t\t\ttoolbarItem(tools.arrow),\n\t\t\ttoolbarItem(tools.text),\n\t\t\ttoolbarItem(tools.note),\n\t\t\ttoolbarItem(tools.asset),\n\t\t\ttoolbarItem(tools['rectangle']),\n\t\t\ttoolbarItem(tools['ellipse']),\n\t\t\ttoolbarItem(tools['diamond']),\n\t\t\ttoolbarItem(tools['triangle']),\n\t\t\ttoolbarItem(tools['trapezoid']),\n\t\t\ttoolbarItem(tools['rhombus']),\n\t\t\ttoolbarItem(tools['hexagon']),\n\t\t\ttoolbarItem(tools['cloud']),\n\t\t\t// toolbarItem(tools['octagon']),\n\t\t\ttoolbarItem(tools['star']),\n\t\t\ttoolbarItem(tools['oval']),\n\t\t\ttoolbarItem(tools['x-box']),\n\t\t\ttoolbarItem(tools['check-box']),\n\t\t\ttoolbarItem(tools['arrow-left']),\n\t\t\ttoolbarItem(tools['arrow-up']),\n\t\t\ttoolbarItem(tools['arrow-down']),\n\t\t\ttoolbarItem(tools['arrow-right']),\n\t\t\ttoolbarItem(tools.line),\n\t\t\ttoolbarItem(tools.highlight),\n\t\t\ttoolbarItem(tools.frame),\n\t\t\ttoolbarItem(tools.laser),\n\t\t])\n\n\t\tif (overrides) {\n\t\t\treturn overrides(editor, schema, { tools })\n\t\t}\n\n\t\treturn schema\n\t}, [editor, overrides, tools])\n\n\treturn (\n\t\t<ToolbarSchemaContext.Provider value={toolbarSchema}>{children}</ToolbarSchemaContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useToolbarSchema() {\n\tconst ctx = React.useContext(ToolbarSchemaContext)\n\n\tif (!ctx) {\n\t\tthrow new Error('useToolbarSchema must be used within a ToolbarSchemaProvider')\n\t}\n\n\treturn ctx\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqFE;AArFF,oBAA2C;AAC3C,mBAAkB;AAClB,sBAA6D;AAWtD,SAAS,YAAY,UAAyC;AACpE,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,MAAM;AAAA,IACN,YAAY,SAAS;AAAA,IACrB;AAAA,EACD;AACD;AAMO,MAAM,uBAAuB,aAAAA,QAAM,cAAc,CAAC,CAAiC;AAanF,SAAS,sBAAsB,EAAE,WAAW,SAAS,GAAmC;AAC9F,QAAM,aAAS,yBAAU;AAEzB,QAAM,YAAQ,0BAAS;AAEvB,QAAM,gBAAgB,aAAAA,QAAM,QAAsC,MAAM;AACvE,UAAM,aAAuC,uBAAQ;AAAA,MACpD,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,OAAO,CAAC;AAAA;AAAA,MAE1B,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,OAAO,CAAC;AAAA,MAC1B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,aAAa,CAAC;AAAA,MAChC,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,SAAS;AAAA,MAC3B,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,KAAK;AAAA,IACxB,CAAC;AAED,QAAI,WAAW;AACd,aAAO,UAAU,QAAQ,QAAQ,EAAE,MAAM,CAAC;AAAA,IAC3C;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,QAAQ,WAAW,KAAK,CAAC;AAE7B,SACC,4CAAC,qBAAqB,UAArB,EAA8B,OAAO,eAAgB,UAAS;AAEjE;AAGO,SAAS,mBAAmB;AAClC,QAAM,MAAM,aAAAA,QAAM,WAAW,oBAAoB;AAEjD,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,8DAA8D;AAAA,EAC/E;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { Editor, compact, useEditor } from '@bigbluebutton/editor'\nimport React from 'react'\nimport { TLUiToolItem, TLUiToolsContextType, useTools } from './useTools'\n\n/** @public */\nexport type TLUiToolbarItem = {\n\tid: string\n\ttype: 'item'\n\treadonlyOk: boolean\n\ttoolItem: TLUiToolItem\n}\n\n/** @public */\nexport function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem {\n\treturn {\n\t\tid: toolItem.id,\n\t\ttype: 'item',\n\t\treadonlyOk: toolItem.readonlyOk,\n\t\ttoolItem,\n\t}\n}\n\n/** @public */\nexport type TLUiToolbarSchemaContextType = TLUiToolbarItem[]\n\n/** @internal */\nexport const ToolbarSchemaContext = React.createContext([] as TLUiToolbarSchemaContextType)\n\n/** @public */\nexport type TLUiToolbarSchemaProviderProps = {\n\toverrides?: (\n\t\teditor: Editor,\n\t\tschema: TLUiToolbarSchemaContextType,\n\t\tmore: { tools: TLUiToolsContextType }\n\t) => TLUiToolbarSchemaContextType\n\tchildren: any\n}\n\n/** @internal */\nexport function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchemaProviderProps) {\n\tconst editor = useEditor()\n\n\tconst tools = useTools()\n\n\tconst toolbarSchema = React.useMemo<TLUiToolbarSchemaContextType>(() => {\n\t\tconst schema: TLUiToolbarSchemaContextType = compact([\n\t\t\ttoolbarItem(tools.select),\n\t\t\ttoolbarItem(tools.hand),\n\t\t\ttoolbarItem(tools.highlight),\n\t\t\ttoolbarItem(tools.draw),\n\t\t\ttoolbarItem(tools.eraser),\n\t\t\ttoolbarItem(tools.arrow),\n\t\t\ttoolbarItem(tools.text),\n\t\t\ttoolbarItem(tools.note),\n\t\t\ttoolbarItem(tools.asset),\n\t\t\ttoolbarItem(tools['rectangle']),\n\t\t\ttoolbarItem(tools['ellipse']),\n\t\t\ttoolbarItem(tools['diamond']),\n\t\t\ttoolbarItem(tools['triangle']),\n\t\t\ttoolbarItem(tools['trapezoid']),\n\t\t\ttoolbarItem(tools['rhombus']),\n\t\t\ttoolbarItem(tools['hexagon']),\n\t\t\ttoolbarItem(tools['cloud']),\n\t\t\t// toolbarItem(tools['octagon']),\n\t\t\ttoolbarItem(tools['star']),\n\t\t\ttoolbarItem(tools['oval']),\n\t\t\ttoolbarItem(tools['x-box']),\n\t\t\ttoolbarItem(tools['check-box']),\n\t\t\ttoolbarItem(tools['arrow-left']),\n\t\t\ttoolbarItem(tools['arrow-up']),\n\t\t\ttoolbarItem(tools['arrow-down']),\n\t\t\ttoolbarItem(tools['arrow-right']),\n\t\t\ttoolbarItem(tools.line),\n\t\t\ttoolbarItem(tools.frame),\n\t\t\ttoolbarItem(tools.laser),\n\t\t])\n\n\t\tif (overrides) {\n\t\t\treturn overrides(editor, schema, { tools })\n\t\t}\n\n\t\treturn schema\n\t}, [editor, overrides, tools])\n\n\treturn (\n\t\t<ToolbarSchemaContext.Provider value={toolbarSchema}>{children}</ToolbarSchemaContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useToolbarSchema() {\n\tconst ctx = React.useContext(ToolbarSchemaContext)\n\n\tif (!ctx) {\n\t\tthrow new Error('useToolbarSchema must be used within a ToolbarSchemaProvider')\n\t}\n\n\treturn ctx\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqFE;AArFF,oBAA2C;AAC3C,mBAAkB;AAClB,sBAA6D;AAWtD,SAAS,YAAY,UAAyC;AACpE,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,MAAM;AAAA,IACN,YAAY,SAAS;AAAA,IACrB;AAAA,EACD;AACD;AAMO,MAAM,uBAAuB,aAAAA,QAAM,cAAc,CAAC,CAAiC;AAanF,SAAS,sBAAsB,EAAE,WAAW,SAAS,GAAmC;AAC9F,QAAM,aAAS,yBAAU;AAEzB,QAAM,YAAQ,0BAAS;AAEvB,QAAM,gBAAgB,aAAAA,QAAM,QAAsC,MAAM;AACvE,UAAM,aAAuC,uBAAQ;AAAA,MACpD,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,SAAS;AAAA,MAC3B,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,OAAO,CAAC;AAAA;AAAA,MAE1B,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,OAAO,CAAC;AAAA,MAC1B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,aAAa,CAAC;AAAA,MAChC,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,KAAK;AAAA,IACxB,CAAC;AAED,QAAI,WAAW;AACd,aAAO,UAAU,QAAQ,QAAQ,EAAE,MAAM,CAAC;AAAA,IAC3C;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,QAAQ,WAAW,KAAK,CAAC;AAE7B,SACC,4CAAC,qBAAqB,UAArB,EAA8B,OAAO,eAAgB,UAAS;AAEjE;AAGO,SAAS,mBAAmB;AAClC,QAAM,MAAM,aAAAA,QAAM,WAAW,oBAAoB;AAEjD,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,8DAA8D;AAAA,EAC/E;AAEA,SAAO;AACR;",
   "names": ["React"]
 }

package/dist-esm/lib/shapes/poll/components/CustomizedAxisTick.mjs

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function getAverageCharacterWidth(text, font) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return null;
+  ctx.font = font;
+  const textWidth = ctx.measureText(text).width;
+  const averageAdvance = textWidth / text.length;
+  return averageAdvance;
+}
+const TICK_SIZE = 6;
+const AVERAGE_CHAR_WIDTH = getAverageCharacterWidth("0", "Source Sans Pro") ?? 6;
+const ELLIPSIS = "...";
+const CustomizedAxisTick = (props) => {
+  const { payload, ...restProps } = props;
+  const { width } = restProps;
+  const numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH);
+  const restValue = payload.value.substring(numberOfChars, payload.value.length);
+  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs("text", { ...restProps, children: [
+    payload.value.substring(
+      0,
+      restValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars
+    ),
+    restValue.length > 0 && ELLIPSIS
+  ] }) });
+};
+var CustomizedAxisTick_default = CustomizedAxisTick;
+export {
+  CustomizedAxisTick_default as default
+};
+//# sourceMappingURL=CustomizedAxisTick.mjs.map

package/dist-esm/lib/shapes/poll/components/CustomizedAxisTick.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/poll/components/CustomizedAxisTick.tsx"],
+  "sourcesContent": ["function getAverageCharacterWidth(text: string, font: string) {\n\tconst canvas = document.createElement('canvas')\n\tconst ctx = canvas.getContext('2d')\n\n\tif (!ctx) return null\n\n\tctx.font = font\n\n\tconst textWidth = ctx.measureText(text).width\n\tconst averageAdvance = textWidth / text.length\n\n\treturn averageAdvance\n}\n\nconst TICK_SIZE = 6\nconst AVERAGE_CHAR_WIDTH = getAverageCharacterWidth('0', 'Source Sans Pro') ?? 6\nconst ELLIPSIS = '...'\n\nconst CustomizedAxisTick = (props: any) => {\n\tconst { payload, ...restProps } = props\n\tconst { width } = restProps\n\tconst numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH)\n\tconst restValue = payload.value.substring(numberOfChars, payload.value.length)\n\n\treturn (\n\t\t<g>\n\t\t\t<text {...restProps}>\n\t\t\t\t{payload.value.substring(\n\t\t\t\t\t0,\n\t\t\t\t\trestValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars\n\t\t\t\t)}\n\t\t\t\t{restValue.length > 0 && ELLIPSIS}\n\t\t\t</text>\n\t\t</g>\n\t)\n}\n\nexport default CustomizedAxisTick\n"],
+  "mappings": "AAyBE,cACC,YADD;AAzBF,SAAS,yBAAyB,MAAc,MAAc;AAC7D,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAElC,MAAI,CAAC;AAAK,WAAO;AAEjB,MAAI,OAAO;AAEX,QAAM,YAAY,IAAI,YAAY,IAAI,EAAE;AACxC,QAAM,iBAAiB,YAAY,KAAK;AAExC,SAAO;AACR;AAEA,MAAM,YAAY;AAClB,MAAM,qBAAqB,yBAAyB,KAAK,iBAAiB,KAAK;AAC/E,MAAM,WAAW;AAEjB,MAAM,qBAAqB,CAAC,UAAe;AAC1C,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI;AAClC,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,gBAAgB,KAAK,OAAO,QAAQ,aAAa,kBAAkB;AACzE,QAAM,YAAY,QAAQ,MAAM,UAAU,eAAe,QAAQ,MAAM,MAAM;AAE7E,SACC,oBAAC,OACA,+BAAC,UAAM,GAAG,WACR;AAAA,YAAQ,MAAM;AAAA,MACd;AAAA,MACA,UAAU,SAAS,IAAI,gBAAgB,SAAS,SAAS;AAAA,IAC1D;AAAA,IACC,UAAU,SAAS,KAAK;AAAA,KAC1B,GACD;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": []
+}

package/dist-esm/lib/shapes/poll/components/poll-content.mjs

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import CustomizedAxisTick from "./CustomizedAxisTick.mjs";
 import Styled from "./styles.mjs";
 const caseInsensitiveReducer = (acc, item) => {
   const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase());
@@ -59,7 +60,7 @@ const ChatPollContent = ({
     /* @__PURE__ */ jsx(Styled.PollText, { children: pollData.questionText }),
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "90%", height: useHeight, children: /* @__PURE__ */ jsxs(BarChart, { data: translatedAnswers, layout: "vertical", children: [
       /* @__PURE__ */ jsx(XAxis, { type: "number", allowDecimals: false }),
-      /* @__PURE__ */ jsx(YAxis, { width: 80, type: "category", dataKey: "pollAnswer" }),
+      /* @__PURE__ */ jsx(YAxis, { width: 80, type: "category", dataKey: "pollAnswer", tick: /* @__PURE__ */ jsx(CustomizedAxisTick, {}) }),
       /* @__PURE__ */ jsx(Bar, { dataKey: "numVotes", fill: "#0C57A7" })
     ] }) })
   ] });

package/dist-esm/lib/shapes/poll/components/poll-content.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
-  "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
-  "mappings": "AAuFG,cAEC,YAFD;AArFH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,OAAO,YAAY;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,oBAAC,SAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa;AAAA,MACvD,oBAAC,OAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
+  "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
+  "mappings": "AAwFG,cAEC,YAFD;AAtFH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,OAAO,wBAAwB;AAC/B,OAAO,YAAY;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,oBAAC,SAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,oBAAC,sBAAmB,GAAI;AAAA,MACrF,oBAAC,OAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
   "names": []
 }

package/dist-esm/lib/ui/components/Toolbar/Toolbar.mjs

@@ -35,7 +35,7 @@ const Toolbar = memo(function Toolbar2() {
     const itemsInPanel2 = [];
     const itemsInDropdown2 = [];
     let dropdownFirstItem2;
-    const overflowIndex = Math.min(8, 5 + breakpoint);
+    const overflowIndex = Math.min(9, 6 + breakpoint);
     for (let i = 4; i < toolbarItems.length; i++) {
       const item = toolbarItems[i];
       if (i < overflowIndex) {

package/dist-esm/lib/ui/components/Toolbar/Toolbar.mjs.map

@@ -1,7 +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 { MobileStylePanel } from '../MobileStylePanel'\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\t<ActionsMenu />\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"],
+  "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 { MobileStylePanel } from '../MobileStylePanel'\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(9, 6 + 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\t<ActionsMenu />\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", "itemsInPanel", "itemsInDropdown", "dropdownFirstItem", "OverflowToolsContent"]
 }

package/dist-esm/lib/ui/hooks/useToolbarSchema.mjs

@@ -18,6 +18,7 @@ function ToolbarSchemaProvider({ overrides, children }) {
     const schema = compact([
       toolbarItem(tools.select),
       toolbarItem(tools.hand),
+      toolbarItem(tools.highlight),
       toolbarItem(tools.draw),
       toolbarItem(tools.eraser),
       toolbarItem(tools.arrow),
@@ -42,7 +43,6 @@ function ToolbarSchemaProvider({ overrides, children }) {
       toolbarItem(tools["arrow-down"]),
       toolbarItem(tools["arrow-right"]),
       toolbarItem(tools.line),
-      toolbarItem(tools.highlight),
       toolbarItem(tools.frame),
       toolbarItem(tools.laser)
     ]);

package/dist-esm/lib/ui/hooks/useToolbarSchema.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/hooks/useToolbarSchema.tsx"],
-  "sourcesContent": ["import { Editor, compact, useEditor } from '@bigbluebutton/editor'\nimport React from 'react'\nimport { TLUiToolItem, TLUiToolsContextType, useTools } from './useTools'\n\n/** @public */\nexport type TLUiToolbarItem = {\n\tid: string\n\ttype: 'item'\n\treadonlyOk: boolean\n\ttoolItem: TLUiToolItem\n}\n\n/** @public */\nexport function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem {\n\treturn {\n\t\tid: toolItem.id,\n\t\ttype: 'item',\n\t\treadonlyOk: toolItem.readonlyOk,\n\t\ttoolItem,\n\t}\n}\n\n/** @public */\nexport type TLUiToolbarSchemaContextType = TLUiToolbarItem[]\n\n/** @internal */\nexport const ToolbarSchemaContext = React.createContext([] as TLUiToolbarSchemaContextType)\n\n/** @public */\nexport type TLUiToolbarSchemaProviderProps = {\n\toverrides?: (\n\t\teditor: Editor,\n\t\tschema: TLUiToolbarSchemaContextType,\n\t\tmore: { tools: TLUiToolsContextType }\n\t) => TLUiToolbarSchemaContextType\n\tchildren: any\n}\n\n/** @internal */\nexport function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchemaProviderProps) {\n\tconst editor = useEditor()\n\n\tconst tools = useTools()\n\n\tconst toolbarSchema = React.useMemo<TLUiToolbarSchemaContextType>(() => {\n\t\tconst schema: TLUiToolbarSchemaContextType = compact([\n\t\t\ttoolbarItem(tools.select),\n\t\t\ttoolbarItem(tools.hand),\n\t\t\ttoolbarItem(tools.draw),\n\t\t\ttoolbarItem(tools.eraser),\n\t\t\ttoolbarItem(tools.arrow),\n\t\t\ttoolbarItem(tools.text),\n\t\t\ttoolbarItem(tools.note),\n\t\t\ttoolbarItem(tools.asset),\n\t\t\ttoolbarItem(tools['rectangle']),\n\t\t\ttoolbarItem(tools['ellipse']),\n\t\t\ttoolbarItem(tools['diamond']),\n\t\t\ttoolbarItem(tools['triangle']),\n\t\t\ttoolbarItem(tools['trapezoid']),\n\t\t\ttoolbarItem(tools['rhombus']),\n\t\t\ttoolbarItem(tools['hexagon']),\n\t\t\ttoolbarItem(tools['cloud']),\n\t\t\t// toolbarItem(tools['octagon']),\n\t\t\ttoolbarItem(tools['star']),\n\t\t\ttoolbarItem(tools['oval']),\n\t\t\ttoolbarItem(tools['x-box']),\n\t\t\ttoolbarItem(tools['check-box']),\n\t\t\ttoolbarItem(tools['arrow-left']),\n\t\t\ttoolbarItem(tools['arrow-up']),\n\t\t\ttoolbarItem(tools['arrow-down']),\n\t\t\ttoolbarItem(tools['arrow-right']),\n\t\t\ttoolbarItem(tools.line),\n\t\t\ttoolbarItem(tools.highlight),\n\t\t\ttoolbarItem(tools.frame),\n\t\t\ttoolbarItem(tools.laser),\n\t\t])\n\n\t\tif (overrides) {\n\t\t\treturn overrides(editor, schema, { tools })\n\t\t}\n\n\t\treturn schema\n\t}, [editor, overrides, tools])\n\n\treturn (\n\t\t<ToolbarSchemaContext.Provider value={toolbarSchema}>{children}</ToolbarSchemaContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useToolbarSchema() {\n\tconst ctx = React.useContext(ToolbarSchemaContext)\n\n\tif (!ctx) {\n\t\tthrow new Error('useToolbarSchema must be used within a ToolbarSchemaProvider')\n\t}\n\n\treturn ctx\n}\n"],
-  "mappings": "AAqFE;AArFF,SAAiB,SAAS,iBAAiB;AAC3C,OAAO,WAAW;AAClB,SAA6C,gBAAgB;AAWtD,SAAS,YAAY,UAAyC;AACpE,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,MAAM;AAAA,IACN,YAAY,SAAS;AAAA,IACrB;AAAA,EACD;AACD;AAMO,MAAM,uBAAuB,MAAM,cAAc,CAAC,CAAiC;AAanF,SAAS,sBAAsB,EAAE,WAAW,SAAS,GAAmC;AAC9F,QAAM,SAAS,UAAU;AAEzB,QAAM,QAAQ,SAAS;AAEvB,QAAM,gBAAgB,MAAM,QAAsC,MAAM;AACvE,UAAM,SAAuC,QAAQ;AAAA,MACpD,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,OAAO,CAAC;AAAA;AAAA,MAE1B,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,OAAO,CAAC;AAAA,MAC1B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,aAAa,CAAC;AAAA,MAChC,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,SAAS;AAAA,MAC3B,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,KAAK;AAAA,IACxB,CAAC;AAED,QAAI,WAAW;AACd,aAAO,UAAU,QAAQ,QAAQ,EAAE,MAAM,CAAC;AAAA,IAC3C;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,QAAQ,WAAW,KAAK,CAAC;AAE7B,SACC,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,eAAgB,UAAS;AAEjE;AAGO,SAAS,mBAAmB;AAClC,QAAM,MAAM,MAAM,WAAW,oBAAoB;AAEjD,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,8DAA8D;AAAA,EAC/E;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { Editor, compact, useEditor } from '@bigbluebutton/editor'\nimport React from 'react'\nimport { TLUiToolItem, TLUiToolsContextType, useTools } from './useTools'\n\n/** @public */\nexport type TLUiToolbarItem = {\n\tid: string\n\ttype: 'item'\n\treadonlyOk: boolean\n\ttoolItem: TLUiToolItem\n}\n\n/** @public */\nexport function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem {\n\treturn {\n\t\tid: toolItem.id,\n\t\ttype: 'item',\n\t\treadonlyOk: toolItem.readonlyOk,\n\t\ttoolItem,\n\t}\n}\n\n/** @public */\nexport type TLUiToolbarSchemaContextType = TLUiToolbarItem[]\n\n/** @internal */\nexport const ToolbarSchemaContext = React.createContext([] as TLUiToolbarSchemaContextType)\n\n/** @public */\nexport type TLUiToolbarSchemaProviderProps = {\n\toverrides?: (\n\t\teditor: Editor,\n\t\tschema: TLUiToolbarSchemaContextType,\n\t\tmore: { tools: TLUiToolsContextType }\n\t) => TLUiToolbarSchemaContextType\n\tchildren: any\n}\n\n/** @internal */\nexport function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchemaProviderProps) {\n\tconst editor = useEditor()\n\n\tconst tools = useTools()\n\n\tconst toolbarSchema = React.useMemo<TLUiToolbarSchemaContextType>(() => {\n\t\tconst schema: TLUiToolbarSchemaContextType = compact([\n\t\t\ttoolbarItem(tools.select),\n\t\t\ttoolbarItem(tools.hand),\n\t\t\ttoolbarItem(tools.highlight),\n\t\t\ttoolbarItem(tools.draw),\n\t\t\ttoolbarItem(tools.eraser),\n\t\t\ttoolbarItem(tools.arrow),\n\t\t\ttoolbarItem(tools.text),\n\t\t\ttoolbarItem(tools.note),\n\t\t\ttoolbarItem(tools.asset),\n\t\t\ttoolbarItem(tools['rectangle']),\n\t\t\ttoolbarItem(tools['ellipse']),\n\t\t\ttoolbarItem(tools['diamond']),\n\t\t\ttoolbarItem(tools['triangle']),\n\t\t\ttoolbarItem(tools['trapezoid']),\n\t\t\ttoolbarItem(tools['rhombus']),\n\t\t\ttoolbarItem(tools['hexagon']),\n\t\t\ttoolbarItem(tools['cloud']),\n\t\t\t// toolbarItem(tools['octagon']),\n\t\t\ttoolbarItem(tools['star']),\n\t\t\ttoolbarItem(tools['oval']),\n\t\t\ttoolbarItem(tools['x-box']),\n\t\t\ttoolbarItem(tools['check-box']),\n\t\t\ttoolbarItem(tools['arrow-left']),\n\t\t\ttoolbarItem(tools['arrow-up']),\n\t\t\ttoolbarItem(tools['arrow-down']),\n\t\t\ttoolbarItem(tools['arrow-right']),\n\t\t\ttoolbarItem(tools.line),\n\t\t\ttoolbarItem(tools.frame),\n\t\t\ttoolbarItem(tools.laser),\n\t\t])\n\n\t\tif (overrides) {\n\t\t\treturn overrides(editor, schema, { tools })\n\t\t}\n\n\t\treturn schema\n\t}, [editor, overrides, tools])\n\n\treturn (\n\t\t<ToolbarSchemaContext.Provider value={toolbarSchema}>{children}</ToolbarSchemaContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useToolbarSchema() {\n\tconst ctx = React.useContext(ToolbarSchemaContext)\n\n\tif (!ctx) {\n\t\tthrow new Error('useToolbarSchema must be used within a ToolbarSchemaProvider')\n\t}\n\n\treturn ctx\n}\n"],
+  "mappings": "AAqFE;AArFF,SAAiB,SAAS,iBAAiB;AAC3C,OAAO,WAAW;AAClB,SAA6C,gBAAgB;AAWtD,SAAS,YAAY,UAAyC;AACpE,SAAO;AAAA,IACN,IAAI,SAAS;AAAA,IACb,MAAM;AAAA,IACN,YAAY,SAAS;AAAA,IACrB;AAAA,EACD;AACD;AAMO,MAAM,uBAAuB,MAAM,cAAc,CAAC,CAAiC;AAanF,SAAS,sBAAsB,EAAE,WAAW,SAAS,GAAmC;AAC9F,QAAM,SAAS,UAAU;AAEzB,QAAM,QAAQ,SAAS;AAEvB,QAAM,gBAAgB,MAAM,QAAsC,MAAM;AACvE,UAAM,SAAuC,QAAQ;AAAA,MACpD,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,SAAS;AAAA,MAC3B,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,SAAS,CAAC;AAAA,MAC5B,YAAY,MAAM,OAAO,CAAC;AAAA;AAAA,MAE1B,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,MAAM,CAAC;AAAA,MACzB,YAAY,MAAM,OAAO,CAAC;AAAA,MAC1B,YAAY,MAAM,WAAW,CAAC;AAAA,MAC9B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,UAAU,CAAC;AAAA,MAC7B,YAAY,MAAM,YAAY,CAAC;AAAA,MAC/B,YAAY,MAAM,aAAa,CAAC;AAAA,MAChC,YAAY,MAAM,IAAI;AAAA,MACtB,YAAY,MAAM,KAAK;AAAA,MACvB,YAAY,MAAM,KAAK;AAAA,IACxB,CAAC;AAED,QAAI,WAAW;AACd,aAAO,UAAU,QAAQ,QAAQ,EAAE,MAAM,CAAC;AAAA,IAC3C;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,QAAQ,WAAW,KAAK,CAAC;AAE7B,SACC,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,eAAgB,UAAS;AAEjE;AAGO,SAAS,mBAAmB;AAClC,QAAM,MAAM,MAAM,WAAW,oBAAoB;AAEjD,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,8DAA8D;AAAA,EAC/E;AAEA,SAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@bigbluebutton/tldraw",
 	"description": "BigBlueButton's fork of tldraw 2.0-alpha.19 - A tiny little drawing editor.",
-	"version": "2.0.0-alpha.26",
+	"version": "2.0.0-alpha.27",
 	"packageManager": "yarn@3.5.0",
 	"author": {
 		"name": "tldraw GB Ltd.",
@@ -35,7 +35,7 @@
 		"src"
 	],
 	"dependencies": {
-		"@bigbluebutton/editor": "2.0.0-alpha.25",
+		"@bigbluebutton/editor": "2.0.0-alpha.27",
 		"@radix-ui/react-alert-dialog": "^1.0.0",
 		"@radix-ui/react-context-menu": "^2.1.5",
 		"@radix-ui/react-dialog": "^1.0.5",

package/src/lib/shapes/poll/components/CustomizedAxisTick.tsx

@@ -0,0 +1,38 @@
+function getAverageCharacterWidth(text: string, font: string) {
+	const canvas = document.createElement('canvas')
+	const ctx = canvas.getContext('2d')
+
+	if (!ctx) return null
+
+	ctx.font = font
+
+	const textWidth = ctx.measureText(text).width
+	const averageAdvance = textWidth / text.length
+
+	return averageAdvance
+}
+
+const TICK_SIZE = 6
+const AVERAGE_CHAR_WIDTH = getAverageCharacterWidth('0', 'Source Sans Pro') ?? 6
+const ELLIPSIS = '...'
+
+const CustomizedAxisTick = (props: any) => {
+	const { payload, ...restProps } = props
+	const { width } = restProps
+	const numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH)
+	const restValue = payload.value.substring(numberOfChars, payload.value.length)
+
+	return (
+		<g>
+			<text {...restProps}>
+				{payload.value.substring(
+					0,
+					restValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars
+				)}
+				{restValue.length > 0 && ELLIPSIS}
+			</text>
+		</g>
+	)
+}
+
+export default CustomizedAxisTick

package/src/lib/shapes/poll/components/poll-content.tsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
 import { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'
+import CustomizedAxisTick from './CustomizedAxisTick'
 import Styled from './styles'
 
 const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {
@@ -89,7 +90,7 @@ const ChatPollContent: React.FC<ChatPollContentProps> = ({
 			<ResponsiveContainer width="90%" height={useHeight}>
 				<BarChart data={translatedAnswers} layout="vertical">
 					<XAxis type="number" allowDecimals={false} />
-					<YAxis width={80} type="category" dataKey="pollAnswer" />
+					<YAxis width={80} type="category" dataKey="pollAnswer" tick={<CustomizedAxisTick />} />
 					<Bar dataKey="numVotes" fill="#0C57A7" />
 				</BarChart>
 			</ResponsiveContainer>

package/src/lib/ui/components/Toolbar/Toolbar.tsx

@@ -47,7 +47,7 @@ export const Toolbar = memo(function Toolbar() {
 		const itemsInDropdown: TLUiToolbarItem[] = []
 		let dropdownFirstItem: TLUiToolbarItem | undefined
 
-		const overflowIndex = Math.min(8, 5 + breakpoint)
+		const overflowIndex = Math.min(9, 6 + breakpoint)
 
 		for (let i = 4; i < toolbarItems.length; i++) {
 			const item = toolbarItems[i]

package/src/lib/ui/hooks/useToolbarSchema.tsx

@@ -46,6 +46,7 @@ export function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchema
 		const schema: TLUiToolbarSchemaContextType = compact([
 			toolbarItem(tools.select),
 			toolbarItem(tools.hand),
+			toolbarItem(tools.highlight),
 			toolbarItem(tools.draw),
 			toolbarItem(tools.eraser),
 			toolbarItem(tools.arrow),
@@ -70,7 +71,6 @@ export function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchema
 			toolbarItem(tools['arrow-down']),
 			toolbarItem(tools['arrow-right']),
 			toolbarItem(tools.line),
-			toolbarItem(tools.highlight),
 			toolbarItem(tools.frame),
 			toolbarItem(tools.laser),
 		])