@zendeskgarden/react-colorpickers 9.0.0-next.1 → 9.0.0-next.2

package/dist/typings/styled/ColorSwatch/StyledColorSwatch.d.ts

@@ -10,5 +10,4 @@
 export declare const StyledColorSwatch: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-    role: "grid";
-}, "role" | "data-garden-id" | "data-garden-version">;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/ColorSwatch/StyledColorSwatchInput.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/**
+ * Accessibly hidden checkbox with support for tooltip hover
+ */
+export declare const StyledColorSwatchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/ColorSwatch/StyledColorSwatchLabel.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+import { DefaultTheme, ThemeProps } from 'styled-components';
+interface IStyledColorSwatchLabelProps extends ThemeProps<DefaultTheme> {
+    backgroundColor: string;
+}
+export declare const StyledColorSwatchLabel: import("styled-components").StyledComponent<"span", DefaultTheme, import("../ColorpickerDialog/StyledButtonPreview").IStyleButtonPreviewProps & {
+    as: string;
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & IStyledColorSwatchLabelProps, "data-garden-id" | "data-garden-version" | "as">;
+export {};

package/dist/typings/styled/ColorSwatch/StyledIcon.d.ts

@@ -4,9 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { DefaultTheme } from 'styled-components';
-import React from 'react';
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, color, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

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

@@ -21,7 +21,8 @@ export * from './ColorpickerDialog/StyledButton';
 export * from './ColorpickerDialog/StyledButtonPreview';
 export * from './ColorpickerDialog/StyledTooltipModal';
 export * from './ColorpickerDialog/StyledTooltipBody';
-export * from './ColorSwatch/StyledSwatchButton';
 export * from './ColorSwatch/StyledColorSwatch';
+export * from './ColorSwatch/StyledColorSwatchInput';
+export * from './ColorSwatch/StyledColorSwatchLabel';
 export * from './ColorSwatch/StyledIcon';
 export * from './ColorSwatch/StyledCell';

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

@@ -70,10 +70,6 @@ export interface IColorpickerDialogProps extends IColorpickerProps {
     placement?: ITooltipModalProps['placement'];
     /** Disables the color dialog button */
     disabled?: boolean;
-    /**
-     * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
-     */
-    popperModifiers?: ITooltipModalProps['popperModifiers'];
     /**
      * Sets the `z-index` of the color dialog
      */
@@ -111,48 +107,32 @@ export interface ILabeledColor {
     value: string;
     label: string;
 }
-export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>, 'onChange' | 'onSelect'> {
+export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>, 'onSelect'> {
+    /** Sets the name used to reference the value of the control */
+    name: string;
     /** Sets the two-dimension array of labeled HEX and RGB/A string colors */
     colors: {
         value: string;
         label: string;
     }[][];
-    /** Sets the focused row index in a controlled color swatch */
-    rowIndex?: number;
-    /** Sets the focused column index in a controlled color swatch.
-     * Can be set to `-1` to clear the row focus.
-     */
-    colIndex?: number;
-    /** Sets the selected row index in a controlled color swatch.
-     * Can be set to `-1` to clear the column focus.
-     */
-    selectedRowIndex?: number;
-    /** Sets the selected column index in a controlled color swatch.
-     * Can be set to `-1` to clear the row selection.
-     */
-    selectedColIndex?: number;
-    /** Sets the default focused row index in an uncontrolled color swatch.
-     * Can be set to `-1` to clear the column selection.
-     */
-    defaultRowIndex?: number;
-    /** Sets the default focused column index in an uncontrolled color swatch */
-    defaultColIndex?: number;
+    /** Determines if the color swatch is backed by radio (default) or checkbox inputs */
+    isCheckboxGroup?: boolean;
+    /** Sets the selected row index in a controlled color swatch */
+    selectedRowIndex?: number | null;
+    /** Sets the selected column index in a controlled color swatch */
+    selectedColIndex?: number | null;
     /** Sets the default selected row index in an uncontrolled color swatch */
     defaultSelectedRowIndex?: number;
     /** Sets the default selected column index in an uncontrolled color swatch */
     defaultSelectedColIndex?: number;
-    /** Handles color swatch changes */
-    onChange?: (rowIndex: number, colIndex: number) => void;
     /** Handles color swatch select event */
-    onSelect?: (rowIndex: number, colIndex: number) => void;
+    onSelect?: (rowIndex: number | null, colIndex: number | null) => void;
 }
 export interface IColorSwatchDialogProps extends IColorSwatchProps {
     /** Adjusts the placement of the color dialog */
     placement?: ITooltipModalProps['placement'];
     /** Disables the color dialog button */
     disabled?: boolean;
-    /** Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic */
-    popperModifiers?: ITooltipModalProps['popperModifiers'];
     /** Sets the `z-index` of the color dialog */
     zIndex?: ITooltipModalProps['zIndex'];
     /** Adds an arrow to the color dialog */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.2",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,16 +21,17 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-grid": "^0.1.1",
+    "@zendeskgarden/container-grid": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.1",
-    "@zendeskgarden/react-forms": "^9.0.0-next.1",
-    "@zendeskgarden/react-modals": "^9.0.0-next.1",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.1",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.2",
+    "@zendeskgarden/react-forms": "^9.0.0-next.2",
+    "@zendeskgarden/react-modals": "^9.0.0-next.2",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.67.0",
@@ -41,7 +42,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.1",
+    "@zendeskgarden/react-theming": "^9.0.0-next.2",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -55,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
 }

package/dist/typings/styled/ColorSwatch/StyledSwatchButton.d.ts

@@ -1,8 +0,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.
- */
-import { IStyleButtonPreviewProps } from '../ColorpickerDialog/StyledButtonPreview';
-export declare const StyledSwatchButton: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IStyleButtonPreviewProps, never>;