@zendeskgarden/react-colorpickers 9.12.3 → 9.12.4

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.color_swatch_input';
+const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"

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

@@ -9,12 +9,11 @@ import { parseToRgb, readableColor } from 'polished';
 import { focusStyles, componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview.js';
 
-const COMPONENT_ID = 'colorpickers.color_swatch_label';
-const colorStyles = _ref => {
-  let {
-    $backgroundColor,
-    theme
-  } = _ref;
+const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
+const colorStyles = ({
+  $backgroundColor,
+  theme
+}) => {
   const {
     alpha
   } = parseToRgb($backgroundColor);
@@ -37,8 +36,8 @@ const colorStyles = _ref => {
 };
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
 
-const COMPONENT_ID = 'colorpickers.colorswatch_check';
+const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"

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

@@ -9,9 +9,8 @@ import styled from 'styled-components';
 import { stripUnit } from 'polished';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.colorpicker_range';
-const thumbStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
+const thumbStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-thumb {
       ${styles}
@@ -26,8 +25,7 @@ const thumbStyles = function (styles) {
     }
   `;
 };
-const trackStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-track {
       ${styles}
@@ -42,8 +40,7 @@ const trackStyles = function (styles) {
     }
   `;
 };
-const trackLowerStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackLowerStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-progress {
       ${styles}
@@ -54,10 +51,9 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$2 = ({
+  theme
+}) => {
   const thumbBackgroundColor = getColor({
     theme,
     variable: 'background.default'
@@ -116,7 +112,7 @@ const colorStyles = _ref => {
 const getThumbSize = props => props.theme.space.base * (props.$isOpaque ? 6 : 4);
 const getTrackHeight = props => props.theme.space.base * (props.$isOpaque ? 6 : 3);
 const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
-const sizeStyles = props => {
+const sizeStyles$3 = props => {
   const thumbSize = getThumbSize(props);
   const trackHeight = getTrackHeight(props);
   const trackMargin = getTrackMargin(props);
@@ -144,14 +140,14 @@ const sizeStyles = props => {
   `;
 };
 const StyledRange = styled(Range).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.12.4',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
-})(["", ";", " ", ";", ";"], sizeStyles, trackStyles(`
+})(["", ";", " ", ";", ";"], sizeStyles$3, trackStyles(`
     border-radius: 0;
-  `), colorStyles, componentStyles);
+  `), colorStyles$2, componentStyles);
 
 export { StyledRange, getTrackHeight, getTrackMargin, trackStyles };

package/dist/index.cjs.js

@@ -137,15 +137,14 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
 })(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, reactTheming.componentStyles);
 
 const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
-const thumbStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const thumbStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-thumb {
       ${styles}
@@ -160,8 +159,7 @@ const thumbStyles = function (styles) {
     }
   `;
 };
-const trackStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-track {
       ${styles}
@@ -176,8 +174,7 @@ const trackStyles = function (styles) {
     }
   `;
 };
-const trackLowerStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackLowerStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-progress {
       ${styles}
@@ -188,10 +185,9 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles$2 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$2 = ({
+  theme
+}) => {
   const thumbBackgroundColor = reactTheming.getColor({
     theme,
     variable: 'background.default'
@@ -279,7 +275,7 @@ const sizeStyles$3 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -291,7 +287,7 @@ const StyledRange = styled__default.default(reactForms.Range).attrs({
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -319,7 +315,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -343,7 +339,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -362,7 +358,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -373,10 +369,9 @@ const StyledColorWell = styled__default.default.div.attrs(props => ({
 })(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, reactTheming.componentStyles);
 
 const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
-const colorStyles$1 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$1 = ({
+  theme
+}) => {
   const borderColor = reactTheming.getColor({
     theme,
     hue: 'white'
@@ -387,10 +382,9 @@ const colorStyles$1 = _ref => {
   }))}`;
   return styled.css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
 };
-const sizeStyles$2 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$2 = ({
+  theme
+}) => {
   const borderWidth = polished.stripUnit(theme.borderWidths.sm) * 2;
   const size = theme.space.base * 5;
   const translateValue = size / -2;
@@ -398,7 +392,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.$top}%`,
@@ -412,7 +406,7 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
 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.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
@@ -421,7 +415,7 @@ const StyledSliderGroup = styled__default.default.div.attrs({
 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.12.3',
+  'data-garden-version': '9.12.4',
   spellCheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -431,7 +425,7 @@ const StyledHexField = styled__default.default(reactForms.Field).attrs({
 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.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
@@ -440,7 +434,7 @@ const StyledLabel = styled__default.default(reactForms.Label).attrs({
 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.12.3',
+  'data-garden-version': '9.12.4',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -450,7 +444,7 @@ const StyledInput = styled__default.default(reactForms.Input).attrs({
 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.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
@@ -468,7 +462,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
@@ -499,7 +493,7 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
@@ -507,18 +501,17 @@ const StyledSliders = styled__default.default.div.attrs({
 
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
 })(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
 
 const COMPONENT_ID$7 = 'colorpickers.colordialog_preview';
-const background = _ref => {
-  let {
-    $backgroundColor,
-    theme
-  } = _ref;
+const background = ({
+  $backgroundColor,
+  theme
+}) => {
   let retVal;
   if (typeof $backgroundColor === 'string') {
     retVal = $backgroundColor;
@@ -544,7 +537,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -554,7 +547,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
 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.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipDialog",
   componentId: "sc-1vbkccl-0"
@@ -563,7 +556,7 @@ const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).a
 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.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -572,7 +565,7 @@ const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -581,18 +574,17 @@ const StyledColorSwatch = styled__default.default.table.attrs({
 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.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
 })(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
-const colorStyles = _ref => {
-  let {
-    $backgroundColor,
-    theme
-  } = _ref;
+const colorStyles = ({
+  $backgroundColor,
+  theme
+}) => {
   const {
     alpha
   } = polished.parseToRgb($backgroundColor);
@@ -616,7 +608,7 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -628,7 +620,7 @@ const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attr
 const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -637,19 +629,18 @@ const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
 })(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, reactTheming.componentStyles);
 
-const ColorWell = React__namespace.default.memo(_ref => {
-  let {
-    hue,
-    saturation,
-    lightness,
-    onChange
-  } = _ref;
+const ColorWell = React__namespace.default.memo(({
+  hue,
+  saturation,
+  lightness,
+  onChange
+}) => {
   const {
     rtl
   } = React.useContext(styled.ThemeContext);
@@ -986,16 +977,15 @@ const reducer = (state, action) => {
   }
 };
 
-const ColorPicker = React.forwardRef((_ref, ref) => {
-  let {
-    color,
-    defaultColor = '#fff',
-    isOpaque,
-    labels = {},
-    autofocus,
-    onChange,
-    ...props
-  } = _ref;
+const ColorPicker = React.forwardRef(({
+  color,
+  defaultColor = '#fff',
+  isOpaque,
+  labels = {},
+  autofocus,
+  onChange,
+  ...props
+}, ref) => {
   const [state, dispatch] = React.useReducer(reducer, getInitialState(color || defaultColor));
   const previousComputedColorRef = React.useRef(state.color);
   const previousStateColorRef = React.useRef(state.color);
@@ -1201,27 +1191,26 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const ColorPickerDialog = React.forwardRef((_ref, ref) => {
-  let {
-    color,
-    defaultColor,
-    placement = 'bottom-start',
-    onChange,
-    onClose,
-    labels,
-    hasArrow = false,
-    isAnimated = true,
-    isOpaque,
-    isOpen,
-    zIndex = 1000,
-    focusInset,
-    disabled,
-    buttonProps,
-    onDialogChange,
-    'aria-label': ariaLabel,
-    children,
-    ...props
-  } = _ref;
+const ColorPickerDialog = React.forwardRef(({
+  color,
+  defaultColor,
+  placement = 'bottom-start',
+  onChange,
+  onClose,
+  labels,
+  hasArrow = false,
+  isAnimated = true,
+  isOpaque,
+  isOpen,
+  zIndex = 1000,
+  focusInset,
+  disabled,
+  buttonProps,
+  onDialogChange,
+  'aria-label': ariaLabel,
+  children,
+  ...props
+}, ref) => {
   const isControlled = color !== null && color !== undefined;
   const isDialogControlled = isOpen !== undefined && isOpen !== null;
   const buttonRef = React.useRef(null);
@@ -1234,15 +1223,17 @@ const ColorPickerDialog = React.forwardRef((_ref, ref) => {
   const theme = styled.useTheme() || reactTheming.DEFAULT_THEME;
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
-    onDialogChange && onDialogChange({
+    onDialogChange?.({
       isOpen: true
     });
   };
   const closeDialog = () => {
-    setReferenceElement(null);
-    onDialogChange && onDialogChange({
-      isOpen: false
-    });
+    if (referenceElement) {
+      setReferenceElement(null);
+      onDialogChange?.({
+        isOpen: false
+      });
+    }
   };
   const onClick = containerUtilities.composeEventHandlers(props.onClick, () => {
     if (referenceElement) {
@@ -1283,7 +1274,7 @@ const ColorPickerDialog = React.forwardRef((_ref, ref) => {
     referenceElement: referenceElement,
     onClose: () => {
       closeDialog();
-      onClose && onClose(isControlled ? color : uncontrolledColor);
+      onClose?.(isControlled ? color : uncontrolledColor);
     },
     "aria-label": ariaLabelText
   }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(ColorPicker, {
@@ -1332,18 +1323,17 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
   })));
 };
 
-const ColorSwatch = React.forwardRef((_ref, ref) => {
-  let {
-    name,
-    colors,
-    isCheckboxGroup,
-    defaultSelectedColIndex,
-    defaultSelectedRowIndex,
-    selectedColIndex,
-    selectedRowIndex,
-    onSelect,
-    ...props
-  } = _ref;
+const ColorSwatch = React.forwardRef(({
+  name,
+  colors,
+  isCheckboxGroup,
+  defaultSelectedColIndex,
+  defaultSelectedRowIndex,
+  selectedColIndex,
+  selectedRowIndex,
+  onSelect,
+  ...props
+}, ref) => {
   const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const environment = reactTheming.useDocument(theme);
   const gridRef = React.useRef();
@@ -1444,29 +1434,28 @@ ColorSwatch.propTypes = {
   onSelect: PropTypes__default.default.func
 };
 
-const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
-  let {
-    name,
-    colors,
-    isCheckboxGroup,
-    selectedRowIndex,
-    selectedColIndex,
-    defaultSelectedRowIndex,
-    defaultSelectedColIndex,
-    placement = 'bottom-start',
-    onSelect,
-    hasArrow = false,
-    isAnimated = true,
-    zIndex = 1000,
-    isOpen,
-    focusInset,
-    disabled,
-    buttonProps,
-    onDialogChange,
-    children,
-    'aria-label': ariaLabel,
-    ...props
-  } = _ref;
+const ColorSwatchDialog = React.forwardRef(({
+  name,
+  colors,
+  isCheckboxGroup,
+  selectedRowIndex,
+  selectedColIndex,
+  defaultSelectedRowIndex,
+  defaultSelectedColIndex,
+  placement = 'bottom-start',
+  onSelect,
+  hasArrow = false,
+  isAnimated = true,
+  zIndex = 1000,
+  isOpen,
+  focusInset,
+  disabled,
+  buttonProps,
+  onDialogChange,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}, ref) => {
   const isControlled = selectedRowIndex !== undefined && selectedColIndex !== undefined;
   const isDialogControlled = isOpen !== undefined && isOpen !== null;
   const buttonRef = React.useRef(null);
@@ -1497,15 +1486,17 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
   }, [isOpen, isDialogControlled]);
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
-    onDialogChange && onDialogChange({
+    onDialogChange?.({
       isOpen: true
     });
   };
   const closeDialog = () => {
-    setReferenceElement(null);
-    onDialogChange && onDialogChange({
-      isOpen: false
-    });
+    if (referenceElement) {
+      setReferenceElement(null);
+      onDialogChange?.({
+        isOpen: false
+      });
+    }
   };
   const onClick = containerUtilities.composeEventHandlers(props.onClick, () => {
     if (referenceElement) {