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

package/dist/esm/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.module.css

@@ -0,0 +1,174 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--IzQ-- {
+  position: relative;
+}
+
+.MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-gray-80), 1);
+  border-radius: 0.625rem;
+  cursor: pointer;
+  display: block;
+  height: var(--mrl-spacing-06);
+  width: calc(var(--mrl-spacing-08) + var(--mrl-spacing-02));
+}
+@media (prefers-reduced-motion: no-preference) {
+  .MrlSwitchStandalone-switch--Jcxrj {
+    transition: var(--mrl-duration-02);
+  }
+}
+
+.MrlSwitchStandalone-switch-indicator--JQrCo {
+  align-content: center;
+  background-color: var(--mrl-color-background);
+  border-radius: 0.375rem;
+  bottom: calc(var(--mrl-spacing-03) - var(--mrl-spacing-02));
+  color: var(--mrl-color-background-secondary);
+  display: flex;
+  height: var(--mrl-spacing-04);
+  left: var(--mrl-spacing-02);
+  pointer-events: none;
+  position: absolute;
+  width: var(--mrl-spacing-04);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .MrlSwitchStandalone-switch-indicator--JQrCo {
+    transition: var(--mrl-duration-02) var(--mrl-timing-m1);
+  }
+}
+.MrlSwitchStandalone-switch-indicator--JQrCo .mrl-svg--IAosq {
+  height: var(--mrl-spacing-04);
+  pointer-events: none;
+  width: var(--mrl-spacing-04);
+}
+
+.MrlSwitchStandalone--nUclw {
+  height: 100%;
+  position: relative;
+}
+.MrlSwitchStandalone--nUclw .MrlSwitchStandalone-checkbox--Ubu-- {
+  cursor: pointer;
+  height: var(--mrl-spacing-06);
+  opacity: 0;
+  position: absolute;
+  width: calc(var(--mrl-spacing-08) + var(--mrl-spacing-02));
+}
+
+.MrlSwitchStandalone-checkbox--Ubu-- {
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-enable no-descending-specificity */
+}
+.MrlSwitchStandalone-checkbox--Ubu--:hover + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-gray-90), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--:active + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-gray-100), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--:disabled + .MrlSwitchStandalone-switch--Jcxrj, .MrlSwitchStandalone-checkbox--Ubu--:disabled:hover + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-gray-40), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--:disabled ~ .MrlSwitchStandalone-switch-indicator--JQrCo {
+  color: rgba(var(--mrl-gray-40), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--:focus-visible + .MrlSwitchStandalone-switch--Jcxrj::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--BDho1;
+}
+@keyframes border-animation--BDho1 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--bY8n7 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+.MrlSwitchStandalone-checkbox--Ubu--[aria-checked=true] + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-blue-70), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--[aria-checked=true] ~ .MrlSwitchStandalone-switch-indicator--JQrCo {
+  color: rgba(var(--mrl-blue-70), 1);
+  transform: translateX(calc(var(--mrl-spacing-08) - var(--mrl-spacing-05)));
+}
+.MrlSwitchStandalone-checkbox--Ubu--[aria-checked=true]:hover + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-blue-80), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--[aria-checked=true]:active + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-blue-90), 1);
+}
+.MrlSwitchStandalone-checkbox--Ubu--[aria-checked=true]:disabled + .MrlSwitchStandalone-switch--Jcxrj, .MrlSwitchStandalone-checkbox--Ubu--[aria-checked=true]:disabled:hover + .MrlSwitchStandalone-switch--Jcxrj {
+  background-color: rgba(var(--mrl-gray-40), 1);
+}

package/dist/esm/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.module.scss.js

