@luminati-io/uikit 3.0.13 → 3.0.15

package/dist/umd/uikit.development.js

@@ -26402,7 +26402,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "prop-types");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./box */ "./src/layout/box.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
+/* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./box */ "./src/layout/box.js");
 // LICENSE_CODE ZON
 
 
@@ -26415,6 +26416,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var Flex = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
   var inline = props.inline,
     align_items = props.align_items,
@@ -26457,7 +26459,7 @@ Flex.propTypes = {
   row_gap: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),
   column_gap: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)
 };
-var StyledFlex = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_box__WEBPACK_IMPORTED_MODULE_3__["default"]).withConfig({
+var StyledFlex = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_box__WEBPACK_IMPORTED_MODULE_4__["default"]).withConfig({
   displayName: "StyledFlex",
   componentId: "sc-2aqm31-0"
 })(["display:", ";align-items:", ";align-content:", ";justify-items:", ";justify-content:", ";flex-wrap:", ";flex-direction:", ";gap:", ";row-gap:", ";column-gap:", ";"], function (props) {
@@ -26474,13 +26476,7 @@ var StyledFlex = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_box__
   return props.$flexWrap;
 }, function (props) {
   return props.$flexDirection;
-}, function (props) {
-  return props.$gap;
-}, function (props) {
-  return props.$rowGap;
-}, function (props) {
-  return props.$columnGap;
-});
+}, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.fromTheme)('gap'), (0,_utils__WEBPACK_IMPORTED_MODULE_3__.fromTheme)('rowGap'), (0,_utils__WEBPACK_IMPORTED_MODULE_3__.fromTheme)('columnGap'));
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Flex);
 
 /***/ }),
@@ -27169,7 +27165,7 @@ var StyledFooterWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default
   displayName: "StyledFooterWrapper",
   componentId: "sc-1nggvo0-3"
 })(["border-top:1px solid ", ";"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_4);
-var ModalBase = function ModalBase(props) {
+var ModalBase = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var id = props.id,
     className = props.className,
     testId = props['data-testid'],
@@ -27183,9 +27179,11 @@ var ModalBase = function ModalBase(props) {
     className: className,
     size: size,
     box_shadow: shadow,
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledHeaderWrapper, null, header), content && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledContentWrapper, null, content), footer && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledFooterWrapper, null, footer));
-};
+});
+ModalBase.displayName = 'ModalBase';
 ModalBase.propTypes = {
   size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg', 'full']),
   shadow: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['none', 'sm', 'md', 'lg']),
@@ -27264,7 +27262,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var General = function General(props) {
+var General = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {
   var id = props.id,
     className = props.className,
     title = props.title,
@@ -27301,9 +27299,11 @@ var General = function General(props) {
     shadow: shadow,
     header: header,
     content: content,
-    footer: footer
+    footer: footer,
+    ref: ref
   });
-};
+});
+General.displayName = 'General';
 General.propTypes = {
   title: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   subtitle: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
@@ -27469,12 +27469,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
 /* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
 /* harmony import */ var _hoc__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hoc */ "./src/hoc/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["show", "zIndex"];
+var _excluded = ["show", "zIndex", "onOutsideClick", "swallowOutsideClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -27489,13 +27491,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var withBackdrop = function withBackdrop(Comp) {
   var WithBackdrop = function WithBackdrop(props) {
-    // XXX davidg: support close on outside-click
     var show = props.show,
       _props$zIndex = props.zIndex,
-      zIndex = _props$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_5__.Z_INDEX.backdrop : _props$zIndex,
+      zIndex = _props$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_6__.Z_INDEX.backdrop : _props$zIndex,
+      onOutsideClick = props.onOutsideClick,
+      _props$swallowOutside = props.swallowOutsideClick,
+      swallowOutsideClick = _props$swallowOutside === void 0 ? true : _props$swallowOutside,
       restProps = _objectWithoutProperties(props, _excluded);
+    var popperElement = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       visible = _useState2[0],
@@ -27523,6 +27529,16 @@ var withBackdrop = function withBackdrop(Comp) {
         return clearTimeout(tid);
       };
     }, [show]);
+    var hideAndStopEvt = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
+      if (!visible) return;
+      if (swallowOutsideClick) {
+        evt.stopPropagation();
+        evt.preventDefault();
+      }
+      if (onOutsideClick) onOutsideClick(evt);
+    }, [visible, swallowOutsideClick, onOutsideClick]);
+    (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useOutsideClick)(popperElement.current, hideAndStopEvt);
+    console.log(popperElement);
     if (!mount) return null;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PopupContainer, {
       zIndex: zIndex
@@ -27531,7 +27547,9 @@ var withBackdrop = function withBackdrop(Comp) {
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CompContainer, {
       show: visible,
       zIndex: zIndex + 1
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Comp, restProps)));
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Comp, _extends({
+      ref: popperElement
+    }, restProps))));
   };
   WithBackdrop.displayName = "WithBackdrop(".concat((0,_hoc__WEBPACK_IMPORTED_MODULE_4__.getDisplayName)(Comp), ")");
   return WithBackdrop;
@@ -27924,7 +27942,7 @@ var TabContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().butt
     return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:200px;height:40px;padding:0 12px;justify-content:space-between;gap:4px;border-radius:0 4px 4px 0;border-left:1px solid transparent;color:", ";&[aria-selected=true]{color:", ";background:", ";border-left-color:", ";}&:hover{color:", ";border-left-color:", ";}&[aria-disabled=true]{color:", ";background:0 none;border-left-color:transparent;}"], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.blue_3, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.blue_11, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_8, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9);
   }
   // main
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:36px;padding:0;justify-content:center;gap:4px;color:", ";box-shadow:0px -2px 0px 0px ", " inset;&[aria-selected=true]{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}&[aria-disabled=true]{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.blue_11, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.blue_11, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_8, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_6, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_6);
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["width:fit-content;height:36px;padding:0;justify-content:center;gap:4px;color:", ";box-shadow:0px -1px 0px 0px ", " inset;&[aria-selected=true]{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&:hover{color:", ";box-shadow:0px -2px 0px 0px ", " inset;}&[aria-disabled=true]{color:", ";box-shadow:0px -1px 0px 0px ", " inset;}"], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_6, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.blue_11, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.blue_11, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_8, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_6);
 });
 var Left = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Left",
@@ -31607,8 +31625,10 @@ function fromTheme(propName, defaultValue) {
     var _ref, _props$propName;
     var value = (_ref = (_props$propName = props[propName]) !== null && _props$propName !== void 0 ? _props$propName : props["$".concat(propName)]) !== null && _ref !== void 0 ? _ref : defaultValue;
     if (value != null) {
-      var _theme$spacing$value;
-      if (propName.indexOf('padding') == 0 || propName.indexOf('margin') == 0) return (_theme$spacing$value = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].spacing[value]) !== null && _theme$spacing$value !== void 0 ? _theme$spacing$value : value;
+      if (propName.indexOf('padding') == 0 || propName.indexOf('margin') == 0 || ['gap', 'rowGap', 'columnGap'].includes(propName)) {
+        var _theme$spacing$value;
+        return (_theme$spacing$value = _theme__WEBPACK_IMPORTED_MODULE_3__["default"].spacing[value]) !== null && _theme$spacing$value !== void 0 ? _theme$spacing$value : value;
+      }
       if (['font_family', 'font_weight', 'font_size', 'line_height', 'letter_spacing', 'color', 'box_shadow'].includes(propName)) {
         return _theme__WEBPACK_IMPORTED_MODULE_3__["default"][propName][value];
       }