@luminati-io/uikit 1.7.10 → 1.7.11-beta.1

package/dist/uikit.umd.js

@@ -7770,7 +7770,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["label", "labelIcon", "required", "size", "value", "defaultValue", "placeholder", "options", "onChange", "onFocus", "onBlur", "multiselect", "creatable", "clearable", "disabled", "invalid", "helperText", "classNamePrefix", "menuPortalTarget", "filterOption"];
+var _excluded = ["label", "labelIcon", "required", "size", "value", "defaultValue", "placeholder", "options", "onChange", "onFocus", "onBlur", "multiselect", "creatable", "clearable", "disabled", "invalid", "helperText", "classNamePrefix", "menuPortalTarget", "filterOption", "formatOptionLabel"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7814,6 +7814,7 @@ var Dropdown = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forward
     classNamePrefix = props.classNamePrefix,
     menuPortalTarget = props.menuPortalTarget,
     filterOption = props.filterOption,
+    formatOptionLabel = props.formatOptionLabel,
     rest = _objectWithoutProperties(props, _excluded);
   var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_8__.useLabelId)(props.id);
   var t = (0,_translation__WEBPACK_IMPORTED_MODULE_9__.useTranslation)();
@@ -7832,6 +7833,7 @@ var Dropdown = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forward
     required: required
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectComp, {
     filterOption: filterOption,
+    formatOptionLabel: formatOptionLabel,
     "aria-labelledby": label ? labelId : undefined,
     "aria-invalid": invalid,
     value: value,
@@ -7871,6 +7873,7 @@ Dropdown.propTypes = {
   value: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
   defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
   filterOption: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  formatOptionLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onChange: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
@@ -10483,20 +10486,36 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _hoc__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hoc */ "./src/hoc/index.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
-/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
-/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../tooltip */ "./src/tooltip.js");
-/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _hoc__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hoc */ "./src/hoc/index.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _input__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../input */ "./src/input/index.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../tooltip */ "./src/tooltip.js");
+/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
@@ -10506,38 +10525,108 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
-var CustomizeButton = function CustomizeButton() {
-  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_8__.useTableContext)(),
+
+
+
+var Textbox = _input__WEBPACK_IMPORTED_MODULE_7__["default"].Textbox;
+var CustomizeButton = function CustomizeButton(props) {
+  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_10__.useTableContext)(),
     allColumns = _useTableContext.allColumns;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    return setSearch('');
+  }, [props.searchable]);
   var columns = allColumns.filter(function (col) {
     return col.canHide || col.canPin;
   });
   if (!columns.length) return null;
-  var items = columns.map(function (c) {
+  var filtered = columns.filter(searchColumn(search));
+  var items = filtered.map(function (c) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CustomizeButtonItem, _extends({
       key: c.id
     }, c));
   });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CustomizeButtonPopover, {
-    popoverProps: {
-      items: items
-    }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CustomizeButtonWithPopover, {
+    popoverProps: _objectSpread(_objectSpread({}, props), {}, {
+      items: items,
+      search: search,
+      setSearch: setSearch
+    })
   });
 };
 CustomizeButton.displayName = 'Table.CustomizeButton';
-var ItemsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
-  displayName: "ItemsWrapper",
+CustomizeButton.defaultProps = {
+  maxMenuHeight: 300
+};
+CustomizeButton.propTypes = {
+  searchable: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  maxMenuHeight: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+};
+var PopoverContainer = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "PopoverContainer",
   componentId: "sc-1uptv2h-0"
-})(["display:flex;flex-direction:column;gap:2px;margin:0;padding:4px 0;background:white;border-radius:4px;box-shadow:", ";"], _theme__WEBPACK_IMPORTED_MODULE_6__["default"].box_shadow.md);
-var CustomizeButtonPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_2__.withPopover)(function (p) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_5__["default"], {
+})(["box-shadow:", ";background:white;border-radius:4px;padding:4px 0;min-width:168px;max-width:540px;"], _theme__WEBPACK_IMPORTED_MODULE_8__["default"].box_shadow.md);
+var Search = function Search(props) {
+  var search = props.search,
+    setSearch = props.setSearch;
+  var clearButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    variant: "ghost",
+    icon: "Close",
+    style: {
+      visibility: search ? 'visible' : 'hidden'
+    },
+    onClick: function onClick() {
+      return setSearch('');
+    }
+  });
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    style: {
+      padding: _theme__WEBPACK_IMPORTED_MODULE_8__["default"].spacing["03"]
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Textbox, {
+    leftInnerContent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__["default"], {
+      size: "xs",
+      name: "Search",
+      color: "gray_9"
+    }),
+    rightInnerContent: clearButton,
+    value: search,
+    onChange: setSearch
+  }));
+};
+Search.displayName = 'Search';
+var ItemsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "ItemsWrapper",
+  componentId: "sc-1uptv2h-1"
+})(["width:100%;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;", ""], function (props) {
+  if (props.maxMenuHeight > 0) {
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["max-height:", ";overflow-y:auto;"], (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(props.maxMenuHeight));
+  }
+});
+var CustomizeButtonPopover = function CustomizeButtonPopover(props) {
+  var searchable = props.searchable,
+    search = props.search,
+    setSearch = props.setSearch,
+    maxMenuHeight = props.maxMenuHeight,
+    items = props.items;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PopoverContainer, null, searchable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Search, {
+    search: search,
+    setSearch: setSearch
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ItemsWrapper, {
+    maxMenuHeight: maxMenuHeight
+  }, items));
+};
+CustomizeButtonPopover.displayName = 'CustomizeButtonPopover';
+var CustomizeButtonWithPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_3__.withPopover)(function (p) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_6__["default"], {
     onClick: p.popover.toggle,
     tooltip: "Customize columns",
     icon: "Customize"
   });
-}, function (p) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ItemsWrapper, null, p.items);
-}, {
+}, CustomizeButtonPopover, {
   placement: 'bottom'
 });
 var CustomizeButtonItem = function CustomizeButtonItem(props) {
@@ -10555,7 +10644,7 @@ var CustomizeButtonItem = function CustomizeButtonItem(props) {
   var handleHidden = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     toggleHidden(isVisible);
   }, [isVisible, toggleHidden]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CustomizeButtonItemWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__["default"].Label, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CustomizeButtonItemWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_4__["default"].Label, {
     variant: "sm",
     color: isVisible ? 'gray_11_50' : 'gray_9',
     "data-label": true
@@ -10570,27 +10659,33 @@ var CustomizeButtonItem = function CustomizeButtonItem(props) {
   }));
 };
 CustomizeButtonItem.displayName = 'CustomizeButtonItem';
-var CustomizeButtonItemWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+var CustomizeButtonItemWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "CustomizeButtonItemWrapper",
-  componentId: "sc-1uptv2h-1"
-})(["margin:0;padding:8px 16px;display:flex;align-items:center;gap:4px;min-width:230px;div[data-label]{margin-right:auto;}&:hover{background-color:", ";}"], _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_2);
+  componentId: "sc-1uptv2h-2"
+})(["margin:0;padding:8px 16px;display:flex;align-items:center;gap:4px;min-width:230px;div[data-label]{margin-right:auto;}&:hover{background-color:", ";}"], _theme__WEBPACK_IMPORTED_MODULE_8__["default"].color.gray_2);
 var CustomizeButtonItemAction = function CustomizeButtonItemAction(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CustomizeButtonItemActionWrapper, {
     onClick: props.onClick
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_7__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_9__["default"], {
     tooltip: props.tooltip,
     tooltipPlacement: "top"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_4__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_5__["default"], {
     name: props.icon,
     size: "xs",
     color: "gray_9"
   })));
 };
 CustomizeButtonItemAction.displayName = 'CustomizeButtonItemAction';
-var CustomizeButtonItemActionWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+var CustomizeButtonItemActionWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "CustomizeButtonItemActionWrapper",
-  componentId: "sc-1uptv2h-2"
+  componentId: "sc-1uptv2h-3"
 })(["cursor:pointer;visibility:hidden;", ":hover &{visibility:visible;}"], CustomizeButtonItemWrapper);
+var searchColumn = function searchColumn(search) {
+  return function (col) {
+    var name = col.name || col.id || '';
+    return !search || name.toLowerCase().includes(search.toLowerCase());
+  };
+};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CustomizeButton);
 
 /***/ }),