@chakra-ui/layout - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGELOG.md

 # Change Log
 
+## 1.2.0
+
+### Minor Changes
+
+- [`df66d58e`](https://github.com/chakra-ui/chakra-ui/commit/df66d58e163c285f33649cfd2a480b810e9599a2)
+  [#3137](https://github.com/chakra-ui/chakra-ui/pull/3137) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Add `AbsoluteCenter`
+  component to help manage centering of an element relative to its parent
+  dimensions.
+
+  It requires a parent that has `position: relative` to work correctly.
+
+  Here's how it works:
+
+  ```jsx
+  <Box position="relative" w="600px" h="400px">
+    <img src="some-image.png" />
+    {/** This will be centered relative to `Box` */}
+    <AbsoluteCenter>
+      <PlayButton />
+    </AbsoluteCenter>
+  </Box>
+  ```
+
 ## 1.1.3
@@ -4,0 +28,0 @@

dist/cjs/center.js

 "use strict";
 
 exports.__esModule = true;
-exports.Center = void 0;
+exports.AbsoluteCenter = exports.Center = void 0;
 
@@ -10,2 +10,12 @@ var _system = require("@chakra-ui/system");
 
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+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; }
+
 /**
@@ -29,2 +39,39 @@ * React component used to horizontally and vertically center its child.
 }
+
+var centerStyles = {
+  horizontal: {
+    insetStart: "50%",
+    transform: "translateX(-50%)"
+  },
+  vertical: {
+    top: "50%",
+    transform: "translateY(-50%)"
+  },
+  both: {
+    insetStart: "50%",
+    top: "50%",
+    transform: "translateY(-50%, -50%)"
+  }
+};
+/**
+ * React component used to horizontally and vertically center an element
+ * relative to its parent dimensions.
+ *
+ * It uses the `position: absolute` strategy.
+ *
+ * @see Docs https://chakra-ui.com/docs/layout/center
+ * @see WebDev https://web.dev/centering-in-css/#5.-pop-and-plop
+ */
+
+var AbsoluteCenter = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
+  var _props$axis = props.axis,
+      axis = _props$axis === void 0 ? "both" : _props$axis,
+      rest = _objectWithoutPropertiesLoose(props, ["axis"]);
+
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    ref: ref,
+    __css: centerStyles[axis]
+  }, rest));
+});
+exports.AbsoluteCenter = AbsoluteCenter;
 //# sourceMappingURL=center.js.map

dist/esm/center.js

@@ -1,3 +0,8 @@
-import { chakra } from "@chakra-ui/system";
+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); }
+
+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 { __DEV__ } from "@chakra-ui/utils";
+import * as React from "react";
 
@@ -21,2 +26,39 @@ /**
 }
+
+var centerStyles = {
+  horizontal: {
+    insetStart: "50%",
+    transform: "translateX(-50%)"
+  },
+  vertical: {
+    top: "50%",
+    transform: "translateY(-50%)"
+  },
+  both: {
+    insetStart: "50%",
+    top: "50%",
+    transform: "translateY(-50%, -50%)"
+  }
+};
+/**
+ * React component used to horizontally and vertically center an element
+ * relative to its parent dimensions.
+ *
+ * It uses the `position: absolute` strategy.
+ *
+ * @see Docs https://chakra-ui.com/docs/layout/center
+ * @see WebDev https://web.dev/centering-in-css/#5.-pop-and-plop
+ */
+
+export var AbsoluteCenter = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+    axis = "both"
+  } = props,
+      rest = _objectWithoutPropertiesLoose(props, ["axis"]);
+
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+    ref: ref,
+    __css: centerStyles[axis]
+  }, rest));
+});
 //# sourceMappingURL=center.js.map

dist/types/center.d.ts

@@ -11,1 +11,15 @@ import { HTMLChakraProps } from "@chakra-ui/system";
 export declare const Center: import("@chakra-ui/system").ChakraComponent<"div", {}>;
+interface AbsoluteCenterProps extends HTMLChakraProps<"div"> {
+    axis?: "horizontal" | "vertical" | "both";
+}
+/**
+ * React component used to horizontally and vertically center an element
+ * relative to its parent dimensions.
+ *
+ * It uses the `position: absolute` strategy.
+ *
+ * @see Docs https://chakra-ui.com/docs/layout/center
+ * @see WebDev https://web.dev/centering-in-css/#5.-pop-and-plop
+ */
+export declare const AbsoluteCenter: import("@chakra-ui/system").ComponentWithAs<"div", AbsoluteCenterProps>;
+export {};

package.json

 {
   "name": "@chakra-ui/layout",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Chakra UI layout components that give you massive speed",
@@ -65,3 +65,3 @@ "keywords": [
   "devDependencies": {
-    "@chakra-ui/system": "1.1.5",
+    "@chakra-ui/system": "1.1.7",
     "react": "^17.0.1"
@@ -68,0 +68,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

287960

3.21%

Lines of code

3025

3.28%

No dependency changes