@boomerang-io/carbon-addons-boomerang-react 4.6.10-beta.6 → 4.6.11-beta.1

package/dist/cjs/hooks/useHeaderMenu.js

@@ -8,55 +8,55 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * Supports HeaderMenu components in the Header meeting usability and a11y guidelines
- * Manage state for click/touch, escape and tab events
- */
-function useHeaderMenu(focusableElementId) {
-    const ref = React__default.default.useRef(null);
-    const [isOpen, setIsOpen] = React__default.default.useState(false);
-    const toggleActive = () => setIsOpen(!isOpen);
-    // Close menu if click event originates outside the menu
-    const handleMousedownEvent = React__default.default.useCallback((event) => {
-        if (!ref.current?.contains(event.target)) {
-            setIsOpen(false);
-        }
-        return;
-    }, []);
-    // Close menu if ESC keydown event originates in the menu and transfer focus
-    const handleKeyDownEvent = React__default.default.useCallback((event) => {
-        if (event.key === "Escape") {
-            if (ref.current?.contains(event.target)) {
-                document.getElementById(focusableElementId)?.focus();
-                setIsOpen(false);
-            }
-        }
-        return;
-    }, [focusableElementId]);
-    // Close menu if focus transfer event originates in the node AND
-    // transfers focus to a element OUTSIDE the menu
-    const handleFocusOutEvent = React__default.default.useCallback((event) => {
-        if (event.relatedTarget && !ref.current?.contains(event.relatedTarget)) {
-            setIsOpen(false);
-        }
-        return;
-    }, []);
-    React__default.default.useEffect(() => {
-        document.addEventListener("mousedown", handleMousedownEvent);
-        document.addEventListener("keydown", handleKeyDownEvent);
-        document.addEventListener("focusout", handleFocusOutEvent);
-        return () => {
-            document.removeEventListener("mousedown", handleMousedownEvent);
-            document.removeEventListener("keydown", handleKeyDownEvent);
-            document.removeEventListener("focusout", handleFocusOutEvent);
-        };
-    }, [handleMousedownEvent, handleKeyDownEvent, handleFocusOutEvent]);
-    return { isOpen, setIsOpen, toggleActive, ref };
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * Supports HeaderMenu components in the Header meeting usability and a11y guidelines
+ * Manage state for click/touch, escape and tab events
+ */
+function useHeaderMenu(focusableElementId) {
+    const ref = React__default.default.useRef(null);
+    const [isOpen, setIsOpen] = React__default.default.useState(false);
+    const toggleActive = () => setIsOpen(!isOpen);
+    // Close menu if click event originates outside the menu
+    const handleMousedownEvent = React__default.default.useCallback((event) => {
+        if (!ref.current?.contains(event.target)) {
+            setIsOpen(false);
+        }
+        return;
+    }, []);
+    // Close menu if ESC keydown event originates in the menu and transfer focus
+    const handleKeyDownEvent = React__default.default.useCallback((event) => {
+        if (event.key === "Escape") {
+            if (ref.current?.contains(event.target)) {
+                document.getElementById(focusableElementId)?.focus();
+                setIsOpen(false);
+            }
+        }
+        return;
+    }, [focusableElementId]);
+    // Close menu if focus transfer event originates in the node AND
+    // transfers focus to a element OUTSIDE the menu
+    const handleFocusOutEvent = React__default.default.useCallback((event) => {
+        if (event.relatedTarget && !ref.current?.contains(event.relatedTarget)) {
+            setIsOpen(false);
+        }
+        return;
+    }, []);
+    React__default.default.useEffect(() => {
+        document.addEventListener("mousedown", handleMousedownEvent);
+        document.addEventListener("keydown", handleKeyDownEvent);
+        document.addEventListener("focusout", handleFocusOutEvent);
+        return () => {
+            document.removeEventListener("mousedown", handleMousedownEvent);
+            document.removeEventListener("keydown", handleKeyDownEvent);
+            document.removeEventListener("focusout", handleFocusOutEvent);
+        };
+    }, [handleMousedownEvent, handleKeyDownEvent, handleFocusOutEvent]);
+    return { isOpen, setIsOpen, toggleActive, ref };
 }
 
 exports.default = useHeaderMenu;

package/dist/cjs/hooks/usePortal.js

@@ -4,80 +4,80 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * Creates DOM element to be used as React root.
- */
-function createRootElement(id) {
-    const rootContainer = document.createElement("div");
-    rootContainer.setAttribute("id", id);
-    return rootContainer;
-}
-/**
- * Appends element as last child of body.
- * @param {HTMLElement} rootElem
- */
-function addRootElement(rootElem) {
-    if (document.body.lastElementChild) {
-        document.body.insertBefore(rootElem, document.body.lastElementChild.nextElementSibling);
-    }
-}
-/**
- * Hook to create a React Portal.
- * Automatically handles creating and tearing-down the root elements (no SRR
- * makes this trivial), so there is no need to ensure the parent target already
- * exists.
- * @example
- * const target = usePortal(id, [id]);
- * return createPortal(children, target);
- * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
- * @returns {HTMLElement} The DOM node to use as the Portal target.
- */
-function usePortal(id) {
-    const rootElemRef = React.useRef(null);
-    React.useEffect(function setupElement() {
-        // Look for existing target dom element to append to
-        const existingParent = document.querySelector(`#${id}`);
-        // Parent is either a new root or the existing dom element
-        const parentElem = existingParent || createRootElement(id);
-        // If there is no existing DOM element, add a new one.
-        if (!existingParent) {
-            addRootElement(parentElem);
-        }
-        // Add the detached element to the parent
-        if (rootElemRef.current) {
-            parentElem.appendChild(rootElemRef.current);
-        }
-        return function removeElement() {
-            if (rootElemRef.current) {
-                rootElemRef.current.remove();
-                if (parentElem.childNodes.length === -1) {
-                    parentElem.remove();
-                }
-            }
-        };
-    }, [id]);
-    /**
-     * It's important we evaluate this lazily:
-     * - We need first render to contain the DOM element, so it shouldn't happen
-     *   in useEffect. We would normally put this in the constructor().
-     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
-     *   since this will run every single render (that's a lot).
-     * - We want the ref to consistently point to the same DOM element and only
-     *   ever run once.
-     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
-     */
-    function getRootElem() {
-        if (!rootElemRef.current) {
-            rootElemRef.current = document.createElement("div");
-        }
-        return rootElemRef.current;
-    }
-    return getRootElem();
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * Creates DOM element to be used as React root.
+ */
+function createRootElement(id) {
+    const rootContainer = document.createElement("div");
+    rootContainer.setAttribute("id", id);
+    return rootContainer;
+}
+/**
+ * Appends element as last child of body.
+ * @param {HTMLElement} rootElem
+ */
+function addRootElement(rootElem) {
+    if (document.body.lastElementChild) {
+        document.body.insertBefore(rootElem, document.body.lastElementChild.nextElementSibling);
+    }
+}
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+function usePortal(id) {
+    const rootElemRef = React.useRef(null);
+    React.useEffect(function setupElement() {
+        // Look for existing target dom element to append to
+        const existingParent = document.querySelector(`#${id}`);
+        // Parent is either a new root or the existing dom element
+        const parentElem = existingParent || createRootElement(id);
+        // If there is no existing DOM element, add a new one.
+        if (!existingParent) {
+            addRootElement(parentElem);
+        }
+        // Add the detached element to the parent
+        if (rootElemRef.current) {
+            parentElem.appendChild(rootElemRef.current);
+        }
+        return function removeElement() {
+            if (rootElemRef.current) {
+                rootElemRef.current.remove();
+                if (parentElem.childNodes.length === -1) {
+                    parentElem.remove();
+                }
+            }
+        };
+    }, [id]);
+    /**
+     * It's important we evaluate this lazily:
+     * - We need first render to contain the DOM element, so it shouldn't happen
+     *   in useEffect. We would normally put this in the constructor().
+     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+     *   since this will run every single render (that's a lot).
+     * - We want the ref to consistently point to the same DOM element and only
+     *   ever run once.
+     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+     */
+    function getRootElem() {
+        if (!rootElemRef.current) {
+            rootElemRef.current = document.createElement("div");
+        }
+        return rootElemRef.current;
+    }
+    return getRootElem();
 }
 
 exports.default = usePortal;

package/dist/cjs/hooks/useWindowSize.js

@@ -4,39 +4,39 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-// https://usehooks.com/useWindowSize/
-/**
- * Gets the dimensions of the window
- */
-function useWindowSize() {
-    // Initialize state with undefined width/height so server and client renders match
-    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-    const [windowSize, setWindowSize] = React.useState({
-        width: undefined,
-        height: undefined,
-    });
-    React.useEffect(() => {
-        // Handler to call on window resize
-        function handleResize() {
-            // Set window width/height to state
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        // Add event listener
-        window.addEventListener("resize", handleResize);
-        // Call handler right away so state gets updated with initial window size
-        handleResize();
-        // Remove event listener on cleanup
-        return () => window.removeEventListener("resize", handleResize);
-    }, []); // Empty array ensures that effect is only run on mount
-    return windowSize;
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+// https://usehooks.com/useWindowSize/
+/**
+ * Gets the dimensions of the window
+ */
+function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = React.useState({
+        width: undefined,
+        height: undefined,
+    });
+    React.useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
 }
 
 exports.default = useWindowSize;

package/dist/cjs/internal/ListBox/ListBox.js

@@ -11,47 +11,47 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-const handleOnKeyDown = (event) => {
-    if (event.keyCode === 27) {
-        event.stopPropagation();
-    }
-};
-const handleClick = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-};
-/**
- * `ListBox` is a generic container component that handles creating the
- * container class name in response to certain props.
- */
-const ListBox = React__default.default.forwardRef(function ListBox({ children, className: containerClassName, disabled = false, type = "default", size, invalid, invalidText, warn, warnText, light, isOpen, ...rest }, ref) {
-    const showWarning = !invalid && warn;
-    const className = cx__default.default({
-        [containerClassName]: !!containerClassName,
-        [`${settings.prefix}--list-box`]: true,
-        [`${settings.prefix}--list-box--${size}`]: size,
-        [`${settings.prefix}--list-box--inline`]: type === "inline",
-        [`${settings.prefix}--list-box--disabled`]: disabled,
-        [`${settings.prefix}--list-box--light`]: light,
-        [`${settings.prefix}--list-box--expanded`]: isOpen,
-        [`${settings.prefix}--list-box--warning`]: showWarning,
-    });
-    return (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement("div", { ...rest, className: className, ref: ref, onKeyDown: handleOnKeyDown, onClick: handleClick, "data-invalid": invalid || undefined }, children),
-        invalid ? React__default.default.createElement("div", { className: `${settings.prefix}--form-requirement` }, invalidText) : null,
-        showWarning ? React__default.default.createElement("div", { className: `${settings.prefix}--form-requirement` }, warnText) : null));
-});
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const handleOnKeyDown = (event) => {
+    if (event.keyCode === 27) {
+        event.stopPropagation();
+    }
+};
+const handleClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+/**
+ * `ListBox` is a generic container component that handles creating the
+ * container class name in response to certain props.
+ */
+const ListBox = React__default.default.forwardRef(function ListBox({ children, className: containerClassName, disabled = false, type = "default", size, invalid, invalidText, warn, warnText, light, isOpen, ...rest }, ref) {
+    const showWarning = !invalid && warn;
+    const className = cx__default.default({
+        [containerClassName]: !!containerClassName,
+        [`${settings.prefix}--list-box`]: true,
+        [`${settings.prefix}--list-box--${size}`]: size,
+        [`${settings.prefix}--list-box--inline`]: type === "inline",
+        [`${settings.prefix}--list-box--disabled`]: disabled,
+        [`${settings.prefix}--list-box--light`]: light,
+        [`${settings.prefix}--list-box--expanded`]: isOpen,
+        [`${settings.prefix}--list-box--warning`]: showWarning,
+    });
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("div", { ...rest, className: className, ref: ref, onKeyDown: handleOnKeyDown, onClick: handleClick, "data-invalid": invalid || undefined }, children),
+        invalid ? React__default.default.createElement("div", { className: `${settings.prefix}--form-requirement` }, invalidText) : null,
+        showWarning ? React__default.default.createElement("div", { className: `${settings.prefix}--form-requirement` }, warnText) : null));
+});
 ListBox.displayName = "ListBox";
 
 exports.default = ListBox;

