@chakra-ui/progress - npm Package Compare versions

Comparing version 1.0.0-next.6 to 1.0.0-next.7

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [1.0.0-next.7](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/progress@1.0.0-next.6...@chakra-ui/progress@1.0.0-next.7) (2020-07-26)
+
+**Note:** Version bump only for package @chakra-ui/progress
+
+# 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.0-next.6](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/progress@1.0.0-next.5...@chakra-ui/progress@1.0.0-next.6) (2020-07-15)
@@ -8,0 +17,0 @@

dist/cjs/circular-progress.js

@@ -23,7 +23,2 @@ "use strict";
 
-/**
- * Circle
- *
- * SVG circle element visually indicating the shape of the component
- */
 var Circle = function Circle(props) {
@@ -42,7 +37,2 @@ return /*#__PURE__*/React.createElement(_system.chakra.circle, _extends({
 
-/**
- * Shape
- *
- * SVG wrapper element for the component's circular shape
- */
 function Shape(props) {
@@ -68,4 +58,3 @@ var size = props.size,
 /**
- * React component used to indicate the progress of an activity.
- *
+ * CircularProgress is used to indicate the progress of an activity.
  * It's built using `svg` and `circle` components with support for
@@ -75,3 +64,2 @@ * theming and `indeterminate` state
  * @see Docs https://chakra-ui.com/components/progress
- *
  * @todo add theming support for circular progress
@@ -120,11 +108,12 @@ */
   };
+  var rootStyles = {
+    display: "inline-block",
+    position: "relative",
+    verticalAlign: "middle",
+    fontSize: size
+  };
   return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
     className: "chakra-progress"
   }, progress.bind, rest, {
-    __css: {
-      display: "inline-block",
-      position: "relative",
-      verticalAlign: "middle",
-      fontSize: size
-    }
+    __css: rootStyles
   }), /*#__PURE__*/React.createElement(Shape, {
@@ -149,4 +138,2 @@ size: size,
 /**
- * CircularProgressLabel
- *
  * CircularProgress component label. In most cases it's a numeric indicator
@@ -153,0 +140,0 @@ * of the circular progress component's value

dist/cjs/progress.js

@@ -24,4 +24,3 @@ "use strict";
 /**
- * ProgressLabel (Linear)
- * Progress component used to show the numeric value of the progress.
+ * ProgressLabel is used to show the numeric value of the progress.
  * @see Docs https://chakra-ui.com/components/progress
@@ -31,11 +30,14 @@ */
   var styles = (0, _system.useStyles)();
+
+  var labelStyles = _extends({
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    textAlign: "center",
+    position: "absolute",
+    transform: "translate(-50%, -50%)"
+  }, styles.label);
+
   return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({}, props, {
-    __css: _extends({
-      top: "50%",
-      left: "50%",
-      width: "100%",
-      textAlign: "center",
-      position: "absolute",
-      transform: "translate(-50%, -50%)"
-    }, styles.label)
+    __css: labelStyles
   }));
@@ -70,2 +72,7 @@ };
   var styles = (0, _system.useStyles)();
+
+  var trackStyles = _extends({
+    height: "100%"
+  }, styles.filledTrack);
+
   return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
@@ -76,5 +83,3 @@ style: _extends({
   }, progress.bind, rest, {
-    __css: _extends({
-      height: "100%"
-    }, styles.filledTrack)
+    __css: trackStyles
   }));
@@ -107,3 +112,3 @@ }
 
-  var styles = (0, _system.useStyleConfig)("Progress", _extends({}, props, {
+  var styles = (0, _system.useMultiStyleConfig)("Progress", _extends({}, props, {
     isIndeterminate: (0, _utils.isUndefined)(value)
@@ -132,7 +137,9 @@ }));
 
+  var trackStyles = _extends({
+    overflow: "hidden",
+    position: "relative"
+  }, styles.track);
+
   return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    __css: _extends({
-      overflow: "hidden",
-      position: "relative"
-    }, styles.track)
+    __css: trackStyles
   }, rest), /*#__PURE__*/React.createElement(_system.StylesProvider, {
@@ -139,0 +146,0 @@ value: styles

dist/cjs/progress.utils.js

@@ -11,66 +11,43 @@ "use strict";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n  from { background-position: 1rem 0}\n  to { background-position: 0 0 }\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% { left: -40% }\n  100% { left: 100% }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% { transform: rotate(0deg) }\n  100% { transform: rotate(360deg) }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% {\n    stroke-dasharray: 1, 400;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 400, 400;\n    stroke-dashoffset: -100;\n  }\n\n  100% {\n    stroke-dasharray: 400, 400;\n    stroke-dashoffset: -260;\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-/**
- * CSS Animation for progress spin effect
- */
-var spin = (0, _system.keyframes)(_templateObject());
-/**
- * CSS Animation for progress rotate effect
- */
-
+var spin = (0, _system.keyframes)({
+  "0%": {
+    strokeDasharray: "1, 400",
+    strokeDashoffset: "0"
+  },
+  "50%": {
+    strokeDasharray: "400, 400",
+    strokeDashoffset: "-100"
+  },
+  "100%": {
+    strokeDasharray: "400, 400",
+    strokeDashoffset: "-260"
+  }
+});
 exports.spin = spin;
-var rotate = (0, _system.keyframes)(_templateObject2());
-/**
- * CSS Animation for progress indeterminate effect
- */
-
+var rotate = (0, _system.keyframes)({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+});
 exports.rotate = rotate;
-var progress = (0, _system.keyframes)(_templateObject3());
-/**
- * CSS Animation for progress stripe effect
- */
-
+var progress = (0, _system.keyframes)({
+  "0%": {
+    left: "-40%"
+  },
+  "100%": {
+    left: "100%"
+  }
+});
 exports.progress = progress;
-var stripe = (0, _system.keyframes)(_templateObject4());
+var stripe = (0, _system.keyframes)({
+  from: {
+    backgroundPosition: "1rem 0"
+  },
+  to: {
+    backgroundPosition: "0 0"
+  }
+});
 exports.stripe = stripe;
@@ -83,12 +60,16 @@
 function getProgressProps(options) {
-  var percent = options.value != null ? (0, _utils.valueToPercent)(options.value, options.min, options.max) : undefined; // A progressbar is indeterminate when the `value` is undefined
-
-  var isIndeterminate = (0, _utils.isUndefined)(options.value);
+  var value = options.value,
+      min = options.min,
+      max = options.max,
+      valueText = options.valueText,
+      getValueText = options.getValueText;
+  var percent = value != null ? (0, _utils.valueToPercent)(value, min, max) : undefined;
+  var isIndeterminate = (0, _utils.isUndefined)(value);
   return {
     bind: {
       "data-indeterminate": isIndeterminate ? "" : undefined,
-      "aria-valuemax": options.max,
-      "aria-valuemin": options.min,
-      "aria-valuenow": isIndeterminate ? undefined : options.value,
-      "aria-valuetext": (0, _utils.isFunction)(options.getValueText) ? options.getValueText(options.value, percent) : options.valueText,
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-valuenow": isIndeterminate ? undefined : value,
+      "aria-valuetext": value == null || percent == null ? undefined : (0, _utils.isFunction)(getValueText) ? getValueText(value, percent) : valueText,
       role: "progressbar"
@@ -95,0 +76,0 @@ },

dist/esm/circular-progress.js

@@ -10,7 +10,2 @@ 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; }
 
-/**
- * Circle
- *
- * SVG circle element visually indicating the shape of the component
- */
 var Circle = props => /*#__PURE__*/React.createElement(chakra.circle, _extends({
@@ -27,7 +22,2 @@ cx: 50,
 
-/**
- * Shape
- *
- * SVG wrapper element for the component's circular shape
- */
 function Shape(props) {
@@ -55,4 +45,3 @@ var {
 /**
- * React component used to indicate the progress of an activity.
- *
+ * CircularProgress is used to indicate the progress of an activity.
  * It's built using `svg` and `circle` components with support for
@@ -62,3 +51,2 @@ * theming and `indeterminate` state
  * @see Docs https://chakra-ui.com/components/progress
- *
  * @todo add theming support for circular progress
@@ -103,11 +91,12 @@ */
   };
+  var rootStyles = {
+    display: "inline-block",
+    position: "relative",
+    verticalAlign: "middle",
+    fontSize: size
+  };
   return /*#__PURE__*/React.createElement(chakra.div, _extends({
     className: "chakra-progress"
   }, progress.bind, rest, {
-    __css: {
-      display: "inline-block",
-      position: "relative",
-      verticalAlign: "middle",
-      fontSize: size
-    }
+    __css: rootStyles
   }), /*#__PURE__*/React.createElement(Shape, {
@@ -132,4 +121,2 @@ size: size,
 /**
- * CircularProgressLabel
- *
  * CircularProgress component label. In most cases it's a numeric indicator
@@ -136,0 +123,0 @@ * of the circular progress component's value

dist/esm/progress.js

@@ -5,3 +5,3 @@ 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, omitThemingProps, useStyleConfig, StylesProvider, useStyles } from "@chakra-ui/system";
+import { chakra, omitThemingProps, useMultiStyleConfig, StylesProvider, useStyles } from "@chakra-ui/system";
 import { isUndefined, __DEV__ } from "@chakra-ui/utils";
@@ -11,4 +11,3 @@ import * as React from "react";
 /**
- * ProgressLabel (Linear)
- * Progress component used to show the numeric value of the progress.
+ * ProgressLabel is used to show the numeric value of the progress.
  * @see Docs https://chakra-ui.com/components/progress
@@ -19,11 +18,14 @@ */
   var styles = useStyles();
+
+  var labelStyles = _extends({
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    textAlign: "center",
+    position: "absolute",
+    transform: "translate(-50%, -50%)"
+  }, styles.label);
+
   return /*#__PURE__*/React.createElement(chakra.div, _extends({}, props, {
-    __css: _extends({
-      top: "50%",
-      left: "50%",
-      width: "100%",
-      textAlign: "center",
-      position: "absolute",
-      transform: "translate(-50%, -50%)"
-    }, styles.label)
+    __css: labelStyles
   }));
@@ -58,2 +60,7 @@ };
   var styles = useStyles();
+
+  var trackStyles = _extends({
+    height: "100%"
+  }, styles.filledTrack);
+
   return /*#__PURE__*/React.createElement(chakra.div, _extends({
@@ -64,5 +71,3 @@ style: _extends({
   }, progress.bind, rest, {
-    __css: _extends({
-      height: "100%"
-    }, styles.filledTrack)
+    __css: trackStyles
   }));
@@ -95,3 +100,3 @@ }
 
-  var styles = useStyleConfig("Progress", _extends({}, props, {
+  var styles = useMultiStyleConfig("Progress", _extends({}, props, {
     isIndeterminate: isUndefined(value)
@@ -120,7 +125,9 @@ }));
 
+  var trackStyles = _extends({
+    overflow: "hidden",
+    position: "relative"
+  }, styles.track);
+
   return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    __css: _extends({
-      overflow: "hidden",
-      position: "relative"
-    }, styles.track)
+    __css: trackStyles
   }, rest), /*#__PURE__*/React.createElement(StylesProvider, {
@@ -127,0 +134,0 @@ value: styles

dist/esm/progress.utils.js

@@ -1,67 +0,43 @@
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n  from { background-position: 1rem 0}\n  to { background-position: 0 0 }\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% { left: -40% }\n  100% { left: 100% }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% { transform: rotate(0deg) }\n  100% { transform: rotate(360deg) }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% {\n    stroke-dasharray: 1, 400;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 400, 400;\n    stroke-dashoffset: -100;\n  }\n\n  100% {\n    stroke-dasharray: 400, 400;\n    stroke-dashoffset: -260;\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
 import { isFunction, isUndefined, valueToPercent } from "@chakra-ui/utils";
 import { keyframes } from "@chakra-ui/system";
-/**
- * CSS Animation for progress spin effect
- */
+export var spin = keyframes({
+  "0%": {
+    strokeDasharray: "1, 400",
+    strokeDashoffset: "0"
+  },
+  "50%": {
+    strokeDasharray: "400, 400",
+    strokeDashoffset: "-100"
+  },
+  "100%": {
+    strokeDasharray: "400, 400",
+    strokeDashoffset: "-260"
+  }
+});
+export var rotate = keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+});
+export var progress = keyframes({
+  "0%": {
+    left: "-40%"
+  },
+  "100%": {
+    left: "100%"
+  }
+});
+export var stripe = keyframes({
+  from: {
+    backgroundPosition: "1rem 0"
+  },
+  to: {
+    backgroundPosition: "0 0"
+  }
+});
 
-export var spin = keyframes(_templateObject());
 /**
- * CSS Animation for progress rotate effect
- */
-
-export var rotate = keyframes(_templateObject2());
-/**
- * CSS Animation for progress indeterminate effect
- */
-
-export var progress = keyframes(_templateObject3());
-/**
- * CSS Animation for progress stripe effect
- */
-
-export var stripe = keyframes(_templateObject4());
-
-/**
  * Get the common `aria-*` attributes for both the linear and circular
@@ -71,12 +47,18 @@ * progress components.
 export function getProgressProps(options) {
-  var percent = options.value != null ? valueToPercent(options.value, options.min, options.max) : undefined; // A progressbar is indeterminate when the `value` is undefined
-
-  var isIndeterminate = isUndefined(options.value);
+  var {
+    value,
+    min,
+    max,
+    valueText,
+    getValueText
+  } = options;
+  var percent = value != null ? valueToPercent(value, min, max) : undefined;
+  var isIndeterminate = isUndefined(value);
   return {
     bind: {
       "data-indeterminate": isIndeterminate ? "" : undefined,
-      "aria-valuemax": options.max,
-      "aria-valuemin": options.min,
-      "aria-valuenow": isIndeterminate ? undefined : options.value,
-      "aria-valuetext": isFunction(options.getValueText) ? options.getValueText(options.value, percent) : options.valueText,
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-valuenow": isIndeterminate ? undefined : value,
+      "aria-valuetext": value == null || percent == null ? undefined : isFunction(getValueText) ? getValueText(value, percent) : valueText,
       role: "progressbar"
@@ -83,0 +65,0 @@ },

dist/types/circular-progress.d.ts

@@ -48,8 +48,7 @@ import * as React from "react";
      */
-    getValueText?(value?: number, percent?: number): string;
+    getValueText?(value: number, percent: number): string;
 }
 export declare type CircularProgressProps = PropsOf<typeof chakra.div> & CircularProgressOptions;
 /**
- * React component used to indicate the progress of an activity.
- *
+ * CircularProgress is used to indicate the progress of an activity.
  * It's built using `svg` and `circle` components with support for
@@ -59,3 +58,2 @@ * theming and `indeterminate` state
  * @see Docs https://chakra-ui.com/components/progress
- *
  * @todo add theming support for circular progress
@@ -68,4 +66,2 @@ */
 /**
- * CircularProgressLabel
- *
  * CircularProgress component label. In most cases it's a numeric indicator
@@ -72,0 +68,0 @@ * of the circular progress component's value

dist/types/progress.d.ts

@@ -0,6 +1,6 @@
+/// <reference types="react" />
 import { chakra, PropsOf, ThemingProps } from "@chakra-ui/system";
 import { GetProgressPropsOptions } from "./progress.utils";
 /**
- * ProgressLabel (Linear)
- * Progress component used to show the numeric value of the progress.
+ * ProgressLabel is used to show the numeric value of the progress.
  * @see Docs https://chakra-ui.com/components/progress
@@ -7,0 +7,0 @@ */

dist/types/progress.utils.d.ts

@@ -1,16 +0,4 @@
-/**
- * CSS Animation for progress spin effect
- */
 export declare const spin: import("@emotion/serialize").Keyframes;
-/**
- * CSS Animation for progress rotate effect
- */
 export declare const rotate: import("@emotion/serialize").Keyframes;
-/**
- * CSS Animation for progress indeterminate effect
- */
 export declare const progress: import("@emotion/serialize").Keyframes;
-/**
- * CSS Animation for progress stripe effect
- */
 export declare const stripe: import("@emotion/serialize").Keyframes;
@@ -22,3 +10,3 @@ export interface GetProgressPropsOptions {
     valueText?: string;
-    getValueText?(value?: number, percent?: number): string;
+    getValueText?(value: number, percent: number): string;
 }
@@ -25,0 +13,0 @@ /**

package.json

 {
   "name": "@chakra-ui/progress",
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.7",
   "description": "Progress bar component for Chakra UI",
@@ -48,13 +48,13 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/theme-tools": "^1.0.0-next.6",
-    "@chakra-ui/utils": "^1.0.0-next.6"
+    "@chakra-ui/theme-tools": "^1.0.0-next.7",
+    "@chakra-ui/utils": "^1.0.0-next.7"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.6"
+    "@chakra-ui/system": "^1.0.0-next.7"
   },
   "peerDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.5",
+    "@chakra-ui/system": "^1.0.0-next.7",
     "react": "16.x"
   },
-  "gitHead": "72eeca4ba3fc6e7d8845b0d283a03cb6ec384a50"
+  "gitHead": "3dcabd8c7e21b32ae1b61485588f70370c4e626f"
 }

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

Worsened metrics

Total package byte prevSize

81458

decreased by-1.68%

Lines of code

820

decreased by-4.65%

Dependency changes

• Updated@chakra-ui/theme-tools@^1.0.0-next.7

• Updated@chakra-ui/utils@^1.0.0-next.7