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

package/dist/esm/components/form/hooks/useActiveColor.js

@@ -1,20 +0,0 @@
-import { useState } from 'react';
-/**
- * Custom hook used to track the active color state of inputs
- *
- * @param {InputStates | undefined} state - the input state
- * @returns the hasActiveColor state and handler
- */
-export function useActiveColor(state) {
-    const [hasActiveColor, setHasActiveColor] = useState(false);
-    return {
-        hasActiveColor,
-        setHasActiveColor: (hasActiveColor) => {
-            if (state === 'read-only')
-                return;
-            if (state === 'disabled')
-                return;
-            setHasActiveColor(hasActiveColor);
-        }
-    };
-}

package/dist/esm/components/form/hooks/useIsEditable.js

@@ -1,39 +0,0 @@
-import { useState } from 'react';
-/**
- * Custom hook used to track the edit state of a text input.
- *
- * isEditing represents if someone has actively decided to start editing a field.
- * isEditable controls if the input field can be interacted with directly.
- *
- * This leaves open the possibility for a field to be editable even if someone has not explicitly decided to edit it.
- * @param param - useIsEditable options
- * @param param.changeHandler - optional set handler
- * @param param.initialValue - the text input initial value
- * @param param.state - the text input state
- * @param param.value - optional control value
- * @returns the isEditable, isEditing state and handler
- */
-export function useIsEditable({ changeHandler, initialValue, state, value }) {
-    const [isEditable, setIsEditable] = useState(initialValue);
-    const isEditableEffectiveValue = value !== undefined ? value : isEditable;
-    const [isEditing, setIsEditing] = useState(false);
-    return {
-        isEditable: isEditableEffectiveValue,
-        isEditing,
-        setIsEditable: (isEditableUpdate) => {
-            if (state === 'read-only')
-                return;
-            if (state === 'disabled')
-                return;
-            if (typeof changeHandler === 'function') {
-                changeHandler(isEditableUpdate);
-            }
-            else {
-                setIsEditable(isEditableUpdate);
-            }
-        },
-        setIsEditing: (isEditingUpdate) => {
-            setIsEditing(isEditingUpdate);
-        }
-    };
-}

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

@@ -1,19 +0,0 @@
-export * from './legacy-select';
-export * from './legacy-select/MrlLegacySelectItem';
-export * from './legacy-select/MrlLegacySelectMenu';
-export * from './text-input/MrlTextInput';
-export * from './text-input/MrlEditableTextInput';
-export * from './label/MrlLabel';
-export * from './label/MrlLabelWithDescription';
-export * from './textarea/MrlTextarea';
-export * from './textarea/MrlEditableTextarea';
-export * from './fieldset/MrlFieldset';
-export * from './checkbox/MrlCheckbox';
-export * from './checkbox/MrlCheckboxStandalone';
-export * from './constants';
-export * from './radio/MrlRadioGroup';
-export * from './radio/MrlRadioButton';
-export * from './radio/MrlRadioButtonStandalone';
-export * from './switch';
-export * from './date-picker';
-export * from './select';

package/dist/esm/components/form/label/MrlLabel/MrlLabel.js

@@ -1,36 +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 { setAttributes } from '../../../../utils';
-import { labelDefaults } from '../../constants';
-import { MrlSvg } from '../../../svg';
-import styles from './MrlLabel.module.scss.js';
-/**
- * Provides a label for a form element
- *
- * @param {MrlLabelProps} props - the component props
- * @returns a label element
- */
-export function MrlLabel(_a) {
-    var { attrs = {}, className, text, htmlFor, kind = labelDefaults.kind, icon, state = labelDefaults.state } = _a, rest = __rest(_a, ["attrs", "className", "text", "htmlFor", "kind", "icon", "state"]);
-    const allClasses = classnames('mrl-label', 'MrlLabel', styles['MrlLabel'], attrs.class || attrs.className, className, {
-        [styles['mrl-is--disabled']]: state === 'disabled',
-        [styles['MrlLabel--inline']]: kind !== labelDefaults.kind
-    });
-    delete attrs.class;
-    delete attrs.className;
-    const attributes = setAttributes(attrs);
-    return (React.createElement("label", Object.assign({}, rest, attributes, { htmlFor: htmlFor, className: allClasses }),
-        icon && (React.createElement(MrlSvg, { "aria-hidden": "true", svg: icon.icon, className: classnames(styles['MrlLabel-icon'], 'MrlLabel-icon'), size: "auto" })),
-        React.createElement("span", { className: "MrlLabel-text" }, text)));
-}

