@chakra-ui/layout - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

 # Change Log
 
+## 1.1.0
+
+### Minor Changes
+
+- [`2192be3d`](https://github.com/chakra-ui/chakra-ui/commit/2192be3db77504addffc89cbfef62fb9e884fa5d)
+  [#2635](https://github.com/chakra-ui/chakra-ui/pull/2635) Thanks
+  [@jmiazga](https://github.com/jmiazga)! - feat: added theming to List,
+  ListItem, and ListIcon
+
+* [`c696345a`](https://github.com/chakra-ui/chakra-ui/commit/c696345a711338a23542a7b1911a33927a9ba5f1)
+  [#2602](https://github.com/chakra-ui/chakra-ui/pull/2602) Thanks
+  [@Zyclotrop-j](https://github.com/Zyclotrop-j)! - feat(container): add ability
+  to style container component with theme api
+
+- [`9fdc61d8`](https://github.com/chakra-ui/chakra-ui/commit/9fdc61d8801f6d76783b5c9f068525d4dfc28b20)
+  [#2478](https://github.com/chakra-ui/chakra-ui/pull/2478) Thanks
+  [@Zyclotrop-j](https://github.com/Zyclotrop-j)! - feat(divider): add ability
+  to style divider component with theme api
+
+### Patch Changes
+
+- [`6b527414`](https://github.com/chakra-ui/chakra-ui/commit/6b52741456f71ba4ec8cfe3e6307796d195adf5b)
+  [#2589](https://github.com/chakra-ui/chakra-ui/pull/2589) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - fix prop type interface
+  for stack
+
 ## 1.0.1
@@ -4,0 +30,0 @@

dist/cjs/container.js

@@ -29,33 +29,8 @@ "use strict";
 var Container = /*#__PURE__*/(0, _system.forwardRef)(function Container(props, ref) {
-  var maxWidth = props.maxWidth,
-      width = props.width,
-      minWidth = props.minWidth,
-      w = props.w,
-      minW = props.minW,
-      maxW = props.maxW,
-      className = props.className,
-      centerContent = props.centerContent,
-      rest = _objectWithoutPropertiesLoose(props, ["maxWidth", "width", "minWidth", "w", "minW", "maxW", "className", "centerContent"]);
+  var _omitThemingProps = (0, _system.omitThemingProps)(props),
+      className = _omitThemingProps.className,
+      centerContent = _omitThemingProps.centerContent,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["className", "centerContent"]);
 
-  var theme = (0, _system.useTheme)();
-  var widthProps = transform(theme, {
-    maxW: maxW,
-    maxWidth: maxWidth,
-    width: width,
-    w: w,
-    minWidth: minWidth,
-    minW: minW
-  });
-
-  var styles = _extends({
-    w: "100%",
-    mx: "auto",
-    maxW: "60ch",
-    px: "1rem"
-  }, centerContent && {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  }, widthProps);
-
+  var styles = (0, _system.useStyleConfig)("Container", props);
   return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
@@ -65,3 +40,7 @@ ref: ref,
   }, rest, {
-    __css: styles
+    __css: _extends({}, styles, centerContent && {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    })
   }));
@@ -74,13 +53,2 @@ });
 }
-
-function transform(theme, props) {
-  var result = {};
-  Object.keys(props).forEach(function (prop) {
-    var propValue = props[prop];
-    result[prop] = (0, _utils.mapResponsive)(propValue, function (value) {
-      return (0, _utils.memoizedGet)(theme, "sizes.container." + value, value);
-    });
-  });
-  return (0, _utils.filterUndefined)(result);
-}
 //# sourceMappingURL=container.js.map

dist/cjs/divider.js

@@ -27,15 +27,26 @@ "use strict";
 var Divider = /*#__PURE__*/(0, _system.forwardRef)(function Divider(props, ref) {
-  var className = props.className,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? "horizontal" : _props$orientation,
-      __css = props.__css,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "orientation", "__css"]);
+  var _useStyleConfig = (0, _system.useStyleConfig)("Divider", props),
+      borderLeftWidth = _useStyleConfig.borderLeftWidth,
+      borderBottomWidth = _useStyleConfig.borderBottomWidth,
+      borderTopWidth = _useStyleConfig.borderTopWidth,
+      borderRightWidth = _useStyleConfig.borderRightWidth,
+      borderWidth = _useStyleConfig.borderWidth,
+      borderStyle = _useStyleConfig.borderStyle,
+      borderColor = _useStyleConfig.borderColor,
+      styles = _objectWithoutPropertiesLoose(_useStyleConfig, ["borderLeftWidth", "borderBottomWidth", "borderTopWidth", "borderRightWidth", "borderWidth", "borderStyle", "borderColor"]);
 
-  var styles = {
+  var _omitThemingProps = (0, _system.omitThemingProps)(props),
+      className = _omitThemingProps.className,
+      _omitThemingProps$ori = _omitThemingProps.orientation,
+      orientation = _omitThemingProps$ori === void 0 ? "horizontal" : _omitThemingProps$ori,
+      __css = _omitThemingProps.__css,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["className", "orientation", "__css"]);
+
+  var dividerStyles = {
     vertical: {
-      borderLeftWidth: "1px",
+      borderLeftWidth: borderLeftWidth || borderRightWidth || borderWidth || "1px",
       height: "100%"
     },
     horizontal: {
-      borderBottomWidth: "1px",
+      borderBottomWidth: borderBottomWidth || borderTopWidth || borderWidth || "1px",
       width: "100%"
@@ -49,9 +60,8 @@ }
   }, rest, {
-    __css: _extends({
+    __css: _extends({}, styles, {
       border: "0",
-      opacity: 0.6,
-      borderColor: "inherit",
-      borderStyle: "solid"
-    }, styles[orientation], __css),
-    className: (0, _utils.cx)("chakra-divider", props.className)
+      borderColor: borderColor,
+      borderStyle: borderStyle
+    }, dividerStyles[orientation], __css),
+    className: (0, _utils.cx)("chakra-divider", className)
   }));
@@ -58,0 +68,0 @@ });

dist/cjs/list.js

@@ -30,12 +30,20 @@ "use strict";
 
-  var children = props.children,
-      _props$styleType = props.styleType,
-      styleType = _props$styleType === void 0 ? "none" : _props$styleType,
-      stylePosition = props.stylePosition,
-      spacing = props.spacing,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "styleType", "stylePosition", "spacing"]);
+  var styles = (0, _system.useMultiStyleConfig)("List", props);
 
