@carbon/react 1.68.0 → 1.69.0-rc.0

package/es/components/FileUploader/FileUploader.js

@@ -5,157 +5,137 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../../prop-types/types.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
+import { useId } from '../../internal/useId.js';
 import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-class FileUploader extends React__default.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      filenames: []
-    });
-    _defineProperty(this, "nodes", []);
-    _defineProperty(this, "uploaderButton", /*#__PURE__*/React__default.createRef());
-    _defineProperty(this, "handleChange", evt => {
+const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    accept,
+    buttonKind,
+    buttonLabel,
+    className,
+    disabled,
+    filenameStatus,
+    iconDescription,
+    labelDescription,
+    labelTitle,
+    multiple,
+    name,
+    onChange,
+    onClick,
+    onDelete,
+    size,
+    ...other
+  } = _ref;
+  const fileUploaderInstanceId = useId('file-uploader');
+  const [state, updateState] = useState({
+    fileNames: []
+  });
+  const nodes = [];
+  const prefix = usePrefix();
+  const handleChange = evt => {
+    evt.stopPropagation();
+    const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
+    updateState(prevState => ({
+      fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
+    }));
+    if (onChange) {
+      onChange(evt);
+    }
+  };
+  const handleClick = (evt, _ref2) => {
+    let {
+      index,
+      filenameStatus
+    } = _ref2;
+    if (filenameStatus === 'edit') {
       evt.stopPropagation();
-      const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
-      this.setState({
-        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
+      const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
+      updateState({
+        fileNames: filteredArray
       });
-      if (this.props.onChange) {
-        this.props.onChange(evt);
+      if (onDelete) {
+        onDelete(evt);
+        uploaderButton.current?.focus?.();
       }
-    });
-    _defineProperty(this, "handleClick", (evt, _ref) => {
-      let {
-        index,
-        filenameStatus
-      } = _ref;
-      if (filenameStatus === 'edit') {
-        evt.stopPropagation();
-        const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
-        this.setState({
-          filenames: filteredArray
+      onClick?.(evt);
+    }
+  };
+  const uploaderButton = /*#__PURE__*/React__default.createRef();
+  const classes = cx({
+    [`${prefix}--form-item`]: true,
+    [className]: className
+  });
+  const getHelperLabelClasses = baseClass => cx(baseClass, {
+    [`${prefix}--label-description--disabled`]: disabled
+  });
+  const selectedFileClasses = cx(`${prefix}--file__selected-file`, {
+    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes
+  }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
+    as: "h3",
+    className: getHelperLabelClasses(`${prefix}--file--label`)
+  }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
+    className: getHelperLabelClasses(`${prefix}--label-description`),
+    id: fileUploaderInstanceId
+  }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
+    innerRef: uploaderButton,
+    disabled: disabled,
+    labelText: buttonLabel,
+    multiple: multiple,
+    buttonKind: buttonKind,
+    onChange: handleChange,
+    disableLabelChanges: true,
+    accept: accept,
+    name: name,
+    size: size,
+    "aria-describedby": fileUploaderInstanceId
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--file-container`
+  }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
+    key: index,
+    className: selectedFileClasses,
+    ref: node => nodes[index] = node // eslint-disable-line
+  }, other), /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--file__state-container`
+  }, /*#__PURE__*/React__default.createElement(Filename, {
+    name: name,
+    iconDescription: iconDescription,
+    status: filenameStatus,
+    onKeyDown: evt => {
+      if (matches(evt, [Enter, Space])) {
+        handleClick(evt, {
+          index,
+          filenameStatus
         });
-        if (this.props.onDelete) {
-          this.props.onDelete(evt);
-          this.uploaderButton.current?.focus?.();
-        }
-        this.props.onClick?.(evt);
       }
-    });
-    _defineProperty(this, "clearFiles", () => {
-      // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
-      this.setState({
-        filenames: []
-      });
-    });
-  }
-  static getDerivedStateFromProps(_ref2, state) {
-    let {
+    },
+    onClick: evt => handleClick(evt, {
+      index,
       filenameStatus
-    } = _ref2;
-    const {
-      prevFilenameStatus
-    } = state;
-    return prevFilenameStatus === filenameStatus ? null : {
-      filenameStatus,
-      prevFilenameStatus: filenameStatus
-    };
-  }
-  render() {
-    const {
-      iconDescription,
-      buttonLabel = '',
-      buttonKind = 'primary',
-      disabled = false,
-      filenameStatus = 'uploading',
-      labelDescription,
-      labelTitle,
-      className,
-      multiple = false,
-      accept = [],
-      name,
-      size = 'md',
-      onDelete,
-      // eslint-disable-line
-      ...other
-    } = this.props;
-    const prefix = this.context;
-    const classes = cx({
-      [`${prefix}--form-item`]: true,
-      [className]: className
-    });
-    const getHelperLabelClasses = baseClass => cx(baseClass, {
-      [`${prefix}--label-description--disabled`]: disabled
-    });
-    const selectedFileClasses = cx(`${prefix}--file__selected-file`, {
-      [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-      [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
-    });
-    return /*#__PURE__*/React__default.createElement("div", _extends({
-      className: classes
-    }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
-      as: "h3",
-      className: getHelperLabelClasses(`${prefix}--file--label`)
-    }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`),
-      id: "description"
-    }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
-      innerRef: this.uploaderButton,
-      disabled: disabled,
-      labelText: buttonLabel,
-      multiple: multiple,
-      buttonKind: buttonKind,
-      onChange: this.handleChange,
-      disableLabelChanges: true,
-      accept: accept,
-      name: name,
-      size: size,
-      "aria-describedby": "description"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--file-container`
-    }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
-      key: index,
-      className: selectedFileClasses,
-      ref: node => this.nodes[index] = node // eslint-disable-line
-    }, other), /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
-      className: `${prefix}--file-filename`,
-      id: name
-    }, name), /*#__PURE__*/React__default.createElement("span", {
-      className: `${prefix}--file__state-container`
-    }, /*#__PURE__*/React__default.createElement(Filename, {
-      name: name,
-      iconDescription: iconDescription,
-      status: filenameStatus,
-      onKeyDown: evt => {
-        if (matches(evt, [Enter, Space])) {
-          this.handleClick(evt, {
-            index,
-            filenameStatus
-          });
-        }
-      },
-      onClick: evt => this.handleClick(evt, {
-        index,
-        filenameStatus
-      })
-    }))))));
-  }
-}
-_defineProperty(FileUploader, "propTypes", {
+    })
+  }))))));
+});
+FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
    */
