oa-componentbook 1.0.1-stage.4 → 1.0.1-stage.400

package/build/components/oa-component-select/CustomSelect.js

@@ -22,9 +22,10 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
 var _Elevation = require("../../global-css/Elevation");
-const _excluded = ["allText", "children", "defaultValue", "data-test", "mode", "onSelectionChange", "options", "placeholder"],
+const _excluded = ["allText", "children", "defaultValue", "data-test", "mode", "onSelectionChange", "options", "placeholder", "maxSelectForMultiSelect", "onCustomSelect"],
   _excluded2 = ["label", "disabled", "value"];
 var _templateObject;
+/* eslint-disable */
 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; }
@@ -40,7 +41,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const {
   Option
 } = _antd.Select;
-const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", "\n }\n"])), props => props.maxTagCount === 1 ? 'none' : undefined);
+const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n  .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", ";\n  }\n  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
 
 /**
  * Takes an array of values and an object mapping values to labels and returns an
@@ -75,17 +76,18 @@ function CustomSelect(_ref) {
       allText,
       children,
       defaultValue,
-      'data-test': dataTest,
+      "data-test": dataTest,
       mode,
       onSelectionChange,
       options,
-      placeholder
+      placeholder,
+      maxSelectForMultiSelect,
+      onCustomSelect
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // If allText is present in default values, we select all the options manually.
-
-  const actualDefaultValue = mode === 'multiple' ? [...defaultValue] : defaultValue;
-  if (mode === 'multiple' && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
+  const actualDefaultValue = mode === "multiple" ? [...defaultValue] : defaultValue;
+  if (mode === "multiple" && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
     var _options$filter$map, _options$filter;
     // Emptying the array first.
     actualDefaultValue.length = 0;
@@ -99,52 +101,77 @@ function CustomSelect(_ref) {
       return !((_option$disabled = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false);
     })) === null || _options$filter === void 0 ? void 0 : _options$filter.map(option => option.value)) !== null && _options$filter$map !== void 0 ? _options$filter$map : []));
   }
-  const valueLabelMap = options.reduce((accumulator, option) => {
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
+  const valueLabelMap = Array.isArray(options) && (options === null || options === void 0 ? void 0 : options.reduce((accumulator, option) => {
     var _option$label;
     accumulator[option.value] = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option.value;
     return accumulator;
-  }, {});
-  const actualOptions = options === null || options === void 0 ? void 0 : options.map(option => {
+  }, {}));
+  const actualOptions = Array.isArray(options) && options.map(option => {
     const {
         label,
         disabled = false,
         value
       } = option,
       otherProperties = _objectWithoutProperties(option, _excluded2);
+    const shouldDisableOption = (option, selectedOptions, maxSelectForMultiSelect, allText) => {
+      var _selectedOptions$filt;
+      // If option is already disabled, keep it disabled
+      if (option.disabled) return true;
+
+      // If no max limit, don't disable
+      if (!maxSelectForMultiSelect) return false;
+
+      // If this option is already selected, don't disable it (so user can deselect)
+      if (selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.includes(option.value)) return false;
+
+      // If this is the 'all' option, don't disable it
+      if (option.value === allText) return false;
+
+      // Check if we've reached the max limit (excluding allText)
+      const actualSelectionCount = (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$filt = selectedOptions.filter(val => val !== allText)) === null || _selectedOptions$filt === void 0 ? void 0 : _selectedOptions$filt.length) || 0;
+      return actualSelectionCount >= maxSelectForMultiSelect;
+    };
+
+    // Determine if this option should be disabled due to max limit
+    const shouldBeDisabled = shouldDisableOption(option, selectedOptions, maxSelectForMultiSelect, allText);
+    const finalDisabled = disabled || shouldBeDisabled;
     if ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) {
       return _objectSpread({
         label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-          color: disabled ? 'placeholder-text' : undefined,
+          color: finalDisabled ? "placeholder-text" : undefined,
           typography: "type-b2-400",
+          title: label,
           "data-test": dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
         }, label),
-        disabled,
+        disabled: finalDisabled,
         value
       }, otherProperties);
     }
     if ( /*#__PURE__*/_react.default.isValidElement(label)) {
       return _objectSpread({
         label: dataTest ? /*#__PURE__*/_react.default.cloneElement(label, {
-          'data-test': "".concat(dataTest, "-(").concat(label, ")")
+          "data-test": "".concat(dataTest, "-(").concat(label, ")")
         }) : label,
-        disabled,
+        disabled: finalDisabled,
         value
       }, otherProperties);
     }
     if ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) {
       return _objectSpread({
         label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-          color: disabled ? 'placeholder-text' : undefined,
+          color: finalDisabled ? "placeholder-text" : undefined,
           typography: "type-b2-400",
           "data-test": dataTest ? "".concat(dataTest, "-(").concat(value, ")") : undefined
         }, value),
         value,
-        disabled
+        disabled: finalDisabled
       }, otherProperties);
     }
