@payloadcms/richtext-lexical 3.80.0-canary.3 → 3.80.0-internal-debug.daef79f

package/dist/features/toolbars/shared/ToolbarDropdown/index.js

@@ -1,127 +1,110 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useMemo } from 'react';
 const baseClass = 'toolbar-popup__dropdown';
 import { useTranslation } from '@payloadcms/ui';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import './index.scss';
 import { DropDown, DropDownItem } from './DropDown.js';
-const ToolbarItem = t0 => {
-  const $ = _c(14);
-  const {
-    active,
-    anchorElem,
-    editor,
-    enabled,
-    item
-  } = t0;
-  const {
-    i18n
-  } = useTranslation();
-  const {
-    fieldProps: t1
-  } = useEditorConfigContext();
-  const {
-    featureClientSchemaMap,
-    schemaPath
-  } = t1;
-  if (item.Component) {
-    let t2;
-    if ($[0] !== active || $[1] !== anchorElem || $[2] !== editor || $[3] !== enabled || $[4] !== item) {
-      t2 = item?.Component && _jsx(item.Component, {
-        active,
-        anchorElem,
-        editor,
-        enabled,
-        item
-      }, item.key);
-      $[0] = active;
-      $[1] = anchorElem;
-      $[2] = editor;
-      $[3] = enabled;
-      $[4] = item;
-      $[5] = t2;
-    } else {
-      t2 = $[5];
+const ToolbarItem = ({ active, anchorElem, editor, enabled, item })=>{
+    const { i18n } = useTranslation();
+    const { fieldProps: { featureClientSchemaMap, schemaPath } } = useEditorConfigContext();
+    if (item.Component) {
+        return item?.Component && /*#__PURE__*/ _jsxDEV(item.Component, {
+            active: active,
+            anchorElem: anchorElem,
+            editor: editor,
+            enabled: enabled,
+            item: item
+        }, item.key, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+            lineNumber: 38,
+            columnNumber: 9
+        }, this);
     }
-    return t2;
-  }
-  let t2;
-  if ($[6] !== active || $[7] !== editor || $[8] !== enabled || $[9] !== featureClientSchemaMap || $[10] !== i18n || $[11] !== item || $[12] !== schemaPath) {
     let title = item.key;
-    let croppedTitle;
+    let croppedTitle = item.key;
     if (item.label) {
-      title = typeof item.label === "function" ? item.label({
-        featureClientSchemaMap,
-        i18n,
-        schemaPath
-      }) : item.label;
+        title = typeof item.label === 'function' ? item.label({
+            featureClientSchemaMap,
+            i18n,
+            schemaPath
+        }) : item.label;
     }
     if (title.length > 25) {
-      croppedTitle = title.substring(0, 25) + "...";
+        croppedTitle = title.substring(0, 25) + '...';
     } else {
-      croppedTitle = title;
+        croppedTitle = title;
     }
-    t2 = _jsx(DropDownItem, {
-      active,
-      editor,
-      enabled,
-      Icon: item?.ChildComponent ? _jsx(item.ChildComponent, {}) : undefined,
-      item,
-      itemKey: item.key,
-      tooltip: title,
-      children: _jsx("span", {
-        className: "text",
-        children: croppedTitle
-      })
-    }, item.key);
-    $[6] = active;
-    $[7] = editor;
-    $[8] = enabled;
-    $[9] = featureClientSchemaMap;
-    $[10] = i18n;
-    $[11] = item;
-    $[12] = schemaPath;
-    $[13] = t2;
-  } else {
-    t2 = $[13];
-  }
-  return t2;
+    return /*#__PURE__*/ _jsxDEV(DropDownItem, {
+        active: active,
+        editor: editor,
+        enabled: enabled,
+        Icon: item?.ChildComponent ? /*#__PURE__*/ _jsxDEV(item.ChildComponent, {}, void 0, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+            lineNumber: 69,
+            columnNumber: 36
+        }, void 0) : undefined,
+        item: item,
+        itemKey: item.key,
+        tooltip: title,
+        children: /*#__PURE__*/ _jsxDEV("span", {
+            className: "text",
+            children: croppedTitle
+        }, void 0, false, {
+            fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+            lineNumber: 75,
+            columnNumber: 7
+        }, this)
+    }, item.key, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+        lineNumber: 65,
+        columnNumber: 5
+    }, this);
 };
