@loomhq/lens 10.62.0 → 10.63.0

package/dist/components/switch/switch.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { getColorValue, getFocusRing } from '../../utilities';
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 const sizes = {
     medium: {
@@ -115,10 +115,17 @@ const SwitchBox = styled.div `
 const Switch = (_a) => {
     var { isActive, isDisabled, onChange, size = 'medium', ariaLabelledby, ariaLabel } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange", "size", "ariaLabelledby", "ariaLabel"]);
     if (ariaLabelledby && ariaLabel) {
-        throw new Error('ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs. ');
+        throw new Error('ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs.');
     }
+    const ref = useRef(null);
+    const toggleSwitch = () => {
+        if (!ref.current || isActive) {
+            return;
+        }
+        ref.current.checked = !ref.current.checked;
+    };
     return (React.createElement(SwitchWrapper, null,
-        React.createElement(SwitchInput, Object.assign({}, props, { role: "switch", type: "checkbox", checked: isActive, disabled: isDisabled, onChange: onChange, switchSize: size, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-checked": isActive })),
-        React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive, switchSize: size })));
+        React.createElement(SwitchInput, Object.assign({}, props, { role: "switch", type: "checkbox", ref: ref, checked: isActive, disabled: isDisabled, onChange: onChange, switchSize: size, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-checked": isActive })),
+        React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive, switchSize: size, onClick: toggleSwitch })));
 };
 export default Switch;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 declare type DelaySpeed = 'immediate' | 'long';
 declare const TooltipBoxWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipBoxProps, object>;
+declare const ShortcutWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
+export declare const ShortcutBox: ({ children, }: React.ComponentProps<typeof ShortcutWrapper>) => JSX.Element;
 export declare const TooltipBox: ({ children, maxWidth, onMouseEnter, onMouseLeave, layerProps, zIndex, ...rest }: TooltipBoxProps & React.ComponentProps<typeof TooltipBoxWrapper>) => JSX.Element;
-declare const Tooltip: ({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, tabIndex, zIndex, verticalAlign, delay, dynamicPosition, ...rest }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, content, shortcut, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, tabIndex, zIndex, verticalAlign, delay, dynamicPosition, ...rest }: TooltipProps) => JSX.Element;
 export declare const availablePlacements: string[];
 declare type TooltipBoxProps = {
     children?: React.ReactNode;
@@ -16,6 +18,7 @@ declare type TooltipProps = {
     children?: React.ReactNode;
     container?: HTMLElement | (() => HTMLElement) | string;
     content?: React.ReactNode;
+    shortcut?: [];
     isDisabled?: boolean;
     isInline?: boolean;
     keepOpen?: boolean;

package/dist/components/tooltip/tooltip.js

@@ -10,6 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useState, useRef, useEffect } from 'react';
+import Arrange from '../arrange/arrange';
+import Text from '../text/text';
 import { getColorValue, getFontWeight, getRadius, getShadow, getSize, getTextSize, u, } from '../../utilities';
 import { useHover, useLayer, mergeRefs, useMousePositionAsTrigger, } from 'react-laag';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -34,8 +36,8 @@ const tooltipMinHeight = 4;
 const textHeight = textSizes.small.fontSize * textSizes.small.lineHeight;
 const tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
 const TooltipBoxWrapper = styled.div `
-  background-color: ${getColorValue('grey8')};
-  color: ${getColorValue('grey1')};
+  background-color: ${getColorValue('background')};
+  color: ${getColorValue('body')};
   ${getRadius('large')};
   ${getFontWeight('medium')};
   ${getTextSize('small')};
@@ -45,9 +47,19 @@ const TooltipBoxWrapper = styled.div `
   padding: ${u(tooltipYPadding)} ${u(1.5)};
   z-index: ${props => props.zIndex};
 `;
+const ShortcutWrapper = styled.div `
+  background-color: ${getColorValue('backgroundActive')};
+  border-radius: 3px;
+  color: ${getColorValue('grey3')};
+  ${getFontWeight('medium')};
+  ${getTextSize('small')};
+  padding-left: ${u(0.5)};
+  padding-right: ${u(0.5)};
+`;
+export const ShortcutBox = ({ children, }) => (React.createElement(ShortcutWrapper, null, children));
 export const TooltipBox = (_a) => {
     var { children, maxWidth, onMouseEnter, onMouseLeave, layerProps, zIndex } = _a, rest = __rest(_a, ["children", "maxWidth", "onMouseEnter", "onMouseLeave", "layerProps", "zIndex"]);
-    return (React.createElement(TooltipBoxWrapper, Object.assign({ maxWidth: maxWidth, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, zIndex: zIndex }, layerProps, rest), children));
+    return (React.createElement(TooltipBoxWrapper, Object.assign({ "data-lens-theme": "dark", maxWidth: maxWidth, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, zIndex: zIndex }, layerProps, rest), children));
 };
 const TooltipChildren = styled.div `
   display: ${props => (props.isInline ? 'inline-block' : 'block')};
@@ -70,7 +82,7 @@ function getInitialDelaySpeed(delay) {
     }
 }
 const Tooltip = (_a) => {
-    var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, isDisabled, container, tabIndex = 0, zIndex = 1100, verticalAlign = 'middle', delay = 'immediate', dynamicPosition = false } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "isDisabled", "container", "tabIndex", "zIndex", "verticalAlign", "delay", "dynamicPosition"]);
+    var { children, content, shortcut, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, isDisabled, container, tabIndex = 0, zIndex = 1100, verticalAlign = 'middle', delay = 'immediate', dynamicPosition = false } = _a, rest = __rest(_a, ["children", "content", "shortcut", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "isDisabled", "container", "tabIndex", "zIndex", "verticalAlign", "delay", "dynamicPosition"]);
     const [show, hoverProps] = useHover({
         delayEnter: getInitialDelaySpeed(delay),
         delayLeave: 200,
@@ -142,7 +154,10 @@ const Tooltip = (_a) => {
         React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { onFocus: handleFocus, onBlur: handleBlur, isInline: isInline, verticalAlign: verticalAlign, tabIndex: isTooltipDisabled ? -1 : tabIndex, ref: mergeRefs(triggerProps.ref, focusRef, parentRef), onMouseMove: allowTrackMousePosition ? handleMouseEvent : null }), children),
         isOpen &&
             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)))));
+                React.createElement(TooltipBox, Object.assign({ maxWidth: maxWidth, onMouseEnter: () => setIsOverTooltip(true), onMouseLeave: () => setIsOverTooltip(false) }, rest),
+                    React.createElement(Arrange, { gap: "small" },
+                        React.createElement(Text, { size: "small", fontWeight: "medium" }, content),
+                        shortcut && (React.createElement(Arrange, { gap: "xsmall" }, shortcut.map((char, index) => (React.createElement(ShortcutBox, { key: index }, char)))))))))));
 };
 export const availablePlacements = Object.keys(placements);
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.62.0",
+  "version": "10.63.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",