-    return option;
+    return _objectSpread(_objectSpread({}, option), {}, {
+      disabled: finalDisabled
+    });
   });
-  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
 
   /**
    * Return a placeholder text for the maxTagCount option.
@@ -203,7 +230,18 @@ function CustomSelect(_ref) {
       value
     });
   };
-
+  /**
+   * Checks if maximum selection limit has been reached
+   * @param {Array} currentSelection - Current selected options array
+   * @param {Boolean} isSelecting - Whether we're selecting (true) or deselecting (false)
+   * @returns {Boolean} - True if max limit would be exceeded
+   */
+  const isMaxSelectReached = currentSelection => {
+    var _currentSelection$fil;
+    // Count selections excluding allText if present
+    const actualSelectionCount = (currentSelection === null || currentSelection === void 0 || (_currentSelection$fil = currentSelection.filter(option => option !== allText)) === null || _currentSelection$fil === void 0 ? void 0 : _currentSelection$fil.length) || 0;
+    return actualSelectionCount >= maxSelectForMultiSelect;
+  };
   /**
    * This function is called whenever the selection changes for a multiple select.
    * @param {Boolean} select - True if the option was selected, false if it was deselected.
@@ -222,6 +260,10 @@ function CustomSelect(_ref) {
       newlySelectedOptions.splice(allIndex, 1);
     }
     if (select) {
+      if (maxSelectForMultiSelect && value !== allText && isMaxSelectReached(newlySelectedOptions)) {
+        // Don't proceed with selection if max limit reached
+        return;
+      }
       if (value === allText) {
         newlySelectedOptions.length = 0; // Emptying the array.
 
@@ -229,7 +271,7 @@ function CustomSelect(_ref) {
         addAllOptions(options, newlySelectedOptions);
       } else {
         safePush(newlySelectedOptions, value);
-        const enabledOptions = options.filter(option => {
+        const enabledOptions = options === null || options === void 0 ? void 0 : options.filter(option => {
           var _option$disabled2;
           return !((_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false);
         });
@@ -249,14 +291,14 @@ function CustomSelect(_ref) {
     onSelectionChange(valuesArrayToOptionArray(optionsWithoutAllText, valueLabelMap));
     setSelectedOptions(newlySelectedOptions);
   };
-  const onOptionsChange = mode === 'multiple' ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
+  const onOptionsChange = mode === "multiple" ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
         Select: {
-          optionHeight: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '36px' : '52px',
-          optionSelectedBg: _ColorVariablesMap.default['--color-primary-background'],
-          optionSelectedColor: _ColorVariablesMap.default['--color-primary']
+          optionHeight: (props === null || props === void 0 ? void 0 : props.size) === "small" ? "36px" : "52px",
+          optionSelectedBg: _ColorVariablesMap.default["--color-primary-background"],
+          optionSelectedColor: _ColorVariablesMap.default["--color-primary"]
           // optionPadding: [3, 2],
           // optionPadding: (props?.size === 'small') ? '8px 12px' : '16 16',
           // activeShadow: '0px 0px 4px 0px red', // Box shadow for active select box.
@@ -264,18 +306,18 @@ function CustomSelect(_ref) {
       },
       token: {
         // controlOutline: '4px 4px 4px 4px red', // an attempt at applying box shadow
-        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextPlaceholder: _ColorVariablesMap.default["--color-placeholder-text"],
         // Color of placeholder text
-        colorTextQuaternary: _ColorVariablesMap.default['--color-secondary-content'],
+        colorTextQuaternary: _ColorVariablesMap.default["--color-secondary-content"],
         // Color of dropdown arrow.
 
-        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        colorPrimary: _ColorVariablesMap.default["--color-primary"],
         // for active color of select
-        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
         // for hover color of select
-        borderRadius: '4px',
+        borderRadius: "4px",
         // For border radius of select text field.
-        borderRadiusLG: '4px',
+        borderRadiusLG: "4px",
         // For border radius of dropdown
         controlHeight: 48,
         // height of text field (tag height is half of this, i.e. 24px)
@@ -283,46 +325,56 @@ function CustomSelect(_ref) {
         // height of small text field
 
         // This controls padding of larger text box
-        controlPaddingHorizontalSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
+        controlPaddingHorizontalSM: (props === null || props === void 0 ? void 0 : props.size) === "small" ? 13 : 17,
         // 1 extra so that it shows 12px and 16px in browser console.
-        paddingSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
+        paddingSM: (props === null || props === void 0 ? void 0 : props.size) === "small" ? 13 : 17,
         // paddingSM is what determines padding of input box.
 
-        controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
+        controlItemBgHover: _ColorVariablesMap.default["--color-background-info"],
         // hover color of items
-        colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
+        colorBgElevated: _ColorVariablesMap.default["--color-primary-background"],
         // background color of dropdown
         // multipleItemHeight: 100,
-        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        colorBgContainerDisabled: _ColorVariablesMap.default["--color-divider"],
         // background color of disabled select
-        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
-        colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
+        colorBorder: _ColorVariablesMap.default["--color-placeholder-text"],
+        colorFillSecondary: _ColorVariablesMap.default["--color-secondary-background"],
         // background color for tags
 
-        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        colorText: _ColorVariablesMap.default["--color-primary-content"],
         // Text color of unselected options in dropdown
-        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
+        colorTextDisabled: _ColorVariablesMap.default["--color-secondary-content"],
         // Text color when disabled
 
-        colorIcon: _ColorVariablesMap.default['--color-primary-content'],
+        colorIcon: _ColorVariablesMap.default["--color-primary-content"],
         // Color of cross icon
-        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorError: _ColorVariablesMap.default["--color-negative"],
         // Error color
-        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'],
+        colorErrorBorderHover: _ColorVariablesMap.default["--color-negative"],
         // Hover error color should be same as error color
-        boxShadowSecondary: _Elevation.ElevationMap['elevation-white-1'] // Box shadow of dropdown.
+        boxShadowSecondary: _Elevation.ElevationMap["elevation-white-1"] // Box shadow of dropdown.
       }
     }
   }, /*#__PURE__*/_react.default.createElement(StyledSelect, _extends({
     "data-test": dataTest,
     dropdownStyle: {
-      padding: '0px'
+      padding: "0px"
     },
     mode: mode,
-    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? 'responsive' : 1,
+    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? "responsive" : 1,
     maxTagPlaceholder: getMaxTagPlaceholder,
     onDeselect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(false, value) : undefined,
-    onSelect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(true, value) : undefined,
+    onSelect: (0, _utils.isFunction)(onSelectionChange) || (0, _utils.isFunction)(onCustomSelect) ? value => {
+      if ((0, _utils.isFunction)(onSelectionChange)) {
+        onOptionsChange(true, value);
+      }
+      if ((0, _utils.isFunction)(onCustomSelect)) {
+        const fullOption = options === null || options === void 0 ? void 0 : options.find(opt => opt.value === value);
+        if (fullOption) {
+          onCustomSelect(fullOption);
+        }
+      }
+    } : undefined,
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _KeyboardArrowDown.default,
       size: 20
@@ -333,13 +385,19 @@ function CustomSelect(_ref) {
     placeholder: placeholder
   }, props), allText && /*#__PURE__*/_react.default.createElement(Option, {
     value: allText
-  }, allText), children || (actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.map(actualOption => {
+  }, allText), children || Array.isArray(actualOptions) && (actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.map(actualOption => {
     var _actualOption$disable;
     return /*#__PURE__*/_react.default.createElement(Option, {
       disabled: (_actualOption$disable = actualOption.disabled) !== null && _actualOption$disable !== void 0 ? _actualOption$disable : false,
       value: actualOption.value,
-      key: (0, _utils.getUUID)()
-    }, actualOption.label);
+      key: (0, _utils.getUUID)(),
+      label: actualOption.label
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actualOption.label, (actualOption === null || actualOption === void 0 ? void 0 : actualOption.subLabel) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      color: "secondary-content"
+    }, actualOption === null || actualOption === void 0 ? void 0 : actualOption.subLabel))));
   }))));
 }
 CustomSelect.Option = _antd.Select.Option;
