@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/cjs/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlLegacySelectItem = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const SelectContext_1 = require("../context/SelectContext");
+const utils_1 = require("../../../../utils");
+const __1 = require("../../../");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const MrlLegacySelectItem_module_scss_1 = __importDefault(require("./MrlLegacySelectItem.module.scss.js"));
+const getChildText = (children) => {
+    let textContent = '';
+    // Iterate through the children, in the event someone passes
+    // multiple HTML and or components into the select item
+    React.Children.forEach(children, (child) => {
+        // concatenate any text content we get if they are strings
+        if (typeof child === 'string') {
+            textContent += child;
+            return;
+        }
+        // but if the child is an HTML element, we need to handle it a bit differently
+        if (React.isValidElement(child) && typeof child.props.children === 'string') {
+            textContent += child.props.children;
+        }
+    });
+    // we also want to remove any whitespace from the beginning or end.
+    return textContent.trim();
+};
+/**
+ * Renders a select component
+ *
+ * @param {MrlLegacySelectItemProptypes} props the props for your MrlLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+const MrlLegacySelectItem = (_a) => {
+    var { attrs = {}, children, index, value, isDisabled } = _a, theRest = __rest(_a, ["attrs", "children", "index", "value", "isDisabled"]);
+    const focusRef = React.useRef(null);
+    const { dispatch, state: dispatchState } = (0, SelectContext_1.useSelect)();
+    const disabled = dispatchState.disabled || isDisabled;
+    const childText = getChildText(children);
+    const setSelectedItem = () => {
+        dispatch({ payload: value, type: 'select' });
+        dispatch({ payload: children, type: 'selectedText' });
+        dispatch({ payload: index, type: 'focus' });
+    };
+    const handleClick = (e) => {
+        var _a;
+        setSelectedItem();
+        dispatch({ payload: 'mouse', type: 'close' });
+        (_a = theRest.onClick) === null || _a === void 0 ? void 0 : _a.call(theRest, e);
+    };
+    const handleEnter = (event) => {
+        var _a;
+        const { key } = event;
+        // Selects the item on enter or spacebar and closes the select
+        if (key === 'Enter' || key === ' ') {
+            event.stopPropagation();
+            event.preventDefault();
+            setSelectedItem();
+            dispatch({ payload: 'keyboard', type: 'close' });
+            (_a = theRest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(theRest, event);
+        }
+    };
+    /**
+     * Sets focus to select item if it's active when the select is opened
+     */
+    React.useEffect(() => {
+        var _a;
+        if (index === dispatchState.focusIndex) {
+            (_a = focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [index, dispatchState, focusRef]);
+    /**
+     * Sets up default state of selectbox based on the value of the select item
+     */
+    React.useEffect(() => {
+        const isSelectedValue = dispatchState.selectedItem === value;
+        const isDefaultValue = dispatchState.defaultValue === value && !dispatchState.selectedItem;
+        const isFirstItem = !dispatchState.defaultValue && !dispatchState.selectedItem && index === 0;
+        if (isSelectedValue || isDefaultValue || isFirstItem) {
+            dispatch({ payload: value, type: 'select' });
+            dispatch({ payload: children, type: 'selectedText' });
+            // sets focus to defaultValue when select is opened
+            if (index)
+                dispatch({ payload: index, type: 'focus' });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatchState.defaultValue, dispatchState.selectedText, index]);
+    const attributes = (0, utils_1.setAttributes)(attrs, {
+        // Note, the ID of this component if not set by the developer, is
+        // programmatically applied by the mrl-select component
+        'aria-disabled': disabled,
+        'aria-label': childText,
+        'aria-selected': dispatchState.selectedItem === value,
+        'auto-focus': 'true',
+        'data-value': value,
+        role: 'option',
+        tabIndex: '-1'
+    });
+    const allClasses = (0, classnames_1.default)(attrs.className, theRest.className, 'mrl-selectItem', {
+        [MrlLegacySelectItem_module_scss_1.default['mrl-is--selected']]: dispatchState.selectedItem === value,
+        [MrlLegacySelectItem_module_scss_1.default['mrl-is--focused']]: dispatchState.focusIndex === index,
+        [MrlLegacySelectItem_module_scss_1.default['mrl-is--hidden']]: !dispatchState.open,
+        [MrlLegacySelectItem_module_scss_1.default['mrl-selectItem']]: true
+    });
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React.createElement("div", Object.assign({}, attributes, theRest, { ref: focusRef, className: allClasses }, (!disabled && { onClick: handleClick }), (!disabled && { onKeyDown: handleEnter })),
+        children,
+        dispatchState.selectedItem === value ? (React.createElement(__1.MrlSvg, { svg: ds_icons_1.check, className: MrlLegacySelectItem_module_scss_1.default['mrl-selectItem-selectedIcon'], size: "small", attrs: {
+                'aria-hidden': 'true',
+                class: MrlLegacySelectItem_module_scss_1.default['mrl-selectItem-selectedIcon']
+            } })) : ('')));
+};
+exports.MrlLegacySelectItem = MrlLegacySelectItem;

package/dist/cjs/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.module.css

@@ -0,0 +1,148 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--3-aet {
+  position: relative;
+}
+
+.MrlForm-counter--6dL9Y {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-xxsmall);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-xxsmall);
+  color: rgba(var(--mrl-gray-80), 1);
+  display: block;
+  margin-top: var(--mrl-spacing-02);
+  text-align: right;
+  width: 100%;
+}
+
+: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--ZW5eH:checked ~ .mrl-checkbox-inputDisplay--EWqw7,
+.MrlCheckboxStandalone-input--Vgntb:checked ~ .MrlCheckboxStandalone-inputDisplay--3RpE1,
+.mrl-checkbox-input--ZW5eH:indeterminate ~ .mrl-checkbox-inputDisplay--EWqw7,
+.MrlCheckboxStandalone-input--Vgntb:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--3RpE1 {
+  --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)
+  );
+}
+
+.mrl-selectItem--ehrx7 {
+  --mrl-select-item-background: var(--mrl-color-background);
+  --mrl-select-item-color: var(--mrl-color-text-highlight);
+  --mrl-select-item-padding: var(--mrl-select-item-padding-vertical)
+  	var(--mrl-select-item-padding-horizontal);
+  --mrl-select-item-padding-horizontal: var(--mrl-spacing-04);
+  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-select-item-border-radius: var(--mrl-border-radius-functional);
+  --mrl-select-item-icon-size: var(--mrl-spacing-06);
+  --mrl-select-item-icon-spacing: var(--mrl-spacing-03);
+}
+
+.mrl-selectItem--ehrx7:hover {
+  --mrl-select-item-background: var(--mrl-color-background-highlight-hover);
+  --mrl-select-item-color: var(--mrl-color-text-highlight-hover);
+}
+
+.mrl-is--selected--l-jy5 {
+  --mrl-select-item-background: var(--mrl-color-background-highlight-selected);
+  --mrl-select-item-color: var(--mrl-color-text-highlight-selected);
+}
+
+.mrl-selectItem--ehrx7[aria-disabled=true],
+.mrl-selectItem--ehrx7[aria-disabled=true]:hover {
+  --mrl-select-item-background: transparent;
+  --mrl-select-item-color: var(--mrl-color-text-disabled);
+}
+
+.mrl-select-item--j3k4e {
+  display: block;
+}
+
+.mrl-selectItem--ehrx7 {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-title-secondary);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-small);
+  background: var(--mrl-select-item-background);
+  border-radius: var(--mrl-select-item-border-radius);
+  color: var(--mrl-select-item-color);
+  cursor: pointer;
+  display: flex;
+  padding: var(--mrl-select-item-padding-vertical) var(--mrl-select-item-padding-horizontal);
+  position: relative;
+}
+
+.mrl-selectItem-selectedIcon--O0RHy {
+  position: absolute;
+  right: var(--mrl-select-item-icon-spacing);
+  width: var(--mrl-select-item-icon-size);
+}
+
+.mrl-is--selected--l-jy5 {
+  padding-right: calc(var(--mrl-select-item-icon-spacing) + var(var(--mrl-select-item-icon-size)) + var(var(-mrl-select-item-icon-spacing)));
+}
+
+.mrl-is--focused--3eZR8 {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.mrl-selectItem--ehrx7[aria-disabled=true],
+.mrl-selectItem--ehrx7[aria-disabled=true]:hover {
+  cursor: default;
+}
+
+.mrl-is--hidden--YKHUM {
+  display: none;
+}

package/dist/cjs/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.module.scss.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlLegacySelectItem.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--3-aet",
+	"MrlForm-counter": "MrlForm-counter--6dL9Y",
+	"mrl-checkbox-input": "mrl-checkbox-input--ZW5eH",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--EWqw7",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--Vgntb",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--3RpE1",
+	"mrl-selectItem": "mrl-selectItem--ehrx7",
+	"mrl-is--selected": "mrl-is--selected--l-jy5",
+	"mrl-select-item": "mrl-select-item--j3k4e",
+	"mrl-selectItem-selectedIcon": "mrl-selectItem-selectedIcon--O0RHy",
+	"mrl-is--focused": "mrl-is--focused--3eZR8",
+	"mrl-is--hidden": "mrl-is--hidden--YKHUM"
+};

