@integry/sdk 4.6.12 → 4.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.12",
+  "version": "4.6.13",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -51,15 +51,12 @@
     "@storybook/preact": "^8.5.7",
     "@storybook/preact-webpack5": "^8.5.7",
     "@storybook/preset-scss": "^1.0.3",
-    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^26.0.23",
     "@types/yaireo__tagify": "^4.18.0",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "autoprefixer": "^10.2.5",
-    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.2",
     "chalk": "^4.1.0",
     "core-js": "^3.15.1",
@@ -96,6 +93,10 @@
     "vitest": "^3.0.4"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.6",
+    "@mui/material": "^6.4.6",
     "@preact/compat": "^18.3.1",
     "@yaireo/tagify": "^4.21.1",
     "classnames": "^2.3.1",

package/src/components/MultipurposeField/index.tsx

@@ -7,6 +7,7 @@ import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 import { FieldDropdown } from '@/components/MultipurposeField/TagMenu';
 import { NestedObject } from '@/interfaces';
 import { TagProps } from '@/components/Tag';
+// import { TagsMenu } from '@/components/TagsMenu';
 // @ts-ignore
 import Tagify from '@yaireo/tagify';
 import '@yaireo/tagify/dist/tagify.css'; // Tagify CSS

package/src/components/TagsMenu/styles.module.scss

@@ -0,0 +1,88 @@
+.tagsMenuWrapper {
+  font-family: 'Inter';
+  padding: 5px;
+  font-size: 14px;
+  .tabsWrapper {
+    outline: none;
+    color: hsl(240 3.8% 46.1%);
+    padding: 0.25rem;
+    background-color: hsl(240 4.8% 95.9%);
+    border-radius: 6px;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 2.5rem;
+    display: inline-flex;
+    border-color: hsl(240 5.9% 90%);
+    .tab {
+      color: #71717a;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      padding-top: 0.375rem;
+      padding-bottom: 0.375rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      border-radius: 4px;
+      white-space: nowrap;
+      justify-content: center;
+      align-items: center;
+      flex: 1 1 0%;
+      display: inline-flex;
+      cursor: pointer;
+    }
+    .activeTab {
+      background-color: hsl(0 0% 100%);
+      color: hsl(240 10% 3.9%);
+    }
+  }
+  .tabContent {
+    padding: 12px 2px;
+    font-size: 14px;
+    .searchWrapper {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      input {
+        flex: 1;
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+    }
+    ul {
+      list-style: none;
+      li {
+        div {
+          cursor: pointer;
+        }
+        .listItemContent {
+          padding: 5px 0;
+          display: flex;
+          align-items: center;
+          span.expandIcon {
+            margin-right: 10px;
+            cursor: pointer;
+          }
+          span.tagIcon {
+            margin-right: 10px;
+          }
+          span.value {
+            color: hsl(240 3.8% 46.1%);
+            font-size: 0.75rem;
+            line-height: 1rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-left: 5px;
+          }
+          img {
+            width: 20px;
+            height: 20px;
+            object-fit: contain;
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/features/common/ActionForm/index.ts

@@ -1040,6 +1040,25 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
       ),
     );
 
+  private getParentDynamicFields = (machineName: string, stepId: number) => {
+    const parentFields =
+      this.state.parentChildMapping?.[stepId]?.[machineName]?.parentFields ||
+      [];
+
+    return parentFields.reduce((acc: Record<string, unknown>, key: string) => {
+      const dynamicData = this.state.dynamicFieldsData as Record<
+        string,
+        unknown
+      >;
+
+      if (key in dynamicData) {
+        acc[key] = dynamicData[key];
+      }
+
+      return acc;
+    }, {});
+  };
+
   private onFieldChange = ({
     stepId,
     fieldId,
@@ -1342,6 +1361,15 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                               case 'CHECKBOX':
                               case 'RADIO':
                               case 'SELECT': {
+                                let fieldVal = null;
+                                if (
+                                  this.props.onFieldChangeCallback &&
+                                  this.state.dynamicFieldsData
+                                ) {
+                                  fieldVal = this.state.dynamicFieldsData[
+                                    el.activity_field?.machine_name || ''
+                                  ];
+                                }
                                 return html`
                               <div key=${
                                 el.id
@@ -1372,6 +1400,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                     // el.activity_field.is_searchable TODO: enable this when Serach is added for mulipurposes field
                                   }
                                   value=${
+                                    fieldVal ||
                                     (selectedStepData &&
                                       selectedStepData[el.id] &&
                                       selectedStepData[el.id].value) ||