@zendeskgarden/react-grid 9.2.0 → 9.3.0

package/dist/esm/elements/pane/components/SplitterButton.js

@@ -18,11 +18,12 @@ import { StyledPaneSplitterButtonContainer } from '../../../styled/pane/StyledPa
 import usePaneSplitterContext from '../../../utils/usePaneSplitterContext.js';
 import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext.js';
 
-const SplitterButtonComponent = forwardRef((props, ref) => {
-  const {
+const SplitterButtonComponent = forwardRef((_ref, ref) => {
+  let {
     label,
-    placement: defaultPlacement
-  } = props;
+    placement: defaultPlacement,
+    ...other
+  } = _ref;
   const {
     orientation,
     layoutKey,
@@ -52,16 +53,16 @@ const SplitterButtonComponent = forwardRef((props, ref) => {
       paneProviderContext.setColumnValue(isStart, layoutKey, value);
     }
   }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
-  const onClick = composeEventHandlers(props.onClick, () => {
+  const onClick = composeEventHandlers(other.onClick, () => {
     if (isMin) {
       setValue(max);
     } else {
       setValue(min);
     }
   });
-  const onKeyDown = composeEventHandlers(props.onKeyDown, event => event.stopPropagation()
+  const onKeyDown = composeEventHandlers(other.onKeyDown, event => event.stopPropagation()
   );
-  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
+  const onMouseDown = composeEventHandlers(other.onMouseDown, event => event.stopPropagation()
   );
   return React.createElement(StyledPaneSplitterButtonContainer, {
     $orientation: orientation,
@@ -77,7 +78,7 @@ const SplitterButtonComponent = forwardRef((props, ref) => {
     onMouseDown: e => e.stopPropagation()
   }, React.createElement(StyledPaneSplitterButton, Object.assign({
     "aria-label": label
-  }, props, {
+  }, other, {
     $orientation: orientation,
     $isRotated: isMin,
     ref: ref,

package/dist/esm/styled/StyledCol.js

@@ -76,7 +76,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"

package/dist/esm/styled/StyledGrid.js

@@ -36,7 +36,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"

package/dist/esm/styled/StyledRow.js

@@ -52,7 +52,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"

package/dist/esm/styled/pane/StyledPane.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"

package/dist/esm/styled/pane/StyledPaneContent.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"

package/dist/esm/styled/pane/StyledPaneSplitter.js

@@ -107,7 +107,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"

package/dist/esm/styled/pane/StyledPaneSplitterButton.js

@@ -35,7 +35,7 @@ const transformStyles = _ref2 => {
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-version': '9.2.0',
+  'data-garden-version': '9.3.0',
   isBasic: true,
   isPill: true,
   size: 'small'

package/dist/index.cjs.js

@@ -102,7 +102,7 @@ const sizeStyles$5 = _ref2 => {
 };
 const StyledCol = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -140,7 +140,7 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledGrid = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -194,7 +194,7 @@ const sizeStyles$3 = _ref2 => {
 };
 const StyledRow = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -207,7 +207,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -216,7 +216,7 @@ const StyledPane = styled__default.default.div.attrs({
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -321,7 +321,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.2.0'
+  'data-garden-version': '9.3.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -355,7 +355,7 @@ const transformStyles = _ref2 => {
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-version': '9.2.0',
+  'data-garden-version': '9.3.0',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -1026,11 +1026,12 @@ const ContentComponent = React.forwardRef((props, ref) => {
 ContentComponent.displayName = 'Pane.Content';
 const Content = ContentComponent;
 
-const SplitterButtonComponent = React.forwardRef((props, ref) => {
-  const {
+const SplitterButtonComponent = React.forwardRef((_ref, ref) => {
+  let {
     label,
-    placement: defaultPlacement
-  } = props;
+    placement: defaultPlacement,
+    ...other
+  } = _ref;
   const {
     orientation,
     layoutKey,
@@ -1060,16 +1061,16 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
       paneProviderContext.setColumnValue(isStart, layoutKey, value);
     }
   }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
-  const onClick = containerUtilities.composeEventHandlers(props.onClick, () => {
+  const onClick = containerUtilities.composeEventHandlers(other.onClick, () => {
     if (isMin) {
       setValue(max);
     } else {
       setValue(min);
     }
   });
-  const onKeyDown = containerUtilities.composeEventHandlers(props.onKeyDown, event => event.stopPropagation()
+  const onKeyDown = containerUtilities.composeEventHandlers(other.onKeyDown, event => event.stopPropagation()
   );
-  const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
+  const onMouseDown = containerUtilities.composeEventHandlers(other.onMouseDown, event => event.stopPropagation()
   );
   return React__default.default.createElement(StyledPaneSplitterButtonContainer, {
     $orientation: orientation,
@@ -1085,7 +1086,7 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
     onMouseDown: e => e.stopPropagation()
   }, React__default.default.createElement(StyledPaneSplitterButton, Object.assign({
     "aria-label": label
-  }, props, {
+  }, other, {
     $orientation: orientation,
     $isRotated: isMin,
     ref: ref,

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

@@ -41,5 +41,7 @@ interface IStyledColProps extends ThemeProps<DefaultTheme> {
     $orderLg?: IColProps['orderLg'];
     $orderXl?: IColProps['orderXl'];
 }
-export declare const StyledCol: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledColProps, never>;
+export declare const StyledCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, IStyledColProps>, IStyledColProps>> & string;
 export {};

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

@@ -10,5 +10,7 @@ interface IStyledGridProps extends ThemeProps<DefaultTheme> {
     $debug?: IGridProps['debug'];
     $gutters?: IGridProps['gutters'];
 }
-export declare const StyledGrid: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledGridProps, never>;
+export declare const StyledGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, IStyledGridProps>, IStyledGridProps>> & string;
 export {};

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

@@ -28,5 +28,7 @@ interface IStyledRowProps extends ThemeProps<DefaultTheme> {
     $wrapLg?: Wrap;
     $wrapXl?: Wrap;
 }
-export declare const StyledRow: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledRowProps, never>;
+export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, IStyledRowProps>, IStyledRowProps>> & string;
 export {};

package/dist/typings/styled/pane/StyledPane.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledPane: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version">;
+export declare const StyledPane: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/typings/styled/pane/StyledPaneContent.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledPaneContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version">;
+export declare const StyledPaneContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/typings/styled/pane/StyledPaneSplitter.d.ts

@@ -4,7 +4,6 @@
  * 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 { Orientation } from '../../types';
 interface IStyledPaneSplitterProps {
     $orientation?: Orientation;
@@ -15,8 +14,7 @@ interface IStyledPaneSplitterProps {
  * 2. Stack below splitter button.
  * 3. Stack above other splitters when focused
  */
-export declare const StyledPaneSplitter: import("styled-components").StyledComponent<"div", DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-} & IStyledPaneSplitterProps, "data-garden-id" | "data-garden-version">;
+export declare const StyledPaneSplitter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, IStyledPaneSplitterProps>> & string;
 export {};

package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts

@@ -11,5 +11,9 @@ interface IStyledSplitterButtonProps {
     $isRotated: boolean;
 }
 export declare const getSize: (theme: DefaultTheme) => number;
-export declare const StyledPaneSplitterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, DefaultTheme, IStyledSplitterButtonProps, never>;
+export declare const StyledPaneSplitterButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, Omit<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}>, IStyledSplitterButtonProps>, IStyledSplitterButtonProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export {};

package/dist/typings/styled/pane/StyledPaneSplitterButtonContainer.d.ts

@@ -4,7 +4,6 @@
  * 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 { Orientation, PLACEMENT } from '../../types';
 interface IStyledSplitterButtonContainerProps {
     $orientation: Orientation;
@@ -14,5 +13,5 @@ interface IStyledSplitterButtonContainerProps {
 /**
  * 1. Match focused `Splitter` z-index
  */
-export declare const StyledPaneSplitterButtonContainer: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledSplitterButtonContainerProps, never>;
+export declare const StyledPaneSplitterButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStyledSplitterButtonContainerProps>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.17",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.2.0",
-    "@zendeskgarden/react-tooltips": "^9.2.0",
+    "@zendeskgarden/react-buttons": "^9.3.0",
+    "@zendeskgarden/react-tooltips": "^9.3.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
@@ -34,10 +34,10 @@
     "@zendeskgarden/react-theming": ">=9.0.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"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.2.0"
+    "@zendeskgarden/react-theming": "^9.3.0"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
+  "gitHead": "fa6461e0d9fae27956980056006e8013daedc6b9"
 }