oa-componentbook 0.18.341 → 0.18.342

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

@@ -9,4 +9,4 @@ 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 StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0;\n}\n"])));
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0; \n}\n"])));

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -42,7 +42,6 @@ function CustomDatePicker(_ref) {
       disabledDateFunction
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  console.log(disabledDateFunction, "dosabled");
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {

package/build/components/oa-component-pagination/CustomPagination.js

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _styles = require("./styles");
+const _excluded = ["current", "total", "pageSize", "onChange", "onShowSizeChange", "pageSizeOptions", "showSizeChanger", "showQuickJumper", "showTotal", "size", "style"];
+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 _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; }
+/**
+ * @description A custom wrapper for Ant Design Pagination component with consistent theming.
+ * @param {number} current - The current page number (1-based).
+ * @param {number} total - The total number of items.
+ * @param {number} pageSize - The number of items per page.
+ * @param {function} onChange - Callback function when page changes.
+ * @param {function} onShowSizeChange - Callback function when page size changes.
+ * @param {array} pageSizeOptions - Array of page size options.
+ * @param {boolean} showSizeChanger - Whether to show the page size selector.
+ * @param {boolean} showQuickJumper - Whether to show the quick jumper input.
+ * @param {boolean} showTotal - Whether to show the total items count.
+ * @param {string} size - The size of the pagination component.
+ * @param {object} style - Custom styles for the component.
+ * @param {object} antDesignProps - Additional props to pass to Ant Design Pagination.
+ * @returns {JSX.Element} The rendered pagination component.
+ */
+function CustomPagination(_ref) {
+  let {
+      current = 1,
+      total = 0,
+      pageSize = 10,
+      onChange,
+      onShowSizeChange,
+      pageSizeOptions = [10, 20, 50, 100],
+      showSizeChanger = true,
+      showQuickJumper = false,
+      showTotal = true,
+      size = 'default',
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const renderTotal = (totalItems, range) => {
+    if (!showTotal) return null;
+    return "Showing ".concat(range[0], "-").concat(range[1], " of ").concat(totalItems, " items");
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Pagination: {}
+      },
+      token: {
+        colorPrimary: '#014FC5',
+        colorPrimaryBorder: '#014FC5',
+        colorPrimaryHover: '#82A9E2',
+        colorText: '#212121',
+        colorTextDisabled: '#BFBFBF',
+        colorTextPlaceholder: '#959595',
+        borderRadius: 2,
+        colorBorder: '#E0E0E0'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, _extends({
+    current: current,
+    total: total,
+    pageSize: pageSize,
+    onChange: onChange,
+    onShowSizeChange: onShowSizeChange,
+    showSizeChanger: showSizeChanger,
+    showQuickJumper: showQuickJumper,
+    showTotal: renderTotal,
+    pageSizeOptions: pageSizeOptions,
+    size: size
+  }, antDesignProps))));
+}
+CustomPagination.propTypes = {
+  current: _propTypes.default.number,
+  total: _propTypes.default.number,
+  pageSize: _propTypes.default.number,
+  onChange: _propTypes.default.func,
+  onShowSizeChange: _propTypes.default.func,
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  showSizeChanger: _propTypes.default.bool,
+  showQuickJumper: _propTypes.default.bool,
+  showTotal: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['default', 'small']),
+  style: _propTypes.default.object
+};
+CustomPagination.defaultProps = {
+  current: 1,
+  total: 0,
+  pageSize: 10,
+  onChange: undefined,
+  onShowSizeChange: undefined,
+  pageSizeOptions: [10, 20, 50, 100],
+  showSizeChanger: true,
+  showQuickJumper: false,
+  showTotal: true,
+  size: 'default',
+  style: undefined
+};
+var _default = exports.default = CustomPagination;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainContainer = 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) } })); }
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-pagination-item {\n    border: 1px solid #E0E0E0;\n  }\n  .ant-pagination-item-active {\n    border: 1px solid #014FC5;\n  }\n    .mobile-pagination{margin: 0;padding:0;}\n    .ant-pagination-total-text,.ant-pagination-options{display: none;}\n"])));
+var _default = exports.default = {};

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

@@ -86,7 +86,6 @@ function CustomSelect(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // If allText is present in default values, we select all the options manually.
-  console.log(options, "options");
   const actualDefaultValue = mode === "multiple" ? [...defaultValue] : defaultValue;
   if (mode === "multiple" && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
     var _options$filter$map, _options$filter;

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

@@ -67,7 +67,8 @@ function CustomTableV1(_ref) {
   const [cardShow, setCardShow] = (0, _react.useState)(false);
   const threshold = 10;
   function getByPath(obj, path) {
-    return path.split(".").reduce((acc, part) => acc === null || acc === void 0 ? void 0 : acc[part], obj);
+    var _path$split;
+    return path === null || path === void 0 || (_path$split = path.split(".")) === null || _path$split === void 0 ? void 0 : _path$split.reduce((acc, part) => acc === null || acc === void 0 ? void 0 : acc[part], obj);
   }
   // Determine card view on initial load if on mobile
   (0, _react.useEffect)(() => {
@@ -84,6 +85,7 @@ function CustomTableV1(_ref) {
     return isSelected;
   };
 
+  // Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
   // Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
   const finalColumns = (0, _react.useMemo)(() => {
     // Process each column while preserving the original order
@@ -101,108 +103,136 @@ function CustomTableV1(_ref) {
         typography: "type-sl1-700"
       }, title) : title;
 
-      // Handle jsxConfig for columns
+      // Handle jsxConfig for columns - now supports array
       if (jsxConfig) {
-        const {
-          type,
-          subType,
-          label,
-          onClickHandler,
-          options,
-          position = "end",
-          disabled = false,
-          icon
-        } = jsxConfig;
-        let ctaRender = null;
-        switch (type) {
-          case "icon":
-            ctaRender = (_, record) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-              size: 24,
-              icon: icon,
-              color: "secondary-content",
-              onClick: () => !isRowSelected(record) && customTableChange(record, jsxConfig)
-            }));
-            break;
-          case "customRenderers":
-            ctaRender = (_, record) => {
-              var _jsxConfig$options;
-              return jsxConfig === null || jsxConfig === void 0 || (_jsxConfig$options = jsxConfig.options) === null || _jsxConfig$options === void 0 ? void 0 : _jsxConfig$options.map(option => {
+        var _jsxConfigs$;
+        // Check if jsxConfig is an array or single object
+        const jsxConfigs = Array.isArray(jsxConfig) ? jsxConfig : [jsxConfig];
+
+        // Determine position from first config or default
+        const position = ((_jsxConfigs$ = jsxConfigs[0]) === null || _jsxConfigs$ === void 0 ? void 0 : _jsxConfigs$.position) || "end";
+
+        // Check if any config has customRenderers type
+        const hasCustomRenderers = jsxConfigs.some(config => config && config.type === "customRenderers");
+        let ctaRender = (_, record) => /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: "flex",
+            gap: "8px",
+            alignItems: "center"
+          }
+        }, jsxConfigs.map((config, index) => {
+          var _config$options, _record$config$styleK;
+          // Add safety check for undefined config
+          if (!config) return null;
+          const {
+            type,
+            subType,
+            label,
+            onClickHandler,
+            options,
+            disabled = false,
+            icon
+          } = config;
+
+          // Handle different CTA types
+          switch (type) {
+            case "icon":
+              return /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+                key: index,
+                size: 24,
+                icon: icon,
+                color: "secondary-content",
+                onClick: () => !isRowSelected(record) && customTableChange(record, config)
+              });
+            case "customRenderers":
+              return /*#__PURE__*/_react.default.createElement("div", {
+                key: index
+              }, (config === null || config === void 0 ? void 0 : config.mainLink) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                role: "button",
+                onClick: () => {
+                  !isRowSelected(record) && customTableChange(record, config.mainLink);
+                },
+                onKeyDown: e => !isRowSelected(record) && (e.key === "Enter" || e.key === " ") && customTableChange(record, config.mainLink),
+                label: label || _,
+                type: "text-only",
+                disabled: disabled || isRowSelected(record)
+              }), config === null || config === void 0 || (_config$options = config.options) === null || _config$options === void 0 ? void 0 : _config$options.map((option, idx) => {
                 var _record$option$styleK, _record$option$styleK2;
-                return /*#__PURE__*/_react.default.createElement("div", null, (option === null || option === void 0 ? void 0 : option.type) === "button" ? /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                return /*#__PURE__*/_react.default.createElement("div", {
+                  key: idx
+                }, (option === null || option === void 0 ? void 0 : option.type) === "button" ? /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
                   type: (option === null || option === void 0 ? void 0 : option.subType) || "primary",
-                  label: (option === null || option === void 0 ? void 0 : option.label) || record[option === null || option === void 0 ? void 0 : option.key],
-                  onClick: () => customTableChange(record, jsxConfig)
+                  label: (option === null || option === void 0 ? void 0 : option.label) || _,
+                  onClick: () => customTableChange(record, config)
+                }) : (option === null || option === void 0 ? void 0 : option.type) === "tag" ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+                  label: getByPath(record, option === null || option === void 0 ? void 0 : option.key) || "",
+                  type: (option === null || option === void 0 ? void 0 : option.tagType) || "primary",
+                  visible: true
                 }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
                   typography: (option === null || option === void 0 ? void 0 : option.typography) || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$option$styleK = record[option === null || option === void 0 ? void 0 : option.styleKey]) === null || _record$option$styleK === void 0 ? void 0 : _record$option$styleK.typography) || "type-b2-400",
                   color: (option === null || option === void 0 ? void 0 : option.color) || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$option$styleK2 = record[option === null || option === void 0 ? void 0 : option.styleKey]) === null || _record$option$styleK2 === void 0 ? void 0 : _record$option$styleK2.color)
                 }, getByPath(record, option === null || option === void 0 ? void 0 : option.key)));
-              });
-            };
-            break;
-          case "tag":
-            ctaRender = (_, record) => {
+              }));
+            case "tag":
               const tagType = typeof subType === "function" ? subType(_, record) : subType;
               return /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+                key: index,
                 label: label || _,
                 type: tagType,
                 visible: true
               });
