@zendeskgarden/react-grid 8.50.1 → 8.53.0

package/dist/typings/elements/pane/Pane.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 React from 'react';
+import { Splitter } from './components/Splitter';
+import { Content } from './components/Content';
+import { SplitterButton } from './components/SplitterButton';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Pane: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
+    Content: typeof Content;
+    Splitter: typeof Splitter;
+    SplitterButton: typeof SplitterButton;
+};

package/dist/typings/elements/pane/PaneProvider.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.
+ */
+import PropTypes from 'prop-types';
+import { IPaneProviderProps } from '../../types';
+export declare const PaneProvider: {
+    ({ id, totalPanesWidth, totalPanesHeight, defaultRowValues, defaultColumnValues, rowValues, columnValues, onChange, children }: IPaneProviderProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        id: PropTypes.Requireable<string>;
+        totalPanesWidth: PropTypes.Validator<number>;
+        totalPanesHeight: PropTypes.Validator<number>;
+        defaultRowValues: PropTypes.Requireable<object>;
+        defaultColumnValues: PropTypes.Requireable<object>;
+        rowValues: PropTypes.Requireable<object>;
+        columnValues: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};

package/dist/typings/elements/pane/components/Content.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/pane/components/Splitter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 React from 'react';
+import { ISplitterProps } from '../../../types';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Splitter: React.ForwardRefExoticComponent<ISplitterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/pane/components/SplitterButton.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 React from 'react';
+import { ISplitterButtonProps } from '../../../types';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const SplitterButton: React.ForwardRefExoticComponent<ISplitterButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/index.d.ts

@@ -7,5 +7,7 @@
 export { Col } from './elements/Col';
 export { Grid } from './elements/Grid';
 export { Row } from './elements/Row';
+export { PaneProvider } from './elements/pane/PaneProvider';
+export { Pane } from './elements/pane/Pane';
 export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, TEXT_ALIGN as ARRAY_TEXT_ALIGN, SPACE as ARRAY_SPACE, WRAP as ARRAY_WRAP } from './types';
-export type { IColProps, IGridProps, IRowProps, AlignItems as ALIGN_ITEMS, AlignSelf as ALIGN_SELF, Direction as DIRECTION, JustifyContent as JUSTIFY_CONTENT, TextAlign as TEXT_ALIGN, GridNumber as GRID_NUMBER, Breakpoint as BREAKPOINT, Space as SPACE, Wrap as WRAP } from './types';
+export type { IPaneProviderProps, ISplitterProps, ISplitterButtonProps, IColProps, IGridProps, IRowProps, AlignItems as ALIGN_ITEMS, AlignSelf as ALIGN_SELF, Direction as DIRECTION, JustifyContent as JUSTIFY_CONTENT, TextAlign as TEXT_ALIGN, GridNumber as GRID_NUMBER, Breakpoint as BREAKPOINT, Space as SPACE, Wrap as WRAP } from './types';

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

@@ -7,3 +7,7 @@
 export * from './StyledCol';
 export * from './StyledGrid';
 export * from './StyledRow';
+export * from './pane/StyledPane';
+export * from './pane/StyledPaneContent';
+export * from './pane/StyledPaneSplitter';
+export * from './pane/StyledPaneSplitterButton';

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

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+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">;

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

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+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">;

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

@@ -0,0 +1,20 @@
+/**
+ * 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 } from 'styled-components';
+import { Orientation } from '../../types';
+interface IStyledPaneSplitterProps {
+    orientation: Orientation;
+}
+/**
+ * 1. Elevated initial context to pickup full-width hover
+ * 2. Stack below splitter button.
+ */
+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 {};

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 { 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];
@@ -152,3 +153,62 @@ export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
     /** Applies the `flex-wrap` container property to the row on extra-large screens */
     wrapXl?: Wrap;
 }
+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 */
+    totalPanesHeight: number;
+    /** Defines default row values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
+    defaultRowValues?: Record<string, number>;
+    /** Defines default column values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
+    defaultColumnValues?: Record<string, number>;
+    /** Defines row values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
+    rowValues?: Record<string, number>;
+    /** Defines column values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
+    columnValues?: Record<string, number>;
+    /**
+     * Handles splitter position changes
+     *
+     * @param rowValues The updated row values
+     * @param columnValues The updated column values
+     */
+    onChange?: (rowValues: Record<string, number>, columnValues: Record<string, number>) => void;
+    /**
+     * 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?: ({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
+        id: string;
+        getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
+        getRowValue: (splitterKey: string, isPixels?: boolean) => number;
+        getGridTemplateRows: (isPixels?: boolean) => string;
+        getGridTemplateColumns: (isPixels?: boolean) => string;
+    }) => 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 */
+    min: number;
+    /** Sets a maximum, in `fr` units, for splitter position */
+    max: number;
+    /** 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/usePaneContext.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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" />
+interface IPaneContext {
+    id?: string;
+    setId: (id: string) => void;
+}
+export declare const PaneContext: import("react").Context<IPaneContext>;
+/**
+ * Retrieve Splitter component context
+ */
+declare const usePaneContext: () => IPaneContext;
+export default usePaneContext;

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

@@ -0,0 +1,29 @@
+/**
+ * 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" />
+interface IPaneProviderContextData {
+    rowState: Record<string, number>;
+    columnState: Record<string, number>;
+    setRowValue: (isTop: boolean, id: string, value: number) => void;
+    setColumnValue: (isStart: boolean, id: string, value: number) => void;
+    getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
+    getRowValue: (splitterKey: string, isPixels?: boolean) => number;
+    totalPanesHeight: number;
+    totalPanesWidth: number;
+    pixelsPerFr: {
+        rows: number;
+        columns: number;
+    };
+}
+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.50.1",
+  "version": "8.53.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,8 +21,13 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@zendeskgarden/container-splitter": "^0.2.3",
+    "@zendeskgarden/container-utilities": "^0.7.1",
+    "@zendeskgarden/react-buttons": "^8.53.0",
+    "@zendeskgarden/react-tooltips": "^8.53.0",
     "polished": "^4.0.0",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.5.7",
+    "react-merge-refs": "^1.1.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",
@@ -31,7 +36,8 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.50.1"
+    "@zendeskgarden/react-theming": "^8.53.0",
+    "use-resize-observer": "9.0.0"
   },
   "keywords": [
     "components",
@@ -43,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "29c5137cb492925c71ae2d43dcd2927374b82a54"
+  "gitHead": "0fb51e654b241d34d9f933593f8525846112ae15"
 }