carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/tabs/tabs.component.js

@@ -1,269 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
-import Tab from "./tab";
-import Event from "../../__internal__/utils/helpers/events";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import StyledTabs from "./tabs.style";
-import TabsHeader from "./__internal__/tabs-header";
-import TabTitle from "./__internal__/tab-title";
-import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
-const Tabs = ({
-  align = "left",
-  children,
-  onTabChange,
-  selectedTabId,
-  renderHiddenTabs = true,
-  position = "top",
-  extendedLine = true,
-  size,
-  borders = "off",
-  variant = "default",
-  validationStatusOverride,
-  headerWidth,
-  showValidationsSummary,
-  ...rest
-}) => {
-  if (position !== "left" && headerWidth !== undefined) {
-    // eslint-disable-next-line no-console
-    console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");
-  }
-
-  /** The children nodes converted into an Array */
-  const filteredChildren = useMemo(() => Children.toArray(children).filter(child => child), [children]);
-
-  /** Array of the tabIds for the child nodes */
-  const tabIds = useMemo(() => filteredChildren.map(child => child.props.tabId), [filteredChildren]);
-
-  /** Array of refs to the TabTitle nodes */
-  const tabRefs = useMemo(() => Array.from({
-    length: filteredChildren.length
-  }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
-  const previousSelectedTabId = useRef(selectedTabId);
-  const [selectedTabIdState, setSelectedTabIdState] = useState(selectedTabId || filteredChildren[0].props.tabId);
-  const {
-    isInSidebar
-  } = useContext(DrawerSidebarContext);
-  const [tabsErrors, setTabsErrors] = useState({});
-  const [tabsWarnings, setTabsWarnings] = useState({});
-  const [tabsInfos, setTabsInfos] = useState({});
-  const updateErrors = useCallback((id, error) => {
-    setTabsErrors(state => ({
-      ...state,
-      [id]: error
-    }));
-  }, []);
-  const updateWarnings = useCallback((id, warning) => {
-    setTabsWarnings(state => ({
-      ...state,
-      [id]: warning
-    }));
-  }, []);
-  const updateInfos = useCallback((id, info) => {
-    setTabsInfos(state => ({
-      ...state,
-      [id]: info
-    }));
-  }, []);
-
-  /** Returns true/false for if the given tab id is selected. */
-  const isTabSelected = useCallback(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
-
-  /** Updates the currently visible tab */
-  const updateVisibleTab = useCallback(tabid => {
-    if (!isTabSelected(tabid)) {
-      setSelectedTabIdState(tabid);
-    }
-    if (onTabChange) {
-      onTabChange(tabid);
-    }
-  }, [onTabChange, isTabSelected]);
-  const blurPreviousSelectedTab = useCallback(() => {
-    const {
-      current
-    } = previousSelectedTabId;
-    const previousTabIndex = current ? tabIds.indexOf(current) : /* istanbul ignore next */-1;
-    /* istanbul ignore else */
-    if (previousTabIndex !== -1) {
-      const previousTabRef = tabRefs[previousTabIndex];
-      previousTabRef.current?.blur();
-    }
-  }, [tabIds, tabRefs]);
-  useEffect(() => {
-    if (previousSelectedTabId.current !== selectedTabId) {
-      if (selectedTabId !== selectedTabIdState) {
-        setSelectedTabIdState(selectedTabId);
-        blurPreviousSelectedTab();
-      }
-      previousSelectedTabId.current = selectedTabId;
-    }
-  }, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
-  const createTabClickHandler = tabId => ev => {
-    // istanbul ignore if
-    // (code doesn't seem to be ever reached - FE-6835 raised to investigate and hopefully remove this)
-    if (Event.isEventType(ev, "keydown")) {
-      return;
-    }
-    updateVisibleTab(tabId);
-  };
-
-  /** Focuses the tab for the reference specified */
-  const focusTab = ref => {
-    ref.current?.focus();
-    /* istanbul ignore next */
-    const rect = ref.current?.getBoundingClientRect();
-    /* istanbul ignore next */
-    if (rect) {
-      const isVisible = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-      if (!isVisible) {
-        ref.current?.scrollIntoView({
-          behavior: "auto",
-          inline: "center"
-        });
-      }
-    }
-  };
-
-  /** Will trigger the tab at the given index. */
-  const goToTab = (event, index) => {
-    event.preventDefault();
-    let newIndex = index;
-    if (index < 0) {
-      newIndex = tabIds.length - 1;
-    } else if (index === tabIds.length) {
-      newIndex = 0;
-    }
-    const nextRef = tabRefs[newIndex];
-    focusTab(nextRef);
-  };
-  const createTabKeydownHandler = index => event => {
-    const isTabVertical = isInSidebar || position === "left";
-    const isUp = isTabVertical && Event.isUpKey(event);
-    const isDown = isTabVertical && Event.isDownKey(event);
-    const isLeft = !isTabVertical && Event.isLeftKey(event);
-    const isRight = !isTabVertical && Event.isRightKey(event);
-    if (isUp || isLeft) {
-      goToTab(event, index - 1);
-    } else if (isDown || isRight) {
-      goToTab(event, index + 1);
-    }
-  };
-
-  /** Build the headers for the tab component */
-  const renderTabHeaders = () => {
-    const tabTitles = filteredChildren.map((child, index) => {
-      const {
-        tabId,
-        title,
-        siblings,
-        titlePosition,
-        errorMessage,
-        warningMessage,
-        infoMessage,
-        href,
-        customLayout,
-        titleProps
-      } = child.props;
-      const refId = `${tabId}-tab`;
-      const errors = tabsErrors[tabId];
-      const warnings = tabsWarnings[tabId];
-      const infos = tabsInfos[tabId];
-      const errorsCount = errors && Object.entries(errors).filter(tab => tab[1]).length;
-      const warningsCount = warnings && Object.entries(warnings).filter(tab => tab[1]).length;
-      const infosCount = infos && Object.entries(infos).filter(tab => tab[1]).length;
-      const hasOverride = validationStatusOverride && validationStatusOverride[tabId];
-      const errorOverride = hasOverride && validationStatusOverride[tabId].error;
-      const warningOverride = hasOverride && validationStatusOverride[tabId].warning;
-      const infoOverride = hasOverride && validationStatusOverride[tabId].info;
-      const tabHasError = errorOverride !== undefined ? errorOverride : !!errorsCount;
-      const tabHasWarning = warningOverride !== undefined ? warningOverride : !!warningsCount && !tabHasError;
-      const tabHasInfo = infoOverride !== undefined ? infoOverride : !!infosCount && !tabHasError && !tabHasWarning;
-      const getValidationMessage = (message, validations = {}) => {
-        const summaryOfMessages = Object.values(validations).filter(value => value && typeof value === "string");
-        if (!showValidationsSummary || !summaryOfMessages.length) {
-          return message;
-        }
-        if (summaryOfMessages.length === 1) {
-          return summaryOfMessages[0];
-        }
-        return summaryOfMessages.map(value => `• ${value}`).join("\n");
-      };
-      return /*#__PURE__*/React.createElement(TabTitle, _extends({}, titleProps, {
-        position: isInSidebar ? "left" : position,
-        dataTabId: tabId,
-        id: refId,
-        key: tabId,
-        onClick: createTabClickHandler(tabId),
-        onKeyDown: createTabKeydownHandler(index),
-        ref: tabRefs[index],
-        tabIndex: isTabSelected(tabId) ? 0 : -1,
-        title: title,
-        href: href,
-        isTabSelected: isTabSelected(tabId),
-        error: tabHasError,
-        warning: tabHasWarning,
-        info: tabHasInfo,
-        size: size || "default",
-        borders: borders !== "off",
-        siblings: siblings,
-        titlePosition: titlePosition,
-        errorMessage: getValidationMessage(errorMessage, errors),
-        warningMessage: getValidationMessage(warningMessage, warnings),
-        infoMessage: getValidationMessage(infoMessage, infos),
-        alternateStyling: variant === "alternate",
-        noLeftBorder: ["no left side", "no sides"].includes(borders),
-        noRightBorder: ["no right side", "no sides"].includes(borders),
-        customLayout: customLayout,
-        isInSidebar: isInSidebar,
-        align: align
-      }));
-    });
-    return /*#__PURE__*/React.createElement(TabsHeader, {
-      align: align,
-      position: isInSidebar ? "left" : position,
-      role: "tablist",
-      extendedLine: extendedLine,
-      noRightBorder: ["no right side", "no sides"].includes(borders),
-      isInSidebar: isInSidebar,
-      size: size || "default"
-    }, tabTitles);
-  };
-
-  /** Builds all tabs where non selected tabs have class of hidden */
-  const renderTabs = () => {
-    if (isInSidebar) return null;
-    if (!renderHiddenTabs) {
-      const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
-      return tab && /*#__PURE__*/cloneElement(tab, {
-        ...tab.props,
-        role: "tabpanel",
-        position,
-        isTabSelected: isTabSelected(tab.props.tabId),
-        key: `${tab.props.tabId}-tab`,
-        ariaLabelledby: `${tab.props.tabId}-tab`,
-        updateErrors,
-        updateWarnings,
-        updateInfos
-      });
-    }
-    return filteredChildren.map(child => {
-      return /*#__PURE__*/cloneElement(child, {
-        ...child.props,
-        role: "tabpanel",
-        position,
-        isTabSelected: isTabSelected(child.props.tabId),
-        key: `${child.props.tabId}-tab`,
-        ariaLabelledby: `${child.props.tabId}-tab`,
-        updateErrors,
-        updateWarnings,
-        updateInfos
-      });
-    });
-  };
-  return /*#__PURE__*/React.createElement(StyledTabs, _extends({
-    position: isInSidebar ? "left" : position,
-    "data-role": "tabs",
-    isInSidebar: isInSidebar,
-    headerWidth: headerWidth
-  }, rest, tagComponent("tabs", rest)), renderTabHeaders(), renderTabs());
-};
-export { Tabs, Tab };
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as r,Children as n,createRef as i,useRef as o,useState as a,useContext as s,useCallback as l,useEffect as d,createElement as p,cloneElement as c}from"react";export{Tab}from"./tab/tab.component.js";import b from"../../__internal__/utils/helpers/events/events.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import f from"./tabs.style.js";import g from"./__internal__/tabs-header/tabs-header.component.js";import h from"./__internal__/tab-title/tab-title.component.js";import m from"../drawer/__internal__/drawer-sidebar.context.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){y(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const j=y=>{var{align:j="left",children:w,onTabChange:I,selectedTabId:_,renderHiddenTabs:S=!0,position:P="top",extendedLine:T=!0,size:x,borders:L="off",variant:W="default",validationStatusOverride:k,headerWidth:E,showValidationsSummary:D}=y,M=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(y,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);"left"!==P&&void 0!==E&&console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const $=r((()=>n.toArray(w).filter((e=>e))),[w]),K=r((()=>$.map((e=>e.props.tabId))),[$]),z=r((()=>Array.from({length:$.length}).map((()=>i()))),[$.length]),B=o(_),[C,H]=a(_||$[0].props.tabId),{isInSidebar:R}=s(m),[V,A]=a({}),[U,q]=a({}),[F,G]=a({}),J=l(((e,t)=>{A((r=>v(O({},r),{[e]:t})))}),[]),N=l(((e,t)=>{q((r=>v(O({},r),{[e]:t})))}),[]),Q=l(((e,t)=>{G((r=>v(O({},r),{[e]:t})))}),[]),X=l((e=>e===C),[C]),Y=l((e=>{X(e)||H(e),I&&I(e)}),[I,X]),Z=l((()=>{const{current:e}=B,t=e?K.indexOf(e):-1;var r;-1!==t&&(null===(r=z[t].current)||void 0===r||r.blur())}),[K,z]);d((()=>{B.current!==_&&(_!==C&&(H(_),Z()),B.current=_)}),[Z,B,_,C]);const ee=e=>t=>{b.isEventType(t,"keydown")||Y(e)},te=(e,t)=>{e.preventDefault();let r=t;t<0?r=K.length-1:t===K.length&&(r=0),(e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var i;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(i=e.current)||void 0===i||i.scrollIntoView({behavior:"auto",inline:"center"}))})(z[r])},re=e=>t=>{const r=R||"left"===P,n=r&&b.isUpKey(t),i=r&&b.isDownKey(t),o=!r&&b.isLeftKey(t),a=!r&&b.isRightKey(t);n||o?te(t,e-1):(i||a)&&te(t,e+1)};return e(f,v(O({position:R?"left":P,"data-role":"tabs",isInSidebar:R,headerWidth:E},M,u("tabs",M)),{children:[(()=>{const e=$.map(((e,t)=>{const{tabId:r,title:n,siblings:i,titlePosition:o,errorMessage:a,warningMessage:s,infoMessage:l,href:d,customLayout:c,titleProps:b}=e.props,u=`${r}-tab`,f=V[r],g=U[r],m=F[r],y=f&&Object.entries(f).filter((e=>e[1])).length,w=g&&Object.entries(g).filter((e=>e[1])).length,I=m&&Object.entries(m).filter((e=>e[1])).length,_=k&&k[r],S=_&&k[r].error,T=_&&k[r].warning,E=_&&k[r].info,M=void 0!==S?S:!!y,$=void 0!==T?T:!!w&&!M,K=void 0!==E?E:!!I&&!M&&!$,B=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return D&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return p(h,v(O({},b),{position:R?"left":P,dataTabId:r,id:u,key:r,onClick:ee(r),onKeyDown:re(t),ref:z[t],tabIndex:X(r)?0:-1,title:n,href:d,isTabSelected:X(r),error:M,warning:$,info:K,size:x||"default",borders:"off"!==L,siblings:i,titlePosition:o,errorMessage:B(a,f),warningMessage:B(s,g),infoMessage:B(l,m),alternateStyling:"alternate"===W,noLeftBorder:["no left side","no sides"].includes(L),noRightBorder:["no right side","no sides"].includes(L),customLayout:c,isInSidebar:R,align:j}))}));return t(g,{align:j,position:R?"left":P,role:"tablist",extendedLine:T,noRightBorder:["no right side","no sides"].includes(L),isInSidebar:R,size:x||"default",children:e})})(),(()=>{if(R)return null;if(!S){const e=$.find((e=>X(e.props.tabId)));return e&&c(e,v(O({},e.props),{role:"tabpanel",position:P,isTabSelected:X(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:J,updateWarnings:N,updateInfos:Q}))}return $.map((e=>c(e,v(O({},e.props),{role:"tabpanel",position:P,isTabSelected:X(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:J,updateWarnings:N,updateInfos:Q}))))})()]}))};export{j as Tabs};

package/esm/components/tabs/tabs.style.js

@@ -1,41 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import BaseTheme from "../../style/themes/base";
-import { StyledTabsHeaderWrapper } from "./__internal__/tabs-header/tabs-header.style";
-import StyledTab from "./tab/tab.style";
-const StyledTabs = styled.div`
-  ${({
-  position,
-  isInSidebar,
-  headerWidth
-}) => css`
-    color: var(--colorsActionMinorYin090);
-
-    ${position === "left" && css`
-      ${headerWidth && css`
-        ${StyledTabsHeaderWrapper} {
-          width: ${headerWidth};
-        }
-
-        ${StyledTab} {
-          width: ${`calc(100% - ${headerWidth})`};
-        }
-      `}
-
-      ${!isInSidebar && css`
-        display: flex;
-        width: 100%;
-      `}
-
-      ${isInSidebar && css`
-        width: 99%;
-      `}
-    `}
-  `}
-
-  ${margin}
-`;
-StyledTabs.defaultProps = {
-  theme: BaseTheme
-};
-export default StyledTabs;
+import t,{css as e}from"styled-components";import{margin as s}from"styled-system";import o from"../../style/themes/base/index.js";import{StyledTabsHeaderWrapper as i}from"./__internal__/tabs-header/tabs-header.style.js";import r from"./tab/tab.style.js";const a=t.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-e445cd61-0"})([""," ",""],(({position:t,isInSidebar:s,headerWidth:o})=>e(["color:var(--colorsActionMinorYin090);",""],"left"===t&&e([""," "," ",""],o&&e(["","{width:",";}","{width:",";}"],i,o,r,`calc(100% - ${o})`),!s&&e(["display:flex;width:100%;"]),s&&e(["width:99%;"])))),s);a.defaultProps={theme:o};export{a as default};

package/esm/components/text-editor/__internal__/constants.d.ts

@@ -4,7 +4,6 @@ import { ListNode, ListItemNode, ListType } from "@lexical/list";
 import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { EditorThemeClasses, TextFormatType } from "lexical";
-import "./style.css";
 /** The default prefix applied to the editor's internal class names, IDs, etc. */
 declare const COMPONENT_PREFIX = "carbon-rte";
 /** The theme overrides needed to correctly style the editor */

package/esm/components/text-editor/__internal__/constants.js

@@ -1,29 +1 @@
-import { CodeNode } from "@lexical/code";
-import { LinkNode, AutoLinkNode } from "@lexical/link";
-import { ListNode, ListItemNode } from "@lexical/list";
-import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import "./style.css";
-
-/** The default prefix applied to the editor's internal class names, IDs, etc. */
-const COMPONENT_PREFIX = "carbon-rte";
-
-/** The theme overrides needed to correctly style the editor */
-const theme = {
-  text: {
-    bold: "textBold",
-    italic: "textItalic"
-  }
-};
-
-/** The available actions that can be used in the editor */
-const TextEditorActionTypes = {
-  Bold: "bold",
-  Italic: "italic",
-  OrderedList: "number",
-  UnorderedList: "bullet"
-};
-
-/** The nodes supported by markdown */
-const markdownNodes = [AutoLinkNode, CodeNode, LinkNode, ListNode, ListItemNode, HeadingNode, QuoteNode, HorizontalRuleNode];
-export { COMPONENT_PREFIX, markdownNodes, TextEditorActionTypes, theme };
+import{CodeNode as t}from"@lexical/code";import{AutoLinkNode as l,LinkNode as i}from"@lexical/link";import{ListNode as e,ListItemNode as o}from"@lexical/list";import{HorizontalRuleNode as r}from"@lexical/react/LexicalHorizontalRuleNode";import{HeadingNode as c,QuoteNode as a}from"@lexical/rich-text";const m="carbon-rte",x={text:{bold:"textBold",italic:"textItalic"}},d={Bold:"bold",Italic:"italic",OrderedList:"number",UnorderedList:"bullet"},n=[l,t,i,e,o,c,a,r];export{m as COMPONENT_PREFIX,d as TextEditorActionTypes,n as markdownNodes,x as theme};

package/esm/components/text-editor/__internal__/helpers.js

@@ -1,84 +1 @@
-import { createHeadlessEditor } from "@lexical/headless";
-import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
-import { $getRoot, $getSelection } from "lexical";
-import { markdownNodes, theme } from "./constants";
-
-/**
- * This helper takes the current state of the editor and serializes it into two formats:
- * 1. HTML
- * 2. JSON
- * This allows the editor state to be saved and restored at a later time, in a format suitable
- * for the majority of customers' use cases.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SerializeLexical = editor => {
-  let htmlString;
-  let json;
-  editor.read(() => {
-    // Get the current editor state
-    const editorState = editor.getEditorState();
-    // Serialize the editor state to JSON
-    json = editorState.toJSON();
-    // Generate HTML from the editor state
-    htmlString = $generateHtmlFromNodes(editor, null);
-  });
-  return {
-    htmlString,
-    json
-  };
-};
-
-/**
- * This helper takes an HTML string and deserializes it into the editor.
- * This allows the editor to be restored from a previously saved state.
- */
-const DeserializeHTML = html => {
-  // Create a new headless editor instance. This allows us to process the editor state
-  // without needing to render the editor itself.
-  const editor = createHeadlessEditor({
-    namespace: "html-to-json",
-    // eslint-disable-next-line no-console
-    onError: console.error,
-    theme,
-    nodes: markdownNodes
-  });
-  let parsingError;
-  editor.update(() => {
-    // Parse the HTML string into a DOM
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(html, "text/html");
-    // Generate nodes from the DOM
-    const nodes = $generateNodesFromDOM(editor, dom);
-    // Select the root of the editor
-    $getRoot().select();
-    // Insert the nodes into the editor
-    const selection = $getSelection();
-    /* istanbul ignore else */
-    if (selection) {
-      try {
-        selection.insertNodes(nodes);
-      } catch (err) {
-        /* istanbul ignore next */
-        parsingError = err;
-      }
-    }
-  }, {
-    discrete: true
-  });
-
-  /* istanbul ignore next */
-  if (parsingError) {
-    throw parsingError;
-  }
-
-  // Return the editor instance
-  const json = editor.getEditorState().toJSON();
-  return JSON.stringify(json);
-};
-const urlRegExp = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);
-
-/** Function to validate a given URL */
-function validateUrl(url) {
-  return url === "https://" || urlRegExp.test(url);
-}
-export { DeserializeHTML, SerializeLexical, validateUrl };
+import{createHeadlessEditor as t}from"@lexical/headless";import{$generateHtmlFromNodes as e,$generateNodesFromDOM as r}from"@lexical/html";import{$getRoot as o,$getSelection as n}from"lexical";import{theme as s,markdownNodes as i}from"./constants.js";const a=t=>{let r,o;return t.read((()=>{const n=t.getEditorState();o=n.toJSON(),r=e(t,null)})),{htmlString:r,json:o}},c=e=>{const a=t({namespace:"html-to-json",onError:console.error,theme:s,nodes:i});let c;if(a.update((()=>{const t=(new DOMParser).parseFromString(e,"text/html"),s=r(a,t);o().select();const i=n();if(i)try{i.insertNodes(s)}catch(t){c=t}}),{discrete:!0}),c)throw c;const l=a.getEditorState().toJSON();return JSON.stringify(l)},l=new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);function m(t){return"https://"===t||l.test(t)}export{c as DeserializeHTML,a as SerializeLexical,m as validateUrl};

package/esm/components/text-editor/__internal__/index.js

@@ -1 +1 @@
-export { default } from "./read-only-rte.component";
+export{default}from"./read-only-rte.component.js";

package/esm/components/text-editor/__internal__/plugins/AutoLinker/auto-link.component.js

@@ -1,27 +1 @@
-/* istanbul ignore file */
-/**
- * Owing to the nature of how this plugin runs, it is not possible to test it in isolation.
- * It is tested as part of the TextEditor Playwright tests.
- *
- * The AutoLinkerPlugin component is a wrapper around the AutoLinkPlugin component provided
- * by Lexical. It is used to automatically convert URLs and email addresses into clickable
- * links.
- *
- * The regular expressions used to match URLs and email addresses are provided as per the
- * Lexical documentation; as such not all edge cases may be covered.
- */
-import { AutoLinkPlugin, createLinkMatcherWithRegExp } from "@lexical/react/LexicalAutoLinkPlugin";
-import React from "react";
-const URL_REGEX = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
-const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
-const MATCHERS = [createLinkMatcherWithRegExp(URL_REGEX, text => {
-  return text.startsWith("http") ? text : `https://${text}`;
-}), createLinkMatcherWithRegExp(EMAIL_REGEX, text => {
-  return `mailto:${text}`;
-})];
-const AutoLinkerPlugin = () => {
-  return /*#__PURE__*/React.createElement(AutoLinkPlugin, {
-    matchers: MATCHERS
-  });
-};
-export default AutoLinkerPlugin;
+import{jsx as t}from"react/jsx-runtime";import{createLinkMatcherWithRegExp as a,AutoLinkPlugin as r}from"@lexical/react/LexicalAutoLinkPlugin";import"react";const e=[a(RegExp("((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])"),(t=>t.startsWith("http")?t:`https://${t}`)),a(/(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/,(t=>`mailto:${t}`))],i=()=>t(r,{matchers:e});export{i as default};

package/esm/components/text-editor/__internal__/plugins/AutoLinker/index.js

@@ -1 +1 @@
-export { default } from "./auto-link.component";
+export{default}from"./auto-link.component.js";

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/__test__/character-counter.component.js

@@ -1,32 +1 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { $getRoot } from "lexical";
-const CharacterCounterPlugin = ({
-  maxChars,
-  editor
-}) => {
-  const [rawContent, setRawContent] = useState("");
-
-  // Simplified update listener using Lexical v0.21.0 approach
-  useEffect(() => {
-    const removeListener = editor.registerUpdateListener(() => {
-      const editorState = editor.getEditorState();
-      editorState.read(() => {
-        const newContent = $getRoot().getTextContent();
-        setRawContent(newContent);
-      });
-    });
-    return () => {
-      removeListener();
-    };
-  }, [editor]);
-
-  // Calculate the number of characters remaining
-  const rawCharactersRemaining = useMemo(() => {
-    const activeCount = maxChars - (rawContent ? rawContent.length : 0);
-    return activeCount >= 0 ? activeCount : 0;
-  }, [maxChars, rawContent]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-role": "visible-counter"
-  }, rawCharactersRemaining));
-};
-export default CharacterCounterPlugin;
+import{jsx as t,Fragment as e}from"react/jsx-runtime";import{useState as r,useEffect as o,useMemo as n}from"react";import{$getRoot as i}from"lexical";const a=({maxChars:a,editor:c})=>{const[s,d]=r("");o((()=>{const t=c.registerUpdateListener((()=>{c.getEditorState().read((()=>{const t=i().getTextContent();d(t)}))}));return()=>{t()}}),[c]);const l=n((()=>{const t=a-(s?s.length:0);return t>=0?t:0}),[a,s]);return t(e,{children:t("div",{"data-role":"visible-counter",children:l})})};export{a as default};

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.component.js

@@ -1,58 +1 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getRoot } from "lexical";
-import { StyledCharacterCounter, VisuallyHiddenCharacterCounter } from "./character-counter.style";
-import useDebounce from "../../../../../hooks/__internal__/useDebounce";
-import useLocale from "../../../../../hooks/__internal__/useLocale";
-const CharacterCounterPlugin = ({
-  maxChars,
-  namespace
-}) => {
-  const [rawContent, setRawContent] = useState("");
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    // The character counter plugin listens for updates to the editor state
-    // independently to ensure updates do not conflict/interrupt other state
-    // changes
-    editor.registerUpdateListener(({
-      editorState
-    }) => {
-      editorState.read(() => {
-        const newContent = $getRoot().getTextContent();
-        setRawContent(newContent);
-      });
-    });
-  }, [editor]);
-
-  // Get the locale to enable translations
-  const locale = useLocale();
-
-  // Get the current locale and format the number
-  const getFormatNumber = useCallback(rawValue => {
-    return new Intl.NumberFormat(locale.locale()).format(rawValue);
-  }, [locale]);
-  const [debouncedValue, setDebouncedValue] = useState(0);
-
-  // Calculate the number of characters remaining
-  const rawCharactersRemaining = useMemo(() => {
-    // Calculate the number of characters remaining
-    const activeCount = maxChars - (rawContent ? rawContent.length : 0);
-    // Return the active count if it is greater than 0, otherwise return 0
-    return activeCount >= 0 ? activeCount : 0;
-  }, [rawContent, maxChars]);
-
-  // Use a debounced value to update the remaining character count for screen readers to use
-  /* istanbul ignore next */
-  const debouncedText = useDebounce(newValue => {
-    setDebouncedValue(newValue || 0);
-  }, 2000);
-  useEffect(() => {
-    debouncedText(rawCharactersRemaining);
-  }, [rawCharactersRemaining, debouncedText]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCharacterCounter, {
-    "data-role": `${namespace}-character-limit`
-  }, locale.textEditor.characterCounter(getFormatNumber(rawCharactersRemaining))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCounter, {
-    "aria-live": "polite"
-  }, locale.textEditor.characterCounter(getFormatNumber(debouncedValue))));
-};
-export default CharacterCounterPlugin;
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{useState as o,useEffect as a,useCallback as c,useMemo as n}from"react";import{useLexicalComposerContext as i}from"@lexical/react/LexicalComposerContext";import{$getRoot as l}from"lexical";import{StyledCharacterCounter as m,VisuallyHiddenCharacterCounter as s}from"./character-counter.style.js";import u from"../../../../../hooks/__internal__/useDebounce/useDebounce.js";import p from"../../../../../hooks/__internal__/useLocale/useLocale.js";const h=({maxChars:h,namespace:d})=>{const[x,f]=o(""),[_]=i();a((()=>{_.registerUpdateListener((({editorState:e})=>{e.read((()=>{const e=l().getTextContent();f(e)}))}))}),[_]);const C=p(),j=c((e=>new Intl.NumberFormat(C.locale()).format(e)),[C]),[L,b]=o(0),g=n((()=>{const e=h-(x?x.length:0);return e>=0?e:0}),[x,h]),k=u((e=>{b(e||0)}),2e3);return a((()=>{k(g)}),[g,k]),e(t,{children:[r(m,{"data-role":`${d}-character-limit`,children:C.textEditor.characterCounter(j(g))}),r(s,{"aria-live":"polite",children:C.textEditor.characterCounter(j(L))})]})};export{h as default};

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/character-counter.style.js

