carbon-react 153.7.1 → 154.0.0

package/lib/components/text-editor/text-editor.component.d.ts

@@ -23,10 +23,14 @@ export interface TextEditorProps extends MarginProps, TagProps {
     labelText: string;
     /** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
     namespace?: string;
+    /** The callback to fire when the editor loses focus */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when the Cancel button within the editor is pressed */
     onCancel?: () => void;
     /** The callback to fire when a change is registered within the editor */
     onChange?: (value: string, formattedValues: EditorFormattedValues) => void;
+    /** The callback to fire when the editor gains focus */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when a link is added into the editor */
     onLinkAdded?: (link: string, state: string) => void;
     /** The callback to fire when the Save button within the editor is pressed */
@@ -46,5 +50,5 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** The initial value of the editor, as a HTML string, or JSON */
     value?: string | undefined;
 }
-export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onCancel, onChange, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
+export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onBlur, onCancel, onChange, onFocus, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
 export default TextEditor;

package/lib/components/text-editor/text-editor.component.js

@@ -17,7 +17,6 @@ var _lexical = require("lexical");
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("./__internal__/helpers");
 var _label = _interopRequireDefault(require("../../__internal__/label"));
-var _useDebounce = _interopRequireDefault(require("../../hooks/__internal__/useDebounce"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _constants = require("./__internal__/constants");
@@ -42,8 +41,10 @@ const TextEditor = ({
   isOptional = false,
   labelText,
   namespace = _constants.COMPONENT_PREFIX,
+  onBlur,
   onCancel,
   onChange,
+  onFocus,
   onLinkAdded,
   onSave,
   placeholder,
@@ -82,7 +83,6 @@ const TextEditor = ({
     return cleanup;
   }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = (0, _react.useState)(false);
-  const debounceWaitTime = 500;
   const initialConfig = (0, _react.useMemo)(() => {
     return {
       namespace,
@@ -96,7 +96,7 @@ const TextEditor = ({
 
   // OnChangePlugin is tested separately
   /* istanbul ignore next */
-  const handleChange = (0, _useDebounce.default)(newState => {
+  const handleChange = (0, _react.useCallback)(newState => {
     const currentTextContent = newState.read(() => (0, _lexical.$getRoot)().getTextContent());
     if (onChange) {
       const formattedValues = editorRef.current ? (0, _helpers.SerializeLexical)(editorRef.current) : {};
@@ -109,11 +109,10 @@ const TextEditor = ({
       // If the character limit has been exceeded, show the character limit warning
       setCharacterLimitWarning(currentDiff < 0 ? locale.textEditor.characterLimit(Math.abs(currentDiff)) : undefined);
     }
-  }, debounceWaitTime);
+  }, [characterLimit, locale.textEditor, onChange]);
   const handleCancel = (0, _react.useCallback)(() => {
-    const editor = editorRef.current;
     /* istanbul ignore next */
-    const isEditable = editor?.isEditable() || false;
+    const isEditable = editorRef.current?.isEditable() || false;
     /* istanbul ignore if */
     if (!isEditable) return;
 
@@ -126,13 +125,12 @@ const TextEditor = ({
 
   // Reset the value of the editor when the cancel trigger is updated (implements reset on cancel)
   (0, _react.useEffect)(() => {
-    const editor = editorRef.current;
     const safeValue = value || (0, _utils.createEmpty)();
 
     /* istanbul ignore else */
-    if (editor) {
-      const newEditorState = editor.parseEditorState(safeValue);
-      editor.setEditorState(newEditorState);
+    if (editorRef.current) {
+      const newEditorState = editorRef.current.parseEditorState(safeValue);
+      editorRef.current.setEditorState(newEditorState);
     }
   }, [cancelTrigger, value]);
   const toolbarProps = (0, _react.useMemo)(() => ({
@@ -141,7 +139,17 @@ const TextEditor = ({
     onSave
   }), [handleCancel, namespace, onCancel, onSave]);
   return /*#__PURE__*/_react.default.createElement(_textEditor2.StyledTextEditorWrapper, _extends({
-    "data-role": `${namespace}-editor-wrapper`
+    "data-role": `${namespace}-editor-wrapper`,
+    onBlur: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onBlur?.(ev);
+      }
+    },
+    onFocus: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onFocus?.(ev);
+      }
+    }
   }, (0, _utils2.filterStyledSystemMarginProps)(rest), (0, _tags.default)("text-editor", rest)), /*#__PURE__*/_react.default.createElement(_textEditor.default.Provider, {
     value: {
       onLinkAdded

package/lib/components/tile/__internal__/tile.context.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { PaddingProps } from "styled-system";
-interface TileContextProps {
-    isHorizontal?: boolean;
+interface TileContextType {
+    isHorizontal: boolean;
     paddingPropsFromTile: PaddingProps;
 }
-declare const _default: import("react").Context<TileContextProps>;
-export default _default;
+declare const TileProvider: import("react").Provider<TileContextType | null>, useTileContext: () => TileContextType;
+export { TileProvider, useTileContext };

package/lib/components/tile/__internal__/tile.context.js

@@ -3,8 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = require("react");
-var _default = exports.default = /*#__PURE__*/(0, _react.createContext)({
-  paddingPropsFromTile: {}
-});
+exports.useTileContext = exports.TileProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [TileProvider, useTileContext] = (0, _createStrictContext.default)({
+  name: "TileContext",
+  errorMessage: "Carbon Tile: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    paddingPropsFromTile: {},
+    isHorizontal: false
+  }
+});
+exports.useTileContext = useTileContext;
+exports.TileProvider = TileProvider;

package/lib/components/tile/tile-content/tile-content.component.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _tileContent = _interopRequireDefault(require("./tile-content.style"));
-var _tile = _interopRequireDefault(require("../__internal__/tile.context"));
+var _tile = require("../__internal__/tile.context");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-margin-props"));
 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; }
 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); }
 const TileContent = ({
   children,
@@ -23,7 +21,7 @@ const TileContent = ({
   const {
     isHorizontal,
     paddingPropsFromTile
-  } = (0, _react.useContext)(_tile.default);
+  } = (0, _tile.useTileContext)();
   if (!children) {
     return null;
   }

package/lib/components/tile/tile.component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Tile = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tile = _interopRequireDefault(require("./tile.style"));
-var _tile2 = _interopRequireDefault(require("./__internal__/tile.context"));
+var _tile2 = require("./__internal__/tile.context");
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-margin-props"));
 var _computeContentPadding = _interopRequireDefault(require("./__internal__/compute-content-padding"));
@@ -43,7 +43,7 @@ const Tile = ({
     highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
-  }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tile2.default.Provider, {
+  }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tile2.TileProvider, {
     value: {
       isHorizontal,
       paddingPropsFromTile: contentPaddingProps

package/lib/components/vertical-menu/__internal__/vertical-menu.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface VerticalMenuContextType {
+    isFullScreen: boolean;
+}
+declare const VerticalMenuProvider: import("react").Provider<VerticalMenuContextType | null>, useVerticalMenuContext: () => VerticalMenuContextType;
+export { VerticalMenuProvider, useVerticalMenuContext };

package/lib/components/vertical-menu/__internal__/vertical-menu.context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVerticalMenuContext = exports.VerticalMenuProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [VerticalMenuProvider, useVerticalMenuContext] = (0, _createStrictContext.default)({
+  name: "VerticalMenuContext",
+  errorMessage: "Carbon VerticalMenu: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    isFullScreen: false
+  }
+});
+exports.useVerticalMenuContext = useVerticalMenuContext;
+exports.VerticalMenuProvider = VerticalMenuProvider;

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -13,7 +13,7 @@ var _iconButton = _interopRequireDefault(require("../../icon-button"));
 var _icon = _interopRequireDefault(require("../../icon"));
 var _box = _interopRequireDefault(require("../../box"));
 var _verticalMenu = require("../vertical-menu.style");
-var _verticalMenuFullScreen = _interopRequireDefault(require("./__internal__/vertical-menu-full-screen.context"));
+var _verticalMenu2 = require("../__internal__/vertical-menu.context");
 var _globals = require("../../../__internal__/dom/globals");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
@@ -73,7 +73,7 @@ const VerticalMenuFullScreen = ({
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",
     color: "var(--colorsComponentsLeftnavWinterStandardContent)"
-  }))), /*#__PURE__*/_react.default.createElement(_verticalMenuFullScreen.default.Provider, {
+  }))), /*#__PURE__*/_react.default.createElement(_verticalMenu2.VerticalMenuProvider, {
     value: {
       isFullScreen: true
     }

package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js

@@ -7,9 +7,9 @@ exports.default = exports.VerticalMenuItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _utils = require("../../../style/utils");
-var _verticalMenuFullScreen = _interopRequireDefault(require("../vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context"));
 var _verticalMenu = require("../vertical-menu.style");
 var _menuItem = _interopRequireDefault(require("./__internal__/menu-item.context"));
+var _verticalMenu2 = require("../__internal__/vertical-menu.context");
 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; }
@@ -35,7 +35,7 @@ const VerticalMenuItem = ({
   } = (0, _react.useContext)(_menuItem.default);
   const {
     isFullScreen
-  } = (0, _react.useContext)(_verticalMenuFullScreen.default);
+  } = (0, _verticalMenu2.useVerticalMenuContext)();
   const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
   const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
   let itemProps = {};

package/lib/components/vertical-menu/vertical-menu.component.js

@@ -7,6 +7,7 @@ exports.default = exports.VerticalMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _verticalMenu = require("./vertical-menu.style");
+var _verticalMenu2 = require("./__internal__/vertical-menu.context");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const VerticalMenu = ({
@@ -28,7 +29,11 @@ const VerticalMenu = ({
     overflow: "auto",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, (0, _tags.default)("vertical-menu", rest)), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, children));
+  }, (0, _tags.default)("vertical-menu", rest)), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, /*#__PURE__*/_react.default.createElement(_verticalMenu2.VerticalMenuProvider, {
+    value: {
+      isFullScreen: false
+    }
+  }, children)));
 };
 exports.VerticalMenu = VerticalMenu;
 var _default = exports.default = VerticalMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.7.1",
+  "version": "154.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const VerticalMenuFullScreenContext: React.Context<{
-    isFullScreen: boolean;
-}>;
-export default VerticalMenuFullScreenContext;

package/esm/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.js

@@ -1,5 +0,0 @@
-import React from "react";
-const VerticalMenuFullScreenContext = /*#__PURE__*/React.createContext({
-  isFullScreen: false
-});
-export default VerticalMenuFullScreenContext;

package/lib/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const VerticalMenuFullScreenContext: React.Context<{
-    isFullScreen: boolean;
-}>;
-export default VerticalMenuFullScreenContext;

package/lib/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const VerticalMenuFullScreenContext = /*#__PURE__*/_react.default.createContext({
-  isFullScreen: false
-});
-var _default = exports.default = VerticalMenuFullScreenContext;