oa-componentbook 1.0.1-stage.46 → 1.0.1-stage.460

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

@@ -0,0 +1,515 @@
+"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.json.stringify.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...',
+    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;
+
+  // Constants
+  const SEARCH_INPUT_WIDTH = '350px';
+
+  // Search state
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+
+  // Filter drawer state
+  const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
+  const [filterValues, setFilterValues] = (0, _react.useState)({});
+  const [appliedFilters, setAppliedFilters] = (0, _react.useState)({});
+
+  // Search handlers
+  const handleSearchChange = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+  const handleSearchPressEnter = () => {
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+
+  // Filter handlers
+  const handleOpenFilterDrawer = () => {
+    // Sync filterValues with appliedFilters when opening drawer
+    setFilterValues(appliedFilters);
+    setIsFilterDrawerVisible(true);
+  };
+  const handleCloseFilterDrawer = () => {
+    // Revert filterValues to appliedFilters when closing without applying
+    setFilterValues(appliedFilters);
+    setIsFilterDrawerVisible(false);
+  };
+  const handleFilterChange = function handleFilterChange(key, value) {
+    let action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'change';
+    // Normalize empty values: convert empty string to null for consistency
+    const normalizedValue = value === '' ? null : value;
+    const updatedFilters = _objectSpread(_objectSpread({}, filterValues), {}, {
+      [key]: normalizedValue
+    });
+    setFilterValues(updatedFilters);
+
+    // Call onChange callback if provided for real-time filter changes
+    if (onFilterChange) {
+      onFilterChange(key, normalizedValue, updatedFilters, action);
+    }
+  };
+  const handleApplyFilters = () => {
+    setIsFilterDrawerVisible(false);
+    // Save applied filters
+    setAppliedFilters(filterValues);
+    if (onFiltersApply) {
+      onFiltersApply(filterValues);
+    }
+  };
+  const handleClearFilters = () => {
+    setFilterValues({});
+    setAppliedFilters({});
+    if (onFiltersClear) {
+      onFiltersClear();
+    }
+  };
+
+  // Memoized required keys calculation for better performance
+  const requiredKeys = (0, _react.useMemo)(() => {
+    const keys = [];
+    filterConfig.forEach(filter => {
+      const {
+        type,
+        key,
+        required,
+        fields = []
+      } = filter;
+      if (required) {
+        if (type === 'dateRange' || type === 'group') {
+          fields.forEach(field => {
+            keys.push(field.key);
+          });
+        } else {
+          keys.push(key);
+        }
+      }
+    });
+    return keys;
+  }, [filterConfig]);
+
+  // Create a stable string representation of filterValues for required keys
+  // This ensures reliable dependency tracking in production builds
+  const requiredFieldsSignature = (0, _react.useMemo)(() => requiredKeys.map(key => {
+    const value = filterValues[key];
+    // Create a stable string representation that changes when value changes
+    if (value === undefined || value === null) return "".concat(key, ":null");
+    if (value instanceof Date) return "".concat(key, ":").concat(value.getTime());
+    return "".concat(key, ":").concat(JSON.stringify(value));
+  }).join('|'), [requiredKeys, filterValues]);
+
+  // Memoized check if all required fields are filled
+  const areAllRequiredFieldsFilled = (0, _react.useMemo)(() => {
+    // If no required fields, button should be enabled
+    if (requiredKeys.length === 0) {
+      return true;
+    }
+
+    // Check each required field has a valid value
+    return requiredKeys.every(requiredKey => {
+      const value = filterValues[requiredKey];
+
+      // Check if value exists and is not empty/null/undefined
+      // Also handle edge cases: empty arrays, empty objects, etc.
+      if (value === undefined || value === null || value === '') {
+        return false;
+      }
+
+      // Handle arrays
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+
+      // Handle objects (but allow Date objects and other valid objects)
+      if (typeof value === 'object' && !(value instanceof Date)) {
+        return Object.keys(value).length > 0;
+      }
+      return true;
+    });
+  }, [requiredKeys, requiredFieldsSignature, filterValues]);
+
+  // Helper function to check if a value is non-empty
+  const isValueNonEmpty = value => {
+    if (value === undefined || value === null || value === '') {
+      return false;
+    }
+
+    // Handle arrays
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+
+    // Handle objects (but allow Date objects and other valid objects)
+    if (typeof value === 'object' && !(value instanceof Date)) {
+      return Object.keys(value).length > 0;
+    }
+    return true;
+  };
+
+  // Helper function to check if filters are applied
+  const hasAppliedFilters = (0, _react.useMemo)(() => {
+    // Check if filters were actually applied (Apply Filter button was clicked)
+    const appliedFilterKeys = Object.keys(appliedFilters);
+    if (appliedFilterKeys.length === 0) {
+      return false;
+    }
+
+    // Check if any applied filter has a non-empty value
+    return appliedFilterKeys.some(key => isValueNonEmpty(appliedFilters[key]));
+  }, [appliedFilters]);
+
+  // Helper function to determine notFoundContent message
+  const getNotFoundContent = (isApiCallInProgress, query) => {
+    if (!isApiCallInProgress && (query === null || query === void 0 ? void 0 : query.length) < 3) {
+      return 'Start Typing atleast 3 characters';
+    }
+    if (isApiCallInProgress && (query === null || query === void 0 ? void 0 : query.length) > 0) {
+      return 'Loading...';
+    }
+    return 'No data found';
+  };
+
+  // Helper function to render CustomSelect (DRY principle)
+  const renderSelect = (fieldKey, fieldConfig) => {
+    const {
+      placeholder,
+      options = [],
+      loading = false,
+      isApiCallInProgress = false,
+      searchValue: query = '',
+      showSearch: fieldShowSearch = false,
+      filterOption,
+      disabled = false
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    const isLoading = filtersLoading || loading || isApiCallInProgress;
+    const notFoundContent = getNotFoundContent(isApiCallInProgress, query);
+    return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+      placeholder: placeholder || 'Select an option',
+      value: fieldValue || undefined,
+      options: options,
+      onSelectionChange: val => {
+        // Normalize: null/undefined means clear action
+        const action = val === null || val === undefined ? 'clear' : 'select';
+        handleFilterChange(fieldKey, val, action);
+      },
+      onSearch: searchText => {
+        // For search, pass the search text as-is (don't normalize to null)
+        handleFilterChange(fieldKey, searchText || null, '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: notFoundContent
+    });
+  };
+
+  // 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,
+      containerSize: "small",
+      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 /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, null, renderSelect(key, filter));
+      case 'date':
+        return /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, null, 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), 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.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 = dataSource;
+  const totalRecords = total !== null && total !== void 0 ? total : displayData.length;
+
+  // Button configuration for filter drawer footer
+  const filterDrawerButtonConfig = [{
+    callback: handleClearFilters,
+    label: 'Clear All',
+    type: 'secondary'
+  }, {
+    callback: handleApplyFilters,
+    label: 'Apply Filter',
+    type: 'primary',
+    disabled: !areAllRequiredFieldsFilled
+  }];
+  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: SEARCH_INPUT_WIDTH,
+      flexShrink: 0
+    }
+  }), showFilters && /*#__PURE__*/_react.default.createElement(_styles.FilterButtonWrapper, null, /*#__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'
+    },
+    style: {
+      borderColor: '#1890ff',
+      color: '#1890ff'
+    }
+  }), hasAppliedFilters && /*#__PURE__*/_react.default.createElement(_styles.FilterIndicatorDot, null))), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: filterDrawerTitle,
+    placement: "right",
+    isBaseDrawer: true,
+    onClose: handleCloseFilterDrawer,
+    open: isFilterDrawerVisible,
+    visible: isFilterDrawerVisible,
+    closable: false,
+    width: 400,
+    buttonConfig: filterDrawerButtonConfig
+  }, /*#__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(_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,
+    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...'
+  },
+  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,25 @@
+"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.FilterIndicatorDot = exports.FilterGroup = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.FilterButtonWrapper = 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, _templateObject15;
+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  button.secondary {\n    border-color: #1890ff !important;\n    color: #1890ff !important;\n  }\n  button.secondary:hover {\n    border-color: #1890ff !important;\n    color: #1890ff !important;\n  }\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 FilterGroup = exports.FilterGroup = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterSubField = exports.FilterSubField = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+const FilterSubLabel = exports.FilterSubLabel = _styledComponents.default.label(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content, #212121);\n"])));
+const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const FilterIndicatorDot = exports.FilterIndicatorDot = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #de350b;\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  border-radius: 50%;\n  z-index: 1;\n"])));

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

@@ -10,9 +10,12 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _utils = require("../../utils");
+var _CustomToggle = _interopRequireDefault(require("../oa-component-toggle/CustomToggle"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
-const _excluded = ["data", "data-test", "defaultActiveKey", "disabled", "style", "tabPosition", "type"],
+const _excluded = ["data", "data-test", "defaultActiveKey", "disabled", "extraAction", "style", "tabPosition", "type"],
   _excluded2 = ["body", "disabled", "key", "label"];
+/* eslint-disable */
 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); }
 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; }
