@s-ui/react-atom-checkbox - npm Package Compare versions

Comparing version 2.18.0 to 3.0.0

lib/config.js

@@ -0,2 +1,4 @@
+import cx from 'classnames';
 export var BASE_CLASS = 'sui-AtomCheckbox';
+export var CLASS_ICON = 'sui-AtomCheckbox--Icon';
 export var CHECKBOX_STATUS = {
@@ -10,2 +12,80 @@ ERROR: 'error',
   MEDIUM: 'medium'
+};
+export var className = function className(_ref) {
+  var _cx;
+
+  var size = _ref.size,
+      checked = _ref.checked,
+      disabled = _ref.disabled,
+      indeterminate = _ref.indeterminate;
+  return cx(CLASS_ICON, (_cx = {}, _cx[CLASS_ICON + "--" + size] = Object.values(CHECKBOX_SIZES).includes(size), _cx['is-checked'] = checked, _cx['is-disabled'] = disabled, _cx['is-indeterminate'] = indeterminate, _cx));
+};
+export var pressedValue = function pressedValue(_ref2) {
+  var checked = _ref2.checked,
+      indeterminate = _ref2.indeterminate;
+
+  if (checked) {
+    return 'true';
+  } else if (indeterminate) {
+    return 'mixed';
+  }
+
+  return 'false';
+};
+export var getIsNative = function getIsNative(_ref3, _ref4) {
+  var checked = _ref3.checked,
+      indeterminate = _ref3.indeterminate;
+  var CheckedIcon = _ref4.CheckedIcon,
+      UncheckedIcon = _ref4.UncheckedIcon,
+      IndeterminateIcon = _ref4.IndeterminateIcon,
+      Icon = _ref4.Icon;
+  if (checked && !CheckedIcon && !Icon) return true;else if (!checked && indeterminate && !IndeterminateIcon && !Icon) return true;else if (!checked && !indeterminate && !UncheckedIcon && !Icon) return true;
+  return false;
+};
+export var getIcon = function getIcon(_ref5, _ref6) {
+  var isNative = _ref5.isNative,
+      checked = _ref5.checked,
+      indeterminate = _ref5.indeterminate;
+  var CheckedIcon = _ref6.CheckedIcon,
+      UncheckedIcon = _ref6.UncheckedIcon,
+      IndeterminateIcon = _ref6.IndeterminateIcon,
+      Icon = _ref6.Icon;
+
+  if (isNative) {
+    return null;
+  }
+
+  var ResultingIcon = Icon || CheckedIcon;
+
+  if (!checked) {
+    if (indeterminate) {
+      ResultingIcon = Icon || IndeterminateIcon;
+    } else {
+      ResultingIcon = Icon || UncheckedIcon;
+    }
+  }
+
+  return ResultingIcon;
+};
+export var updateStatus = function updateStatus(element, _ref7) {
+  var _ref7$isIndeterminate = _ref7.isIndeterminate,
+      isIndeterminate = _ref7$isIndeterminate === void 0 ? false : _ref7$isIndeterminate,
+      _ref7$isChecked = _ref7.isChecked,
+      isChecked = _ref7$isChecked === void 0 ? false : _ref7$isChecked;
+
+  if (!element) {
+    return;
+  }
+
+  var indeterminate = element.indeterminate;
+
+  if (isIndeterminate !== indeterminate) {
+    element.indeterminate = isChecked ? false : isIndeterminate;
+    return;
+  }
+
+  return undefined;
+};
+export var isFunction = function isFunction(fn) {
+  return typeof fn === 'function';
 };

lib/index.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["checked", "checkedIcon", "disabled", "id", "intermediate", "intermediateIcon", "isNative", "name", "onChange", "status", "size"];
-import { useRef } from 'react';
+var _excluded = ["defaultChecked", "checked", "checkedIcon", "uncheckedIcon", "disabled", "id", "defaultIndeterminate", "indeterminate", "indeterminateIcon", "icon", "name", "onChange", "status", "size", "value"];
+import { forwardRef, useRef } from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { BASE_CLASS, CHECKBOX_STATUS, CHECKBOX_SIZES } from './config.js';
+import useControlledState from '@s-ui/react-hooks/lib/useControlledState';
+import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs';
+import CheckboxIcon from './CheckboxIcon.js';
+import { BASE_CLASS, CHECKBOX_SIZES, CHECKBOX_STATUS, getIcon, getIsNative, isFunction, pressedValue, updateStatus } from './config.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-var AtomCheckbox = function AtomCheckbox(_ref) {
-  var _cx;
-
-  var _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
+var AtomCheckbox = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$defaultChecked = _ref.defaultChecked,
+      defaultCheckedProp = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
+      checkedProp = _ref.checked,
       CheckedIcon = _ref.checkedIcon,
