@sparrowengg/integrations-templates-frontend 2.0.0 → 2.1.0-beta.1

package/dist/es/triggers/components/TriggerHeader.js

@@ -0,0 +1,128 @@
+import React__default, { useState } from 'react';
+import ArrowIcon from '../../commons/icons/arrow.js';
+import DraftModal from '../../commons/components/draftModal.js';
+import { isEventSetupValid, isTriggerValid } from '../utils/helpers.js';
+import { UI_TEXT, DRAFT } from '../constants/index.js';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { ArrowLeftIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js';
+import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+
+const TriggerHeader = ({
+  draftHandler,
+  navigateTriggerPage,
+  objects,
+  accounts,
+  actions,
+  onSaveTriggerLoader,
+  hasPreviousMapping,
+  isTriggerPage,
+  onSaveHandler,
+  navigateConfigurePage,
+  previousMappingHandler,
+  fields,
+  editFieldId,
+  eventFields,
+  triggerDetails
+}) => {
+  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false);
+  const isEventSetupDisabled = !isEventSetupValid(
+    actions.value,
+    objects.value,
+    eventFields,
+    actions.options,
+    objects.options
+  );
+  const isSaveDisabled = !isTriggerValid(fields, triggerDetails);
+  const handleDraftSave = async () => {
+    await draftHandler(DRAFT.TYPE_TRIGGER, editFieldId);
+    await previousMappingHandler();
+    setIsDraftModalOpen(false);
+  };
+  const handleDraftCancel = async () => {
+    await previousMappingHandler();
+    setIsDraftModalOpen(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        position: "sticky",
+        width: "100%",
+        top: "1px",
+        zIndex: "99",
+        background: "#ffff",
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    isDraftModalOpen && /* @__PURE__ */ React__default.createElement(
+      DraftModal,
+      {
+        onSaveHandler: handleDraftSave,
+        onCloseHandler: () => setIsDraftModalOpen(false),
+        onCancel: handleDraftCancel
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(Flex, { gap: "$6", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        onClick: () => setIsDraftModalOpen(true),
+        color: "default",
+        icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
+        size: "lg"
+      }
+    ), /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, editFieldId ? UI_TEXT.EDIT_TRIGGER : UI_TEXT.NEW_TRIGGER)),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          css: { color: !isTriggerPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isTriggerPage && navigateConfigurePage()
+        },
+        UI_TEXT.EVENT_SETUP
+      ),
+      /* @__PURE__ */ React__default.createElement(ArrowIcon, null),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          onClick: () => navigateTriggerPage(true),
+          css: { color: !isEventSetupDisabled ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: isEventSetupDisabled
+        },
+        UI_TEXT.TRIGGER_CONDITIONS
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        loading: onSaveTriggerLoader,
+        size: "lg",
+        disabled: isSaveDisabled,
+        onClick: () => onSaveHandler(editFieldId),
+        css: { visibility: isTriggerPage ? "visible" : "hidden" }
+      },
+      editFieldId ? UI_TEXT.UPDATE_TRIGGER : UI_TEXT.SAVE_TRIGGER
+    )
+  );
+};
+
+export { TriggerHeader };
+//# sourceMappingURL=TriggerHeader.js.map

package/dist/es/triggers/components/TriggerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriggerHeader.js","sources":["../../../../src/triggers/components/TriggerHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Button,\n  Flex,\n  Heading,\n  IconButton,\n} from '@sparrowengg/twigs-react';\nimport { ArrowLeftIcon } from '@sparrowengg/twigs-react-icons';\nimport Arrow from '../../commons/icons/arrow';\nimport DraftModal from '../../commons/components/draftModal';\nimport { TriggerHeaderProps } from '../types';\nimport { isEventSetupValid, isTriggerValid } from '../utils/helpers';\nimport { UI_TEXT, DRAFT } from '../constants';\n\n/**\n * TriggerHeader Component\n * Displays the header with navigation, save button, and draft modal\n */\nexport const TriggerHeader: React.FC<TriggerHeaderProps> = ({\n  draftHandler,\n  navigateTriggerPage,\n  objects,\n  accounts,\n  actions,\n  onSaveTriggerLoader,\n  hasPreviousMapping,\n  isTriggerPage,\n  onSaveHandler,\n  navigateConfigurePage,\n  previousMappingHandler,\n  fields,\n  editFieldId,\n  eventFields,\n  triggerDetails,\n}) => {\n  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false);\n\n  const isEventSetupDisabled = !isEventSetupValid(\n    actions.value,\n    objects.value,\n    eventFields,\n    actions.options,\n    objects.options\n  );\n\n  const isSaveDisabled = !isTriggerValid(fields, triggerDetails);\n\n  const handleDraftSave = async () => {\n    await draftHandler(DRAFT.TYPE_TRIGGER, editFieldId);\n    await previousMappingHandler();\n    setIsDraftModalOpen(false);\n  };\n\n  const handleDraftCancel = async () => {\n    await previousMappingHandler();\n    setIsDraftModalOpen(false);\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: 'sticky',\n        width: '100%',\n        top: '1px',\n        zIndex: '99',\n        background: '#ffff',\n        borderBottom: '$borderWidths$xs solid $neutral200',\n        padding: '$8 $12',\n      }}\n    >\n      {isDraftModalOpen && (\n        <DraftModal\n          onSaveHandler={handleDraftSave}\n          onCloseHandler={() => setIsDraftModalOpen(false)}\n          onCancel={handleDraftCancel}\n        />\n      )}\n\n      <Flex gap=\"$6\" alignItems=\"center\">\n        <IconButton\n          onClick={() => setIsDraftModalOpen(true)}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editFieldId ? UI_TEXT.EDIT_TRIGGER : UI_TEXT.NEW_TRIGGER}\n        </Heading>\n      </Flex>\n\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          '& button': { background: 'transparent !important', fontSize: '$md' },\n        }}\n      >\n        <Button\n          css={{ color: !isTriggerPage ? '$neutral900' : '$neutral800' }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isTriggerPage && navigateConfigurePage()}\n        >\n          {UI_TEXT.EVENT_SETUP}\n        </Button>\n        <Arrow />\n        <Button\n          onClick={() => navigateTriggerPage(true)}\n          css={{ color: !isEventSetupDisabled ? '$neutral900' : '$neutral800' }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={isEventSetupDisabled}\n        >\n          {UI_TEXT.TRIGGER_CONDITIONS}\n        </Button>\n      </Flex>\n\n      <Button\n        loading={onSaveTriggerLoader}\n        size=\"lg\"\n        disabled={isSaveDisabled}\n        onClick={() => onSaveHandler(editFieldId)}\n        css={{ visibility: isTriggerPage ? 'visible' : 'hidden' }}\n      >\n        {editFieldId ? UI_TEXT.UPDATE_TRIGGER : UI_TEXT.SAVE_TRIGGER}\n      </Button>\n    </Flex>\n  );\n};\n\n"],"names":["React","Arrow"],"mappings":";;;;;;;;;;;AAkBO,MAAM,gBAA8C,CAAC;AAAA,EAC1D,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,kBAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,qBAAA;AAAA,EACA,sBAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE9D,EAAA,MAAM,uBAAuB,CAAC,iBAAA;AAAA,IAC5B,OAAQ,CAAA,KAAA;AAAA,IACR,OAAQ,CAAA,KAAA;AAAA,IACR,WAAA;AAAA,IACA,OAAQ,CAAA,OAAA;AAAA,IACR,OAAQ,CAAA,OAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,CAAC,cAAe,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AAE7D,EAAA,MAAM,kBAAkB,YAAY;AAClC,IAAM,MAAA,YAAA,CAAa,KAAM,CAAA,YAAA,EAAc,WAAW,CAAA,CAAA;AAClD,IAAA,MAAM,sBAAuB,EAAA,CAAA;AAC7B,IAAA,mBAAA,CAAoB,KAAK,CAAA,CAAA;AAAA,GAC3B,CAAA;AAEA,EAAA,MAAM,oBAAoB,YAAY;AACpC,IAAA,MAAM,sBAAuB,EAAA,CAAA;AAC7B,IAAA,mBAAA,CAAoB,KAAK,CAAA,CAAA;AAAA,GAC3B,CAAA;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,eAAA;AAAA,MACf,GAAK,EAAA;AAAA,QACH,QAAU,EAAA,QAAA;AAAA,QACV,KAAO,EAAA,MAAA;AAAA,QACP,GAAK,EAAA,KAAA;AAAA,QACL,MAAQ,EAAA,IAAA;AAAA,QACR,UAAY,EAAA,OAAA;AAAA,QACZ,YAAc,EAAA,oCAAA;AAAA,QACd,OAAS,EAAA,QAAA;AAAA,OACX;AAAA,KAAA;AAAA,IAEC,gBACC,oBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,aAAe,EAAA,eAAA;AAAA,QACf,cAAA,EAAgB,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,QAC/C,QAAU,EAAA,iBAAA;AAAA,OAAA;AAAA,KACZ;AAAA,oBAGDA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,GAAI,EAAA,IAAA,EAAK,YAAW,QACxB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAAA,QACvC,KAAM,EAAA,SAAA;AAAA,QACN,IAAA,+CAAO,aAAc,EAAA,IAAA,CAAA;AAAA,QACrB,IAAK,EAAA,IAAA;AAAA,OAAA;AAAA,KACP,kBACCA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAK,EAAA,IAAA,EAAA,EACX,cAAc,OAAQ,CAAA,YAAA,GAAe,OAAQ,CAAA,WAChD,CACF,CAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,QAAA;AAAA,QACX,GAAI,EAAA,IAAA;AAAA,QACJ,GAAK,EAAA;AAAA,UACH,UAAY,EAAA,EAAE,UAAY,EAAA,wBAAA,EAA0B,UAAU,KAAM,EAAA;AAAA,SACtE;AAAA,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAK,EAAE,KAAA,EAAO,CAAC,aAAA,GAAgB,gBAAgB,aAAc,EAAA;AAAA,UAC7D,KAAM,EAAA,SAAA;AAAA,UACN,OAAQ,EAAA,OAAA;AAAA,UACR,IAAK,EAAA,IAAA;AAAA,UACL,OAAA,EAAS,MAAM,aAAA,IAAiB,qBAAsB,EAAA;AAAA,SAAA;AAAA,QAErD,OAAQ,CAAA,WAAA;AAAA,OACX;AAAA,mDACCC,SAAM,EAAA,IAAA,CAAA;AAAA,sBACPD,cAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAAA,UACvC,KAAK,EAAE,KAAA,EAAO,CAAC,oBAAA,GAAuB,gBAAgB,aAAc,EAAA;AAAA,UACpE,KAAM,EAAA,SAAA;AAAA,UACN,OAAQ,EAAA,OAAA;AAAA,UACR,IAAK,EAAA,IAAA;AAAA,UACL,QAAU,EAAA,oBAAA;AAAA,SAAA;AAAA,QAET,OAAQ,CAAA,kBAAA;AAAA,OACX;AAAA,KACF;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,mBAAA;AAAA,QACT,IAAK,EAAA,IAAA;AAAA,QACL,QAAU,EAAA,cAAA;AAAA,QACV,OAAA,EAAS,MAAM,aAAA,CAAc,WAAW,CAAA;AAAA,QACxC,GAAK,EAAA,EAAE,UAAY,EAAA,aAAA,GAAgB,YAAY,QAAS,EAAA;AAAA,OAAA;AAAA,MAEvD,WAAA,GAAc,OAAQ,CAAA,cAAA,GAAiB,OAAQ,CAAA,YAAA;AAAA,KAClD;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/es/triggers/components/chips/CustomChips.js

