@carbon/ibm-products 2.24.0 → 2.26.0

package/es/components/WebTerminal/WebTerminalContentWrapper.js

@@ -1,32 +1,28 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 portions of React that are needed.
-import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import { pkg } from '../../settings.js';
+import { useWebTerminal } from './hooks/index.js';
 
-// Other standard imports.
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { pkg } from '../../settings';
-import { useWebTerminal } from './hooks';
+var _excluded = ["children"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'WebTerminalContentWrapper';
 var blockClass = "".concat(pkg.prefix, "--web-terminal-content-wrapper");
-export var WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var WebTerminalContentWrapper = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useWebTerminal = useWebTerminal(),
     open = _useWebTerminal.open;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
     className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), open)])
   }, rest), children);
@@ -47,4 +43,6 @@ WebTerminalContentWrapper.propTypes = {
    * Pass in content as children.
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};
+};
+
+export { WebTerminalContentWrapper };

package/es/components/WebTerminal/hooks/index.d.ts

@@ -0,0 +1,12 @@
+export const WebTerminalContext: React.Context<any>;
+export function WebTerminalProvider({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace WebTerminalProvider {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+    }
+}
+export function useWebTerminal(): any;
+import React from 'react';
+import PropTypes from 'prop-types';

package/es/components/WebTerminal/hooks/index.js

@@ -1,18 +1,18 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 React, { useState, useCallback, createContext } from 'react';
-import { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { pkg } from '../../../settings';
-export var WebTerminalContext = /*#__PURE__*/createContext();
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useCallback, useContext, createContext } from 'react';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { pkg } from '../../../settings.js';
+
+var WebTerminalContext = /*#__PURE__*/createContext();
 var componentName = 'WebTerminalProvider';
-export var WebTerminalProvider = function WebTerminalProvider(_ref) {
+var WebTerminalProvider = function WebTerminalProvider(_ref) {
   var children = _ref.children;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27,7 +27,7 @@ export var WebTerminalProvider = function WebTerminalProvider(_ref) {
   var toggleWebTerminal = useCallback(function () {
     return setOpen(!open);
   }, [open]);
-  return /*#__PURE__*/React.createElement(WebTerminalContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(WebTerminalContext.Provider, {
     value: {
       open: open,
       openWebTerminal: openWebTerminal,
@@ -47,6 +47,8 @@ WebTerminalProvider.propTypes = {
 };
 
 // Custom hook that exposes the provided value from context
-export var useWebTerminal = function useWebTerminal() {
+var useWebTerminal = function useWebTerminal() {
   return useContext(WebTerminalContext);
-};
+};
+
+export { WebTerminalContext, WebTerminalProvider, useWebTerminal };

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

@@ -0,0 +1,3 @@
+export { WebTerminal } from "./WebTerminal";
+export { WebTerminalContentWrapper } from "./WebTerminalContentWrapper";
+export { useWebTerminal, WebTerminalProvider } from "./hooks";

package/es/components/_Canary/Canary.d.ts

@@ -0,0 +1,12 @@
+export function Canary({ className, componentName, ...rest }: {
+    [x: string]: any;
+    className: any;
+    componentName: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Canary {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let componentName: PropTypes.Validator<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/_Canary/Canary.js

@@ -1,48 +1,44 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "componentName"];
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 portions of React that are needed.
-import React from 'react';
-
-// Other standard imports.
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-// load the package settings direct, because Canary is used by settings.js
-import pkg from '../../global/js/package-settings';
-
-// Carbon and package components we use.
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import pkg from '../../global/js/package-settings.js';
 import { CodeSnippet } from '@carbon/react';
 
+var _p, _br, _p2, _br2, _p3;
+var _excluded = ["className", "componentName"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--canary");
 
 /**
  *  Canary component used when the component requested is not yet production
  */
-export var Canary = function Canary(_ref /*, originalArgs*/) {
+var Canary = function Canary(_ref /*, originalArgs*/) {
   var className = _ref.className,
     componentName = _ref.componentName,
     rest = _objectWithoutProperties(_ref, _excluded);
   var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className)
-  }), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/React.createElement(CodeSnippet, {
+  }), /*#__PURE__*/React__default.createElement("h2", null, "This component ", /*#__PURE__*/React__default.createElement("strong", null, componentName), " is not ready yet."), _p || (_p = /*#__PURE__*/React__default.createElement("p", null, "To enable it, initialize package flags before the component is first used.")), _br || (_br = /*#__PURE__*/React__default.createElement("br", null)), _p2 || (_p2 = /*#__PURE__*/React__default.createElement("p", null, "e.g. in main.js")), /*#__PURE__*/React__default.createElement(CodeSnippet, {
     type: "multi"
-  }, instructions), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/React.createElement("a", {
+  }, instructions), _br2 || (_br2 = /*#__PURE__*/React__default.createElement("br", null)), _p3 || (_p3 = /*#__PURE__*/React__default.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/React__default.createElement("a", {
     href: "https://codesandbox.io/s/example-component-olif5?file=/src/config.js"
-  }, "codesandbox"), "."));
+  }, "codesandbox"), ".")));
 };
 Canary.propTypes = {
   /** Provide an optional class to be applied to the containing node */
   className: PropTypes.string,
   /** Name of the component that is not ready yet */
   componentName: PropTypes.string.isRequired
-};
+};
+
+export { Canary };

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

@@ -0,0 +1 @@
+export { Canary } from "./Canary";

package/es/components/index.d.ts

@@ -0,0 +1,56 @@
+export { AboutModal } from "./AboutModal";
+export { APIKeyModal } from "./APIKeyModal";
+export { Cascade } from "./Cascade";
+export { CreateModal } from "./CreateModal";
+export { CreateSidePanel } from "./CreateSidePanel";
+export { CreateTearsheetNarrow } from "./CreateTearsheetNarrow";
+export { ExportModal } from "./ExportModal";
+export { ExpressiveCard } from "./ExpressiveCard";
+export { ImportModal } from "./ImportModal";
+export { MultiAddSelect } from "./MultiAddSelect";
+export { NotificationsPanel } from "./NotificationsPanel";
+export { PageHeader } from "./PageHeader";
+export { ProductiveCard } from "./ProductiveCard";
+export { RemoveModal } from "./RemoveModal";
+export { Saving } from "./Saving";
+export { SidePanel } from "./SidePanel";
+export { SingleAddSelect } from "./SingleAddSelect";
+export { StatusIcon } from "./StatusIcon";
+export { TagSet } from "./TagSet";
+export { UserProfileImage } from "./UserProfileImage";
+export { EditSidePanel } from "./EditSidePanel";
+export { OptionsTile } from "./OptionsTile";
+export { EditInPlace } from "./EditInPlace";
+export { DataSpreadsheet } from "./DataSpreadsheet";
+export { EditTearsheetNarrow } from "./EditTearsheetNarrow";
+export { EditFullPage } from "./EditFullPage";
+export { EditUpdateCards } from "./EditUpdateCards";
+export { Checklist } from "./Checklist";
+export { Coachmark } from "./Coachmark";
+export { CoachmarkBeacon } from "./CoachmarkBeacon";
+export { CoachmarkButton } from "./CoachmarkButton";
+export { CoachmarkFixed } from "./CoachmarkFixed";
+export { CoachmarkOverlayElement } from "./CoachmarkOverlayElement";
+export { CoachmarkOverlayElements } from "./CoachmarkOverlayElements";
+export { CoachmarkStack } from "./CoachmarkStack";
+export { NonLinearReading } from "./NonLinearReading";
+export { TruncatedList } from "./TruncatedList";
+export { InterstitialScreen } from "./InterstitialScreen";
+export { InterstitialScreenView } from "./InterstitialScreenView";
+export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
+export { DelimitedList } from "./DelimitedList";
+export { FullPageError } from "./FullPageError";
+export { SearchBar } from "./SearchBar";
+export { UserAvatar } from "./UserAvatar";
+export { ComboButton, ComboButtonItem } from "./ComboButton";
+export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
+export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
+export { EmptyState, EmptyStateV2, ErrorEmptyState, NoDataEmptyState, NoTagsEmptyState, NotFoundEmptyState, NotificationsEmptyState, UnauthorizedEmptyState } from "./EmptyStates";
+export { HTTPError403, HTTPError404, HTTPErrorOther } from "./HTTPErrors";
+export { Tearsheet, TearsheetNarrow } from "./Tearsheet";
+export { Toolbar, ToolbarButton, ToolbarGroup } from "./Toolbar";
+export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from "./WebTerminal";
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from "./Datagrid";
+export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
+export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
+export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";

package/es/global/js/hooks/index.d.ts

@@ -0,0 +1,13 @@
+export { useActiveElement } from "./useActiveElement";
+export { useWindowResize } from "./useWindowResize";
+export { useClickOutside } from "./useClickOutside";
+export { useCreateComponentFocus } from "./useCreateComponentFocus";
+export { useCreateComponentStepChange } from "./useCreateComponentStepChange";
+export { usePreviousValue } from "./usePreviousValue";
+export { useResetCreateComponent } from "./useResetCreateComponent";
+export { useRetrieveStepData } from "./useRetrieveStepData";
+export { useValidCreateStepCount } from "./useValidCreateStepCount";
+export { useControllableState } from "./useControllableState";
+export { usePrefix } from "./usePrefix";
+export { useFocus } from "./useFocus";
+export { useNearestScroll, useWindowScroll } from "./useWindowScroll";

package/es/global/js/hooks/useActiveElement.d.ts

@@ -0,0 +1 @@
+export function useActiveElement(): Element | null;

package/es/global/js/hooks/useActiveElement.js

@@ -1,13 +1,14 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useEffect } from 'react';
-export var useActiveElement = function useActiveElement() {
+
+var useActiveElement = function useActiveElement() {
   var _useState = useState(document.activeElement),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
@@ -22,4 +23,6 @@ export var useActiveElement = function useActiveElement() {
     };
   }, []);
   return active;
-};
+};
+
+export { useActiveElement };

