@loomhq/lens 10.33.0 → 10.34.1

package/dist/components/link/link.d.ts

@@ -1,16 +1,20 @@
 import React from 'react';
 declare const LinkWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, LinkWrapperProps, object>;
-declare const Link: ({ children, href, variant, ...props }: LinkProps & React.ComponentProps<typeof LinkWrapper>) => JSX.Element;
+declare const Link: ({ children, href, variant, htmlTag, isDisabled, ...props }: LinkProps & React.ComponentProps<typeof LinkWrapper>) => JSX.Element;
 export declare const availableVariants: string[];
 declare type LinkProps = {
     children?: React.ReactNode;
     href?: string;
     variant?: 'neutral' | 'primary';
+    htmlTag?: 'button' | 'a';
+    isDisabled?: boolean;
     onClick?: React.ReactEventHandler;
 };
 declare type LinkWrapperProps = {
     children?: React.ReactNode;
     href?: string;
+    disabled?: boolean;
     variant?: 'neutral' | 'primary';
+    as?: string;
 };
 export default Link;

package/dist/components/link/link.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { getColorValue } from '../../utilities';
 const variants = {
     neutral: {
@@ -20,16 +21,33 @@ const variants = {
         color: getColorValue('primary'),
     },
 };
+const statusStyles = {
+    enabled: css `
+    cursor: pointer;
+  `,
+    disabled: css `
+    pointer-events: none;
+    color: ${getColorValue('disabledContent')};
+  `,
+};
+const buttonStyles = {
+    isButton: css `
+    background: none;
+    border: none;
+    font: inherit;
+  `
+};
 const LinkWrapper = styled.a `
   text-decoration: none;
-  color: ${props => variants[props.variant].color};
+  ${props => !props.disabled && `color: ${variants[props.variant].color}`};
   box-shadow: 0 1px 0 currentColor;
-  padding-bottom: 1px;
-  cursor: pointer;
+  padding: 0 0 1px 0;
+  ${props => props.disabled ? statusStyles.disabled : statusStyles.enabled};
+  ${props => props.as === 'button' && buttonStyles.isButton};
 `;
 const Link = (_a) => {
-    var { children, href, variant = 'primary' } = _a, props = __rest(_a, ["children", "href", "variant"]);
-    return (React.createElement(LinkWrapper, Object.assign({ href: href, variant: variant }, props), children));
+    var { children, href, variant = 'primary', htmlTag = 'a', isDisabled } = _a, props = __rest(_a, ["children", "href", "variant", "htmlTag", "isDisabled"]);
+    return (React.createElement(LinkWrapper, Object.assign({ href: href, variant: variant, as: htmlTag, disabled: isDisabled }, props), children));
 };
 export const availableVariants = Object.keys(variants);
 export default Link;

package/dist/components/toast/toast.js

@@ -9,12 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getRadius, getShadow, getColorValue, u } from '../../utilities';
-import IconButton from '../icon-button/icon-button';
 import React, { useEffect } from 'react';
+import { getColorValue, getRadius, getShadow, u } from '../../utilities';
+import IconButton from '../icon-button/icon-button';
 import { SvgClose } from '../icon/available-icons';
-import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
+import styled from '@emotion/styled';
 const toastDuration = 3000;
 const enter = keyframes `
   from {
@@ -66,7 +66,7 @@ const Toast = (_a) => {
         }, toastDuration);
         return () => clearTimeout(timer);
     }, [isOpen, onCloseClick]);
-    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, Object.assign({ className: "theme-dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen }, props),
+    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, Object.assign({ "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen }, props),
         React.createElement(ChildrenSection, { "aria-live": "polite" }, children),
         onCloseClick && (React.createElement(IconButton, { altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))));
 };

package/dist/components/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const TooltipBoxWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipBoxProps, object>;
 export declare const TooltipBox: ({ children, maxWidth, onMouseEnter, onMouseLeave, layerProps, zIndex, ...rest }: TooltipBoxProps & React.ComponentProps<typeof TooltipBoxWrapper>) => JSX.Element;
-declare function Tooltip({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, container, zIndex, verticalAlign, ...rest }: TooltipProps): JSX.Element;
+declare function Tooltip({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, zIndex, verticalAlign, ...rest }: TooltipProps): JSX.Element;
 export declare const availablePlacements: string[];
 declare type TooltipBoxProps = {
     children?: React.ReactNode;
@@ -12,15 +12,16 @@ declare type TooltipBoxProps = {
     zIndex?: number;
 };
 declare type TooltipProps = {
-    placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom';
+    children?: React.ReactNode;
+    container?: HTMLElement | (() => HTMLElement) | string;
     content?: React.ReactNode;
-    triggerOffset?: number;
+    isDisabled?: boolean;
+    isInline?: boolean;
     keepOpen?: boolean;
     maxWidth?: number | string | [];
-    isInline?: boolean;
-    container?: HTMLElement | (() => HTMLElement) | string;
-    zIndex?: number;
-    children?: React.ReactNode;
+    placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom';
+    triggerOffset?: number;
     verticalAlign?: string;
+    zIndex?: number;
 };
 export default Tooltip;

package/dist/components/tooltip/tooltip.js

@@ -53,7 +53,7 @@ const TooltipChildren = styled.span `
   ${props => props.verticalAlign && `vertical-align: ${props.verticalAlign}`};
 `;
 function Tooltip(_a) {
-    var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, container, zIndex = 1100, verticalAlign = 'middle' } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "container", "zIndex", "verticalAlign"]);
+    var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, isDisabled, container, zIndex = 1100, verticalAlign = 'middle' } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "isDisabled", "container", "zIndex", "verticalAlign"]);
     const [show, hoverProps] = useHover({
         delayEnter: 100,
         delayLeave: 100,
@@ -71,6 +71,7 @@ function Tooltip(_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { isInline: isInline, verticalAlign: verticalAlign }), children),
         isOpen &&
+            !isDisabled &&
             renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex }) }),
                 React.createElement(TooltipBox, Object.assign({ maxWidth: maxWidth, onMouseEnter: () => setIsOverTooltip(true), onMouseLeave: () => setIsOverTooltip(false) }, rest), content)))));
 }

package/dist/css-variables/index.js

@@ -100,12 +100,12 @@ export const getThemeStylesString = (customRootElement = ':root') => {
     return `
     ${rootElement},
     .theme-light,
-    [data-lensTheme="light"] {
+    [data-lens-theme="light"] {
       ${assignLightThemeColors().join('')}
     }
 
     .theme-dark,
-    [data-lensTheme="dark"] {
+    [data-lens-theme="dark"] {
       ${assignDarkThemeColors().join('')}
     }
   `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.33.0",
+  "version": "10.34.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -38,8 +38,8 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "7.8.4",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.14.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",