-            };
-            break;
-          case "link":
-            ctaRender = (_, record) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-              role: "button",
-              onClick: () => {
-                !isRowSelected(record) && customTableChange(record, jsxConfig);
-              },
-              onKeyDown: e => !isRowSelected(record) && (e.key === "Enter" || e.key === " ") && customTableChange(record, jsxConfig),
-              label: label || _,
-              type: "text-only",
-              disabled: disabled || isRowSelected(record)
-            });
-            break;
-          case "button":
-            ctaRender = (_, record) => {
-              var _record$jsxConfig$sty;
+            case "link":
               return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                key: index,
+                role: "button",
+                onClick: () => {
+                  !isRowSelected(record) && customTableChange(record, config);
+                },
+                onKeyDown: e => !isRowSelected(record) && (e.key === "Enter" || e.key === " ") && customTableChange(record, config),
+                label: label || _,
+                type: "text-only",
+                disabled: disabled || isRowSelected(record)
+              });
+            case "button":
+              return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                key: index,
                 type: subType || "primary",
                 label: label || _,
-                onClick: () => !isRowSelected(record) && customTableChange(record, jsxConfig),
-                disabled: disabled || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$jsxConfig$sty = record[jsxConfig === null || jsxConfig === void 0 ? void 0 : jsxConfig.styleKey]) === null || _record$jsxConfig$sty === void 0 ? void 0 : _record$jsxConfig$sty.disabled) || isRowSelected(record)
+                onClick: () => !isRowSelected(record) && customTableChange(record, config),
+                disabled: disabled || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$config$styleK = record[config === null || config === void 0 ? void 0 : config.styleKey]) === null || _record$config$styleK === void 0 ? void 0 : _record$config$styleK.disabled) || isRowSelected(record)
               });
