tabler-react-2 0.1.125 → 0.1.126

package/dist/input/dropdown.js

@@ -44,24 +44,18 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     maxHeight = _ref$maxHeight === void 0 ? "300px" : _ref$maxHeight,
     required = _ref.required,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Allow aliasing: pass either `values` or `items`
   var values = ivalues || items || [];
-
-  // Helper: extract text from label or dropdownText for filtering
   var getLabelText = function getLabelText(val) {
     var _val$dropdownText;
-    // if it's a header/divider, it won't have dropdownText or label
+    if (val.type === "header") return String(val.text);
     var node = (_val$dropdownText = val.dropdownText) !== null && _val$dropdownText !== void 0 ? _val$dropdownText : val.label;
     if (typeof node === "string" || typeof node === "number") {
       return String(node);
     }
-    var children = _react.Children.toArray(node);
-    return children.map(function (c) {
-      return typeof c === "string" ? c : "";
+    return _react.Children.toArray(node).filter(function (c) {
+      return typeof c === "string";
     }).join("");
   };
-
-  // loading state
   if (loading) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
       className: "form-label"
@@ -70,8 +64,6 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       disabled: true
     }, prompt));
   }
-
-  // disabled state
   if (disabled) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
       className: "form-label"
@@ -79,13 +71,9 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       disabled: true
     }, disabledText || prompt));
   }
-
-  // Helper: if value is an object, use its id; otherwise, assume the value itself is the id.
   var getId = function getId(val) {
     return _typeof(val) === "object" && val !== null ? val.id : val;
   };
-
-  // State for selected value + search
   var _useState = (0, _react.useState)(values.find(function (v) {
       return v.id === getId(value);
     }) || null),
@@ -100,8 +88,6 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     filteredValues = _useState6[0],
     setFilteredValues = _useState6[1];
-
-  // sync selectedValue when prop changes
   (0, _react.useEffect)(function () {
     var match = values.find(function (v) {
       return v.id === getId(value);
@@ -112,20 +98,17 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     var _str$toLowerCase;
     return str === null || str === void 0 || (_str$toLowerCase = str.toLowerCase()) === null || _str$toLowerCase === void 0 ? void 0 : _str$toLowerCase.replace(/[\s_\-+]+/g, "");
   };
-
-  // filter logic
   (0, _react.useEffect)(function () {
     setFilteredValues(values.filter(function (v) {
       var _v$searchIndex;
-      // always keep headers/dividers
       if (v.type === "divider" || v.type === "header") return true;
-      var labelText = getLabelText(v).toLowerCase();
-      return labelText.includes(searchQuery.toLowerCase()) || normalize((_v$searchIndex = v.searchIndex) !== null && _v$searchIndex !== void 0 ? _v$searchIndex : "").includes(normalize(searchQuery));
+      var text = getLabelText(v).toLowerCase();
+      return text.includes(searchQuery.toLowerCase()) || normalize((_v$searchIndex = v.searchIndex) !== null && _v$searchIndex !== void 0 ? _v$searchIndex : "").includes(normalize(searchQuery));
     }));
   }, [searchQuery, values]);
   var handleSelection = function handleSelection(val) {
     setSelectedValue(val);
-    onChange === null || onChange === void 0 || onChange(val);
+    onChange(val);
   };
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "dropdown"
@@ -162,18 +145,21 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
         className: "dropdown-header"
       }, v.text);
     }
-    // normal item
-    var isActive = (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === (_typeof(v) === "object" ? v.id : v);
+    var isActive = (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === v.id;
+    var isItemDisabled = v.disabled === true;
     return /*#__PURE__*/_react["default"].createElement("a", {
       key: (_v$id = v.id) !== null && _v$id !== void 0 ? _v$id : i,
-      className: "dropdown-item".concat(isActive ? " active" : ""),
+      className: "dropdown-item".concat(isActive ? " active" : "").concat(isItemDisabled ? " disabled" : ""),
       onClick: function onClick() {
-        return handleSelection(v);
+        return !isItemDisabled && handleSelection(v);
       },
       style: {
-        cursor: "pointer"
-      }
-    }, (_v$dropdownText = v.dropdownText) !== null && _v$dropdownText !== void 0 ? _v$dropdownText : v.label);
+        cursor: isItemDisabled ? "not-allowed" : "pointer"
+      },
+      href: v.href || "#"
+    }, v.icon && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "dropdown-item-icon"
+    }, v.icon), (_v$dropdownText = v.dropdownText) !== null && _v$dropdownText !== void 0 ? _v$dropdownText : v.label);
   }), filteredValues.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown-item text-muted"
   }, "No results found"))));
@@ -183,26 +169,21 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
 };
 DropdownInput.propTypes = {
   prompt: _propTypes["default"].string.isRequired,
-  // support headers, dividers, and normal items
-  values: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([
-  // divider
-  _propTypes["default"].shape({
+  values: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].shape({
     type: _propTypes["default"].oneOf(["divider"]).isRequired
-  }),
-  // header
-  _propTypes["default"].shape({
+  }), _propTypes["default"].shape({
     type: _propTypes["default"].oneOf(["header"]).isRequired,
     text: _propTypes["default"].string.isRequired
-  }),
-  // normal selectable item
-  _propTypes["default"].shape({
+  }), _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
     label: _propTypes["default"].string.isRequired,
     dropdownText: _propTypes["default"].string,
-    searchIndex: _propTypes["default"].string
+    searchIndex: _propTypes["default"].string,
+    disabled: _propTypes["default"].bool,
+    href: _propTypes["default"].string,
+    icon: _propTypes["default"].node
   })])),
   items: _propTypes["default"].array,
-  // alias for values
   value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired
   }), _propTypes["default"].string, _propTypes["default"].number]),

package/docs/src/docs/changelog.mdx

@@ -2,6 +2,14 @@
 title: Changelog
 ---
 
+# 0.1.125
+
+- Added support for `disabled` in the `DropdownInput` component.
+
+# 0.1.124
+
+- Added support for `seperator` and `header` in the `DropdownInput` component.
+
 # 0.1.123
 
 - Added `icon` prop to the `Table` component.

package/package.json

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