@@ -0,0 +1,63 @@
+import React__default from 'react';
+import { renderBooleanValue } from '../../utils/helpers.js';
+import { Chip } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
+
+const CustomConditonChip = ({
+  children,
+  hasError = false
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Chip,
+    {
+      size: "lg",
+      css: {
+        backgroundColorOpacity: hasError ? ["#FDEDE8", 1] : ["$primary400", 0.2],
+        color: hasError ? "#E75030" : "$primary700",
+        padding: "$3 $1",
+        fontWeight: "$5",
+        lineHeight: "$sm"
+      }
+    },
+    children
+  );
+};
+const CustomFieldChip = ({
+  children,
+  setCurrentField,
+  currentFilter,
+  filters,
+  setIsEditing,
+  fieldType
+}) => {
+  const handleClick = () => {
+    const fieldsToResetMap = {
+      field: ["field", "operator", "value"],
+      operator: ["operator", "value"],
+      value: ["value"]
+    };
+    const fieldsToReset = fieldsToResetMap[fieldType] || ["value"];
+    fieldsToReset.forEach((field) => {
+      setCurrentField(null, currentFilter.id, filters.id, field);
+    });
+    setIsEditing(true);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Chip,
+    {
+      size: "lg",
+      css: {
+        background: "transparent",
+        color: "$neutral800",
+        padding: "$3 $1",
+        fontWeight: "$7",
+        lineHeight: "$sm",
+        cursor: "pointer"
+      },
+      onClick: handleClick
+    },
+    renderBooleanValue(children)
+  );
+};
+
+export { CustomConditonChip, CustomFieldChip };
+//# sourceMappingURL=CustomChips.js.map