package/es/global/js/hooks/useClickOutside.d.ts

@@ -0,0 +1 @@
+export function useClickOutside(ref: any, callback: any): void;

package/es/global/js/hooks/useClickOutside.js

@@ -1,12 +1,13 @@
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 { useEffect } from 'react';
-export var useClickOutside = function useClickOutside(ref, callback) {
+
+var useClickOutside = function useClickOutside(ref, callback) {
   useEffect(function () {
     var handleClick = function handleClick(event) {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -18,4 +19,6 @@ export var useClickOutside = function useClickOutside(ref, callback) {
       document.removeEventListener('click', handleClick);
     };
   }, [callback, ref]);
-};
+};
+
+export { useClickOutside };

package/es/global/js/hooks/useControllableState.d.ts

@@ -0,0 +1,27 @@
+/**
+ * This custom hook simplifies the behavior of a component if it has state that
+ * can be both controlled and uncontrolled. It functions identical to a
+ * useState() hook and provides [state, setState] for you to use. You can use
+ * the `onChange` argument to allow updates to the `state` to be communicated to
+ * owners of controlled components.
+ *
+ * Note: this hook will warn if a component is switching from controlled to
+ * uncontrolled, or vice-versa.
+ *
+ * @param {object} config
+ * @param {string} config.name - the name of the custom component
+ * @param {any} config.defaultValue - the default value used for the state. This will be
+ * the fallback value used if `value` is not defined.
+ * @param {Function} config.onChange - an optional function that is called when
+ * the value of the state changes. This is useful for communicating to parents of
+ * controlled components that the value is requesting to be changed.
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
+ * uncontrolled
+ * @returns {[any, Function]}
+ */
+export function useControllableState({ defaultValue, name, onChange, value, }: {
+    name: string;
+    defaultValue: any;
+    onChange: Function;
+    value: any;
+}): [any, Function];

package/es/global/js/hooks/useControllableState.js

@@ -1,13 +1,13 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 { useEffect, useRef, useState } from 'react';
-import pconsole from '../utils/pconsole';
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useEffect } from 'react';
+import pconsole from '../utils/pconsole.js';
 
 /**
  * This custom hook simplifies the behavior of a component if it has state that
@@ -30,7 +30,7 @@ import pconsole from '../utils/pconsole';
  * uncontrolled
  * @returns {[any, Function]}
  */