@@ -221,7 +201,6 @@ _defineProperty(FileUploader, "propTypes", {
    * sizes.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
-});
-_defineProperty(FileUploader, "contextType", PrefixContext);
+};
 
 export { FileUploader as default };

package/es/components/IdPrefix/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { PropsWithChildren, ReactNode } from 'react';
+type IdPrefixProps = {
+    children?: ReactNode;
+    /**
+     * The value used to prefix the auto-generated id placed on some DOM elements
+     */
+    prefix?: string;
+};
+declare function IdPrefix({ children, prefix }: PropsWithChildren<IdPrefixProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace IdPrefix {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The value used to prefix the auto-generated id placed on some DOM elements
+         */
+        prefix: PropTypes.Requireable<string>;
+    };
+}
+export { IdPrefix };

package/es/components/Menu/MenuItem.js

@@ -347,9 +347,6 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
   });
   function handleClick(item, e) {
     setSelection(item);
-    if (onChange) {
-      onChange(e);
-    }
   }
   useEffect(() => {
     if (!context.state.hasIcons) {
@@ -374,7 +371,7 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     "aria-checked": item === selection,
     renderIcon: item === selection ? Checkmark : undefined,
     onClick: e => {
-      handleClick(item, e);
+      handleClick(item);
     }
   }))));
 });

package/es/components/MenuButton/index.d.ts

@@ -39,6 +39,10 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
      * Specify the tabIndex of the button.
      */
     tabIndex?: number;
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    menuTarget?: Element;
 }
 declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MenuButton };

package/es/components/MenuButton/index.js

@@ -18,6 +18,7 @@ import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
@@ -32,14 +33,21 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     size: size$1 = 'lg',
     menuAlignment = 'bottom',
     tabIndex = 0,
+    menuTarget,
     ...rest
   } = _ref;
+  // feature flag utilized to separate out only the dynamic styles from @floating-ui
+  // flag is turned on when collision detection (ie. flip, hide) logic is not desired
+  const enableOnlyFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId('MenuButton');
   const prefix = usePrefix();
   const triggerRef = useRef(null);
