oa-componentbook 0.18.253 → 0.18.255

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

@@ -9,5 +9,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-upload-list{\n  display: flex !important;\n  gap: 16px !important;\n  flex-wrap: wrap !important;\n}\n.ant-upload-wrapper .ant-upload-list::before {\n    display: none;\n}\n.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n  width: 96px;\n  height: 96px;\n  margin-block: 0;\n  margin-inline: 0;\n}\n.ant-upload-select button >  span.UploadImg{\n  width: 24px !important;\n  height: 24px;\n}\n.ant-upload-select button >  span.UploadImg > img{\n  width: 100% !important;\n}\n.ant-upload-list-item-container:last-child{\n  margin: 0 !important;\n}\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,.ant-upload-list-item-A{\n    border: 1px solid var(--color-divider) !important;\n  }\n \n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n \n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n \n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  \n  @media only screen and (max-width: 600px) {\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n      opacity: 1;\n    }\n    .ant-upload-list-item-actions a {\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      width: 16px !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px !important;\n    padding: 0px !important;\n    color: #fff;\n}\n  }\n"])));
+const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-upload-list{\n  display: flex !important;\n  gap: 16px !important;\n  flex-wrap: wrap !important;\n}\n.ant-upload-wrapper .ant-upload-list::before {\n    display: none;\n}\n.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n  width: 96px;\n  height: 96px;\n  margin-block: 0;\n  margin-inline: 0;\n}\n.ant-upload-select button >  span.UploadImg{\n  width: 24px !important;\n  height: 24px;\n}\n.ant-upload-select button >  span.UploadImg > img{\n  width: 100% !important;\n}\n.ant-upload-list-item-container:last-child{\n  margin: 0 !important;\n}\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.ant-upload-disabled .button{\n  cursor: not-allowed;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,.ant-upload-list-item-A{\n    border: 1px solid var(--color-divider) !important;\n  }\n \n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n \n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n \n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  \n  @media only screen and (max-width: 600px) {\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n      opacity: 1;\n    }\n    .ant-upload-list-item-actions a {\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      width: 16px !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px !important;\n    padding: 0px !important;\n    color: #fff;\n}\n  }\n"])));
 const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2{\n    margin: 0;\n  }\n \n  @media only screen and (max-width: 600px) {\n    \n    .ant-upload-list-item-actions button {\n      height: 16px!important;\n      width: 16px !important;\n      justify-content: center;\n  }\n  .ant-upload-list-item-actions a {\n    height: 16px;\n    width: 16px !important;\n    align-items: center;\n    justify-content: center;\n}\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div{\n      display: none;\n    }\n  }\n"])));

package/build/components/oa-component-viewer/CustomViewer.js

@@ -101,29 +101,29 @@ function Controls(_ref) {
     color: "primary"
   }))), getFileFormat === 'PDF' && /*#__PURE__*/_react.default.createElement("div", {
     className: "flextBodyContain pdfFlexStyles"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    role: "button",
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
     tabIndex: 0,
     onClick: () => setPageNumber(pageNumber - 1),
     onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber - 1)),
-    className: "iconWidthPad iconWidthPadPdf"
+    className: "iconWidthPad iconWidthPadPdf",
+    disabled: pageNumber <= 1
   }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
     size: 18,
-    icon: _ArrowBackIos.default,
-    disabled: pageNumber <= 1
+    icon: _ArrowBackIos.default
   })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "type-b2-400",
     color: "primary-content"
-  }, "Page", ' ', pageNumber, ' ', "of", ' ', numPages), /*#__PURE__*/_react.default.createElement("div", {
-    role: "button",
+  }, "Page", ' ', pageNumber, ' ', "of", ' ', numPages), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
     tabIndex: 0,
     onClick: () => setPageNumber(pageNumber + 1),
     onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber + 1)),
-    className: "iconWidthPad iconWidthPadPdf"
+    className: "iconWidthPad iconWidthPadPdf",
+    disabled: pageNumber >= numPages
   }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
     size: 18,