-export function useControllableState(_ref) {
+function useControllableState(_ref) {
   var defaultValue = _ref.defaultValue,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? 'custom' : _ref$name,
@@ -71,4 +71,6 @@ export function useControllableState(_ref) {
     return [value, setState];
   }
   return [state, setState];
-}
+}
+
+export { useControllableState };

package/es/global/js/hooks/useCreateComponentFocus.d.ts

@@ -0,0 +1,7 @@
+export function useCreateComponentFocus({ previousState, currentStep, blockClass, onMount, firstFocusElement, }: {
+    previousState: any;
+    currentStep: any;
+    blockClass: any;
+    onMount: any;
+    firstFocusElement: any;
+}): void;

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -1,17 +1,16 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useEffect } from 'react';
-import wait from '../utils/wait';
+import wait from '../utils/wait.js';
 
 // Focus the first focusable element and call the onMount prop for the current step if one is provided
-export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
+var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   var previousState = _ref.previousState,
     currentStep = _ref.currentStep,
     blockClass = _ref.blockClass,
@@ -25,8 +24,8 @@ export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   useEffect(function () {
     // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
     var awaitFocus = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(elm) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(elm) {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
@@ -52,4 +51,6 @@ export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
       }
     }
   }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
-};
+};
+
+export { useCreateComponentFocus };

package/es/global/js/hooks/useCreateComponentStepChange.d.ts