-            };
-            break;
-          case "dropdown":
-            ctaRender = (_, record) => /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
-              options: options,
-              onChange: val => !isRowSelected(record) && onClickHandler(record, val, setConfig),
-              disabled: isRowSelected(record)
-            });
-            break;
-          case "popover":
-            ctaRender = (_, record) => /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
-              type: "primary",
-              disabled: isRowSelected(record),
-              items: options.map(opt => ({
-                label: opt.label,
-                key: opt.key,
-                danger: opt.danger || false,
-                onClick: () => !isRowSelected(record) && customTableChange(record, jsxConfig, opt.key),
+            case "dropdown":
+              return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+                key: index,
+                options: options,
+                onChange: val => !isRowSelected(record) && onClickHandler(record, val, setConfig),
                 disabled: isRowSelected(record)
-              }))
-            }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-              size: 24,
-              icon: _MoreVert.default,
-              color: isRowSelected(record) ? "disabled" : "secondary-content"
-            }));
-            break;
-          default:
-            ctaRender = () => null;
-        }
+              });
+            case "popover":
+              return /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
+                key: index,
+                type: "primary",
+                disabled: isRowSelected(record),
+                items: options.map(opt => ({
+                  label: opt.label,
+                  key: opt.key,
+                  danger: opt.danger || false,
+                  onClick: () => !isRowSelected(record) && customTableChange(record, config, opt.key),
+                  disabled: isRowSelected(record)
+                }))
+              }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+                size: 24,
+                icon: _MoreVert.default,
+                color: isRowSelected(record) ? "disabled" : "secondary-content"
+              }));
+            default:
+              return null;
+          }
+        }));
         return _objectSpread(_objectSpread({}, rest), {}, {
           dataIndex,
           title: titleNode,
-          isCTA: type !== "customRenderers",
+          isCTA: !hasCustomRenderers,
           position,
           render: ctaRender
         });
@@ -403,10 +433,15 @@ function CustomTableV1(_ref) {
     })), ctaColumnsSorted.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "footerCta"
     }, ctaColumnsSorted.filter((col, index) => {
-      if (index === 0) return false; // exclude first column
-      return col.isCTA; // show only CTA columns (non-customRenderers)
-    }).map(col => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: col.key || col.dataIndex
+      if (index === 0) return false;
+      return col.isCTA;
+    }).map(col => /*#__PURE__*/_react.default.createElement("div", {
+      key: col.key || col.dataIndex,
+      style: {
+        display: "flex",
+        gap: "8px",
+        flexWrap: "wrap"
+      }
     }, getContentToBeRender(col, row)))));
   })), cardShow && dataSource && (pagination === null || pagination === void 0 ? void 0 : pagination.showPaginationOnMobile) && /*#__PURE__*/_react.default.createElement("div", {
     className: "fullWidthBtn"

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

@@ -43,7 +43,7 @@ function CustomTag(_ref) {
 CustomTag.propTypes = {
   'data-test': _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'recommended']),
+  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'recommended', 'primary']),
   visible: _propTypes.default.bool,
   bgColor: _propTypes.default.string,
   borderColor: _propTypes.default.string,

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

@@ -22,6 +22,13 @@ const getColorStyles = props => {
       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)',
@@ -58,4 +65,4 @@ const getColorStyles = props => {
 };
 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).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;\n"])));
+const CenteredTextContainer = exports.CenteredTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex; white-space: nowrap;\n"])));

package/build/index.js

@@ -197,6 +197,12 @@ Object.defineProperty(exports, "CustomNotification", {
     return _CustomNotification.default;
   }
 });
+Object.defineProperty(exports, "CustomPagination", {
+  enumerable: true,
+  get: function get() {
+    return _CustomPagination.default;
+  }
+});
 Object.defineProperty(exports, "CustomPinPatternCaptureWidget", {
   enumerable: true,
   get: function get() {
@@ -646,6 +652,7 @@ var _CustomInputNumber = _interopRequireDefault(require("./components/oa-compone
 var _CustomLoader = _interopRequireDefault(require("./components/oa-component-loader/CustomLoader"));
 var _CustomModal = _interopRequireDefault(require("./components/oa-component-modal/CustomModal"));
 var _CustomNotification = _interopRequireDefault(require("./components/oa-component-notification/CustomNotification"));
+var _CustomPagination = _interopRequireDefault(require("./components/oa-component-pagination/CustomPagination"));
 var _CustomUpload = _interopRequireDefault(require("./components/oa-component-upload/CustomUpload"));
 var _CustomRadio = _interopRequireWildcard(require("./components/oa-component-radio/CustomRadio"));
 var _CustomSelect = _interopRequireDefault(require("./components/oa-component-select/CustomSelect"));