@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/NumberInput/NumberInput.js

@@ -22,6 +22,11 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 require('../Text/index.js');
 var clamp = require('../../internal/clamp.js');
+var useControllableState = require('../../internal/useControllableState.js');
+var utilities = require('@carbon/utilities');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
+var NumberFormatPropTypes = require('./NumberFormatPropTypes.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -52,25 +57,30 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     disabled = false,
     disableWheel: disableWheelProp = false,
     defaultValue = 0,
+    formatOptions,
     helperText = '',
     hideLabel = false,
     hideSteppers,
     iconDescription,
     id,
-    label,
+    inputMode,
     invalid = false,
     invalidText,
+    label,
     light,
+    locale = 'en-US',
     max,
     min,
     onChange,
     onClick,
     onKeyUp,
+    pattern = '[0-9]*',
     readOnly,
     size = 'md',
     slug,
     step = 1,
     translateWithId: t = id => defaultTranslations[id],
+    type = 'number',
     warn = false,
     warnText = '',
     value: controlledValue,
@@ -81,6 +91,10 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
+
+  /**
+   * The input value, only used when type=number
+   */
   const [value, setValue] = React.useState(() => {
     if (controlledValue !== undefined) {
       return controlledValue;
@@ -94,6 +108,30 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     return 0;
   });
   const [prevControlledValue, setPrevControlledValue] = React.useState(controlledValue);
+  const numberParser = React.useMemo(() => new utilities.NumberParser(locale, formatOptions), [locale, formatOptions]);
+  /**
+   * The currently parsed number value.
+   * Only used when type=text
+   * Updated based on the `value` as the user types.
+   */
+  const [numberValue, setNumberValue, isControlled] = useControllableState.useControllableState({
+    name: 'NumberInput',
+    defaultValue: typeof defaultValue === 'string' ? numberParser.parse(defaultValue) : defaultValue,
+    value: typeof controlledValue === 'string' ? numberParser.parse(controlledValue) : controlledValue
+  });
+
+  /**
+   * The current text value of the input.
+   * Only used when type=text
+   * Updated as the user types and formatted on blur.
+   */
+  const [inputValue, setInputValue] = React__default["default"].useState(() => isNaN(numberValue) ? '' : new utilities.NumberFormatter(locale, formatOptions).format(numberValue));
+  const numberingSystem = React.useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);
+  const numberFormatter = React.useMemo(() => new utilities.NumberFormatter(locale, {
+    ...formatOptions,
+    numberingSystem
+  }), [locale, formatOptions, numberingSystem]);
+  const format = React.useCallback(value => isNaN(value) || value === null ? '' : numberFormatter.format(value), [numberFormatter]);
   const inputRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
   const numberInputClasses = cx__default["default"]({
@@ -108,7 +146,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
   const isInputValid = getInputValidity({
     allowEmpty,
     invalid,
-    value,
+    value: type === 'number' ? value : numberValue,
     max,
     min
   });
@@ -150,13 +188,24 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     if (disabled) {
       return;
     }
-    const state = {
-      value: allowEmpty && event.target.value === '' ? '' : Number(event.target.value),
-      direction: value < event.target.value ? 'up' : 'down'
-    };
-    setValue(state.value);
-    if (onChange) {
-      onChange(event, state);
+    if (type === 'number') {
+      const state = {
+        value: allowEmpty && event.target.value === '' ? '' : Number(event.target.value),
+        direction: value < event.target.value ? 'up' : 'down'
+      };
+      setValue(state.value);
+      if (onChange) {
+        onChange(event, state);
+      }
+      return;
+    }
+    if (type === 'text') {
+      const _value = allowEmpty && event.target.value === '' ? '' : event.target.value;
+      setNumberValue(numberParser.parse(_value));
+      setInputValue(_value);
+      // The onChange prop isn't called here because it will be called on blur
+      // or on click of a stepper, after the number is parsed and formatted
+      // according to the locale.
     }
   }
   const handleFocus = evt => {
@@ -178,21 +227,44 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     const parts = num.toString().split('.');
     return parts[1] ? parts[1].length : 0;
   };
-  const handleStepperClick = (event, direction) => {
+  const handleStep = (event, direction) => {
     if (inputRef.current) {
-      const currentValue = Number(inputRef.current.value);
+      const currentValue = type === 'number' ? Number(inputRef.current.value) : numberParser.parse(inputRef.current.value);
       const rawValue = direction === 'up' ? currentValue + step : currentValue - step;
       const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
       const floatValue = parseFloat(rawValue.toFixed(precision));
       const newValue = clamp.clamp(floatValue, min ?? -Infinity, max ?? Infinity);
-      const state = {
-        value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : newValue,
-        direction
-      };
-      setValue(state.value);
+      let state;
+      if (type === 'number') {
+        state = {
+          value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : newValue,
+          direction
+        };
+        setValue(state.value);
+      }
+      if (type === 'text') {
+        const formattedNewValue = format(newValue);
+        state = {
+          value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : formattedNewValue,
+          direction
+        };
+
+        // newValue does not need to be parsed because it is derived from
+        // currentValue, which is parsed at the beginning of this function
+        setNumberValue(newValue);
+        setInputValue(formattedNewValue);
+      }
       if (onChange) {
         onChange(event, state);
       }
+      return state;
+    }
+  };
+  const handleStepperClick = (event, direction) => {
+    if (inputRef.current) {
+      const {
+        state
+      } = handleStep(event, direction);
       if (onClick) {
         onClick(event, state);
       }
@@ -244,6 +316,15 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     onClick: onClick,
     onChange: handleOnChange,
     onKeyUp: onKeyUp,
+    onKeyDown: e => {
+      if (type === 'text') {
+        match.match(e, keys.ArrowUp) && handleStep(e, 'up');
+        match.match(e, keys.ArrowDown) && handleStep(e, 'down');
+      }
+      if (rest?.onKeyDown) {
+        rest?.onKeyDown(e);
+      }
+    },
     onFocus: e => {
       if (disableWheelProp) {
         e.target.addEventListener('wheel', disableWheel);
@@ -256,15 +337,32 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
+      if (type === 'text') {
+        // When isControlled, the current inputValue needs re-parsed
+        // because the consumer's onChange hasn't been called yet and
+        // the `numberValue` we have in state is the (stale) value
+        // they've passed in.
+        const _numberValue = isControlled ? numberParser.parse(inputValue) : numberValue;
+        const formattedValue = isNaN(_numberValue) ? '' : format(_numberValue);
+        setInputValue(formattedValue);
+        if (onChange) {
+          const state = {
+            value: formattedValue,
+            direction: value < e.target.value ? 'up' : 'down'
+          };
+          onChange(e, state);
+        }
+      }
       if (rest.onBlur) {
         rest.onBlur(e);
       }
     },
-    pattern: "[0-9]*",
+    pattern: pattern,
+    inputMode: inputMode,
     readOnly: readOnly,
     step: step,
-    type: "number",
-    value: value
+    type: type,
+    value: type === 'number' ? value : inputValue
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--number__input-inner-wrapper--decorator`
   }, normalizedDecorator) : '', Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -321,13 +419,20 @@ NumberInput.propTypes = {
    */
   defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   /**
-   * Specify if the wheel functionality for the input should be disabled, or not
+   * Specify if the wheel functionality for the input should be disabled, or no t
    */
   disableWheel: PropTypes__default["default"].bool,
   /**
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * **Experimental:** Specify Intl.NumberFormat options applied to internal
+   * number parsing and formatting. Use with `type="text"`, has no effect when
+   * `type="number"`.
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+   */
+  formatOptions: NumberFormatPropTypes.NumberFormatOptionsPropType,
   /**
    * Provide text that is used alongside the control label for additional help
    */
@@ -348,6 +453,12 @@ NumberInput.propTypes = {
    * Specify a custom `id` for the input
    */
   id: PropTypes__default["default"].string.isRequired,
+  /**
+   * Instruct the browser which keyboard to display on mobile devices. Note that
+   * standard numeric keyboards vary across devices and operating systems.
+   * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
+   */
+  inputMode: PropTypes__default["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   /**
    * Specify if the currently value is invalid.
    */
@@ -365,6 +476,12 @@ NumberInput.propTypes = {
    * `true` to use the light version.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `NumberInput` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
+  /**
+   * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
+   * language code for parsing and formatting. Use with `type="text"`, has no
+   * effect when `type="number"`.
+   */
+  locale: PropTypes__default["default"].string,
   /**
    * The maximum value.
    */
@@ -376,6 +493,9 @@ NumberInput.propTypes = {
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.
+   * When type="number", this is called on every change of the input.
+   * When type="text", this is only called on blur after the number has been
+   * parsed and formatted.
    * `(event, { value, direction }) => void`
    */
   onChange: PropTypes__default["default"].func,
@@ -387,6 +507,11 @@ NumberInput.propTypes = {
    * Provide an optional function to be called when a key is pressed in the number input
    */
   onKeyUp: PropTypes__default["default"].func,
+  /**
+   * When type="text", provide an optional pattern to restrict user input. Has
+   * no effect when type="number".
+   */
+  pattern: PropTypes__default["default"].string,
   /**
    * Specify if the component should be read-only
    */
@@ -396,17 +521,25 @@ NumberInput.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
   /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `NumberInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the
+   * `NumberInput` component
    */
   slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `NumberInput` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `decorator` prop. It will be moved in the next major release.'),
   /**
-   * Specify how much the values should increase/decrease upon clicking on up/down button
+   * Specify how much the values should increase/decrease upon clicking on
+   * up/down button
    */
   step: PropTypes__default["default"].number,
   /**
    * Provide custom text for the component for each translation id
    */
   translateWithId: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: Specify if the input should be of type text or number.
+   * Use type="text" with `locale`, `formatOptions`, and guide user input with
+   * `pattern` and `inputMode`.
+   */
+  type: PropTypes__default["default"].oneOf(['number', 'text']),
   /**
    * Specify the value of the input
    */
@@ -420,13 +553,12 @@ NumberInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-const Label = _ref => {
-  let {
-    disabled,
-    id,
-    hideLabel,
-    label
-  } = _ref;
+const Label = ({
+  disabled,
+  id,
+  hideLabel,
+  label
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--label`]: true,
@@ -448,12 +580,11 @@ Label.propTypes = {
   id: PropTypes__default["default"].string,
   label: PropTypes__default["default"].node
 };
-function HelperText(_ref2) {
-  let {
-    disabled,
-    description,
-    id
-  } = _ref2;
+function HelperText({
+  disabled,
+  description,
+  id
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -486,14 +617,13 @@ HelperText.propTypes = {
  * @param {number} config.min
  * @returns {boolean}
  */
-function getInputValidity(_ref3) {
-  let {
-    allowEmpty,
-    invalid,
-    value,
-    max,
-    min
-  } = _ref3;
+function getInputValidity({
+  allowEmpty,
+  invalid,
+  value,
+  max,
+  min
+}) {
   if (invalid) {
     return false;
   }

package/lib/components/OrderedList/OrderedList.js

@@ -21,14 +21,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function OrderedList(_ref) {
-  let {
-    className,
-    nested = false,
-    native = false,
-    isExpressive = false,
-    ...other
-  } = _ref;
+function OrderedList({
+  className,
+  nested = false,
+  native = false,
+  isExpressive = false,
+  ...other
+}) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--list--ordered`]: !native,

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -106,7 +106,7 @@ export interface OverflowMenuProps {
      */
     selectorPrimaryFocus?: string;
     /**
-     * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     * Specify the size of the OverflowMenu. Currently supports either `sm`, `md` (default) or `lg` as an option.
      */
     size?: 'sm' | 'md' | 'lg';
     /**

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -36,10 +36,7 @@ var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const getInstanceId = setupGetInstanceId.setupGetInstanceId();
-const on = function (target) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
+const on = (target, ...args) => {
   target.addEventListener(...args);
   return {
     release() {
@@ -102,33 +99,32 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
-const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    align,
-    ['aria-label']: ariaLabel = null,
-    ariaLabel: deprecatedAriaLabel,
-    children,
-    className,
-    direction = FloatingMenu.DIRECTION_BOTTOM,
-    flipped = false,
-    focusTrap = true,
-    iconClass,
-    iconDescription = 'Options',
-    id,
-    light,
-    menuOffset = getMenuOffset,
-    menuOffsetFlip = getMenuOffset,
-    menuOptionsClass,
-    onClick = noopFn.noopFn,
-    onClose = noopFn.noopFn,
-    onOpen = noopFn.noopFn,
-    open: openProp,
-    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
-    selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
-    size = 'md',
-    innerRef,
-    ...other
-  } = _ref;
+const OverflowMenu = /*#__PURE__*/React.forwardRef(({
+  align,
+  ['aria-label']: ariaLabel = null,
+  ariaLabel: deprecatedAriaLabel,
+  children,
+  className,
+  direction = FloatingMenu.DIRECTION_BOTTOM,
+  flipped = false,
+  focusTrap = true,
+  iconClass,
+  iconDescription = 'Options',
+  id,
+  light,
+  menuOffset = getMenuOffset,
+  menuOffsetFlip = getMenuOffset,
+  menuOptionsClass,
+  onClick = noopFn.noopFn,
+  onClose = noopFn.noopFn,
+  onOpen = noopFn.noopFn,
+  open: openProp,
+  renderIcon: IconElement = iconsReact.OverflowMenuVertical,
+  selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
+  size = 'md',
+  innerRef,
+  ...other
+}, ref) => {
   const prefix = React.useContext(usePrefix.PrefixContext);
   const [open, setOpen] = React.useState(openProp ?? false);
   const [click, setClick] = React.useState(false);
@@ -166,10 +162,9 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     prevOpenState.current = open;
   }, [open, onClose]);
-  useOutsideClick.useOutsideClick(wrapperRef, _ref2 => {
-    let {
-      target
-    } = _ref2;
+  useOutsideClick.useOutsideClick(wrapperRef, ({
+    target
+  }) => {
     if (open && (!menuBodyRef.current || target instanceof Node && !menuBodyRef.current.contains(target))) {
       closeMenu();
     }
@@ -229,11 +224,10 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
    * Focuses the next enabled overflow menu item given the currently focused
    * item index and direction to move.
    */
-  const handleOverflowMenuItemFocus = _ref3 => {
-    let {
-      currentIndex = 0,
-      direction
-    } = _ref3;
+  const handleOverflowMenuItemFocus = ({
+    currentIndex = 0,
+    direction
+  }) => {
     const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
       if (/*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
         acc.push(i);
@@ -480,7 +474,7 @@ OverflowMenu.propTypes = {
    */
   selectorPrimaryFocus: PropTypes__default["default"].string,
   /**
-   * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the OverflowMenu. Currently supports either `sm`, `md` (default) or `lg` as an option.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 };

package/lib/components/OverflowMenu/next/index.js

@@ -33,19 +33,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const defaultSize = 'md';
-const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
-  let {
-    autoAlign = false,
-    children,
-    className,
-    label = 'Options',
-    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
-    size = defaultSize,
-    menuAlignment = 'bottom-start',
-    tooltipAlignment,
-    menuTarget,
-    ...rest
-  } = _ref;
+const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu({
+  autoAlign = false,
+  children,
+  className,
+  label = 'Options',
+  renderIcon: IconElement = iconsReact.OverflowMenuVertical,
+  size = defaultSize,
+  menuAlignment = 'bottom-start',
+  tooltipAlignment,
+  menuTarget,
+  ...rest
+}, forwardRef) {
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,

package/lib/components/PageHeader/PageHeader.d.ts

@@ -23,8 +23,32 @@ declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & Reac
  * -----------------------
  */
 interface PageHeaderBreadcrumbBarProps {
+    /**
+     * `true` by default to render BreadcrumbBar bottom border.
+     */
+    border?: Boolean;
     children?: React.ReactNode;
     className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderBreadcrumbBar's content actions
+     */
+    contentActions?: React.ReactNode;
+    /**
+     * `true` to set content actions flush against page actions
+     */
+    contentActionsFlush?: Boolean;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+    /**
+     * `true` to set page actions flush with page
+     */
+    pageActionsFlush?: Boolean;
 }
 declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 /**
@@ -80,10 +104,10 @@ interface PageHeaderContentPageActionsProps {
     /**
      * The PageHeaderContent's page actions
      */
-    pageActions?: React.ReactNode;
+    actions?: React.ReactNode;
 }
 declare const PageHeaderContentPageActions: {
-    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -101,7 +125,7 @@ declare const PageHeaderContentPageActions: {
         /**
          * The PageHeaderContent's page actions
          */
-        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
     };
 };
 /**
@@ -194,7 +218,7 @@ declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefA
 declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const ContentPageActions: {
-    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -212,7 +236,7 @@ declare const ContentPageActions: {
         /**
          * The PageHeaderContent's page actions
          */
-        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
     };
 };
 declare const ContentText: {