carbon-react 106.3.2 → 106.4.0

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/lib/components/select/filterable-select/filterable-select.component.js

@@ -25,6 +25,8 @@ var _selectList = _interopRequireDefault(require("../select-list/select-list.com
 
 var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-option"));
 
+var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -171,7 +173,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       return;
     }
 
-    if (!event.defaultPrevented && isNavigationKey(key)) {
+    if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpen(true);
     }
@@ -410,10 +412,6 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     };
   }
 
-  function isNavigationKey(key) {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
-  }
-
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,

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

@@ -29,6 +29,8 @@ var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-opt
 
 var _isExpectedValue = _interopRequireDefault(require("../utils/is-expected-value"));
 
+var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -155,7 +157,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return;
     }
 
-    if (!event.defaultPrevented && isNavigationKey(key)) {
+    if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpen();
     }
@@ -428,10 +430,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     };
   }
 
-  function isNavigationKey(key) {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
-  }
-
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     "aria-multiselectable": true,

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

@@ -23,6 +23,8 @@ var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-chil
 
 var _getNextIndexByKey = _interopRequireDefault(require("../utils/get-next-index-by-key"));
 
+var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
+
 var _listActionButton = _interopRequireDefault(require("../list-action-button/list-action-button.component"));
 
 var _selectListContainer = _interopRequireDefault(require("./select-list-container.style"));
@@ -221,7 +223,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         value,
         selectionType: "enterKey"
       });
-    } else if (isNavigationKey(key)) {
+    } else if ((0, _isNavigationKey.default)(key)) {
       focusOnAnchor();
       highlightNextItem(key);
     }
@@ -305,10 +307,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     enabled: flipEnabled
   }], [flipEnabled]);
 
-  function isNavigationKey(keyEvent) {
-    return keyEvent === "ArrowDown" || keyEvent === "ArrowUp" || keyEvent === "Home" || keyEvent === "End";
-  }
-
   const loader = () => /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader",
     as: multiColumn ? "div" : "li"

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

@@ -27,6 +27,8 @@ var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-chil
 
 var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-option"));
 
+var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -145,7 +147,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       return;
     }
 
-    if (key === "Enter" || key === " " || isNavigationKey(key)) {
+    if (key === "Enter" || key === " " || (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpenState(isAlreadyOpen => {
         if (!isAlreadyOpen && onOpen) {
@@ -309,10 +311,6 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     setOpenState(false);
   }
 
-  function isNavigationKey(key) {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
-  }
-
   function assignInput(input) {
     setTextboxRef(input.current);
 

package/lib/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/lib/components/select/utils/get-next-index-by-key.js

@@ -4,31 +4,65 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getNextIndexByKey;
+exports.PAGE_SIZE = void 0;
+const PAGE_SIZE = 4;
+exports.PAGE_SIZE = PAGE_SIZE;
 
 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/lib/components/select/utils/is-navigation-key.d.ts

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isNavigationKey;
+
+function isNavigationKey(key) {
+  const navigationKeys = ["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"];
+  return navigationKeys.includes(key);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.3.2",
+  "version": "106.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {