@lanaco/lnc-react-ui 3.3.0 → 3.6.0

package/lib/index.esm.js

@@ -47829,7 +47829,7 @@ var _excluded$Z = ["icon", "iconStyle", "size", "borderRadius", "btnType", "disa
 
 //=================================================
 
-var Button = function Button(props) {
+var Button = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var icon = props.icon,
     iconStyle = props.iconStyle,
     size = props.size,
@@ -47915,7 +47915,7 @@ var Button = function Button(props) {
     onClick: onClick,
     onKeyDown: onKeyDown
   }, rest), renderIcon());
-};
+});
 Button.defaultProps = {
   icon: "",
   iconStyle: "solid",
@@ -70760,7 +70760,7 @@ const useInteractions = function (propsList) {
 
 var _excluded$N = ["children", "modal"],
   _excluded2$3 = ["children", "asChild"],
-  _excluded3$1 = ["borderRadius", "className", "style"],
+  _excluded3$1 = ["borderRadius", "className", "zIndex", "style"],
   _excluded4$1 = ["children"],
   _excluded6 = ["children"];
 var _templateObject$K;
@@ -70906,6 +70906,7 @@ var PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent(_ref4
   var _state$y, _state$x;
   var borderRadius = _ref4.borderRadius,
     className = _ref4.className,
+    zIndex = _ref4.zIndex,
     style = _ref4.style,
     props = _objectWithoutProperties$1(_ref4, _excluded3$1);
   var state = usePopoverState();
@@ -70920,7 +70921,8 @@ var PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent(_ref4
       position: state.strategy,
       top: (_state$y = state.y) !== null && _state$y !== void 0 ? _state$y : 0,
       left: (_state$x = state.x) !== null && _state$x !== void 0 ? _state$x : 0,
-      width: "max-content"
+      width: "max-content",
+      zIndex: zIndex
     },
     "aria-labelledby": state.labelId,
     "aria-describedby": state.descriptionId
@@ -70938,7 +70940,8 @@ PopoverContent.defaultProps = {
 };
 PopoverContent.propTypes = {
   className: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  zIndex: PropTypes.number
 };
 var PopoverHeading = /*#__PURE__*/React.forwardRef(function PopoverHeading(_ref5, ref) {
   var children = _ref5.children,
@@ -70972,7 +70975,7 @@ var PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(_ref7, re
   }), children);
 });
 
-var _excluded$M = ["control", "offsetValue", "placement", "widthFitContent", "closeOnItemSelect", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
+var _excluded$M = ["control", "offsetValue", "placement", "widthFitContent", "closeOnItemSelect", "zIndex", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
 var _templateObject$J, _templateObject2$f;
 var StyledDropDown = newStyled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral([""])));
 var StyledContent = newStyled(motion.div)(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  gap: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -70986,6 +70989,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     placement = props.placement,
     widthFitContent = props.widthFitContent,
     closeOnItemSelect = props.closeOnItemSelect,
+    zIndex = props.zIndex,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onClick = props.onClick,
@@ -71024,14 +71028,14 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (props, ref)
           return /*#__PURE__*/React__default.cloneElement(child, {
             ref: ref ? ref : firstItemRef,
             //needed to focus on navigation
-            color: color,
+            color: child.props.color ? child.props.color : color,
             size: size,
             onItemSelected: handleOnItemSelected,
             animation: animation
           });
         }
         return /*#__PURE__*/React__default.cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: handleOnItemSelected
         });
@@ -71081,7 +71085,9 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (props, ref)
         return !v;
       });
     }
-  }, clonedControl()), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement(StyledContent, {
+  }, clonedControl()), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    zIndex: zIndex
+  }, /*#__PURE__*/React__default.createElement(StyledContent, {
     ref: menuContentRef,
     widthFitContent: widthFitContent,
     color: color,
@@ -71148,6 +71154,10 @@ DropdownMenu.propTypes = {
    * Close menu when item is selected
    */
   closeOnItemSelect: PropTypes.bool,
+  /**
+   * zIndex of dropdown popup
+   */
+  zIndex: PropTypes.number,
   //---------------------------------------------------------------
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
@@ -71376,7 +71386,6 @@ DropdownItem.defaultProps = {
   //-------------------------
   style: {},
   className: "",
-  color: "primary",
   size: "small",
   __TYPE__: "MENU_ITEM"
 };
@@ -82327,7 +82336,7 @@ var NestedDropdownItem = /*#__PURE__*/React__default.forwardRef(function (props,
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
       if (child.props.__TYPE__ == "MENU_ITEM" || child.props.__TYPE__ == "NESTED_ITEM") {
         return /*#__PURE__*/React__default.cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: onItemSelected
         });
@@ -82684,13 +82693,13 @@ var TreeMenu = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
           return /*#__PURE__*/React__default.cloneElement(child, {
             ref: ref ? ref : firstItemRef,
             //needed to focus on navigation
-            color: color,
+            color: child.props.color ? child.props.color : color,
             size: size,
             onItemSelected: onItemSelected
           });
         }
         return /*#__PURE__*/React__default.cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: onItemSelected
         });
@@ -82788,7 +82797,7 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     style: style
   };
   var itemRef = useRef();
-  var _useState = useState(active),
+  var _useState = useState(active == null ? false : active),
     _useState2 = _slicedToArray$2(_useState, 2),
     isActive = _useState2[0],
     setIsActive = _useState2[1];
@@ -82809,7 +82818,8 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onFocus(e);
   };
   var handleOnBlur = function handleOnBlur(e) {
-    setIsActive(false);
+    // TODO : 
+    if (active == null) setIsActive(false);
     onBlur(e);
   };
   var handleOnKeyDown = function handleOnKeyDown(e) {
@@ -82933,7 +82943,7 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   })));
 });
 MenuItem.defaultProps = {
-  active: false,
+  active: null,
   disabled: false,
   isNested: false,
   justifyToEnd: false,
@@ -82948,7 +82958,6 @@ MenuItem.defaultProps = {
   //-------------------------
   style: {},
   className: "",
-  color: "primary",
   size: "small",
   __TYPE__: "MENU_ITEM"
 };
@@ -83017,7 +83026,7 @@ var NestedMenuItem = /*#__PURE__*/React__default.forwardRef(function (props, ref
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
       if (child.props.__TYPE__ == "MENU_ITEM" || child.props.__TYPE__ == "NESTED_ITEM") {
         return /*#__PURE__*/React__default.cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: onItemSelected
         });

package/lib/index.js

@@ -47878,7 +47878,7 @@ var _excluded$Z = ["icon", "iconStyle", "size", "borderRadius", "btnType", "disa
 
 //=================================================
 
-var Button = function Button(props) {
+var Button = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var icon = props.icon,
     iconStyle = props.iconStyle,
     size = props.size,
@@ -47964,7 +47964,7 @@ var Button = function Button(props) {
     onClick: onClick,
     onKeyDown: onKeyDown
   }, rest), renderIcon());
-};
+});
 Button.defaultProps = {
   icon: "",
   iconStyle: "solid",
@@ -70809,7 +70809,7 @@ const useInteractions = function (propsList) {
 
 var _excluded$N = ["children", "modal"],
   _excluded2$3 = ["children", "asChild"],
-  _excluded3$1 = ["borderRadius", "className", "style"],
+  _excluded3$1 = ["borderRadius", "className", "zIndex", "style"],
   _excluded4$1 = ["children"],
   _excluded6 = ["children"];
 var _templateObject$K;
@@ -70955,6 +70955,7 @@ var PopoverContent = /*#__PURE__*/React__namespace.forwardRef(function PopoverCo
   var _state$y, _state$x;
   var borderRadius = _ref4.borderRadius,
     className = _ref4.className,
+    zIndex = _ref4.zIndex,
     style = _ref4.style,
     props = _objectWithoutProperties__default["default"](_ref4, _excluded3$1);
   var state = usePopoverState();
@@ -70969,7 +70970,8 @@ var PopoverContent = /*#__PURE__*/React__namespace.forwardRef(function PopoverCo
       position: state.strategy,
       top: (_state$y = state.y) !== null && _state$y !== void 0 ? _state$y : 0,
       left: (_state$x = state.x) !== null && _state$x !== void 0 ? _state$x : 0,
-      width: "max-content"
+      width: "max-content",
+      zIndex: zIndex
     },
     "aria-labelledby": state.labelId,
     "aria-describedby": state.descriptionId
@@ -70987,7 +70989,8 @@ PopoverContent.defaultProps = {
 };
 PopoverContent.propTypes = {
   className: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].object
+  style: PropTypes__default["default"].object,
+  zIndex: PropTypes__default["default"].number
 };
 var PopoverHeading = /*#__PURE__*/React__namespace.forwardRef(function PopoverHeading(_ref5, ref) {
   var children = _ref5.children,
@@ -71021,7 +71024,7 @@ var PopoverClose = /*#__PURE__*/React__namespace.forwardRef(function PopoverClos
   }), children);
 });
 
-var _excluded$M = ["control", "offsetValue", "placement", "widthFitContent", "closeOnItemSelect", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
+var _excluded$M = ["control", "offsetValue", "placement", "widthFitContent", "closeOnItemSelect", "zIndex", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
 var _templateObject$J, _templateObject2$f;
 var StyledDropDown = newStyled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral__default["default"]([""])));
 var StyledContent = newStyled(motion.div)(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default["default"](["\n  gap: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -71035,6 +71038,7 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
     placement = props.placement,
     widthFitContent = props.widthFitContent,
     closeOnItemSelect = props.closeOnItemSelect,
+    zIndex = props.zIndex,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onClick = props.onClick,
@@ -71073,14 +71077,14 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
           return /*#__PURE__*/React__default["default"].cloneElement(child, {
             ref: ref ? ref : firstItemRef,
             //needed to focus on navigation
-            color: color,
+            color: child.props.color ? child.props.color : color,
             size: size,
             onItemSelected: handleOnItemSelected,
             animation: animation
           });
         }
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: handleOnItemSelected
         });
@@ -71130,7 +71134,9 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
         return !v;
       });
     }
-  }, clonedControl()), /*#__PURE__*/React__default["default"].createElement(PopoverContent, null, /*#__PURE__*/React__default["default"].createElement(StyledContent, {
+  }, clonedControl()), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
+    zIndex: zIndex
+  }, /*#__PURE__*/React__default["default"].createElement(StyledContent, {
     ref: menuContentRef,
     widthFitContent: widthFitContent,
     color: color,
@@ -71197,6 +71203,10 @@ DropdownMenu.propTypes = {
    * Close menu when item is selected
    */
   closeOnItemSelect: PropTypes__default["default"].bool,
+  /**
+   * zIndex of dropdown popup
+   */
+  zIndex: PropTypes__default["default"].number,
   //---------------------------------------------------------------
   onBlur: PropTypes__default["default"].func,
   onFocus: PropTypes__default["default"].func,
@@ -71425,7 +71435,6 @@ DropdownItem.defaultProps = {
   //-------------------------
   style: {},
   className: "",
-  color: "primary",
   size: "small",
   __TYPE__: "MENU_ITEM"
 };
@@ -82376,7 +82385,7 @@ var NestedDropdownItem = /*#__PURE__*/React__default["default"].forwardRef(funct
     if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
       if (child.props.__TYPE__ == "MENU_ITEM" || child.props.__TYPE__ == "NESTED_ITEM") {
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: onItemSelected
         });
@@ -82733,13 +82742,13 @@ var TreeMenu = /*#__PURE__*/React__default["default"].forwardRef(function (props
           return /*#__PURE__*/React__default["default"].cloneElement(child, {
             ref: ref ? ref : firstItemRef,
             //needed to focus on navigation
-            color: color,
+            color: child.props.color ? child.props.color : color,
             size: size,
             onItemSelected: onItemSelected
           });
         }
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: onItemSelected
         });
@@ -82837,7 +82846,7 @@ var MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function (props
     style: style
   };
   var itemRef = React.useRef();
-  var _useState = React.useState(active),
+  var _useState = React.useState(active == null ? false : active),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     isActive = _useState2[0],
     setIsActive = _useState2[1];
@@ -82858,7 +82867,8 @@ var MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function (props
     onFocus(e);
   };
   var handleOnBlur = function handleOnBlur(e) {
-    setIsActive(false);
+    // TODO : 
+    if (active == null) setIsActive(false);
     onBlur(e);
   };
   var handleOnKeyDown = function handleOnKeyDown(e) {
@@ -82982,7 +82992,7 @@ var MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function (props
   })));
 });
 MenuItem.defaultProps = {
-  active: false,
+  active: null,
   disabled: false,
   isNested: false,
   justifyToEnd: false,
@@ -82997,7 +83007,6 @@ MenuItem.defaultProps = {
   //-------------------------
   style: {},
   className: "",
-  color: "primary",
   size: "small",
   __TYPE__: "MENU_ITEM"
 };
@@ -83066,7 +83075,7 @@ var NestedMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function
     if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
       if (child.props.__TYPE__ == "MENU_ITEM" || child.props.__TYPE__ == "NESTED_ITEM") {
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          color: color,
+          color: child.props.color ? child.props.color : color,
           size: size,
           onItemSelected: onItemSelected
         });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lanaco/lnc-react-ui",
   "type": "module",
-  "version": "3.3.0",
+  "version": "3.6.0",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",