package/dist/es/triggers/components/chips/CustomChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomChips.js","sources":["../../../../../src/triggers/components/chips/CustomChips.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip } from '@sparrowengg/twigs-react';\nimport { CustomConditonChipProps, CustomFieldChipProps, FilterFieldType } from '../../types';\nimport { renderBooleanValue } from '../../utils/helpers';\n\n/**\n * Custom chip for condition display with error state\n */\nexport const CustomConditonChip: React.FC<CustomConditonChipProps> = ({\n  children,\n  hasError = false,\n}) => {\n  return (\n    <Chip\n      size=\"lg\"\n      css={{\n        backgroundColorOpacity: hasError\n          ? ['#FDEDE8', 1]\n          : ['$primary400', 0.2],\n        color: hasError ? '#E75030' : '$primary700',\n        padding: '$3 $1',\n        fontWeight: '$5',\n        lineHeight: '$sm',\n      }}\n    >\n      {children}\n    </Chip>\n  );\n};\n\n/**\n * Custom chip for field values with edit functionality\n */\nexport const CustomFieldChip: React.FC<CustomFieldChipProps> = ({\n  children,\n  setCurrentField,\n  currentFilter,\n  filters,\n  setIsEditing,\n  fieldType,\n}) => {\n  /**\n   * Handle chip click - reset fields based on type\n   */\n  const handleClick = () => {\n    const fieldsToResetMap: Record<FilterFieldType, FilterFieldType[]> = {\n      field: ['field', 'operator', 'value'],\n      operator: ['operator', 'value'],\n      value: ['value'],\n    };\n\n    const fieldsToReset = fieldsToResetMap[fieldType] || ['value'];\n    \n    fieldsToReset.forEach((field) => {\n      setCurrentField(null, currentFilter.id, filters.id, field);\n    });\n    \n    setIsEditing(true);\n  };\n\n  return (\n    <Chip\n      size=\"lg\"\n      css={{\n        background: 'transparent',\n        color: '$neutral800',\n        padding: '$3 $1',\n        fontWeight: '$7',\n        lineHeight: '$sm',\n        cursor: 'pointer',\n      }}\n      onClick={handleClick}\n    >\n      {renderBooleanValue(children)}\n    </Chip>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;AAQO,MAAM,qBAAwD,CAAC;AAAA,EACpE,QAAA;AAAA,EACA,QAAW,GAAA,KAAA;AACb,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,GAAK,EAAA;AAAA,QACH,sBAAA,EAAwB,WACpB,CAAC,SAAA,EAAW,CAAC,CACb,GAAA,CAAC,eAAe,GAAG,CAAA;AAAA,QACvB,KAAA,EAAO,WAAW,SAAY,GAAA,aAAA;AAAA,QAC9B,OAAS,EAAA,OAAA;AAAA,QACT,UAAY,EAAA,IAAA;AAAA,QACZ,UAAY,EAAA,KAAA;AAAA,OACd;AAAA,KAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA;AAEJ,EAAA;AAKO,MAAM,kBAAkD,CAAC;AAAA,EAC9D,QAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AACF,CAAM,KAAA;AAIJ,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAM,gBAA+D,GAAA;AAAA,MACnE,KAAO,EAAA,CAAC,OAAS,EAAA,UAAA,EAAY,OAAO,CAAA;AAAA,MACpC,QAAA,EAAU,CAAC,UAAA,EAAY,OAAO,CAAA;AAAA,MAC9B,KAAA,EAAO,CAAC,OAAO,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,MAAM,aAAgB,GAAA,gBAAA,CAAiB,SAAS,CAAA,IAAK,CAAC,OAAO,CAAA,CAAA;AAE7D,IAAc,aAAA,CAAA,OAAA,CAAQ,CAAC,KAAU,KAAA;AAC/B,MAAA,eAAA,CAAgB,IAAM,EAAA,aAAA,CAAc,EAAI,EAAA,OAAA,CAAQ,IAAI,KAAK,CAAA,CAAA;AAAA,KAC1D,CAAA,CAAA;AAED,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,aAAA;AAAA,QACZ,KAAO,EAAA,aAAA;AAAA,QACP,OAAS,EAAA,OAAA;AAAA,QACT,UAAY,EAAA,IAAA;AAAA,QACZ,UAAY,EAAA,KAAA;AAAA,QACZ,MAAQ,EAAA,SAAA;AAAA,OACV;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,KAAA;AAAA,IAER,mBAAmB,QAAQ,CAAA;AAAA,GAC9B,CAAA;AAEJ;;;;"}

package/dist/es/triggers/components/popovers/DataTypePopover.js

@@ -0,0 +1,180 @@
+import React__default, { useState } from 'react';
+import { subMenuOptions, operatorOptions } from '../../../commons/constants/index.js';
+import { UI_TEXT, DATA_TYPES, comparatorConstants } from '../../constants/index.js';
+import { CustomConditonChip } from '../chips/CustomChips.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js';
+import { Box } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Text } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { ChevronRightIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js';
+
+const DataTypePopover = ({
+  setCurrentField,
+  currentFilter,
+  filters
+}) => {
+  const [subMenuContent, setSubMenuContent] = useState({
+    show: false,
+    type: ""
+  });
+  const handleNoPreference = () => {
+    const noPreferenceOperator = { label: UI_TEXT.NO_PREFERENCE, value: "NO_PREFERENCE", type: "NO_PREFERENCE" };
+    setCurrentField(noPreferenceOperator, currentFilter.id, filters.id, "operator");
+    setSubMenuContent({ show: false, type: "" });
+  };
+  const handleDataTypeSelect = (dataType, label) => {
+    if (dataType === DATA_TYPES.BOOLEAN) {
+      const booleanOperator = operatorOptions.find((opt) => opt.value === comparatorConstants.IS && opt.type === DATA_TYPES.BOOLEAN);
+      if (booleanOperator) {
+        setCurrentField({ label: booleanOperator.label, value: booleanOperator.value, type: dataType }, currentFilter.id, filters.id, "operator");
+      }
+    } else {
+      setSubMenuContent({ show: true, type: dataType });
+    }
+  };
+  const handleOperatorSelect = (operatorValue, operatorLabel, dataType) => {
+    const operatorOption = { label: operatorLabel, value: operatorValue, type: dataType };
+    setCurrentField(operatorOption, currentFilter.id, filters.id, "operator");
+    setSubMenuContent({ show: false, type: "" });
+  };
+  const currentSubMenu = subMenuOptions.find((option) => option.value === subMenuContent.type);
+  return /* @__PURE__ */ React__default.createElement(Popover, { defaultOpen: true }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(CustomConditonChip, null, UI_TEXT.CHOOSE_DATA_TYPE))), /* @__PURE__ */ React__default.createElement(
+    PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        width: 260,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: 0
+      }
+    },
+    !subMenuContent.show ? /* @__PURE__ */ React__default.createElement(Box, { css: { paddingTop: "$6" } }, /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        size: "sm",
+        onClick: handleNoPreference,
+        css: {
+          padding: "$3 $6",
+          marginBottom: "$4",
+          cursor: "pointer",
+          "&:hover": {
+            background: "$neutral100"
+          }
+        }
+      },
+      UI_TEXT.NO_PREFERENCE
+    ), /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        css: {
+          paddingTop: "$4",
+          borderTop: "$borderWidths$xs solid $neutral100"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          css: {
+            textTransform: "uppercase",
+            color: "$neutral600",
+            padding: "$4 $6"
+          },
+          size: "xs",
+          weight: "bold"
+        },
+        UI_TEXT.SELECT_DATA_TYPE
+      ),
+      subMenuOptions.map((option) => /* @__PURE__ */ React__default.createElement(
+        Flex,
+        {
+          key: option.id,
+          alignItems: "center",
+          justifyContent: "space-between",
+          onClick: () => handleDataTypeSelect(option.value, option.label),
+          css: {
+            cursor: "pointer",
+            padding: "$3 $6",
+            "&:hover": {
+              background: "rgba(100, 116, 139, 0.08)",
+              "#subLabelIcon": {
+                opacity: 1
+              }
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { lineHeight: "$md", color: "$neutral900" } }, option.label), /* @__PURE__ */ React__default.createElement(Text, { size: "xs", css: { lineHeight: "$xs", color: "$neutral700" } }, option.subLabel)),
+        /* @__PURE__ */ React__default.createElement(Box, { css: { opacity: 0 }, id: "subLabelIcon" }, /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { size: 20 }))
+      ))
+    ), /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        css: {
+          background: "rgba(100, 116, 139, 0.06)",
+          padding: "$6 $8"
+        },
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      /* @__PURE__ */ React__default.createElement(Text, { size: "xs", css: { color: "$neutral600", lineHeight: "$xs" } }, UI_TEXT.DATA_TYPE_INFO)
+    )) : /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          padding: "$5 $4",
+          borderRadius: "$xl $xl 0 0",
+          backgroundColor: "rgba(100, 116, 139, 0.06)",
+          borderBottom: "$borderWidths$xs solid rgba(100, 116, 139, 0.08)"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          onClick: () => setSubMenuContent({ show: false, type: "" }),
+          css: {
+            borderRight: "$borderWidths$xs solid $secondary100",
+            paddingRight: "$2",
+            cursor: "pointer"
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          ChevronRightIcon,
+          {
+            style: { transform: "scaleX(-1)", color: "#76859A" },
+            size: 20
+          }
+        )
+      ),
+      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$secondary400" } }, currentSubMenu == null ? void 0 : currentSubMenu.label), /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { style: { color: "#76859A" }, size: 16 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "medium", css: { color: "$secondary600" } }, subMenuContent.type === DATA_TYPES.DATE_TIME ? UI_TEXT.SELECT : UI_TEXT.CHOOSE))
+    ), /* @__PURE__ */ React__default.createElement(Box, { css: { paddingBlock: subMenuContent.type === DATA_TYPES.DATE_TIME ? 0 : "$4" } }, operatorOptions.filter((operator) => {
+      if (subMenuContent.type === DATA_TYPES.DATE_TIME) {
+        return operator.isDateOnly;
+      }
+      if (subMenuContent.type === DATA_TYPES.BOOLEAN) {
+        return operator.type === DATA_TYPES.BOOLEAN;
+      }
+      return !operator.isDateOnly;
+    }).map((option) => /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        key: option.id,
+        size: "sm",
+        onClick: () => handleOperatorSelect(option.value, option.label, subMenuContent.type),
+        css: {
+          padding: "$3 $6",
+          cursor: "pointer",
+          "&:hover": {
+            background: "rgba(100, 116, 139, 0.08)"
+          }
+        }
+      },
+      option.label
+    ))))
+  ));
+};
+
+export { DataTypePopover };
+//# sourceMappingURL=DataTypePopover.js.map

