@boomerang-io/carbon-addons-boomerang-react 4.6.11 → 4.6.13-beta.0

package/dist/esm/hooks/usePortal.js

@@ -1,79 +1,79 @@
 import { useRef, useEffect } from '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 = useRef(null);
-    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 = useRef(null);
+    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();
 }
 
 export { usePortal as default };

package/dist/esm/hooks/useWindowSize.js

@@ -1,38 +1,38 @@
 import { useState, useEffect } from '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] = useState({
-        width: undefined,
-        height: undefined,
-    });
-    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] = useState({
+        width: undefined,
+        height: undefined,
+    });
+    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;
 }
 
 export { useWindowSize as default };

package/dist/esm/internal/ListBox/ListBox.js

@@ -2,47 +2,47 @@ import React from 'react';
 import cx from 'classnames';
 import { prefix } from '../settings.js';
 
-/*
-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.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({
-        [containerClassName]: !!containerClassName,
-        [`${prefix}--list-box`]: true,
-        [`${prefix}--list-box--${size}`]: size,
-        [`${prefix}--list-box--inline`]: type === "inline",
-        [`${prefix}--list-box--disabled`]: disabled,
-        [`${prefix}--list-box--light`]: light,
-        [`${prefix}--list-box--expanded`]: isOpen,
-        [`${prefix}--list-box--warning`]: showWarning,
-    });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...rest, className: className, ref: ref, onKeyDown: handleOnKeyDown, onClick: handleClick, "data-invalid": invalid || undefined }, children),
-        invalid ? React.createElement("div", { className: `${prefix}--form-requirement` }, invalidText) : null,
-        showWarning ? React.createElement("div", { className: `${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.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({
+        [containerClassName]: !!containerClassName,
+        [`${prefix}--list-box`]: true,
+        [`${prefix}--list-box--${size}`]: size,
+        [`${prefix}--list-box--inline`]: type === "inline",
+        [`${prefix}--list-box--disabled`]: disabled,
+        [`${prefix}--list-box--light`]: light,
+        [`${prefix}--list-box--expanded`]: isOpen,
+        [`${prefix}--list-box--warning`]: showWarning,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ...rest, className: className, ref: ref, onKeyDown: handleOnKeyDown, onClick: handleClick, "data-invalid": invalid || undefined }, children),
+        invalid ? React.createElement("div", { className: `${prefix}--form-requirement` }, invalidText) : null,
+        showWarning ? React.createElement("div", { className: `${prefix}--form-requirement` }, warnText) : null));
+});
 ListBox.displayName = "ListBox";
 
 export { ListBox as default };

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

@@ -1,25 +1,25 @@
 import React from 'react';
 import { prefix } from '../settings.js';
 
-/*
-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.createElement("div", { className: `${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.createElement("div", { className: `${prefix}--list-box__field`, tabIndex: (!disabled && numTabIndex) || -1, ...rest }, children));
 }
 
 export { ListBoxField as default };

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

@@ -1,25 +1,25 @@
 import React from 'react';
 import { prefix } from '../settings.js';
 
-/*
-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.forwardRef(function ListBoxMenu({ children, id, ...rest }, ref) {
-    return (React.createElement("div", { ref: ref, id: id, className: `${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.forwardRef(function ListBoxMenu({ children, id, ...rest }, ref) {
+    return (React.createElement("div", { ref: ref, id: id, className: `${prefix}--list-box__menu`, role: "listbox", ...rest }, children));
+});
 ListBoxMenu.displayName = "ListBoxMenu";
 
 export { ListBoxMenu as default };

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

@@ -3,37 +3,37 @@ import cx from 'classnames';
 import { ChevronDown } from '@carbon/react/icons';
 import { prefix } from '../settings.js';
 
-/*
-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(`${prefix}--list-box__menu-icon`, {
-        [`${prefix}--list-box__menu-icon--open`]: isOpen,
-    });
-    const description = isOpen ? t("close.menu") : t("open.menu");
-    return (React.createElement("div", { className: className },
-        React.createElement(ChevronDown, { name: "chevron--down", "aria-label": description },
-            React.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(`${prefix}--list-box__menu-icon`, {
+        [`${prefix}--list-box__menu-icon--open`]: isOpen,
+    });
+    const description = isOpen ? t("close.menu") : t("open.menu");
+    return (React.createElement("div", { className: className },
+        React.createElement(ChevronDown, { name: "chevron--down", "aria-label": description },
+            React.createElement("title", null, description))));
 };
 
 export { ListBoxMenuIcon as default, translationIds };

package/dist/esm/internal/ListBox/ListBoxMenuItem.js

@@ -2,44 +2,44 @@ import React, { useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 import { prefix } from '../settings.js';
 
-/*
-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.
- */
-function useIsTruncated(ref) {
-    const [isTruncated, setIsTruncated] = useState(false);
-    useEffect(() => {
-        const { offsetWidth, scrollWidth } = ref.current;
-        setIsTruncated(offsetWidth < scrollWidth);
-    }, [ref, setIsTruncated]);
-    return isTruncated;
-}
-/**
- * `ListBoxMenuItem` is a helper component for managing the container class
- * name, alongside any classes for any corresponding states, for a generic list
- * box menu item.
- */
-const ListBoxMenuItem = React.forwardRef(function ListBoxMenuItem({ children, isActive, isHighlighted, title, ...rest }, forwardedRef) {
-    const ref = useRef(null);
-    const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
-    const className = cx(`${prefix}--list-box__menu-item`, {
-        [`${prefix}--list-box__menu-item--active`]: isActive,
-        [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted,
-    });
-    return (React.createElement("div", { ...rest, className: className, title: isTruncated ? title : undefined },
-        React.createElement("div", { className: `${prefix}--list-box__menu-item__option`, ref: forwardedRef?.menuItemOptionRef || ref }, children)));
-});
-ListBoxMenuItem.displayName = "ListBoxMenuItem";
-ListBoxMenuItem.defaultProps = {
-    isActive: false,
-    isHighlighted: false,
+/*
+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.
+ */
+function useIsTruncated(ref) {
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const { offsetWidth, scrollWidth } = ref.current;
+        setIsTruncated(offsetWidth < scrollWidth);
+    }, [ref, setIsTruncated]);
+    return isTruncated;
+}
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+const ListBoxMenuItem = React.forwardRef(function ListBoxMenuItem({ children, isActive, isHighlighted, title, ...rest }, forwardedRef) {
+    const ref = useRef(null);
+    const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
+    const className = cx(`${prefix}--list-box__menu-item`, {
+        [`${prefix}--list-box__menu-item--active`]: isActive,
+        [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted,
+    });
+    return (React.createElement("div", { ...rest, className: className, title: isTruncated ? title : undefined },
+        React.createElement("div", { className: `${prefix}--list-box__menu-item__option`, ref: forwardedRef?.menuItemOptionRef || ref }, children)));
+});
+ListBoxMenuItem.displayName = "ListBoxMenuItem";
+ListBoxMenuItem.defaultProps = {
+    isActive: false,
+    isHighlighted: false,
 };
 
 export { ListBoxMenuItem as default };