tabler-react-2 0.1.163 → 0.1.165

package/dist/input/checkbox.js

@@ -1,26 +1,75 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Checkbox = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.PARTIAL = exports.Checkbox = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["value", "onChange", "label", "required", "className"];
+var _excluded = ["value", "onChange", "label", "required", "className", "naked", "inputClassName"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var PARTIAL = exports.PARTIAL = "PARTIAL";
 var Checkbox = exports.Checkbox = function Checkbox(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? false : _ref$value,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
     label = _ref.label,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     className = _ref.className,
+    _ref$naked = _ref.naked,
+    naked = _ref$naked === void 0 ? false : _ref$naked,
+    inputClassName = _ref.inputClassName,
     props = _objectWithoutProperties(_ref, _excluded);
+  var ref = (0, _react.useRef)(null);
+  var isPartial = value === PARTIAL;
+  (0, _react.useEffect)(function () {
+    if (ref.current) ref.current.indeterminate = isPartial;
+  }, [isPartial]);
+  var handleChange = function handleChange(e) {
+    if (isPartial) {
+      onChange(false); // clicking partial -> deselect
+      return;
+    }
+    onChange(e.target.checked);
+  };
+  if (naked) {
+    // Keep naked input visually unopinionated so containers (like EnclosedSelectGroup) can style it.
+    return /*#__PURE__*/_react["default"].createElement("input", _extends({
+      ref: ref,
+      type: "checkbox",
+      className: (0, _classnames["default"])(inputClassName),
+      checked: Boolean(value) && !isPartial,
+      "aria-checked": isPartial ? "mixed" : Boolean(value),
+      onChange: handleChange
+    }, props));
+  }
+
+  // Visible (wrapped) checkbox: PARTIAL = subtle gray background + centered dash icon.
+  var inputStyle = isPartial ? {
+    backgroundColor: "rgba(0,0,0,0.08)",
+    borderColor: "rgba(0,0,0,0.25)",
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.05)",
+    outline: "none"
+  } : undefined;
+  var dashStyle = isPartial ? {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 12,
+    height: 2,
+    background: "rgba(0,0,0,0.6)",
+    borderRadius: 1,
+    pointerEvents: "none"
+  } : undefined;
   return /*#__PURE__*/_react["default"].createElement("label", _extends({
     className: (0, _classnames["default"])("form-check", className),
     style: {
@@ -28,23 +77,37 @@ var Checkbox = exports.Checkbox = function Checkbox(_ref) {
       alignItems: "center",
       gap: 8
     }
-  }, props), /*#__PURE__*/_react["default"].createElement("input", {
-    className: "form-check-input",
-    type: "checkbox",
-    checked: value,
-    onChange: function onChange(e) {
-      return _onChange(e.target.checked);
+  }, props), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      position: "relative",
+      display: "inline-block"
     }
-  }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "form-check-label ".concat(required ? "required" : ""),
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    ref: ref,
+    className: (0, _classnames["default"])("form-check-input"),
+    type: "checkbox",
+    checked: Boolean(value) && !isPartial,
+    "aria-checked": isPartial ? "mixed" : Boolean(value),
+    onChange: handleChange,
+    style: inputStyle
+  }), isPartial && /*#__PURE__*/_react["default"].createElement("span", {
+    "aria-hidden": true,
+    style: dashStyle
+  })), label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])("form-check-label", {
+      required: required
+    }),
     style: {
       textAlign: "left"
     }
   }, label));
 };
 Checkbox.propTypes = {
-  value: _propTypes["default"].bool.isRequired,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf([PARTIAL])]).isRequired,
   onChange: _propTypes["default"].func.isRequired,
-  label: _propTypes["default"].string.isRequired,
-  required: _propTypes["default"].bool
+  label: _propTypes["default"].node,
+  required: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  naked: _propTypes["default"].bool,
+  inputClassName: _propTypes["default"].string
 };

