@zendeskgarden/react-colorpickers 9.0.0-next.22 → 9.0.0-next.23

package/dist/esm/elements/ColorPicker/ColorWell.js

@@ -24,7 +24,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -93,17 +93,15 @@ const ColorWell = React__default.memo(_ref => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
-  return (
-    React__default.createElement(StyledColorWell, {
-      $hue: hue,
-      ref: containerRef,
-      role: "presentation",
-      onMouseDown: handleMouseDown
-    }, React__default.createElement(StyledColorWellThumb, {
-      top: mouseActiveRef.current ? topFromMouse : topPosition,
-      left: mouseActiveRef.current ? leftFromMouse : leftPosition
-    }))
-  );
+  return React__default.createElement(StyledColorWell, {
+    $hue: hue,
+    ref: containerRef,
+    role: "presentation",
+    onMouseDown: handleMouseDown
+  }, React__default.createElement(StyledColorWellThumb, {
+    top: mouseActiveRef.current ? topFromMouse : topPosition,
+    left: mouseActiveRef.current ? leftFromMouse : leftPosition
+  }));
 });
 ColorWell.displayName = 'ColorWell';
 

package/dist/esm/elements/ColorPicker/index.js

@@ -23,7 +23,7 @@ import { StyledRGBAField } from '../../styled/ColorPicker/StyledRGBAField.js';
 import { StyledSliders } from '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';

package/dist/esm/elements/ColorPickerDialog/index.js

