@zendeskgarden/react-grid 9.0.0-next.7 → 9.0.0-next.9

package/dist/esm/elements/Col.js

@@ -0,0 +1,72 @@
+/**
+* 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 PropTypes from 'prop-types';
+import { ALIGN_SELF, TEXT_ALIGN } from '../types/index.js';
+import { StyledCol } from '../styled/StyledCol.js';
+import '../styled/StyledGrid.js';
+import '../styled/StyledRow.js';
+import '../styled/pane/StyledPane.js';
+import '../styled/pane/StyledPaneContent.js';
+import '../styled/pane/StyledPaneSplitter.js';
+import '../styled/pane/StyledPaneSplitterButton.js';
+import '../styled/pane/StyledPaneSplitterButtonContainer.js';
+import useGridContext from '../utils/useGridContext.js';
+
+const Col = React.forwardRef((_ref, ref) => {
+  let {
+    size,
+    ...props
+  } = _ref;
+  const {
+    columns,
+    gutters,
+    debug
+  } = useGridContext();
+  return React.createElement(StyledCol, Object.assign({
+    sizeAll: size,
+    columns: columns,
+    gutters: gutters,
+    debug: debug,
+    ref: ref
+  }, props));
+});
+Col.displayName = 'Col';
+Col.propTypes = {
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+  md: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+  xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+  alignSelf: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfXs: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfSm: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfMd: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfLg: PropTypes.oneOf(ALIGN_SELF),
+  alignSelfXl: PropTypes.oneOf(ALIGN_SELF),
+  textAlign: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignXs: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignSm: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignMd: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignLg: PropTypes.oneOf(TEXT_ALIGN),
+  textAlignXl: PropTypes.oneOf(TEXT_ALIGN),
+  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  offsetXs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  offsetSm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  offsetMd: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  offsetLg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  offsetXl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  order: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  orderXs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  orderSm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  orderMd: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  orderLg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  orderXl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export { Col };

package/dist/esm/elements/Grid.js

@@ -0,0 +1,54 @@
+/**
+* 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, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { SPACE } from '../types/index.js';
+import { GridContext } from '../utils/useGridContext.js';
+import '../styled/StyledCol.js';
+import { StyledGrid } from '../styled/StyledGrid.js';
+import '../styled/StyledRow.js';
+import '../styled/pane/StyledPane.js';
+import '../styled/pane/StyledPaneContent.js';
+import '../styled/pane/StyledPaneSplitter.js';
+import '../styled/pane/StyledPaneSplitterButton.js';
+import '../styled/pane/StyledPaneSplitterButtonContainer.js';
+import { Row } from './Row.js';
+import { Col } from './Col.js';
+
+const GridComponent = React.forwardRef((_ref, ref) => {
+  let {
+    columns,
+    debug,
+    ...props
+  } = _ref;
+  const value = useMemo(() => ({
+    columns,
+    gutters: props.gutters,
+    debug
+  }), [columns, props.gutters, debug]);
+  return React.createElement(GridContext.Provider, {
+    value: value
+  }, React.createElement(StyledGrid, Object.assign({
+    debug: debug,
+    ref: ref
+  }, props)));
+});
+GridComponent.displayName = 'Grid';
+GridComponent.propTypes = {
+  columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  gutters: PropTypes.oneOf(SPACE),
+  debug: PropTypes.bool
+};
+GridComponent.defaultProps = {
+  columns: 12,
+  gutters: 'md'
+};
+const Grid = GridComponent;
+Grid.Row = Row;
+Grid.Col = Col;
+
+export { Grid, GridComponent };

package/dist/esm/elements/Row.js

@@ -0,0 +1,58 @@
+/**
+* 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 PropTypes from 'prop-types';
+import { ALIGN_ITEMS, JUSTIFY_CONTENT, WRAP } from '../types/index.js';
+import useGridContext from '../utils/useGridContext.js';
+import '../styled/StyledCol.js';
+import '../styled/StyledGrid.js';
+import { StyledRow } from '../styled/StyledRow.js';
+import '../styled/pane/StyledPane.js';
+import '../styled/pane/StyledPaneContent.js';
+import '../styled/pane/StyledPaneSplitter.js';
+import '../styled/pane/StyledPaneSplitterButton.js';
+import '../styled/pane/StyledPaneSplitterButtonContainer.js';
+
+const Row = React.forwardRef((_ref, ref) => {
+  let {
+    wrap,
+    ...props
+  } = _ref;
+  const {
+    gutters,
+    debug
+  } = useGridContext();
+  return React.createElement(StyledRow, Object.assign({
+    gutters: gutters,
+    debug: debug,
+    wrapAll: wrap,
+    ref: ref
+  }, props));
+});
+Row.displayName = 'Row';
+Row.propTypes = {
+  alignItems: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsXs: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsSm: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsMd: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsLg: PropTypes.oneOf(ALIGN_ITEMS),
+  alignItemsXl: PropTypes.oneOf(ALIGN_ITEMS),
+  justifyContent: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentXs: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentSm: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentMd: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentLg: PropTypes.oneOf(JUSTIFY_CONTENT),
+  justifyContentXl: PropTypes.oneOf(JUSTIFY_CONTENT),
+  wrap: PropTypes.oneOf(WRAP),
+  wrapXs: PropTypes.oneOf(WRAP),
+  wrapSm: PropTypes.oneOf(WRAP),
+  wrapMd: PropTypes.oneOf(WRAP),
+  wrapLg: PropTypes.oneOf(WRAP),
+  wrapXl: PropTypes.oneOf(WRAP)
+};
+
+export { Row };

package/dist/esm/elements/pane/Pane.js

@@ -0,0 +1,55 @@
+/**
+* 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, { forwardRef, useState, useRef, useMemo } from 'react';
+import useResizeObserver from 'use-resize-observer';
+import { mergeRefs } from 'react-merge-refs';
+import { Splitter } from './components/Splitter.js';
+import { Content } from './components/Content.js';
+import { SplitterButton } from './components/SplitterButton.js';
+import '../../styled/StyledCol.js';
+import '../../styled/StyledGrid.js';
+import '../../styled/StyledRow.js';
+import { StyledPane } from '../../styled/pane/StyledPane.js';
+import '../../styled/pane/StyledPaneContent.js';
+import '../../styled/pane/StyledPaneSplitter.js';
+import '../../styled/pane/StyledPaneSplitterButton.js';
+import '../../styled/pane/StyledPaneSplitterButtonContainer.js';
+import { PaneContext } from '../../utils/usePaneContext.js';
+
+const PaneComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const [paneId, setPaneId] = useState();
+  const observerRef = useRef(null);
+  const {
+    width = 0,
+    height = 0
+  } = useResizeObserver({
+    ref: observerRef
+  });
+  const isVisible = useMemo(() => observerRef.current ? width > 0 && height > 0 : true, [width, height]);
+  const paneContext = useMemo(() => ({
+    isVisible,
+    id: paneId,
+    setId: id => setPaneId(id)
+  }), [paneId, isVisible]);
+  return React.createElement(PaneContext.Provider, {
+    value: paneContext
+  }, React.createElement(StyledPane, Object.assign({
+    id: paneId,
+    ref: mergeRefs([ref, observerRef])
+  }, props), children));
+});
+PaneComponent.displayName = 'Pane';
+const Pane = PaneComponent;
+Pane.Content = Content;
+Pane.Splitter = Splitter;
+Pane.SplitterButton = SplitterButton;
+
+export { Pane };

package/dist/esm/elements/pane/PaneProvider.js

@@ -0,0 +1,197 @@
+/**
+* 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, { useState, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useId } from '@zendeskgarden/container-utilities';
+import usePaneProviderContext, { PaneProviderContext } from '../../utils/usePaneProviderContext.js';
+
+const getPixelsPerFr = (totalFrs, totalDimension) => {
+  return totalDimension / totalFrs;
+};
+const convertToPixels = (values, pixelsPerFr) => {
+  return Object.entries(values).reduce((prev, _ref) => {
+    let [key, value] = _ref;
+    prev[key] = value * pixelsPerFr;
+    return prev;
+  }, {});
+};
+const PaneProvider = _ref2 => {
+  let {
+    id,
+    totalPanesWidth,
+    totalPanesHeight,
+    defaultRowValues,
+    defaultColumnValues,
+    rowValues,
+    columnValues,
+    onChange,
+    children
+  } = _ref2;
+  const isControlled = rowValues !== undefined && rowValues !== null && columnValues !== undefined && columnValues !== null;
+  const [rowState, setRowState] = useState(defaultRowValues || {});
+  const [columnState, setColumnState] = useState(defaultColumnValues || {});
+  const rowsTrack = isControlled ? rowValues : rowState;
+  const columnsTrack = isControlled ? columnValues : columnState;
+  const setRowsTrack = useCallback(values => {
+    if (isControlled && onChange) {
+      return onChange(values(rowsTrack), columnsTrack);
+    }
+    return setRowState(values);
+  }, [isControlled, onChange, setRowState, columnsTrack, rowsTrack]);
+  const setColumnsTrack = useCallback(values => {
+    if (isControlled && onChange) {
+      return onChange(rowsTrack, values(columnsTrack));
+    }
+    return setColumnState(values);
+  }, [isControlled, onChange, setColumnState, rowsTrack, columnsTrack]);
+  const totalFractions = useMemo(() => ({
+    rows: Object.values(rowsTrack).reduce((prev, value) => value + prev, 0),
+    columns: Object.values(columnsTrack).reduce((prev, value) => value + prev, 0)
+  }), [rowsTrack, columnsTrack]);
+  const pixelsPerFr = useMemo(() => ({
+    rows: getPixelsPerFr(totalFractions.rows, totalPanesHeight),
+    columns: getPixelsPerFr(totalFractions.columns, totalPanesWidth)
+  }), [totalFractions, totalPanesHeight, totalPanesWidth]);
+  const layoutStateInPixels = useMemo(() => ({
+    rows: convertToPixels(rowsTrack, pixelsPerFr.rows),
+    columns: convertToPixels(columnsTrack, pixelsPerFr.columns)
+  }), [rowsTrack, columnsTrack, pixelsPerFr]);
+  const layoutIndices = useMemo(() => {
+    const rowArray = Object.keys(rowsTrack);
+    const columnArray = Object.keys(columnsTrack);
+    const rows = rowArray.reduce((prev, key, index) => {
+      prev[key] = index;
+      return prev;
+    }, {});
+    const columns = columnArray.reduce((prev, key, index) => {
+      prev[key] = index;
+      return prev;
+    }, {});
+    return {
+      rows,
+      columns,
+      rowArray,
+      columnArray
+    };
+  }, [rowsTrack, columnsTrack]);
+  const setRowValue = useCallback((isTop, splitterId, value) => {
+    const {
+      rows,
+      rowArray
+    } = layoutIndices;
+    const stealFromTraversal = isTop ? -1 : 1;
+    const addToTraversal = 0;
+    setRowsTrack(state => {
+      const oldValue = rowsTrack[splitterId];
+      const stealFromIndex = rows[splitterId] + stealFromTraversal;
+      const addToIndex = rows[splitterId] + addToTraversal;
+      const stealFromKey = rowArray[stealFromIndex];
+      const addToKey = rowArray[addToIndex];
+      const difference = oldValue - value;
+      const nextState = {
+        ...state
+      };
+      nextState[addToKey] = rowsTrack[addToKey] - difference;
+      nextState[stealFromKey] = rowsTrack[stealFromKey] + difference;
+      return nextState;
+    });
+  }, [layoutIndices, rowsTrack, setRowsTrack]);
+  const setColumnValue = useCallback((isStart, splitterId, value) => {
+    const {
+      columns,
+      columnArray
+    } = layoutIndices;
+    const stealFromTraversal = isStart ? -1 : 1;
+    const addToTraversal = 0;
+    setColumnsTrack(state => {
+      const stealFromIndex = columns[splitterId] + stealFromTraversal;
+      const addToIndex = columns[splitterId] + addToTraversal;
+      const oldValue = columnsTrack[splitterId];
+      const stealFromKey = columnArray[stealFromIndex];
+      const addToKey = columnArray[addToIndex];
+      const difference = oldValue - value;
+      const nextState = {
+        ...state
+      };
+      nextState[addToKey] = columnsTrack[addToKey] - difference;
+      nextState[stealFromKey] = columnsTrack[stealFromKey] + difference;
+      return nextState;
+    });
+  }, [layoutIndices, columnsTrack, setColumnsTrack]);
+  const getColumnValue = useCallback((splitterKey, isPixels) => {
+    if (isPixels) {
+      return layoutStateInPixels.columns[splitterKey];
+    }
+    return columnsTrack[splitterKey];
+  }, [columnsTrack, layoutStateInPixels]);
+  const getRowValue = useCallback((splitterKey, isPixels) => {
+    if (isPixels) {
+      return layoutStateInPixels.rows[splitterKey];
+    }
+    return rowsTrack[splitterKey];
+  }, [rowsTrack, layoutStateInPixels]);
+  const getGridTemplateColumns = useCallback(isPixels => {
+    const {
+      columnArray
+    } = layoutIndices;
+    if (isPixels) {
+      return columnArray.map(col => `${layoutStateInPixels.columns[col]}px`).join(' ');
+    }
+    return columnArray.map(col => `${columnsTrack[col]}fr`).join(' ');
+  }, [layoutIndices, columnsTrack, layoutStateInPixels]);
+  const getGridTemplateRows = useCallback(isPixels => {
+    const {
+      rowArray
+    } = layoutIndices;
+    if (isPixels) {
+      return rowArray.map(row => `${layoutStateInPixels.rows[row]}px`).join(' ');
+    }
+    return rowArray.map(row => `${rowsTrack[row]}fr`).join(' ');
+  }, [layoutIndices, rowsTrack, layoutStateInPixels]);
+  const providerId = useId(id);
+  const parentPaneProviderContext = usePaneProviderContext();
+  const paneProviderContext = useMemo(() => providerId ? {
+    providerId,
+    contextData: {
+      ...parentPaneProviderContext.contextData,
+      [providerId]: {
+        columnState,
+        rowState,
+        setRowValue,
+        setColumnValue,
+        getRowValue,
+        getColumnValue,
+        totalPanesHeight,
+        totalPanesWidth,
+        pixelsPerFr
+      }
+    }
+  } : {}, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
+  return React.createElement(PaneProviderContext.Provider, {
+    value: paneProviderContext
+  }, children?.({
+    id: providerId,
+    getRowValue,
+    getColumnValue,
+    getGridTemplateColumns,
+    getGridTemplateRows
+  }));
+};
+PaneProvider.displayName = 'PaneProvider';
+PaneProvider.propTypes = {
+  id: PropTypes.string,
+  totalPanesWidth: PropTypes.number.isRequired,
+  totalPanesHeight: PropTypes.number.isRequired,
+  defaultRowValues: PropTypes.object,
+  defaultColumnValues: PropTypes.object,
+  rowValues: PropTypes.object,
+  columnValues: PropTypes.object,
+  onChange: PropTypes.func,
+  children: PropTypes.func
+};
+
+export { PaneProvider };

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

@@ -0,0 +1,30 @@
+/**
+* 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, { forwardRef } from 'react';
+import '../../../styled/StyledCol.js';
+import '../../../styled/StyledGrid.js';
+import '../../../styled/StyledRow.js';
+import '../../../styled/pane/StyledPane.js';
+import { StyledPaneContent } from '../../../styled/pane/StyledPaneContent.js';
+import '../../../styled/pane/StyledPaneSplitter.js';
+import '../../../styled/pane/StyledPaneSplitterButton.js';
+import '../../../styled/pane/StyledPaneSplitterButtonContainer.js';
+import usePaneContext from '../../../utils/usePaneContext.js';
+
+const ContentComponent = forwardRef((props, ref) => {
+  const {
+    isVisible
+  } = usePaneContext();
+  return React.createElement(StyledPaneContent, Object.assign({
+    hidden: !isVisible,
+    ref: ref
+  }, props));
+});
+ContentComponent.displayName = 'Pane.Content';
+const Content = ContentComponent;
+
+export { Content };

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

@@ -0,0 +1,128 @@
+/**
+* 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, { forwardRef, useContext, useRef, useEffect, useMemo } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { useSplitter } from '@zendeskgarden/container-splitter';
+import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext.js';
+import usePaneContext from '../../../utils/usePaneContext.js';
+import { ORIENTATION } from '../../../types/index.js';
+import '../../../styled/StyledCol.js';
+import '../../../styled/StyledGrid.js';
+import '../../../styled/StyledRow.js';
+import '../../../styled/pane/StyledPane.js';
+import '../../../styled/pane/StyledPaneContent.js';
+import { StyledPaneSplitter } from '../../../styled/pane/StyledPaneSplitter.js';
+import '../../../styled/pane/StyledPaneSplitterButton.js';
+import '../../../styled/pane/StyledPaneSplitterButtonContainer.js';
+import { PaneSplitterContext } from '../../../utils/usePaneSplitterContext.js';
+import { useDocument, useText } from '@zendeskgarden/react-theming';
+
+const paneToSplitterOrientation = {
+  start: 'vertical',
+  end: 'vertical',
+  top: 'horizontal',
+  bottom: 'horizontal'
+};
+const orientationToDimension = {
+  start: 'columns',
+  end: 'columns',
+  top: 'rows',
+  bottom: 'rows'
+};
+const SplitterComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    providerId,
+    layoutKey,
+    min,
+    max,
+    orientation,
+    isFixed,
+    onMouseDown,
+    onTouchStart,
+    onKeyDown,
+    onClick,
+    ...props
+  } = _ref;
+  const paneProviderContext = usePaneProviderContextData(providerId);
+  const paneContext = usePaneContext();
+  const themeContext = useContext(ThemeContext);
+  const environment = useDocument(themeContext);
+  const isRow = orientationToDimension[orientation] === 'rows';
+  const separatorRef = useRef(null);
+  const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
+  const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
+  const value = isRow ? paneProviderContext?.getRowValue(layoutKey, true) : paneProviderContext?.getColumnValue(layoutKey, true);
+  const valueInFr = isRow ? paneProviderContext?.getRowValue(layoutKey) : paneProviderContext?.getColumnValue(layoutKey);
+  const {
+    getSeparatorProps,
+    getPrimaryPaneProps
+  } = useSplitter({
+    orientation: splitterOrientation,
+    isLeading: orientation === 'start' || orientation === 'top',
+    min: min * pixelsPerFr,
+    max: max * pixelsPerFr,
+    rtl: themeContext.rtl,
+    isFixed,
+    environment,
+    onChange: valueNow => {
+      if (isRow) {
+        return paneProviderContext?.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+      }
+      return paneProviderContext?.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+    },
+    valueNow: value,
+    separatorRef
+  });
+  useEffect(() => {
+    if (!paneContext.id) {
+      paneContext.setId(getPrimaryPaneProps().id);
+    }
+  }, [paneContext, getPrimaryPaneProps]);
+  const ariaLabel = useText(SplitterComponent, props, 'aria-label', `${splitterOrientation} splitter`);
+  const separatorProps = getSeparatorProps({
+    'aria-controls': paneContext.id,
+    'aria-label': ariaLabel,
+    onMouseDown,
+    onTouchStart,
+    onKeyDown,
+    onClick
+  });
+  const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
+  return React.createElement(PaneSplitterContext.Provider, {
+    value: useMemo(() => ({
+      orientation,
+      layoutKey,
+      min,
+      max,
+      valueNow: valueInFr,
+      size,
+      isRow
+    }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
+  }, React.createElement(StyledPaneSplitter, Object.assign({
+    isFixed: isFixed,
+    orientation: orientation
+  }, separatorProps, props, {
+    ref: mergeRefs([separatorRef, ref])
+  })), children );
+});
+SplitterComponent.displayName = 'Pane.Splitter';
+SplitterComponent.propTypes = {
+  layoutKey: PropTypes.string.isRequired,
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  orientation: PropTypes.oneOf(ORIENTATION),
+  isFixed: PropTypes.bool
+};
+SplitterComponent.defaultProps = {
+  orientation: 'end'
+};
+const Splitter = SplitterComponent;
+
+export { Splitter };

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

@@ -0,0 +1,91 @@
+/**
+* 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, { forwardRef, useCallback } from 'react';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import '../../../styled/StyledCol.js';
+import '../../../styled/StyledGrid.js';
+import '../../../styled/StyledRow.js';
+import '../../../styled/pane/StyledPane.js';
+import '../../../styled/pane/StyledPaneContent.js';
+import '../../../styled/pane/StyledPaneSplitter.js';
+import { StyledPaneSplitterButton } from '../../../styled/pane/StyledPaneSplitterButton.js';
+import { StyledPaneSplitterButtonContainer } from '../../../styled/pane/StyledPaneSplitterButtonContainer.js';
+import usePaneSplitterContext from '../../../utils/usePaneSplitterContext.js';
+import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext.js';
+
+const SplitterButtonComponent = forwardRef((props, ref) => {
+  const {
+    label,
+    placement: defaultPlacement
+  } = props;
+  const {
+    orientation,
+    layoutKey,
+    min,
+    max,
+    isRow,
+    valueNow,
+    size,
+    providerId
+  } = usePaneSplitterContext();
+  const paneProviderContext = usePaneProviderContextData(providerId);
+  const isTop = orientation === 'top';
+  const isStart = orientation === 'start';
+  const isMin = valueNow === min;
+  let placement = defaultPlacement;
+  if (!defaultPlacement) {
+    if (isRow) {
+      placement = 'center';
+    } else {
+      placement = 'start';
+    }
+  }
+  const setValue = useCallback(value => {
+    if (isRow) {
+      paneProviderContext.setRowValue(isTop, layoutKey, value);
+    } else {
+      paneProviderContext.setColumnValue(isStart, layoutKey, value);
+    }
+  }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
+  const onClick = composeEventHandlers(props.onClick, () => {
+    if (isMin) {
+      setValue(max);
+    } else {
+      setValue(min);
+    }
+  });
+  const onKeyDown = composeEventHandlers(props.onKeyDown, event => event.stopPropagation()
+  );
+  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
+  );
+  return React.createElement(StyledPaneSplitterButtonContainer, {
+    orientation: orientation,
+    placement: placement,
+    splitterSize: size || 0
+  }, React.createElement(Tooltip, {
+    content: label,
+    zIndex: 2,
+    style: {
+      cursor: 'default'
+    },
+    onMouseDown: e => e.stopPropagation()
+  }, React.createElement(StyledPaneSplitterButton, Object.assign({
+    "aria-label": label
+  }, props, {
+    orientation: orientation,
+    isRotated: isMin,
+    ref: ref,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown
+  }))));
+});
+SplitterButtonComponent.displayName = 'Pane.SplitterButton';
+const SplitterButton = SplitterButtonComponent;
+
+export { SplitterButton };