@zendeskgarden/react-grid 9.0.0-next.4 → 9.0.0-next.5

package/README.md

@@ -34,22 +34,22 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Grid, Row, Col } from '@zendeskgarden/react-grid';
+import { Grid } from '@zendeskgarden/react-grid';
 
 /**
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
   <Grid>
-    <Row>
-      <Col md={4}>1 of 3</Col>
-      <Col md={4}>2 of 3</Col>
-      <Col md={4}>3 of 3</Col>
-    </Row>
-    <Row>
-      <Col md={6}>1 of 2</Col>
-      <Col md={6}>2 of 2</Col>
-    </Row>
+    <Grid.Row>
+      <Grid.Col md={4}>1 of 3</Grid.Col>
+      <Grid.Col md={4}>2 of 3</Grid.Col>
+      <Grid.Col md={4}>3 of 3</Grid.Col>
+    </Grid.Row>
+    <Grid.Row>
+      <Grid.Col md={6}>1 of 2</Grid.Col>
+      <Grid.Col md={6}>2 of 2</Grid.Col>
+    </Grid.Row>
   </Grid>
 </ThemeProvider>;
 ```

package/dist/index.cjs.js

@@ -52,7 +52,7 @@ const ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 const COMPONENT_ID$6 = 'grid.col';
 const colorStyles$4 = props => {
-  const backgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
+  const backgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
@@ -102,7 +102,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -114,7 +114,7 @@ StyledCol.defaultProps = {
 
 const COMPONENT_ID$5 = 'grid.grid';
 const colorStyles$3 = props => {
-  const borderColor = reactTheming.getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
+  const borderColor = reactTheming.getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
   const borderWidth = polished.math(`${props.theme.borderWidths.sm} * 2`);
   return styled.css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
@@ -124,7 +124,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -136,7 +136,7 @@ StyledGrid.defaultProps = {
 
 const COMPONENT_ID$4 = 'grid.row';
 const colorStyles$2 = props => {
-  const borderColor = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
+  const borderColor = reactTheming.getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
   const borderWidth = props.theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
@@ -166,7 +166,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -179,7 +179,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -191,7 +191,7 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -202,9 +202,9 @@ StyledPaneContent.defaultProps = {
 
 const COMPONENT_ID$1 = 'pane.splitter';
 const colorStyles$1 = props => {
-  const color = reactTheming.getColor('neutralHue', 300, props.theme);
-  const hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
+  const color = reactTheming.getColorV8('neutralHue', 300, props.theme);
+  const hoverColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
+  const activeColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
   return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, reactTheming.focusStyles({
     theme: props.theme,
     hue: hoverColor,
@@ -277,7 +277,7 @@ const sizeStyles$1 = props => {
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -305,7 +305,7 @@ const colorStyles = _ref => {
   let {
     theme
   } = _ref;
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
   return styled.css(["box-shadow:", ";", ""], boxShadow, reactTheming.focusStyles({
     theme,
     boxShadow
@@ -342,7 +342,7 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -413,35 +413,6 @@ Col.propTypes = {
   orderXl: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string])
 };
 
-const Grid = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    columns,
-    debug,
-    ...props
-  } = _ref;
-  const value = React.useMemo(() => ({
-    columns,
-    gutters: props.gutters,
-    debug
-  }), [columns, props.gutters, debug]);
-  return React__default.default.createElement(GridContext.Provider, {
-    value: value
-  }, React__default.default.createElement(StyledGrid, _extends({
-    debug: debug,
-    ref: ref
-  }, props)));
-});
-Grid.displayName = 'Grid';
-Grid.propTypes = {
-  columns: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  gutters: PropTypes__default.default.oneOf(SPACE),
-  debug: PropTypes__default.default.bool
-};
-Grid.defaultProps = {
-  columns: 12,
-  gutters: 'md'
-};
-
 const Row = React__default.default.forwardRef((_ref, ref) => {
   let {
     wrap,
@@ -480,6 +451,38 @@ Row.propTypes = {
   wrapXl: PropTypes__default.default.oneOf(WRAP)
 };
 
+const GridComponent = React__default.default.forwardRef((_ref, ref) => {
+  let {
+    columns,
+    debug,
+    ...props
+  } = _ref;
+  const value = React.useMemo(() => ({
+    columns,
+    gutters: props.gutters,
+    debug
+  }), [columns, props.gutters, debug]);
+  return React__default.default.createElement(GridContext.Provider, {
+    value: value
+  }, React__default.default.createElement(StyledGrid, _extends({
+    debug: debug,
+    ref: ref
+  }, props)));
+});
+GridComponent.displayName = 'Grid';
+GridComponent.propTypes = {
+  columns: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  gutters: PropTypes__default.default.oneOf(SPACE),
+  debug: PropTypes__default.default.bool
+};
+GridComponent.defaultProps = {
+  columns: 12,
+  gutters: 'md'
+};
+const Grid = GridComponent;
+Grid.Row = Row;
+Grid.Col = Col;
+
 const PaneProviderContext = React.createContext({});
 const usePaneProviderContextData = providerId => {
   const context = React.useContext(PaneProviderContext);

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import React, { createContext, useContext, useMemo, useState, useCallback, forwa
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
 import { math, stripUnit } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument, useText } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument, useText } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import useResizeObserver from 'use-resize-observer';
@@ -43,7 +43,7 @@ const ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 const COMPONENT_ID$6 = 'grid.col';
 const colorStyles$4 = props => {
-  const backgroundColor = getColor('primaryHue', 600, props.theme, 0.1);
+  const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
@@ -93,7 +93,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -105,7 +105,7 @@ StyledCol.defaultProps = {
 
 const COMPONENT_ID$5 = 'grid.grid';
 const colorStyles$3 = props => {
-  const borderColor = getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
+  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);
 };
@@ -115,7 +115,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -127,7 +127,7 @@ StyledGrid.defaultProps = {
 
 const COMPONENT_ID$4 = 'grid.row';
 const colorStyles$2 = props => {
-  const borderColor = getColor(props.theme.palette.mint, 600, props.theme, 0.5);
+  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);
 };
@@ -157,7 +157,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -170,7 +170,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -182,7 +182,7 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -193,9 +193,9 @@ StyledPaneContent.defaultProps = {
 
 const COMPONENT_ID$1 = 'pane.splitter';
 const colorStyles$1 = props => {
-  const color = getColor('neutralHue', 300, props.theme);
-  const hoverColor = getColor('primaryHue', 600, props.theme);
-  const activeColor = getColor('primaryHue', 800, props.theme);
+  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, props.isHovered && hoverColor, focusStyles({
     theme: props.theme,
     hue: hoverColor,
@@ -268,7 +268,7 @@ const sizeStyles$1 = props => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -296,7 +296,7 @@ const colorStyles = _ref => {
   let {
     theme
   } = _ref;
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor('chromeHue', 600, theme, 0.15));
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
   return css(["box-shadow:", ";", ""], boxShadow, focusStyles({
     theme,
     boxShadow
@@ -333,7 +333,7 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -404,35 +404,6 @@ Col.propTypes = {
   orderXl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
-const Grid = 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, _extends({
-    debug: debug,
-    ref: ref
-  }, props)));
-});
-Grid.displayName = 'Grid';
-Grid.propTypes = {
-  columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  gutters: PropTypes.oneOf(SPACE),
-  debug: PropTypes.bool
-};
-Grid.defaultProps = {
-  columns: 12,
-  gutters: 'md'
-};
-
 const Row = React.forwardRef((_ref, ref) => {
   let {
     wrap,
@@ -471,6 +442,38 @@ Row.propTypes = {
   wrapXl: PropTypes.oneOf(WRAP)
 };
 
+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, _extends({
+    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;
+
 const PaneProviderContext = createContext({});
 const usePaneProviderContextData = providerId => {
   const context = useContext(PaneProviderContext);

package/dist/typings/elements/Col.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IColProps } from '../types';
 /**
+ * @deprecated use `Grid.Col` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Col: React.ForwardRefExoticComponent<IColProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Grid.d.ts

@@ -6,7 +6,13 @@
  */
 import React from 'react';
 import { IGridProps } from '../types';
+import { Row } from './Row';
+import { Col } from './Col';
+export declare const GridComponent: React.ForwardRefExoticComponent<IGridProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Grid: React.ForwardRefExoticComponent<IGridProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Grid: React.ForwardRefExoticComponent<IGridProps & React.RefAttributes<HTMLDivElement>> & {
+    Row: typeof Row;
+    Col: typeof Col;
+};

package/dist/typings/elements/Row.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IRowProps } from '../types';
 /**
+ * @deprecated use `Grid.Row` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Row: React.ForwardRefExoticComponent<IRowProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.0.0-next.4",
+  "version": "9.0.0-next.5",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.3",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.4",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.4",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.5",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.5",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
@@ -34,10 +34,10 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.4"
+    "@zendeskgarden/react-theming": "^9.0.0-next.5"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }