oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.441

package/build/components/oa-component-table-with-search-and-filter/TableWithSearchAndFilter.js

@@ -0,0 +1,450 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CustomTable = _interopRequireDefault(require("../oa-component-table/CustomTable"));
+var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomDrawer = _interopRequireDefault(require("../oa-component-drawer/CustomDrawer"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomInput = _interopRequireDefault(require("../oa-component-input/CustomInput"));
+var _CustomSelect = _interopRequireDefault(require("../oa-component-select/CustomSelect"));
+var _CustomRadio = _interopRequireDefault(require("../oa-component-radio/CustomRadio"));
+var _CustomDatePicker = _interopRequireDefault(require("../oa-component-datepicker/CustomDatePicker"));
+var _styles = require("./styles");
+const _excluded = ["dataSource", "columns", "rowKey", "emptyText"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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; }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * TableWithSearchAndFilter - A complete table component with search, filters and pagination
+ *
+ * @param {Object} tableProps - Table configuration
+ * @param {Object} searchProps - Search configuration
+ * @param {Object} filterProps - Filter configuration
+ *   @param {boolean} filterProps.show - Show/hide filters
+ *   @param {Array} filterProps.config - Filter field configurations
+ *   @param {Function} filterProps.onApply - Callback when filters are applied
+ *   @param {Function} filterProps.onClear - Callback when filters are cleared
+ *   @param {Function} filterProps.onChange - Callback when any filter value changes (key, value, allFilters, action)
+ *     - action can be: 'search', 'select', 'clear', or 'change'
+ *   @param {boolean} filterProps.loading - Global loading state for all filter selects
+ *   @param {string} filterProps.buttonLabel - Custom filter button label
+ *   @param {string} filterProps.drawerTitle - Custom filter drawer title
+ * @param {Object} paginationProps - Pagination configuration
+ * @param {string} className - Additional CSS class
+ *
+ * Filter Config Options:
+ *   - type: 'select' - Supports `loading`, `showSearch`, `filterOption`, `disabled` properties
+ *   - type: 'radio' - Radio button group
+ *   - type: 'date' - Single date picker
+ *   - type: 'dateRange' - Two date pickers with fields array
+ *   - type: 'group' - Group of fields, each supporting `loading`, `showSearch`, `filterOption`, `disabled` (for select type)
+ */
+function TableWithSearchAndFilter(_ref) {
+  let {
+    tableProps = {},
+    searchProps = {},
+    filterProps = {},
+    paginationProps = {},
+    className = ''
+  } = _ref;
+  // Destructure tableProps with defaults
+  const {
+      dataSource = [],
+      columns = [],
+      rowKey = 'id',
+      emptyText = 'No data found'
+    } = tableProps,
+    restTableProps = _objectWithoutProperties(tableProps, _excluded);
+
+  // Destructure searchProps with defaults
+  const {
+    show: showSearch = true,
+    placeholder: searchPlaceholder = 'Search...',
+    debounceDelay = 500,
+    searchKeys = [],
+    onSearch
+  } = searchProps;
+
+  // Destructure filterProps with defaults
+  const {
+    show: showFilters = true,
+    config: filterConfig = [],
+    onApply: onFiltersApply,
+    onClear: onFiltersClear,
+    onChange: onFilterChange,
+    loading: filtersLoading = false,
+    buttonLabel: filterButtonLabel = 'Filters',
+    drawerTitle: filterDrawerTitle = 'FILTERS'
+  } = filterProps;
+
+  // Destructure paginationProps with defaults
+  const {
+    show: showPagination = true,
+    current = 1,
+    pageSize = 10,
+    total,
+    pageSizeOptions = [10, 20, 50, 100],
+    onChange: onPaginationChange,
+    onShowSizeChange
+  } = paginationProps;
+
+  // Search state
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [filteredData, setFilteredData] = (0, _react.useState)(dataSource);
+  const timerRef = (0, _react.useRef)(null);
+
+  // Filter drawer state
+  const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
+  const [filterValues, setFilterValues] = (0, _react.useState)({});
+  const [appliedFilters, setAppliedFilters] = (0, _react.useState)({});
+
+  // Client-side filtering function
+  const applyFiltersAndSearch = (data, search, filters) => {
+    let result = [...data];
+    if (search && searchKeys.length > 0) {
+      const searchLower = search.toLowerCase();
+      result = result.filter(item => searchKeys.some(key => {
+        var _item$key;
+        return (_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.toString().toLowerCase().includes(searchLower);
+      }));
+    }
+    Object.entries(filters).forEach(_ref2 => {
+      let [key, value] = _ref2;
+      if (value) {
+        result = result.filter(item => {
+          var _item$key2;
+          return ((_item$key2 = item[key]) === null || _item$key2 === void 0 ? void 0 : _item$key2.toString().toLowerCase()) === value.toString().toLowerCase();
+        });
+      }
+    });
+    setFilteredData(result);
+  };
+
+  // Sync filtered data when dataSource changes
+  (0, _react.useEffect)(() => {
+    applyFiltersAndSearch(dataSource, searchValue, appliedFilters);
+  }, [dataSource]);
+
+  // Search handlers
+  const handleSearchChange = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    if (debounceDelay === 0) {
+      if (onSearch) {
+        onSearch(value);
+      } else {
+        applyFiltersAndSearch(dataSource, value, appliedFilters);
+      }
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      if (onSearch) {
+        onSearch(value);
+      } else {
+        applyFiltersAndSearch(dataSource, value, appliedFilters);
+      }
+    }, debounceDelay);
+  };
+  const handleSearchPressEnter = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    if (onSearch) {
+      onSearch(searchValue);
+    } else {
+      applyFiltersAndSearch(dataSource, searchValue, appliedFilters);
+    }
+  };
+  (0, _react.useEffect)(() => () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+
+  // Filter handlers
+  const handleOpenFilterDrawer = () => setIsFilterDrawerVisible(true);
+  const handleCloseFilterDrawer = () => setIsFilterDrawerVisible(false);
+  const handleFilterChange = function handleFilterChange(key, value) {
+    let action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'change';
+    const updatedFilters = _objectSpread(_objectSpread({}, filterValues), {}, {
+      [key]: value
+    });
+    setFilterValues(updatedFilters);
+
+    // Call onChange callback if provided for real-time filter changes
+    if (onFilterChange) {
+      onFilterChange(key, value, updatedFilters, action);
+    }
+  };
+  const handleApplyFilters = () => {
+    setAppliedFilters(_objectSpread({}, filterValues));
+    setIsFilterDrawerVisible(false);
+    if (onFiltersApply) {
+      onFiltersApply(filterValues);
+    } else {
+      applyFiltersAndSearch(dataSource, searchValue, filterValues);
+    }
+  };
+  const handleClearFilters = () => {
+    setFilterValues({});
+    setAppliedFilters({});
+    if (onFiltersClear) {
+      onFiltersClear();
+    } else {
+      applyFiltersAndSearch(dataSource, searchValue, {});
+    }
+  };
+
+  // Helper function to render CustomSelect (DRY principle)
+  const renderSelect = (fieldKey, fieldConfig) => {
+    const {
+      placeholder,
+      options = [],
+      loading = false,
+      isApiCallInProgress = false,
+      showSearch: fieldShowSearch = false,
+      filterOption,
+      disabled = false
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    const isLoading = filtersLoading || loading || isApiCallInProgress;
+    return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+      placeholder: placeholder || 'Select an option',
+      value: fieldValue || undefined,
+      options: options,
+      onSelectionChange: val => {
+        // If val is null/undefined, it's a clear action
+        const action = val === null || val === undefined ? 'clear' : 'select';
+        handleFilterChange(fieldKey, val, action);
+      },
+      onSearch: searchText => handleFilterChange(fieldKey, searchText, 'search'),
+      onChange: val => {
+        // Catch clear from Ant Design's onChange (passes through {...props})
+        if (val === undefined || val === null) {
+          handleFilterChange(fieldKey, null, 'clear');
+        }
+      },
+      allowClear: true,
+      loading: isLoading,
+      showSearch: fieldShowSearch,
+      filterOption: filterOption,
+      disabled: disabled
+      // notFoundContent={(!isApiCallInProgress && query?.length < 3) ? "Start Typing atleast 3 characters" : (isApiCallInProgress && query?.length > 0) ? "Loading..." : "No data found"}
+    });
+  };
+
+  // Helper function to render CustomDatePicker (DRY principle)
+  const renderDatePicker = (fieldKey, fieldConfig) => {
+    const {
+      placeholder
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    return /*#__PURE__*/_react.default.createElement(_CustomDatePicker.default, {
+      placeholder: placeholder || 'Select date',
+      value: fieldValue,
+      onChange: date => handleFilterChange(fieldKey, date, 'change')
+    });
+  };
+
+  // Helper function to render CustomRadio.Group (DRY principle)
+  const renderRadioGroup = (fieldKey, fieldConfig) => {
+    const {
+      options = []
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    return /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+      value: fieldValue,
+      onChange: e => handleFilterChange(fieldKey, e.target.value, 'change')
+    }, options.map(option => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+      key: option.value,
+      value: option.value,
+      label: option.label
+    })));
+  };
+
+  // Render filter input based on type
+  const renderFilterInput = filter => {
+    const {
+      type,
+      key,
+      fields = []
+    } = filter;
+    switch (type) {
+      case 'radio':
+        return renderRadioGroup(key, filter);
+      case 'select':
+        return renderSelect(key, filter);
+      case 'date':
+        return renderDatePicker(key, filter);
+      case 'dateRange':
+        return /*#__PURE__*/_react.default.createElement(_styles.DateRangeContainer, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
+          key: field.key
+        }, /*#__PURE__*/_react.default.createElement(_styles.FilterSubLabel, null, field.label, field.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderDatePicker(field.key, field))));
+      case 'group':
+        return /*#__PURE__*/_react.default.createElement(_styles.FilterGroup, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
+          key: field.key
+        }, /*#__PURE__*/_react.default.createElement(_styles.FilterSubLabel, null, field.label, field.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), field.type === 'select' && renderSelect(field.key, field), field.type === 'date' && renderDatePicker(field.key, field), field.type === 'radio' && renderRadioGroup(field.key, field))));
+      default:
+        return null;
+    }
+  };
+  const displayData = onSearch || onFiltersApply ? dataSource : filteredData;
+  const totalRecords = total !== null && total !== void 0 ? total : displayData.length;
+  return /*#__PURE__*/_react.default.createElement(_styles.TableWithSearchAndFilterContainer, {
+    className: className
+  }, (showSearch || showFilters) && /*#__PURE__*/_react.default.createElement(_styles.Toolbar, null, showSearch && /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    prefix: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _Search.default,
+      size: 20,
+      style: {
+        color: '#8c8c8c'
+      }
+    }),
+    placeholder: searchPlaceholder,
+    value: searchValue,
+    onChange: handleSearchChange,
+    onPressEnter: handleSearchPressEnter,
+    allowClear: true,
+    style: {
+      width: '350px',
+      flexShrink: 0
+    }
+  }), showFilters && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: filterButtonLabel,
+    onClick: handleOpenFilterDrawer,
+    type: "secondary",
+    size: "medium",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _FilterList.default
+      }),
+      position: 'left'
+    }
+  })), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: filterDrawerTitle,
+    placement: "right",
+    isBaseDrawer: true,
+    onClose: handleCloseFilterDrawer,
+    open: isFilterDrawerVisible,
+    visible: isFilterDrawerVisible,
+    closable: false,
+    width: 400
+  }, /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerContent, null, /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerBody, null, filterConfig.length > 0 ? filterConfig.map(filter => /*#__PURE__*/_react.default.createElement(_styles.FilterSection, {
+    key: filter.key
+  }, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, filter.label, filter.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderFilterInput(filter))) : /*#__PURE__*/_react.default.createElement(_styles.FilterSection, null, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, "No filters configured"))), /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerFooter, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: "Clear All",
+    onClick: handleClearFilters,
+    type: "secondary",
+    size: "medium"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: "Apply Filter",
+    onClick: handleApplyFilters,
+    type: "primary",
+    size: "medium"
+  })))), /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+    rowKey: rowKey,
+    dataSource: displayData,
+    columns: columns,
+    pagination: false,
+    emptyText: emptyText
+  }, restTableProps)), showPagination && totalRecords > pageSize && /*#__PURE__*/_react.default.createElement(_styles.PaginationContainer, null, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
+    current: current,
+    pageSize: pageSize,
+    total: totalRecords,
+    onChange: onPaginationChange,
+    onShowSizeChange: onShowSizeChange,
+    pageSizeOptions: pageSizeOptions,
+    showSizeChanger: true,
+    showTotal: true
+  })));
+}
+TableWithSearchAndFilter.propTypes = {
+  tableProps: _propTypes.default.shape({
+    dataSource: _propTypes.default.array,
+    columns: _propTypes.default.array.isRequired,
+    rowKey: _propTypes.default.string,
+    emptyText: _propTypes.default.string
+  }),
+  searchProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    placeholder: _propTypes.default.string,
+    debounceDelay: _propTypes.default.number,
+    searchKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+    onSearch: _propTypes.default.func
+  }),
+  filterProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    config: _propTypes.default.array,
+    onApply: _propTypes.default.func,
+    onClear: _propTypes.default.func,
+    onChange: _propTypes.default.func,
+    loading: _propTypes.default.bool,
+    buttonLabel: _propTypes.default.string,
+    drawerTitle: _propTypes.default.string
+  }),
+  paginationProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    current: _propTypes.default.number,
+    pageSize: _propTypes.default.number,
+    total: _propTypes.default.number,
+    pageSizeOptions: _propTypes.default.array,
+    onChange: _propTypes.default.func,
+    onShowSizeChange: _propTypes.default.func
+  }),
+  className: _propTypes.default.string
+};
+TableWithSearchAndFilter.defaultProps = {
+  tableProps: {
+    dataSource: [],
+    rowKey: 'id',
+    emptyText: 'No data found'
+  },
+  searchProps: {
+    show: true,
+    placeholder: 'Search...',
+    debounceDelay: 500,
+    searchKeys: []
+  },
+  filterProps: {
+    show: true,
+    config: [],
+    buttonLabel: 'Filters',
+    drawerTitle: 'FILTERS'
+  },
+  paginationProps: {
+    show: true,
+    current: 1,
+    pageSize: 10,
+    pageSizeOptions: [10, 20, 50, 100]
+  },
+  className: ''
+};
+var _default = exports.default = TableWithSearchAndFilter;