+      UncheckedIcon = _ref.uncheckedIcon,
       disabled = _ref.disabled,
       id = _ref.id,
-      _ref$intermediate = _ref.intermediate,
-      intermediate = _ref$intermediate === void 0 ? false : _ref$intermediate,
-      IntermediateIcon = _ref.intermediateIcon,
-      _ref$isNative = _ref.isNative,
-      isNativeProp = _ref$isNative === void 0 ? false : _ref$isNative,
+      _ref$defaultIndetermi = _ref.defaultIndeterminate,
+      defaultIndeterminateProp = _ref$defaultIndetermi === void 0 ? false : _ref$defaultIndetermi,
+      indeterminateProp = _ref.indeterminate,
+      IndeterminateIcon = _ref.indeterminateIcon,
+      IconProp = _ref.icon,
       name = _ref.name,
@@ -29,48 +31,126 @@ onChangeFromProps = _ref.onChange,
       size = _ref$size === void 0 ? CHECKBOX_SIZES.MEDIUM : _ref$size,
+      value = _ref.value,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var inputRef = useRef();
-  var hasNotCustomIcons = !CheckedIcon && !IntermediateIcon;
-  var isNative = isNativeProp || hasNotCustomIcons;
-  var isIntermediate = intermediate && !checked;
 
-  var updateNativeIndeterminate = function updateNativeIndeterminate() {
-    inputRef.current && (inputRef.current.indeterminate = isIntermediate);
-  };
+  var _useControlledState = useControlledState(checkedProp, defaultCheckedProp),
+      checked = _useControlledState[0],
+      setChecked = _useControlledState[1],
+      isCheckedControlled = _useControlledState[2];
 
