tabler-react-2 0.1.171 → 0.1.173

package/dist/dropdown/index.js

@@ -19,6 +19,18 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       onclick();
     }
   };
+  var isPrimitive = function isPrimitive(val) {
+    return typeof val === "string" || typeof val === "number";
+  };
+  var getItemKey = function getItemKey(item, index) {
+    if ((item === null || item === void 0 ? void 0 : item.key) !== undefined && (item === null || item === void 0 ? void 0 : item.key) !== null) {
+      return item.key;
+    }
+    if ((item === null || item === void 0 ? void 0 : item.id) !== undefined && (item === null || item === void 0 ? void 0 : item.id) !== null) {
+      return item.id;
+    }
+    return index;
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown"
   }, /*#__PURE__*/_react["default"].createElement("a", {
@@ -29,21 +41,32 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
   }, prompt), /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown-menu"
   }, items.map(function (item, index) {
+    var key = getItemKey(item, index);
     if (item.type === "divider") {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: index,
+        key: key,
         className: "dropdown-divider"
       });
     }
     if (item.type === "header") {
       return /*#__PURE__*/_react["default"].createElement("span", {
-        key: index,
+        key: key,
         className: "dropdown-header"
       }, item.text);
     }
+    var hasInteraction = Boolean(item.href || item.onclick);
+    var shouldRenderAsStaticItem = !hasInteraction && !isPrimitive(item.text);
+    if (shouldRenderAsStaticItem) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: key,
+        className: "dropdown-item"
+      }, item.icon && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "dropdown-item-icon"
+      }, item.icon), item.text);
+    }
     return /*#__PURE__*/_react["default"].createElement("a", {
-      key: index,
-      href: item.href || "#",
+      key: key,
+      href: item.href || "javascript:void(0)",
       className: "dropdown-item".concat(item.active ? " active" : "").concat(item.disabled ? " disabled" : ""),
       onClick: function onClick(e) {
         return handleClick(e, item.onclick);
@@ -60,7 +83,9 @@ Dropdown.propTypes = {
   prompt: _propTypes["default"].string.isRequired,
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     type: _propTypes["default"].oneOf(["item", "divider", "header"]).isRequired,
-    text: _propTypes["default"].string,
+    key: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    text: _propTypes["default"].node,
     href: _propTypes["default"].string,
     onclick: _propTypes["default"].func,
     disabled: _propTypes["default"].bool,

package/dist/offcanvas/index.js

@@ -32,7 +32,6 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
     size = _ref$size === void 0 ? 300 : _ref$size,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex;
-  // backdrop style
   var backdropStyle = (0, _react.useMemo)(function () {
     return {
       position: "fixed",
@@ -43,9 +42,7 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
       backgroundColor: "rgba(0,0,0,0.1)",
       zIndex: zIndex - 1
     };
-  }, []);
-
-  // offcanvas container style
+  }, [zIndex]);
   var containerStyle = (0, _react.useMemo)(function () {
     var base = {
       position: "fixed",
@@ -91,7 +88,7 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
           transform: show ? "translateX(0)" : "translateX(-100%)"
         });
     }
-  }, [position, show]);
+  }, [position, show, size, zIndex]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, show && /*#__PURE__*/_react["default"].createElement("div", {
     style: backdropStyle,
     onClick: onHide
@@ -103,13 +100,9 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
 });
 Offcanvas.displayName = "Offcanvas";
 Offcanvas.propTypes = {
-  /** Show or hide the offcanvas */
   show: _propTypes["default"].bool.isRequired,
-  /** Callback when the backdrop is clicked */
   onHide: _propTypes["default"].func.isRequired,
-  /** Position: 'start' (left), 'end' (right), 'top', or 'bottom' */
   position: _propTypes["default"].oneOf(["start", "end", "top", "bottom"]),
-  /** Content inside the offcanvas */
   children: _propTypes["default"].node
 };
 Offcanvas.defaultProps = {
@@ -127,10 +120,14 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var _useState3 = (0, _react.useState)(Math.random()),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    rand = _useState4[0],
-    setRand = _useState4[1];
+    isMounted = _useState4[0],
+    setIsMounted = _useState4[1];
+  var _useState5 = (0, _react.useState)(Math.random()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rand = _useState6[0],
+    setRand = _useState6[1];
   var offcanvas = (0, _react.useCallback)(function () {
     var newOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return new Promise(function (resolve) {
@@ -143,6 +140,7 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
           position: (_newOptions$position = newOptions.position) !== null && _newOptions$position !== void 0 ? _newOptions$position : prev.position
         });
       });
+      setIsMounted(true); // mount instantly
       setRand(Math.random());
     });
   }, []);
@@ -157,11 +155,23 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
       });
     });
   }, [state.resolve]);
+
+  // Delay unmount by 500ms to allow animation
+  (0, _react.useEffect)(function () {
+    if (!state.show && isMounted) {
+      var timer = setTimeout(function () {
+        setIsMounted(false);
+      }, 500);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [state.show, isMounted]);
   var OffcanvasElement = /*#__PURE__*/_react["default"].createElement(Offcanvas, _extends({
     show: state.show,
     onHide: close,
     position: state.position
-  }, options.offcanvasProps || {}), /*#__PURE__*/_react["default"].createElement(_button.Button, {
+  }, options.offcanvasProps || {}), isMounted && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
     type: "button",
     className: "btn-close",
     "aria-label": "Close",
@@ -173,7 +183,7 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
     }
   }), /*#__PURE__*/_react["default"].createElement("div", {
     key: rand
-  }, state.content));
+  }, state.content)));
   return {
     offcanvas: offcanvas,
     OffcanvasElement: OffcanvasElement,