package/dist/es/triggers/components/popovers/DataTypePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTypePopover.js","sources":["../../../../../src/triggers/components/popovers/DataTypePopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Box,\n  Flex,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Text,\n} from '@sparrowengg/twigs-react';\nimport { ChevronRightIcon } from '@sparrowengg/twigs-react-icons';\nimport { subMenuOptions, operatorOptions } from '../../../commons/constants';\nimport { comparatorConstants, UI_TEXT, DATA_TYPES } from '../../constants';\nimport { CustomConditonChip } from '../chips/CustomChips';\nimport { DataTypePopoverProps, SubMenuContent } from '../../types';\n\n/**\n * DataType Popover Component\n * Allows user to select data type and operator\n */\nexport const DataTypePopover: React.FC<DataTypePopoverProps> = ({\n  setCurrentField,\n  currentFilter,\n  filters,\n}) => {\n  const [subMenuContent, setSubMenuContent] = useState<SubMenuContent>({\n    show: false,\n    type: '',\n  });\n\n  const handleNoPreference = () => {\n    // Set operator as SelectOption object\n    const noPreferenceOperator = { label: UI_TEXT.NO_PREFERENCE, value: 'NO_PREFERENCE', type: 'NO_PREFERENCE' };\n    setCurrentField(noPreferenceOperator as any, currentFilter.id, filters.id, 'operator');\n    setSubMenuContent({ show: false, type: '' });\n  };\n\n  const handleDataTypeSelect = (dataType: string, label: string) => {\n    if (dataType === DATA_TYPES.BOOLEAN) {\n      const booleanOperator = operatorOptions.find(opt => opt.value === comparatorConstants.IS && opt.type === DATA_TYPES.BOOLEAN);\n      if (booleanOperator) {\n        setCurrentField({ label: booleanOperator.label, value: booleanOperator.value, type: dataType } as any, currentFilter.id, filters.id, 'operator');\n      }\n    } else {\n      setSubMenuContent({ show: true, type: dataType });\n    }\n  };\n\n  const handleOperatorSelect = (operatorValue: string, operatorLabel: string, dataType: string) => {\n    // Set operator as SelectOption object with type\n    const operatorOption = { label: operatorLabel, value: operatorValue, type: dataType };\n    setCurrentField(operatorOption as any, currentFilter.id, filters.id, 'operator');\n    setSubMenuContent({ show: false, type: '' });\n  };\n\n  const currentSubMenu = subMenuOptions.find((option) => option.value === subMenuContent.type);\n\n  return (\n    <Popover defaultOpen>\n      <PopoverTrigger asChild>\n        <Box>\n          <CustomConditonChip>{UI_TEXT.CHOOSE_DATA_TYPE}</CustomConditonChip>\n        </Box>\n      </PopoverTrigger>\n      <PopoverContent\n        sideOffset={4}\n        align=\"start\"\n        css={{\n          width: 260,\n          borderRadius: '$xl',\n          border: '0.7px solid $black300',\n          padding: 0,\n        }}\n      >\n        {!subMenuContent.show ? (\n          <Box css={{ paddingTop: '$6' }}>\n            {/* No Preference Option */}\n            <Text\n              size=\"sm\"\n              onClick={handleNoPreference}\n              css={{\n                padding: '$3 $6',\n                marginBottom: '$4',\n                cursor: 'pointer',\n                '&:hover': {\n                  background: '$neutral100',\n                },\n              }}\n            >\n              {UI_TEXT.NO_PREFERENCE}\n            </Text>\n\n            {/* Data Type Selection */}\n            <Box\n              css={{\n                paddingTop: '$4',\n                borderTop: '$borderWidths$xs solid $neutral100',\n              }}\n            >\n              <Text\n                css={{\n                  textTransform: 'uppercase',\n                  color: '$neutral600',\n                  padding: '$4 $6',\n                }}\n                size=\"xs\"\n                weight=\"bold\"\n              >\n                {UI_TEXT.SELECT_DATA_TYPE}\n              </Text>\n\n              {subMenuOptions.map((option) => (\n                <Flex\n                  key={option.id}\n                  alignItems=\"center\"\n                  justifyContent=\"space-between\"\n                  onClick={() => handleDataTypeSelect(option.value, option.label)}\n                  css={{\n                    cursor: 'pointer',\n                    padding: '$3 $6',\n                    '&:hover': {\n                      background: 'rgba(100, 116, 139, 0.08)',\n                      '#subLabelIcon': {\n                        opacity: 1,\n                      },\n                    },\n                  }}\n                >\n                  <Box>\n                    <Text size=\"sm\" css={{ lineHeight: '$md', color: '$neutral900' }}>\n                      {option.label}\n                    </Text>\n                    <Text size=\"xs\" css={{ lineHeight: '$xs', color: '$neutral700' }}>\n                      {option.subLabel}\n                    </Text>\n                  </Box>\n                  <Box css={{ opacity: 0 }} id=\"subLabelIcon\">\n                    <ChevronRightIcon size={20} />\n                  </Box>\n                </Flex>\n              ))}\n            </Box>\n\n            {/* Info Footer */}\n            <Flex\n              css={{\n                background: 'rgba(100, 116, 139, 0.06)',\n                padding: '$6 $8',\n              }}\n              alignItems=\"center\"\n              justifyContent=\"center\"\n            >\n              <Text size=\"xs\" css={{ color: '$neutral600', lineHeight: '$xs' }}>\n                {UI_TEXT.DATA_TYPE_INFO}\n              </Text>\n            </Flex>\n          </Box>\n        ) : (\n          <Box>\n            {/* Submenu Header */}\n            <Flex\n              alignItems=\"center\"\n              gap=\"$4\"\n              css={{\n                padding: '$5 $4',\n                borderRadius: '$xl $xl 0 0',\n                backgroundColor: 'rgba(100, 116, 139, 0.06)',\n                borderBottom: '$borderWidths$xs solid rgba(100, 116, 139, 0.08)',\n              }}\n            >\n              <Box\n                onClick={() => setSubMenuContent({ show: false, type: '' })}\n                css={{\n                  borderRight: '$borderWidths$xs solid $secondary100',\n                  paddingRight: '$2',\n                  cursor: 'pointer',\n                }}\n              >\n                <ChevronRightIcon\n                  style={{ transform: 'scaleX(-1)', color: '#76859A' }}\n                  size={20}\n                />\n              </Box>\n              <Flex alignItems=\"center\">\n                <Text size=\"sm\" css={{ color: '$secondary400' }}>\n                  {currentSubMenu?.label}\n                </Text>\n                <ChevronRightIcon style={{ color: '#76859A' }} size={16} />\n                <Text size=\"sm\" weight=\"medium\" css={{ color: '$secondary600' }}>\n                  {subMenuContent.type === DATA_TYPES.DATE_TIME ? UI_TEXT.SELECT : UI_TEXT.CHOOSE}\n                </Text>\n              </Flex>\n            </Flex>\n\n            {/* Operator Options */}\n            <Box css={{ paddingBlock: subMenuContent.type === DATA_TYPES.DATE_TIME ? 0 : '$4' }}>\n              {operatorOptions\n                .filter((operator) => {\n                  if (subMenuContent.type === DATA_TYPES.DATE_TIME) {\n                    return operator.isDateOnly;\n                  }\n                  if (subMenuContent.type === DATA_TYPES.BOOLEAN) {\n                    return operator.type === DATA_TYPES.BOOLEAN;\n                  }\n                  return !operator.isDateOnly;\n                })\n                .map((option) => (\n                  <Text\n                    key={option.id}\n                    size=\"sm\"\n                    onClick={() => handleOperatorSelect(option.value, option.label, subMenuContent.type)}\n                    css={{\n                      padding: '$3 $6',\n                      cursor: 'pointer',\n                      '&:hover': {\n                        background: 'rgba(100, 116, 139, 0.08)',\n                      },\n                    }}\n                  >\n                    {option.label}\n                  </Text>\n                ))}\n            </Box>\n          </Box>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n\n"],"names":["React"],"mappings":"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"}

package/dist/es/triggers/components/popovers/FieldPopover.js

@@ -0,0 +1,91 @@
+import React__default, { useState } from 'react';
+import { CustomConditonChip } from '../chips/CustomChips.js';
+import { UI_TEXT, PLACEHOLDERS } from '../../constants/index.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js';
+import { Box } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Input } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js';
+import { SearchIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js';
+import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Text } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+
+const FieldPopover = ({
+  setCurrentField,
+  currentFilter,
+  filters,
+  fieldOptions
+}) => {
+  const [inputSearch, setInputSearch] = useState("");
+  const filteredOptions = fieldOptions.filter(
+    (option) => option.label.toLowerCase().includes(inputSearch.toLowerCase())
+  );
+  const handleFieldSelect = (field) => {
+    setCurrentField(field, currentFilter.id, filters.id, "field");
+  };
+  return /* @__PURE__ */ React__default.createElement(Popover, { defaultOpen: true }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(CustomConditonChip, null, UI_TEXT.CHOOSE_FIELD))), /* @__PURE__ */ React__default.createElement(
+    PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        paddingBottom: "12px !important",
+        width: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: "0"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Box, { css: { padding: "$4" } }, /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        placeholder: PLACEHOLDERS.SEARCH,
+        leftIcon: /* @__PURE__ */ React__default.createElement(SearchIcon, null),
+        variant: "filled",
+        size: "lg",
+        value: inputSearch,
+        onChange: (e) => setInputSearch(e.currentTarget.value)
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        flexDirection: "column",
+        css: {
+          paddingBottom: "$4",
+          maxHeight: 240,
+          height: "100%",
+          overflow: "auto"
+        }
+      },
+      filteredOptions.length > 0 ? filteredOptions.map((field) => /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          key: field.id,
+          onClick: () => handleFieldSelect(field),
+          css: {
+            padding: "$3 $6",
+            transition: "all .3s ease",
+            cursor: "pointer",
+            "&:hover": {
+              backgroundColor: "rgba(100, 116, 139, 0.06)"
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, field.label)
+      )) : /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          size: "sm",
+          css: {
+            padding: "$3 $6",
+            color: "$neutral800",
+            textAlign: "center"
+          }
+        },
+        UI_TEXT.NO_OPTIONS
+      )
+    )
+  ));
+};
+
+export { FieldPopover };
+//# sourceMappingURL=FieldPopover.js.map