package/dist/esm/components/form/label/MrlLabel/MrlLabel.module.css

@@ -1,107 +0,0 @@
-:root,
-:host {
-  --mrl-text-input-background: var(--mrl-color-background);
-  --mrl-text-input-background-color-hover: var(--mrl-color-background);
-  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-text-input-border-width: var(--mrl-line-width-border);
-  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
-  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
-  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
-  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
-  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
-  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
-  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
-  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
-  --mrl-text-input-color-read-only: var(--mrl-gray-90);
-  --mrl-text-input-height: var(--mrl-spacing-09);
-  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
-  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
-  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
-  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
-  	var(--mrl-text-input-inset-horizontal);
-  --mrl-input-icon-offset: var(--mrl-spacing-03);
-  --mrl-checkbox-height: var(--mrl-spacing-09);
-  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
-  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-checkbox-input-size: var(--mrl-spacing-06);
-  --mrl-checkbox-input-background: var(--mrl-color-background);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
-  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
-  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
-  --mrl-radio-button-height: var(--mrl-spacing-06);
-  --mrl-radio-button-width: var(--mrl-spacing-06);
-  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
-  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-radio-button-border-width: var(--mrl-line-width-border);
-  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
-  --mrl-radio-button-background: var(--mrl-color-background);
-  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
-  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
-}
-
-.mrl-checkbox-input--OnEiG:checked ~ .mrl-checkbox-inputDisplay--meSkr,
-.MrlCheckboxStandalone-input--aQCgm:checked ~ .MrlCheckboxStandalone-inputDisplay--XkyBu,
-.mrl-checkbox-input--OnEiG:indeterminate ~ .mrl-checkbox-inputDisplay--meSkr,
-.MrlCheckboxStandalone-input--aQCgm:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--XkyBu {
-  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
-}
-
-:host {
-  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
-  --mrl-select-item-text-affordance: calc(
-  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
-  );
-}
-
-.MrlTextInput--PMKYm {
-  --mrl-text-input-icon-size: var(--mrl-spacing-06);
-  --mrl-text-input-icon-offset: var(--mrl-input-icon-offset);
-}
-
-.MrlLabel--wuV39 {
-  --mrl-label-text-color: var(--mrl-color-text-label);
-  --mrl-label-font-size: var(--mrl-type-size-text-small);
-  --mrl-label-line-height: var(--mrl-type-line-height-text-small);
-  --mrl-label-font-weight: var(--mrl-type-weight-title-secondary);
-  --mrl-label-offset-vertical: var(--mrl-space-stack-related-small);
-}
-
-.MrlLabel--inline--fv39Z {
-  --mrl-label-offset-vertical: 0;
-  --mrl-label-offset-inline: var(--mrl-space-inline-sibling-xsmall);
-  --mrl-label-icon-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-label-icon-size: var(--mrl-spacing-06);
-}
-
-.MrlLabel--wuV39.mrl-is--disabled--x4keo {
-  --mrl-label-text-color: var(--mrl-color-text-disabled);
-}
-
-.MrlLabel--wuV39 {
-  color: var(--mrl-label-text-color);
-  display: block;
-  font-family: var(--mrl-body-font);
-  font-size: var(--mrl-label-font-size);
-  font-weight: var(--mrl-label-font-weight);
-  line-height: var(--mrl-label-line-height);
-  margin-bottom: var(--mrl-label-offset-vertical);
-  padding-left: var(--mrl-text-input-border-width);
-}
-
-.MrlLabel--inline--fv39Z {
-  align-items: center;
-  display: inline-flex;
-  margin-left: var(--mrl-label-offset-inline);
-  padding-left: 0;
-}
-
-.MrlLabel-icon--j5WAV {
-  height: var(--mrl-label-icon-size);
-  margin: var(--mrl-label-icon-inset) calc(var(--mrl-label-icon-inset) + var(--mrl-label-offset-inline)) var(--mrl-label-icon-inset) var(--mrl-label-icon-inset);
-  width: var(--mrl-label-icon-size);
-}

package/dist/esm/components/form/label/MrlLabel/MrlLabel.module.scss.js

