@loomhq/lens 10.102.1 → 10.102.2

package/dist/components/modal/modal.js

@@ -1,163 +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;
-};
-// TODO(LNS-183): Implement scroll-lock
-import FocusTrap from 'focus-trap-react';
-import { getColorValue, getPlacement, getRadius, getShadow, getSize, getSizeValue, u, } from '../../utilities';
-import React, { useEffect } from 'react';
-import usePreventScroll from '../../hooks/use-prevent-scroll';
-import Backdrop from '../backdrop/backdrop';
-import Container from '../container/container';
-import IconButton from '../icon-button/icon-button';
-import Spacer from '../spacer/spacer';
-import { SvgClose } from '../icon/available-icons';
-import Text from '../text/text';
-import styled from '@emotion/styled';
-const modalCardHeight = '70vh';
-const ContentWrapper = styled.div `
-  display: grid;
-  grid-template-rows: ${props => props.rows};
-  position: relative;
-`;
-const ModalCardWrapper = styled.dialog `
-  top: ${props => getPlacement(getSizeValue(props.maxHeight), props.placement).top};
-  background-color: ${getColorValue('overlay')};
-  color: ${getColorValue('body')};
-  bottom: ${props => getPlacement(props.maxHeight, props.placement).bottom};
-  ${getShadow('large')};
-  ${getRadius('xlarge')};
-  // Unsets bottom-radius for bottom-aligned modals
-  border-bottom-left-radius: ${props => props.placement === 'bottom' ? 'initial' : undefined};
-  border-bottom-right-radius: ${props => props.placement === 'bottom' ? 'initial' : undefined};
-  ${props => getSize('max-height', props.maxHeight)};
-  ${props => getSize('max-width', props.maxWidth)};
-  margin: 0 auto;
-  position: ${props => getPlacement(props.maxHeight, props.placement).position};
-  overflow: auto;
-  width: 100%;
-  // TODO: LNS-150: Bake dialog resets into native resets file
-  border: 0;
-  padding: 0;
-  &::backdrop {
-    background: var(--lns-color-overlay);
-  }
-`;
-const CloseIconSection = styled.div `
-  position: absolute;
-  top: ${u(1.5)};
-  right: ${u(1.5)};
-  z-index: 1;
-`;
-const RightButtonsSection = styled.div `
-  margin-left: auto;
-
-  * {
-    vertical-align: middle;
-  }
-`;
-const TitleSection = styled.div `
-  padding-left: var(--lns-space-xlarge);
-  padding-right: var(--lns-space-xlarge);
-  padding-top: var(--lns-space-xlarge);
-  padding-bottom: ${props => props.bottom};
-  flex-shrink: 0;
-`;
-const ButtonsSection = styled.div `
-  padding-left: var(--lns-space-xlarge);
-  padding-right: var(--lns-space-xlarge);
-  padding-bottom: var(--lns-space-xlarge);
-  padding-top: ${props => props.hasDividers ? 'var(--lns-space-medium)' : props.top};
-  flex-shrink: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const ChildrenSection = styled.div `
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding-top: ${props => props.hasTitle && !props.noPadding
-    ? 0
-    : !props.hasTitle && !props.noPadding
-        ? 'var(--lns-space-xlarge)'
-        : 0};
-  padding-bottom: ${props => props.hasButtons && !props.noPadding
-    ? 0
-    : !props.hasButtons && !props.noPadding
-        ? 'var(--lns-space-xlarge)'
-        : 0};
-  padding-left: ${props => (props.noPadding ? 0 : 'var(--lns-space-xlarge)')};
-  padding-right: ${props => (props.noPadding ? 0 : 'var(--lns-space-xlarge)')};
-  border-style: solid;
-  border-color: ${getColorValue('border')};
-  border-width: ${props => (props.hasDividers ? '1px 0' : '0')};
-`;
-const ModalCardChildrenSection = styled.div `
-  overflow: auto;
-  max-height: ${modalCardHeight};
-
-  & > * {
-    max-height: ${modalCardHeight};
-  }
-`;
-export const ModalCard = (_a) => {
-    // TODO: LNS-151: Abstract into useKeyDown hook for reuse
-    var { children, onCloseClick, isOpen, maxWidth = 60, maxHeight = '70vh', placement = 'center', ariaLabel, ref } = _a, props = __rest(_a, ["children", "onCloseClick", "isOpen", "maxWidth", "maxHeight", "placement", "ariaLabel", "ref"]);
-    useEffect(() => {
-        const keyListener = e => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                onCloseClick(e);
-            }
-        };
-        window.addEventListener('keydown', keyListener);
-        return () => {
-            window.removeEventListener('keydown', keyListener);
-        };
-    }, [isOpen, onCloseClick]);
-    usePreventScroll('html', isOpen);
-    return (React.createElement(FocusTrap, { active: isOpen, focusTrapOptions: {
-            clickOutsideDeactivates: false,
-            allowOutsideClick: true,
-        } },
-        React.createElement(ModalCardWrapper, Object.assign({ open: isOpen, maxWidth: maxWidth, maxHeight: maxHeight, placement: placement, onClick: e => e.stopPropagation(), ref: ref, "aria-label": ariaLabel }, props),
-            onCloseClick && (React.createElement(CloseIconSection, null,
-                React.createElement(IconButton, { altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))),
-            React.createElement(ModalCardChildrenSection, null, children))));
-};
-const Modal = React.forwardRef((_a, ref) => {
-    var { children, id, isOpen, mainButton, secondaryButton, alternativeButton, title, noPadding, onCloseClick, onBackgroundClick, onKeyDown, hasDividers, maxHeight = '70vh', maxWidth = 60, placement = 'center', zIndex = 1000, ariaLabel } = _a, props = __rest(_a, ["children", "id", "isOpen", "mainButton", "secondaryButton", "alternativeButton", "title", "noPadding", "onCloseClick", "onBackgroundClick", "onKeyDown", "hasDividers", "maxHeight", "maxWidth", "placement", "zIndex", "ariaLabel"]);
-    const titleId = id ? `${id}-modal-title` : 'modal-title';
-    const hasButtons = mainButton || secondaryButton || alternativeButton ? true : false;
-    const closeClickHandler = e => {
-        if (onBackgroundClick) {
-            e.stopPropagation();
-            onBackgroundClick(e);
-            return;
-        }
-        onCloseClick(e);
-    };
-    return (React.createElement(Backdrop, Object.assign({ isOpen: isOpen, zIndex: zIndex }, props),
-        React.createElement(Container, { height: "100%", onClick: closeClickHandler, onKeyDown: onKeyDown, "aria-labelledby": titleId },
-            React.createElement(ModalCard, { ref: ref, id: id, isOpen: isOpen, maxHeight: maxHeight, maxWidth: maxWidth, placement: placement, onCloseClick: onCloseClick, ariaLabel: ariaLabel },
-                React.createElement(ContentWrapper, { rows: `${title ? 'auto ' : ''} ${children ? '1fr ' : ''} ${hasButtons ? 'auto' : ''}` },
-                    title && (React.createElement(TitleSection, { bottom: children
-                            ? 'var(--lns-space-medium)'
-                            : 'var(--lns-space-xlarge)', id: titleId },
-                        React.createElement(Text, { variant: "title" }, title))),
-                    React.createElement(ChildrenSection, { noPadding: noPadding, hasDividers: hasDividers, hasTitle: Boolean(title), hasButtons: hasButtons }, children && children),
-                    hasButtons && (React.createElement(ButtonsSection, { top: children ? 'var(--lns-space-xlarge)' : 0, hasDividers: hasDividers },
-                        alternativeButton,
-                        React.createElement(RightButtonsSection, null,
-                            secondaryButton && (React.createElement(Spacer, { right: "small", isInline: true }, secondaryButton)),
-                            mainButton))))))));
-});
-export default Modal;

package/dist/components/notification-bar/notification-bar.js

@@ -1,96 +0,0 @@
-import React, { useEffect } from 'react';
-import { u } from '../../utilities';
-import styled from '@emotion/styled';
-import { SvgClose, SvgAlertTriangle, SvgInfo, SvgWarningAlert, } from '../icon/available-icons';
-import Align from '../align/align';
-import Arrange from '../arrange/arrange';
-import Container from '../container/container';
-import Icon from '../icon/icon';
-import IconButton from '../icon-button/icon-button';
-import { usePushPageDown } from '../../hooks';
-const severityStyles = {
-    info: {
-        bgColor: 'var(--lns-color-blurple)',
-        icon: React.createElement(SvgInfo, null),
-        color: 'var(--lns-color-white)',
-        fontFamily: 'inherit',
-    },
-    warning: {
-        bgColor: 'var(--lns-color-warning)',
-        icon: React.createElement(SvgWarningAlert, null),
-        color: 'var(--lns-color-grey8)',
-        fontFamily: 'inherit',
-    },
-    error: {
-        bgColor: 'var(--lns-color-danger)',
-        icon: React.createElement(SvgAlertTriangle, null),
-        color: 'var(--lns-color-white)',
-        fontFamily: 'inherit',
-    },
-    internal: {
-        icon: React.createElement("span", { role: "img" }, "\uD83D\uDD14"),
-        color: 'var(--lns-color-teal)',
-        bgColor: 'var(--lns-color-grey8)',
-        fontFamily: 'Roboto Mono, Lucida Mono, monospace',
-    },
-};
-const DURATION = 350;
-const NotificationBarWrapper = styled.aside `
-  --paddingXOffset: var(--lns-space-large);
-  --alignItems: start;
-
-  display: grid;
-  align-items: var(--alignItems);
-  justify-content: space-between;
-  grid-template-columns: 1fr auto;
-  ${props => `background-color: ${severityStyles[props.severity].bgColor}`};
-  ${props => `font-family: ${severityStyles[props.severity].fontFamily}`};
-
-  ${props => `color: ${severityStyles[props.severity].color}`};
-  position: fixed;
-  padding: var(--lns-space-medium) var(--paddingXOffset);
-  top: 0;
-  left: 0;
-  transition: ${DURATION}ms box-shadow, ${DURATION}ms transform;
-  width: 100%;
-  box-sizing: border-box;
-  z-index: 1100;
-  opacity: ${props => (props.isOpen ? '1' : '0')};
-  transform: ${props => props.isOpen ? 'translateY(0px)' : 'translateY(-100%)'};
-  @media (min-width: 872px) {
-    --alignItems: center;
-  }
-`;
-const NotificationBar = ({ children, onCloseClick, isOpen, severity = 'info', id, }) => {
-    var _a, _b, _c;
-    useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-        const keyListener = (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                onCloseClick();
-            }
-        };
-        window.addEventListener('keydown', keyListener);
-        return () => {
-            window.removeEventListener('keydown', keyListener);
-        };
-    }, [isOpen, onCloseClick]);
-    usePushPageDown(isOpen);
-    // NOTE: The UI for internal alert is slightly different.
-    const isInternalAlert = severity === 'internal';
-    return isOpen ? (React.createElement(NotificationBarWrapper, { isOpen: isOpen, severity: severity, id: id },
-        React.createElement(Arrange, { alignItems: { default: 'start', small: 'center' }, justifyContent: "space-between", autoFlow: isInternalAlert ? 'column' : undefined, columns: !isInternalAlert ? ['1fr auto'] : undefined },
-            React.createElement(Container, { paddingY: { default: 'xsmall', xsmall: 0 }, 
-                // Visually offsets the close X so that text appears centre-aligned
-                paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : undefined, width: "100%" },
-                React.createElement(Arrange, { autoFlow: "column", gap: isInternalAlert ? 'medium' : 'small', justifyContent: "center" },
-                    ((_a = severityStyles[severity]) === null || _a === void 0 ? void 0 : _a.icon) ? (React.createElement(Align, { alignment: "topLeft" },
-                        React.createElement(Icon, { icon: severityStyles[severity].icon, color: (_b = severityStyles[severity].color) !== null && _b !== void 0 ? _b : 'var(--lns-color-white)' }))) : null,
-                    ' ',
-                    children))),
-        React.createElement(IconButton, { iconColor: (_c = severityStyles[severity].color) !== null && _c !== void 0 ? _c : 'var(--lns-color-white)', tabIndex: 0, altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))) : null;
-};
-export default NotificationBar;

package/dist/components/notification-bar/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/pill/pill.js

@@ -1,40 +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 { getColorValue, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
-import Container from '../container/container';
-import Icon from '../icon/icon';
-import React from 'react';
-import styled from '@emotion/styled';
-const PillWrapper = styled.div `
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  vertical-align: middle;
-  padding: 0 ${u(1.5)};
-  min-height: ${u(3.25)};
-  color: ${props => getColorValue(props.color)};
-  background-color: ${props => getColorValue(props.backgroundColor)};
-  ${getRadius('full')};
-  ${getTextSize('small')};
-  ${getFontWeight('bold')};
-  ${getSize('gap', 'xsmall')};
-`;
-const Pill = (_a) => {
-    var { color, backgroundColor, children, icon, iconPosition = 'left' } = _a, props = __rest(_a, ["color", "backgroundColor", "children", "icon", "iconPosition"]);
-    const iconComponent = (React.createElement(Container, { htmlTag: "span", paddingLeft: iconPosition === 'right' && 'xsmall', paddingRight: iconPosition === 'left' && 'xsmall' },
-        React.createElement(Icon, { icon: icon, color: "currentColor", size: 2, hasWidthOffset: true })));
-    return (React.createElement(PillWrapper, Object.assign({ color: color, backgroundColor: backgroundColor }, props),
-        icon && iconPosition === 'left' && iconComponent,
-        children,
-        icon && iconPosition === 'right' && iconComponent));
-};
-export default Pill;

package/dist/components/popover/popover.js

@@ -1,96 +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 { autoUpdate, flip, offset as floatingUiOffset, limitShift, shift, useFloating, } from '@floating-ui/react-dom';
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import styled from '@emotion/styled';
-import { unit } from '../../variables';
-import { useTransition } from 'transition-hook';
-const placements = {
-    topLeft: 'top-start',
-    topCenter: 'top',
-    topRight: 'top-end',
-    bottomLeft: 'bottom-start',
-    bottomCenter: 'bottom',
-    bottomRight: 'bottom-end',
-    leftTop: 'left-start',
-    leftCenter: 'left',
-    leftBottom: 'left-end',
-    rightTop: 'right-start',
-    rightCenter: 'right',
-    rightBottom: 'right-end',
-};
-const Wrapper = styled.div `
-  position: relative;
-  width: fit-content;
-  // transform forces the popover to calculate the position from the trigger instead of the viewport
-  transform: translate(0);
-  z-index: 1;
-`;
-const ContentWrapper = styled.div `
-  ${props => props.zIndex && `z-index: ${props.zIndex}`};
-`;
-const Popover = (_a) => {
-    var { children, content, offset = 0.5, boundaryOffset = 0.5, isOpen, zIndex = 500, placement = 'topCenter', rootId, boundaryElement = 'body', transitionDuration = 0, transitionDelay = 0 } = _a, props = __rest(_a, ["children", "content", "offset", "boundaryOffset", "isOpen", "zIndex", "placement", "rootId", "boundaryElement", "transitionDuration", "transitionDelay"]);
-    const unitOffset = offset * unit;
-    const unitBoundaryOffset = boundaryOffset * unit;
-    const isBrowser = typeof window !== 'undefined';
-    const rootNode = rootId && isBrowser ? document.getElementById(rootId) : undefined;
-    const { stage, shouldMount } = useTransition(isOpen, transitionDuration + transitionDelay);
-    const getBoundaryElement = () => {
-        if (boundaryElement === 'body' && isBrowser) {
-            return document.body;
-        }
-        return boundaryElement;
-    };
-    const { x, y, reference, floating, strategy, update, refs } = useFloating({
-        placement: placements[placement],
-        middleware: [
-            shift({
-                padding: unitBoundaryOffset,
-                boundary: boundaryElement ? getBoundaryElement() : undefined,
-                limiter: limitShift(),
-            }),
-            flip({
-                fallbackPlacements: ['top', 'bottom'],
-                fallbackStrategy: 'initialPlacement',
-            }),
-            floatingUiOffset(unitOffset),
-        ],
-        strategy: 'fixed',
-    });
-    useEffect(() => {
-        if (!refs.reference.current || !refs.floating.current) {
-            return;
-        }
-        // Only call this when the floating element is rendered
-        return autoUpdate(refs.reference.current, refs.floating.current, update);
-    }, [refs.reference, refs.floating, update, shouldMount]);
-    const contentProps = {
-        zIndex,
-        ref: floating,
-        style: {
-            position: strategy,
-            top: y !== null && y !== void 0 ? y : '',
-            left: x !== null && x !== void 0 ? x : '',
-            transition: `opacity ${transitionDuration}ms ${transitionDelay}ms`,
-            opacity: stage === 'enter' ? 1 : 0,
-        },
-    };
-    return (React.createElement(Wrapper, Object.assign({ ref: reference }, props),
-        children,
-        shouldMount && (React.createElement(React.Fragment, null,
-            !rootNode && (React.createElement(ContentWrapper, Object.assign({}, contentProps), content)),
-            rootNode &&
-                ReactDOM.createPortal(React.createElement(ContentWrapper, Object.assign({}, contentProps), content), rootNode)))));
-};
-export default Popover;

package/dist/components/radio/radio.js

@@ -1,86 +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 React, { forwardRef } from 'react';
-import { getColorValue, getFocusRing, getRadius, u } from '../../utilities';
-import styled from '@emotion/styled';
-const RadioLabel = styled.label `
-  display: block;
-  position: relative;
-
-  .RadioBox:after {
-    background-color: transparent;
-  }
-`;
-const RadioInput = styled.input `
-  position: absolute;
-  opacity: 0;
-
-  &:not(:disabled) {
-    cursor: pointer;
-
-    & ~ .RadioBox {
-      border: 2px solid ${getColorValue('body')};
-    }
-
-    &:checked ~ .RadioBox {
-      border: 2px solid ${getColorValue('body')};
-    }
-  }
-
-  &:disabled,
-  &:disabled ~ .RadioBox {
-    pointer-events: none;
-  }
-
-  &:disabled ~ .RadioBox {
-    background-color: ${getColorValue('disabledBackground')};
-  }
-
-  &:checked {
-    & ~ .RadioBox:after {
-      background-color: ${getColorValue('blurple')};
-    }
-
-    &:disabled ~ .RadioBox:after {
-      background-color: ${getColorValue('disabledContent')};
-    }
-  }
-
-  &:focus-visible ~ .RadioBox {
-    ${getFocusRing()};
-  }
-`;
-const RadioBox = styled.span `
-  cursor: pointer;
-  width: ${u(2.25)};
-  height: ${u(2.25)};
-  ${getRadius('full')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-
-  &:after {
-    content: '';
-    width: ${u(1)};
-    height: ${u(1)};
-    ${getRadius('full')};
-    background-color: ${getColorValue('white')};
-  }
-`;
-const Radio = forwardRef((_a, ref) => {
-    var { isDisabled, isChecked, onFocus, onChange, onBlur } = _a, props = __rest(_a, ["isDisabled", "isChecked", "onFocus", "onChange", "onBlur"]);
-    return (React.createElement(RadioLabel, null,
-        React.createElement(RadioInput, Object.assign({ type: "radio", disabled: isDisabled, checked: isChecked, onFocus: onFocus, onChange: onChange, onBlur: onBlur, ref: ref }, props)),
-        React.createElement(RadioBox, { className: "RadioBox" })));
-});
-export default Radio;