tabler-react-2 0.1.91 → 0.1.92

package/dist/input/dropdown.js

@@ -44,6 +44,17 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
   // 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;
+    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 (child) {
+      return typeof child === "string" ? child : "";
+    }).join("");
+  };
+
   // When loading, show a Button in a container with an optional label.
   if (loading) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
@@ -92,17 +103,15 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     setSelectedValue(matchedValue);
   }, [value, values]);
 
-  // Filter values based on the search query.
+  // Filter values based on the search query using getLabelText
   (0, _react.useEffect)(function () {
     setFilteredValues(values.filter(function (val) {
-      return JSON.stringify(val).toLowerCase().includes(searchQuery.toLowerCase());
+      return getLabelText(val).toLowerCase().includes(searchQuery.toLowerCase());
     }));
   }, [searchQuery, values]);
   var handleSelection = function handleSelection(val) {
     setSelectedValue(val);
-    if (onChange) {
-      onChange(val);
-    }
+    if (onChange) onChange(val);
   };
 
   // The main dropdown markup.
@@ -123,6 +132,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       return setSearchQuery(value);
     }
   })), filteredValues.map(function (val, index) {
+    var _val$dropdownText2;
     return /*#__PURE__*/_react["default"].createElement("a", {
       key: index,
       className: "dropdown-item".concat(selectedValue && selectedValue.id === val.id ? " active" : ""),
@@ -132,7 +142,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       style: {
         cursor: "pointer"
       }
-    }, val.dropdownText || val.label);
+    }, (_val$dropdownText2 = val.dropdownText) !== null && _val$dropdownText2 !== void 0 ? _val$dropdownText2 : val.label);
   }), filteredValues.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown-item text-muted"
   }, "No results found")));

package/docs/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "0.1.90"
+    "tabler-react-2": "0.1.91"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/docs/components/dropdown-input.mdx

@@ -39,7 +39,7 @@ The `DropdownInput` component is used to select an option from a list of options
     values={[
       { id: 1, label: "Sam" },
       { id: 2, label: "Bob" },
-      { id: 3, label: "John" },
+      { id: 3, label: <b>John</b> },
     ]}
     onChange={(value) => alert(`Selected value: ${JSON.stringify(value)}`)}
   />

package/docs/src/docs/components/timeline.mdx

@@ -4,7 +4,12 @@ title: Timeline
 
 import { Timeline } from "../../components/LoadableTabler";
 import { Excerpt } from "../../components/Excerpt.jsx";
-import { IconCheck, IconMessage, IconUser } from "@tabler/icons-react";
+import {
+  IconBrandTwitter,
+  IconCheck,
+  IconMessage,
+  IconUser,
+} from "@tabler/icons-react";
 
 Timeline is a component that displays a list of events. Used to communicate a series of related events, usually in a chronological order.
 
@@ -48,7 +53,106 @@ The `events` prop is an array of objects that define the events to display. Each
           title: "+1150 Followers",
           description: "Joined the community",
         },
+        {
+          icon: <IconMessage />,
+          time: "1 hr ago",
+          title: "New message",
+          description: "You have 1 new message",
+        },
+        {
+          icon: <IconUser />,
+          time: "1 hr ago",
+          title: "New user",
+          description: "You have 1 new user",
+        },
       ]}
     />
   </div>
 </Excerpt>
+
+```jsx
+<Timeline
+  events={[
+    {
+      icon: <IconCheck />,
+      time: "10 hrs ago",
+      title: "+1150 Followers",
+      description: "Joined the community",
+    },
+    {
+      icon: <IconMessage />,
+      time: "1 hr ago",
+      title: "New message",
+      description: "You have 1 new message",
+    },
+    {
+      icon: <IconUser />,
+      time: "1 hr ago",
+      title: "New user",
+      description: "You have 1 new user",
+    },
+  ]}
+/>
+```
+
+## Colors
+
+You can set the color of the icon using the `iconBgColor` prop to any of the [colors](/utilities/colors).
+
+<Excerpt>
+  <div style={{ width: 400 }}>
+    <Timeline
+      dense
+      events={[
+        {
+          icon: <IconBrandTwitter />,
+          time: "10 hrs ago",
+          title: "+1150 Followers",
+          description: "New Twitter followers",
+          iconBgColor: "twitter",
+        },
+        {
+          icon: <IconMessage />,
+          time: "1 hr ago",
+          title: "New message",
+          description: "You have 1 new message",
+          iconBgColor: "red",
+        },
+        {
+          icon: <IconUser />,
+          time: "1 hr ago",
+          title: "New user",
+          description: "You have 1 new user",
+        },
+      ]}
+    />
+  </div>
+</Excerpt>
+
+```jsx
+<Timeline
+  dense
+  events={[
+    {
+      icon: <IconBrandTwitter />,
+      time: "10 hrs ago",
+      title: "+1150 Followers",
+      description: "New Twitter followers",
+      iconBgColor: "twitter",
+    },
+    {
+      icon: <IconMessage />,
+      time: "1 hr ago",
+      title: "New message",
+      description: "You have 1 new message",
+      iconBgColor: "red",
+    },
+    {
+      icon: <IconUser />,
+      time: "1 hr ago",
+      title: "New user",
+      description: "You have 1 new user",
+    },
+  ]}
+/>
+```

package/package.json

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