@zendeskgarden/react-grid 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/index.js

@@ -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.
+*/
+export { Col } from './elements/Col.js';
+export { Grid } from './elements/Grid.js';
+export { Row } from './elements/Row.js';
+export { PaneProvider } from './elements/pane/PaneProvider.js';
+export { Pane } from './elements/pane/Pane.js';
+export { ALIGN_ITEMS, ALIGN_SELF, DIRECTION, JUSTIFY_CONTENT, SPACE, TEXT_ALIGN, WRAP } from './types/index.js';

package/dist/esm/styled/StyledCol.js

@@ -0,0 +1,73 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'grid.col';
+const colorStyles = props => {
+  const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
+  return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
+};
+const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
+  const margin = offset && `${math(`${offset} / ${props.columns} * 100`)}%`;
+  let flexBasis;
+  let flexGrow;
+  let maxWidth;
+  let width;
+  if (typeof size === 'boolean') {
+    flexBasis = 0;
+    flexGrow = 1;
+    maxWidth = '100%';
+  } else if (size === 'auto') {
+    flexBasis = 'auto';
+    flexGrow = 0;
+    maxWidth = '100%';
+    width = 'auto';
+  } else if (size !== undefined) {
+    flexBasis = `${math(`${size} / ${props.columns} * 100`)}%`;
+    flexGrow = 0;
+    maxWidth = flexBasis;
+  }
+  let horizontalAlign;
+  if (textAlign === 'start') {
+    horizontalAlign = props.theme.rtl ? 'right' : 'left';
+  } else if (textAlign === 'end') {
+    horizontalAlign = props.theme.rtl ? 'left' : 'right';
+  } else {
+    horizontalAlign = textAlign;
+  }
+  let flexOrder;
+  if (order === 'first') {
+    flexOrder = -1;
+  } else if (order === 'last') {
+    flexOrder = math(`${props.columns} + 1`);
+  } else {
+    flexOrder = order;
+  }
+  return css(["flex-basis:", ";flex-grow:", ";flex-shrink:", ";align-self:", ";order:", ";margin-", ":", ";width:", ";max-width:", ";text-align:", ";"], flexBasis, flexGrow, size && 0, alignSelf === 'start' || alignSelf === 'end' ? `flex-${alignSelf}` : alignSelf, flexOrder, props.theme.rtl ? 'right' : 'left', margin, width, maxWidth, horizontalAlign);
+};
+const mediaStyles = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
+  return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(size, alignSelf, textAlign, offset, order, props));
+};
+const sizeStyles = props => {
+  const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
+  return css(["padding-right:", ";padding-left:", ";"], padding, padding);
+};
+const StyledCol = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledCol",
+  componentId: "sc-inuw62-0"
+})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props), props => sizeStyles(props), props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCol.defaultProps = {
+  columns: 12,
+  theme: DEFAULT_THEME
+};
+
+export { StyledCol };

package/dist/esm/styled/StyledGrid.js

@@ -0,0 +1,33 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'grid.grid';
+const colorStyles = props => {
+  const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
+  const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
+  return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
+};
+const sizeStyles = props => {
+  const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
+  return css(["padding-right:", ";padding-left:", ";"], padding, padding);
+};
+const StyledGrid = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledGrid",
+  componentId: "sc-oxgg5i-0"
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => sizeStyles(props), props => props.debug && colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGrid.defaultProps = {
+  gutters: 'md',
+  theme: DEFAULT_THEME
+};
+
+export { StyledGrid };

package/dist/esm/styled/StyledRow.js

@@ -0,0 +1,53 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'grid.row';
+const colorStyles = props => {
+  const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
+  const borderWidth = props.theme.borderWidths.sm;
+  return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
+};
+const flexStyles = (alignItems, justifyContent, wrap) => {
+  let flexAlignItems;
+  let flexJustifyContent;
+  if (alignItems === 'start' || alignItems === 'end') {
+    flexAlignItems = `flex-${alignItems}`;
+  } else {
+    flexAlignItems = alignItems;
+  }
+  if (justifyContent === 'start' || justifyContent === 'end') {
+    flexJustifyContent = `flex-${justifyContent}`;
+  } else if (justifyContent === 'between' || justifyContent === 'around') {
+    flexJustifyContent = `space-${justifyContent}`;
+  } else {
+    flexJustifyContent = justifyContent;
+  }
+  return css(["flex-wrap:", ";align-items:", ";justify-content:", ";"], wrap, flexAlignItems, flexJustifyContent);
+};
+const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
+  return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
+};
+const sizeStyles = props => {
+  const margin = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
+  return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
+};
+const StyledRow = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-xjsdg1-0"
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles(props), props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRow.defaultProps = {
+  wrapAll: 'wrap',
+  theme: DEFAULT_THEME
+};
+
+export { StyledRow };

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

@@ -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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pane';
+const StyledPane = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledPane",
+  componentId: "sc-1ltjst7-0"
+})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPane.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPane };

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

@@ -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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pane.content';
+const StyledPaneContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledPaneContent",
+  componentId: "sc-1b38mbh-0"
+})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneContent };

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

@@ -0,0 +1,99 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pane.splitter';
+const colorStyles = props => {
+  const color = getColorV8('neutralHue', 300, props.theme);
+  const hoverColor = getColorV8('primaryHue', 600, props.theme);
+  const activeColor = getColorV8('primaryHue', 800, props.theme);
+  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, focusStyles({
+    theme: props.theme,
+    color: {
+      hue: hoverColor
+    },
+    styles: {
+      backgroundColor: hoverColor
+    },
+    selector: '&:focus-visible::before'
+  }), activeColor);
+};
+const sizeStyles = props => {
+  const size = math(`${props.theme.shadowWidths.md} * 2`);
+  const separatorSize = math(`${props.theme.borderWidths.sm} * 2`);
+  const offset = math(`-${size} / 2`);
+  let cursor;
+  let top;
+  let right;
+  let left;
+  let bottom;
+  let width;
+  let height;
+  let separatorWidth;
+  let separatorHeight;
+  switch (props.orientation) {
+    case 'top':
+      cursor = 'row-resize';
+      top = offset;
+      width = '100%';
+      height = size;
+      separatorWidth = width;
+      separatorHeight = props.theme.borderWidths.sm;
+      break;
+    case 'bottom':
+      cursor = 'row-resize';
+      bottom = offset;
+      width = '100%';
+      height = size;
+      separatorWidth = width;
+      separatorHeight = props.theme.borderWidths.sm;
+      break;
+    case 'start':
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = props.theme.borderWidths.sm;
+      separatorHeight = height;
+      if (props.theme.rtl) {
+        right = offset;
+      } else {
+        left = offset;
+      }
+      break;
+    case 'end':
+    default:
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = props.theme.borderWidths.sm;
+      separatorHeight = height;
+      if (props.theme.rtl) {
+        left = offset;
+      } else {
+        right = offset;
+      }
+      break;
+  }
+  const dimensionProperty = width === '100%' ? 'height' : 'width';
+  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+};
+const StyledPaneSplitter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledPaneSplitter",
+  componentId: "sc-jylemn-0"
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneSplitter };

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

@@ -0,0 +1,48 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { ChevronButton } from '@zendeskgarden/react-buttons';
+
+const COMPONENT_ID = 'pane.splitter_button';
+const getSize = theme => theme.space.base * 6;
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const size = `${getSize(theme)}px`;
+  return css(["width:", ";min-width:", ";height:", ";"], size, size, size);
+};
+const transformStyles = props => {
+  let degrees = 0;
+  if (props.isRotated) {
+    degrees = props.theme.rtl ? -180 : 180;
+  }
+  if (props.orientation === 'end') {
+    degrees += props.theme.rtl ? -90 : 90;
+  } else if (props.orientation === 'start') {
+    degrees += props.theme.rtl ? 90 : -90;
+  } else if (props.orientation === 'bottom') {
+    degrees += 180;
+  }
+  return css(["& > svg{transform:rotate(", "deg);}"], degrees);
+};
+const StyledPaneSplitterButton = styled(ChevronButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  isBasic: true,
+  isPill: true,
+  size: 'small'
+}).withConfig({
+  displayName: "StyledPaneSplitterButton",
+  componentId: "sc-zh032e-0"
+})(["", ";", ";", ";"], sizeStyles, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitterButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneSplitterButton, getSize };

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

