@chakra-ui/layout - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 1.0.1
 
-# 1.0.0 (2020-11-13)
+### Patch Changes
 
-**Note:** Version bump only for package @chakra-ui/layout
+- [`b3594802`](https://github.com/chakra-ui/chakra-ui/commit/b3594802714115c762013174badd5b838217be6f)
+  [#2522](https://github.com/chakra-ui/chakra-ui/pull/2522) Thanks
+  [@Qrymy](https://github.com/Qrymy)! - ## Stack
 
+  - Fix Stack divider keys issue
+  - Fix issue where stack with divider doesn't respond to both responsive
+    spacing and responsive direction
 
+  This wasn't working in v1 but now works 🎉
 
+  ```jsx
+  <Stack
+    spacing={["10px", "60px"]}
+    divider={<StackDivider borderColor="gray.200" />}
+    direction={["column", "row"]}
+  >
+    <Box bgColor="red.500">First</Box>
+    <Box bgColor="blue.500">Second</Box>
+    <Box bgColor="yellow.500">Third</Box>
+  </Stack>
+  ```
 
+  - Make it possible the regular `Divider` component within `Stack` by extending
+    the `__css` internal style prop
 
+- Updated dependencies
+  [[`5c482483`](https://github.com/chakra-ui/chakra-ui/commit/5c482483ce24fc798540c9792a15e06772eae213)]:
+  - @chakra-ui/utils@1.0.1
+  - @chakra-ui/icon@1.0.1
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.0.0 (2020-11-13)
+
+**Note:** Version bump only for package @chakra-ui/layout
+
 # Change Log
@@ -15,0 +45,0 @@

dist/cjs/divider.js

@@ -30,3 +30,4 @@ "use strict";
       orientation = _props$orientation === void 0 ? "horizontal" : _props$orientation,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "orientation"]);
+      __css = props.__css,
+      rest = _objectWithoutPropertiesLoose(props, ["className", "orientation", "__css"]);
 
@@ -53,3 +54,3 @@ var styles = {
       borderStyle: "solid"
-    }, styles[orientation]),
+    }, styles[orientation], __css),
     className: (0, _utils.cx)("chakra-divider", props.className)
@@ -56,0 +57,0 @@ }));

