@loomhq/lens 10.63.0 → 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/package.json

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