package/build/components/oa-component-table-with-search-and-filter/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = exports.TableWithSearchAndFilterContainer = exports.RequiredMark = exports.PaginationContainer = exports.FilterSubLabelText = exports.FilterSubLabel = exports.FilterSubField = exports.FilterSection = exports.FilterLabel = exports.FilterGroup = exports.FilterDrawerFooter = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.DateRangeContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const TableWithSearchAndFilterContainer = exports.TableWithSearchAndFilterContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+const Toolbar = exports.Toolbar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 16px;\n\n  @media screen and (max-width: 768px) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n"])));
+const FilterSection = exports.FilterSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
+const FilterLabel = exports.FilterLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n  margin-bottom: 12px;\n"])));
+const RequiredMark = exports.RequiredMark = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: #ff4d4f;\n  margin-left: 2px;\n  font-weight: 400;\n"])));
+const PaginationContainer = exports.PaginationContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n"])));
+const FilterDrawerContent = exports.FilterDrawerContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: calc(100vh - 150px);\n"])));
+const FilterDrawerBody = exports.FilterDrawerBody = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow-y: auto;\n  \n  /* Make radio buttons horizontal */\n  .ant-radio-group {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n  \n  /* Ensure radio wrapper is visible - override line-height: 0 */\n  .ant-radio-wrapper {\n    display: inline-flex !important;\n    align-items: center !important;\n    margin-right: 0 !important;\n    line-height: 1.5 !important;\n  }\n  \n  /* Ensure radio label text is visible */\n  .ant-radio-wrapper span:not(.ant-radio) {\n    line-height: 1.5 !important;\n  }\n  \n  .ant-radio-wrapper p {\n    margin: 0;\n    line-height: 1.5 !important;\n  }\n"])));
+const FilterDrawerFooter = exports.FilterDrawerFooter = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 0;\n  border-top: 1px solid #e8e8e8;\n  margin-top: auto;\n"])));
+const FilterGroup = exports.FilterGroup = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterSubField = exports.FilterSubField = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+const FilterSubLabel = exports.FilterSubLabel = _styledComponents.default.label(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n"])));
+const FilterSubLabelText = exports.FilterSubLabelText = _styledComponents.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content, #212121);\n"])));
+const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));