dist/cjs/stack.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _stack = require("./stack.utils");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -25,3 +27,3 @@
   }, props, {
-    __css: _extends({}, props.__css, {
+    __css: _extends({}, props["__css"], {
       borderWidth: 0,
@@ -53,7 +55,2 @@ alignSelf: "stretch",
 /**
- * If we ever run into SSR issues with this, check this post to find a fix for it:
- * @see https://medium.com/@emmenko/patching-lobotomized-owl-selector-for-emotion-ssr-5a582a3c424c
- */
-var selector = "& > *:not(style) ~ *:not(style)";
-/**
  * Stacks help you easily create flexible and automatically distributed layouts
@@ -69,5 +66,4 @@ *
  */
-
 var Stack = /*#__PURE__*/(0, _system.forwardRef)(function Stack(props, ref) {
-  var _ref2;
+  var _ref;
 
@@ -89,50 +85,13 @@ var isInline = props.isInline,
   var styles = React.useMemo(function () {
-    var _ref;
-
-    var directionStyles = {
-      column: {
-        mt: spacing,
-        ml: 0
-      },
-      row: {
-        ml: spacing,
-        mt: 0
-      },
-      "column-reverse": {
-        mb: spacing,
-        mr: 0
-      },
-      "row-reverse": {
-        mr: spacing,
-        mb: 0
-      }
-    };
-    return _ref = {
-      flexDirection: direction
-    }, _ref[selector] = (0, _utils.mapResponsive)(direction, function (value) {
-      return directionStyles[value];
-    }), _ref;
+    return (0, _stack.getStackStyles)({
+      direction: direction,
+      spacing: spacing
+    });
   }, [direction, spacing]);
-  /**
-   * Divider Styles
-   */
-
-  var marginX = (0, _utils.mapResponsive)(direction, function (value) {
-    return value.includes("row") ? spacing : 0;
-  });
-  var marginY = (0, _utils.mapResponsive)(direction, function (value) {
-    return value.includes("row") ? 0 : spacing;
-  });
-  var borderLeftWidth = (0, _utils.mapResponsive)(direction, function (value) {
-    return value.includes("row") ? "1px" : 0;
-  });
-  var borderBottomWidth = (0, _utils.mapResponsive)(direction, function (value) {
-    return value.includes("row") ? 0 : "1px";
-  });
-  var dividerStyles = {
-    marginX: marginX,
-    marginY: marginY,
-    borderLeftWidth: borderLeftWidth,
-    borderBottomWidth: borderBottomWidth
-  };
+  var dividerStyle = React.useMemo(function () {
+    return (0, _stack.getDividerStyles)({
+      spacing: spacing,
+      direction: direction
+    });
+  }, [spacing, direction]);
   var hasDivider = !!divider;
@@ -150,3 +109,5 @@ var shouldUseChildren = !shouldWrapChildren && !hasDivider;
     if (!hasDivider) return _child;
-    var clonedDivider = /*#__PURE__*/React.cloneElement(divider, dividerStyles);
+    var clonedDivider = /*#__PURE__*/React.cloneElement(divider, {
+      __css: dividerStyle
+    });
 
@@ -157,3 +118,3 @@ var _divider = isLast ? null : clonedDivider;
       key: index
-    }, [_child, _divider]);
+    }, _child, _divider);
   });
@@ -171,3 +132,3 @@
     className: _className,
-    __css: hasDivider ? {} : (_ref2 = {}, _ref2[selector] = styles[selector], _ref2)
+    __css: hasDivider ? {} : (_ref = {}, _ref[_stack.selector] = styles[_stack.selector], _ref)
   }, rest), clones);
@@ -174,0 +135,0 @@ });

dist/esm/divider.js

@@ -17,5 +17,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   var {
-    orientation = "horizontal"
+    orientation = "horizontal",
+    __css
   } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "orientation"]);
+      rest = _objectWithoutPropertiesLoose(props, ["className", "orientation", "__css"]);
 
@@ -42,3 +43,3 @@ var styles = {
       borderStyle: "solid"
-    }, styles[orientation]),
+    }, styles[orientation], __css),
     className: cx("chakra-divider", props.className)
@@ -45,0 +46,0 @@ }));

dist/esm/stack.js