-    icon: _ArrowForwardIos.default,
-    disabled: pageNumber >= numPages
+    icon: _ArrowForwardIos.default
   }))), /*#__PURE__*/_react.default.createElement("div", {
     role: "button",
     tabIndex: 0,

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

@@ -11,4 +11,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const mainStyle = exports.mainStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nposition: relative;\nbackground: red;\n"])));
 const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.flextBodyContain{\n    position: absolute;\n    right: 52px;\n    bottom: 116px;\n    flex-direction: column;\n    z-index: 9999;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n    position: absolute;\n    right: 52px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    top: 68px;\n    z-index: 999;\n    border-radius: 4px;\n}\n.iconWidthPad{\n    cursor: pointer;\n    background: var(--color-primary-background);    \n    padding: 6px;\n    height: 32px;\n    width: 32px;\n    border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n    border: none;\n}\n@media screen and (max-width: 992px) {\n    .posroated,.flextBodyContain{\n        right: 38px;\n    }\n  }\n"])));
-const PdfStyles = exports.PdfStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ncanvas{\n    margin: 0 auto;\n}\n.pdfFlexStyles{\n    left: 0;\n    right: 0;\n    bottom: 92px;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: #fff;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 8px;\n    gap: 12px;\n}\n.iconWidthPadPdf {\n    width: auto;\n    height: auto;\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border-bottom: none;\n}\nbutton:disabled {\n    color: var(--color-disabled-button);\n    cursor: not-allowed; \n  }\n  button{\n    color: var(--color-primary-content);\n  }\n@media screen and (max-width: 600px) {\n\n    canvas {\n        width: 100% !important;\n        height: auto !important;\n    }\n  }\n"])));
+const PdfStyles = exports.PdfStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ncanvas{\n    margin: 0 auto;\n}\n.pdfFlexStyles{\n    left: 0;\n    right: 0;\n    bottom: 92px;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: #fff;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 8px;\n    gap: 12px;\n}\n.iconWidthPadPdf {\n    width: auto;\n    height: auto;\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border: none;\n    border-bottom: none;\n}\n\nbutton:disabled {\n    color: var(--color-disabled-button);\n    cursor: not-allowed; \n    border:none;\n  }\n  button{\n    color: var(--color-primary-content);\n  }\n@media screen and (max-width: 600px) {\n\n    canvas {\n        width: 100% !important;\n        height: auto !important;\n    }\n  }\n"])));

package/build/widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget.js

@@ -53,14 +53,12 @@ function AddSparePartCollapseWidget(_ref) {
   const [formValues, setFormValues] = (0, _react.useState)({});
   const [searchValue, setSearchValue] = (0, _react.useState)('');
   const notificationRef = (0, _react.useRef)(null);
-  const itemRefs = (0, _react.useRef)({}); // Create a ref to store references to item panels
-
+  const itemRefs = (0, _react.useRef)({});
   const openNotification = parameters => {
     var _notificationRef$curr;
     return notificationRef === null || notificationRef === void 0 || (_notificationRef$curr = notificationRef.current) === null || _notificationRef$curr === void 0 ? void 0 : _notificationRef$curr.openNotification(parameters);
   };
   (0, _react.useEffect)(() => {
-    // Pre-fill form values and select the items that are already selected
     const initialFormValues = {};
     const initialSelectedItems = new Set();
     selectedItems.forEach(item => {
@@ -75,12 +73,10 @@ function AddSparePartCollapseWidget(_ref) {
     setSelectedItemIds(initialSelectedItems);
   }, [selectedItems]);
   (0, _react.useEffect)(() => {
-    // Combine selected items at the top followed by other items
     const sortedItems = [...selectedItems.map(item => items.find(i => i.id === item.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
     setFilteredItems(sortedItems);
   }, [items, selectedItems]);
   (0, _react.useEffect)(() => {
-    // Uncheck item if any required field is empty
     const newSelectedItemIds = new Set(selectedItemIds);
     selectedItemIds.forEach(itemId => {
       const fields = formValues[itemId];
@@ -135,16 +131,18 @@ function AddSparePartCollapseWidget(_ref) {
       newSelectedItems.add(itemId);
     }
     setSelectedItemIds(newSelectedItems);
-    if (itemRefs.current[itemId]) {
-      itemRefs.current[itemId].scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      });
-    }
     setSearchValue(''); // Clear search value on item selection
-    // Reset the filtered items to show all items with selected items at the top
+
     const sortedItems = [...selectedItems.map(item => items.find(i => i.id === item.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
     setFilteredItems(sortedItems);
+    setTimeout(() => {
+      if (itemRefs.current[itemId]) {
+        itemRefs.current[itemId].scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    }, 0);
   };
   const isNumeric = value => /^\d*$/.test(value); // Regular expression to check if the value is numeric
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.253",
+  "version": "0.18.255",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",