carbon-react 109.2.4 → 109.3.2

package/lib/hooks/__internal__/useMenuKeyboardNavigation/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useMenuKeyboardNavigation.default;
+  }
+});
+
+var _useMenuKeyboardNavigation = _interopRequireDefault(require("./useMenuKeyboardNavigation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useMenuKeyboardNavigation/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useMenuKeyboardNavigation/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
+export default _default;

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+
+var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (mainControlRef, childrenRefs, hide) => {
+  const childrenLength = (0, _react.useMemo)(() => childrenRefs.length, [childrenRefs]);
+  const handleKeyDown = (0, _react.useCallback)(ev => {
+    ev.preventDefault();
+    const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
+    let nextIndex = -1;
+
+    const refocusMainControl = () => {
+      var _mainControlRef$curre;
+
+      hide();
+      (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
+    };
+
+    const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
+
+    if (_events.default.isEndKey(ev) || arrowModifierPressed && _events.default.isDownKey(ev)) {
+      nextIndex = childrenLength - 1;
+    }
+
+    if (_events.default.isHomeKey(ev) || arrowModifierPressed && _events.default.isUpKey(ev)) {
+      nextIndex = 0;
+    }
+
+    if (!arrowModifierPressed && _events.default.isUpKey(ev) && currentIndex > 0) {
+      nextIndex = currentIndex - 1;
+    }
+
+    if (!arrowModifierPressed && _events.default.isDownKey(ev) && currentIndex < childrenLength - 1) {
+      nextIndex = currentIndex + 1;
+    }
+
+    const tabPressed = _events.default.isTabKey(ev);
+
+    const tabShiftPressed = tabPressed && _events.default.isShiftKey(ev);
+
+    if (tabShiftPressed) {
+      if (currentIndex === 0) {
+        refocusMainControl();
+      } else {
+        nextIndex = currentIndex - 1;
+      }
+    } else if (tabPressed) {
+      if (currentIndex === childrenLength - 1) {
+        var _elements;
+
+        const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+        const indexOf = elements.indexOf(mainControlRef.current);
+        (_elements = elements[indexOf + 1]) === null || _elements === void 0 ? void 0 : _elements.focus(); // // timeout enforces that the "hide" method will be run after browser focuses on the next element
+
+        setTimeout(hide, 0);
+      } else {
+        nextIndex = currentIndex + 1;
+      }
+    }
+
+    if (nextIndex > -1) {
+      var _childrenRefs$nextInd;
+
+      (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
+    }
+
+    if (_events.default.isEscKey(ev)) {
+      refocusMainControl();
+    }
+  }, [childrenLength, hide, childrenRefs, mainControlRef]);
+  return handleKeyDown;
+};
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.2.4",
+  "version": "109.3.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -16,11 +16,10 @@
   "scripts": {
     "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
-    "test": "jest --config=./jest.conf.json",
-    "test-update": "jest --config=./jest.conf.json --updateSnapshot",
+    "test": "jest --config=./jest.config.json",
+    "test-update": "jest --config=./jest.config.json --updateSnapshot",
     "test:cypress": "npx cypress open --e2e",
     "cypress:react": "npx cypress open --component",
-    "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
     "build": "node ./scripts/build.js",

package/esm/__internal__/field-help/field-help.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-export interface FieldHelpProps {
-  /** Child elements */
-  children?: React.ReactNode;
-  /** When true, label is placed in line an input */
-  labelInline?: boolean;
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth?: number;
-}
-
-declare function FieldHelp(props: FieldHelpProps): JSX.Element;
-
-export default FieldHelp;

package/esm/components/grid/grid-container/grid-container.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { SpaceProps, GridProps } from "styled-system";
-import { GridItemProps } from "../grid-item/grid-item";
-
-type GridContainerChild =
-  | React.ReactElement<GridItemProps>
-  | boolean
-  | null
-  | undefined;
-
-export interface GridContainerProps extends SpaceProps, GridProps {
-  /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
-  children?: GridContainerChild | GridContainerChild[];
-}
-
-declare function GridContainer(props: GridContainerProps): JSX.Element;
-
-export default GridContainer;

package/esm/components/grid/grid-item/grid-item.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import {
-  PaddingProps,
-  GridAreaProps,
-  GridRowProps,
-  GridColumnProps,
-} from "styled-system";
-
-interface ResponsiveSettingsShape extends PaddingProps {
-  /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
-  alignSelf?: string;
-  /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
-  justifySelf?: string;
-  /** Maximum width of the item */
-  maxWidth?: string;
-  /** Shorthand property for gridColumn and gridRow */
-  gridArea?: GridAreaProps;
-  /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: GridColumnProps;
-  /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: GridRowProps;
-}
-
-export interface GridItemProps extends PaddingProps {
-  /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
-  alignSelf?: string;
-  /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
-  justifySelf?: string;
-  /** Defines the Component(s) to be rendered within the GridItem */
-  children?: React.ReactNode;
-  /** Shorthand property for gridColumn and gridRow */
-  gridArea?: GridAreaProps;
-  /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: GridColumnProps;
-  /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: GridRowProps;
-  responsiveSettings?: ResponsiveSettingsShape[];
-}
-
-declare function GridItem(props: GridItemProps): JSX.Element;
-
-export default GridItem;

package/lib/__internal__/field-help/field-help.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-export interface FieldHelpProps {
-  /** Child elements */
-  children?: React.ReactNode;
-  /** When true, label is placed in line an input */
-  labelInline?: boolean;
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth?: number;
-}
-
-declare function FieldHelp(props: FieldHelpProps): JSX.Element;
-
-export default FieldHelp;

package/lib/components/grid/grid-container/grid-container.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { SpaceProps, GridProps } from "styled-system";
-import { GridItemProps } from "../grid-item/grid-item";
-
-type GridContainerChild =
-  | React.ReactElement<GridItemProps>
-  | boolean
-  | null
-  | undefined;
-
-export interface GridContainerProps extends SpaceProps, GridProps {
-  /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
-  children?: GridContainerChild | GridContainerChild[];
-}
-
-declare function GridContainer(props: GridContainerProps): JSX.Element;
-
-export default GridContainer;

package/lib/components/grid/grid-item/grid-item.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import {
-  PaddingProps,
-  GridAreaProps,
-  GridRowProps,
-  GridColumnProps,
-} from "styled-system";
-
-interface ResponsiveSettingsShape extends PaddingProps {
-  /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
-  alignSelf?: string;
-  /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
-  justifySelf?: string;
-  /** Maximum width of the item */
-  maxWidth?: string;
-  /** Shorthand property for gridColumn and gridRow */
-  gridArea?: GridAreaProps;
-  /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: GridColumnProps;
-  /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: GridRowProps;
-}
-
-export interface GridItemProps extends PaddingProps {
-  /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
-  alignSelf?: string;
-  /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
-  justifySelf?: string;
-  /** Defines the Component(s) to be rendered within the GridItem */
-  children?: React.ReactNode;
-  /** Shorthand property for gridColumn and gridRow */
-  gridArea?: GridAreaProps;
-  /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: GridColumnProps;
-  /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: GridRowProps;
-  responsiveSettings?: ResponsiveSettingsShape[];
-}
-
-declare function GridItem(props: GridItemProps): JSX.Element;
-
-export default GridItem;