@@ -6,4 +6,5 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { chakra, forwardRef } from "@chakra-ui/system";
-import { cx, getValidChildren, mapResponsive, __DEV__ } from "@chakra-ui/utils";
+import { cx, getValidChildren, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
+import { getDividerStyles, getStackStyles, selector } from "./stack.utils";
 export var StackDivider = props => {
@@ -13,3 +14,3 @@ return /*#__PURE__*/React.createElement(chakra.div, _extends({
   }, props, {
-    __css: _extends({}, props.__css, {
+    __css: _extends({}, props["__css"], {
       borderWidth: 0,
@@ -34,7 +35,2 @@ alignSelf: "stretch",
 /**
- * If we ever run into SSR issues with this, check this post to find a fix for it:
- * @see https://medium.com/@emmenko/patching-lobotomized-owl-selector-for-emotion-ssr-5a582a3c424c
- */
-var selector = "& > *:not(style) ~ *:not(style)";
-/**
  * Stacks help you easily create flexible and automatically distributed layouts
@@ -50,3 +46,2 @@ *
  */
-
 export var Stack = /*#__PURE__*/forwardRef(function Stack(props, ref) {
@@ -68,40 +63,10 @@ var {
   var direction = isInline ? "row" : directionProp != null ? directionProp : "column";
-  var styles = React.useMemo(() => {
-    var directionStyles = {
-      column: {
-        mt: spacing,
-        ml: 0
-      },
-      row: {
-        ml: spacing,
-        mt: 0
-      },
-      "column-reverse": {
-        mb: spacing,
-        mr: 0
-      },
-      "row-reverse": {
-        mr: spacing,
-        mb: 0
-      }
-    };
-    return {
-      flexDirection: direction,
-      [selector]: mapResponsive(direction, value => directionStyles[value])
-    };
-  }, [direction, spacing]);
-  /**
-   * Divider Styles
-   */
-
-  var marginX = mapResponsive(direction, value => value.includes("row") ? spacing : 0);
-  var marginY = mapResponsive(direction, value => value.includes("row") ? 0 : spacing);
-  var borderLeftWidth = mapResponsive(direction, value => value.includes("row") ? "1px" : 0);
-  var borderBottomWidth = mapResponsive(direction, value => value.includes("row") ? 0 : "1px");
-  var dividerStyles = {
-    marginX,
-    marginY,
-    borderLeftWidth,
-    borderBottomWidth
-  };
+  var styles = React.useMemo(() => getStackStyles({
+    direction,
+    spacing
+  }), [direction, spacing]);
+  var dividerStyle = React.useMemo(() => getDividerStyles({
+    spacing,
+    direction
+  }), [spacing, direction]);
   var hasDivider = !!divider;
@@ -119,3 +84,5 @@ var shouldUseChildren = !shouldWrapChildren && !hasDivider;
     if (!hasDivider) return _child;
-    var clonedDivider = /*#__PURE__*/React.cloneElement(divider, dividerStyles);
+    var clonedDivider = /*#__PURE__*/React.cloneElement(divider, {
+      __css: dividerStyle
+    });
 
@@ -126,3 +93,3 @@ var _divider = isLast ? null : clonedDivider;
       key: index
-    }, [_child, _divider]);
+    }, _child, _divider);
   });
@@ -129,0 +96,0 @@

dist/types/stack.d.ts

@@ -1,4 +0,5 @@
-import { chakra, ChakraComponent, HTMLChakraProps, PropsOf, ResponsiveValue, SystemProps } from "@chakra-ui/system";
+import { chakra, ChakraComponent, HTMLChakraProps, PropsOf, SystemProps } from "@chakra-ui/system";
 import * as React from "react";
-export declare type StackDirection = ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+import type { StackDirection } from "./stack.utils";
+export type { StackDirection };
 interface StackOptions {
@@ -70,2 +71,1 @@ /**
 export declare const VStack: import("@chakra-ui/system").ComponentWithAs<"div", StackProps>;
-export {};

package.json

 {
   "name": "@chakra-ui/layout",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Chakra UI layout components that give you massive speed",
@@ -61,13 +61,13 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/icon": "1.0.0",
-    "@chakra-ui/utils": "1.0.0"
+    "@chakra-ui/icon": "1.0.1",
+    "@chakra-ui/utils": "1.0.1"
   },
   "devDependencies": {
-    "@chakra-ui/system": "1.0.0"
+    "@chakra-ui/system": "1.0.1",
+    "react": "^17.0.1"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">=1.0.0-rc.5",
+    "@chakra-ui/system": ">=1.0.0",
     "react": "16.x || 17.x"
-  },
-  "gitHead": "c98ca366cec7151fe7ea4e0b6f893088797c5398"
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

276449

increased by2%

Number of package files

108

increased by3.85%

Lines of code

2946

increased by3.4%

Worsened metrics

Dev dependency count

2

increased by100%

Dependency changes

• + Added@chakra-ui/icon@1.0.1(transitive)

• + Added@chakra-ui/utils@1.0.1(transitive)

• - Removed@chakra-ui/icon@1.0.0(transitive)

• - Removed@chakra-ui/utils@1.0.0(transitive)

• Updated@chakra-ui/icon@1.0.1

• Updated@chakra-ui/utils@1.0.1