@loomhq/lens 10.62.1 → 10.63.1

package/README.md

@@ -62,7 +62,79 @@ navigate to: http://localhost:3000
 
 ### Use conventional commits
 
-Use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to kick off publishing a new version of Lens when PR is merged. To upgrade Lens to the latest published version in the [main Loom repo](http://github.com/loomhq/loom), `cd projects/webapp-client` and `pnpm up @loomhq/lens`.
+Use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to kick off publishing a new version of Lens when PR is merged.
+
+
+### Upgrading Lens versions
+
+#### loom
+From the root of the [main Loom repo](http://github.com/loomhq/loom)
+
+1. Move into the webapp-client directory.
+
+```
+cd projects/webapp-client
+```
+
+2. Upgrade the Lens package with pnpm (you can ignore the warnings).
+
+```
+pnpm up @loomhq/lens
+```
+
+3. From the root, fix dependencies and upgrade Lens globally
+```
+cd ... && pnpm deps:fix && pnpm i
+```
+
+4. Run changesets so that it generates the necessary `.md` file for release.
+
+```
+pnpm changeset
+```
+
+5. Follow the prompts. Hit Spacebar to select all changed packages. The checks should turn green. Hit Enter to commit.
+
+```
+🦋  Which packages would you like to include?
+✔ changed packages
+  ✔ @loomhq/web-client
+```
+
+6. Skip major bump. Hit Enter to bypass.
+
+```
+🦋  Which packages should have a major bump? … 
+```
+
+7. Skip minor bump. Hit Enter to bypass.
+
+```
+🦋  Which packages should have a minor bump? … 
+```
+
+8. For patch bump, you will be prompted to write a description.
+
+```
+The following packages will be patch bumped:
+🦋  @loomhq/web-client@0.0.6
+🦋  Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor
+🦋  Summary › [description goes here, enter to complete]
+```
+
+9. Write a concise note like `bump Lens v[X.X.X] to add SvgIconName`
+
+10. You will be asked asked if this is your desired change. Type 'Y'.
+
+```
+All dependents of these packages that will be incompatible with the new version will be patch bumped when this changeset is applied.
+
+🦋  Is this your desired changeset? (Y/n) › [type Y]
+```
+
+11. A new randomly-named `.md` file should be generated into the changesets directory. Commit this file to your changes.
+
+12. For any changes to existing components, do your due diligence and check the component changes locally within the repo.
 
 ### Add an icon to the icon set
 

package/dist/components/switch/switch.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 declare const SwitchInput: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SwitchInputProps, object>;
-declare const Switch: ({ isActive, isDisabled, onChange, size, ariaLabelledby, ariaLabel, ...props }: SwitchProps & Omit<React.ComponentProps<typeof SwitchInput>, 'size'>) => JSX.Element;
+declare const Switch: ({ isActive, isDisabled, onChange, size, ...props }: SwitchProps & Omit<React.ComponentProps<typeof SwitchInput>, 'size'>) => JSX.Element;
 declare type SwitchProps = {
     isActive?: boolean;
     isDisabled?: boolean;
     onChange?: React.ReactEventHandler;
     size?: 'medium' | 'large';
-    ariaLabelledby?: string;
-    ariaLabel?: string;
 };
 declare type SwitchInputProps = {
     switchSize?: 'medium' | 'large';

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, { useRef } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 const sizes = {
     medium: {
@@ -53,18 +53,16 @@ const getKnobSize = props => {
     return (sizes[props.switchSize].switchHeight -
         sizes[props.switchSize].knobOffset * 2);
 };
-const SwitchWrapper = styled.div `
+const SwitchLabel = styled.label `
   display: block;
   position: relative;
 `;
 const SwitchInput = styled.input `
   position: absolute;
   opacity: 0;
-
   &:focus-visible ~ .SwitchBox {
     ${getFocusRing()};
   }
-
   &:not(:checked) {
     & + .SwitchBox {
       background-color: ${colorStyles.track.inactive.enabled};
@@ -73,7 +71,6 @@ const SwitchInput = styled.input `
       background-color: ${colorStyles.track.inactive.disabled};
     }
   }
-
   &:checked {
     & + .SwitchBox {
       background-color: ${colorStyles.track.active.enabled};
@@ -85,7 +82,6 @@ const SwitchInput = styled.input `
       transform: translateX(${props => getKnobTravel(props)}px);
     }
   }
-
   &:disabled {
     pointer-events: none;
   }
@@ -97,7 +93,6 @@ const SwitchBox = styled.div `
   border-radius: var(--lns-radius-full);
   transition: 0.2s;
   cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-
   &:after {
     content: '';
     position: absolute;
@@ -113,19 +108,9 @@ 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.');
-    }
-    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", 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 })));
+    var { isActive, isDisabled, onChange, size = 'medium' } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange", "size"]);
+    return (React.createElement(SwitchLabel, null,
+        React.createElement(SwitchInput, Object.assign({}, props, { checked: isActive, disabled: isDisabled, onChange: onChange, type: "checkbox", switchSize: size })),
+        React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive, switchSize: size })));
 };
 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.1",
+  "version": "10.63.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",