package/dist/cjs/internal/ListBox/ListBoxField.js

@@ -9,25 +9,25 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * `ListBoxField` is responsible for creating the containing node for valid
- * elements inside of a field. It also provides a11y-related attributes like
- * `role` to make sure a user can focus the given field.
- */
-function ListBoxField({ children, disabled, tabIndex, ...rest }) {
-    const numTabIndex = typeof tabIndex === "string" ? parseInt(tabIndex) : tabIndex;
-    return (React__default.default.createElement("div", { className: `${settings.prefix}--list-box__field`, tabIndex: (!disabled && numTabIndex) || -1, ...rest }, children));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * `ListBoxField` is responsible for creating the containing node for valid
+ * elements inside of a field. It also provides a11y-related attributes like
+ * `role` to make sure a user can focus the given field.
+ */
+function ListBoxField({ children, disabled, tabIndex, ...rest }) {
+    const numTabIndex = typeof tabIndex === "string" ? parseInt(tabIndex) : tabIndex;
+    return (React__default.default.createElement("div", { className: `${settings.prefix}--list-box__field`, tabIndex: (!disabled && numTabIndex) || -1, ...rest }, children));
 }
 
 exports.default = ListBoxField;

package/dist/cjs/internal/ListBox/ListBoxMenu.js

@@ -9,25 +9,25 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
- * class into a single component. It is also being used to validate given
- * `children` components.
- */
-const ListBoxMenu = React__default.default.forwardRef(function ListBoxMenu({ children, id, ...rest }, ref) {
-    return (React__default.default.createElement("div", { ref: ref, id: id, className: `${settings.prefix}--list-box__menu`, role: "listbox", ...rest }, children));
-});
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
+ * class into a single component. It is also being used to validate given
+ * `children` components.
+ */
+const ListBoxMenu = React__default.default.forwardRef(function ListBoxMenu({ children, id, ...rest }, ref) {
+    return (React__default.default.createElement("div", { ref: ref, id: id, className: `${settings.prefix}--list-box__menu`, role: "listbox", ...rest }, children));
+});
 ListBoxMenu.displayName = "ListBoxMenu";
 
 exports.default = ListBoxMenu;

package/dist/cjs/internal/ListBox/ListBoxMenuIcon.js

@@ -12,37 +12,37 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-const translationIds = {
-    "close.menu": "close.menu",
-    "open.menu": "open.menu",
-};
-const defaultTranslations = {
-    [translationIds["close.menu"]]: "Close menu",
-    [translationIds["open.menu"]]: "Open menu",
-};
-/**
- * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
- * state of the menu for a given `ListBox`
- */
-const ListBoxMenuIcon = ({ isOpen, translateWithId: t = (id) => defaultTranslations[id] }) => {
-    const className = cx__default.default(`${settings.prefix}--list-box__menu-icon`, {
-        [`${settings.prefix}--list-box__menu-icon--open`]: isOpen,
-    });
-    const description = isOpen ? t("close.menu") : t("open.menu");
-    return (React__default.default.createElement("div", { className: className },
-        React__default.default.createElement(icons.ChevronDown, { name: "chevron--down", "aria-label": description },
-            React__default.default.createElement("title", null, description))));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const translationIds = {
+    "close.menu": "close.menu",
+    "open.menu": "open.menu",
+};
+const defaultTranslations = {
+    [translationIds["close.menu"]]: "Close menu",
+    [translationIds["open.menu"]]: "Open menu",
+};
+/**
+ * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+const ListBoxMenuIcon = ({ isOpen, translateWithId: t = (id) => defaultTranslations[id] }) => {
+    const className = cx__default.default(`${settings.prefix}--list-box__menu-icon`, {
+        [`${settings.prefix}--list-box__menu-icon--open`]: isOpen,
+    });
+    const description = isOpen ? t("close.menu") : t("open.menu");
+    return (React__default.default.createElement("div", { className: className },
+        React__default.default.createElement(icons.ChevronDown, { name: "chevron--down", "aria-label": description },
+            React__default.default.createElement("title", null, description))));
 };
 
 exports.default = ListBoxMenuIcon;