@payloadcms/ui 4.0.0-internal.d3909a9 → 4.0.0-internal.d7d662c

package/dist/elements/CodeEditor/CodeEditor.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import EditorImport from '@monaco-editor/react';
 import React, { useState } from 'react';
@@ -64,110 +63,153 @@ function definePayloadThemes(monaco) {
   });
 }
 const CodeEditor = props => {
-  const $ = _c(10);
   const {
     className,
     maxHeight,
-    minHeight: t0,
+    minHeight = 48,
     options,
     readOnly,
     recalculatedHeightAt,
     value,
     ...rest
   } = props;
-  const minHeight = t0 === undefined ? 48 : t0;
+  const LINE_HEIGHT = 16 // Monaco editor line height at fontSize 11
+;
+  const EDITOR_BORDER = 2 // 1px top + 1px bottom border
+;
+  const CSS_CONTAINER_PADDING = 16 // 8px top + 8px bottom from CSS
+;
   const prevCalculatedHeightAt = React.useRef(recalculatedHeightAt);
+  const editorRef = React.useRef(null);
+  const isNestedInLexicalRef = React.useRef(false);
+  const editableOptionsRef = React.useRef(null);
+  // Extract per-model settings to avoid global conflicts
   const {
     insertSpaces,
     tabSize,
     trimAutoWhitespace,
     ...globalEditorOptions
   } = options || {};
+  const {
+    domReadOnly,
+    editContext
+  } = globalEditorOptions;
   const paddingFromProps = options?.padding ? (options.padding.top || 0) + (options.padding?.bottom || 0) : 0;
   const [dynamicHeight, setDynamicHeight] = useState(minHeight);
   const {
     theme
   } = useTheme();
-  const t1 = rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : "";
-  const t2 = readOnly && "read-only";
-  let t3;
-  if ($[0] !== className || $[1] !== t1 || $[2] !== t2) {
-    t3 = [baseClass, className, t1, t2].filter(Boolean);
-    $[0] = className;
-    $[1] = t1;
-    $[2] = t2;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  const classes = t3.join(" ");
-  let t4;
-  let t5;
-  if ($[4] !== minHeight || $[5] !== paddingFromProps || $[6] !== recalculatedHeightAt || $[7] !== value) {
-    t4 = () => {
-      if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {
-        setDynamicHeight(value ? Math.max(minHeight, value.split("\n").length * 16 + 2 + paddingFromProps + 16) : minHeight);
-        prevCalculatedHeightAt.current = recalculatedHeightAt;
+  const classes = [baseClass, className, rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '', readOnly && 'read-only'].filter(Boolean).join(' ');
+  React.useEffect(() => {
+    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {
+      setDynamicHeight(value ? Math.max(minHeight, value.split('\n').length * LINE_HEIGHT + EDITOR_BORDER + paddingFromProps + CSS_CONTAINER_PADDING) : minHeight);
+      prevCalculatedHeightAt.current = recalculatedHeightAt;
+    }
+  }, [value, minHeight, paddingFromProps, recalculatedHeightAt]);
+  const updateReadOnlyOptions = React.useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    if (readOnly) {
+      const currentOptions = editor.getRawOptions();
+      if (!editableOptionsRef.current) {
+        editableOptionsRef.current = {
+          domReadOnly: currentOptions.domReadOnly,
+          editContext: currentOptions.editContext
+        };
+      }
+      if (currentOptions.domReadOnly !== true || currentOptions.editContext !== false) {
+        editor.updateOptions({
+          domReadOnly: true,
+          editContext: false
+        });
       }
-    };
-    t5 = [value, minHeight, paddingFromProps, recalculatedHeightAt];
-    $[4] = minHeight;
-    $[5] = paddingFromProps;
-    $[6] = recalculatedHeightAt;
-    $[7] = value;
-    $[8] = t4;
-    $[9] = t5;
-  } else {
-    t4 = $[8];
-    t5 = $[9];
-  }
-  React.useEffect(t4, t5);
-  return _jsx(Editor, {
+    } else if (editableOptionsRef.current) {
+      editor.updateOptions({
+        domReadOnly: domReadOnly ?? editableOptionsRef.current.domReadOnly,
+        editContext: isNestedInLexicalRef.current ? false : editContext ?? editableOptionsRef.current.editContext
+      });
+      editableOptionsRef.current = null;
+    } else if (isNestedInLexicalRef.current && editor.getRawOptions().editContext !== false) {
+      editor.updateOptions({
+        editContext: false
+      });
+    }
+    return editor;
+  }, [domReadOnly, editContext, readOnly]);
+  const updateReadOnlyOptionsRef = React.useRef(updateReadOnlyOptions);
+  // The Monaco wrapper reapplies caller options on render, so enforce read-only state afterward.
+  React.useEffect(() => {
+    updateReadOnlyOptionsRef.current = updateReadOnlyOptions;
+    updateReadOnlyOptions();
+  });
+  return /*#__PURE__*/_jsx(Editor, {
     beforeMount: definePayloadThemes,
     className: classes,
     height: maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight,
-    loading: _jsx(ShimmerEffect, {
+    loading: /*#__PURE__*/_jsx(ShimmerEffect, {
       height: minHeight
     }),
     options: {
       ...defaultGlobalEditorOptions,
       ...globalEditorOptions,
       readOnly: Boolean(readOnly),
+      /**
+      * onMount the model will set:
+      * - insertSpaces
+      * - tabSize
+      * - trimAutoWhitespace
+      */
       detectIndentation: false,
       insertSpaces: undefined,
       tabSize: undefined,
       trimAutoWhitespace: undefined
     },
-    theme: theme === "dark" ? "payload-dark" : "payload-light",
-    value,
+    theme: theme === 'dark' ? 'payload-dark' : 'payload-light',
+    value: value,
     ...rest,
+    // Since we are not building an IDE and the container
+    // can already have scrolling, we want the height of the
+    // editor to fit its content.
+    // See: https://github.com/microsoft/monaco-editor/discussions/3677
     onChange: (value_0, ev) => {
       rest.onChange?.(value_0, ev);
-      setDynamicHeight(value_0 ? Math.max(minHeight, value_0.split("\n").length * 16 + 2 + paddingFromProps + 16) : minHeight);
+      setDynamicHeight(value_0 ? Math.max(minHeight, value_0.split('\n').length * LINE_HEIGHT + EDITOR_BORDER + paddingFromProps + CSS_CONTAINER_PADDING) : minHeight);
     },
-    onMount: (editor, monaco) => {
+    onMount: (editor_0, monaco) => {
+      editorRef.current = editor_0;
+      // Set Monaco's shared default once, so its native toggle and announcements stay in sync.
+      // Mounting another editor must not reset the user's chosen mode.
       if (!initializedTabFocusModes.has(monaco) && options?.tabFocusMode === undefined) {
         initializedTabFocusModes.add(monaco);
-        editor.trigger("payload", "editor.action.toggleTabFocusMode", null);
+        editor_0.trigger('payload', 'editor.action.toggleTabFocusMode', null);
       }
-      rest.onMount?.(editor, monaco);
-      const domNode = editor.getDomNode();
-      if (domNode?.closest("[contenteditable=\"true\"]")) {
-        editor.updateOptions({
+      rest.onMount?.(editor_0, monaco);
+      // Required to prevent copy/cut/paste from being hijacked by Lexical rich text editor
+      const domNode = editor_0.getDomNode();
+      const isNested = Boolean(domNode?.closest('[contenteditable="true"]'));
+      isNestedInLexicalRef.current = isNested;
+      if (isNested) {
+        editor_0.updateOptions({
           editContext: false
         });
-        const clipboardEvents = ["copy", "cut", "paste"];
-        const stopPropagation = _temp;
+        const clipboardEvents = ['copy', 'cut', 'paste'];
+        const stopPropagation = event => {
+          event.stopPropagation();
+        };
         for (const eventName of clipboardEvents) {
           domNode.addEventListener(eventName, stopPropagation);
         }
-        editor.onDidDispose(() => {
+        editor_0.onDidDispose(() => {
           for (const eventName_0 of clipboardEvents) {
             domNode.removeEventListener(eventName_0, stopPropagation);
           }
         });
       }
-      const model = editor.getModel();
+      updateReadOnlyOptionsRef.current();
+      // Set per-model options to avoid global conflicts
+      const model = editor_0.getModel();
       if (model) {
         model.updateOptions({
           insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,
@@ -175,13 +217,10 @@ const CodeEditor = props => {
           trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace
         });
       }
-      setDynamicHeight(Math.max(minHeight, editor.getValue().split("\n").length * 16 + 2 + paddingFromProps + 16));
+      setDynamicHeight(Math.max(minHeight, editor_0.getValue().split('\n').length * LINE_HEIGHT + EDITOR_BORDER + paddingFromProps + CSS_CONTAINER_PADDING));
     }
   });
 };
 // eslint-disable-next-line no-restricted-exports
 export default CodeEditor;
-function _temp(event) {
-  event.stopPropagation();
-}
 //# sourceMappingURL=CodeEditor.js.map

package/dist/elements/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","defaultGlobalEditorOptions","defaultOptions","Editor","default","baseClass","initializedTabFocusModes","WeakSet","definePayloadThemes","monaco","editor","defineTheme","base","colors","inherit","rules","foreground","token","CodeEditor","props","$","className","maxHeight","minHeight","t0","options","readOnly","recalculatedHeightAt","value","rest","undefined","prevCalculatedHeightAt","useRef","insertSpaces","tabSize","trimAutoWhitespace","globalEditorOptions","paddingFromProps","padding","top","bottom","dynamicHeight","setDynamicHeight","theme","t1","defaultLanguage","t2","t3","filter","Boolean","classes","join","t4","t5","current","Math","max","split","length","useEffect","_jsx","beforeMount","height","min","loading","detectIndentation","onChange","value_0","ev","onMount","has","tabFocusMode","add","trigger","domNode","getDomNode","closest","updateOptions","editContext","clipboardEvents","stopPropagation","_temp","eventName","addEventListener","onDidDispose","eventName_0","removeEventListener","model","getModel","getValue","event"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport type { Monaco } from '@monaco-editor/react'\n\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { defaultGlobalEditorOptions, defaultOptions } from './constants.js'\nimport './index.css'\n\nconst Editor = 'default' in EditorImport ? EditorImport.default : EditorImport\n\nconst baseClass = 'code-editor'\nconst initializedTabFocusModes = new WeakSet<Monaco>()\n\nfunction definePayloadThemes(monaco: Monaco) {\n  monaco.editor.defineTheme('payload-light', {\n    base: 'vs',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#0000004d', // black at 30% opacity\n      'editorLineNumber.foreground': '#0000004d', // black at 30% opacity\n    },\n    inherit: true,\n    rules: [\n      { foreground: 'cb0b96', token: 'keyword' },\n      { foreground: '005cc5', token: 'identifier' },\n      { foreground: '093077', token: 'type.identifier' },\n      { foreground: '093077', token: 'delimiter' },\n      { foreground: '093077', token: 'delimiter.bracket' },\n      { foreground: 'c53e0d', token: 'string' },\n      { foreground: '093077', token: 'number' },\n      { foreground: '6a737d', token: 'comment' },\n    ],\n  })\n  monaco.editor.defineTheme('payload-dark', {\n    base: 'vs-dark',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n      'editorLineNumber.foreground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n    },\n    inherit: true,\n    rules: [],\n  })\n}\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const {\n    className,\n    maxHeight,\n    minHeight = 48,\n    options,\n    readOnly,\n    recalculatedHeightAt,\n    value,\n    ...rest\n  } = props\n  const LINE_HEIGHT = 16 // Monaco editor line height at fontSize 11\n  const EDITOR_BORDER = 2 // 1px top + 1px bottom border\n  const CSS_CONTAINER_PADDING = 16 // 8px top + 8px bottom from CSS\n  const prevCalculatedHeightAt = React.useRef<number | undefined>(recalculatedHeightAt)\n\n  // Extract per-model settings to avoid global conflicts\n  const { insertSpaces, tabSize, trimAutoWhitespace, ...globalEditorOptions } = options || {}\n  const paddingFromProps = options?.padding\n    ? (options.padding.top || 0) + (options.padding?.bottom || 0)\n    : 0\n\n  const [dynamicHeight, setDynamicHeight] = useState(minHeight)\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {\n      setDynamicHeight(\n        value\n          ? Math.max(\n              minHeight,\n              value.split('\\n').length * LINE_HEIGHT +\n                EDITOR_BORDER +\n                paddingFromProps +\n                CSS_CONTAINER_PADDING,\n            )\n          : minHeight,\n      )\n      prevCalculatedHeightAt.current = recalculatedHeightAt\n    }\n  }, [value, minHeight, paddingFromProps, recalculatedHeightAt])\n\n  return (\n    <Editor\n      beforeMount={definePayloadThemes}\n      className={classes}\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      loading={<ShimmerEffect height={minHeight} />}\n      options={{\n        ...defaultGlobalEditorOptions,\n        ...globalEditorOptions,\n        readOnly: Boolean(readOnly),\n        /**\n         * onMount the model will set:\n         * - insertSpaces\n         * - tabSize\n         * - trimAutoWhitespace\n         */\n        detectIndentation: false,\n        insertSpaces: undefined,\n        tabSize: undefined,\n        trimAutoWhitespace: undefined,\n      }}\n      theme={theme === 'dark' ? 'payload-dark' : 'payload-light'}\n      value={value}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(\n          value\n            ? Math.max(\n                minHeight,\n                value.split('\\n').length * LINE_HEIGHT +\n                  EDITOR_BORDER +\n                  paddingFromProps +\n                  CSS_CONTAINER_PADDING,\n              )\n            : minHeight,\n        )\n      }}\n      onMount={(editor, monaco) => {\n        // Set Monaco's shared default once, so its native toggle and announcements stay in sync.\n        // Mounting another editor must not reset the user's chosen mode.\n        if (!initializedTabFocusModes.has(monaco) && options?.tabFocusMode === undefined) {\n          initializedTabFocusModes.add(monaco)\n          editor.trigger('payload', 'editor.action.toggleTabFocusMode', null)\n        }\n\n        rest.onMount?.(editor, monaco)\n\n        // Required to prevent copy/cut/paste from being hijacked by Lexical rich text editor\n        const domNode = editor.getDomNode()\n        if (domNode?.closest('[contenteditable=\"true\"]')) {\n          editor.updateOptions({ editContext: false })\n\n          const clipboardEvents = ['copy', 'cut', 'paste']\n          const stopPropagation = (event: Event) => {\n            event.stopPropagation()\n          }\n          for (const eventName of clipboardEvents) {\n            domNode.addEventListener(eventName, stopPropagation)\n          }\n          editor.onDidDispose(() => {\n            for (const eventName of clipboardEvents) {\n              domNode.removeEventListener(eventName, stopPropagation)\n            }\n          })\n        }\n\n        // Set per-model options to avoid global conflicts\n        const model = editor.getModel()\n        if (model) {\n          model.updateOptions({\n            insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,\n            tabSize: tabSize ?? defaultOptions.tabSize,\n            trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace,\n          })\n        }\n\n        setDynamicHeight(\n          Math.max(\n            minHeight,\n            editor.getValue().split('\\n').length * LINE_HEIGHT +\n              EDITOR_BORDER +\n              paddingFromProps +\n              CSS_CONTAINER_PADDING,\n          ),\n        )\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeEditor.js","names":["EditorImport","React","useState","useTheme","ShimmerEffect","defaultGlobalEditorOptions","defaultOptions","Editor","default","baseClass","initializedTabFocusModes","WeakSet","definePayloadThemes","monaco","editor","defineTheme","base","colors","inherit","rules","foreground","token","CodeEditor","props","className","maxHeight","minHeight","options","readOnly","recalculatedHeightAt","value","rest","LINE_HEIGHT","EDITOR_BORDER","CSS_CONTAINER_PADDING","prevCalculatedHeightAt","useRef","editorRef","isNestedInLexicalRef","editableOptionsRef","insertSpaces","tabSize","trimAutoWhitespace","globalEditorOptions","domReadOnly","editContext","paddingFromProps","padding","top","bottom","dynamicHeight","setDynamicHeight","theme","classes","defaultLanguage","filter","Boolean","join","useEffect","current","Math","max","split","length","updateReadOnlyOptions","useCallback","currentOptions","getRawOptions","updateOptions","updateReadOnlyOptionsRef","_jsx","beforeMount","height","min","loading","detectIndentation","undefined","onChange","ev","onMount","has","tabFocusMode","add","trigger","domNode","getDomNode","isNested","closest","clipboardEvents","stopPropagation","event","eventName","addEventListener","onDidDispose","removeEventListener","model","getModel","getValue"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport type { Monaco, OnMount } from '@monaco-editor/react'\n\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { defaultGlobalEditorOptions, defaultOptions } from './constants.js'\nimport './index.css'\n\nconst Editor = 'default' in EditorImport ? EditorImport.default : EditorImport\n\nconst baseClass = 'code-editor'\nconst initializedTabFocusModes = new WeakSet<Monaco>()\n\nfunction definePayloadThemes(monaco: Monaco) {\n  monaco.editor.defineTheme('payload-light', {\n    base: 'vs',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#0000004d', // black at 30% opacity\n      'editorLineNumber.foreground': '#0000004d', // black at 30% opacity\n    },\n    inherit: true,\n    rules: [\n      { foreground: 'cb0b96', token: 'keyword' },\n      { foreground: '005cc5', token: 'identifier' },\n      { foreground: '093077', token: 'type.identifier' },\n      { foreground: '093077', token: 'delimiter' },\n      { foreground: '093077', token: 'delimiter.bracket' },\n      { foreground: 'c53e0d', token: 'string' },\n      { foreground: '093077', token: 'number' },\n      { foreground: '6a737d', token: 'comment' },\n    ],\n  })\n  monaco.editor.defineTheme('payload-dark', {\n    base: 'vs-dark',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n      'editorLineNumber.foreground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n    },\n    inherit: true,\n    rules: [],\n  })\n}\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const {\n    className,\n    maxHeight,\n    minHeight = 48,\n    options,\n    readOnly,\n    recalculatedHeightAt,\n    value,\n    ...rest\n  } = props\n  const LINE_HEIGHT = 16 // Monaco editor line height at fontSize 11\n  const EDITOR_BORDER = 2 // 1px top + 1px bottom border\n  const CSS_CONTAINER_PADDING = 16 // 8px top + 8px bottom from CSS\n  const prevCalculatedHeightAt = React.useRef<number | undefined>(recalculatedHeightAt)\n  const editorRef = React.useRef<Parameters<OnMount>[0]>(null)\n  const isNestedInLexicalRef = React.useRef(false)\n  const editableOptionsRef = React.useRef<null | Pick<\n    NonNullable<Props['options']>,\n    'domReadOnly' | 'editContext'\n  >>(null)\n\n  // Extract per-model settings to avoid global conflicts\n  const { insertSpaces, tabSize, trimAutoWhitespace, ...globalEditorOptions } = options || {}\n  const { domReadOnly, editContext } = globalEditorOptions\n  const paddingFromProps = options?.padding\n    ? (options.padding.top || 0) + (options.padding?.bottom || 0)\n    : 0\n\n  const [dynamicHeight, setDynamicHeight] = useState(minHeight)\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {\n      setDynamicHeight(\n        value\n          ? Math.max(\n              minHeight,\n              value.split('\\n').length * LINE_HEIGHT +\n                EDITOR_BORDER +\n                paddingFromProps +\n                CSS_CONTAINER_PADDING,\n            )\n          : minHeight,\n      )\n      prevCalculatedHeightAt.current = recalculatedHeightAt\n    }\n  }, [value, minHeight, paddingFromProps, recalculatedHeightAt])\n\n  const updateReadOnlyOptions = React.useCallback(() => {\n    const editor = editorRef.current\n\n    if (!editor) {\n      return\n    }\n\n    if (readOnly) {\n      const currentOptions = editor.getRawOptions()\n\n      if (!editableOptionsRef.current) {\n        editableOptionsRef.current = {\n          domReadOnly: currentOptions.domReadOnly,\n          editContext: currentOptions.editContext,\n        }\n      }\n\n      if (currentOptions.domReadOnly !== true || currentOptions.editContext !== false) {\n        editor.updateOptions({ domReadOnly: true, editContext: false })\n      }\n    } else if (editableOptionsRef.current) {\n      editor.updateOptions({\n        domReadOnly: domReadOnly ?? editableOptionsRef.current.domReadOnly,\n        editContext: isNestedInLexicalRef.current\n          ? false\n          : (editContext ?? editableOptionsRef.current.editContext),\n      })\n      editableOptionsRef.current = null\n    } else if (isNestedInLexicalRef.current && editor.getRawOptions().editContext !== false) {\n      editor.updateOptions({ editContext: false })\n    }\n\n    return editor\n  }, [domReadOnly, editContext, readOnly])\n  const updateReadOnlyOptionsRef = React.useRef(updateReadOnlyOptions)\n\n  // The Monaco wrapper reapplies caller options on render, so enforce read-only state afterward.\n  React.useEffect(() => {\n    updateReadOnlyOptionsRef.current = updateReadOnlyOptions\n    updateReadOnlyOptions()\n  })\n\n  return (\n    <Editor\n      beforeMount={definePayloadThemes}\n      className={classes}\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      loading={<ShimmerEffect height={minHeight} />}\n      options={{\n        ...defaultGlobalEditorOptions,\n        ...globalEditorOptions,\n        readOnly: Boolean(readOnly),\n        /**\n         * onMount the model will set:\n         * - insertSpaces\n         * - tabSize\n         * - trimAutoWhitespace\n         */\n        detectIndentation: false,\n        insertSpaces: undefined,\n        tabSize: undefined,\n        trimAutoWhitespace: undefined,\n      }}\n      theme={theme === 'dark' ? 'payload-dark' : 'payload-light'}\n      value={value}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(\n          value\n            ? Math.max(\n                minHeight,\n                value.split('\\n').length * LINE_HEIGHT +\n                  EDITOR_BORDER +\n                  paddingFromProps +\n                  CSS_CONTAINER_PADDING,\n              )\n            : minHeight,\n        )\n      }}\n      onMount={(editor, monaco) => {\n        editorRef.current = editor\n        // Set Monaco's shared default once, so its native toggle and announcements stay in sync.\n        // Mounting another editor must not reset the user's chosen mode.\n        if (!initializedTabFocusModes.has(monaco) && options?.tabFocusMode === undefined) {\n          initializedTabFocusModes.add(monaco)\n          editor.trigger('payload', 'editor.action.toggleTabFocusMode', null)\n        }\n\n        rest.onMount?.(editor, monaco)\n\n        // Required to prevent copy/cut/paste from being hijacked by Lexical rich text editor\n        const domNode = editor.getDomNode()\n        const isNested = Boolean(domNode?.closest('[contenteditable=\"true\"]'))\n\n        isNestedInLexicalRef.current = isNested\n\n        if (isNested) {\n          editor.updateOptions({ editContext: false })\n\n          const clipboardEvents = ['copy', 'cut', 'paste']\n          const stopPropagation = (event: Event) => {\n            event.stopPropagation()\n          }\n          for (const eventName of clipboardEvents) {\n            domNode.addEventListener(eventName, stopPropagation)\n          }\n          editor.onDidDispose(() => {\n            for (const eventName of clipboardEvents) {\n              domNode.removeEventListener(eventName, stopPropagation)\n            }\n          })\n        }\n\n        updateReadOnlyOptionsRef.current()\n\n        // Set per-model options to avoid global conflicts\n        const model = editor.getModel()\n        if (model) {\n          model.updateOptions({\n            insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,\n            tabSize: tabSize ?? defaultOptions.tabSize,\n            trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace,\n          })\n        }\n\n        setDynamicHeight(\n          Math.max(\n            minHeight,\n            editor.getValue().split('\\n').length * LINE_HEIGHT +\n              EDITOR_BORDER +\n              paddingFromProps +\n              CSS_CONTAINER_PADDING,\n          ),\n        )\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CollapseAllToggle/index.js

@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 export const CollapseAllToggle = t0 => {
-  const $ = _c(12);
+  const $ = _c(16);
   const {
     controls,
     isExpanded,
@@ -16,57 +16,72 @@ export const CollapseAllToggle = t0 => {
   const {
     t
   } = useTranslation();
-  const t1 = label ? `${t("fields:collapseAll")}: ${label}` : undefined;
-  let t2;
-  if ($[0] !== onClick) {
-    t2 = () => onClick(true);
-    $[0] = onClick;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  let t3;
-  if ($[2] !== controls || $[3] !== isExpanded || $[4] !== label || $[5] !== onClick || $[6] !== t || $[7] !== t1 || $[8] !== t2) {
+  let t1;
+  if ($[0] !== controls || $[1] !== isExpanded || $[2] !== label || $[3] !== onClick || $[4] !== t) {
+    let t2;
+    if ($[6] !== label || $[7] !== t) {
+      t2 = label ? `${t("fields:collapseAll")}: ${label}` : undefined;
+      $[6] = label;
+      $[7] = t;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== onClick) {
+      t3 = () => onClick(true);
+      $[9] = onClick;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
     let t4;
-    if ($[10] !== onClick) {
-      t4 = () => onClick(false);
-      $[10] = onClick;
-      $[11] = t4;
+    if ($[11] !== label || $[12] !== t) {
+      t4 = label ? `${t("fields:showAll")}: ${label}` : undefined;
+      $[11] = label;
+      $[12] = t;
+      $[13] = t4;
+    } else {
+      t4 = $[13];
+    }
+    let t5;
+    if ($[14] !== onClick) {
+      t5 = () => onClick(false);
+      $[14] = onClick;
+      $[15] = t5;
     } else {
-      t4 = $[11];
+      t5 = $[15];
     }
-    t3 = _jsxs(Fragment, {
+    t1 = _jsxs(Fragment, {
       children: [_jsx("li", {
         children: _jsx(Button, {
           "aria-controls": controls,
           "aria-expanded": isExpanded,
-          "aria-label": t1,
+          "aria-label": t2,
           buttonStyle: "ghost",
-          onClick: t2,
+          onClick: t3,
           children: t("fields:collapseAll")
         })
       }), _jsx("li", {
         children: _jsx(Button, {
           "aria-controls": controls,
           "aria-expanded": isExpanded,
-          "aria-label": label ? `${t("fields:showAll")}: ${label}` : undefined,
+          "aria-label": t4,
           buttonStyle: "ghost",
-          onClick: t4,
+          onClick: t5,
           children: t("fields:showAll")
         })
       })]
     });
-    $[2] = controls;
-    $[3] = isExpanded;
-    $[4] = label;
-    $[5] = onClick;
-    $[6] = t;
-    $[7] = t1;
-    $[8] = t2;
-    $[9] = t3;
+    $[0] = controls;
+    $[1] = isExpanded;
+    $[2] = label;
+    $[3] = onClick;
+    $[4] = t;
+    $[5] = t1;
   } else {
-    t3 = $[9];
+    t1 = $[5];
   }
-  return t3;
+  return t1;
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/CollapseAllToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useTranslation","Button","CollapseAllToggle","t0","$","controls","isExpanded","label","onClick","t","t1","undefined","t2","t3","t4","_jsxs","children","_jsx","buttonStyle"],"sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport type CollapseAllToggleProps = {\n  controls?: string\n  isExpanded?: boolean\n  label?: string\n  onClick: (collapsed: boolean) => void\n}\n\nexport const CollapseAllToggle: React.FC<CollapseAllToggleProps> = ({\n  controls,\n  isExpanded,\n  label,\n  onClick,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Fragment>\n      <li>\n        <Button\n          aria-controls={controls}\n          aria-expanded={isExpanded}\n          aria-label={label ? `${t('fields:collapseAll')}: ${label}` : undefined}\n          buttonStyle=\"ghost\"\n          onClick={() => onClick(true)}\n        >\n          {t('fields:collapseAll')}\n        </Button>\n      </li>\n      <li>\n        <Button\n          aria-controls={controls}\n          aria-expanded={isExpanded}\n          aria-label={label ? `${t('fields:showAll')}: ${label}` : undefined}\n          buttonStyle=\"ghost\"\n          onClick={() => onClick(false)}\n        >\n          {t('fields:showAll')}\n        </Button>\n      </li>\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AASvB,OAAO,MAAMC,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAL,EAKnE;EACC;IAAAM;EAAA,IAAcT,cAAA;EAQM,MAAAU,EAAA,GAAAH,KAAA,GAAQ,GAAGE,CAAA,CAAE,0BAA0BF,KAAA,EAAO,GAAAI,SAAG;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAI,OAAA;IAEpDI,EAAA,GAAAA,CAAA,KAAMJ,OAAA,KAAQ;IAAAJ,CAAA,MAAAI,OAAA;IAAAJ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAS,EAAA;EAAA,IAAAT,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAK,CAAA,IAAAL,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAQ,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAV,CAAA,SAAAI,OAAA;MAWdM,EAAA,GAAAA,CAAA,KAAMN,OAAA,MAAQ;MAAAJ,CAAA,OAAAI,OAAA;MAAAJ,CAAA,OAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAlB7BS,EAAA,GAAAE,KAAA,CAAAhB,QAAA;MAAAiB,QAAA,GACEC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAhB,MAAA;UAAA,iBACiBI,QAAA;UAAA,iBACAC,UAAA;UAAA,cACHI,EAAiD;UAAAQ,WAAA,EACjD;UAAAV,OAAA,EACHI,EAAc;UAAAI,QAAA,EAEtBP,CAAA,CAAE;QAAA,C;UAGPQ,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAhB,MAAA;UAAA,iBACiBI,QAAA;UAAA,iBACAC,UAAA;UAAA,cACHC,KAAA,GAAQ,GAAGE,CAAA,CAAE,sBAAsBF,KAAA,EAAO,GAAAI,SAAG;UAAAO,WAAA,EAC7C;UAAAV,OAAA,EACHM,EAAc;UAAAE,QAAA,EAEtBP,CAAA,CAAE;QAAA,C;;;;;;;;;;;;;;SApBTI,E;CAyBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useTranslation","Button","CollapseAllToggle","t0","$","controls","isExpanded","label","onClick","t","t1","t2","undefined","t3","t4","t5","_jsxs","children","_jsx","buttonStyle"],"sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport type CollapseAllToggleProps = {\n  controls?: string\n  isExpanded?: boolean\n  label?: string\n  onClick: (collapsed: boolean) => void\n}\n\nexport const CollapseAllToggle: React.FC<CollapseAllToggleProps> = ({\n  controls,\n  isExpanded,\n  label,\n  onClick,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Fragment>\n      <li>\n        <Button\n          aria-controls={controls}\n          aria-expanded={isExpanded}\n          aria-label={label ? `${t('fields:collapseAll')}: ${label}` : undefined}\n          buttonStyle=\"ghost\"\n          onClick={() => onClick(true)}\n        >\n          {t('fields:collapseAll')}\n        </Button>\n      </li>\n      <li>\n        <Button\n          aria-controls={controls}\n          aria-expanded={isExpanded}\n          aria-label={label ? `${t('fields:showAll')}: ${label}` : undefined}\n          buttonStyle=\"ghost\"\n          onClick={() => onClick(false)}\n        >\n          {t('fields:showAll')}\n        </Button>\n      </li>\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AASvB,OAAO,MAAMC,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAL,EAKnE;EACC;IAAAM;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAN,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAK,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAP,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAK,CAAA;MAQME,EAAA,GAAAJ,KAAA,MAAWE,CAAA,CAAE,0BAA0BF,KAAA,EAAU,GAAjDK,SAAiD;MAAAR,CAAA,MAAAG,KAAA;MAAAH,CAAA,MAAAK,CAAA;MAAAL,CAAA,MAAAO,EAAA;IAAA;MAAAA,EAAA,GAAAP,CAAA;IAAA;IAAA,IAAAS,EAAA;IAAA,IAAAT,CAAA,QAAAI,OAAA;MAEpDK,EAAA,GAAAA,CAAA,KAAML,OAAA,CAAQ;MAAAJ,CAAA,MAAAI,OAAA;MAAAJ,CAAA,OAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IAAA,IAAAU,EAAA;IAAA,IAAAV,CAAA,SAAAG,KAAA,IAAAH,CAAA,SAAAK,CAAA;MASXK,EAAA,GAAAP,KAAA,MAAWE,CAAA,CAAE,sBAAsBF,KAAA,EAAU,GAA7CK,SAA6C;MAAAR,CAAA,OAAAG,KAAA;MAAAH,CAAA,OAAAK,CAAA;MAAAL,CAAA,OAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAAA,IAAAW,EAAA;IAAA,IAAAX,CAAA,SAAAI,OAAA;MAEhDO,EAAA,GAAAA,CAAA,KAAMP,OAAA,CAAQ;MAAAJ,CAAA,OAAAI,OAAA;MAAAJ,CAAA,OAAAW,EAAA;IAAA;MAAAA,EAAA,GAAAX,CAAA;IAAA;IAlB7BM,EAAA,GAAAM,KAAA,CAACjB,QAAA;MAAAkB,QAAA,E,CACCC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAACjB,MAAA;UAAA,iBACgBI,QAAA;UAAA,iBACAC,UAAA;UAAA,cACHK,EAAiD;UAAAQ,WAAA,EACjD;UAAAX,OAAA,EACHK,EAAc;UAAAI,QAAA,EAEtBR,CAAA,CAAE;;UAGPS,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAACjB,MAAA;UAAA,iBACgBI,QAAA;UAAA,iBACAC,UAAA;UAAA,cACHQ,EAA6C;UAAAK,WAAA,EAC7C;UAAAX,OAAA,EACHO,EAAc;UAAAE,QAAA,EAEtBR,CAAA,CAAE;;;;;;;;;;;;;SApBTC,E;CAyBJ","ignoreList":[]}

package/dist/elements/Collapsible/index.css

@@ -34,9 +34,18 @@
   }
 
   .collapsible__drag {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
+
     display: flex;
-    width: var(--spacer-3);
-    height: var(--spacer-3);
+    width: var(--spacer-4);
+    height: var(--spacer-4);
     align-items: center;
     justify-content: center;
     position: relative;
@@ -193,11 +202,13 @@
   }
 
   .collapsible__content {
+    --collapsible-content-padding: var(--spacer-3);
+
     background-color: var(--color-bg);
     border: var(--stroke-width-small) solid var(--color-border);
     border-top: none;
     border-radius: 0 0 var(--button-radius) var(--button-radius);
-    padding: var(--spacer-3);
+    padding: var(--collapsible-content-padding);
     z-index: 1;
   }
 
@@ -212,7 +223,7 @@
   /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .collapsible__content {
-      padding: var(--spacer-2-5);
+      --collapsible-content-padding: var(--spacer-2-5);
     }
   }
 }

package/dist/elements/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8HlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsIlD,CAAA"}

package/dist/elements/Collapsible/index.js

@@ -33,6 +33,7 @@ export const Collapsible = t0 => {
   const disableToggleIndicator = t3 === undefined ? false : t3;
   const hasContentRegion = t4 === undefined ? false : t4;
   const id = useId();
+  const dragLabelID = `${id}-drag-label`;
   const headerID = `${id}-header`;
   const toggleLabelID = `${id}-toggle-label`;
   const contentID = `${id}-content`;
@@ -79,27 +80,26 @@ export const Collapsible = t0 => {
     t11 = $[9];
   }
   const t12 = t11.join(" ");
-  const t13 = `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`;
-  let t14;
-  let t15;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = () => setHoveringToggle(true);
-    t15 = () => setHoveringToggle(false);
-    $[10] = t14;
-    $[11] = t15;
-  } else {
-    t14 = $[10];
-    t15 = $[11];
-  }
-  let t16;
-  if ($[12] !== AfterCollapsible || $[13] !== actions || $[14] !== children || $[15] !== contentID || $[16] !== disableHeaderToggle || $[17] !== disableToggleIndicator || $[18] !== dragHandleProps || $[19] !== hasContentRegion || $[20] !== header || $[21] !== headerID || $[22] !== isCollapsed || $[23] !== t || $[24] !== t12 || $[25] !== t13 || $[26] !== toggleCollapsible || $[27] !== toggleLabelID) {
-    t16 = _jsx("div", {
+  let t13;
+  if ($[10] !== AfterCollapsible || $[11] !== actions || $[12] !== children || $[13] !== contentID || $[14] !== disableHeaderToggle || $[15] !== disableToggleIndicator || $[16] !== dragHandleProps || $[17] !== dragLabelID || $[18] !== hasContentRegion || $[19] !== header || $[20] !== headerID || $[21] !== isCollapsed || $[22] !== t || $[23] !== t12 || $[24] !== toggleCollapsible || $[25] !== toggleLabelID) {
+    let t14;
+    let t15;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = () => setHoveringToggle(true);
+      t15 = () => setHoveringToggle(false);
+      $[27] = t14;
+      $[28] = t15;
+    } else {
+      t14 = $[27];
+      t15 = $[28];
+    }
+    t13 = _jsx("div", {
       className: t12,
       children: _jsxs(CollapsibleProvider, {
         isCollapsed,
         toggle: toggleCollapsible,
         children: [_jsxs("div", {
-          className: t13,
+          className: `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`,
           onMouseEnter: t14,
           onMouseLeave: t15,
           children: [!disableHeaderToggle && _jsx("button", {
@@ -113,12 +113,20 @@ export const Collapsible = t0 => {
               id: toggleLabelID,
               children: t("fields:toggleBlock")
             })
-          }), dragHandleProps && _jsx("div", {
+          }), dragHandleProps && _jsxs("button", {
             className: `${baseClass}__drag`,
             ...dragHandleProps.attributes,
             ...dragHandleProps.listeners,
-            "aria-label": t("general:dragToReorder"),
-            children: _jsx(AlignJustifiedIcon, {})
+            "aria-labelledby": header ? `${dragLabelID} ${headerID}` : dragLabelID,
+            "data-sortable-id": dragHandleProps.id,
+            draggable: dragHandleProps.draggable,
+            ref: dragHandleProps.setActivatorNodeRef,
+            type: "button",
+            children: [_jsx("span", {
+              className: "sr-only",
+              id: dragLabelID,
+              children: t("general:dragToReorder")
+            }), _jsx(AlignJustifiedIcon, {})]
           }), header ? _jsx("div", {
             className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
             id: headerID,
@@ -154,26 +162,26 @@ export const Collapsible = t0 => {
         }), AfterCollapsible]
       })
     });
-    $[12] = AfterCollapsible;
-    $[13] = actions;
-    $[14] = children;
-    $[15] = contentID;
-    $[16] = disableHeaderToggle;
-    $[17] = disableToggleIndicator;
-    $[18] = dragHandleProps;
-    $[19] = hasContentRegion;
-    $[20] = header;
-    $[21] = headerID;
-    $[22] = isCollapsed;
-    $[23] = t;
-    $[24] = t12;
-    $[25] = t13;
-    $[26] = toggleCollapsible;
-    $[27] = toggleLabelID;
-    $[28] = t16;
+    $[10] = AfterCollapsible;
+    $[11] = actions;
+    $[12] = children;
+    $[13] = contentID;
+    $[14] = disableHeaderToggle;
+    $[15] = disableToggleIndicator;
+    $[16] = dragHandleProps;
+    $[17] = dragLabelID;
+    $[18] = hasContentRegion;
+    $[19] = header;
+    $[20] = headerID;
+    $[21] = isCollapsed;
+    $[22] = t;
+    $[23] = t12;
+    $[24] = toggleCollapsible;
+    $[25] = toggleLabelID;
+    $[26] = t13;
   } else {
-    t16 = $[28];
+    t13 = $[26];
   }
-  return t16;
+  return t13;
 };
 //# sourceMappingURL=index.js.map