@chakra-ui/checkbox - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

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

dist/cjs/checkbox.js

@@ -12,7 +12,7 @@ "use strict";
 
-var _useCheckbox2 = require("./use-checkbox");
+var _checkboxGroup = require("./checkbox-group");
 
 var _checkbox = require("./checkbox.icon");
 
-var _checkboxGroup = require("./checkbox-group");
+var _useCheckbox2 = require("./use-checkbox");
 
@@ -23,14 +23,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+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; }
+
 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; }
-
-/**
- * Checkbox - Theming
- *
- * To style the checkbox globally, change the styles in
- * `theme.components.Checkbox` under the `Control` key
- */
 var StyledControl = (0, _system.chakra)("div", {
-  themeKey: "Checkbox.Control",
   baseStyle: {
@@ -42,14 +35,7 @@ display: "inline-flex",
     userSelect: "none",
-    flexShrink: 0,
-    transition: "transform 240ms, opacity 240ms"
+    flexShrink: 0
   }
 });
-var StyledLabel = (0, _system.chakra)("div", {
-  themeKey: "Checkbox.Label",
+var StyledContainer = (0, _system.chakra)("label", {
   baseStyle: {
-    userSelect: "none"
-  }
-});
-var StyledWrapper = (0, _system.chakra)("label", {
-  baseStyle: {
     cursor: "pointer",
@@ -73,28 +59,20 @@ display: "inline-flex",
   var group = (0, _checkboxGroup.useCheckboxGroupContext)();
+  var styles = (0, _system.useStyleConfig)("Checkbox", _extends({}, group, props));
+  var realProps = (0, _system.omitThemingProps)(_extends({}, group, props));
 
-  var _props$iconSize = props.iconSize,
-      iconSize = _props$iconSize === void 0 ? "0.625rem" : _props$iconSize,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
-      iconColor = props.iconColor,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? group == null ? void 0 : group.variant : _props$variant,
-      _props$colorScheme = props.colorScheme,
-      colorScheme = _props$colorScheme === void 0 ? group == null ? void 0 : group.colorScheme : _props$colorScheme,
-      _props$size = props.size,
-      size = _props$size === void 0 ? group == null ? void 0 : group.size : _props$size,
-      isFullWidth = props.isFullWidth,
-      className = props.className,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["iconSize", "spacing", "iconColor", "variant", "colorScheme", "size", "isFullWidth", "className", "children"]);
+  var _realProps$spacing = realProps.spacing,
+      spacing = _realProps$spacing === void 0 ? "0.5rem" : _realProps$spacing,
+      className = realProps.className,
+      children = realProps.children,
+      rest = _objectWithoutPropertiesLoose(realProps, ["spacing", "className", "children"]);
 
-  var isChecked = props.isChecked;
+  var isChecked = realProps.isChecked;
 
-  if ((group == null ? void 0 : group.value) && props.value) {
-    isChecked = group.value.includes(props.value);
+  if ((group == null ? void 0 : group.value) && realProps.value) {
+    isChecked = group.value.includes(realProps.value);
   }
 
-  var onChange = props.onChange;
+  var onChange = realProps.onChange;
 
-  if ((group == null ? void 0 : group.onChange) && props.value) {
+  if ((group == null ? void 0 : group.onChange) && realProps.value) {
     onChange = group.onChange;
@@ -115,12 +93,6 @@ }
 
-  var theming = {
-    variant: variant,
-    size: size,
-    colorScheme: colorScheme
-  };
-  return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
-    width: isFullWidth ? "100%" : undefined
-  }, htmlProps, {
+  return /*#__PURE__*/React.createElement(StyledContainer, _extends({
+    __css: styles.container,
     className: _className
-  }), /*#__PURE__*/React.createElement("input", _extends({
+  }, htmlProps), /*#__PURE__*/React.createElement("input", _extends({
     className: "chakra-checkbox__input"
@@ -130,16 +102,14 @@ }, getInputProps({
   }))), /*#__PURE__*/React.createElement(StyledControl, _extends({
+    __css: styles.control,
     className: "chakra-checkbox__control"
-  }, theming, {
-    verticalAlign: "top"
   }, getCheckboxProps()), /*#__PURE__*/React.createElement(_checkbox.CheckboxIcon, {
+    __css: styles.icon,
     className: "chakra-checkbox__icon",
-    transition: "transform 240ms, opacity 240ms",
     isChecked: state.isChecked,
-    isIndeterminate: state.isIndeterminate,
-    boxSize: iconSize,
-    color: iconColor
-  })), children && /*#__PURE__*/React.createElement(StyledLabel, _extends({
-    className: "chakra-checkbox__label"
-  }, theming, getLabelProps(), {
-    marginLeft: spacing,
+    isIndeterminate: state.isIndeterminate
+  })), children && /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    __css: styles.label,
+    className: "chakra-checkbox__label",
+    ml: spacing
+  }, getLabelProps(), {
     children: children
@@ -146,0 +116,0 @@ })));

dist/esm/checkbox.js

@@ -0,20 +1,12 @@
+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; }
+
 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 { chakra, forwardRef, omitThemingProps, useStyleConfig } from "@chakra-ui/system";
 import { cx, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
+import { useCheckboxGroupContext } from "./checkbox-group";
+import { CheckboxIcon } from "./checkbox.icon";
 import { useCheckbox } from "./use-checkbox";
-import { CheckboxIcon } from "./checkbox.icon";
-import { useCheckboxGroupContext } from "./checkbox-group";
-/**
- * Checkbox - Theming
- *
- * To style the checkbox globally, change the styles in
- * `theme.components.Checkbox` under the `Control` key
- */
-
 var StyledControl = chakra("div", {
-  themeKey: "Checkbox.Control",
   baseStyle: {
@@ -26,14 +18,7 @@ display: "inline-flex",
     userSelect: "none",
-    flexShrink: 0,
-    transition: "transform 240ms, opacity 240ms"
+    flexShrink: 0
   }
 });
-var StyledLabel = chakra("div", {
-  themeKey: "Checkbox.Label",
+var StyledContainer = chakra("label", {
   baseStyle: {
-    userSelect: "none"
-  }
-});
-var StyledWrapper = chakra("label", {
-  baseStyle: {
     cursor: "pointer",
@@ -57,25 +42,21 @@ display: "inline-flex",
   var group = useCheckboxGroupContext();
+  var styles = useStyleConfig("Checkbox", _extends({}, group, props));
+  var realProps = omitThemingProps(_extends({}, group, props));
 
   var {
-    iconSize = "0.625rem",
     spacing = "0.5rem",
-    iconColor,
-    variant = group == null ? void 0 : group.variant,
-    colorScheme = group == null ? void 0 : group.colorScheme,
-    size = group == null ? void 0 : group.size,
-    isFullWidth,
     className,
     children
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["iconSize", "spacing", "iconColor", "variant", "colorScheme", "size", "isFullWidth", "className", "children"]);
+  } = realProps,
+      rest = _objectWithoutPropertiesLoose(realProps, ["spacing", "className", "children"]);
 
-  var isChecked = props.isChecked;
+  var isChecked = realProps.isChecked;
 
-  if ((group == null ? void 0 : group.value) && props.value) {
-    isChecked = group.value.includes(props.value);
+  if ((group == null ? void 0 : group.value) && realProps.value) {
+    isChecked = group.value.includes(realProps.value);
   }
 
-  var onChange = props.onChange;
+  var onChange = realProps.onChange;
 
-  if ((group == null ? void 0 : group.onChange) && props.value) {
+  if ((group == null ? void 0 : group.onChange) && realProps.value) {
     onChange = group.onChange;
@@ -97,12 +78,6 @@ }
 
-  var theming = {
-    variant,
-    size,
-    colorScheme
-  };
-  return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
-    width: isFullWidth ? "100%" : undefined
-  }, htmlProps, {
+  return /*#__PURE__*/React.createElement(StyledContainer, _extends({
+    __css: styles.container,
     className: _className
-  }), /*#__PURE__*/React.createElement("input", _extends({
+  }, htmlProps), /*#__PURE__*/React.createElement("input", _extends({
     className: "chakra-checkbox__input"
@@ -112,16 +87,14 @@ }, getInputProps({
   }))), /*#__PURE__*/React.createElement(StyledControl, _extends({
+    __css: styles.control,
     className: "chakra-checkbox__control"
-  }, theming, {
-    verticalAlign: "top"
   }, getCheckboxProps()), /*#__PURE__*/React.createElement(CheckboxIcon, {
+    __css: styles.icon,
     className: "chakra-checkbox__icon",
-    transition: "transform 240ms, opacity 240ms",
     isChecked: state.isChecked,
-    isIndeterminate: state.isIndeterminate,
-    boxSize: iconSize,
-    color: iconColor
-  })), children && /*#__PURE__*/React.createElement(StyledLabel, _extends({
-    className: "chakra-checkbox__label"
-  }, theming, getLabelProps(), {
-    marginLeft: spacing,
+    isIndeterminate: state.isIndeterminate
+  })), children && /*#__PURE__*/React.createElement(chakra.div, _extends({
+    __css: styles.label,
+    className: "chakra-checkbox__label",
+    ml: spacing
+  }, getLabelProps(), {
     children: children
@@ -128,0 +101,0 @@ })));

dist/types/checkbox.d.ts

@@ -1,25 +0,9 @@
-import { IconProps } from "@chakra-ui/icon";
-import { PropsOf, SystemProps } from "@chakra-ui/system";
+import { PropsOf, SystemProps, ThemingProps } from "@chakra-ui/system";
 import { Omit } from "@chakra-ui/utils";
 import { UseCheckboxProps } from "./use-checkbox";
-/**
- * Checkbox - Theming
- *
- * To style the checkbox globally, change the styles in
- * `theme.components.Checkbox` under the `Control` key
- */
 declare const StyledControl: import("@chakra-ui/system").ChakraComponent<"div", {}>;
-declare type BaseControlProps = Omit<PropsOf<typeof StyledControl>, "onChange" | "defaultChecked">;
-declare type Omitted = "size" | "checked" | "defaultChecked";
-export declare type CheckboxProps = BaseControlProps & Omit<PropsOf<"input">, Omitted> & UseCheckboxProps & {
+declare type Omitted = "size" | "checked" | "defaultChecked" | "onChange";
+declare type StyledControlProps = Omit<PropsOf<typeof StyledControl>, Omitted>;
+export declare type CheckboxProps = StyledControlProps & Omit<PropsOf<"input">, Omitted> & ThemingProps & UseCheckboxProps & {
     /**
-     * The color of the check icon
-     */
-    iconColor?: IconProps["color"];
-    /**
-     * The size of the check icon
-     * @default 0.75rem
-     */
-    iconSize?: IconProps["size"];
-    /**
      * The spacing between the checkbox and it's label text
@@ -29,6 +13,2 @@ * @default 0.5rem
     spacing?: SystemProps["marginLeft"];
-    /**
-     * If `true`, the checkbox should take up the full width of the parent.
-     */
-    isFullWidth?: boolean;
 };
@@ -35,0 +15,0 @@ /**

package.json

 {
   "name": "@chakra-ui/checkbox",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "A React Checkbox component for use in forms",
@@ -55,15 +55,15 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "^1.0.0-next.4",
-    "@chakra-ui/icon": "^1.0.0-next.4",
-    "@chakra-ui/utils": "^1.0.0-next.4",
-    "@chakra-ui/visually-hidden": "^1.0.0-next.4"
+    "@chakra-ui/hooks": "^1.0.0-next.5",
+    "@chakra-ui/icon": "^1.0.0-next.5",
+    "@chakra-ui/utils": "^1.0.0-next.5",
+    "@chakra-ui/visually-hidden": "^1.0.0-next.5"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.4"
+    "@chakra-ui/system": "^1.0.0-next.5"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">0.8",
+    "@chakra-ui/system": "^1.0.0-next.4",
     "react": "16.x"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

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

195490

decreased by-2.71%

Lines of code

2394

decreased by-4.43%

Dependency changes

• + Added@chakra-ui/color-mode@1.4.8(transitive)

• + Added@chakra-ui/react-env@1.1.6(transitive)

• + Added@chakra-ui/styled-system@1.19.0(transitive)

• + Added@chakra-ui/system@1.12.1(transitive)

• + Addedcsstype@3.0.9(transitive)

• + Addedreact-fast-compare@3.2.0(transitive)

• + Addedtslib@2.7.0(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

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

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedtslib@2.4.0(transitive)

• Updated@chakra-ui/hooks@^1.0.0-next.5

• Updated@chakra-ui/icon@^1.0.0-next.5

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

• Updated@chakra-ui/visually-hidden@^1.0.0-next.5