@@ -0,0 +1,116 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { stripUnit, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledPaneSplitter } from './StyledPaneSplitter.js';
+import { getSize } from './StyledPaneSplitterButton.js';
+
+const COMPONENT_ID = 'pane.splitter_button_container';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColorV8('background', 600 , theme);
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
+  return css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
+};
+const positionStyles = props => {
+  let top;
+  let left;
+  let right;
+  let bottom;
+  const size = getSize(props.theme);
+  const inset = `-${size / 2}px`;
+  if (props.placement === 'center' || props.splitterSize < size * 3) {
+    const center = `${props.splitterSize / 2 - size / 2}px`;
+    switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-ltr':
+      case 'top-rtl':
+        top = inset;
+        left = center;
+        break;
+      case 'start-ltr':
+      case 'end-rtl':
+        top = center;
+        left = inset;
+        break;
+      case 'end-ltr':
+      case 'start-rtl':
+        top = center;
+        right = inset;
+        break;
+      case 'bottom-ltr':
+      case 'bottom-rtl':
+        bottom = inset;
+        right = center;
+        break;
+    }
+  } else {
+    const offset = `${size}px`;
+    switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-end-ltr':
+      case 'top-end-rtl':
+      case 'top-start-rtl':
+        top = inset;
+        right = offset;
+        break;
+      case 'bottom-end-ltr':
+      case 'bottom-end-rtl':
+      case 'bottom-start-rtl':
+        bottom = inset;
+        right = offset;
+        break;
+      case 'start-start-ltr':
+      case 'end-start-rtl':
+        top = offset;
+        left = inset;
+        break;
+      case 'start-end-ltr':
+      case 'end-end-rtl':
+        bottom = offset;
+        left = inset;
+        break;
+      case 'end-start-ltr':
+      case 'start-start-rtl':
+        top = offset;
+        right = inset;
+        break;
+      case 'end-end-ltr':
+      case 'start-end-rtl':
+        bottom = offset;
+        right = inset;
+        break;
+      case 'top-start-ltr':
+        top = inset;
+        left = offset;
+        break;
+      case 'bottom-start-ltr':
+        bottom = inset;
+        left = offset;
+        break;
+    }
+  }
+  return css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const size = getSize(theme);
+  return css(["border-radius:", "px;width:", "px;height:", "px;"], size, size, size);
+};
+const minimumSplitterSize = theme => stripUnit(math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`));
+const StyledPaneSplitterButtonContainer = styled.div.withConfig({
+  displayName: "StyledPaneSplitterButtonContainer",
+  componentId: "sc-1w84y62-0"
+})(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitterButtonContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneSplitterButtonContainer };

package/dist/esm/types/index.js

@@ -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.
+*/
+const ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
+const ALIGN_SELF = ['auto', ...ALIGN_ITEMS];
+const DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
+const JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
+const TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
+const SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+const WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
+const ORIENTATION = ['top', 'bottom', 'start', 'end'];
+
+export { ALIGN_ITEMS, ALIGN_SELF, DIRECTION, JUSTIFY_CONTENT, ORIENTATION, SPACE, TEXT_ALIGN, WRAP };

package/dist/esm/utils/useGridContext.js

@@ -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 { createContext, useContext } from 'react';
+
+const GridContext = createContext({
+  gutters: 'md'
+});
+const useGridContext = () => {
+  return useContext(GridContext);
+};
+
+export { GridContext, useGridContext as default };

package/dist/esm/utils/usePaneContext.js

@@ -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 { createContext, useContext } from 'react';
+
+const PaneContext = createContext({
+  setId: () => undefined
+});
+const usePaneContext = () => {
+  return useContext(PaneContext);
+};
+
+export { PaneContext, usePaneContext as default };

package/dist/esm/utils/usePaneProviderContext.js

@@ -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.
+*/
+import { createContext, useContext } from 'react';
+
+const PaneProviderContext = createContext({});
+const usePaneProviderContextData = providerId => {
+  const context = useContext(PaneProviderContext);
+  const id = providerId || context.providerId;
+  return id && context.contextData ? context.contextData[id] : undefined;
+};
+const usePaneProviderContext = () => useContext(PaneProviderContext);
+
+export { PaneProviderContext, usePaneProviderContext as default, usePaneProviderContextData };

package/dist/esm/utils/usePaneSplitterContext.js

@@ -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 { createContext, useContext } from 'react';
+
+const PaneSplitterContext = createContext({
+  orientation: 'start',
+  min: 0,
+  max: 0,
+  layoutKey: '',
+  valueNow: 0,
+  size: 0,
+  isRow: false
+});
+const usePaneSplitterContext = () => {
+  return useContext(PaneSplitterContext);
+};
+
+export { PaneSplitterContext, usePaneSplitterContext as default };