@@ -347,8 +405,8 @@ CustomSelect.propTypes = {
   allText: _propTypes.default.string,
   children: _propTypes.default.node,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.number]),
-  'data-test': _propTypes.default.string,
-  mode: _propTypes.default.oneOf(['multiple', 'tags']),
+  "data-test": _propTypes.default.string,
+  mode: _propTypes.default.oneOf(["multiple", "tags"]),
   onSelectionChange: _propTypes.default.func,
   options: _propTypes.default.arrayOf(
   // Checked from antd's github
@@ -356,17 +414,19 @@ CustomSelect.propTypes = {
     label: _propTypes.default.node,
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
   })),
-  size: _propTypes.default.oneOf(['small', 'middle']),
-  placeholder: _propTypes.default.string
+  size: _propTypes.default.oneOf(["small", "middle"]),
+  placeholder: _propTypes.default.string,
+  maxSelectForMultiSelect: _propTypes.default.number
 };
 CustomSelect.defaultProps = {
   allText: null,
   children: null,
   defaultValue: [],
-  'data-test': null,
+  "data-test": null,
   mode: null,
   onSelectionChange: null,
   options: [],
-  size: 'middle',
-  placeholder: ''
+  size: "middle",
+  placeholder: "",
+  maxSelectForMultiSelect: null
 };

package/build/components/oa-component-steps/CustomSteps.js

@@ -0,0 +1,117 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+var _styles = require("./styles");
+const _excluded = ["data", "data-test", "current", "direction", "size", "labelPlacement", "progressDot", "responsive", "onChange", "style"],
+  _excluded2 = ["key", "title", "subTitle", "description", "icon", "status", "disabled"];
+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; }
+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; }
+/**
+ * CustomSteps: Wrapper around Ant Design Steps with a data-driven API.
+ * - Parent controls current step and can customize via props.
+ * - Accepts `data.steps` array with step configs.
+ */
+function CustomSteps(_ref) {
+  var _data$steps;
+  let {
+      data,
+      'data-test': dataTest,
+      current,
+      direction,
+      size,
+      labelPlacement,
+      progressDot,
+      responsive,
+      onChange,
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const items = ((_data$steps = data === null || data === void 0 ? void 0 : data.steps) !== null && _data$steps !== void 0 ? _data$steps : []).map(_ref2 => {
+    let {
+        key,
+        title,
+        subTitle,
+        description,
+        icon,
+        status,
+        disabled
+      } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
+    return _objectSpread({
+      key: key !== null && key !== void 0 ? key : (0, _utils.getUUID)(),
+      title: dataTest && ((0, _utils.isString)(title) || (0, _utils.isNumber)(title)) ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--title-(").concat(title, ")")
+      }, title) : title,
+      subTitle,
+      description,
+      icon,
+      status,
+      disabled
+    }, otherProps);
+  });
+  return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.Steps, _extends({
+    current: current,
+    direction: direction,
+    size: size,
+    labelPlacement: labelPlacement,
+    progressDot: progressDot,
+    responsive: responsive,
+    items: items,
+    onChange: onChange
+  }, antDesignProps)));
+}
+CustomSteps.propTypes = {
+  data: _propTypes.default.shape({
+    steps: _propTypes.default.arrayOf(_propTypes.default.shape({
+      key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      title: _propTypes.default.node,
+      subTitle: _propTypes.default.node,
+      description: _propTypes.default.node,
+      icon: _propTypes.default.node,
+      status: _propTypes.default.oneOf(['wait', 'process', 'finish', 'error']),
+      disabled: _propTypes.default.bool
+    }))
+  }),
+  'data-test': _propTypes.default.string,
+  current: _propTypes.default.number,
+  direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  size: _propTypes.default.oneOf(['default', 'small']),
+  labelPlacement: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  progressDot: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
+  responsive: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  style: _propTypes.default.object
+};
+CustomSteps.defaultProps = {
+  data: {
+    steps: []
+  },
+  'data-test': null,
+  current: 0,
+  direction: 'horizontal',
+  size: 'default',
+  labelPlacement: 'horizontal',
+  progressDot: false,
+  responsive: true,
+  onChange: undefined,
+  style: {}
+};
+var _default = exports.default = CustomSteps;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 StepsContainer = exports.StepsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n"])));