@@ -1,12 +0,0 @@
-import "./MrlLabel.module.css";
-export default {
-	"mrl-checkbox-input": "mrl-checkbox-input--OnEiG",
-	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--meSkr",
-	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--aQCgm",
-	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--XkyBu",
-	"MrlTextInput": "MrlTextInput--PMKYm",
-	"MrlLabel": "MrlLabel--wuV39",
-	"MrlLabel--inline": "MrlLabel--inline--fv39Z",
-	"mrl-is--disabled": "mrl-is--disabled--x4keo",
-	"MrlLabel-icon": "MrlLabel-icon--j5WAV"
-};

package/dist/esm/components/form/label/MrlLabel/index.js

@@ -1 +0,0 @@
-export * from './MrlLabel';

package/dist/esm/components/form/label/MrlLabelWithDescription/MrlLabelWithDescription.js

@@ -1,43 +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 { MrlLabel, MrlText } from '../../../';
-import styles from './MrlLabelWithDescription.module.scss.js';
-/**
- * Form control label that can render a label, an icon and description text
- *
- * @param {MrlLabelWithDescriptionProps} props - the component props
- * @returns a form control label with description
- */
-export function MrlLabelWithDescription(_a) {
-    var { className, description, descriptionId, isDisabled, isIndeterminate, isSelected, hasMultilineLabel, htmlFor, icon, label } = _a, rest = __rest(_a, ["className", "description", "descriptionId", "isDisabled", "isIndeterminate", "isSelected", "hasMultilineLabel", "htmlFor", "icon", "label"]);
-    const allClasses = classnames(className, styles['MrlLabelWithDescription'], {
-        [styles['mrl-is--disabled']]: isDisabled,
-        [styles['mrl-is--selected']]: isSelected,
-        [styles['mrl-is--indeterminate']]: isIndeterminate
-    });
-    return (React.createElement("div", { className: allClasses },
-        React.createElement(MrlLabel, Object.assign({}, rest, { icon: icon !== undefined ? icon : undefined, text: label, kind: "inline", htmlFor: htmlFor, className: classnames(styles['MrlLabelWithDescription-label'], 'MrlLabelWithDescription-label', {
-                [styles['has-icon']]: typeof icon !== 'undefined',
-                [styles['has-multiline-label']]: hasMultilineLabel
-            }) })),
-        description && (React.createElement("div", { className: classnames(styles['MrlLabelWithDescription-description'], 'MrlLabelWithDescription-description', {
-                [styles['has-icon']]: typeof icon !== 'undefined',
-                [styles['has-multiline-label']]: hasMultilineLabel
-            }) },
-            typeof description === 'string' && (React.createElement(MrlText, { attrs: {
-                    className: styles['MrlLabelWithDescription-text'],
-                    id: descriptionId
-                }, text: description, size: "xsmall" })),
-            React.isValidElement(description) && description))));
-}

package/dist/esm/components/form/label/MrlLabelWithDescription/MrlLabelWithDescription.module.css