+  var _omitThemingProps = (0, _system.omitThemingProps)(props),
+      children = _omitThemingProps.children,
+      _omitThemingProps$sty = _omitThemingProps.styleType,
+      styleType = _omitThemingProps$sty === void 0 ? "none" : _omitThemingProps$sty,
+      stylePosition = _omitThemingProps.stylePosition,
+      spacing = _omitThemingProps.spacing,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "styleType", "stylePosition", "spacing"]);
+
   var validChildren = (0, _utils.getValidChildren)(children);
   var selector = "& > *:not(style) ~ *:not(style)";
-  return /*#__PURE__*/React.createElement(_system.chakra.ul, _extends({
+  var spacingStyle = spacing ? (_ref = {}, _ref[selector] = {
+    mt: spacing
+  }, _ref) : {};
+  return /*#__PURE__*/React.createElement(_system.StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React.createElement(_system.chakra.ul, _extends({
     ref: ref,
@@ -50,6 +58,4 @@ listStyleType: styleType,
     role: "list",
-    __css: spacing ? (_ref = {}, _ref[selector] = {
-      mt: spacing
-    }, _ref) : {}
-  }, rest), validChildren);
+    __css: _extends({}, styles.container, spacingStyle)
+  }, rest), validChildren));
 });
@@ -101,3 +107,9 @@ exports.List = List;
  */
-var ListItem = (0, _system.chakra)("li");
+var ListItem = function ListItem(props) {
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.li, _extends({}, props, {
+    __css: styles.item
+  }));
+};
+
 exports.ListItem = ListItem;
@@ -116,9 +128,9 @@
 var ListIcon = /*#__PURE__*/(0, _system.forwardRef)(function ListIcon(props, ref) {
+  var styles = (0, _system.useStyles)();
   return /*#__PURE__*/React.createElement(_icon.Icon, _extends({
     ref: ref,
-    role: "presentation",
-    marginRight: "0.5rem",
-    display: "inline",
-    verticalAlign: "text-bottom"
-  }, props));
+    role: "presentation"
+  }, props, {
+    __css: styles.icon
+  }));
 });
@@ -125,0 +137,0 @@ exports.ListIcon = ListIcon;

dist/esm/container.js

@@ -5,4 +5,4 @@ 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); }
 
