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

package/dist/esm/components/popover/MrlPopover/utilities/get-offset.js

@@ -1,18 +0,0 @@
-/**
- * Returns a value in PX for the offset of the popover from the menu at different positions
- *
- * @param position - position of the menu
- * @param point - if the menu has a pointer
- * @returns - offset in PX
- */
-export const getOffset = (position, point) => {
-    if (point) {
-        if (position === 'top' || position === 'bottom') {
-            return 7;
-        }
-        else if (position === 'left' || position === 'right') {
-            return 7;
-        }
-    }
-    return 10;
-};

package/dist/esm/components/popover/MrlPopover/utilities/index.js

@@ -1,2 +0,0 @@
-export * from './get-data-point';
-export * from './get-offset';

package/dist/esm/components/popover/demo/PopoverWithIconButton.js

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { MrlButton, MrlIconButton, MrlPopover, MrlSvg, MrlText, MrlTextHeading } from '../../..';
-import styles from './PopoverWithTrigger.module.scss.js';
-import { chevronDown } from '@muraldevkit/ds-icons';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {PopoverWithIconButtonProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export const PopoverWithIconButton = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false }) => {
-    const triggerRef = React.useRef(null);
-    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
-        React.createElement(MrlIconButton, { state: "default", text: "Menu Trigger", icon: React.createElement(MrlSvg, { svg: chevronDown }), ref: triggerRef }),
-        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover" },
-            React.createElement("div", { className: "popover-demo-content" },
-                React.createElement(MrlTextHeading, { kind: "title", size: "small", level: "2" }, "Popover Example"),
-                React.createElement(MrlText, { size: "small", attrs: { className: styles['popover-text'] } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
-                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 1", size: "small" }),
-                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 2", size: "small" })))));
-};

package/dist/esm/components/popover/demo/PopoverWithSelect.js

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { MrlButton, MrlPopover, MrlLegacySelect, MrlLegacySelectMenu, MrlLegacySelectItem } from '../../..';
-import styles from './PopoverWithTrigger.module.scss.js';
-/**
- * Demo of a popover with a select inside
- *
- * @param {PopoverWithSelectProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export const PopoverWithSelect = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false, disableFocusTrap = false }) => {
-    const triggerRef = React.useRef(null);
-    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
-        React.createElement(MrlButton, { text: "Button" }),
-        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
-        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
-            React.createElement("div", { className: "popover-demo-content" },
-                React.createElement(MrlLegacySelect, { id: "super-custom-id", labelId: "select-one", defaultValue: "b", "data-qa": "qa-select-one" },
-                    React.createElement(MrlLegacySelectMenu, { id: "select-menu-custom-id", "data-qa": "qa-select-one-menu", labelId: 'select-one', position: "bottom" },
-                        React.createElement(MrlLegacySelectItem, { id: "select-item-custom-id", "data-qa": "qa-select-the-one-we-care-about", value: 'a', index: 0 }, "a is for apple"),
-                        React.createElement(MrlLegacySelectItem, { value: 'b' }, "b is for bat"),
-                        React.createElement(MrlLegacySelectItem, { value: 'c' }, "c is for cat"),
-                        React.createElement(MrlLegacySelectItem, { value: 'd', isDisabled: true }, "d is for door"))))),
-        React.createElement(MrlButton, { text: "Button" }),
-        React.createElement(MrlButton, { text: "Button" })));
-};

package/dist/esm/components/popover/demo/PopoverWithTrigger.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { MrlButton, MrlPopover, MrlSwitch, MrlText, MrlTextHeading } from '../../../';
-import styles from './PopoverWithTrigger.module.scss.js';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {PopoverWithTriggerProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export const PopoverWithTrigger = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false, disableFocusTrap = false, disableTrigger = false, scrolling = false, ariaDisabled = false }) => {
-    const triggerRef = React.useRef(null);
-    const switchRef = React.useRef(null);
-    const selected = false;
-    const [switchChecked, setSwitchChecked] = React.useState(() => selected);
-    const handleChange = (e) => {
-        setSwitchChecked(e.target.checked);
-    };
-    React.useEffect(() => {
-        setSwitchChecked(selected);
-    }, [selected]);
-    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
-        React.createElement(MrlButton, { text: "Switch Demo Button", ref: switchRef, state: disableTrigger ? 'disabled' : 'default' }),
-        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: switchRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
-            React.createElement("div", { className: "popover-switch-demo-content" },
-                React.createElement(MrlSwitch, { id: "switch", label: "Switch label", onChange: handleChange, selected: switchChecked }))),
-        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger", state: ariaDisabled || disableTrigger ? 'disabled' : 'default' }),
-        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
-            React.createElement("div", { className: "popover-demo-content" },
-                React.createElement(MrlTextHeading, { kind: "title", size: "small", level: "2" }, "Popover Example"),
-                React.createElement(MrlText, { size: "small", attrs: { className: styles['popover-text'] } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
-                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 1", size: "small" }),
-                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 2", size: "small" }),
-                scrolling && (React.createElement("div", null,
-                    React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dolor sed viverra ipsum nunc aliquet bibendum enim. Donec ac odio tempor orci dapibus. Pulvinar mattis nunc sed blandit libero. Ac tortor vitae purus faucibus ornare. Ornare arcu dui vivamus arcu felis bibendum ut. Velit aliquet sagittis id consectetur. Dignissim diam quis enim lobortis. Urna nunc id cursus metus aliquam eleifend mi in. Nunc lobortis mattis aliquam faucibus."))))),
-        React.createElement(MrlButton, { text: "Button" }),
-        React.createElement(MrlButton, { text: "Button" })));
-};

package/dist/esm/components/popover/demo/PopoverWithTrigger.module.css

@@ -1,13 +0,0 @@
-.trigger-left--kTVir {
-  text-align: left;
-}
-.trigger-right--TsfY- {
-  text-align: right;
-}
-.trigger-center--AXRJD {
-  text-align: center;
-}
-
-.popover-text--8dnN8 {
-  margin-bottom: var(--mrl-spacing-05);
-}

package/dist/esm/components/popover/demo/PopoverWithTrigger.module.scss.js

@@ -1,7 +0,0 @@
-import "./PopoverWithTrigger.module.css";
-export default {
-	"trigger-left": "trigger-left--kTVir",
-	"trigger-right": "trigger-right--TsfY-",
-	"trigger-center": "trigger-center--AXRJD",
-	"popover-text": "popover-text--8dnN8"
-};

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

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

package/dist/esm/components/portal/MrlPortal.js

@@ -1,68 +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 { createPortal } from 'react-dom';
-import { PORTAL_LAYERS } from '../../utils/layers';
-export const MRL_PORTAL_ID = PORTAL_LAYERS.ROOT.name;
-/**
- * Dynamically creates a single portal and send your children to the portal.
- * Where they will live outside of the normal document flow
- *
- * @param PortalProps Portal only takes children. Contact the platform team if you need to extend this.
- * @returns MrlPortal component
- */
-export const MrlPortal = (_a) => {
-    var { children, className, id, layer } = _a, remainingProps = __rest(_a, ["children", "className", "id", "layer"]);
-    const [portalElement, setPortalElement] = React.useState(null);
-    const element = 'div';
-    const portalId = (layer === null || layer === void 0 ? void 0 : layer.name) || id || MRL_PORTAL_ID;
-    const portalLayer = layer || PORTAL_LAYERS.ROOT;
-    React.useLayoutEffect(() => {
-        let portal = document.getElementById(portalId);
-        const dataQa = remainingProps['data-qa'] || id || PORTAL_LAYERS.ROOT.name;
-        // create the portal on the fly and reuse the same one each time.
-        if (!portal) {
-            portal = document.createElement(element);
-            portal.setAttribute('id', portalId);
-            portal.setAttribute('data-qa', dataQa);
-            portal.setAttribute('data-testid', dataQa);
-            if (className)
-                portal.setAttribute('class', className);
-            document.body.appendChild(portal);
-        }
-        setPortalElement(portal);
-    }, [
-        portalId,
-        remainingProps,
-        id,
-        className
-    ]);
-    /**
-     * Sets z-index of the first child element of the portal to the layer's z-index
-     *
-     * TODO: update to also accept a 'layerId' that will override the default layer
-     * with the provided layerId
-     */
-    if (!portalElement)
-        return null;
-    const childrenArray = React.Children.toArray(children);
-    if (childrenArray.length > 0 && portalElement) {
-        const firstChildElement = portalElement.firstElementChild;
-        if (firstChildElement) {
-            firstChildElement.style.zIndex = `${portalLayer.zIndex}`;
-        }
-    }
-    // state will be null on the very first render.
-    if (!portalElement)
-        return null;
-    return createPortal(children, portalElement);
-};

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

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