package/dist/cjs/components/form/legacy-select/MrlLegacySelectItem/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlLegacySelectItem = void 0;
+var MrlLegacySelectItem_1 = require("./MrlLegacySelectItem");
+Object.defineProperty(exports, "MrlLegacySelectItem", { enumerable: true, get: function () { return MrlLegacySelectItem_1.MrlLegacySelectItem; } });

package/dist/cjs/components/form/legacy-select/MrlLegacySelectMenu/MrlLegacySelectMenu.js

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlLegacySelectMenu = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const utils_1 = require("../../../../utils");
+const SelectContext_1 = require("../context/SelectContext");
+const MrlLegacySelectMenu_module_scss_1 = __importDefault(require("./MrlLegacySelectMenu.module.scss.js"));
+const hooks_1 = require("../../../../hooks");
+/**
+ * Creating and exporting component class for Mural Select Menu
+ * Note, this component doesn't doesn't handle any functionality
+ * For accessibility and keyboard support, all functionality is
+ * controlled by the wrapping mrl-select but we need this component
+ * within our HTML structure for valid aria usage.
+ *
+ * @param {MrlLegacySelectMenuProptypes} props MrlLegacySelectMenuProptypes
+ * @returns {React.ReactElement} returns a MrlLegacySelectMenu
+ */
+const MrlLegacySelectMenu = (_a) => {
+    var { attrs = {}, children, labelId, position = constants_1.selectMenuDefaults.position } = _a, theRest = __rest(_a, ["attrs", "children", "labelId", "position"]);
+    const [calcPosition, setCalcPosition] = React.useState(position);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { dispatch, state: dispatchState } = (0, SelectContext_1.useSelect)();
+    const selectRef = React.useRef(null);
+    const coords = (0, hooks_1.useCoordinate)(selectRef.current, true, dispatchState.open);
+    /**
+     * Position menu based on coordinates
+     */
+    React.useLayoutEffect(() => {
+        const isInView = coords &&
+            coords.top >= 0 &&
+            coords.left >= 0 &&
+            coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            coords.right <= (window.innerWidth || document.documentElement.clientWidth);
+        if (!isInView) {
+            setCalcPosition(position === 'bottom' ? 'top' : 'bottom');
+        }
+        setCalcPosition(position);
+    }, [position, coords, dispatchState.open]);
+    const attributes = (0, utils_1.setAttributes)(attrs, {
+        'aria-activedescendant': !!dispatchState.selectedItem
+    });
+    const allClasses = React.useCallback(() => {
+        return (0, classnames_1.default)('mrl-selectMenu', attributes.className, theRest.className, {
+            [MrlLegacySelectMenu_module_scss_1.default['mrl-selectMenu']]: true,
+            [MrlLegacySelectMenu_module_scss_1.default[`mrl-selectMenu--${calcPosition}`]]: true,
+            [MrlLegacySelectMenu_module_scss_1.default[`mrl-selectMenu--open`]]: dispatchState.open
+        });
+    }, [calcPosition, dispatchState.open, attributes.className, theRest.className]);
+    const closeSelect = React.useCallback((e) => {
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            e.preventDefault();
+            dispatch({ payload: 'keyboard', type: 'close' });
+        }
+    }, [dispatch]);
+    React.useEffect(() => {
+        const selectRefCurrent = selectRef.current;
+        if (selectRefCurrent) {
+            selectRefCurrent.addEventListener('keydown', closeSelect);
+        }
+        return () => {
+            if (selectRefCurrent) {
+                selectRefCurrent.removeEventListener('keydown', closeSelect);
+            }
+        };
+    }, [closeSelect, selectRef]);
+    return (React.createElement("div", Object.assign({}, attributes, theRest, { className: allClasses(), ref: selectRef, "aria-labelledby": labelId, id: dispatchState.id, role: "listbox" }), React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { index });
+        }
+        return child;
+    })));
+};
+exports.MrlLegacySelectMenu = MrlLegacySelectMenu;