-  var handleChange = function handleChange(ev) {
-    // Handler doesn't necessarily trigger render, but browser could still set
-    // native indeterminate property which may end up in a mismatch between it
-    // and the component's prop, so native value should be kept updated here.
-    updateNativeIndeterminate();
-    var _ev$target = ev.target,
-        checked = _ev$target.checked,
-        name = _ev$target.name;
-    if (!disabled && typeof onChangeFromProps === 'function') onChangeFromProps(ev, {
-      name: name,
-      value: checked
+  var _useControlledState2 = useControlledState(indeterminateProp, defaultIndeterminateProp),
+      indeterminate = _useControlledState2[0],
+      setIndeterminate = _useControlledState2[1],
+      isIndeterminateControlled = _useControlledState2[2];
+
+  var ref = useMergeRefs(function (node) {
+    return updateStatus(node, {
+      isChecked: checked,
+      isIndeterminate: indeterminate
     });
+  }, inputRef, forwardedRef);
+  var isControlled = isCheckedControlled || isIndeterminateControlled;
+  var isNative = getIsNative({
+    checked: checked,
+    indeterminate: indeterminate
+  }, {
+    CheckedIcon: CheckedIcon,
+    UncheckedIcon: UncheckedIcon,
+    IndeterminateIcon: IndeterminateIcon,
+    Icon: IconProp
+  });
+  var Icon = getIcon({
+    isNative: isNative,
+    checked: checked,
+    indeterminate: indeterminate
+  }, {
+    CheckedIcon: CheckedIcon,
+    UncheckedIcon: UncheckedIcon,
+    IndeterminateIcon: IndeterminateIcon,
+    Icon: IconProp
+  });
+
+  var handleChange = function handleChange(ref) {
+    return function (event) {
+      if (!disabled) {
+        var _event$target = event.target,
+            _name = _event$target.name,
+            _value = _event$target.value;
+        var newChecked = isControlled ? checked : event.target.checked;
+        var newIndeterminate = isControlled ? indeterminate : event.target.indeterminate;
+        setChecked(newChecked);
+        setIndeterminate(newIndeterminate);
+        isFunction(onChangeFromProps) && onChangeFromProps(event, {
+          name: _name,
+          value: _value,
+          checked: newChecked,
+          indeterminate: newIndeterminate
+        });
+        ref.current.focus();
+      }
+    };
   };
 
-  var className = cx(BASE_CLASS, (_cx = {}, _cx[BASE_CLASS + "--" + size] = Object.values(CHECKBOX_SIZES).includes(size), _cx['is-checked'] = checked, _cx['is-disabled'] = disabled, _cx['is-intermediate'] = isIntermediate, _cx[BASE_CLASS + "--native"] = isNative, _cx[BASE_CLASS + "--status-" + status] = Object.values(CHECKBOX_STATUS).includes(status), _cx)); // Keep native indeterminate property updated every render
+  var handleClick = function handleClick(ref) {
+    return function (event) {
+      event.preventDefault();
+      event.stopPropagation();
 
-  updateNativeIndeterminate();
+      if (!disabled) {
+        var _event$target2 = event.target,
+            _name2 = _event$target2.name,
+            _value2 = _event$target2.value;
+        var newChecked = isControlled ? checked : !checked;
+        var newIndetermiante = isControlled ? indeterminate : false;
+        setChecked(newChecked);
+        setIndeterminate(false);
+        isFunction(onChangeFromProps) && onChangeFromProps(event, {
+          name: _name2,
+          value: _value2,
+          checked: newChecked,
+          indeterminate: newIndetermiante
+        });
+        ref.current.focus();
+      }
+    };
+  };
+
   return /*#__PURE__*/_jsxs("label", {
-    className: className,
-    children: [!isNative && checked && /*#__PURE__*/_jsx(CheckedIcon, {}), !isNative && isIntermediate && /*#__PURE__*/_jsx(IntermediateIcon, {}), /*#__PURE__*/_jsx("input", _extends({
-      ref: inputRef,
+    className: cx(BASE_CLASS, BASE_CLASS + "--native-" + (isNative ? 'enabled' : 'disabled'), BASE_CLASS + "--size-" + size),
+    children: [/*#__PURE__*/_jsx("input", _extends({
+      ref: ref,
       type: "checkbox",
       id: id,
       name: name || id,
+      value: value,
       disabled: disabled,
+      checked: checked
+    }, Object.values(CHECKBOX_STATUS).includes(status) && {
+      'data-status': status
+    }, {
+      "aria-hidden": !isNative,
+      "aria-checked": pressedValue({
+        checked: checked,
+        indeterminate: indeterminate
+      }),
+      indeterminate: indeterminate ? 'true' : undefined
+    }, isNative && {
+      onChange: handleChange(inputRef)
+    }, !isNative && {
+      readOnly: true
+    }, props)), /*#__PURE__*/_jsx(CheckboxIcon, {
+      disabled: disabled,
+      size: size,
+      status: status,
       checked: checked,
-      intermediate: isIntermediate ? 'intermediate' : '',
-      onChange: handleChange
-    }, props))]
+      indeterminate: indeterminate,
+      onClick: handleClick,
+      icon: Icon
+    })]
   });
-};
-
+});
 AtomCheckbox.displayName = 'AtomCheckbox';
 export default AtomCheckbox;
-export { CHECKBOX_STATUS as checkboxStatus };
-export { CHECKBOX_SIZES as checkboxSizes };
+export { CHECKBOX_STATUS as atomCheckboxStatus };
+export { CHECKBOX_SIZES as atomCheckboxSizes };

package.json

 {
   "name": "@s-ui/react-atom-checkbox",
-  "version": "2.18.0",
+  "version": "3.0.0",
   "description": "",
@@ -12,3 +12,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@s-ui/component-dependencies": "1"
+    "@s-ui/component-dependencies": "1",
+    "@s-ui/react-hooks": "1"
   },
@@ -15,0 +16,0 @@ "keywords": [],

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24174

increased by49.88%

Number of package files

9

increased by12.5%

Lines of code

263

increased by246.05%

Published versions last year

4

increased by33.33%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@s-ui/react-hooks@1

• + Added@s-ui/react-hooks@1.38.0(transitive)

• + Addedintersection-observer@0.10.0(transitive)