@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,107 @@
+: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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,64 @@
+.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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,265 @@
+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)))));
+};