@@ -1,64 +0,0 @@
-.MrlLabelWithDescription--QyxQJ {
-  --mrl-label-with-description-color: rgba(var(--mrl-gray-80), 1);
-}
-.MrlLabelWithDescription--QyxQJ.mrl-is--selected--iIbJc, .MrlLabelWithDescription--QyxQJ.mrl-is--indeterminate--3M0m- {
-  --mrl-label-with-description-color: rgba(var(--mrl-gray-100), 1);
-}
-.MrlLabelWithDescription--QyxQJ.mrl-is--disabled--qE6xi {
-  --mrl-label-with-description-color: var(--mrl-color-text-disabled);
-}
-.MrlLabelWithDescription--QyxQJ:not(.mrl-is--disabled--qE6xi):hover {
-  --mrl-label-with-description-color: rgba(var(--mrl-gray-90), 1);
-}
-
-.MrlLabelWithDescription--QyxQJ {
-  --mrl-label-text-padding-top: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
-  --mrl-description-margin-left: var(--mrl-spacing-09);
-  --mrl-description-margin-top: calc(-1 * calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)));
-  min-height: var(--mrl-spacing-09);
-}
-.MrlLabelWithDescription--QyxQJ .MrlSvgContainer {
-  flex-shrink: 0;
-}
-
-.MrlLabelWithDescription-label--pY3uV {
-  color: var(--mrl-label-with-description-color);
-  cursor: pointer;
-  transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
-  vertical-align: middle;
-}
-.MrlLabelWithDescription-label--pY3uV .MrlLabel-icon {
-  height: var(--mrl-spacing-07);
-  margin: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02) var(--mrl-spacing-01);
-  width: var(--mrl-spacing-07);
-}
-.MrlLabelWithDescription-label--pY3uV .MrlLabel-text {
-  padding-top: var(--mrl-label-text-padding-top);
-}
-.MrlLabelWithDescription-label--pY3uV.has-icon--sa3DP {
-  margin-left: var(--mrl-spacing-01);
-}
-.MrlLabelWithDescription-label--pY3uV.has-icon--sa3DP .MrlLabel-text {
-  padding-top: 0;
-}
-.MrlLabelWithDescription-label--pY3uV.has-multiline-label--yHEOK .MrlLabel-text {
-  padding-top: var(--mrl-label-text-padding-top);
-}
-
-.MrlLabelWithDescription-description--aWfRw {
-  color: var(--mrl-label-with-description-color);
-  margin-left: var(--mrl-spacing-02);
-  transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
-}
-.MrlLabelWithDescription-description--aWfRw .MrlLabelWithDescription-text--JLnVU {
-  --mrl-text-weight: var(--mrl-type-weight-text-secondary);
-}
-.MrlLabelWithDescription-description--aWfRw.has-icon--sa3DP, .MrlLabelWithDescription-description--aWfRw.has-multiline-label--yHEOK {
-  margin-left: var(--mrl-description-margin-left);
-}
-.MrlLabelWithDescription-description--aWfRw.has-icon--sa3DP {
-  margin-top: var(--mrl-description-margin-top);
-}
-.MrlLabelWithDescription-description--aWfRw.has-multiline-label--yHEOK {
-  margin-top: 0;
-}

package/dist/esm/components/form/label/MrlLabelWithDescription/MrlLabelWithDescription.module.scss.js

@@ -1,12 +0,0 @@
-import "./MrlLabelWithDescription.module.css";
-export default {
-	"MrlLabelWithDescription": "MrlLabelWithDescription--QyxQJ",
-	"mrl-is--selected": "mrl-is--selected--iIbJc",
-	"mrl-is--indeterminate": "mrl-is--indeterminate--3M0m-",
-	"mrl-is--disabled": "mrl-is--disabled--qE6xi",
-	"MrlLabelWithDescription-label": "MrlLabelWithDescription-label--pY3uV",
-	"has-icon": "has-icon--sa3DP",
-	"has-multiline-label": "has-multiline-label--yHEOK",
-	"MrlLabelWithDescription-description": "MrlLabelWithDescription-description--aWfRw",
-	"MrlLabelWithDescription-text": "MrlLabelWithDescription-text--JLnVU"
-};

package/dist/esm/components/form/label/MrlLabelWithDescription/index.js

@@ -1 +0,0 @@
-export * from './MrlLabelWithDescription';

package/dist/esm/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.js