-  const middlewares = [flip({
-    crossAxis: false
-  })];
+  let middlewares = [];
+  if (!enableOnlyFloatingStyles) {
+    middlewares = [flip({
+      crossAxis: false
+    })];
+  }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(size({
       apply(_ref2) {
@@ -121,7 +129,8 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     mode: "basic",
     size: size$1,
     open: open,
-    onClose: handleClose
+    onClose: handleClose,
+    target: menuTarget
   }, children));
 });
 MenuButton.propTypes = {
@@ -160,7 +169,12 @@ MenuButton.propTypes = {
    * Specify the tabIndex of the button.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+
+  menuTarget: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 
 export { MenuButton };

package/es/components/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
@@ -125,11 +126,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [prevOpenProp, setPrevOpenProp] = useState(open);
   const [topItems, setTopItems] = useState([]);
   const [itemsCleared, setItemsCleared] = useState(false);
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -137,7 +139,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [flip({
+    middleware: [autoAlign && flip({
       crossAxis: false
     }), size({
       apply(_ref2) {
@@ -149,11 +151,11 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           width: `${rects.reference.width}px`
         });
       }
-    }), hide()],
+    }), autoAlign && hide()],
     whileElementsMounted: autoUpdate
   } : {});
   useLayoutEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -164,7 +166,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         }
       });
     }
-  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
+  }, [enableFloatingStyles, floatingStyles, refs.floating, middlewareData, open]);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
@@ -279,7 +281,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--multi-select--readonly`]: readOnly,
-    [`${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--multi-select--selectall`]: selectAll
   });
 
@@ -410,8 +412,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null
+  }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -438,7 +440,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: multiSelectFieldWrapperClasses,
-    ref: autoAlign ? refs.setReference : null
+    ref: enableFloatingStyles ? refs.setReference : null
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,

package/es/components/OverflowMenu/next/index.d.ts

@@ -38,6 +38,10 @@ interface OverflowMenuProps {
      * Specify how the trigger tooltip should be aligned.
      */
     tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    menuTarget?: Element;
 }
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export { OverflowMenu };

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

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import { useFloating, flip, autoUpdate } from '@floating-ui/react';
+import { useFeatureFlag } from '../../FeatureFlags/index.js';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';
 import '../../Menu/MenuItem.js';
@@ -30,14 +31,16 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     size = defaultSize,
     menuAlignment = 'bottom-start',
     tooltipAlignment,
+    menuTarget,
     ...rest
   } = _ref;
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     placement,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles ? {
     // Computing the position starts with initial positioning
     // via `placement`.
     placement: menuAlignment,
@@ -49,14 +52,16 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     // Middleware are executed as an in-between “middle” step of the
     // initial `placement` computation and eventual return of data for
     // rendering. Each middleware is executed in order.
-    middleware: [flip({
+    middleware: [autoAlign && flip({
       // An explicit array of placements to try if the initial
       // `placement` doesn’t fit on the axes in which overflow
       // is checked.
       fallbackPlacements: menuAlignment.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end']
     })],
     whileElementsMounted: autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   const id = useId('overflowmenu');
   const prefix = usePrefix();
@@ -70,21 +75,21 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     handleClose
   } = useAttachedMenu(triggerRef);
   useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       Object.keys(floatingStyles).forEach(style => {
         if (refs.floating.current) {
           refs.floating.current.style[style] = floatingStyles[style];
         }
       });
     }
-  }, [floatingStyles, autoAlign, refs.floating, open, placement, middlewareData]);
+  }, [floatingStyles, enableFloatingStyles, refs.floating, open, placement, middlewareData]);
   function handleTriggerClick() {
     if (triggerRef.current) {
       hookOnClick();
     }
   }
   const containerClasses = cx(className, `${prefix}--overflow-menu__container`, {
-    [`${prefix}--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: enableFloatingStyles
   });
   const menuClasses = cx(`${prefix}--overflow-menu__${menuAlignment}`);
   const triggerClasses = cx(`${prefix}--overflow-menu`, {
@@ -115,12 +120,13 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     className: menuClasses,
     id: id,
     size: size,
-    legacyAutoalign: !autoAlign,
+    legacyAutoalign: !enableFloatingStyles,
     open: open,
     onClose: handleClose,
     x: x,
     y: y,
-    label: label
+    label: label,
+    target: menuTarget
   }, children));
 });
 OverflowMenu.propTypes = {
@@ -156,7 +162,11 @@ OverflowMenu.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+  menuTarget: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 
 export { OverflowMenu };

package/es/components/PaginationNav/PaginationNav.js

@@ -213,7 +213,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   }
   function pageWouldBeHidden(page) {
     const startOffset = itemsDisplayedOnPage <= 4 && page > 1 ? 0 : 1;
-    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
+    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front || page === 0;
     const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
   }