@muraldevkit/ui-toolkit 4.66.0-dev-DhSN.1 → 4.66.0-dev-QELk.1

package/dist/esm/components/form/utils.js

@@ -1,219 +0,0 @@
-/**
- * Defines all of the possible actions a user can take with their keyboard in a select.
- * This is used to create a more human-friendly connection between the actions and
- * keyboard short cuts since multiple keys may perform the same action.
- * See getActionFromKey for more details.
- *
- * @todo - need to verify what the pageDown/Up keys do differently. They have a
- * 		different action in the getUpdatedIndex function but need to understand
- * 		a bit more.  This is not merge blocking for MVP
- */
-export const actions = {
-    // Closes the menu without changing the value
-    Close: 0,
-    // Selects an item and closes the menu in one key press
-    CloseSelect: 1,
-    // Opens the menu and moves focus to the first item in the the menu
-    First: 2,
-    // Opens the menu and moves focus to the last item in the menu
-    Last: 3,
-    // Moves focus to the next item in the list
-    Next: 4,
-    // Displays the menu and moves focus to the selected item
-    Open: 5,
-    PageDown: 6,
-    PageUp: 7,
-    // Moves focus to the previous item in the list
-    Previous: 8,
-    // Selects the item without closing the list??
-    // I don't think this is used anywhere
-    // Select: 9,
-    // The user is free-form typing to find an item in the menu
-    Type: 10
-};
-/**
- * Map a key press to an action (see the )
- *
- * @param {KeyboardEvent} event - keyboard event
- * @param {boolean} isMenuOpen - dropdown menu state
- * @param {string | undefined} search - current searchstring to determine how to handle space presses
- * @returns {number | undefined} - returns action number or quits from function execution
- */
-export const getActionFromKey = (event, isMenuOpen, search) => {
-    const { key, altKey, ctrlKey, metaKey } = event;
-    // all keys that will do the default open action
-    const openKeys = ['ArrowDown', 'ArrowUp', ' '];
-    // handle opening when closed
-    if (!isMenuOpen && openKeys.includes(key))
-        return actions.Open;
-    // home and end move the selected option when open or closed
-    if (key === 'Home')
-        return actions.First;
-    if (key === 'End')
-        return actions.Last;
-    // handle typing characters when open or closed
-    if (key === 'Backspace' ||
-        key === 'Clear' ||
-        (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) ||
-        (search !== '' && key === ' ')) {
-        return actions.Type;
-    }
-    // handle shortcuts only allowed when the menu is open
-    if (isMenuOpen) {
-        switch (key) {
-            case 'ArrowUp':
-                return altKey ? actions.CloseSelect : actions.Previous;
-            case 'ArrowDown':
-                return !altKey ? actions.Next : undefined;
-            case 'PageUp':
-                return actions.PageUp;
-            case 'PageDown':
-                return actions.PageDown;
-            case 'Escape':
-                return actions.Close;
-            case 'Enter':
-            case ' ':
-                return actions.CloseSelect;
-            default:
-                break;
-        }
-    }
-};
-/**
- * Get an updated item index based on the action
- *
- * @param {number} currentIndex - index of the active menu item
- * @param {number} maxIndex - last menu item's index
- * @param {action} action - keyboard key action
- * @returns {number} - returns updated index
- */
-export const getUpdatedIndex = (currentIndex, maxIndex = 0, action) => {
-    switch (action) {
-        case actions.First:
-            return 0;
-        case actions.Last:
-            return maxIndex;
-        case actions.Previous:
-            return Math.max(0, currentIndex === null ? 0 : currentIndex - 1);
-        case actions.Next:
-            return Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + 1);
-        case actions.PageUp:
-            return Math.max(0, currentIndex === null ? 0 : currentIndex - maxIndex);
-        case actions.PageDown:
-            return Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + maxIndex);
-        default:
-            return currentIndex;
-    }
-};
-/**
- * Checks if the select menu items has scrollable overflow
- *
- * @param {HTMLElement} menu - select menu component
- * @returns {boolean} - true if the menu has overflow content
- */
-export const isScrollable = (menu) => menu && menu.clientHeight < menu.scrollHeight;
-/**
- * Ensures a given child element is within the parents's visible scroll area.
- * If the child is not visible, it scrolls the parent element.
- *
- * @param {HTMLElement} childEl - clicked/focused select item
- * @param {HTMLElement} scrollParent - select menu component
- * @todo - POST MVP - this could be a more reusable util function for other components
- * @todo - POST MVP - the marginY should be more dynamic
- */
-export const maintainScrollVisibility = (childEl, scrollParent) => {
-    const { offsetHeight, offsetTop } = childEl;
-    const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
-    const isAbove = offsetTop < scrollTop;
-    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-    // total amount of select item's Y-axis spacing
-    const marginY = 4 + 4;
-    if (isAbove) {
-        scrollParent.scrollTo(0, offsetTop - marginY);
-    }
-    else if (isBelow) {
-        scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + marginY);
-    }
-};
-/**
- * Filters an array of items against an input string
- * returns an array of options that begin with the filter string, case-independent
- *
- * @param {Element[]} options - menu items list
- * @param {string} filter - pressed letters combination
- * @returns {Element[]} - filtered options
- */
-const filterOptions = (options, filter) => {
-    return options.filter((option) => {
-        var _a;
-        const matches = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(filter.toLowerCase())) === 0;
-        return matches;
-    });
-};
-/**
- * Checks if the pressed letter is the same as previously pressed
- *
- * @param {string[]} array - filter string split by letters
- * @returns {boolean} - if the pressed letter is the same as previously pressed
- */
-const allSameLetter = (array) => array.every((letter) => letter === array[0]);
-/**
- * Returns the index of an option from an array of options, based on a search string
- * if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
- *
- * @param {Element[]} options - menu items list
- * @param {string} filter - pressed letters combination
- * @param {number} startIndex - start index
- * @returns {number} - menu item's index
- */
-export const getIndexByLetter = (options, filter, startIndex = 0) => {
-    const orderedOptions = [...options.slice(startIndex), ...options.slice(0, startIndex)];
-    const firstMatch = filterOptions(orderedOptions, filter)[0];
-    // first check if there is an exact match for the typed string
-    if (firstMatch)
-        return options.indexOf(firstMatch);
-    // if the same letter is being repeated, cycle through first-letter matches
-    else if (allSameLetter(filter.split(''))) {
-        const matches = filterOptions(orderedOptions, filter[0]);
-        return options.indexOf(matches[0]);
-    }
-    // if no matches, return -1
-    else
-        return -1;
-};
-/**
- * Waits a predetermined time before calling a function
- *
- * @param {Function} func - function to call after timeout
- * @param {number} timeout - time to wait before calling function
- * @param {number} debounce - existing debounce to clear
- * @param {Function} callback - callback function to update debounce
- * @returns {Function} - function to reset debounce and call callback
- * @todo - 4969 investigate combining this debounce function with the modal debounce function
- */
-export const debounce = (func, timeout = 500, debounce, callback) => {
-    if (debounce !== null) {
-        clearTimeout(debounce);
-        debounce = null;
-    }
-    return () => {
-        debounce = window.setTimeout(() => {
-            func.apply(this);
-        }, timeout);
-        callback(debounce);
-    };
-};
-/**
- * Generates the 'aria-describedby' attribute from multiple ids
- *
- * @param {Array<string | undefined>} args ids
- * @returns {GetAriaDescribedByReturn} an object with aria-describedby
- */
-export function getDescribedby(...args) {
-    const describedby = args.filter((str) => Boolean(str)).join(' ');
-    if (describedby === '')
-        return {};
-    return {
-        'aria-describedby': describedby
-    };
-}