@@ -26,7 +26,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import { StyledButton } from '../../styled/ColorPickerDialog/StyledButton.js';
 import { StyledButtonPreview } from '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import { StyledTooltipModal } from '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import { StyledTooltipDialog } from '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import { StyledTooltipBody } from '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -105,7 +105,7 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
     $backgroundColor: isControlled ? color : uncontrolledColor
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
+  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipDialog, Object.assign({
     ref: ref,
     hasArrow: hasArrow,
     zIndex: zIndex,

package/dist/esm/elements/ColorSwatch/index.js

@@ -27,7 +27,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import { StyledColorSwatch } from '../../styled/ColorSwatch/StyledColorSwatch.js';
 import { StyledColorSwatchInput } from '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -70,69 +70,71 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  return React__default.createElement(StyledColorSwatch, Object.assign({
-    role: "grid",
-    ref: mergeRefs([gridRef, ref])
-  }, props), React__default.createElement("tbody", null, colors.map((row, _rowIndex) => React__default.createElement("tr", {
-    key: row[0].value
-  }, row.map((color, _colIndex) => {
-    const {
-      label,
-      value
-    } = color;
-    const {
-      role,
-      ...gridCellProps
-    } = getGridCellProps({
-      colIndex: _colIndex,
-      rowIndex: _rowIndex
-    });
-    const checked = isControlled ? selectedRowIndex === _rowIndex && selectedColIndex === _colIndex : undefined;
-    const defaultChecked = isControlled ? undefined : defaultSelectedRowIndex === _rowIndex && defaultSelectedColIndex === _colIndex;
-    const handleChange = event => {
-      if (onSelect) {
-        if (event.target.checked) {
-          onSelect(_rowIndex, _colIndex);
-        } else {
-          onSelect(null, null);
-        }
-      }
-      if (isCheckboxGroup && event.target.checked) {
-        const inputs = gridRef.current?.querySelectorAll('input');
-        inputs?.forEach(input => {
-          if (input !== event.target) {
-            input.checked = false;
+  return (
+    React__default.createElement(StyledColorSwatch, Object.assign({
+      role: "grid",
+      ref: mergeRefs([gridRef, ref])
+    }, props), React__default.createElement("tbody", null, colors.map((row, _rowIndex) => React__default.createElement("tr", {
+      key: row[0].value
+    }, row.map((color, _colIndex) => {
+      const {
+        label,
+        value
+      } = color;
+      const {
+        role,
+        ...gridCellProps
+      } = getGridCellProps({
+        colIndex: _colIndex,
+        rowIndex: _rowIndex
+      });
+      const checked = isControlled ? selectedRowIndex === _rowIndex && selectedColIndex === _colIndex : undefined;
+      const defaultChecked = isControlled ? undefined : defaultSelectedRowIndex === _rowIndex && defaultSelectedColIndex === _colIndex;
+      const handleChange = event => {
+        if (onSelect) {
+          if (event.target.checked) {
+            onSelect(_rowIndex, _colIndex);
+          } else {
+            onSelect(null, null);
           }
-        });
-      }
-    };
-    const handleBlur = event => {
-      if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
-        const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
-        if (selectedInput !== null) {
+        }
+        if (isCheckboxGroup && event.target.checked) {
           const inputs = gridRef.current?.querySelectorAll('input');
-          inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+          inputs?.forEach(input => {
+            if (input !== event.target) {
+              input.checked = false;
+            }
+          });
+        }
+      };
+      const handleBlur = event => {
+        if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
+          const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
+          if (selectedInput !== null) {
+            const inputs = gridRef.current?.querySelectorAll('input');
+            inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+          }
         }
-      }
-    };
-    return React__default.createElement(StyledCell, {
-      key: value,
-      role: role
-    }, React__default.createElement(StyledColorSwatchLabel, {
-      $backgroundColor: value
-    }, React__default.createElement(Tooltip, {
-      content: label
-    }, React__default.createElement(StyledColorSwatchInput, Object.assign({
-      "aria-label": label,
-      name: name,
-      type: isCheckboxGroup ? 'checkbox' : 'radio',
-      value: value,
-      defaultChecked: defaultChecked,
-      checked: checked,
-      onBlur: handleBlur,
-      onChange: handleChange
-    }, gridCellProps))), React__default.createElement(StyledIcon, null)));
-  })))));
+      };
+      return React__default.createElement(StyledCell, {
+        key: value,
+        role: role
+      }, React__default.createElement(StyledColorSwatchLabel, {
+        $backgroundColor: value
+      }, React__default.createElement(Tooltip, {
+        content: label
+      }, React__default.createElement(StyledColorSwatchInput, Object.assign({
+        "aria-label": label,
+        name: name,
+        type: isCheckboxGroup ? 'checkbox' : 'radio',
+        value: value,
+        defaultChecked: defaultChecked,
+        checked: checked,
+        onBlur: handleBlur,
+        onChange: handleChange
+      }, gridCellProps))), React__default.createElement(StyledIcon, null)));
+    })))))
+  );
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {

package/dist/esm/elements/ColorSwatchDialog/index.js

@@ -27,7 +27,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import { StyledButton } from '../../styled/ColorPickerDialog/StyledButton.js';
 import { StyledButtonPreview } from '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import { StyledTooltipModal } from '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import { StyledTooltipDialog } from '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import { StyledTooltipBody } from '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -134,7 +134,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     $backgroundColor: backgroundColor
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement !== null
-  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
+  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipDialog, Object.assign({
     ref: ref,
     zIndex: zIndex,
     hasArrow: hasArrow,

package/dist/esm/styled/ColorPicker/StyledAlphaRange.js

@@ -30,7 +30,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"

package/dist/esm/styled/ColorPicker/StyledColorPicker.js

@@ -13,7 +13,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"

package/dist/esm/styled/ColorPicker/StyledColorWell.js

@@ -20,7 +20,7 @@ const background = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'colorwell',
   style: {
     background: background(props)

package/dist/esm/styled/ColorPicker/StyledColorWellThumb.js

@@ -34,7 +34,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,

package/dist/esm/styled/ColorPicker/StyledHexField.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",

package/dist/esm/styled/ColorPicker/StyledHueRange.js

@@ -11,7 +11,7 @@ import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRan
 const COMPONENT_ID = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"

package/dist/esm/styled/ColorPicker/StyledInput.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",

package/dist/esm/styled/ColorPicker/StyledInputGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"

package/dist/esm/styled/ColorPicker/StyledLabel.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"

package/dist/esm/styled/ColorPicker/StyledPreview.js

@@ -26,7 +26,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",

package/dist/esm/styled/ColorPicker/StyledRGBAField.js

@@ -20,7 +20,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"

package/dist/esm/styled/ColorPicker/StyledSliderGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"

package/dist/esm/styled/ColorPicker/StyledSliders.js

@@ -33,7 +33,7 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"

package/dist/esm/styled/ColorPickerDialog/StyledButton.js

@@ -10,7 +10,7 @@ import { Button } from '@zendeskgarden/react-buttons';
 
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"

package/dist/esm/styled/ColorPickerDialog/StyledButtonPreview.js

@@ -39,7 +39,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",

package/dist/esm/styled/ColorPickerDialog/StyledTooltipBody.js

@@ -5,13 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { TooltipModal } from '@zendeskgarden/react-modals';
+import { TooltipDialog } from '@zendeskgarden/react-modals';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal_body';
-const StyledTooltipBody = styled(TooltipModal.Body).attrs({
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body';
+const StyledTooltipBody = styled(TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"

package/dist/esm/styled/ColorPickerDialog/{StyledTooltipModal.js → StyledTooltipDialog.js}

@@ -5,19 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { TooltipModal } from '@zendeskgarden/react-modals';
+import { TooltipDialog } from '@zendeskgarden/react-modals';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal';
-const StyledTooltipModal = styled(TooltipModal).attrs({
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog';
+const StyledTooltipDialog = styled(TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
-  displayName: "StyledTooltipModal",
-  componentId: "sc-gykkrw-0"
+  displayName: "StyledTooltipDialog",
+  componentId: "sc-1vbkccl-0"
 })(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTooltipModal.defaultProps = {
+StyledTooltipDialog.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledTooltipModal };
+export { StyledTooltipDialog };

package/dist/esm/styled/ColorSwatch/StyledCell.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatch.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatchInput.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatchLabel.js

@@ -38,7 +38,7 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"

package/dist/esm/styled/ColorSwatch/StyledIcon.js

@@ -12,7 +12,7 @@ import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
 const COMPONENT_ID = 'colorpickers.colorswatch_check';
 const StyledIcon = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"

package/dist/esm/styled/common/StyledRange.js

@@ -145,7 +145,7 @@ const sizeStyles = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",

package/dist/index.cjs.js

@@ -137,7 +137,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
@@ -282,7 +282,7 @@ const sizeStyles$3 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -297,7 +297,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': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -328,7 +328,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -355,7 +355,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -377,7 +377,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -416,7 +416,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -433,7 +433,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': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
@@ -445,7 +445,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': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -458,7 +458,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': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
@@ -470,7 +470,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': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -483,7 +483,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': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
@@ -504,7 +504,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
@@ -538,7 +538,7 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
@@ -549,7 +549,7 @@ StyledSliders.defaultProps = {
 
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
@@ -589,7 +589,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.22',
+  'data-garden-version': '9.0.0-next.23',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -599,22 +599,22 @@ StyledButtonPreview.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
-const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
+const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipdialog';
+const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
-  displayName: "StyledTooltipModal",
-  componentId: "sc-gykkrw-0"
+  displayName: "StyledTooltipDialog",
+  componentId: "sc-1vbkccl-0"
 })(["width:auto !important;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledTooltipModal.defaultProps = {
+StyledTooltipDialog.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
-const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
+const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipdialog_body';
+const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -626,7 +626,7 @@ StyledTooltipBody.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -638,7 +638,7 @@ StyledColorSwatch.defaultProps = {
 const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
@@ -676,7 +676,7 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -711,7 +711,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -723,7 +723,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -793,17 +793,15 @@ const ColorWell = React__namespace.default.memo(_ref => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
-  return (
-    React__namespace.default.createElement(StyledColorWell, {
-      $hue: hue,
-      ref: containerRef,
-      role: "presentation",
-      onMouseDown: handleMouseDown
-    }, React__namespace.default.createElement(StyledColorWellThumb, {
-      top: mouseActiveRef.current ? topFromMouse : topPosition,
-      left: mouseActiveRef.current ? leftFromMouse : leftPosition
-    }))
-  );
+  return React__namespace.default.createElement(StyledColorWell, {
+    $hue: hue,
+    ref: containerRef,
+    role: "presentation",
+    onMouseDown: handleMouseDown
+  }, React__namespace.default.createElement(StyledColorWellThumb, {
+    top: mouseActiveRef.current ? topFromMouse : topPosition,
+    left: mouseActiveRef.current ? leftFromMouse : leftPosition
+  }));
 });
 ColorWell.displayName = 'ColorWell';
 
@@ -1363,7 +1361,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, Object.assign({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
     ref: ref,
     hasArrow: hasArrow,
     zIndex: zIndex,
@@ -1443,69 +1441,71 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  return React__namespace.default.createElement(StyledColorSwatch, Object.assign({
-    role: "grid",
-    ref: reactMergeRefs.mergeRefs([gridRef, ref])
-  }, props), React__namespace.default.createElement("tbody", null, colors.map((row, _rowIndex) => React__namespace.default.createElement("tr", {
-    key: row[0].value
-  }, row.map((color, _colIndex) => {
-    const {
-      label,
-      value
-    } = color;
-    const {
-      role,
-      ...gridCellProps
-    } = getGridCellProps({
-      colIndex: _colIndex,
-      rowIndex: _rowIndex
-    });
-    const checked = isControlled ? selectedRowIndex === _rowIndex && selectedColIndex === _colIndex : undefined;
-    const defaultChecked = isControlled ? undefined : defaultSelectedRowIndex === _rowIndex && defaultSelectedColIndex === _colIndex;
-    const handleChange = event => {
-      if (onSelect) {
-        if (event.target.checked) {
-          onSelect(_rowIndex, _colIndex);
-        } else {
-          onSelect(null, null);
-        }
-      }
-      if (isCheckboxGroup && event.target.checked) {
-        const inputs = gridRef.current?.querySelectorAll('input');
-        inputs?.forEach(input => {
-          if (input !== event.target) {
-            input.checked = false;
+  return (
+    React__namespace.default.createElement(StyledColorSwatch, Object.assign({
+      role: "grid",
+      ref: reactMergeRefs.mergeRefs([gridRef, ref])
+    }, props), React__namespace.default.createElement("tbody", null, colors.map((row, _rowIndex) => React__namespace.default.createElement("tr", {
+      key: row[0].value
+    }, row.map((color, _colIndex) => {
+      const {
+        label,
+        value
+      } = color;
+      const {
+        role,
+        ...gridCellProps
+      } = getGridCellProps({
+        colIndex: _colIndex,
+        rowIndex: _rowIndex
+      });
+      const checked = isControlled ? selectedRowIndex === _rowIndex && selectedColIndex === _colIndex : undefined;
+      const defaultChecked = isControlled ? undefined : defaultSelectedRowIndex === _rowIndex && defaultSelectedColIndex === _colIndex;
+      const handleChange = event => {
+        if (onSelect) {
+          if (event.target.checked) {
+            onSelect(_rowIndex, _colIndex);
+          } else {
+            onSelect(null, null);
           }
-        });
-      }
-    };
-    const handleBlur = event => {
-      if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
-        const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
-        if (selectedInput !== null) {
+        }
+        if (isCheckboxGroup && event.target.checked) {
           const inputs = gridRef.current?.querySelectorAll('input');
-          inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+          inputs?.forEach(input => {
+            if (input !== event.target) {
+              input.checked = false;
+            }
+          });
         }
-      }
-    };
-    return React__namespace.default.createElement(StyledCell, {
-      key: value,
-      role: role
-    }, React__namespace.default.createElement(StyledColorSwatchLabel, {
-      $backgroundColor: value
-    }, React__namespace.default.createElement(reactTooltips.Tooltip, {
-      content: label
-    }, React__namespace.default.createElement(StyledColorSwatchInput, Object.assign({
-      "aria-label": label,
-      name: name,
-      type: isCheckboxGroup ? 'checkbox' : 'radio',
-      value: value,
-      defaultChecked: defaultChecked,
-      checked: checked,
-      onBlur: handleBlur,
-      onChange: handleChange
-    }, gridCellProps))), React__namespace.default.createElement(StyledIcon, null)));
-  })))));
+      };
+      const handleBlur = event => {
+        if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
+          const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
+          if (selectedInput !== null) {
+            const inputs = gridRef.current?.querySelectorAll('input');
+            inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+          }
+        }
+      };
+      return React__namespace.default.createElement(StyledCell, {
+        key: value,
+        role: role
+      }, React__namespace.default.createElement(StyledColorSwatchLabel, {
+        $backgroundColor: value
+      }, React__namespace.default.createElement(reactTooltips.Tooltip, {
+        content: label
+      }, React__namespace.default.createElement(StyledColorSwatchInput, Object.assign({
+        "aria-label": label,
+        name: name,
+        type: isCheckboxGroup ? 'checkbox' : 'radio',
+        value: value,
+        defaultChecked: defaultChecked,
+        checked: checked,
+        onBlur: handleBlur,
+        onChange: handleChange
+      }, gridCellProps))), React__namespace.default.createElement(StyledIcon, null)));
+    })))))
+  );
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {
@@ -1618,7 +1618,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     $backgroundColor: backgroundColor
   }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement !== null
-  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, Object.assign({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
     ref: ref,
     zIndex: zIndex,
     hasArrow: hasArrow,

package/dist/typings/styled/ColorPickerDialog/{StyledTooltipModal.d.ts → StyledTooltipDialog.d.ts}

@@ -5,9 +5,9 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /**
- * 1. Override default TooltipModal styling
+ * 1. Override default TooltipDialog styling
  */
-export declare const StyledTooltipModal: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & {
+export declare const StyledTooltipDialog: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & {
     'data-garden-id': string;
     'data-garden-version': string;
 }, string | number | symbol>;

package/dist/typings/styled/index.d.ts

@@ -19,7 +19,7 @@ export * from './ColorPicker/StyledRGBAField';
 export * from './ColorPicker/StyledSliders';
 export * from './ColorPickerDialog/StyledButton';
 export * from './ColorPickerDialog/StyledButtonPreview';
-export * from './ColorPickerDialog/StyledTooltipModal';
+export * from './ColorPickerDialog/StyledTooltipDialog';
 export * from './ColorPickerDialog/StyledTooltipBody';
 export * from './ColorSwatch/StyledColorSwatch';
 export * from './ColorSwatch/StyledColorSwatchInput';

package/dist/typings/types/index.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { HTMLAttributes } from 'react';
-import { ITooltipModalProps } from '@zendeskgarden/react-modals';
+import { ITooltipDialogProps } from '@zendeskgarden/react-modals';
 export interface IColor {
     hex: string;
     hue: number;
@@ -67,21 +67,21 @@ export interface IColorPickerDialogProps extends IColorPickerProps {
      */
     onClose?: (color: IColor) => void;
     /** Adjusts the placement of the color dialog */
-    placement?: ITooltipModalProps['placement'];
+    placement?: ITooltipDialogProps['placement'];
     /** Disables the color dialog button */
     disabled?: boolean;
     /**
      * Sets the `z-index` of the color dialog
      */
-    zIndex?: ITooltipModalProps['zIndex'];
+    zIndex?: ITooltipDialogProps['zIndex'];
     /**
      * Adds an arrow to the color dialog
      */
-    hasArrow?: ITooltipModalProps['hasArrow'];
+    hasArrow?: ITooltipDialogProps['hasArrow'];
     /**
      * Animates the color dialog
      */
-    isAnimated?: ITooltipModalProps['isAnimated'];
+    isAnimated?: ITooltipDialogProps['isAnimated'];
     /**
      * Opens the dialog in a controlled color picker dialog
      */
@@ -130,15 +130,15 @@ export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>
 }
 export interface IColorSwatchDialogProps extends IColorSwatchProps {
     /** Adjusts the placement of the color dialog */
-    placement?: ITooltipModalProps['placement'];
+    placement?: ITooltipDialogProps['placement'];
     /** Disables the color dialog button */
     disabled?: boolean;
     /** Sets the `z-index` of the color dialog */
-    zIndex?: ITooltipModalProps['zIndex'];
+    zIndex?: ITooltipDialogProps['zIndex'];
     /** Adds an arrow to the color dialog */
-    hasArrow?: ITooltipModalProps['hasArrow'];
+    hasArrow?: ITooltipDialogProps['hasArrow'];
     /** Animates the color dialog */
-    isAnimated?: ITooltipModalProps['isAnimated'];
+    isAnimated?: ITooltipDialogProps['isAnimated'];
     /** Applies inset `box-shadow` styling on focus */
     focusInset?: boolean;
     /** Passes HTML attributes to the color dialog button element */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.22",
+  "version": "9.0.0-next.23",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,10 +23,10 @@
   "dependencies": {
     "@zendeskgarden/container-grid": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.22",
-    "@zendeskgarden/react-forms": "^9.0.0-next.22",
-    "@zendeskgarden/react-modals": "^9.0.0-next.22",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.22",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.23",
+    "@zendeskgarden/react-forms": "^9.0.0-next.23",
+    "@zendeskgarden/react-modals": "^9.0.0-next.23",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.23",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.3.1",
@@ -35,15 +35,15 @@
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.22",
-    "@zendeskgarden/svg-icons": "7.1.1"
+    "@zendeskgarden/react-theming": "^9.0.0-next.23",
+    "@zendeskgarden/svg-icons": "7.2.0"
   },
   "keywords": [
     "colorpicker",
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
+  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
 }