@@ -0,0 +1,11 @@
+import "./MrlSwitchStandalone.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--IzQ--",
+	"MrlSwitchStandalone-switch": "MrlSwitchStandalone-switch--Jcxrj",
+	"MrlSwitchStandalone-switch-indicator": "MrlSwitchStandalone-switch-indicator--JQrCo",
+	"mrl-svg": "mrl-svg--IAosq",
+	"MrlSwitchStandalone": "MrlSwitchStandalone--nUclw",
+	"MrlSwitchStandalone-checkbox": "MrlSwitchStandalone-checkbox--Ubu--",
+	"border-animation": "border-animation--BDho1",
+	"border-animation-inverse": "border-animation-inverse--bY8n7"
+};

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

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

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

@@ -0,0 +1,2 @@
+export * from './MrlSwitch/MrlSwitch';
+export * from './MrlSwitchStandalone/MrlSwitchStandalone';

package/dist/esm/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.global.css

@@ -0,0 +1,4 @@
+.MrlLabel:has(+ .MrlEditableTextInput--wrapper) {
+  margin-bottom: 0;
+  padding-bottom: var(--mrl-label-offset-vertical);
+}

package/dist/esm/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.js

@@ -0,0 +1,141 @@
+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 { edit, error as errorIcon } from '@muraldevkit/ds-icons';
+import styles from './MrlEditableTextInput.module.scss.js';
+import './MrlEditableTextInput.global.css';
+import { useActiveColor } from '../../hooks/useActiveColor';
+import { useIsEditable } from '../../hooks/useIsEditable';
+import { MrlEditableTextInputRightButton } from './MrlEditableTextInputRightIcon';
+import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg';
+export const MrlEditableTextInput = React.forwardRef(function MrlEditiableTextInput(props, ref) {
+    const { inputId, maxLength, placeholder, state, value, error, isEditable: controlledIsEditable, setIsEditable: controlledIsEditableUpdate, showIconOnHover = false, inputLabelText } = props, attrs = __rest(props, ["inputId", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable", "showIconOnHover", "inputLabelText"]);
+    // html id to be reference by input and error description to relay the error for a specific input
+    const describedById = `${inputId}-description`;
+    const textInputRef = React.useRef(null);
+    const iconRef = React.useRef(null);
+    const { hasActiveColor, setHasActiveColor } = useActiveColor(state);
+    const { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({
+        changeHandler: controlledIsEditableUpdate,
+        initialValue: false,
+        state,
+        value: controlledIsEditable
+    });
+    React.useImperativeHandle(ref, () => iconRef.current);
+    const unlockInput = React.useCallback(() => {
+        setIsEditable(true);
+        setIsEditing(true);
+    }, [setIsEditable, setIsEditing]);
+    const lockInput = React.useCallback(() => {
+        setIsEditable(false);
+        setIsEditing(false);
+    }, [setIsEditable, setIsEditing]);
+    const handleOnClick = (e) => {
+        if (!isEditable && !isEditing) {
+            unlockInput();
+        }
+        /*
+         * Only to be executed if onClick is provided as a prop
+         */
+        if (typeof attrs.onClick === 'function') {
+            attrs.onClick(e);
+        }
+    };
+    const handleKeyDown = (event) => {
+        var _a;
+        const { key } = event;
+        // Selects the item on enter or spacebar and closes the select
+        if (key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            lockInput();
+            (_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (typeof attrs.onKeyDown === 'function') {
+            attrs.onKeyDown(event);
+        }
+    };
+    const handleOnBlur = React.useCallback((e) => {
+        setHasActiveColor(false);
+        lockInput();
+        if (typeof attrs.onBlur === 'function') {
+            attrs.onBlur(e);
+        }
+    }, [attrs, setHasActiveColor, lockInput]);
+    const handleOnFocus = React.useCallback((e) => {
+        setHasActiveColor(true);
+        if (typeof attrs.onFocus === 'function') {
+            attrs.onFocus(e);
+        }
+    }, [attrs, setHasActiveColor]);
+    const handleOnMouseEnter = React.useCallback((e) => {
+        setHasActiveColor(true);
+        if (typeof attrs.onMouseEnter === 'function') {
+            attrs.onMouseEnter(e);
+        }
+    }, [attrs, setHasActiveColor]);
+    const handleOnMouseLeave = React.useCallback((e) => {
+        setHasActiveColor(false);
+        if (typeof attrs.onMouseLeave === 'function') {
+            attrs.onMouseLeave(e);
+        }
+    }, [attrs, setHasActiveColor]);
+    React.useEffect(() => {
+        if (iconRef.current) {
+            if (attrs.autoFocus) {
+                iconRef.current.focus();
+            }
+        }
+        // it should only run on the first render
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(() => {
+        // when editiable changes focus to current thingy
+        if (isEditable && textInputRef.current) {
+            textInputRef.current.focus();
+        }
+    }, [isEditable, isEditing]);
+    const inputClasses = classnames('MrlEditableTextInput', styles['MrlEditableTextInput'], styles['mrl-textInput'], {
+        [styles['MrlEditableTextInput-errorMessage']]: state === 'error',
+        [styles['MrlEditableTextInput-errorIcon']]: state === 'error',
+        [styles['MrlEditableTextInput--dynamicIcon']]: state !== 'read-only',
+        [styles['MrlEditableTextInput--readOnly']]: state === 'read-only',
+        [styles['MrlEditableTextInput--active']]: hasActiveColor,
+        // if an onClick property is provided, we need to apply the class that allows pointer events
+        [styles['MrlEditableTextInput--allowOnClick']]: typeof attrs.onClick === 'function'
+    }, attrs.className);
+    const hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0;
+    if (hasCounter && isNaN(Number(maxLength))) {
+        throw new Error('maxLength should have type number');
+    }
+    const hasErrorMessage = state === 'error' && (error === null || error === void 0 ? void 0 : error.message);
+    // do not pass class info to child elements/components
+    delete attrs.className;
+    const iconClasses = classnames('MrlEditableTextInput-right-button', styles['MrlEditableTextInput-right-button'], {
+        [styles['MrlEditableTextInput-hover-button']]: showIconOnHover
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classnames(styles['MrlEditableTextInput--wrapper'], 'MrlEditableTextInput--wrapper') },
+            React.createElement("input", Object.assign({ type: "text" }, attrs, { onClick: handleOnClick, "aria-invalid": state === 'error', "aria-describedby": hasErrorMessage ? describedById : undefined, className: inputClasses, disabled: state === 'disabled', maxLength: hasCounter ? maxLength : undefined, onBlur: handleOnBlur, onFocus: handleOnFocus, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, onKeyDown: handleKeyDown, id: inputId, placeholder: placeholder, readOnly: state === 'read-only' || !isEditable, tabIndex: !isEditable ? -1 : 0, ref: textInputRef, value: value })),
+            state !== 'read-only' && state !== 'disabled' && (React.createElement("span", { className: iconClasses },
+                React.createElement(MrlEditableTextInputRightButton, { action: unlockInput, icon: edit, label: `Edit: ${inputLabelText || inputId}`, dataQa: attrs['data-qa'] && `${attrs['data-qa']}-edit`, hasActiveColor: hasActiveColor || isEditable, setHasActiveColor: setHasActiveColor, ref: iconRef })))),
+        hasCounter && (React.createElement("span", { className: styles['MrlForm-counter'] },
+            React.createElement("span", { "aria-hidden": "true" },
+                (value === null || value === void 0 ? void 0 : value.length) || 0,
+                "/",
+                maxLength),
+            React.createElement("p", { style: { display: 'none' }, id: `${inputId}-counter` }, `${maxLength - ((value === null || value === void 0 ? void 0 : value.length) || 0)} of ${maxLength} characters remaining`))),
+        hasErrorMessage && (React.createElement("span", { className: styles['MrlEditableTextInput-errorMessage'] },
+            React.createElement(MrlSvg, { className: styles['MrlEditableTextInput-errorIcon'], "aria-hidden": "true", svg: errorIcon, size: "small" }),
+            React.createElement("span", { id: describedById }, `${error === null || error === void 0 ? void 0 : error.message}`)))));
+});