@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/helpers/useInterval.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+export function useInterval(callback, delay) {
+    const savedCallback = React.useRef(() => { });
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    React.useEffect(() => {
+        function tick() {
+            savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+    }, [delay]);
+}
+//# sourceMappingURL=useInterval.js.map

package/helpers/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"","sources":["../../../src/helpers/useInterval.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AAEH,MAAM,UAAU,WAAW,CAAC,QAAoB,EAAE,KAAoB;IACpE,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,SAAS,IAAI;YACX,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACpC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC"}

package/helpers/useIsomorphicLayout.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+//# sourceMappingURL=useIsomorphicLayout.d.ts.map

package/helpers/useIsomorphicLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayout.d.ts","sourceRoot":"","sources":["../../../src/helpers/useIsomorphicLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,eAAO,MAAM,yBAAyB,8BAAsD,CAAC"}

package/helpers/useIsomorphicLayout.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { canUseDOM } from './util';
+/**
+ * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
+ */
+export const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
+//# sourceMappingURL=useIsomorphicLayout.js.map

package/helpers/useIsomorphicLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayout.js","sourceRoot":"","sources":["../../../src/helpers/useIsomorphicLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC"}

package/helpers/util.d.ts

@@ -0,0 +1,166 @@
+/**
+ * @param {string} input - String to capitalize first letter
+ */
+export declare function capitalize(input: string): string;
+/**
+ * @param {string} prefix - String to prefix ID with
+ */
+export declare function getUniqueId(prefix?: string): string;
+/**
+ * @param { any } this - "This" reference
+ * @param { Function } func - Function to debounce
+ * @param { number } wait - Debounce amount
+ */
+export declare function debounce(this: any, func: (...args: any[]) => any, wait: number): (...args: any[]) => void;
+/** This function returns whether or not an element is within the viewable area of a container. If partial is true,
+ * then this function will return true even if only part of the element is in view.
+ *
+ * @param {HTMLElement} container  The container to check if the element is in view of.
+ * @param {HTMLElement} element    The element to check if it is view
+ * @param {boolean} partial   true if partial view is allowed
+ * @param {boolean} strict    true if strict mode is set, never consider the container width and element width
+ *
+ * @returns { boolean } True if the component is in View.
+ */
+export declare function isElementInView(container: HTMLElement, element: HTMLElement, partial: boolean, strict?: boolean): boolean;
+/** This function returns the side the element is out of view on (right, left or both)
+ *
+ * @param {HTMLElement} container    The container to check if the element is in view of.
+ * @param {HTMLElement} element      The element to check if it is view
+ *
+ * @returns {string} right if the element is of the right, left if element is off the left or both if it is off on both sides.
+ */
+export declare function sideElementIsOutOfView(container: HTMLElement, element: HTMLElement): string;
+/** Interpolates a parameterized templateString using values from a templateVars object.
+ * The templateVars object should have keys and values which match the templateString's parameters.
+ * Example:
+ *    const templateString: 'My name is ${firstName} ${lastName}';
+ *    const templateVars: {
+ *      firstName: 'Jon'
+ *      lastName: 'Dough'
+ *    };
+ *    const result = fillTemplate(templateString, templateVars);
+ *    // "My name is Jon Dough"
+ *
+ * @param {string} templateString  The string passed by the consumer
+ * @param {object} templateVars The variables passed to the string
+ *
+ * @returns {string} The template string literal result
+ */
+export declare function fillTemplate(templateString: string, templateVars: any): string;
+/**
+ * This function allows for keyboard navigation through dropdowns. The custom argument is optional.
+ *
+ * @param {number} index The index of the element you're on
+ * @param {number} innerIndex Inner index number
+ * @param {string} position The orientation of the dropdown
+ * @param {string[]} refsCollection Array of refs to the items in the dropdown
+ * @param {object[]} kids Array of items in the dropdown
+ * @param {boolean} [custom] Allows for handling of flexible content
+ */
+export declare function keyHandler(index: number, innerIndex: number, position: string, refsCollection: any[], kids: any[], custom?: boolean): void;
+/** This function returns a list of tabbable items in a container
+ *
+ *  @param {any} containerRef to the container
+ *  @param {string} tababbleSelectors CSS selector string of tabbable items
+ */
+export declare function findTabbableElements(containerRef: any, tababbleSelectors: string): any[];
+/** This function is a helper for keyboard navigation through dropdowns.
+ *
+ * @param {number} index The index of the element you're on
+ * @param {string} position The orientation of the dropdown
+ * @param {string[]} collection Array of refs to the items in the dropdown
+ */
+export declare function getNextIndex(index: number, position: string, collection: any[]): number;
+/** This function is a helper for pluralizing strings.
+ *
+ * @param {number} i The quantity of the string you want to pluralize
+ * @param {string} singular The singular version of the string
+ * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
+ *                 Defaults to adding an 's'.
+ */
+export declare function pluralize(i: number, singular: string, plural?: string): string;
+/**
+ * This function is a helper for turning arrays of breakpointMod objects for flex and grid into style object
+ *
+ * @param {object} mods The modifiers object
+ * @param {string} css-variable The appropriate css variable for the component
+ */
+export declare const setBreakpointCssVars: (mods: {
+    default?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+    '3xl'?: string;
+}, cssVar: string) => React.CSSProperties;
+export interface Mods {
+    default?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+    '3xl'?: string;
+}
+/**
+ * This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
+ *
+ * @param {object} mods The modifiers object
+ * @param {any} styles The appropriate styles object for the component
+ */
+export declare const formatBreakpointMods: (mods: Mods, styles: any, stylePrefix?: string, breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', vertical?: boolean) => any;
+/**
+ * Return the breakpoint for the given height
+ *
+ * @param {number | null} height The height to check
+ * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+ */
+export declare const getVerticalBreakpoint: (height: number) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Return the breakpoint for the given width
+ *
+ * @param {number | null} width The width to check
+ * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+ */
+export declare const getBreakpoint: (width: number) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ *
+ * @param {string} s string to make camelCased
+ */
+export declare const toCamel: (s: string) => string;
+/**
+ * Copied from exenv
+ */
+export declare const canUseDOM: boolean;
+/**
+ * Calculate the width of the text
+ * Example:
+ * getTextWidth('my text', node)
+ *
+ * @param {string} text The text to calculate the width for
+ * @param {HTMLElement} node The HTML element
+ */
+export declare const getTextWidth: (text: string, node: HTMLElement) => number;
+/**
+ * Get the inner dimensions of an element
+ *
+ * @param {HTMLElement} node HTML element to calculate the inner dimensions for
+ */
+export declare const innerDimensions: (node: HTMLElement) => {
+    height: number;
+    width: number;
+};
+/**
+ * This function is a helper for truncating text content on the left, leaving the right side of the content in view
+ *
+ * @param {HTMLElement} node HTML element
+ * @param {string} value The original text value
+ */
+export declare const trimLeft: (node: HTMLElement, value: string) => void;
+/**
+ * @param {string[]} events - Operations to prevent when disabled
+ */
+export declare const preventedEvents: (events: string[]) => {};
+//# sourceMappingURL=util.d.ts.map

package/helpers/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/helpers/util.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAEvC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,SAAO,UAOxC;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,IAAI,EAAE,MAAM,aAE5D,GAAG,EAAE,UAIvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,GAAE,OAAe,GACtB,OAAO,CAoBT;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM,CAuB3F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,UAErE;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,GAAG,EAAE,EACrB,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,UAAQ,QAwDf;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,GAAG,GAAG,EAAE,CAMxF;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,MAAM,CAoBvF;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,UAKrE;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,SACzB;IACJ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,UACO,MAAM,KACb,MAAM,aAKN,CAAC;AAEJ,MAAM,WAAW,IAAI;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,SACzB,IAAI,UACF,GAAG,gBACE,MAAM,eACN,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,aAC/C,OAAO,QAgCnB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,WAAY,MAAM,KAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAoB9F,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,UAAW,MAAM,KAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAoBrF,CAAC;AAOF;;;GAGG;AACH,eAAO,MAAM,OAAO,MAAO,MAAM,WAAyC,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,SAAS,SAAwF,CAAC;AAE/G;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,SAAU,MAAM,QAAQ,WAAW,WAiD3D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,SAAU,WAAW;;;CAShD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,SAAU,WAAW,SAAS,MAAM,SAqBxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,WAAY,MAAM,EAAE,OAS7C,CAAC"}

package/helpers/util.js

@@ -0,0 +1,451 @@
+import * as ReactDOM from 'react-dom';
+import { globalWidthBreakpoints, globalHeightBreakpoints, SIDE } from './constants';
+/**
+ * @param {string} input - String to capitalize first letter
+ */
+export function capitalize(input) {
+    return input[0].toUpperCase() + input.substring(1);
+}
+/**
+ * @param {string} prefix - String to prefix ID with
+ */
+export function getUniqueId(prefix = 'pf') {
+    const uid = new Date().getTime() +
+        Math.random()
+            .toString(36)
+            .slice(2);
+    return `${prefix}-${uid}`;
+}
+/**
+ * @param { any } this - "This" reference
+ * @param { Function } func - Function to debounce
+ * @param { number } wait - Debounce amount
+ */
+export function debounce(func, wait) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+}
+/** This function returns whether or not an element is within the viewable area of a container. If partial is true,
+ * then this function will return true even if only part of the element is in view.
+ *
+ * @param {HTMLElement} container  The container to check if the element is in view of.
+ * @param {HTMLElement} element    The element to check if it is view
+ * @param {boolean} partial   true if partial view is allowed
+ * @param {boolean} strict    true if strict mode is set, never consider the container width and element width
+ *
+ * @returns { boolean } True if the component is in View.
+ */
+export function isElementInView(container, element, partial, strict = false) {
+    if (!container || !element) {
+        return false;
+    }
+    const containerBounds = container.getBoundingClientRect();
+    const elementBounds = element.getBoundingClientRect();
+    const containerBoundsLeft = Math.ceil(containerBounds.left);
+    const containerBoundsRight = Math.floor(containerBounds.right);
+    const elementBoundsLeft = Math.ceil(elementBounds.left);
+    const elementBoundsRight = Math.floor(elementBounds.right);
+    // Check if in view
+    const isTotallyInView = elementBoundsLeft >= containerBoundsLeft && elementBoundsRight <= containerBoundsRight;
+    const isPartiallyInView = (partial || (!strict && containerBounds.width < elementBounds.width)) &&
+        ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) ||
+            (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight));
+    // Return outcome
+    return isTotallyInView || isPartiallyInView;
+}
+/** This function returns the side the element is out of view on (right, left or both)
+ *
+ * @param {HTMLElement} container    The container to check if the element is in view of.
+ * @param {HTMLElement} element      The element to check if it is view
+ *
+ * @returns {string} right if the element is of the right, left if element is off the left or both if it is off on both sides.
+ */
+export function sideElementIsOutOfView(container, element) {
+    const containerBounds = container.getBoundingClientRect();
+    const elementBounds = element.getBoundingClientRect();
+    const containerBoundsLeft = Math.floor(containerBounds.left);
+    const containerBoundsRight = Math.floor(containerBounds.right);
+    const elementBoundsLeft = Math.floor(elementBounds.left);
+    const elementBoundsRight = Math.floor(elementBounds.right);
+    // Check if in view
+    const isOffLeft = elementBoundsLeft < containerBoundsLeft;
+    const isOffRight = elementBoundsRight > containerBoundsRight;
+    let side = SIDE.NONE;
+    if (isOffRight && isOffLeft) {
+        side = SIDE.BOTH;
+    }
+    else if (isOffRight) {
+        side = SIDE.RIGHT;
+    }
+    else if (isOffLeft) {
+        side = SIDE.LEFT;
+    }
+    // Return outcome
+    return side;
+}
+/** Interpolates a parameterized templateString using values from a templateVars object.
+ * The templateVars object should have keys and values which match the templateString's parameters.
+ * Example:
+ *    const templateString: 'My name is ${firstName} ${lastName}';
+ *    const templateVars: {
+ *      firstName: 'Jon'
+ *      lastName: 'Dough'
+ *    };
+ *    const result = fillTemplate(templateString, templateVars);
+ *    // "My name is Jon Dough"
+ *
+ * @param {string} templateString  The string passed by the consumer
+ * @param {object} templateVars The variables passed to the string
+ *
+ * @returns {string} The template string literal result
+ */
+export function fillTemplate(templateString, templateVars) {
+    return templateString.replace(/\${(.*?)}/g, (_, match) => templateVars[match] || '');
+}
+/**
+ * This function allows for keyboard navigation through dropdowns. The custom argument is optional.
+ *
+ * @param {number} index The index of the element you're on
+ * @param {number} innerIndex Inner index number
+ * @param {string} position The orientation of the dropdown
+ * @param {string[]} refsCollection Array of refs to the items in the dropdown
+ * @param {object[]} kids Array of items in the dropdown
+ * @param {boolean} [custom] Allows for handling of flexible content
+ */
+export function keyHandler(index, innerIndex, position, refsCollection, kids, custom = false) {
+    if (!Array.isArray(kids)) {
+        return;
+    }
+    const isMultiDimensional = refsCollection.filter(ref => ref)[0].constructor === Array;
+    let nextIndex = index;
+    let nextInnerIndex = innerIndex;
+    if (position === 'up') {
+        if (index === 0) {
+            // loop back to end
+            nextIndex = kids.length - 1;
+        }
+        else {
+            nextIndex = index - 1;
+        }
+    }
+    else if (position === 'down') {
+        if (index === kids.length - 1) {
+            // loop back to beginning
+            nextIndex = 0;
+        }
+        else {
+            nextIndex = index + 1;
+        }
+    }
+    else if (position === 'left') {
+        if (innerIndex === 0) {
+            nextInnerIndex = refsCollection[index].length - 1;
+        }
+        else {
+            nextInnerIndex = innerIndex - 1;
+        }
+    }
+    else if (position === 'right') {
+        if (innerIndex === refsCollection[index].length - 1) {
+            nextInnerIndex = 0;
+        }
+        else {
+            nextInnerIndex = innerIndex + 1;
+        }
+    }
+    if (refsCollection[nextIndex] === null ||
+        refsCollection[nextIndex] === undefined ||
+        (isMultiDimensional &&
+            (refsCollection[nextIndex][nextInnerIndex] === null || refsCollection[nextIndex][nextInnerIndex] === undefined))) {
+        keyHandler(nextIndex, nextInnerIndex, position, refsCollection, kids, custom);
+    }
+    else if (custom) {
+        if (refsCollection[nextIndex].focus) {
+            refsCollection[nextIndex].focus();
+        }
+        // eslint-disable-next-line react/no-find-dom-node
+        const element = ReactDOM.findDOMNode(refsCollection[nextIndex]);
+        element.focus();
+    }
+    else if (position !== 'tab') {
+        if (isMultiDimensional) {
+            refsCollection[nextIndex][nextInnerIndex].focus();
+        }
+        else {
+            refsCollection[nextIndex].focus();
+        }
+    }
+}
+/** This function returns a list of tabbable items in a container
+ *
+ *  @param {any} containerRef to the container
+ *  @param {string} tababbleSelectors CSS selector string of tabbable items
+ */
+export function findTabbableElements(containerRef, tababbleSelectors) {
+    const tabbable = containerRef.current.querySelectorAll(tababbleSelectors);
+    const list = Array.prototype.filter.call(tabbable, function (item) {
+        return item.tabIndex >= '0';
+    });
+    return list;
+}
+/** This function is a helper for keyboard navigation through dropdowns.
+ *
+ * @param {number} index The index of the element you're on
+ * @param {string} position The orientation of the dropdown
+ * @param {string[]} collection Array of refs to the items in the dropdown
+ */
+export function getNextIndex(index, position, collection) {
+    let nextIndex;
+    if (position === 'up') {
+        if (index === 0) {
+            // loop back to end
+            nextIndex = collection.length - 1;
+        }
+        else {
+            nextIndex = index - 1;
+        }
+    }
+    else if (index === collection.length - 1) {
+        // loop back to beginning
+        nextIndex = 0;
+    }
+    else {
+        nextIndex = index + 1;
+    }
+    if (collection[nextIndex] === undefined || collection[nextIndex][0] === null) {
+        return getNextIndex(nextIndex, position, collection);
+    }
+    else {
+        return nextIndex;
+    }
+}
+/** This function is a helper for pluralizing strings.
+ *
+ * @param {number} i The quantity of the string you want to pluralize
+ * @param {string} singular The singular version of the string
+ * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
+ *                 Defaults to adding an 's'.
+ */
+export function pluralize(i, singular, plural) {
+    if (!plural) {
+        plural = `${singular}s`;
+    }
+    return `${i || 0} ${i === 1 ? singular : plural}`;
+}
+/**
+ * This function is a helper for turning arrays of breakpointMod objects for flex and grid into style object
+ *
+ * @param {object} mods The modifiers object
+ * @param {string} css-variable The appropriate css variable for the component
+ */
+export const setBreakpointCssVars = (mods, cssVar) => Object.entries(mods || {}).reduce((acc, [breakpoint, value]) => breakpoint === 'default' ? Object.assign(Object.assign({}, acc), { [cssVar]: value }) : Object.assign(Object.assign({}, acc), { [`${cssVar}-on-${breakpoint}`]: value }), {});
+/**
+ * This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
+ *
+ * @param {object} mods The modifiers object
+ * @param {any} styles The appropriate styles object for the component
+ */
+export const formatBreakpointMods = (mods, styles, stylePrefix = '', breakpoint, vertical) => {
+    if (!mods) {
+        return '';
+    }
+    if (breakpoint && !vertical) {
+        if (breakpoint in mods) {
+            return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpoint]}`)];
+        }
+        // the current breakpoint is not specified in mods, so we try to find the next nearest
+        const breakpointsOrder = ['2xl', 'xl', 'lg', 'md', 'sm', 'default'];
+        const breakpointsIndex = breakpointsOrder.indexOf(breakpoint);
+        for (let i = breakpointsIndex; i < breakpointsOrder.length; i++) {
+            if (breakpointsOrder[i] in mods) {
+                return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpointsOrder[i]]}`)];
+            }
+        }
+        return '';
+    }
+    return Object.entries(mods || {})
+        .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}${vertical && breakpoint !== 'default' ? '-height' : ''}`)
+        .map(toCamel)
+        .map(mod => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
+        .map(modifierKey => styles.modifiers[modifierKey])
+        .filter(Boolean)
+        .join(' ');
+};
+/**
+ * Return the breakpoint for the given height
+ *
+ * @param {number | null} height The height to check
+ * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+ */
+export const getVerticalBreakpoint = (height) => {
+    if (height === null) {
+        return null;
+    }
+    if (height >= globalHeightBreakpoints['2xl']) {
+        return '2xl';
+    }
+    if (height >= globalHeightBreakpoints.xl) {
+        return 'xl';
+    }
+    if (height >= globalHeightBreakpoints.lg) {
+        return 'lg';
+    }
+    if (height >= globalHeightBreakpoints.md) {
+        return 'md';
+    }
+    if (height >= globalHeightBreakpoints.sm) {
+        return 'sm';
+    }
+    return 'default';
+};
+/**
+ * Return the breakpoint for the given width
+ *
+ * @param {number | null} width The width to check
+ * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+ */
+export const getBreakpoint = (width) => {
+    if (width === null) {
+        return null;
+    }
+    if (width >= globalWidthBreakpoints['2xl']) {
+        return '2xl';
+    }
+    if (width >= globalWidthBreakpoints.xl) {
+        return 'xl';
+    }
+    if (width >= globalWidthBreakpoints.lg) {
+        return 'lg';
+    }
+    if (width >= globalWidthBreakpoints.md) {
+        return 'md';
+    }
+    if (width >= globalWidthBreakpoints.sm) {
+        return 'sm';
+    }
+    return 'default';
+};
+const camelize = (s) => s
+    .toUpperCase()
+    .replace('-', '')
+    .replace('_', '');
+/**
+ *
+ * @param {string} s string to make camelCased
+ */
+export const toCamel = (s) => s.replace(/([-_][a-z])/gi, camelize);
+/**
+ * Copied from exenv
+ */
+export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+/**
+ * Calculate the width of the text
+ * Example:
+ * getTextWidth('my text', node)
+ *
+ * @param {string} text The text to calculate the width for
+ * @param {HTMLElement} node The HTML element
+ */
+export const getTextWidth = (text, node) => {
+    const computedStyle = getComputedStyle(node);
+    // Firefox returns the empty string for .font, so this function creates the .font property manually
+    const getFontFromComputedStyle = () => {
+        let computedFont = '';
+        // Firefox uses percentages for font-stretch, but Canvas does not accept percentages
+        // so convert to keywords, as listed at:
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch
+        const fontStretchLookupTable = {
+            '50%': 'ultra-condensed',
+            '62.5%': 'extra-condensed',
+            '75%': 'condensed',
+            '87.5%': 'semi-condensed',
+            '100%': 'normal',
+            '112.5%': 'semi-expanded',
+            '125%': 'expanded',
+            '150%': 'extra-expanded',
+            '200%': 'ultra-expanded'
+        };
+        // If the retrieved font-stretch percentage isn't found in the lookup table, use
+        // 'normal' as a last resort.
+        let fontStretch;
+        if (computedStyle.fontStretch in fontStretchLookupTable) {
+            fontStretch = fontStretchLookupTable[computedStyle.fontStretch];
+        }
+        else {
+            fontStretch = 'normal';
+        }
+        computedFont =
+            computedStyle.fontStyle +
+                ' ' +
+                computedStyle.fontVariant +
+                ' ' +
+                computedStyle.fontWeight +
+                ' ' +
+                fontStretch +
+                ' ' +
+                computedStyle.fontSize +
+                '/' +
+                computedStyle.lineHeight +
+                ' ' +
+                computedStyle.fontFamily;
+        return computedFont;
+    };
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    context.font = computedStyle.font || getFontFromComputedStyle();
+    return context.measureText(text).width;
+};
+/**
+ * Get the inner dimensions of an element
+ *
+ * @param {HTMLElement} node HTML element to calculate the inner dimensions for
+ */
+export const innerDimensions = (node) => {
+    const computedStyle = getComputedStyle(node);
+    let width = node.clientWidth; // width with padding
+    let height = node.clientHeight; // height with padding
+    height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+    width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+    return { height, width };
+};
+/**
+ * This function is a helper for truncating text content on the left, leaving the right side of the content in view
+ *
+ * @param {HTMLElement} node HTML element
+ * @param {string} value The original text value
+ */
+export const trimLeft = (node, value) => {
+    const availableWidth = innerDimensions(node).width;
+    let newValue = value;
+    if (getTextWidth(value, node) > availableWidth) {
+        // we have text overflow, trim the text to the left and add ... in the front until it fits
+        while (getTextWidth(`...${newValue}`, node) > availableWidth) {
+            newValue = newValue.substring(1);
+        }
+        // replace text with our truncated text
+        if (node.value) {
+            node.value = `...${newValue}`;
+        }
+        else {
+            node.innerText = `...${newValue}`;
+        }
+    }
+    else {
+        if (node.value) {
+            node.value = value;
+        }
+        else {
+            node.innerText = value;
+        }
+    }
+};
+/**
+ * @param {string[]} events - Operations to prevent when disabled
+ */
+export const preventedEvents = (events) => events.reduce((handlers, eventToPrevent) => (Object.assign(Object.assign({}, handlers), { [eventToPrevent]: (event) => {
+        event.preventDefault();
+    } })), {});
+//# sourceMappingURL=util.js.map