package/dist/cjs/components/form/legacy-select/MrlLegacySelectMenu/MrlLegacySelectMenu.module.css

@@ -0,0 +1,29 @@
+.mrl-selectMenu--1rmdG {
+  --mrl-select-item-height: 34px;
+}
+
+.mrl-selectMenu--1rmdG {
+  background: var(--mrl-color-background);
+  border-radius: var(--mrl-radii-03);
+  box-shadow: var(--mrl-shadow-01);
+  display: none;
+  left: 0;
+  max-height: calc(var(--mrl-select-item-height) * 6);
+  overflow-y: auto;
+  padding: var(--mrl-spacing-03);
+  position: absolute;
+  right: 0;
+  z-index: 1000;
+}
+
+.mrl-selectMenu--bottom--nx9Kx {
+  top: calc(100% + var(--mrl-spacing-02));
+}
+
+.mrl-selectMenu-bottom--top--FruJU {
+  bottom: calc(100% + var(--mrl-spacing-02));
+}
+
+.mrl-selectMenu--open--X6ygM {
+  display: block;
+}

package/dist/cjs/components/form/legacy-select/MrlLegacySelectMenu/MrlLegacySelectMenu.module.scss.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlLegacySelectMenu.module.css");
+exports.default = {
+	"mrl-selectMenu": "mrl-selectMenu--1rmdG",
+	"mrl-selectMenu--bottom": "mrl-selectMenu--bottom--nx9Kx",
+	"mrl-selectMenu-bottom--top": "mrl-selectMenu-bottom--top--FruJU",
+	"mrl-selectMenu--open": "mrl-selectMenu--open--X6ygM"
+};