package/dist/es/triggers/components/popovers/FieldPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPopover.js","sources":["../../../../../src/triggers/components/popovers/FieldPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Box,\n  Flex,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Text,\n} from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { CustomConditonChip } from '../chips/CustomChips';\nimport { FieldPopoverProps } from '../../types';\nimport { SelectOption } from '../../../commons/types/enhanced';\nimport { UI_TEXT, PLACEHOLDERS } from '../../constants';\n\n/**\n * Field Popover Component\n * Allows user to select a field from available options\n */\nexport const FieldPopover: React.FC<FieldPopoverProps> = ({\n  setCurrentField,\n  currentFilter,\n  filters,\n  fieldOptions,\n}) => {\n  const [inputSearch, setInputSearch] = useState('');\n\n  const filteredOptions = fieldOptions.filter((option) =>\n    option.label.toLowerCase().includes(inputSearch.toLowerCase())\n  );\n\n  const handleFieldSelect = (field: SelectOption) => {\n    // Set the entire field object, not just the value\n    setCurrentField(field as any, currentFilter.id, filters.id, 'field');\n  };\n\n  return (\n    <Popover defaultOpen>\n      <PopoverTrigger asChild>\n        <Box>\n          <CustomConditonChip>{UI_TEXT.CHOOSE_FIELD}</CustomConditonChip>\n        </Box>\n      </PopoverTrigger>\n      <PopoverContent\n        sideOffset={4}\n        align=\"start\"\n        css={{\n          paddingBottom: '12px !important',\n          width: 220,\n          borderRadius: '$xl',\n          border: '0.7px solid $black300',\n          padding: '0',\n        }}\n      >\n        <Box css={{ padding: '$4' }}>\n          <Input\n            placeholder={PLACEHOLDERS.SEARCH}\n            leftIcon={<SearchIcon />}\n            variant=\"filled\"\n            size=\"lg\"\n            value={inputSearch}\n            onChange={(e) => setInputSearch(e.currentTarget.value)}\n          />\n        </Box>\n\n        <Flex\n          flexDirection=\"column\"\n          css={{\n            paddingBottom: '$4',\n            maxHeight: 240,\n            height: '100%',\n            overflow: 'auto',\n          }}\n        >\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((field) => (\n              <Box\n                key={field.id}\n                onClick={() => handleFieldSelect(field)}\n                css={{\n                  padding: '$3 $6',\n                  transition: 'all .3s ease',\n                  cursor: 'pointer',\n                  '&:hover': {\n                    backgroundColor: 'rgba(100, 116, 139, 0.06)',\n                  },\n                }}\n              >\n                <Text size=\"sm\">{field.label}</Text>\n              </Box>\n            ))\n          ) : (\n            <Text\n              size=\"sm\"\n              css={{\n                padding: '$3 $6',\n                color: '$neutral800',\n                textAlign: 'center',\n              }}\n            >\n              {UI_TEXT.NO_OPTIONS}\n            </Text>\n          )}\n        </Flex>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\n"],"names":["React"],"mappings":"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"}