tabler-react-2 0.1.82 → 0.1.83

package/dist/input/dropdown.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropdownInput = void 0;
+exports.LoadableDropdownInput = exports.DropdownInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _input = require("./input");
 var _index = require("../index");
-var _excluded = ["prompt", "values", "items", "value", "onChange", "aprops", "showSearch", "loading", "disabled", "disabledText", "label", "showLabel", "color", "outline"];
+var _excluded = ["prompt", "values", "items", "value", "onChange", "aprops", "showSearch"],
+  _excluded2 = ["values", "value", "onChange", "prompt", "loading", "label", "showLabel", "disabled", "disabledText"];
 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; }
@@ -31,45 +31,11 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     aprops = _ref.aprops,
     _ref$showSearch = _ref.showSearch,
     showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    disabledText = _ref.disabledText,
-    label = _ref.label,
-    _ref$showLabel = _ref.showLabel,
-    showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
-    color = _ref.color,
-    outline = _ref.outline,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Allow aliasing: pass either `values` or `items`
-  var values = ivalues || items || [];
-
-  // 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", {
-      className: "form-label"
-    }, label), /*#__PURE__*/_react["default"].createElement(_index.Button, {
-      loading: true,
-      disabled: true
-    }, prompt));
-  }
-
-  // When disabled, show a disabled Button (with alternate text if provided).
-  if (disabled) {
-    return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
-      className: "form-label"
-    }, label), /*#__PURE__*/_react["default"].createElement(_index.Button, {
-      disabled: true
-    }, disabledText || prompt));
-  }
-
-  // Helper: if value is an object, use its id; otherwise, assume the value itself is the id.
+  var values = ivalues || items;
   var getId = function getId(val) {
     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);
     }) || null),
@@ -85,7 +51,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     filteredValues = _useState6[0],
     setFilteredValues = _useState6[1];
 
-  // Update the selected value if the prop changes.
+  // Update selected value if the `value` prop changes
   (0, _react.useEffect)(function () {
     var matchedValue = values.find(function (val) {
       return val.id === getId(value);
@@ -93,55 +59,48 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     setSelectedValue(matchedValue);
   }, [value, values]);
 
-  // Filter values based on the search query.
+  // Filter the dropdown values based on the search query
   (0, _react.useEffect)(function () {
     setFilteredValues(values.filter(function (val) {
       return JSON.stringify(val).toLowerCase().includes(searchQuery.toLowerCase());
     }));
   }, [searchQuery, values]);
-  var handleSelection = function handleSelection(val) {
-    setSelectedValue(val);
+  var handleSelection = function handleSelection(value) {
+    setSelectedValue(value);
     if (onChange) {
-      onChange(val);
+      onChange(value); // Return the full object
     }
   };
-
-  // The main dropdown markup.
-  var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "dropdown"
   }, props), /*#__PURE__*/_react["default"].createElement("a", _extends({
     href: "#",
-    className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(color ? "btn-".concat(outline ? "outline-" : "").concat(color) : ""),
+    className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(props.color ? "btn-".concat(props.outline && "outline-").concat(props.color) : ""),
     "data-bs-toggle": "dropdown"
   }, aprops), selectedValue ? selectedValue.label : prompt), /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown-menu"
   }, showSearch && /*#__PURE__*/_react["default"].createElement("div", {
     className: "px-2 py-1"
-  }, /*#__PURE__*/_react["default"].createElement(_input.Input, {
+  }, /*#__PURE__*/_react["default"].createElement(_index.Input, {
     placeholder: "Search...",
     value: searchQuery,
     onChange: function onChange(value) {
       return setSearchQuery(value);
     }
-  })), filteredValues.map(function (val, index) {
+  })), filteredValues.map(function (value, index) {
     return /*#__PURE__*/_react["default"].createElement("a", {
       key: index,
-      className: "dropdown-item".concat(selectedValue && selectedValue.id === val.id ? " active" : ""),
+      className: "dropdown-item".concat(selectedValue && selectedValue.id === value.id ? " active" : ""),
       onClick: function onClick() {
-        return handleSelection(val);
+        return handleSelection(value);
       },
       style: {
         cursor: "pointer"
       }
-    }, val.dropdownText || val.label);
+    }, value.dropdownText || value.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"
-  }, label), dropdownContent) : dropdownContent;
 };
 DropdownInput.propTypes = {
   prompt: _propTypes["default"].string.isRequired,
@@ -149,23 +108,45 @@ DropdownInput.propTypes = {
     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({
-    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
-    label: _propTypes["default"].string.isRequired,
-    dropdownText: _propTypes["default"].string
-  })),
+  })).isRequired,
   value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired
   }), _propTypes["default"].string, _propTypes["default"].number]),
   onChange: _propTypes["default"].func.isRequired,
-  aprops: _propTypes["default"].object,
-  showSearch: _propTypes["default"].bool,
-  loading: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  disabledText: _propTypes["default"].string,
-  label: _propTypes["default"].string,
-  showLabel: _propTypes["default"].bool,
   color: _propTypes["default"].string,
   outline: _propTypes["default"].bool