@@ -29,6 +32,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * @param {string} [data-test] - A string to be used as data-test attribute.
  * @param {string} defaultActiveKey - Key of the initially active tab.
  * @param {boolean} disabled - Whether the tabs are disabled.
+ * @param {Object} extraAction - Configuration for extra action on the right side of tabs.
+ * @param {string} extraAction.type - Type of extra action ('switch').
+ * @param {boolean} extraAction.visible - Whether to show the extra action (default: true).
+ * @param {Object} extraAction.props - Props to pass to the extra action component.
  * @param {Object} style - An object containing CSS styles for the component.
  * @param {'top'|'right'|'bottom'|'left'} tabPosition - Position of the tab headers.
  * @param {'line'|'card'} type - Type of the tabs.
@@ -41,12 +48,13 @@ function CustomTabs(_ref) {
       'data-test': dataTest,
       defaultActiveKey,
       disabled,
+      extraAction,
       style,
       tabPosition,
       type
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
-  const items = data.tabs.map(_ref2 => {
+  const items = data.tabs && data.tabs.map(_ref2 => {
     let {
         body,
         disabled: isTabDisabed,
@@ -63,13 +71,42 @@ function CustomTabs(_ref) {
       }, label) : label
     }, otherProps);
   });
+
+  /**
+   * Renders the extra action component based on the type.
+   * @returns {React.ReactNode} The rendered extra action component or null.
+   */
+  const renderExtraAction = () => {
+    if (!extraAction || !extraAction.type) {
+      return null;
+    }
+
+    // Check if extraAction is visible (defaults to true if not specified)
+    if (extraAction.visible === false) {
+      return null;
+    }
+    switch (extraAction.type) {
+      case 'switch':
+        return /*#__PURE__*/_react.default.createElement(_styles.ExtraActionWrapper, null, extraAction.label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: extraAction.labelColor || 'secondary-content',
+          typography: extraAction.labelTypography || 'type-b2-400'
+        }, extraAction.label), /*#__PURE__*/_react.default.createElement(_CustomToggle.default, _extends({
+          "data-test": dataTest ? "".concat(dataTest, "--extra-action-switch") : undefined,
+          size: extraAction.size || 'small'
+        }, extraAction.props)));
+      default:
+        return null;
+    }
+  };
+  const tabBarExtraContent = renderExtraAction();
   return /*#__PURE__*/_react.default.createElement(_styles.StyledTabs, null, /*#__PURE__*/_react.default.createElement(_antd.Tabs, _extends({
     defaultActiveKey: defaultActiveKey,
-    disabled: true,
+    disabled: disabled,
     items: items,
     style: _objectSpread({}, style),
     tabPosition: tabPosition,
-    type: type
+    type: type,
+    tabBarExtraContent: tabBarExtraContent
   }, antDesignProps)));
 }
 CustomTabs.propTypes = {
@@ -84,6 +121,15 @@ CustomTabs.propTypes = {
   'data-test': _propTypes.default.string,
   defaultActiveKey: _propTypes.default.string,
   disabled: _propTypes.default.bool,
+  extraAction: _propTypes.default.shape({
+    type: _propTypes.default.oneOf(['switch']).isRequired,
+    visible: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelColor: _propTypes.default.string,
+    labelTypography: _propTypes.default.string,
+    size: _propTypes.default.oneOf(['large', 'small']),
+    props: _propTypes.default.objectOf(_propTypes.default.any)
+  }),
   tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
   type: _propTypes.default.oneOf(['line', 'card'
   // 'editable-card',
@@ -97,6 +143,7 @@ CustomTabs.defaultProps = {
   tabPosition: 'top',
   type: 'line',
   disabled: false,
+  extraAction: null,
   style: {}
 };
 var _default = exports.default = CustomTabs;

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledTabs = void 0;
+exports.default = exports.StyledTabs = exports.ExtraActionWrapper = void 0;
 var _antd = require("antd");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+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) } })); }
 var _default = exports.default = {};
-const StyledTabs = exports.StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n    padding: 12px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .ant-tabs-tab-disabled{\n    color: var(--color-disabled-button) !important;\n  }\n  s.ant-tabs-tab-disabled:hover {\n    color: var(--color-disabled-button) !important;\n}\n  .ant-tabs .ant-tabs-tab+.ant-tabs-tab{\n    margin: 0;\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));
+const StyledTabs = exports.StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n    padding: 12px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .ant-tabs-tab-disabled{\n    color: var(--color-disabled-button) !important;\n  }\n  s.ant-tabs-tab-disabled:hover {\n    color: var(--color-disabled-button) !important;\n}\n  .ant-tabs .ant-tabs-tab+.ant-tabs-tab{\n    margin: 0;\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));
+const ExtraActionWrapper = exports.ExtraActionWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));