@zendeskgarden/react-colorpickers 8.75.0 → 8.76.0

package/dist/esm/utils/saturation.js

@@ -0,0 +1,64 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const getSaturationLightness = (element, x, y, rtl) => {
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  let left = x - (element.getBoundingClientRect().left + window.pageXOffset);
+  let top = y - (element.getBoundingClientRect().top + window.pageYOffset);
+  if (left < 0) {
+    left = 0;
+  } else if (left > width) {
+    left = width;
+  }
+  if (top < 0) {
+    top = 0;
+  } else if (top > height) {
+    top = height;
+  }
+  if (rtl) {
+    left = width - left;
+  }
+  const saturation = left / width;
+  const bright = 1 - top / height;
+  return {
+    saturation,
+    bright
+  };
+};
+function getNextHsv(e, hue, container, rtl) {
+  const {
+    saturation,
+    bright
+  } = getSaturationLightness(container, e.pageX, e.pageY, rtl);
+  return {
+    h: hue,
+    s: saturation,
+    v: bright
+  };
+}
+const getThumbPosition = (x, y, rtl, container) => {
+  if (container.current) {
+    const {
+      saturation,
+      bright
+    } = getSaturationLightness(container.current, x, y, rtl);
+    const topFromMouse = (1 - bright) * 100;
+    const leftFromMouse = rtl ? 100 - saturation * 100 : saturation * 100;
+    return {
+      topFromMouse,
+      leftFromMouse
+    };
+  }
+  return {
+    topFromMouse: 0,
+    leftFromMouse: 0
+  };
+};
+
+export { getNextHsv, getThumbPosition };

package/dist/esm/utils/validation.js

@@ -0,0 +1,12 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const isValidHex = hexString => {
+  const regEx = /^#(?:(?:[0-9A-F]{6}(?:[0-9A-F]{2})?)|(?:[0-9A-F]{3})(?:[0-9A-F]?))$/iu;
+  return regEx.test(hexString);
+};
+
+export { isValidHex };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -47,21 +46,6 @@ var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
 function hslToHsv(h, s, l) {
   let saturation = s;
   saturation *= (l < 50 ? l : 100 - l) / 100;
@@ -152,7 +136,7 @@ const getColorV8PickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -288,7 +272,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -303,7 +287,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -347,7 +331,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -371,7 +355,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -393,7 +377,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -421,7 +405,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -438,7 +422,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -450,7 +434,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -463,7 +447,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -475,7 +459,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -488,7 +472,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -509,7 +493,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -521,7 +505,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -534,7 +518,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -569,7 +553,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -582,7 +566,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -594,7 +578,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -608,7 +592,7 @@ const StyledSwatchButton = styled__default.default(StyledButtonPreview).attrs(pr
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -622,7 +606,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.0',
+  'data-garden-version': '8.76.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -659,7 +643,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -671,7 +655,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.0'
+  'data-garden-version': '8.76.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1123,7 +1107,7 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
       payload: computedColor
     });
   }, [computedColor]);
-  return React__namespace.default.createElement(StyledColorPicker, _extends$2({
+  return React__namespace.default.createElement(StyledColorPicker, Object.assign({
     ref: ref,
     isOpaque: isOpaque
   }, props), React__namespace.default.createElement(ColorWell, {
@@ -1303,7 +1287,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, children ? ( React.cloneElement(React.Children.only(children), {
     onClick,
     ref: buttonRef
-  })) : React__namespace.default.createElement(StyledButton, _extends$2({
+  })) : React__namespace.default.createElement(StyledButton, Object.assign({
     disabled: disabled,
     focusInset: focusInset,
     ref: buttonRef,
@@ -1312,7 +1296,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
     backgroundColor: isControlled ? color : uncontrolledColor
   }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, Object.assign({
     ref: ref,
     hasArrow: hasArrow,
     popperModifiers: popperModifiers,
@@ -1421,7 +1405,7 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       "aria-selected": ariaSelected
     }, React__namespace.default.createElement(reactTooltips.Tooltip, {
       content: label
-    }, React__namespace.default.createElement(StyledSwatchButton, _extends$2({
+    }, React__namespace.default.createElement(StyledSwatchButton, Object.assign({
       backgroundColor: value,
       "aria-pressed": ariaSelected,
       "aria-label": label
@@ -1539,7 +1523,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, children ? ( React.cloneElement(React.Children.only(children), {
     onClick,
     ref: buttonRef
-  })) : React__namespace.default.createElement(StyledButton, _extends$2({
+  })) : React__namespace.default.createElement(StyledButton, Object.assign({
     disabled: disabled,
     focusInset: focusInset,
     ref: buttonRef,
@@ -1548,7 +1532,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     backgroundColor: isControlled ? controlledSelectedColor?.value : uncontrolledSelectedColor?.value
   }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, Object.assign({
     ref: ref,
     zIndex: zIndex,
     hasArrow: hasArrow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "8.75.0",
+  "version": "8.76.0",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -23,17 +23,17 @@
   "dependencies": {
     "@zendeskgarden/container-grid": "^0.1.1",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^8.75.0",
-    "@zendeskgarden/react-forms": "^8.75.0",
-    "@zendeskgarden/react-modals": "^8.75.0",
-    "@zendeskgarden/react-tooltips": "^8.75.0",
+    "@zendeskgarden/react-buttons": "^8.76.0",
+    "@zendeskgarden/react-forms": "^8.76.0",
+    "@zendeskgarden/react-modals": "^8.76.0",
+    "@zendeskgarden/react-tooltips": "^8.76.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^8.75.0",
+    "@zendeskgarden/react-theming": "^8.76.0",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
+  "gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
 }