-const MemoToolbarItem = /*#__PURE__*/React.memo(ToolbarItem);
-export const ToolbarDropdown = ({
-  anchorElem,
-  classNames,
-  editor,
-  group,
-  groupState,
-  Icon,
-  itemsContainerClassNames,
-  label
-}) => {
-  const {
-    items,
-    key: groupKey
-  } = group;
-  const renderedItems = useMemo(() => {
-    return items?.length ? items.map(item => /*#__PURE__*/_jsx(MemoToolbarItem, {
-      active: groupState.activeItemKeys.includes(item.key),
-      anchorElem: anchorElem,
-      editor: editor,
-      enabled: groupState.enabledItemKeys.includes(item.key),
-      item: item
-    }, item.key)) : null;
-  }, [items, groupState.activeItemKeys, groupState.enabledItemKeys, anchorElem, editor]);
-  return /*#__PURE__*/_jsx(DropDown, {
-    buttonAriaLabel: `${groupKey} dropdown`,
-    buttonClassName: [baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])].filter(Boolean).join(' '),
-    disabled: !groupState.enabledGroup,
-    dropdownKey: groupKey,
-    Icon: Icon,
-    itemsContainerClassNames: [`${baseClass}-items`, ...(itemsContainerClassNames || [])],
-    label: label,
-    children: renderedItems
-  }, groupKey);
+const MemoToolbarItem = /*#__PURE__*/ React.memo(ToolbarItem);
+export const ToolbarDropdown = ({ anchorElem, classNames, editor, group, groupState, Icon, itemsContainerClassNames, label })=>{
+    const { items, key: groupKey } = group;
+    const renderedItems = useMemo(()=>{
+        return items?.length ? items.map((item)=>/*#__PURE__*/ _jsxDEV(MemoToolbarItem, {
+                active: groupState.activeItemKeys.includes(item.key),
+                anchorElem: anchorElem,
+                editor: editor,
+                enabled: groupState.enabledItemKeys.includes(item.key),
+                item: item
+            }, item.key, false, {
+                fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+                lineNumber: 106,
+                columnNumber: 11
+            }, this)) : null;
+    }, [
+        items,
+        groupState.activeItemKeys,
+        groupState.enabledItemKeys,
+        anchorElem,
+        editor
+    ]);
+    return /*#__PURE__*/ _jsxDEV(DropDown, {
+        buttonAriaLabel: `${groupKey} dropdown`,
+        buttonClassName: [
+            baseClass,
+            `${baseClass}-${groupKey}`,
+            ...classNames || []
+        ].filter(Boolean).join(' '),
+        disabled: !groupState.enabledGroup,
+        dropdownKey: groupKey,
+        Icon: Icon,
+        itemsContainerClassNames: [
+            `${baseClass}-items`,
+            ...itemsContainerClassNames || []
+        ],
+        label: label,
+        children: renderedItems
+    }, groupKey, false, {
+        fileName: "src/features/toolbars/shared/ToolbarDropdown/index.tsx",
+        lineNumber: 119,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/shared/ToolbarDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useMemo","baseClass","useTranslation","useEditorConfigContext","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","Component","t2","_jsx","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","children","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","groupState","itemsContainerClassNames","items","groupKey","renderedItems","map","activeItemKeys","includes","enabledItemKeys","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","enabledGroup","dropdownKey"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { useTranslation } from '@payloadcms/ui'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\nimport type { ToolbarGroupState } from '../useToolbarStates.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  groupState,\n  Icon,\n  itemsContainerClassNames,\n  label,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  groupState: ToolbarGroupState\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n}) => {\n  const { items, key: groupKey } = group\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={groupState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={groupState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, groupState.activeItemKeys, groupState.enabledItemKeys, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!groupState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { useTranslation } from '@payloadcms/ui'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\nimport type { ToolbarGroupState } from '../useToolbarStates.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  groupState,\n  Icon,\n  itemsContainerClassNames,\n  label,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  groupState: ToolbarGroupState\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n}) => {\n  const { items, key: groupKey } = group\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={groupState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={groupState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, groupState.activeItemKeys, groupState.enabledItemKeys, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!groupState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"names":["React","useMemo","baseClass","useTranslation","useEditorConfigContext","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","Component","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","span","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","groupState","itemsContainerClassNames","items","groupKey","renderedItems","map","activeItemKeys","includes","enabledItemKeys","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","enabledGroup","dropdownKey"],"mappings":"AAAA;;AACA,OAAOA,SAASC,OAAO,QAAQ,QAAO;AAEtC,MAAMC,YAAY;AAIlB,SAASC,cAAc,QAAQ,iBAAgB;AAK/C,SAASC,sBAAsB,QAAQ,4DAA2D;AAClG,OAAO,eAAc;AACrB,SAASC,QAAQ,EAAEC,YAAY,QAAQ,gBAAe;AAEtD,MAAMC,cAAc,CAAC,EACnBC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,EACPC,IAAI,EAOL;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGV;IACjB,MAAM,EACJW,YAAY,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,EACnD,GAAGZ;IAEJ,IAAIQ,KAAKK,SAAS,EAAE;QAClB,OACEL,MAAMK,2BACJ,QAACL,KAAKK,SAAS;YACbT,QAAQA;YACRC,YAAYA;YACZC,QAAQA;YACRC,SAASA;YACTC,MAAMA;WACDA,KAAKM,GAAG;;;;;IAIrB;IAEA,IAAIC,QAAQP,KAAKM,GAAG;IACpB,IAAIE,eAAeR,KAAKM,GAAG;IAC3B,IAAIN,KAAKS,KAAK,EAAE;QACdF,QACE,OAAOP,KAAKS,KAAK,KAAK,aAClBT,KAAKS,KAAK,CAAC;YAAEN;YAAwBF;YAAMG;QAAW,KACtDJ,KAAKS,KAAK;IAClB;IACA,IAAIF,MAAMG,MAAM,GAAG,IAAI;QACrBF,eAAeD,MAAMI,SAAS,CAAC,GAAG,MAAM;IAC1C,OAAO;QACLH,eAAeD;IACjB;IAEA,qBACE,QAACb;QACCE,QAAQA;QACRE,QAAQA;QACRC,SAASA;QACTa,MAAMZ,MAAMa,+BAAiB,QAACb,KAAKa,cAAc;;;;qBAAMC;QACvDd,MAAMA;QACNe,SAASf,KAAKM,GAAG;QAEjBU,SAAST;kBAET,cAAA,QAACU;YAAKC,WAAU;sBAAQV;;;;;;OAHnBR,KAAKM,GAAG;;;;;AAMnB;AAEA,MAAMa,gCAAkB/B,MAAMgC,IAAI,CAACzB;AAEnC,OAAO,MAAM0B,kBAAkB,CAAC,EAC9BxB,UAAU,EACVyB,UAAU,EACVxB,MAAM,EACNyB,KAAK,EACLC,UAAU,EACVZ,IAAI,EACJa,wBAAwB,EACxBhB,KAAK,EAUN;IACC,MAAM,EAAEiB,KAAK,EAAEpB,KAAKqB,QAAQ,EAAE,GAAGJ;IAEjC,MAAMK,gBAAgBvC,QAAQ;QAC5B,OAAOqC,OAAOhB,SACVgB,MAAMG,GAAG,CAAC,CAAC7B,qBACT,QAACmB;gBACCvB,QAAQ4B,WAAWM,cAAc,CAACC,QAAQ,CAAC/B,KAAKM,GAAG;gBACnDT,YAAYA;gBACZC,QAAQA;gBACRC,SAASyB,WAAWQ,eAAe,CAACD,QAAQ,CAAC/B,KAAKM,GAAG;gBACrDN,MAAMA;eACDA,KAAKM,GAAG;;;;wBAGjB;IACN,GAAG;QAACoB;QAAOF,WAAWM,cAAc;QAAEN,WAAWQ,eAAe;QAAEnC;QAAYC;KAAO;IAErF,qBACE,QAACL;QACCwC,iBAAiB,GAAGN,SAAS,SAAS,CAAC;QACvCO,iBAAiB;YAAC5C;YAAW,GAAGA,UAAU,CAAC,EAAEqC,UAAU;eAAML,cAAc,EAAE;SAAE,CAC5Ea,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,UAAU,CAACd,WAAWe,YAAY;QAClCC,aAAab;QACbf,MAAMA;QACNa,0BAA0B;YAAC,GAAGnC,UAAU,MAAM,CAAC;eAAMmC,4BAA4B,EAAE;SAAE;QAErFhB,OAAOA;kBAENmB;OAHID;;;;;AAMX,EAAC"}

package/dist/features/toolbars/shared/ToolbarDropdown/index.scss

@@ -0,0 +1,129 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .toolbar-popup__dropdown {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    gap: base(0.2);
+    height: base(1.5);
+    border: 0;
+    background: none;
+    border-radius: $style-radius-m;
+    cursor: pointer;
+    position: relative;
+    padding: 0 base(0.4) 0 base(0.3);
+    transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+
+    &-label {
+      color: var(--theme-elevation-600);
+      padding-block: 0;
+      padding-inline: base(0.2) base(0.4);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: var(--theme-elevation-100);
+    }
+
+    .active {
+      background-color: var(--theme-elevation-100);
+
+      .toolbar-popup__dropdown-caret {
+        &:after {
+          transform: rotate(0deg);
+        }
+      }
+    }
+
+    &-caret {
+      width: base(0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: rotate(45deg);
+      &:after {
+        display: block;
+        content: ' ';
+        position: absolute;
+
+        /* Vector 3 */
+
+        width: 4px;
+        height: 4px;
+        transform: translateY(-2px);
+        border: solid 1px var(--theme-elevation-600);
+        border-width: 0 1px 1px 0;
+      }
+    }
+
+    &-items {
+      position: absolute;
+      background: var(--theme-elevation-0);
+      border-radius: $style-radius-m;
+      min-width: 132.5px;
+      max-width: 200px;
+      z-index: 100;
+
+      .toolbar-popup__dropdown-item {
+        all: unset; // reset all default button styles
+        cursor: pointer;
+        color: var(--theme-elevation-900);
+        transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+        position: relative;
+
+        .text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        &:hover:not([disabled]),
+        &.active {
+          background-color: var(--theme-elevation-100);
+        }
+        &.disabled {
+          cursor: not-allowed;
+          opacity: 0.2;
+        }
+
+        .btn__icon {
+          // Override default button icon styles that
+          // set a background color when focused
+          background: none !important;
+          background-color: none !important;
+        }
+
+        padding-left: 6.25px;
+        padding-right: 6.25px;
+        width: 100%;
+        height: 30px;
+        border-radius: $style-radius-m;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: 6.25px;
+
+        .icon {
+          min-width: 20px;
+          height: 20px;
+          color: var(--theme-elevation-600);
+        }
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .toolbar-popup__dropdown {
+      &-items {
+        position: absolute;
+        @include shadow-m;
+      }
+    }
+  }
+}

package/dist/features/toolbars/shared/useToolbarStates.js

@@ -1,5 +1,4 @@
 'use client';
-
 import { mergeRegister } from '@lexical/utils';
 import { $getSelection } from 'lexical';
 import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
@@ -9,119 +8,124 @@ import { useRunDeprioritized } from '../../../utilities/useRunDeprioritized.js';
  * Build default states where every item is enabled and nothing is active.
  * Used as the initial value so toolbar groups render immediately on mount
  * instead of waiting for the first updateStates call.
- */
-function buildDefaultStates(groups) {
-  const itemStates = new Map();
-  const groupStates = new Map();
-  if (!groups?.length) {
+ */ function buildDefaultStates(groups) {
+    const itemStates = new Map();
+    const groupStates = new Map();
+    if (!groups?.length) {
+        return {
+            groupStates,
+            itemStates
+        };
+    }
+    for (const group of groups){
+        const enabledItemKeys = [];
+        for (const item of group.items){
+            itemStates.set(item.key, {
+                active: false,
+                enabled: true
+            });
+            enabledItemKeys.push(item.key);
+        }
+        groupStates.set(group.key, {
+            activeItemKeys: [],
+            activeItems: [],
+            enabledGroup: true,
+            enabledItemKeys
+        });
+    }
     return {
-      groupStates,
-      itemStates
+        groupStates,
+        itemStates
     };
-  }
-  for (const group of groups) {
-    const enabledItemKeys = [];
-    for (const item of group.items) {
-      itemStates.set(item.key, {
-        active: false,
-        enabled: true
-      });
-      enabledItemKeys.push(item.key);
-    }
-    groupStates.set(group.key, {
-      activeItemKeys: [],
-      activeItems: [],
-      enabledGroup: true,
-      enabledItemKeys
-    });
-  }
-  return {
-    groupStates,
-    itemStates
-  };
 }
 /**
  * Subscribes once to `editor.registerUpdateListener` and computes
  * isActive / isEnabled for every toolbar item in a read.
- */
-export function useToolbarStates(editor, groups) {
-  const [states, setStates] = useState(() => buildDefaultStates(groups));
-  const deferredStates = useDeferredValue(states);
-  const editorConfigContext = useEditorConfigContext();
-  const editorConfigContextRef = useRef(editorConfigContext);
-  editorConfigContextRef.current = editorConfigContext;
-  const groupsRef = useRef(groups);
-  groupsRef.current = groups;
-  const runDeprioritized = useRunDeprioritized();
-  const updateStates = useCallback(() => {
-    editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (!selection) {
-        return;
-      }
-      const currentGroups = groupsRef.current;
-      if (!currentGroups?.length) {
-        return;
-      }
-      const ctx = editorConfigContextRef.current;
-      const newItemStates = new Map();
-      const newGroupStates = new Map();
-      for (const group of currentGroups) {
-        const activeItemKeys = [];
-        const activeItems = [];
-        const enabledItemKeys = [];
-        const maxActive = group.type === 'dropdown' ? group.maxActiveItems ?? 1 : undefined;
-        for (const item of group.items) {
-          const isActive = item.isActive ? (!maxActive || activeItemKeys.length < maxActive) && item.isActive({
-            editor,
-            editorConfigContext: ctx,
-            selection
-          }) : false;
-          const isEnabled = item.isEnabled ? item.isEnabled({
-            editor,
-            editorConfigContext: ctx,
-            selection
-          }) : true;
-          if (isActive) {
-            activeItemKeys.push(item.key);
-            activeItems.push(item);
-          }
-          if (isEnabled) {
-            enabledItemKeys.push(item.key);
-          }
-          newItemStates.set(item.key, {
-            active: isActive,
-            enabled: isEnabled
-          });
-        }
-        const enabledGroup = group.type === 'dropdown' && group.isEnabled ? group.isEnabled({
-          editor,
-          editorConfigContext: ctx,
-          selection
-        }) : true;
-        newGroupStates.set(group.key, {
-          activeItemKeys,
-          activeItems,
-          enabledGroup,
-          enabledItemKeys
+ */ export function useToolbarStates(editor, groups) {
+    const [states, setStates] = useState(()=>buildDefaultStates(groups));
+    const deferredStates = useDeferredValue(states);
+    const editorConfigContext = useEditorConfigContext();
+    const editorConfigContextRef = useRef(editorConfigContext);
+    editorConfigContextRef.current = editorConfigContext;
+    const groupsRef = useRef(groups);
+    groupsRef.current = groups;
+    const runDeprioritized = useRunDeprioritized();
+    const updateStates = useCallback(()=>{
+        editor.getEditorState().read(()=>{
+            const selection = $getSelection();
+            if (!selection) {
+                return;
+            }
+            const currentGroups = groupsRef.current;
+            if (!currentGroups?.length) {
+                return;
+            }
+            const ctx = editorConfigContextRef.current;
+            const newItemStates = new Map();
+            const newGroupStates = new Map();
+            for (const group of currentGroups){
+                const activeItemKeys = [];
+                const activeItems = [];
+                const enabledItemKeys = [];
+                const maxActive = group.type === 'dropdown' ? group.maxActiveItems ?? 1 : undefined;
+                for (const item of group.items){
+                    const isActive = item.isActive ? (!maxActive || activeItemKeys.length < maxActive) && item.isActive({
+                        editor,
+                        editorConfigContext: ctx,
+                        selection
+                    }) : false;
+                    const isEnabled = item.isEnabled ? item.isEnabled({
+                        editor,
+                        editorConfigContext: ctx,
+                        selection
+                    }) : true;
+                    if (isActive) {
+                        activeItemKeys.push(item.key);
+                        activeItems.push(item);
+                    }
+                    if (isEnabled) {
+                        enabledItemKeys.push(item.key);
+                    }
+                    newItemStates.set(item.key, {
+                        active: isActive,
+                        enabled: isEnabled
+                    });
+                }
+                const enabledGroup = group.type === 'dropdown' && group.isEnabled ? group.isEnabled({
+                    editor,
+                    editorConfigContext: ctx,
+                    selection
+                }) : true;
+                newGroupStates.set(group.key, {
+                    activeItemKeys,
+                    activeItems,
+                    enabledGroup,
+                    enabledItemKeys
+                });
+            }
+            setStates({
+                groupStates: newGroupStates,
+                itemStates: newItemStates
+            });
         });
-      }
-      setStates({
-        groupStates: newGroupStates,
-        itemStates: newItemStates
-      });
-    });
-  }, [editor]);
-  useEffect(() => {
-    void runDeprioritized(updateStates);
-    const listener = () => runDeprioritized(updateStates);
-    const cleanup = mergeRegister(editor.registerUpdateListener(listener));
-    document.addEventListener('mouseup', listener);
-    return () => {
-      cleanup();
-      document.removeEventListener('mouseup', listener);
-    };
-  }, [editor, runDeprioritized, updateStates]);
-  return deferredStates;
+    }, [
+        editor
+    ]);
+    useEffect(()=>{
+        void runDeprioritized(updateStates);
+        const listener = ()=>runDeprioritized(updateStates);
+        const cleanup = mergeRegister(editor.registerUpdateListener(listener));
+        document.addEventListener('mouseup', listener);
+        return ()=>{
+            cleanup();
+            document.removeEventListener('mouseup', listener);
+        };
+    }, [
+        editor,
+        runDeprioritized,
+        updateStates
+    ]);
+    return deferredStates;
 }
+
 //# sourceMappingURL=useToolbarStates.js.map