@loomhq/lens 10.98.1 → 10.98.2

package/dist/components/color-picker/color-picker.js

@@ -10,10 +10,48 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useState } from 'react';
-import { CustomPicker } from 'react-color';
-import { Saturation, Hue, EditableInput, } from 'react-color/lib/components/common';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
 import styled from '@emotion/styled';
 import { getRadius, u } from '../../utilities';
+const ColorfulWrapper = styled.div `
+  padding: var(--lns-space-medium);
+  & .react-colorful {
+    width: auto;
+    height: auto;
+  }
+  & .react-colorful__saturation {
+    height: ${u(14)};
+    border-bottom: none;
+    box-shadow: inset 0 0 0 1px var(--lns-color-border);
+    border-radius: var(--lns-radius-medium);
+    margin-bottom: var(--lns-space-small);
+  }
+
+  & .react-colorful__hue {
+    height: ${u(2)};
+    width: 100%;
+    box-shadow: inset 0 0 0 1px var(--lns-color-border);
+    border-radius: 3px;
+    margin-bottom: var(--lns-space-medium);
+  }
+
+  & .react-colorful__saturation-pointer {
+    width: ${u(1)};
+    height: ${u(1)};
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 0 0 3px var(--lns-color-border);
+    border-radius: var(--lns-radius-medium);
+  }
+  & .react-colorful__hue-pointer {
+    width: ${u(1)};
+    height: ${u(2.5)};
+    border-radius: 2px;
+    box-shadow: 0 0 0 2px var(--lns-color-border);
+    cursor: pointer;
+    border: 2px solid white;
+  }
+`;
 const ColorPickerContainer = styled.div `
   position: relative;
   width: ${u(31)};
@@ -21,29 +59,16 @@ const ColorPickerContainer = styled.div `
   border-radius: var(--lns-radius-medium);
   box-shadow: 0 0 0 1px var(--lns-color-border), var(--lns-shadow-medium);
 `;
-const SaturationContainer = styled.div `
-  position: relative;
-  height: ${u(14)};
-  border: 1px solid var(--lns-color-border);
-  box-shadow: inset 0 0 0 1px var(--lns-color-border);
-  border-radius: var(--lns-radius-medium);
-  margin-bottom: var(--lns-space-small);
-`;
-const HueContainer = styled.div `
-  position: relative;
-  width: 100%;
-  height: ${u(2)};
-  border: 1px solid var(--lns-color-border);
-  box-shadow: inset 0 0 0 1px var(--lns-color-border);
-  border-radius: 3px;
-  margin-bottom: var(--lns-space-medium);
-`;
 const InputContainer = styled.div `
   position: relative;
   width: 100%;
 
   input {
-    padding: ${u(1)};
+    padding: 0 0 0 ${u(4)};
+    height: ${u(4)};
+    width: 100%;
+    font: inherit;
+    font-size: var(--lns-fontSize-small);
     border: none;
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
       var(--lns-color-formFieldBorder);
@@ -79,25 +104,6 @@ const ButtonWrapper = styled.div `
   padding: 0 var(--lns-space-medium) var(--lns-space-medium)
     var(--lns-space-medium);
 `;
-const SaturationPointer = styled.div `
-  transform: translate(-50%);
-  cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 0 0 3px var(--lns-color-border);
-  border-radius: var(--lns-radius-medium);
-  width: ${u(1)};
-  height: ${u(1)};
-`;
-const HuePointerInternal = styled.div `
-  transform: translate(-50%, -3px);
-  cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 0 0 2px var(--lns-color-border);
-  border-radius: 2px;
-  width: ${u(1)};
-  height: ${u(2.5)};
-  background: ${props => props.hueColor};
-`;
 const SwatchesContainer = styled.div `
   display: grid;
   grid-template-columns: repeat(7, ${u(3)});
@@ -105,9 +111,6 @@ const SwatchesContainer = styled.div `
   border-bottom: 1px solid var(--lns-color-border);
   padding: var(--lns-space-medium);
 `;
-const ColorSelectorsWrapper = styled.div `
-  padding: var(--lns-space-medium);
-`;
 const Swatch = styled.div `
   cursor: pointer;
   width: ${u(3)};
@@ -123,47 +126,26 @@ const SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
     const selectedSwatch = swatches.includes(currentColor) && currentColor;
     return (React.createElement(SwatchesContainer, null, swatches.map(swatch => (React.createElement(Swatch, { key: swatch, color: swatch, selected: selectedSwatch, onClick: () => onSwatchClick(swatch) })))));
 };
-const HuePointer = props => {
-    const hueHSL = `hsl(${props.hsl.h},100%,50%,1)`;
-    return React.createElement(HuePointerInternal, { hueColor: hueHSL });
-};
-const ColorSelectorInternal = props => {
-    const inputStyles = {
-        input: {
-            padding: `0 0 0 ${u(4)}`,
-            height: u(4),
-            width: '100%',
-            font: 'inherit',
-            color: 'inherit',
-            fontSize: 'var(--lns-fontSize-small)',
-        },
-    };
-    return (React.createElement(ColorSelectorsWrapper, null,
-        React.createElement(SaturationContainer, null,
-            React.createElement(Saturation, Object.assign({}, props, { pointer: SaturationPointer, radius: "var(--lns-radius-medium)" }))),
-        React.createElement(HueContainer, null,
-            React.createElement(Hue, Object.assign({}, props, { pointer: HuePointer, radius: "3px" }))),
+const ColorSelector = ({ color, setColor }) => {
+    return (React.createElement(ColorfulWrapper, null,
+        React.createElement(HexColorPicker, { color: color, onChange: setColor }),
         React.createElement(InputContainer, null,
-            React.createElement(EditableInput, Object.assign({}, props, { style: inputStyles, value: props.hex })),
-            React.createElement(ColorBox, { color: props.color }))));
+            React.createElement(HexColorInput, { prefixed: true, color: color, onChange: setColor }),
+            React.createElement(ColorBox, { color: color }))));
 };
-const ColorSelector = CustomPicker(ColorSelectorInternal);
 const ColorPicker = (_a) => {
     var { defaultColor = '#ffffff', confirmButton, swatches, onChange } = _a, props = __rest(_a, ["defaultColor", "confirmButton", "swatches", "onChange"]);
     const [tempColor, setTempColor] = useState(defaultColor ? defaultColor : '#FFFFFF');
-    const handleOnChange = ({ hex }) => {
+    const handleOnChange = hex => {
         setTempColor(hex);
         onChange(hex);
     };
     const onSwatchClick = swatch => {
-        const object = {
-            hex: swatch,
-        };
-        handleOnChange(object);
+        handleOnChange(swatch);
     };
     return (React.createElement(ColorPickerContainer, Object.assign({}, props),
         swatches && (React.createElement(SwatchSelector, { swatches: swatches, currentColor: tempColor, onSwatchClick: onSwatchClick })),
-        React.createElement(ColorSelector, { color: tempColor, onChange: handleOnChange }),
+        React.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }),
         confirmButton && React.createElement(ButtonWrapper, null, confirmButton)));
 };
 export default ColorPicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.98.1",
+  "version": "10.98.2",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -28,7 +28,7 @@
     "downshift": "^5.4.7",
     "focus-trap-react": "^10.0.0",
     "lodash": "^4.17.21",
-    "react-color": "^2.19.3",
+    "react-colorful": "^5.6.1",
     "react-laag": "^2.0.3",
     "resize-observer-polyfill": "^1.5.1",
     "transition-hook": "^1.5.1"