package/build/components/oa-component-table/CustomTable.js

@@ -25,7 +25,8 @@ var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag")
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _utils = require("../../utils");
 var _styles = require("./styles");
-const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "noOfColumnToShow", "defaultCardShow"],
+var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "noOfColumnToShow", "defaultCardShow", "onMobilePageChange", "showNumberPagination"],
   _excluded2 = ["title"];
 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); }
@@ -64,7 +65,9 @@ function CustomTable(_ref) {
       tableBorder,
       emptyText,
       noOfColumnToShow,
-      defaultCardShow
+      defaultCardShow,
+      onMobilePageChange,
+      showNumberPagination
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
   const [viewMore, setViewMore] = (0, _react.useState)([]);
@@ -202,7 +205,11 @@ function CustomTable(_ref) {
       emptyText
     },
     size: size
-  }, antDesignProps))), /*#__PURE__*/_react.default.createElement("div", {
+  }, antDesignProps, {
+    scroll: {
+      x: 'max-content'
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: cardShow && dataSource ? 'bottomPadding' : ''
   }, cardShow && dataSource && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((row, rowIndex) => {
     var _uppercaseColumns$, _uppercaseColumns3;
@@ -248,6 +255,18 @@ function CustomTable(_ref) {
     type: "secondary",
     size: "large",
     onClick: () => pagination === null || pagination === void 0 ? void 0 : pagination.onChangeHandlerForMobile()
+  })), cardShow && dataSource.length > 0 && onMobilePageChange && showNumberPagination && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobileViewPagination"
+  }, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
+    current: pagination.current,
+    pageSize: pagination.pageSize,
+    total: pagination.total,
+    onChange: page => {
+      onMobilePageChange === null || onMobilePageChange === void 0 || onMobilePageChange({
+        current: page,
+        pageSize: pagination.pageSize
+      });
+    }
   })));
 }
 CustomTable.propTypes = {
@@ -260,7 +279,9 @@ CustomTable.propTypes = {
   tableBorder: _propTypes.default.bool,
   emptyText: _propTypes.default.string,
   noOfColumnToShow: _propTypes.default.number,
-  defaultCardShow: _propTypes.default.bool
+  defaultCardShow: _propTypes.default.bool,
+  onMobilePageChange: _propTypes.default.func,
+  showNumberPagination: _propTypes.default.bool
 };
 CustomTable.defaultProps = {
   dataSource: [],
@@ -272,6 +293,8 @@ CustomTable.defaultProps = {
   tableBorder: true,
   emptyText: 'No Data',
   noOfColumnToShow: 5,
-  defaultCardShow: false
+  defaultCardShow: false,
+  onMobilePageChange: null,
+  showNumberPagination: false
 };
 var _default = exports.default = CustomTable;