package/dist/input/enclosedselectgroup.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EnclosedSelectGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _checkbox = require("./checkbox");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -21,6 +22,15 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var findEntry = function findEntry(valueProp, item) {
+  if (Array.isArray(valueProp)) return valueProp.find(function (v) {
+    return (v === null || v === void 0 ? void 0 : v.value) === item.value;
+  }) || null;
+  return valueProp && valueProp.value === item.value ? valueProp : null;
+};
+var isEntryPartial = function isEntryPartial(entry) {
+  return Boolean((entry === null || entry === void 0 ? void 0 : entry.state) === _checkbox.PARTIAL || (entry === null || entry === void 0 ? void 0 : entry.partial) === true);
+};
 var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectGroup(_ref) {
   var items = _ref.items,
     value = _ref.value,
@@ -38,43 +48,59 @@ var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectG
     _ref$small = _ref.small,
     small = _ref$small === void 0 ? false : _ref$small;
   var groupName = (0, _react.useId)();
+  var isChecked = function isChecked(item) {
+    if (multiple) {
+      if (!Array.isArray(value)) return false;
+      var _entry = findEntry(value, item);
+      return Boolean(_entry) && !isEntryPartial(_entry);
+    }
+    var entry = findEntry(value, item);
+    return Boolean(entry) && !isEntryPartial(entry);
+  };
+  var isPartial = function isPartial(item) {
+    if (multiple) {
+      if (!Array.isArray(value)) return false;
+      var _entry2 = findEntry(value, item);
+      return isEntryPartial(_entry2);
+    }
+    var entry = findEntry(value, item);
+    return isEntryPartial(entry);
+  };
   var handleChange = function handleChange(selectedItem) {
     if (multiple) {
-      // get current values as an array of strings
-      var selectedValues = Array.isArray(value) ? value.map(function (v) {
-        return v.value;
-      }) : [];
-      var newValues;
-      if (selectedValues.includes(selectedItem.value)) {
-        // deselect
-        newValues = selectedValues.filter(function (v) {
-          return v !== selectedItem.value;
-        });
-      } else {
-        // select
-        newValues = [].concat(_toConsumableArray(selectedValues), [selectedItem.value]);
+      var current = Array.isArray(value) ? value : [];
+      var entry = findEntry(current, selectedItem);
+      var currentlyPartial = isEntryPartial(entry);
+      var currentlySelected = Boolean(entry);
+      if (currentlyPartial) {
+        onChange(current.filter(function (v) {
+          return v.value !== selectedItem.value;
+        }));
+        return;
       }
-      // map back to full item objects from `items`
-      var newSelectedItems = newValues.map(function (val) {
-        return items.find(function (item) {
-          return item.value === val;
+      if (currentlySelected) {
+        onChange(current.filter(function (v) {
+          return v.value !== selectedItem.value;
+        }));
+      } else {
+        var full = items.find(function (i) {
+          return i.value === selectedItem.value;
         });
-      }).filter(Boolean);
-      onChange(newSelectedItems);
+        onChange([].concat(_toConsumableArray(current), [full]).filter(Boolean));
+      }
     } else {
-      // single-select: toggle off if same, otherwise pick full item
-      var isSame = (value === null || value === void 0 ? void 0 : value.value) === selectedItem.value;
-      var newSelection = isSame ? null : items.find(function (item) {
-        return item.value === selectedItem.value;
+      var _entry3 = findEntry(value, selectedItem);
+      if (isEntryPartial(_entry3)) {
+        onChange(null);
+        return;
+      }
+      var isSame = (value === null || value === void 0 ? void 0 : value.value) === selectedItem.value && !isEntryPartial(_entry3);
+      var newSelection = isSame ? null : items.find(function (i) {
+        return i.value === selectedItem.value;
       });
       onChange(newSelection);
     }
   };
-  var isChecked = function isChecked(item) {
-    return multiple ? Array.isArray(value) && value.some(function (val) {
-      return val.value === item.value;
-    }) : (value === null || value === void 0 ? void 0 : value.value) === item.value;
-  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "form-selectgroup",
     style: _objectSpread({
@@ -82,19 +108,51 @@ var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectG
       flexDirection: direction
     }, style)
   }, items.map(function (item) {
+    var partial = isPartial(item);
+    var checked = isChecked(item);
+
+    // Visual: communicate PARTIAL on the checkbox glyph only.
+    var checkWrapStyle = partial ? {
+      position: "relative",
+      background: "rgba(0,0,0,0.15)",
+      border: "none"
+    } : undefined;
+    var dashStyle = partial ? {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: small ? 10 : 12,
+      height: 2,
+      background: "rgba(0,0,0,0.55)",
+      borderRadius: 1,
+      pointerEvents: "none"
+    } : undefined;
     return /*#__PURE__*/_react["default"].createElement("label", {
       key: "".concat(groupName, "-").concat(item.value),
       className: "form-selectgroup-item flex-fill ".concat(itemClassName),
       style: _objectSpread({
         pointerEvents: item.disabled ? "none" : undefined,
-        cursor: item.disabled ? "not-allowed" : undefined
+        cursor: item.disabled ? "not-allowed" : "pointer"
       }, itemStyle)
-    }, /*#__PURE__*/_react["default"].createElement("input", {
-      type: multiple ? "checkbox" : "radio",
+    }, multiple ? /*#__PURE__*/_react["default"].createElement(_checkbox.Checkbox, {
+      naked: true,
+      inputClassName: "form-selectgroup-input",
+      id: "".concat(groupName, "-").concat(item.value),
+      name: groupName,
+      value: partial ? _checkbox.PARTIAL : checked,
+      "aria-checked": partial ? "mixed" : checked,
+      onChange: function onChange() {
+        return handleChange(item);
+      },
+      disabled: item.disabled
+    }) : /*#__PURE__*/_react["default"].createElement("input", {
+      type: "radio",
       name: groupName,
       id: "".concat(groupName, "-").concat(item.value),
       value: item.value,
-      checked: isChecked(item),
+      checked: checked,
+      "aria-checked": partial ? "mixed" : checked,
       onChange: function onChange() {
         return handleChange(item);
       },
@@ -103,33 +161,36 @@ var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectG
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "form-selectgroup-label d-flex ".concat(small ? "p-2" : "p-3", " ").concat(item.disabled ? "bg-gray-200" : ""),
       style: {
-        pointerEvents: item.disabled ? "none" : undefined,
-        cursor: item.disabled ? "not-allowed" : undefined
+        alignItems: "center"
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "me-3"
     }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "form-selectgroup-check"
-    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "form-selectgroup-check",
+      style: checkWrapStyle,
+      "aria-hidden": true
+    }, partial && /*#__PURE__*/_react["default"].createElement("span", {
+      style: dashStyle
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         textAlign: "left"
       }
     }, item.label)));
   }));
 };
+var valueShape = _propTypes["default"].shape({
+  value: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].any,
+  state: _propTypes["default"].oneOf([_checkbox.PARTIAL]),
+  partial: _propTypes["default"].bool
+});
 EnclosedSelectGroup.propTypes = {
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     value: _propTypes["default"].string.isRequired,
     label: _propTypes["default"].node.isRequired,
     disabled: _propTypes["default"].bool
   })).isRequired,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    value: _propTypes["default"].string.isRequired,
-    label: _propTypes["default"].any
-  }), _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: _propTypes["default"].string.isRequired,
-    label: _propTypes["default"].any
-  }))]).isRequired,
+  value: _propTypes["default"].oneOfType([valueShape, _propTypes["default"].arrayOf(valueShape)]).isRequired,
   onChange: _propTypes["default"].func.isRequired,
   multiple: _propTypes["default"].bool,
   direction: _propTypes["default"].oneOf(["row", "column"]),

package/docs/src/docs/components/enclosed-select-group.mdx

@@ -143,3 +143,45 @@ The `direction` prop can be used to change the direction of the items.
   multiple
 />
 ```
+
+## Partial
+
+We can set the partial state of a select group item by setting its value to `PARTIAL`.
+
+<Excerpt>
+  <ControlledEnclosedSelectGroup
+    items={[
+      { value: "one", label: <u>One</u> },
+      { value: "two", label: "Two" },
+      { value: "three", label: "Three" },
+    ]}
+    value={[
+      {
+        value: "one",
+        state: "PARTIAL",
+      },
+    ]}
+    onChange={console.log}
+    direction="column"
+    multiple
+  />
+</Excerpt>
+
+```jsx
+<EnclosedSelectGroup
+  items={[
+    { value: "one", label: <u>One</u> },
+    { value: "two", label: "Two" },
+    { value: "three", label: "Three" },
+  ]}
+  value={[
+    {
+      value: "one",
+      state: "PARTIAL",
+    },
+  ]}
+  onChange={console.log}
+  direction="column"
+  multiple
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.163",
+  "version": "0.1.165",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {