carbon-react 148.0.0 → 149.0.0

package/lib/components/text-editor/__internal__/plugins/OnChange/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _onChange.default;
+  }
+});
+var _onChange = _interopRequireDefault(require("./on-change.plugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/text-editor/__internal__/plugins/OnChange/on-change.plugin.d.ts

@@ -0,0 +1,5 @@
+import { EditorState } from "lexical";
+declare const OnChangePlugin: (props: {
+    onChange: (editorState: EditorState) => void;
+}) => null;
+export default OnChangePlugin;

package/lib/components/text-editor/__internal__/plugins/OnChange/on-change.plugin.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _react = require("react");
+/**
+ * This plugin listens to changes in the editor and calls the `onChange` prop with the new editor state.
+ */
+
+const OnChangePlugin = props => {
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  const {
+    onChange
+  } = props;
+
+  // Register an update listener to call the `onChange` prop
+  (0, _react.useEffect)(() => {
+    return editor.registerUpdateListener(({
+      editorState
+    }) => {
+      const isEditable = editor.isEditable();
+      /* istanbul ignore else */
+      if (isEditable) onChange(editorState);
+    });
+  }, [editor, onChange]);
+  return null;
+};
+var _default = exports.default = OnChangePlugin;

package/lib/components/text-editor/__internal__/plugins/OnChange/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../../esm/components/text-editor/__internal__/plugins/OnChange/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/text-editor/__internal__/plugins/Placeholder/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./placeholder.component";

package/lib/components/text-editor/__internal__/plugins/Placeholder/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _placeholder.default;
+  }
+});
+var _placeholder = _interopRequireDefault(require("./placeholder.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/text-editor/__internal__/plugins/Placeholder/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../../esm/components/text-editor/__internal__/plugins/Placeholder/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/text-editor/__internal__/plugins/Placeholder/placeholder.component.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The placeholder component does not reside in the editor in a traditional sense, but is instead rendered
+ * in a separate component which is then styled to appear as if it is part of the editor. This is by design
+ * in the Lexical project to allow for greater flexibility in the design of the editor (apparently).
+ */
+import React from "react";
+interface PlaceholderProps {
+    /** The namespace of the editor that this placeholder belongs to */
+    namespace: string;
+    /** The text to display in the placeholder */
+    text: string | undefined;
+}
+declare const Placeholder: ({ namespace, text }: PlaceholderProps) => React.JSX.Element;
+export default Placeholder;

package/lib/components/text-editor/__internal__/plugins/Placeholder/placeholder.component.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _placeholder = _interopRequireDefault(require("./placeholder.style"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * The placeholder component does not reside in the editor in a traditional sense, but is instead rendered
+ * in a separate component which is then styled to appear as if it is part of the editor. This is by design
+ * in the Lexical project to allow for greater flexibility in the design of the editor (apparently).
+ */
+
+const Placeholder = ({
+  namespace,
+  text = ""
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_placeholder.default, {
+    "data-role": `${namespace}-placeholder`
+  }, text);
+};
+var _default = exports.default = Placeholder;

package/lib/components/text-editor/__internal__/plugins/Placeholder/placeholder.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledPlaceholder;

package/lib/components/text-editor/__internal__/plugins/Placeholder/placeholder.style.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledPlaceholder = _styledComponents.default.div`
+  position: absolute;
+  top: 16px;
+  color: var(--colorsUtilityYin055);
+  left: 10px;
+`;
+var _default = exports.default = StyledPlaceholder;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormattingButtonProps } from "./common";
+declare const BoldButton: ({ isActive, namespace }: FormattingButtonProps) => React.JSX.Element;
+export default BoldButton;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _toolbar = require("../toolbar.style");
+var _constants = require("../../../constants");
+var _useLocale = _interopRequireDefault(require("../../../../../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// The `BoldButton` component is a button that applies bold formatting to the selected text in the editor.
+const BoldButton = ({
+  isActive,
+  namespace
+}) => {
+  // Get the locale to enable translations
+  const locale = (0, _useLocale.default)();
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+
+  // When the button is clicked, dispatch the `FORMAT_TEXT_COMMAND` with the `Bold` action
+  const handleClick = () => {
+    const isEditable = editor.isEditable();
+
+    /* istanbul ignore else */
+    if (isEditable) {
+      // Focus the editor before dispatching the command
+      editor.focus();
+      editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, _constants.TextEditorActionTypes.Bold);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButton, {
+    size: "small",
+    "aria-label": locale.textEditor.boldAria(),
+    onClick: () => handleClick(),
+    iconType: "bold",
+    buttonType: isActive ? "primary" : "tertiary",
+    isActive: isActive,
+    "aria-pressed": isActive,
+    "data-role": `${namespace}-bold-button`,
+    tabIndex: 0
+  });
+};
+var _default = exports.default = BoldButton;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/common.d.ts

@@ -0,0 +1,6 @@
+export interface FormattingButtonProps {
+    /** Whether the button is active or not, relative to the text at the current cursor position */
+    isActive: boolean;
+    /** The namespace of the editor that this button belongs to */
+    namespace: string;
+}

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/common.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as BoldButton } from "./bold.component";
+export { default as ItalicButton } from "./italic.component";
+export { default as ListControls } from "./list.component";
+export { default as SaveButton } from "./save.component";

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BoldButton", {
+  enumerable: true,
+  get: function () {
+    return _bold.default;
+  }
+});
+Object.defineProperty(exports, "ItalicButton", {
+  enumerable: true,
+  get: function () {
+    return _italic.default;
+  }
+});
+Object.defineProperty(exports, "ListControls", {
+  enumerable: true,
+  get: function () {
+    return _list.default;
+  }
+});
+Object.defineProperty(exports, "SaveButton", {
+  enumerable: true,
+  get: function () {
+    return _save.default;
+  }
+});
+var _bold = _interopRequireDefault(require("./bold.component"));
+var _italic = _interopRequireDefault(require("./italic.component"));
+var _list = _interopRequireDefault(require("./list.component"));
+var _save = _interopRequireDefault(require("./save.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormattingButtonProps } from "./common";
+declare const ItalicButton: ({ isActive, namespace }: FormattingButtonProps) => React.JSX.Element;
+export default ItalicButton;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _toolbar = require("../toolbar.style");
+var _constants = require("../../../constants");
+var _useLocale = _interopRequireDefault(require("../../../../../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// The `ItalicButton` component is a button that applies italic formatting to the selected text in the editor.
+const ItalicButton = ({
+  isActive,
+  namespace
+}) => {
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  // Get the locale to enable translations
+  const locale = (0, _useLocale.default)();
+
+  // When the button is clicked, dispatch the `FORMAT_TEXT_COMMAND` with the `Italic` action
+  const handleClick = () => {
+    const isEditable = editor.isEditable();
+
+    /* istanbul ignore else */
+    if (isEditable)
+      // Focus the editor before dispatching the command
+      editor.focus();
+    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, _constants.TextEditorActionTypes.Italic);
+  };
+  return /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButton, {
+    size: "small",
+    "aria-label": locale.textEditor.italicAria(),
+    onClick: () => handleClick(),
+    iconType: "italic",
+    buttonType: isActive ? "primary" : "tertiary",
+    isActive: isActive,
+    "aria-pressed": isActive,
+    "data-role": `${namespace}-italic-button`,
+    tabIndex: -1
+  });
+};
+var _default = exports.default = ItalicButton;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const ListControls: ({ namespace }: {
+    namespace: string;
+}) => React.JSX.Element;
+export default ListControls;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.js

@@ -0,0 +1,325 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _list = require("@lexical/list");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _utils = require("@lexical/utils");
+var _lexical = require("lexical");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _toolbar = require("../toolbar.style");
+var _constants = require("../../../constants");
+var _useLocale = _interopRequireDefault(require("../../../../../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// The `ListControls` component is a set of buttons that allow the user to insert ordered and unordered lists into the editor.
+const ListControls = ({
+  namespace
+}) => {
+  // Get the editor instance
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  // Get the locale to enable translations
+  const locale = (0, _useLocale.default)();
+  // Set the initial state of the list buttons
+  const [isOLActive, setIsOLActive] = (0, _react.useState)(false);
+  const [isULActive, setIsULActive] = (0, _react.useState)(false);
+
+  // Register the commands for inserting and removing lists
+  editor.registerCommand(_list.INSERT_ORDERED_LIST_COMMAND, () => {
+    (0, _list.insertList)(editor, _constants.TextEditorActionTypes.OrderedList);
+    return true;
+  }, _lexical.COMMAND_PRIORITY_LOW);
+  editor.registerCommand(_list.INSERT_UNORDERED_LIST_COMMAND, () => {
+    (0, _list.insertList)(editor, _constants.TextEditorActionTypes.UnorderedList);
+    return true;
+  }, _lexical.COMMAND_PRIORITY_LOW);
+  editor.registerCommand(_list.REMOVE_LIST_COMMAND, () => {
+    (0, _list.removeList)(editor);
+    return true;
+  }, _lexical.COMMAND_PRIORITY_LOW);
+
+  // Recursive function to find the closest list item ancestor
+  const findListItemAncestor = node => {
+    let currentNode = node;
+    while (currentNode !== null) {
+      if (currentNode instanceof _list.ListItemNode) {
+        return currentNode;
+      }
+      currentNode = currentNode?.getParent();
+    }
+    return null;
+  };
+  const updateToolbar = (0, _react.useCallback)(() => {
+    const selection = (0, _lexical.$getSelection)();
+    if (!selection) {
+      setIsOLActive(false);
+      setIsULActive(false);
+      return;
+    }
+    const selectedNodes = selection.getNodes();
+
+    /* istanbul ignore if */
+    if (selectedNodes.length === 0) {
+      setIsOLActive(false);
+      setIsULActive(false);
+      return;
+    }
+    const listItemNode = selectedNodes.map(findListItemAncestor).find(node => node !== null);
+    if (!listItemNode) {
+      setIsOLActive(false);
+      setIsULActive(false);
+      return;
+    }
+    let listNode = listItemNode.getParent();
+    /* istanbul ignore next */
+    while (listNode && !(listNode instanceof _list.ListNode)) {
+      listNode = listNode.getParent();
+    }
+
+    /* istanbul ignore else */
+    if (listNode instanceof _list.ListNode) {
+      setIsOLActive(listNode.getListType() === "number");
+      setIsULActive(listNode.getListType() === "bullet");
+    } else {
+      setIsOLActive(false);
+      setIsULActive(false);
+    }
+  }, []);
+
+  // Register an update listener to update the toolbar when the editor state changes
+  (0, _react.useEffect)(() => {
+    return (0, _utils.mergeRegister)(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      editorState.read(() => {
+        const isEditable = editor.isEditable();
+        /* istanbul ignore else */
+        if (isEditable) updateToolbar();
+      });
+    }));
+  }, [updateToolbar, editor]);
+
+  // When the ordered list button is clicked, insert or remove an ordered list
+  const handleOLClick = () => {
+    const isEditable = editor.isEditable();
+    /* istanbul ignore if */
+    if (!isEditable) return;
+
+    // Focus the editor before dispatching the command
+    editor.focus();
+    if (isOLActive) {
+      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
+      setIsOLActive(false);
+    } else {
+      editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND, undefined);
+      setIsOLActive(true);
+    }
+    // If the unordered list button is active, deactivate it
+    setIsULActive(false);
+  };
+
+  // When the unordered list button is clicked, insert or remove an unordered list
+  const handleULClick = () => {
+    const isEditable = editor.isEditable();
+    /* istanbul ignore if */
+    if (!isEditable) return;
+
+    // Focus the editor before dispatching the command
+    editor.focus();
+    if (isULActive) {
+      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
+      setIsULActive(false);
+    } else {
+      editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND, undefined);
+      setIsULActive(true);
+    }
+    // If the ordered list button is active, deactivate it
+    setIsOLActive(false);
+  };
+
+  // Split an array into three parts: before a subset, the subset, and after the subset
+  function splitArray(allEntries, subsetEntries) {
+    let startIndex = -1;
+    for (let i = 0; i <= allEntries.length - subsetEntries.length; i++) {
+      if (allEntries.slice(i, i + subsetEntries.length).toString() === subsetEntries.toString()) {
+        startIndex = i;
+        break;
+      }
+    }
+
+    /* istanbul ignore if */
+    if (startIndex === -1) {
+      throw new Error("Subset B not found in array A");
+    }
+
+    // If the subset matches the full selection, return the original subset
+    if (startIndex === 0 && subsetEntries.length === allEntries.length) {
+      return {
+        beforeSubset: [],
+        subset: allEntries,
+        afterSubset: []
+      };
+    }
+
+    // Split A into three parts
+    const beforeSubset = allEntries.slice(0, startIndex);
+    const subset = allEntries.slice(startIndex, startIndex + subsetEntries.length);
+    const afterSubset = allEntries.slice(startIndex + subsetEntries.length);
+    return {
+      beforeSubset,
+      subset,
+      afterSubset
+    };
+  }
+
+  /* istanbul ignore next */
+  const alignListTypes = (lists, listType) => {
+    lists.forEach(list => {
+      editor.update(() => {
+        list.setListType(listType);
+      });
+    });
+  };
+
+  /* istanbul ignore next */
+  const convertListType = newType => {
+    editor.update(() => {
+      // Get the current selection
+      const selection = (0, _lexical.$getSelection)();
+      // If the selection is not a range selection, return
+      if (!(0, _lexical.$isRangeSelection)(selection)) return;
+
+      // Get the anchor node
+      const anchorNode = selection.anchor.getNode();
+
+      // Find the parent list node
+      let currentList = anchorNode.getParent();
+      while (currentList && !(0, _list.$isListNode)(currentList)) {
+        currentList = currentList.getParent();
+      }
+
+      // If the parent node is not a list node, return
+      if (!currentList) {
+        return;
+      }
+
+      // Determine how many lists have been selected
+      const numberOfListsSelected = selection.getNodes().map(node => {
+        return node.getType() === "list" ? node : null;
+      }).filter(node => node !== null);
+
+      // If more than one list is selected, just align the list types to use the selected type
+      if (numberOfListsSelected.length > 1) {
+        alignListTypes(numberOfListsSelected, newType);
+        return;
+      }
+      const preSelectionList = [];
+      const selectionList = [];
+      const postSelectionList = [];
+
+      // Get the keys of the nodes in the selection, filtering out the current list node (the parent)
+      const selectionKeys = selection.getNodes().map(node => {
+        let _p = node.getParent();
+        // If we're not in a list item directly, get the parent of the node
+        if (!(0, _list.$isListItemNode)(_p)) {
+          const nodeType = _p?.getType();
+          // If the node is a link or autolink, use the parent of the link node instead
+          if (nodeType && ["link", "autolink"].includes(nodeType)) {
+            _p = _p?.getParent() ?? null;
+          } else {
+            // This node is useless, return null
+            return null;
+          }
+        }
+        const _k = _p?.getKey();
+        if (_k !== currentList?.getKey()) return _k;
+        return null;
+      }).filter(key => key !== null && key !== undefined);
+      // Get the keys of the nodes in the current list node
+      const listKeys = currentList.getChildrenKeys();
+
+      // Remove duplicate keys from the selection
+      const uniqueSelectionKeys = Array.from(new Set(selectionKeys));
+
+      // Split the list keys into three parts: before the selection, the selection, and after the selection
+      const {
+        beforeSubset,
+        subset,
+        afterSubset
+      } = splitArray(listKeys, uniqueSelectionKeys);
+
+      // Get the nodes of the three parts
+      beforeSubset.forEach(key => {
+        const node = (0, _lexical.$getNodeByKey)(key);
+        if ((0, _list.$isListItemNode)(node)) preSelectionList.push(node);
+      });
+      subset.forEach(key => {
+        const node = (0, _lexical.$getNodeByKey)(key);
+        if ((0, _list.$isListItemNode)(node)) selectionList.push(node);
+      });
+      afterSubset.forEach(key => {
+        const node = (0, _lexical.$getNodeByKey)(key);
+        if ((0, _list.$isListItemNode)(node)) postSelectionList.push(node);
+      });
+
+      // Create new list nodes with the new list type
+      const originalListType = currentList.getListType();
+      const newPreNode = (0, _list.$createListNode)(originalListType);
+      const newSelectionNode = (0, _list.$createListNode)(newType);
+      const newPostNode = (0, _list.$createListNode)(originalListType);
+      newPreNode.append(...preSelectionList);
+      newSelectionNode.append(...selectionList);
+      newPostNode.append(...postSelectionList);
+
+      // Insert the new nodes before the current list node if they have children
+      if (newPreNode.getChildren().length > 0) {
+        currentList.insertBefore(newPreNode);
+      }
+      if (newSelectionNode.getChildren().length > 0) {
+        if (newPreNode.getChildren().length > 0) {
+          newPreNode.insertAfter(newSelectionNode);
+        } else {
+          currentList.insertBefore(newSelectionNode);
+        }
+      }
+      if (newPostNode.getChildren().length > 0) {
+        if (newSelectionNode.getChildren().length > 0) {
+          newSelectionNode.insertAfter(newPostNode);
+        } else if (newPreNode.getChildren().length > 0) {
+          newPreNode.insertAfter(newPostNode);
+        } else {
+          currentList.insertBefore(newPostNode);
+        }
+      }
+
+      // Remove the current list node
+      currentList.remove();
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButton, {
+    size: "small",
+    "aria-label": locale.textEditor.unorderedListAria(),
+    onClick: () => isOLActive ? convertListType("bullet") : handleULClick(),
+    iconType: "bullet_list_dotted",
+    buttonType: isULActive ? "primary" : "tertiary",
+    isActive: isULActive,
+    "aria-pressed": isULActive,
+    "data-role": `${namespace}-unordered-list-button`,
+    tabIndex: -1
+  }), /*#__PURE__*/_react.default.createElement(_toolbar.FormattingButton, {
+    size: "small",
+    "aria-label": locale.textEditor.orderedListAria(),
+    onClick: () => isULActive ? convertListType("number") : handleOLClick(),
+    iconType: "bullet_list_numbers",
+    buttonType: isOLActive ? "primary" : "tertiary",
+    isActive: isOLActive,
+    "aria-pressed": isOLActive,
+    "data-role": `${namespace}-ordered-list-button`,
+    tabIndex: -1
+  }));
+};
+var _default = exports.default = ListControls;

package/lib/components/text-editor/__internal__/plugins/Toolbar/buttons/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../../../esm/components/text-editor/__internal__/plugins/Toolbar/buttons/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}