+};
+var LoadableDropdownInput = exports.LoadableDropdownInput = function LoadableDropdownInput(_ref2) {
+  var values = _ref2.values,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    prompt = _ref2.prompt,
+    loading = _ref2.loading,
+    label = _ref2.label,
+    _ref2$showLabel = _ref2.showLabel,
+    showLabel = _ref2$showLabel === void 0 ? true : _ref2$showLabel,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    disabledText = _ref2.disabledText,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  if (loading) return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && /*#__PURE__*/_react["default"].createElement("label", {
+    className: "form-label"
+  }, label), /*#__PURE__*/_react["default"].createElement(_index.Button, {
+    loading: true,
+    disabled: true
+  }, prompt));
+  if (disabled) return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && /*#__PURE__*/_react["default"].createElement("label", {
+    className: "form-label"
+  }, label), /*#__PURE__*/_react["default"].createElement(_index.Button, {
+    disabled: true
+  }, disabledText || prompt));
+  return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && /*#__PURE__*/_react["default"].createElement("label", {
+    className: "form-label"
+  }, label), /*#__PURE__*/_react["default"].createElement(DropdownInput, _extends({
+    values: values,
+    value: value,
+    onChange: onChange,
+    prompt: prompt,
+    "data-value": value
+  }, props)));
 };

package/docs/package.json

@@ -21,7 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "^0.1.81"
+    "tabler-react-2": "^0.1.82"
   },
   "devDependencies": {},
   "keywords": [

package/docs/public/page-data/components/dropdown-input/page-data.json

@@ -1 +1 @@
-{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js-content-file-path-src-docs-components-dropdown-input-mdx","path":"/components/dropdown-input/","result":{"data":{"mdx":{"id":"64604855-8780-5836-b431-bbea02d735f8","excerpt":"Dropdown inputs are used to select an option from a list of options. Signature\nimport { DropdownInput } from \"tabler-react-2\";\n\n<DropdownInput {...props…","fields":{"slug":"/components/dropdown-input/"},"frontmatter":{"title":"Dropdown Input","description":null,"image":null,"disableTableOfContents":null},"headings":[{"depth":2,"value":"Signature"},{"depth":3,"value":"Props"},{"depth":2,"value":"Basic Usage"},{"depth":2,"value":"State Machine"},{"depth":2,"value":"Hiding the search input"},{"depth":2,"value":"Disabled"},{"depth":2,"value":""}]}},"pageContext":{"slug":"/components/dropdown-input/","prev":{"label":"Dropdown","link":"/components/dropdown"},"next":{"label":"Colors","link":"/utilities/colors"},"repositoryEditUrl":"https://github.com/jpedroschmitz/rocketdocs/tree/main/examples/gatsby-theme-docs/src/docs/components/dropdown-input.mdx","repositoryProvider":"GitHub","frontmatter":{"title":"Dropdown Input"}}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"],"slicesMap":{}}
+{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js-content-file-path-src-docs-components-dropdown-input-mdx","path":"/components/dropdown-input/","result":{"data":{"mdx":{"id":"64604855-8780-5836-b431-bbea02d735f8","excerpt":"Dropdown inputs are used to select an option from a list of options. Signature\nimport { DropdownInput } from \"tabler-react-2\";\n\n<DropdownInput {...props…","fields":{"slug":"/components/dropdown-input/"},"frontmatter":{"title":"Dropdown Input","description":null,"image":null,"disableTableOfContents":null},"headings":[{"depth":2,"value":"Signature"},{"depth":3,"value":"Props"},{"depth":2,"value":"Basic Usage"},{"depth":2,"value":"State Machine"},{"depth":2,"value":"Hiding the search input"},{"depth":2,"value":"Disabled"}]}},"pageContext":{"slug":"/components/dropdown-input/","prev":{"label":"Dropdown","link":"/components/dropdown"},"next":{"label":"Colors","link":"/utilities/colors"},"repositoryEditUrl":"https://github.com/jpedroschmitz/rocketdocs/tree/main/examples/gatsby-theme-docs/src/docs/components/dropdown-input.mdx","repositoryProvider":"GitHub","frontmatter":{"title":"Dropdown Input"}}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"],"slicesMap":{}}

package/docs/public/page-data/dev-404-page/page-data.json

@@ -1 +1 @@
-{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSiteFunction":{"nodes":[]},"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/404.html"},{"path":"/"},{"path":"/faq/"},{"path":"/utilities/colors/"},{"path":"/getting-started/"},{"path":"/todo/"},{"path":"/utilities/margins/"},{"path":"/components/dropdown/"},{"path":"/components/cards/"},{"path":"/components/avatar/"},{"path":"/components/buttons/"},{"path":"/components/badges/"},{"path":"/components/dropdown-input/"},{"path":"/components/alerts/"},{"path":"/components/hr/"},{"path":"/components/typography/"}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
+{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSiteFunction":{"nodes":[]},"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/404.html"},{"path":"/"},{"path":"/faq/"},{"path":"/getting-started/"},{"path":"/components/alerts/"},{"path":"/components/avatar/"},{"path":"/todo/"},{"path":"/utilities/colors/"},{"path":"/components/badges/"},{"path":"/components/cards/"},{"path":"/components/buttons/"},{"path":"/utilities/margins/"},{"path":"/components/dropdown-input/"},{"path":"/components/hr/"},{"path":"/components/dropdown/"},{"path":"/components/typography/"}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}

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

@@ -33,7 +33,7 @@ The `DropdownInput` component is used to select an option from a list of options
 <Excerpt>
   <DropdownInput
     prompt="Select a value"
-    values={[
+    items={[
       { id: 1, label: "Sam" },
       { id: 2, label: "Bob" },
       { id: 3, label: "John" },
@@ -142,5 +142,3 @@ You can disable the dropdown by passing in `disabled={true}`.
   disabled={true}
 />
 ```
-
-##

package/package.json

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