tabler-react-2 0.1.123 → 0.1.124

package/dist/input/dropdown.js

@@ -50,15 +50,18 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
   // 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
     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);
+    if (typeof node === "string" || typeof node === "number") {
+      return String(node);
+    }
     var children = _react.Children.toArray(node);
-    return children.map(function (child) {
-      return typeof child === "string" ? child : "";
+    return children.map(function (c) {
+      return typeof c === "string" ? c : "";
     }).join("");
   };
 
-  // When loading, show a Button in a container with an optional label.
+  // loading state
   if (loading) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
       className: "form-label"
@@ -68,7 +71,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     }, prompt));
   }
 
-  // When disabled, show a disabled Button (with alternate text if provided).
+  // disabled state
   if (disabled) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
       className: "form-label"
@@ -82,9 +85,9 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     return _typeof(val) === "object" && val !== null ? val.id : val;
   };
 
-  // Set up state for the selected value and search/filtering.
-  var _useState = (0, _react.useState)(values.find(function (val) {
-      return val.id === getId(value);
+  // State for selected value + search
+  var _useState = (0, _react.useState)(values.find(function (v) {
+      return v.id === getId(value);
     }) || null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedValue = _useState2[0],
@@ -98,31 +101,32 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     filteredValues = _useState6[0],
     setFilteredValues = _useState6[1];
 
-  // Update the selected value if the prop changes.
+  // sync selectedValue when prop changes
   (0, _react.useEffect)(function () {
-    var matchedValue = values.find(function (val) {
-      return val.id === getId(value);
+    var match = values.find(function (v) {
+      return v.id === getId(value);
     }) || null;
-    setSelectedValue(matchedValue);
+    setSelectedValue(match);
   }, [value, values]);
   var normalize = function normalize(str) {
     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 values based on the search query using getLabelText
+  // filter logic
   (0, _react.useEffect)(function () {
-    setFilteredValues(values.filter(function (val) {
-      var _normalize, _val$searchIndex;
-      return getLabelText(val).toLowerCase().includes(searchQuery.toLowerCase()) || ((_normalize = normalize((_val$searchIndex = val.searchIndex) === null || _val$searchIndex === void 0 ? void 0 : _val$searchIndex.toLowerCase())) === null || _normalize === void 0 ? void 0 : _normalize.includes(normalize(searchQuery).toLowerCase()));
+    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));
     }));
   }, [searchQuery, values]);
   var handleSelection = function handleSelection(val) {
     setSelectedValue(val);
-    if (onChange) onChange(val);
+    onChange === null || onChange === void 0 || onChange(val);
   };
-
-  // The main dropdown markup.
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "dropdown"
   }, props), /*#__PURE__*/_react["default"].createElement("a", _extends({
@@ -136,47 +140,69 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_index.Input, {
     placeholder: "Search...",
     value: searchQuery,
-    onChange: function onChange(value) {
-      return setSearchQuery(value);
+    onChange: function onChange(q) {
+      return setSearchQuery(q);
     }
   })), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       maxHeight: maxHeight,
       overflowY: "auto"
     }
-  }, filteredValues.map(function (val, index) {
-    var _val$dropdownText2;
+  }, filteredValues.map(function (v, i) {
+    var _v$id, _v$dropdownText;
+    if (v.type === "divider") {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: "div-".concat(i),
+        className: "dropdown-divider"
+      });
+    }
+    if (v.type === "header") {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: "hdr-".concat(i),
+        className: "dropdown-header"
+      }, v.text);
+    }
+    // normal item
+    var isActive = (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === (_typeof(v) === "object" ? v.id : v);
     return /*#__PURE__*/_react["default"].createElement("a", {
-      key: index,
-      className: "dropdown-item".concat(selectedValue && selectedValue.id === val.id ? " active" : ""),
+      key: (_v$id = v.id) !== null && _v$id !== void 0 ? _v$id : i,
+      className: "dropdown-item".concat(isActive ? " active" : ""),
       onClick: function onClick() {
-        return handleSelection(val);
+        return handleSelection(v);
       },
       style: {
         cursor: "pointer"
       }
-    }, (_val$dropdownText2 = val.dropdownText) !== null && _val$dropdownText2 !== void 0 ? _val$dropdownText2 : val.label);
+    }, (_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"))));
-
-  // If a label is provided, wrap the dropdown with the label inside a container.
   return label && showLabel ? /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, /*#__PURE__*/_react["default"].createElement("label", {
-    className: "form-label ".concat(required ? "required" : "")
+    className: "form-label".concat(required ? " required" : "")
   }, label), dropdownContent) : dropdownContent;
 };
 DropdownInput.propTypes = {
   prompt: _propTypes["default"].string.isRequired,
-  values: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
-    label: _propTypes["default"].string.isRequired,
-    dropdownText: _propTypes["default"].string
-  })),
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+  // support headers, dividers, and normal items
+  values: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([
+  // divider
+  _propTypes["default"].shape({
+    type: _propTypes["default"].oneOf(["divider"]).isRequired
+  }),
+  // header
+  _propTypes["default"].shape({
+    type: _propTypes["default"].oneOf(["header"]).isRequired,
+    text: _propTypes["default"].string.isRequired
+  }),
+  // normal selectable item
+  _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
     label: _propTypes["default"].string.isRequired,
-    dropdownText: _propTypes["default"].string
-  })),
+    dropdownText: _propTypes["default"].string,
+    searchIndex: _propTypes["default"].string
+  })])),
+  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]),
@@ -189,5 +215,7 @@ DropdownInput.propTypes = {
   label: _propTypes["default"].string,
   showLabel: _propTypes["default"].bool,
   color: _propTypes["default"].string,
-  outline: _propTypes["default"].bool
+  outline: _propTypes["default"].bool,
+  maxHeight: _propTypes["default"].string,
+  required: _propTypes["default"].bool
 };

package/docs/src/docs/changelog.mdx

@@ -2,6 +2,10 @@
 title: Changelog
 ---
 
+# 0.1.123
+
+- Added `icon` prop to the `Table` component.
+
 # 0.1.121
 
 - Modified the `EnclosedSelectGroup` component to have a more consistent behavior when selecting multiple items.

package/package.json

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