-import { chakra, forwardRef, useTheme } from "@chakra-ui/system";
-import { cx, filterUndefined, mapResponsive, memoizedGet as get, __DEV__ } from "@chakra-ui/utils";
+import { chakra, forwardRef, omitThemingProps, useStyleConfig } from "@chakra-ui/system";
+import { cx, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
@@ -19,35 +19,10 @@
 export var Container = /*#__PURE__*/forwardRef(function Container(props, ref) {
-  var {
-    maxWidth,
-    width,
-    minWidth,
-    w,
-    minW,
-    maxW,
+  var _omitThemingProps = omitThemingProps(props),
+      {
     className,
     centerContent
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["maxWidth", "width", "minWidth", "w", "minW", "maxW", "className", "centerContent"]);
+  } = _omitThemingProps,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["className", "centerContent"]);
 
-  var theme = useTheme();
-  var widthProps = transform(theme, {
-    maxW,
-    maxWidth,
-    width,
-    w,
-    minWidth,
-    minW
-  });
-
-  var styles = _extends({
-    w: "100%",
-    mx: "auto",
-    maxW: "60ch",
-    px: "1rem"
-  }, centerContent && {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  }, widthProps);
-
+  var styles = useStyleConfig("Container", props);
   return /*#__PURE__*/React.createElement(chakra.div, _extends({
@@ -57,3 +32,7 @@ ref: ref,
   }, rest, {
-    __css: styles
+    __css: _extends({}, styles, centerContent && {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    })
   }));
@@ -65,11 +44,2 @@ });
 }
-
-function transform(theme, props) {
-  var result = {};
-  Object.keys(props).forEach(prop => {
-    var propValue = props[prop];
-    result[prop] = mapResponsive(propValue, value => get(theme, "sizes.container." + value, value));
-  });
-  return filterUndefined(result);
-}
 //# sourceMappingURL=container.js.map

dist/esm/divider.js

@@ -5,3 +5,3 @@ 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); }
 
-import { chakra, forwardRef } from "@chakra-ui/system";
+import { chakra, forwardRef, omitThemingProps, useStyleConfig } from "@chakra-ui/system";
 import { cx, __DEV__ } from "@chakra-ui/utils";
@@ -17,15 +17,29 @@ import * as React from "react";
 export var Divider = /*#__PURE__*/forwardRef(function Divider(props, ref) {
-  var {
+  var _useStyleConfig = useStyleConfig("Divider", props),
+      {
+    borderLeftWidth,
+    borderBottomWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderWidth,
+    borderStyle,
+    borderColor
+  } = _useStyleConfig,
+      styles = _objectWithoutPropertiesLoose(_useStyleConfig, ["borderLeftWidth", "borderBottomWidth", "borderTopWidth", "borderRightWidth", "borderWidth", "borderStyle", "borderColor"]);
+
+  var _omitThemingProps = omitThemingProps(props),
+      {
+    className,
     orientation = "horizontal",
     __css
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["className", "orientation", "__css"]);
+  } = _omitThemingProps,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["className", "orientation", "__css"]);
 
-  var styles = {
+  var dividerStyles = {
     vertical: {
-      borderLeftWidth: "1px",
+      borderLeftWidth: borderLeftWidth || borderRightWidth || borderWidth || "1px",
       height: "100%"
     },
     horizontal: {
-      borderBottomWidth: "1px",
+      borderBottomWidth: borderBottomWidth || borderTopWidth || borderWidth || "1px",
       width: "100%"
@@ -39,9 +53,8 @@ }
   }, rest, {
-    __css: _extends({
+    __css: _extends({}, styles, {
       border: "0",
-      opacity: 0.6,
-      borderColor: "inherit",
-      borderStyle: "solid"
-    }, styles[orientation], __css),
-    className: cx("chakra-divider", props.className)
+      borderColor,
+      borderStyle
+    }, dividerStyles[orientation], __css),
+    className: cx("chakra-divider", className)
   }));
@@ -48,0 +61,0 @@ });

dist/esm/list.js

@@ -6,3 +6,3 @@ 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); }
 import { Icon } from "@chakra-ui/icon";
-import { chakra, forwardRef } from "@chakra-ui/system";
+import { chakra, forwardRef, omitThemingProps, useMultiStyleConfig, StylesProvider, useStyles } from "@chakra-ui/system";
 import { getValidChildren, __DEV__ } from "@chakra-ui/utils";
@@ -17,3 +17,6 @@ import * as React from "react";
 export var List = /*#__PURE__*/forwardRef(function List(props, ref) {
-  var {
+  var styles = useMultiStyleConfig("List", props);
+
+  var _omitThemingProps = omitThemingProps(props),
+      {
     children,
@@ -23,8 +26,15 @@ styleType = "none",
     spacing
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "styleType", "stylePosition", "spacing"]);
+  } = _omitThemingProps,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "styleType", "stylePosition", "spacing"]);
 
   var validChildren = getValidChildren(children);
   var selector = "& > *:not(style) ~ *:not(style)";
-  return /*#__PURE__*/React.createElement(chakra.ul, _extends({
+  var spacingStyle = spacing ? {
+    [selector]: {
+      mt: spacing
+    }
+  } : {};
+  return /*#__PURE__*/React.createElement(StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React.createElement(chakra.ul, _extends({
     ref: ref,
@@ -39,8 +49,4 @@ listStyleType: styleType,
     role: "list",
-    __css: spacing ? {
-      [selector]: {
-        mt: spacing
-      }
-    } : {}
-  }, rest), validChildren);
+    __css: _extends({}, styles.container, spacingStyle)
+  }, rest), validChildren));
 });
@@ -87,3 +93,8 @@
  */
-export var ListItem = chakra("li");
+export var ListItem = props => {
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.li, _extends({}, props, {
+    __css: styles.item
+  }));
+};
 
@@ -101,9 +112,9 @@ if (__DEV__) {
 export var ListIcon = /*#__PURE__*/forwardRef(function ListIcon(props, ref) {
+  var styles = useStyles();
   return /*#__PURE__*/React.createElement(Icon, _extends({
     ref: ref,
-    role: "presentation",
-    marginRight: "0.5rem",
-    display: "inline",
-    verticalAlign: "text-bottom"
-  }, props));
+    role: "presentation"
+  }, props, {
+    __css: styles.icon
+  }));
 });
@@ -110,0 +121,0 @@

dist/types/container.d.ts

@@ -1,3 +0,3 @@
-import { HTMLChakraProps } from "@chakra-ui/system";
-export interface ContainerProps extends HTMLChakraProps<"div"> {
+import { ThemingProps, HTMLChakraProps } from "@chakra-ui/system";
+export interface ContainerProps extends HTMLChakraProps<"div">, ThemingProps {
     /**
@@ -4,0 +4,0 @@ * If `true`, container will center its children

dist/types/divider.d.ts

@@ -1,2 +0,2 @@
-import { HTMLChakraProps } from "@chakra-ui/system";
+import { ThemingProps, HTMLChakraProps } from "@chakra-ui/system";
 /**
@@ -9,4 +9,4 @@ * Layout component used to visually separate content in a list or group.
 export declare const Divider: import("@chakra-ui/system").ComponentWithAs<"hr", DividerProps>;
-export interface DividerProps extends HTMLChakraProps<"div"> {
+export interface DividerProps extends HTMLChakraProps<"div">, ThemingProps {
     orientation?: "horizontal" | "vertical";
 }

dist/types/list.d.ts

 import { IconProps } from "@chakra-ui/icon";
-import { SystemProps, PropsOf, HTMLChakraProps } from "@chakra-ui/system";
+import { SystemProps, HTMLChakraProps, ThemingProps } from "@chakra-ui/system";
+import * as React from "react";
 interface ListOptions {
@@ -20,3 +21,3 @@ /**
 }
-export interface ListProps extends HTMLChakraProps<"ul">, ListOptions {
+export interface ListProps extends HTMLChakraProps<"ul">, ThemingProps, ListOptions {
 }
@@ -31,3 +32,3 @@ /**
 export declare const UnorderedList: import("@chakra-ui/system").ComponentWithAs<"ul", ListProps>;
-export interface ListItemProps extends PropsOf<typeof ListItem> {
+export interface ListItemProps extends HTMLChakraProps<"li"> {
 }
@@ -39,3 +40,3 @@ /**
  */
-export declare const ListItem: import("@chakra-ui/system").ChakraComponent<"li", {}>;
+export declare const ListItem: React.FC<ListItemProps>;
 /**
@@ -42,0 +43,0 @@ * ListIcon

dist/types/stack.d.ts

@@ -1,2 +0,2 @@
-import { chakra, ChakraComponent, HTMLChakraProps, PropsOf, SystemProps } from "@chakra-ui/system";
+import { ChakraComponent, HTMLChakraProps, SystemProps } from "@chakra-ui/system";
 import * as React from "react";
@@ -49,3 +49,3 @@ import type { StackDirection } from "./stack.utils";
 export declare const StackItem: ChakraComponent<"div">;
-export interface StackProps extends PropsOf<typeof chakra.div>, StackOptions {
+export interface StackProps extends HTMLChakraProps<"div">, StackOptions {
 }
@@ -52,0 +52,0 @@ /**

package.json

 {
   "name": "@chakra-ui/layout",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Chakra UI layout components that give you massive speed",
@@ -5,0 +5,0 @@ "keywords": [

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

278638

increased by0.79%

Worsened metrics

Lines of code

2932

decreased by-0.48%

No dependency changes