@@ -0,0 +1,24 @@
+export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, componentBlockClass, setCreateComponentActions, setModalIsOpen, }: {
+    firstIncludedStep: any;
+    lastIncludedStep: any;
+    stepData: any;
+    onPrevious: any;
+    onNext: any;
+    isSubmitDisabled: any;
+    setCurrentStep: any;
+    setIsSubmitting: any;
+    setLoadingPrevious?: null | undefined;
+    loadingPrevious?: boolean | undefined;
+    onClose: any;
+    onRequestSubmit: any;
+    componentName: any;
+    currentStep: any;
+    backButtonText: any;
+    cancelButtonText: any;
+    submitButtonText: any;
+    nextButtonText: any;
+    isSubmitting: any;
+    componentBlockClass: any;
+    setCreateComponentActions: any;
+    setModalIsOpen: any;
+}): void;

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -1,14 +1,14 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
- * Copyright IBM Corp. 2021, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useCallback, useEffect } from 'react';
-export var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
+
+var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
   var firstIncludedStep = _ref.firstIncludedStep,
     lastIncludedStep = _ref.lastIncludedStep,
     stepData = _ref.stepData,
@@ -72,8 +72,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       onClose();
     };
     var handleOnRequestSubmit = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
@@ -99,8 +99,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       };
     }();
     var handlePrevious = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               setLoadingPrevious === null || setLoadingPrevious === void 0 || setLoadingPrevious(true);
@@ -135,8 +135,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       };
     }();
     var handleNext = /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
               setIsSubmitting(true);
@@ -172,8 +172,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       };
     }();
     var handleSubmit = /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
               setIsSubmitting(true);
@@ -244,4 +244,6 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       setCreateComponentActions(buttons);
     }
   }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious]);
-};
+};
+
+export { useCreateComponentStepChange };

package/es/global/js/hooks/useFocus.d.ts

@@ -0,0 +1,11 @@
+export function useFocus(modalRef: any): {
+    firstElement: any;
+    lastElement: any;
+    allElements: any;
+    keyDownListener: (event: any) => void;
+    getFocusable: () => {
+        first: any;
+        last: any;
+        all: any;
+    };
+};

package/es/global/js/hooks/useFocus.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { usePrefix } from '@carbon/react';
+import { pkg } from '../../../settings.js';
+import { useCallback, useEffect } from 'react';
+
+var useFocus = function useFocus(modalRef) {
+  var carbonPrefix = usePrefix();
+  var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
+  // Querying focusable element in the modal
+  // Query to exclude hidden elements in the modal from querySelectorAll() method
+  // feel free to include more if needed :)
+  var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
+  // Queries to include element types button, input, select, textarea
+  var queryButton = "button".concat(notQuery);
+  var queryInput = "input".concat(notQuery);
+  var querySelect = "select".concat(notQuery);
+  var queryTextarea = "textarea".concat(notQuery);
+  var queryLink = "[href]".concat(notQuery);
+  // Final query
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea);
+  var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
+  var getFocusable = useCallback(function () {
+    // Selecting all focusable elements based on the above conditions
+    var focusableElements = modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelectorAll("".concat(query));
+    var first = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
+    var last = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[(focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) - 1];
+    var all = focusableElements;
+    return {
+      first: first,
+      last: last,
+      all: all
+    };
+  }, [modalEl, query]);
+  useEffect(function () {
+    getFocusable();
+  }, [getFocusable]);
+  var handleKeyDown = function handleKeyDown(event) {
+    // Checking whether the key is tab or not
+    if (event.key === 'Tab') {
+      // updating the focusable elements list
+      var _getFocusable = getFocusable(),
+        first = _getFocusable.first,
+        last = _getFocusable.last,
+        all = _getFocusable.all;
+      setTimeout(function () {
+        var _document, _document2;
+        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+          // Prevents the default "Tab" behavior
+          event.preventDefault();
+          // if the user press shift+tab and the current element not in focusable items
+          last === null || last === void 0 || last.focus();
+        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+          event.preventDefault();
+          // user pressing tab key only then
+          // focusing the first element if the current element is not in focusable items
+          first === null || first === void 0 || first.focus();
+        }
+      }, 0);
+    }
+  };
+  return {
+    firstElement: getFocusable().first,
+    lastElement: getFocusable().last,
+    allElements: getFocusable().all,
+    keyDownListener: handleKeyDown,
+    getFocusable: getFocusable
+  };
+};
+
+export { useFocus };

package/es/global/js/hooks/usePortalTarget.d.ts

@@ -0,0 +1 @@
+export function usePortalTarget(portalTargetIn: any): (children: any) => any;