@zendeskgarden/react-grid 8.50.1 → 8.51.0

package/dist/typings/elements/pane/Pane.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 React from 'react';
+import { Splitter } from './components/Splitter';
+import { Content } from './components/Content';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Pane: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
+    Content: typeof Content;
+    Splitter: typeof Splitter;
+};

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

@@ -0,0 +1,22 @@
+/**
+ * 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: {
+    ({ totalPanesWidth, totalPanesHeight, defaultRowValues, defaultColumnValues, rowValues, columnValues, onChange, children }: IPaneProviderProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        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/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, 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,6 @@
 export * from './StyledCol';
 export * from './StyledGrid';
 export * from './StyledRow';
+export * from './pane/StyledPane';
+export * from './pane/StyledPaneContent';
+export * from './pane/StyledPaneSplitter';

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,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 } from 'styled-components';
+import { Orientation } from '../../types';
+interface IStyledPaneSplitterProps {
+    orientation: Orientation;
+}
+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/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 } 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"];
@@ -152,3 +152,50 @@ 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 {
+    /** 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 prop functions for applying splitter state to the supporting layout
+     *
+     * @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 }: {
+        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> {
+    /** 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;
+}

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/useSplitterContext.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 ISplitterContext {
+    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;
+    };
+}
+export declare const SplitterContext: import("react").Context<ISplitterContext>;
+/**
+ * Retrieve Splitter component context
+ */
+declare const useSplitterContext: () => ISplitterContext;
+export default useSplitterContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.50.1",
+  "version": "8.51.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,10 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@zendeskgarden/container-splitter": "^0.2.3",
     "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 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.50.1"
+    "@zendeskgarden/react-theming": "^8.51.0"
   },
   "keywords": [
     "components",
@@ -43,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "29c5137cb492925c71ae2d43dcd2927374b82a54"
+  "gitHead": "a932647429f0a79984650d2521f357ed8320d1d0"
 }