@@ -1,265 +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 { chevronDownFilled, chevronUpFilled } from '@muraldevkit/ds-icons';
-import { MrlPortal, MrlSvg } from '../../../';
-import { selectDefaults } from '../../constants';
-import { useSelect } from '../context/SelectContext';
-import { getActionFromKey, actions, getUpdatedIndex } from '../../utils';
-import { setAttributes } from '../../../../utils';
-import { useCoordinate } from '../../../../hooks';
-import { PORTAL_LAYERS } from '../../../../utils/layers';
-import { useClickOutside } from '../../../../hooks/useClickOutside';
-import styles from './MrlLegacySelect.module.scss.js';
-/**
- * Creates and exports component class for Mural Select
- *
- * @param {MrlLegacySelectProptypes} props the props for your MrlLink
- * @returns {React.ReactElement} an a element containing the text you pass
- */
-export const MrlLegacySelect = (_a) => {
-    var { attrs = {}, children, kind = selectDefaults.kind, labelId, size = selectDefaults.size } = _a, theRest = __rest(_a, ["attrs", "children", "kind", "labelId", "size"]);
-    const selectRef = React.useRef(null);
-    const portalRef = React.useRef(null);
-    const { dispatch, state: dispatchState } = useSelect();
-    const coords = useCoordinate(selectRef.current, false, dispatchState.open);
-    const handleOpen = React.useCallback((e) => {
-        var _a;
-        e.stopPropagation();
-        if (dispatchState.open) {
-            dispatch({ payload: 'mouse', type: 'close' });
-        }
-        else {
-            dispatch({ type: 'open' });
-        }
-        (_a = theRest.onClick) === null || _a === void 0 ? void 0 : _a.call(theRest, e);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatchState.open]);
-    const handleKeyPress = React.useCallback((event) => {
-        var _a;
-        // trap tab when we are open
-        if (dispatchState.open && event.key === 'Tab') {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        const action = getActionFromKey(event, dispatchState.open);
-        switch (action) {
-            case actions.Last:
-            case actions.First:
-                dispatch({ type: 'open' });
-                break;
-            case actions.Type:
-                event.preventDefault();
-                event.stopPropagation();
-                dispatch({ type: 'open' });
-                break;
-            case actions.Open:
-                event.preventDefault();
-                event.stopPropagation();
-                dispatch({ type: 'open' });
-                break;
-        }
-        (_a = theRest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(theRest, event);
-    }, 
-    // only want to rereun this when our keydown changes or our state changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatchState, theRest.onKeyDown]);
-    /**
-     * @TODO: move menu key handling to MrlLegacySelectMenu
-     */
-    const handleGlobalKeyPress = React.useCallback((event) => {
-        var _a;
-        const action = getActionFromKey(event, dispatchState.open);
-        const items = ((_a = portalRef === null || portalRef === void 0 ? void 0 : portalRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.mrl-selectItem')) || [];
-        const lastItemIndex = (items === null || items === void 0 ? void 0 : items.length) - 1;
-        const firstItemIndex = 0;
-        const focusIndex = dispatchState.focusIndex || 0;
-        switch (action) {
-            case actions.PageDown:
-            case actions.Last:
-                event.stopPropagation();
-                event.preventDefault();
-                dispatch({
-                    payload: getUpdatedIndex(focusIndex, lastItemIndex, action),
-                    type: 'focus'
-                });
-                break;
-            case actions.PageUp:
-            case actions.First:
-                event.stopPropagation();
-                event.preventDefault();
-                dispatch({
-                    payload: getUpdatedIndex(focusIndex, lastItemIndex, action),
-                    type: 'focus'
-                });
-                break;
-            case actions.Previous:
-                event.stopPropagation();
-                event.preventDefault();
-                // if not our first item then focus next.
-                if (firstItemIndex !== focusIndex) {
-                    dispatch({
-                        payload: focusIndex - 1,
-                        type: 'focus'
-                    });
-                }
-                break;
-            case actions.Next:
-                event.stopPropagation();
-                event.preventDefault();
-                // if not our last item then focus next.
-                if (lastItemIndex !== focusIndex) {
-                    dispatch({
-                        payload: focusIndex + 1,
-                        type: 'focus'
-                    });
-                }
-                break;
-            case actions.CloseSelect:
-            case actions.Close:
-                dispatch({ payload: 'keyboard', type: 'close' });
-                break;
-        }
-    }, 
-    // only want to change when state changes or we have different children.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatchState, children]);
-    /**
-     * Detects if the select element has moved and closes the menu if it has
-     *
-     * We are using requestAnimationFrame to check the position of the select element
-     * and compare it to the last known position. If the position has changed, we close
-     * the menu.
-     */
-    const lastPosition = React.useRef(null);
-    const animationFrameRef = React.useRef(null);
-    React.useEffect(() => {
-        const checkPositionChange = () => {
-            if (selectRef.current && dispatchState.open) {
-                const currentPosition = selectRef.current.getBoundingClientRect();
-                // If the last position is different than the current position, we know that the
-                // menu has scrolled and we should close it.
-                if (lastPosition.current && lastPosition.current.y !== currentPosition.y) {
-                    lastPosition.current = null;
-                    dispatch({ payload: 'mouse', type: 'close' });
-                    return;
-                }
-                lastPosition.current = currentPosition;
-            }
-            animationFrameRef.current = requestAnimationFrame(checkPositionChange);
-        };
-        if (dispatchState.open) {
-            animationFrameRef.current = requestAnimationFrame(checkPositionChange);
-        }
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, [dispatch, dispatchState.open]);
-    /**
-     * Sets focus to select element when it is closed
-     */
-    React.useEffect(() => {
-        var _a;
-        if (!dispatchState.open && dispatchState.actionType === 'keyboard') {
-            (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatchState.open]);
-    /**
-     * @TODO: move menu key handling to MrlLegacySelectMenu
-     */
-    React.useEffect(() => {
-        if (dispatchState.disabled || dispatchState.readOnly) {
-            return;
-        }
-        document === null || document === void 0 ? void 0 : document.addEventListener('keydown', handleGlobalKeyPress);
-        return () => {
-            document === null || document === void 0 ? void 0 : document.removeEventListener('keydown', handleGlobalKeyPress);
-        };
-    }, [handleGlobalKeyPress, dispatchState.disabled, dispatchState.readOnly]);
-    /**
-     * This useEffect is responsible for setting the value if it passed in or changed
-     * when the select is being used as a controlled component
-     */
-    React.useEffect(() => {
-        const value = dispatchState.controlledValue;
-        if (value && value !== dispatchState.selectedItem) {
-            dispatch({ payload: value, type: 'select' });
-            if (children) {
-                // The first child is an instance of MrlLegacySelectMenu, so let's grab that
-                // because we are looking to match the value against the children passed
-                // into the MrlLegacySelectMenu component
-                const selectMenu = React.Children.toArray(children)[0];
-                if (React.isValidElement(selectMenu)) {
-                    // Now let's grab the children of the array
-                    const menuChildren = React.Children.toArray(selectMenu.props.children);
-                    // Once we have the children, we want to iterate over them to check to see if
-                    // the controlled value passed to the component matches any of the items in the menu
-                    const matchedItem = menuChildren.find((item) => 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    React.isValidElement(item) && item.props.value === value);
-                    // If we found a match, we want to set the selected text to the value of the item's children
-                    if (matchedItem && React.isValidElement(matchedItem)) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const selectedText = matchedItem.props.children;
-                        dispatch({ payload: selectedText, type: 'selectedText' });
-                    }
-                }
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [children, dispatchState.controlledValue, dispatchState.selectedItem]);
-    const attributes = setAttributes(attrs, Object.assign({ 'aria-controls': dispatchState.id, 'aria-disabled': dispatchState.disabled ? 'true' : 'false', 'aria-expanded': dispatchState.open.toString(), 'aria-haspopup': 'listbox', 'aria-labelledby': labelId, role: 'combobox' }, (!dispatchState.disabled && { tabIndex: '0' })));
-    const allClasses = classnames('mrl-select', attributes.className, theRest.className, {
-        [styles['mrl-select']]: true,
-        [styles['mrl-select--disabled']]: dispatchState.disabled,
-        [styles['mrl-select--read-only']]: dispatchState.readOnly
-    });
-    const selectClasses = classnames('mrl-select-trigger', {
-        [styles['mrl-select-trigger']]: true,
-        [styles['mrl-select-trigger--border']]: kind === 'default',
-        [styles[`mrl-select-trigger--${kind}`]]: kind !== 'default',
-        [styles[`mrl-select-trigger--${size}`]]: size !== 'default'
-    });
-    const svgClasses = classnames({
-        [styles['mrl-is--open']]: dispatchState.open,
-        [styles['mrl-select-trigger-indicator']]: true
-    });
-    const selectedText = React.useMemo(() => {
-        if (dispatchState.selectedText) {
-            return dispatchState.selectedText;
-        }
-        if (children) {
-            return React.Children.toArray(children)[0];
-        }
-        return 'loading...';
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatchState.selectedText]);
-    const closeSelect = () => dispatch({ payload: 'mouse', type: 'close' });
-    useClickOutside(selectRef, portalRef, 'mousedown', closeSelect);
-    return (React.createElement("div", Object.assign({}, attributes, theRest, (!dispatchState.disabled && !dispatchState.readOnly && { onClick: handleOpen }), (!dispatchState.disabled && !dispatchState.readOnly && { onKeyDown: handleKeyPress }), { "data-value": dispatchState.selectedItem, id: dispatchState.id, className: allClasses, ref: selectRef }),
-        React.createElement("div", { className: selectClasses },
-            React.createElement("span", null, selectedText),
-            !dispatchState.readOnly && (React.createElement(MrlSvg, { svg: dispatchState.open ? chevronUpFilled : chevronDownFilled, className: svgClasses, size: "small" }))),
-        dispatchState.open && (React.createElement(MrlPortal, { id: "mrl-select-portal", layer: PORTAL_LAYERS.SELECT },
-            React.createElement("div", { ref: portalRef, style: {
-                    left: coords.left,
-                    position: 'absolute',
-                    top: coords.top + coords.height,
-                    width: `${coords.width}px`
-                } }, children)))));
-};