carbon-react 106.3.1 → 106.4.1

package/esm/components/pager/pager.style.d.ts

@@ -3,7 +3,7 @@ export const StyledPagerSizeOptions: import("styled-components").StyledComponent
 export const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledPagerLinkStyles: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
+export const StyledPagerLinkStyles: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledPagerNoSelect: import("styled-components").StyledComponent<"span", any, {}, never>;
 export const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/pod/pod.style.d.ts

@@ -1,6 +1,6 @@
 export const StyledBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
+export const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledActionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDeleteButton: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const StyledUndoButton: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;

package/esm/components/radio-button/radio-button-svg.component.js

@@ -1,35 +1,22 @@
 import React from "react";
-import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 
 const RadioButtonSvg = () => {
-  return /*#__PURE__*/ React.createElement(
-    StyledCheckableInputSvgWrapper,
-    null,
-    /*#__PURE__*/ React.createElement(
-      "svg",
-      {
-        focusable: "false",
-        viewBox: "0 0 15 15",
-      },
-      /*#__PURE__*/ React.createElement(
-        "g",
-        {
-          stroke: "none",
-          strokeWidth: "1",
-          fill: "none",
-          fillRule: "evenodd",
-        },
-        /*#__PURE__*/ React.createElement("circle", {
-          className: "radio-button-check",
-          fill: "#FFFFFF",
-          cx: "7.5",
-          cy: "7.5",
-          r: "5",
-        })
-      )
-    )
-  );
+  return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    viewBox: "0 0 15 15"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "radio-button-check",
+    fill: "#FFFFFF",
+    cx: "7.5",
+    cy: "7.5",
+    r: "5"
+  }))));
 };
 
-export default /*#__PURE__*/ React.memo(RadioButtonSvg, () => true);
+export default /*#__PURE__*/React.memo(RadioButtonSvg, () => true);

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -10,6 +10,7 @@ import withFilter from "../utils/with-filter.hoc";
 import StyledSelect from "../select.style";
 import SelectList from "../select-list/select-list.component";
 import isExpectedOption from "../utils/is-expected-option";
+import isNavigationKey from "../utils/is-navigation-key";
 const FilterableSelectList = withFilter(SelectList);
 const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   value,
@@ -386,10 +387,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     };
   }
 
-  function isNavigationKey(key) {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
-  }
-
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,

package/esm/components/select/multi-select/multi-select.component.js

@@ -12,6 +12,7 @@ import { StyledSelectPillContainer, StyledSelectMultiSelect, StyledAccessibility
 import Pill from "../../pill";
 import isExpectedOption from "../utils/is-expected-option";
 import isExpectedValue from "../utils/is-expected-value";
+import isNavigationKey from "../utils/is-navigation-key";
 const FilterableSelectList = withFilter(SelectList);
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
   value,
@@ -401,10 +402,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     };
   }
 
-  function isNavigationKey(key) {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
-  }
-
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     "aria-multiselectable": true,

package/esm/components/select/select-list/select-list.component.js

@@ -9,6 +9,7 @@ import OptionRow from "../option-row/option-row.component";
 import updateListScrollTop from "./update-list-scroll";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import getNextIndexByKey from "../utils/get-next-index-by-key";
+import isNavigationKey from "../utils/is-navigation-key";
 import ListActionButton from "../list-action-button/list-action-button.component";
 import StyledSelectListContainer from "./select-list-container.style";
 import Loader from "../../loader";
@@ -276,10 +277,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     enabled: flipEnabled
   }], [flipEnabled]);
 
-  function isNavigationKey(keyEvent) {
-    return keyEvent === "ArrowDown" || keyEvent === "ArrowUp" || keyEvent === "Home" || keyEvent === "End";
-  }
-
   const loader = () => /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader",
     as: multiColumn ? "div" : "li"

package/esm/components/select/simple-select/simple-select.component.js

@@ -11,6 +11,7 @@ import SelectList from "../select-list/select-list.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import isExpectedOption from "../utils/is-expected-option";
+import isNavigationKey from "../utils/is-navigation-key";
 const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   value,
   defaultValue,
@@ -285,10 +286,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     setOpenState(false);
   }
 