package/dist/esm/components/grid/MrlCol/MrlCol.js

@@ -1,69 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { GridSizes } from '../constants';
-const getBootstrapClass = (size, type, val) => size === 'col' || size === 'xs' ? `${type}-${val}` : `${type}-${size}-${val}`;
-/**
- * Creates the size classes for the grid.
- * @param props - component props
- * @returns an array of size classes based on bootstrap grid API
- */
-const createSizeClasses = (props) => {
-    const classes = [];
-    for (const size of GridSizes) {
-        // get the value based on the prop key from the component props
-        const value = props[size];
-        // create the size class based on the value using the bootstrap grid API
-        if (value) {
-            // if the value is a number, then it is a column size
-            if (typeof value === 'number') {
-                classes.push(getBootstrapClass(size, 'col', value));
-                continue;
-            }
-            // if the value is an object, then we need to compose multiple classes
-            // based on the keyvalue pairings
-            if (value !== null && typeof value === 'object') {
-                for (const [key, val] of Object.entries(value)) {
-                    if (val === 0 || val === undefined)
-                        continue;
-                    classes.push(getBootstrapClass(size, key, val));
-                }
-            }
-        }
-    }
-    if (classes.length === 0)
-        classes.push('col');
-    return classes;
-};
-/**
- * Gets the grid size props from the component props.
- * @param props  - component props
- * @returns object of grid size props
- */
-const getGridProps = (props) => {
-    const { col, xs, sm, md, lg, xl, xxl } = props;
-    // eslint-disable-next-line sort-keys
-    return { col, xs, sm, md, lg, xl, xxl };
-};
-/**
- * MrlCol React component.
- * @param props - component props
- * @returns a MrlCol React component.
- */
-export function MrlCol(props) {
-    const { children, className = '' } = props, rest = __rest(props, ["children", "className"]);
-    const gridProps = getGridProps(props);
-    const columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);
-    const allClasses = classnames(className, columnClasses);
-    return (React.createElement("div", Object.assign({}, rest, { className: allClasses }), children));
-}

package/dist/esm/components/grid/MrlCol/index.js

@@ -1 +0,0 @@
-export { MrlCol } from './MrlCol';

package/dist/esm/components/grid/MrlGrid/MrlGrid.js

@@ -1,25 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import '../grid.variables.css';
-import '../grid.global.css';
-/**
- * MrlCol React component.
- * @param props - component props
- * @returns a MrlCol React component.
- */
-export function MrlGrid(_a) {
-    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
-    const allClasses = classnames('container', className);
-    return (React.createElement("div", Object.assign({}, rest, { className: allClasses }), children));
-}

package/dist/esm/components/grid/MrlGrid/index.js

@@ -1 +0,0 @@
-export { MrlGrid } from './MrlGrid';

package/dist/esm/components/grid/MrlRow/MrlRow.js

@@ -1,25 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-/**
- * MrlRow React component.
- * @param props - component props
- * @returns a MrlRow React component.
- */
-export function MrlRow(_a) {
-    var { align, children, className = '', justify } = _a, rest = __rest(_a, ["align", "children", "className", "justify"]);
-    const alignClass = align ? `align-items-${align}` : '';
-    const justifyClass = justify && `justify-content-${justify}`;
-    const allClasses = classnames('row', className, alignClass, justifyClass);
-    return (React.createElement("div", Object.assign({ className: allClasses }, rest), children));
-}

package/dist/esm/components/grid/MrlRow/index.js

@@ -1 +0,0 @@
-export { MrlRow } from './MrlRow';

package/dist/esm/components/grid/constants.js

@@ -1,12 +0,0 @@
-/**
- * Available grid sizes
- */
-export const GridSizes = [
-    'col',
-    'xs',
-    'sm',
-    'md',
-    'lg',
-    'xl',
-    'xxl'
-];