package/dist/cjs/components/form/legacy-select/MrlLegacySelectMenu/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlLegacySelectMenu = void 0;
+var MrlLegacySelectMenu_1 = require("./MrlLegacySelectMenu");
+Object.defineProperty(exports, "MrlLegacySelectMenu", { enumerable: true, get: function () { return MrlLegacySelectMenu_1.MrlLegacySelectMenu; } });

package/dist/cjs/components/form/legacy-select/context/SelectContext.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelect = exports.SelectProvider = void 0;
+const React = __importStar(require("react"));
+const SelectStateContext = React.createContext(undefined);
+function selectReducer(state, action) {
+    switch (action.type) {
+        case 'open': {
+            return Object.assign(Object.assign({}, state), { focus: true, open: true });
+        }
+        case 'close': {
+            return Object.assign(Object.assign({}, state), { actionType: action.payload, focus: false, open: false });
+        }
+        case 'disabled': {
+            return Object.assign(Object.assign({}, state), { disabled: true, focus: false, open: false });
+        }
+        case 'read-only': {
+            return Object.assign(Object.assign({}, state), { disabled: false, focus: false, open: false });
+        }
+        case 'select': {
+            return Object.assign(Object.assign({}, state), { selectedItem: action.payload });
+        }
+        case 'selectedText': {
+            return Object.assign(Object.assign({}, state), { selectedText: action.payload });
+        }
+        case 'default': {
+            return Object.assign(Object.assign({}, state), { disabled: false, focus: false, open: false });
+        }
+        case 'defaultValue': {
+            return Object.assign(Object.assign({}, state), { defaultValue: action.payload });
+        }
+        case 'focus': {
+            return Object.assign(Object.assign({}, state), { focus: true, focusIndex: action.payload });
+        }
+        case 'controlledValue': {
+            return Object.assign(Object.assign({}, state), { controlledValue: action.payload });
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action}`);
+        }
+    }
+}
+/**
+ * Select provider
+ *
+ * @param {SelectProviderProps} props SelectProvider props
+ * @returns {React.ReactElement} returns a booted select provider.
+ */
+function SelectProvider({ children, hookChange, id, defaultValue, selectState, value }) {
+    const [state, dispatch] = React.useReducer(selectReducer, {
+        controlledValue: value,
+        defaultValue: defaultValue,
+        disabled: selectState === 'disabled',
+        focus: false,
+        focusIndex: 0,
+        id,
+        open: selectState === 'open',
+        readOnly: selectState === 'read-only'
+    });
+    const dispatchWithMiddleware = (action) => {
+        if (action.type === 'select' && state.selectedItem !== action.payload && state.open) {
+            hookChange === null || hookChange === void 0 ? void 0 : hookChange(action.payload);
+        }
+        dispatch(action);
+    };
+    const providedValue = { dispatch: dispatchWithMiddleware, state };
+    React.useEffect(() => {
+        dispatch({ type: selectState || 'default' });
+    }, [selectState]);
+    React.useEffect(() => {
+        if (value) {
+            dispatch({ payload: value, type: 'controlledValue' });
+        }
+    }, [value]);
+    return (React.createElement(SelectStateContext.Provider, { value: providedValue }, children));
+}
+exports.SelectProvider = SelectProvider;
+/**
+ * useSelect hook
+ *
+ * @returns returns hook for the select provider.
+ */
+function useSelect() {
+    const context = React.useContext(SelectStateContext);
+    if (context === undefined) {
+        throw new Error('looks like you are using MrlLegacySelect components outside of a MrlLegacySelect. Either wrap the components in a MrlLegacySelect or a SelectProvider');
+    }
+    return context;
+}
+exports.useSelect = useSelect;

package/dist/cjs/components/form/legacy-select/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlLegacySelect = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const MrlLegacySelect_1 = require("./MrlLegacySelect");
+const SelectContext_1 = require("./context/SelectContext");
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+/**
+ * Creates and exports component class for Mural Select
+ *
+ * @param {MrlLegacySelectProptypes} props MrlLegacySelectProptypes
+ * @returns {React.ReactElement} returns a MrlLegacySelect wrapped in a select provider.
+ */
+const MrlLegacySelect = (_a) => {
+    var { hookChange, id, defaultValue, state = constants_1.selectDefaults.state, children, value } = _a, rest = __rest(_a, ["hookChange", "id", "defaultValue", "state", "children", "value"]);
+    const selectIdRef = (0, react_1.useRef)((0, utils_1.getUniqueId)('mrl-select'));
+    const selectId = id || selectIdRef.current;
+    return (React.createElement(SelectContext_1.SelectProvider, { hookChange: hookChange, id: selectId, defaultValue: defaultValue, selectState: state, value: value },
+        React.createElement(MrlLegacySelect_1.MrlLegacySelect, Object.assign({}, rest), children)));
+};
+exports.MrlLegacySelect = MrlLegacySelect;