-  function isNavigationKey(key) {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
-  }
-
   function assignInput(input) {
     setTextboxRef(input.current);
 

package/esm/components/select/utils/get-next-index-by-key.d.ts

@@ -1 +1,2 @@
 export default function getNextIndexByKey(key: any, currentIndex: any, lastIndex: any, isLoading: any): any;
+export const PAGE_SIZE: 4;

package/esm/components/select/utils/get-next-index-by-key.js

@@ -1,27 +1,59 @@
+export const PAGE_SIZE = 4;
 export default function getNextIndexByKey(key, currentIndex, lastIndex, isLoading) {
   const isNoOptionSelected = currentIndex === -1;
   let newIndex = currentIndex;
 
-  if (key === "Home") {
-    newIndex = 0;
-  } else if (key === "End") {
-    newIndex = lastIndex;
-  } else if (key === "ArrowDown") {
-    if (isLoading && currentIndex === lastIndex) {
-      return lastIndex;
-    }
-
-    if (currentIndex === lastIndex || isNoOptionSelected) {
+  switch (key) {
+    case "Home":
       newIndex = 0;
-    } else {
-      newIndex = currentIndex + 1;
-    }
-  } else if (key === "ArrowUp") {
-    if (currentIndex === 0 || isNoOptionSelected) {
+      break;
+
+    case "End":
       newIndex = lastIndex;
-    } else {
-      newIndex = currentIndex - 1;
-    }
+      break;
+
+    case "ArrowDown":
+      if (isLoading && currentIndex === lastIndex) {
+        return lastIndex;
+      }
+
+      if (currentIndex === lastIndex || isNoOptionSelected) {
+        newIndex = 0;
+      } else {
+        newIndex = currentIndex + 1;
+      }
+
+      break;
+
+    case "ArrowUp":
+      if (currentIndex === 0 || isNoOptionSelected) {
+        newIndex = lastIndex;
+      } else {
+        newIndex = currentIndex - 1;
+      }
+
+      break;
+
+    case "PageDown":
+      if (isNoOptionSelected) {
+        newIndex = Math.min(PAGE_SIZE - 1, lastIndex);
+      } else {
+        newIndex = Math.min(currentIndex + PAGE_SIZE, lastIndex);
+      }
+
+      break;
+
+    case "PageUp":
+      if (isNoOptionSelected) {
+        newIndex = Math.max(lastIndex + 1 - PAGE_SIZE, 0);
+      } else {
+        newIndex = Math.max(currentIndex - PAGE_SIZE, 0);
+      }
+
+      break;
+
+    default:
+      break;
   }
 
   return newIndex;

package/esm/components/select/utils/is-navigation-key.d.ts

@@ -0,0 +1 @@
+export default function isNavigationKey(key: any): boolean;

package/esm/components/select/utils/is-navigation-key.js

@@ -0,0 +1,4 @@
+export default function isNavigationKey(key) {
+  const navigationKeys = ["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"];
+  return navigationKeys.includes(key);
+}

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.d.ts

@@ -1,2 +1,2 @@
 export default StyledEditorLink;
-declare const StyledEditorLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
+declare const StyledEditorLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../link").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;

package/esm/components/tooltip/tooltip.component.js

@@ -1,19 +1,4 @@
-function _extends() {
-  _extends =
-    Object.assign ||
-    function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-  return _extends.apply(this, arguments);
-}
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from "react";
 import PropTypes from "prop-types";
@@ -27,253 +12,99 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 const TOOLTIP_DELAY = 100;
 const tippyPlugins = [sticky];
-const Tooltip = /*#__PURE__*/ React.forwardRef(
-  (
-    {
-      children,
-      isVisible,
-      position = "top",
-      message,
-      type,
-      size = "medium",
-      isPartOfInput,
-      inputSize,
-      id,
-      bgColor,
-      fontColor,
-      flipOverrides,
-      target,
-      ...rest
-    },
-    ref
-  ) => {
-    const isFlipOverridesValid =
-      !flipOverrides ||
-      (Array.isArray(flipOverrides) &&
-        flipOverrides.every((placement) =>
-          TOOLTIP_POSITIONS.includes(placement)
-        ));
-    invariant(
-      isFlipOverridesValid,
-      `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`
-    );
+const Tooltip = /*#__PURE__*/React.forwardRef(({
+  children,
+  isVisible,
+  position = "top",
+  message,
+  type,
+  size = "medium",
+  isPartOfInput,
+  inputSize,
+  id,
+  bgColor,
+  fontColor,
+  flipOverrides,
+  target,
+  ...rest
+}, ref) => {
+  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
+  invariant(isFlipOverridesValid, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`);
 
-    const tooltip = (attrs, content) => {
-      const currentPosition = attrs["data-placement"] || position;
-      return /*#__PURE__*/ React.createElement(
-        CarbonScopedTokensProvider,
-        null,
-        /*#__PURE__*/ React.createElement(
-          StyledTooltip,
-          _extends(
-            {
-              "data-element": "tooltip",
-              role: "tooltip",
-              tabIndex: -1,
-              type: type,
-              size: size,
-              id: id,
-            },
-            tagComponent("tooltip", rest),
-            {
-              isPartOfInput: isPartOfInput,
-              inputSize: inputSize,
-            },
-            attrs,
-            {
-              position: currentPosition,
-              ref: ref,
-              bgColor: bgColor,
-              fontColor: fontColor,
-            }
-          ),
-          /*#__PURE__*/ React.createElement(
-            StyledPointer,
-            _extends(
-              {
-                key: "pointer",
-                type: type,
-              },
-              attrs,
-              {
-                position: currentPosition,
-                "data-popper-arrow": "",
-                "data-element": "tooltip-pointer",
-                bgColor: bgColor,
-              }
-            )
-          ),
-          content
-        )
-      );
-    };
+  const tooltip = (attrs, content) => {
+    const currentPosition = attrs["data-placement"] || position;
+    return /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
+      "data-element": "tooltip",
+      role: "tooltip",
+      tabIndex: -1,
+      type: type,
+      size: size,
+      id: id
+    }, tagComponent("tooltip", rest), {
+      isPartOfInput: isPartOfInput,
+      inputSize: inputSize
+    }, attrs, {
+      position: currentPosition,
+      ref: ref,
+      bgColor: bgColor,
+      fontColor: fontColor
+    }), /*#__PURE__*/React.createElement(StyledPointer, _extends({
+      key: "pointer",
+      type: type
+    }, attrs, {
+      position: currentPosition,
+      "data-popper-arrow": "",
+      "data-element": "tooltip-pointer",
+      bgColor: bgColor
+    })), content));
+  };
 
-    return /*#__PURE__*/ React.createElement(
-      Tippy,
-      _extends(
-        {
-          placement: position,
-          delay: TOOLTIP_DELAY,
-        },
-        isVisible !== undefined && {
-          visible: isVisible,
-        },
-        {
-          plugins: tippyPlugins,
-          sticky: true,
-          render: (attrs) => tooltip(attrs, message),
-          reference: target,
-          popperOptions: {
-            modifiers: [
-              ...(flipOverrides
-                ? [
-                    {
-                      name: "flip",
-                      options: {
-                        fallbackPlacements: flipOverrides,
-                      },
-                    },
-                  ]
-                : []),
-              {
-                name: "computeStyles",
-                options: {
-                  gpuAcceleration: false,
-                },
-              },
-            ],
-          },
+  return /*#__PURE__*/React.createElement(Tippy, _extends({
+    placement: position,
+    delay: TOOLTIP_DELAY
+  }, isVisible !== undefined && {
+    visible: isVisible
+  }, {
+    plugins: tippyPlugins,
+    sticky: true,
+    render: attrs => tooltip(attrs, message),
+    reference: target,
+    popperOptions: {
+      modifiers: [...(flipOverrides ? [{
+        name: "flip",
+        options: {
+          fallbackPlacements: flipOverrides
         }
-      ),
-      children
-    );
-  }
-);
-
-Tooltip.propTypes = {
-  /**
-   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  bgColor: PropTypes.string,
-  /**
-   * Children elements
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * Overrides the default flip behaviour of the Tooltip,
-   * must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
-   */
-  flipOverrides: PropTypes.arrayOf(
-    PropTypes.oneOf(["bottom", "left", "right", "top"])
-  ),
-  /**
-   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  fontColor: PropTypes.string,
-  /**
-   * The id attribute to use for the tooltip
-   */
-  id: PropTypes.string,
-  inputSize: PropTypes.oneOf(["large", "medium", "small"]),
-  isPartOfInput: PropTypes.bool,
-  /**
-   * Whether to to show the Tooltip
-   */
-  isVisible: PropTypes.bool,
-  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * The message to be displayed within the tooltip
-   */
-  message: PropTypes.node,
-  /**
-   * Sets position of the tooltip
-   */
-  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-  /**
-   * Defines the size of the tooltip content
-   */
-  size: PropTypes.oneOf(["large", "medium"]),
-  target: function (props, propName) {
-    if (props[propName] == null) {
-      return null;
-    } else if (
-      typeof props[propName] !== "object" ||
-      props[propName].nodeType !== 1
-    ) {
-      return new Error(
-        "Expected prop '" + propName + "' to be of type Element"
-      );
+      }] : []), {
+        name: "computeStyles",
+        options: {
+          gpuAcceleration: false
+        }
+      }]
     }
-  },
-  /**
-   * Defines the message type
-   */
-  type: PropTypes.string,
-};
-
+  }), children);
+});
 Tooltip.propTypes = {
-  /**
-   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  bgColor: PropTypes.string,
-  /**
-   * Children elements
-   */
-  children: PropTypes.element.isRequired,
-  /**
-   * Overrides the default flip behaviour of the Tooltip,
-   * must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
-   */
-  flipOverrides: PropTypes.arrayOf(
-    PropTypes.oneOf(["bottom", "left", "right", "top"])
-  ),
-  /**
-   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
-   */
-  fontColor: PropTypes.string,
-  /**
-   * The id attribute to use for the tooltip
-   */
-  id: PropTypes.string,
-  inputSize: PropTypes.oneOf(["large", "medium", "small"]),
-  isPartOfInput: PropTypes.bool,
-  /**
-   * Whether to to show the Tooltip
-   */
-  isVisible: PropTypes.bool,
-  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * The message to be displayed within the tooltip
-   */
-  message: PropTypes.node,
-  /**
-   * Sets position of the tooltip
-   */
-  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-  /**
-   * Defines the size of the tooltip content
-   */
-  size: PropTypes.oneOf(["large", "medium"]),
-  target: function (props, propName) {
+  "bgColor": PropTypes.string,
+  "children": PropTypes.element.isRequired,
+  "flipOverrides": PropTypes.arrayOf(PropTypes.oneOf(["bottom", "left", "right", "top"])),
+  "fontColor": PropTypes.string,
+  "id": PropTypes.string,
+  "inputSize": PropTypes.oneOf(["large", "medium", "small"]),
+  "isPartOfInput": PropTypes.bool,
+  "isVisible": PropTypes.bool,
+  "message": PropTypes.node,
+  "position": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "size": PropTypes.oneOf(["large", "medium"]),
+  "target": function (props, propName) {
     if (props[propName] == null) {
       return null;
-    } else if (
-      typeof props[propName] !== "object" ||
-      props[propName].nodeType !== 1
-    ) {
-      return new Error(
-        "Expected prop '" + propName + "' to be of type Element"
-      );
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
     }
   },
-  /**
-   * Defines the message type
-   */
-  type: PropTypes.string,
+  "type": PropTypes.string
 };
-
 export { Tooltip };
 Tooltip.displayName = "Tooltip";
-export default Tooltip;
+export default Tooltip;

package/esm/components/vertical-divider/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./vertical-divider.component";
+export type { VerticalDividerProps } from "./vertical-divider.component";

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { SpaceProps } from "styled-system";
 declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
-export interface VerticalDividerPropTypes extends SpaceProps {
+export interface VerticalDividerProps extends SpaceProps {
     h?: number | string;
     height?: number | string;
     displayInline?: boolean;
     /** the supported rage is 1-100  */
     tint?: TintRange;
 }
-declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerPropTypes) => JSX.Element;
+declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerProps) => JSX.Element;
 export default VerticalDivider;