package/build/components/oa-component-tabs/CustomTabs.js

@@ -46,7 +46,7 @@ function CustomTabs(_ref) {
       type
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
-  const items = data.tabs.map(_ref2 => {
+  const items = data.tabs && data.tabs.map(_ref2 => {
     let {
         body,
         disabled: isTabDisabed,

package/build/components/oa-component-tag/CustomTag.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); } /* eslint-disable */
 /**
  * A simple tag component that displays a label.
  *
@@ -21,28 +23,44 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function CustomTag(_ref) {
   let {
-    'data-test': dataTest,
+    "data-test": dataTest,
     label,
     type,
-    visible
+    visible,
+    bgColor,
+    borderColor,
+    textColor,
+    style
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
     "data-test": dataTest,
     type: type,
-    visible: visible
-  }, /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    visible: visible,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    textColor: textColor
+  }, style && {
+    style
+  }), /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-button-500"
   }, label)));
 }
 CustomTag.propTypes = {
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'recommended']),
-  visible: _propTypes.default.bool
+  type: _propTypes.default.oneOf(["success", "pending", "failed", "recommended", "primary", "blue", "custom"]),
+  visible: _propTypes.default.bool,
+  bgColor: _propTypes.default.string,
+  borderColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  style: _propTypes.default.object
 };
 CustomTag.defaultProps = {
-  'data-test': null,
-  type: '',
-  visible: true
+  "data-test": null,
+  type: "",
+  visible: true,
+  bgColor: "",
+  borderColor: "",
+  textColor: ""
 };
 var _default = exports.default = CustomTag;

package/build/components/oa-component-tag/styles.js

@@ -8,7 +8,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const getColorStyles = type => {
+const getColorStyles = props => {
+  const {
+    type,
+    bgColor,
+    borderColor,
+    textColor
+  } = props;
   if (type === 'success') {
     return {
       backgroundColor: 'var(--color-background-positive)',
@@ -16,6 +22,13 @@ const getColorStyles = type => {
       textColor: 'var(--color-positive)'
     };
   }
+  if (type === 'primary') {
+    return {
+      backgroundColor: 'var(--color-divider)',
+      borderColor: 'var(--color-placeholder-text)',
+      textColor: 'var(--color-primary-content)'
+    };
+  }
   if (type === 'pending') {
     return {
       backgroundColor: 'var(--color-background-warning)',
@@ -37,6 +50,20 @@ const getColorStyles = type => {
       textColor: 'var(--color-negative)'
     };
   }
+  if (type === 'blue') {
+    return {
+      backgroundColor: 'var(--color-background-info)',
+      borderColor: 'var(--color-primary)',
+      textColor: 'var(--color-primary)'
+    };
+  }
+  if (type === 'custom') {
+    return {
+      backgroundColor: bgColor,
+      borderColor,
+      textColor
+    };
+  }
   return {
     backgroundColor: '#CCCCCC',
     borderColor: 'var(--color-primary-content)',
@@ -44,5 +71,5 @@ const getColorStyles = type => {
   };
 };
 var _default = exports.default = {};
-const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n  \n  color: ", ";\n  \n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n  \n  visibility: ", ";\n"])), props => getColorStyles(props.type).textColor, props => getColorStyles(props.type).backgroundColor, props => getColorStyles(props.type).borderColor, props => props.visible ? 'visible' : 'hidden');
-const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+const StyledTag = exports.StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 1px 12px;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: 4px;\n\n  visibility: ", ";\n"])), props => getColorStyles(props).textColor, props => getColorStyles(props).backgroundColor, props => getColorStyles(props).borderColor, props => props.visible ? 'visible' : 'hidden');
+const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex; white-space: nowrap;\n"])));