@zendeskgarden/react-grid 8.51.0 → 8.53.1

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

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import { DefaultTheme } from 'styled-components';
+import { ISplitterButtonProps, Orientation, PLACEMENT } from '../../types';
+interface IStyledSplitterButtonProps extends ISplitterButtonProps {
+    orientation: Orientation;
+    placement: typeof PLACEMENT[number];
+    isRotated: boolean;
+}
+/**
+ * 1. Opaque "dish" behind transparent button
+ */
+export declare const StyledPaneSplitterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, DefaultTheme, IStyledSplitterButtonProps, never>;
+export {};

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

@@ -4,7 +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 { ReactNode, HTMLAttributes } from 'react';
+import { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
 export declare const ALIGN_ITEMS: readonly ["start", "end", "center", "baseline", "stretch"];
 export declare const ALIGN_SELF: readonly ["auto", "start", "end", "center", "baseline", "stretch"];
 export declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
@@ -12,6 +12,7 @@ export declare const JUSTIFY_CONTENT: readonly ["start", "end", "center", "betwe
 export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
 export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
 export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
+export declare const PLACEMENT: readonly ["end", "start", "center"];
 export declare type AlignItems = typeof ALIGN_ITEMS[number];
 export declare type AlignSelf = typeof ALIGN_SELF[number];
 export declare type Direction = typeof DIRECTION[number];
@@ -155,6 +156,8 @@ export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
 export declare type Orientation = typeof ORIENTATION[number];
 export interface IPaneProviderProps {
+    /** Identifies the pane provider */
+    id?: string;
     /** Provides the total width, in `px` units, of all panes in the layout */
     totalPanesWidth: number;
     /** Provides the total height, in `px` units, of all panes in the layout */
@@ -175,14 +178,16 @@ export interface IPaneProviderProps {
      */
     onChange?: (rowValues: Record<string, number>, columnValues: Record<string, number>) => void;
     /**
-     * Surfaces render prop functions for applying splitter state to the supporting layout
+     * Surfaces render props for applying splitter state to the supporting layout
      *
+     * @param id Provides the `id` prop, if specified; otherwise, a generated ID.
      * @param getColumnValue Gets column value by key
      * @param getRowValue Gets row value by key
      * @param getGridTemplateRows Gets grid template rows track
      * @param getGridTemplateColumns Gets grid template columns track
      */
-    children?: ({ getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
+    children?: ({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
+        id: string;
         getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
         getRowValue: (splitterKey: string, isPixels?: boolean) => number;
         getGridTemplateRows: (isPixels?: boolean) => string;
@@ -190,6 +195,8 @@ export interface IPaneProviderProps {
     }) => ReactNode;
 }
 export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Identifies the associated `PaneProvider`. Assumes the closest parent provider, by default. */
+    providerId?: string;
     /** Specifies the splitter key */
     layoutKey: string;
     /** Sets a minimum, in `fr` units, for splitter position */
@@ -199,3 +206,9 @@ export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
     /** Determines splitter orientation within a pane */
     orientation?: Orientation;
 }
+export interface ISplitterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default. */
+    placement?: typeof PLACEMENT[number];
+    /** Renders the provided label text inside a tooltip */
+    label: string;
+}

package/dist/typings/utils/{useSplitterContext.d.ts → usePaneProviderContext.d.ts}

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="react" />
-interface ISplitterContext {
+interface IPaneProviderContextData {
     rowState: Record<string, number>;
     columnState: Record<string, number>;
     setRowValue: (isTop: boolean, id: string, value: number) => void;
@@ -19,9 +19,11 @@ interface ISplitterContext {
         columns: number;
     };
 }
-export declare const SplitterContext: import("react").Context<ISplitterContext>;
-/**
- * Retrieve Splitter component context
- */
-declare const useSplitterContext: () => ISplitterContext;
-export default useSplitterContext;
+interface IPaneProviderContext {
+    providerId?: string;
+    contextData?: Record<string, IPaneProviderContextData>;
+}
+export declare const PaneProviderContext: import("react").Context<IPaneProviderContext>;
+export declare const usePaneProviderContextData: (providerId?: string | undefined) => IPaneProviderContextData | undefined;
+declare const usePaneProviderContext: () => IPaneProviderContext;
+export default usePaneProviderContext;

package/dist/typings/utils/usePaneSplitterContext.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import { ISplitterProps, Orientation } from '../types';
+interface IPaneSplitterContext {
+    orientation?: Orientation;
+    min: ISplitterProps['min'];
+    max: ISplitterProps['max'];
+    layoutKey: ISplitterProps['layoutKey'];
+    valueNow?: number;
+    isRow: boolean;
+    providerId?: ISplitterProps['providerId'];
+}
+export declare const PaneSplitterContext: import("react").Context<IPaneSplitterContext>;
+/**
+ * Retrieve Pane Splitter component context
+ */
+declare const usePaneSplitterContext: () => IPaneSplitterContext;
+export default usePaneSplitterContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.51.0",
+  "version": "8.53.1",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,6 +22,9 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-splitter": "^0.2.3",
+    "@zendeskgarden/container-utilities": "^0.7.1",
+    "@zendeskgarden/react-buttons": "^8.53.1",
+    "@zendeskgarden/react-tooltips": "^8.53.1",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0"
@@ -33,7 +36,8 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.51.0"
+    "@zendeskgarden/react-theming": "^8.53.1",
+    "use-resize-observer": "9.0.0"
   },
   "keywords": [
     "components",
@@ -45,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a932647429f0a79984650d2521f357ed8320d1d0"
+  "gitHead": "79dee8e82b6f082e8d4a72ba95a5fb3982d63040"
 }