@@ -1,17 +1 @@
-import styled from "styled-components";
-import visuallyHidden from "../../../../../style/utils/visually-hidden";
-export const StyledCharacterCounter = styled.div`
-  text-align: left;
-  font-size: var(--fontSizes100);
-  margin-top: var(--spacing050);
-  margin-bottom: var(--spacing050);
-  color: var(--colorsUtilityYin055);
-`;
-export const VisuallyHiddenCharacterCounter = styled.div`
-  ::after {
-    content: " ";
-  }
-
-  ${visuallyHidden}
-`;
-export default StyledCharacterCounter;
+import t from"styled-components";import e from"../../../../../style/utils/visually-hidden.js";const o=t.div.withConfig({displayName:"character-counter.style__StyledCharacterCounter",componentId:"sc-6116dfd5-0"})(["text-align:left;font-size:var(--fontSizes100);margin-top:var(--spacing050);margin-bottom:var(--spacing050);color:var(--colorsUtilityYin055);"]),a=t.div.withConfig({displayName:"character-counter.style__VisuallyHiddenCharacterCounter",componentId:"sc-6116dfd5-1"})(['::after{content:" ";}',""],e);export{o as StyledCharacterCounter,a as VisuallyHiddenCharacterCounter,o as default};

package/esm/components/text-editor/__internal__/plugins/CharacterCounter/index.js

@@ -1 +1 @@
-export { default } from "./character-counter.component";
+export{default}from"./character-counter.component.js";