@sparrowengg/integrations-templates-frontend 1.9.84-beta.15 → 1.9.84-beta.17

package/dist/cjs/filter/filter-pill.js

@@ -0,0 +1,301 @@
+'use strict';
+
+var slitches_config = require('../packages/frontend-templates/slitches.config.js');
+var StyledItem = require('../cascader-dropdown/styled/StyledItem.js');
+var React = require('react');
+var cascaderDropdown = require('../cascader-dropdown/cascader-dropdown.js');
+var cascaderDropdownConstants = require('../cascader-dropdown/helpers/cascader-dropdown-constants.js');
+var filterPillValueSelector = require('./filter-pill-value-selector.js');
+var flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var tooltip = require('../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var text = require('../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var closeCircleFill = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close-circle-fill.js');
+var box = require('../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getDisplayValue = (value) => {
+  var _a;
+  if (!value.connector)
+    return null;
+  const displayValue = (_a = value.value) == null ? void 0 : _a[value.connector.dataType];
+  if (typeof displayValue === "string")
+    return displayValue;
+  if (Array.isArray(displayValue))
+    return displayValue.join(", ");
+  if (value.connector.dataType === cascaderDropdownConstants.dataTypes.DATE_RANGE && typeof displayValue === "object" && displayValue !== null) {
+    return `${displayValue.start} - ${displayValue.end}`;
+  }
+  return null;
+};
+const FilterPill = ({
+  icon,
+  filterPillData,
+  setFilterPillData,
+  variant = "outline",
+  cascaderDropdownData,
+  onDelete,
+  showError = false
+}) => {
+  var _a, _b, _c, _d, _e;
+  const onChange = ({
+    selectedProperty,
+    selectorValue
+  }) => {
+    if (selectedProperty && "type" in selectedProperty && selectedProperty.type === cascaderDropdownConstants.optionTypes.VALUE_SELECTOR) {
+      if (!("dataType" in selectedProperty))
+        return;
+      const newFilterPillData = __spreadProps(__spreadValues({}, filterPillData), {
+        value: selectorValue != null ? selectorValue : cascaderDropdownConstants.initialFilterValueSelectorValue,
+        connector: {
+          dataType: selectedProperty.dataType,
+          label: `${selectedProperty.label}`,
+          value: `${selectedProperty.value}`,
+          type: selectedProperty.type
+        }
+      });
+      setFilterPillData(newFilterPillData);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(StyledFilterPill, { variant: showError ? "error" : variant }, /* @__PURE__ */ React.createElement(FilterPillLabel, { icon, label: filterPillData.property.label, labelProps: { css: { color: "$neutral900" } } }), /* @__PURE__ */ React.createElement(flex.Flex, null, !((_a = filterPillData.connector) == null ? void 0 : _a.value) && /* @__PURE__ */ React.createElement(
+    cascaderDropdown.CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        css: __spreadValues({
+          color: "$neutral700",
+          padding: "3px $4 3px $1"
+        }, showError && {
+          color: "$negative700",
+          fontWeight: "$5"
+        })
+      },
+      "Choose Condition"
+    ))
+  ), ((_b = filterPillData.connector) == null ? void 0 : _b.value) && /* @__PURE__ */ React.createElement(
+    cascaderDropdown.CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React.createElement(StyledValueButton, null, /* @__PURE__ */ React.createElement(text.Text, { css: { color: "$neutral700", padding: "3px $1 3px $1" } }, (_c = filterPillData.connector) == null ? void 0 : _c.label))
+  ), ((_d = filterPillData.connector) == null ? void 0 : _d.value) && /* @__PURE__ */ React.createElement(
+    cascaderDropdown.CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      value: filterPillData.connector,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        css: __spreadValues({
+          color: "$neutral900",
+          padding: "3px $4 3px $2"
+        }, showError && {
+          color: "$negative700"
+        }),
+        weight: "medium"
+      },
+      (_e = getDisplayValue(filterPillData)) != null ? _e : "Choose Value"
+    ))
+  )), /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Remove" }, /* @__PURE__ */ React.createElement(StyledCloseButton, { className: StyledItem.prefixClassName("filter-pill__close-button"), onClick: () => onDelete() }, /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: 16 })))));
+};
+const FilterPillLabel = ({
+  icon,
+  label,
+  css,
+  labelProps,
+  iconProps
+}) => {
+  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2", css: __spreadValues({ padding: "3px $2 3px $4" }, css) }, icon && /* @__PURE__ */ React.createElement(
+    box.Box,
+    __spreadProps(__spreadValues({}, iconProps), {
+      css: __spreadValues({
+        lineHeight: 0,
+        flexShrink: 0,
+        color: "$neutral800",
+        "&, & svg": {
+          minWidth: "$4",
+          minHeight: "$4",
+          height: "$4",
+          width: "$4"
+        }
+      }, iconProps == null ? void 0 : iconProps.css)
+    }),
+    icon
+  ), /* @__PURE__ */ React.createElement(
+    text.Text,
+    __spreadProps(__spreadValues({
+      weight: "medium",
+      truncate: true
+    }, labelProps), {
+      css: __spreadValues({ color: "$neutral700", maxWidth: "$25" }, labelProps == null ? void 0 : labelProps.css)
+    }),
+    label
+  ));
+};
+const FilterPillWithoutOperator = ({
+  icon,
+  filterPillData,
+  setFilterPillData,
+  variant = "outline",
+  data,
+  onDelete,
+  showError = false
+}) => {
+  var _a;
+  const onChange = (value) => {
+    const newFilterPillData = __spreadProps(__spreadValues({}, filterPillData), {
+      value: __spreadProps(__spreadValues({}, filterPillData.value), {
+        [data.dataType]: value
+      }),
+      connector: {
+        dataType: data.dataType,
+        label: `${data.label}`,
+        value: `${data.value}`,
+        type: data.type
+      }
+    });
+    setFilterPillData(newFilterPillData);
+  };
+  return /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(StyledFilterPill, { variant: showError ? "error" : variant }, /* @__PURE__ */ React.createElement(FilterPillLabel, { icon, label: `${filterPillData.property.label}:` }), /* @__PURE__ */ React.createElement(filterPillValueSelector.default, { selectorValue: filterPillData.value, dataType: data.dataType, choices: data.choices, onApply: onChange }, /* @__PURE__ */ React.createElement(flex.Flex, null, /* @__PURE__ */ React.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React.createElement(
+    text.Text,
+    {
+      css: __spreadValues({
+        color: "$neutral900",
+        padding: "3px $4 3px $2"
+      }, showError && {
+        color: "$negative700"
+      }),
+      weight: "medium"
+    },
+    (_a = getDisplayValue(filterPillData)) != null ? _a : "Choose Value"
+  )))), /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Remove" }, /* @__PURE__ */ React.createElement(StyledCloseButton, { className: StyledItem.prefixClassName("filter-pill__close-button"), onClick: () => onDelete() }, /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: 16 })))));
+};
+const StyledFilterPill = slitches_config.styled(flex.Flex, {
+  height: "$7",
+  alignItems: "center",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "$black200",
+  borderRadius: "$lg",
+  transition: "all $transitions$2",
+  cursor: "default",
+  width: "fit-content",
+  position: "relative",
+  flexShrink: 0,
+  "&:hover": {
+    borderColor: "$black400"
+  },
+  [`&:hover .${StyledItem.prefixClassName("filter-pill__close-button")}`]: {
+    opacity: 1
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    },
+    variant: {
+      outline: {
+        backgroundColor: "transparent"
+      },
+      filled: {
+        backgroundColor: "$secondary50"
+      },
+      error: {
+        backgroundColorOpacity: ["$negative500", 0.05],
+        borderStyle: "dashed",
+        borderColor: "$negative400",
+        "&:hover": {
+          borderColor: "$negative400"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+const StyledValueButton = slitches_config.styled("button", {
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  border: "none",
+  cursor: "pointer",
+  height: "100%",
+  transition: "all $transitions$2",
+  outlineWidth: "1px",
+  outlineStyle: "solid",
+  outlineColor: "transparent",
+  flexShrink: 0,
+  "&:focus, &:active": {
+    outlineColor: "transparent"
+  },
+  "&:focus-visible": {
+    outline: "1px solid $primary400"
+  }
+});
+const StyledCloseButton = slitches_config.styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  cursor: "pointer",
+  outline: "none",
+  color: "$neutral500",
+  transition: "all $transitions$2",
+  lineHeight: 0,
+  position: "absolute",
+  right: 0,
+  top: 0,
+  transform: "translate(35%, -35%)",
+  opacity: 0,
+  background: "radial-gradient($white900, $white900 50%, transparent 50%, transparent)",
+  "&:hover, &:focus, &:active, &:focus-visible": {
+    opacity: 1
+  },
+  "& path": {
+    outlineWidth: "3px",
+    outlineStyle: "solid",
+    outlineColor: "$white900",
+    borderRadius: "$round"
+  },
+  "&:hover": {
+    color: "$neutral800"
+  },
+  "&:hover path, &:focus path, &:active path, &:focus-visible path": {
+    outlineColor: "#F2F5F8"
+  }
+});
+
+exports.FilterPill = FilterPill;
+exports.FilterPillWithoutOperator = FilterPillWithoutOperator;
+//# sourceMappingURL=filter-pill.js.map

package/dist/cjs/filter/filter-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill.js","sources":["../../../src/filter/filter-pill.tsx"],"sourcesContent":["import { CloseCircleFillIcon } from '@sparrowengg/twigs-react-icons';\nimport { Box, BoxProps } from '@sparrowengg/twigs-react';\nimport { Flex } from '@sparrowengg/twigs-react';\nimport { Tooltip, TooltipProvider } from '@sparrowengg/twigs-react';\nimport { styled } from '../../slitches.config';\nimport { Text, TextProps } from '@sparrowengg/twigs-react';\nimport { prefixClassName } from '../cascader-dropdown/styled/StyledItem';\nimport React from 'react';\nimport { CascaderDropdown, OnChangeReturnType } from '../cascader-dropdown';\nimport {\n  CascaderDropdownItemType, CascaderDropdownOperatorType, CascaderDropdownValueSelectorType, dataTypes, initialFilterValueSelectorValue, optionTypes\n} from '../cascader-dropdown/helpers/cascader-dropdown-constants';\nimport { CSS } from '@stitches/react';\nimport FilterPillValueSelector from './filter-pill-value-selector';\nimport { FilterType } from './stories/filter.stories';\n\nexport type FilterPillProps = {\n  icon?: React.ReactNode;\n  filterPillData: FilterType;\n  setFilterPillData: (value: FilterType) => void;\n  variant?: 'filled' | 'outline';\n  cascaderDropdownData: (CascaderDropdownItemType | CascaderDropdownOperatorType)[];\n  onDelete: () => void;\n  showError?: boolean;\n};\n\nexport type FilterValueOperatorType = {\n  label: string;\n  value: string;\n  dataType: keyof typeof dataTypes;\n  choices?: { label: string; value: string }[];\n};\n\nexport type FilterValueItemType = {\n  label?: string;\n  value?: string;\n  options: FilterValueOperatorType[];\n};\n\nconst getDisplayValue = (value: FilterType) => {\n  if (!value.connector) return null;\n  const displayValue = value.value?.[value.connector.dataType];\n  if (typeof displayValue === 'string') return displayValue;\n  if (Array.isArray(displayValue)) return displayValue.join(', ');\n  if (value.connector.dataType === dataTypes.DATE_RANGE && typeof displayValue === 'object' && displayValue !== null) {\n    return `${displayValue.start} - ${displayValue.end}`;\n  }\n  return null;\n};\n\nexport const FilterPill = ({\n  icon,\n  filterPillData,\n  setFilterPillData,\n  variant = 'outline',\n  cascaderDropdownData,\n  onDelete,\n  showError = false\n}: FilterPillProps) => {\n  const onChange = ({\n    selectedProperty,\n    selectorValue\n  }: OnChangeReturnType) => {\n    if (selectedProperty && 'type' in selectedProperty && selectedProperty.type === optionTypes.VALUE_SELECTOR) {\n      if (!('dataType' in selectedProperty)) return;\n      const newFilterPillData = {\n        ...filterPillData,\n        value: selectorValue ?? initialFilterValueSelectorValue,\n        connector: {\n          dataType: selectedProperty.dataType as keyof typeof dataTypes,\n          label: `${selectedProperty.label}`,\n          value: `${selectedProperty.value}`,\n          type: selectedProperty.type as 'VALUE_SELECTOR'\n        }\n      };\n      setFilterPillData(newFilterPillData);\n    }\n  };\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <StyledFilterPill variant={showError ? 'error' : variant}>\n        <FilterPillLabel icon={icon} label={filterPillData.property.label} labelProps={{ css: { color: '$neutral900' } }} />\n        <Flex>\n          {!filterPillData.connector?.value && (\n            <CascaderDropdown\n              data={cascaderDropdownData}\n              selectorValue={filterPillData.value}\n              onChange={onChange}\n              dropdownContentProps={{ align: 'start' }}\n            >\n              <StyledValueButton css={{ borderTopRightRadius: '$lg', borderBottomRightRadius: '$lg' }}>\n                <Text\n                  css={{\n                    color: '$neutral700',\n                    padding: '3px $4 3px $1',\n                    ...(showError && {\n                      color: '$negative700',\n                      fontWeight: '$5'\n                    })\n                  }}\n                >\n                  Choose Condition\n                </Text>\n              </StyledValueButton>\n            </CascaderDropdown>\n          )}\n          {filterPillData.connector?.value && (\n            <CascaderDropdown\n              data={cascaderDropdownData}\n              selectorValue={filterPillData.value}\n              onChange={onChange}\n              dropdownContentProps={{ align: 'start' }}\n            >\n              <StyledValueButton>\n                <Text css={{ color: '$neutral700', padding: '3px $1 3px $1' }}>{filterPillData.connector?.label}</Text>\n              </StyledValueButton>\n            </CascaderDropdown>\n          )}\n          {filterPillData.connector?.value && (\n            <CascaderDropdown\n              data={cascaderDropdownData}\n              selectorValue={filterPillData.value}\n              value={filterPillData.connector}\n              onChange={onChange}\n              dropdownContentProps={{ align: 'start' }}\n            >\n              <StyledValueButton css={{ borderTopRightRadius: '$lg', borderBottomRightRadius: '$lg' }}>\n                <Text\n                  css={{\n                    color: '$neutral900',\n                    padding: '3px $4 3px $2',\n                    ...(showError && {\n                      color: '$negative700'\n                    })\n                  }}\n                  weight=\"medium\"\n                >\n                  {getDisplayValue(filterPillData) ?? 'Choose Value'}\n                </Text>\n              </StyledValueButton>\n            </CascaderDropdown>\n          )}\n        </Flex>\n        <Tooltip content=\"Remove\">\n          <StyledCloseButton className={prefixClassName('filter-pill__close-button')} onClick={() => onDelete()}>\n            <CloseCircleFillIcon size={16} />\n          </StyledCloseButton>\n        </Tooltip>\n      </StyledFilterPill>\n    </TooltipProvider>\n  );\n};\n\nconst FilterPillLabel = ({\n  icon, label, css, labelProps, iconProps\n}: { icon?: React.ReactNode, label?: string, css?: CSS, labelProps?: TextProps, iconProps?: BoxProps }) => {\n  return (\n    <Flex alignItems=\"center\" gap=\"$2\" css={{ padding: '3px $2 3px $4', ...css }}>\n      {icon && (\n        <Box\n          {...iconProps}\n          css={{\n            lineHeight: 0,\n            flexShrink: 0,\n            color: '$neutral800',\n            '&, & svg': {\n              minWidth: '$4',\n              minHeight: '$4',\n              height: '$4',\n              width: '$4'\n            },\n            ...iconProps?.css\n          }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Text\n        weight=\"medium\"\n        truncate\n        {...labelProps}\n        css={{ color: '$neutral700', maxWidth: '$25', ...labelProps?.css }}\n      >\n        {label}\n      </Text>\n    </Flex>\n  );\n};\n\ntype FilterPillWithoutOperatorProps = {\n  icon?: React.ReactNode;\n  filterPillData: FilterType;\n  setFilterPillData: (value: FilterType) => void;\n  variant?: 'filled' | 'outline';\n  data: CascaderDropdownOperatorType;\n  onDelete: () => void;\n  showError?: boolean;\n};\nexport const FilterPillWithoutOperator = ({\n  icon,\n  filterPillData,\n  setFilterPillData,\n  variant = 'outline',\n  data,\n  onDelete,\n  showError = false\n}: FilterPillWithoutOperatorProps) => {\n  const onChange = (value: CascaderDropdownValueSelectorType[keyof CascaderDropdownValueSelectorType]) => {\n    const newFilterPillData = {\n      ...filterPillData,\n      value: {\n        ...filterPillData.value,\n        [data.dataType]: value\n      },\n      connector: {\n        dataType: data.dataType,\n        label: `${data.label}`,\n        value: `${data.value}`,\n        type: data.type\n      }\n    };\n    setFilterPillData(newFilterPillData);\n  };\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <StyledFilterPill variant={showError ? 'error' : variant}>\n        <FilterPillLabel icon={icon} label={`${filterPillData.property.label}:`} />\n        <FilterPillValueSelector selectorValue={filterPillData.value} dataType={data.dataType} choices={data.choices} onApply={onChange}>\n          <Flex>\n            <StyledValueButton css={{ borderTopRightRadius: '$lg', borderBottomRightRadius: '$lg' }}>\n              <Text\n                css={{\n                  color: '$neutral900',\n                  padding: '3px $4 3px $2',\n                  ...(showError && {\n                    color: '$negative700'\n                  })\n                }}\n                weight=\"medium\"\n              >\n                {getDisplayValue(filterPillData) ?? 'Choose Value'}\n              </Text>\n            </StyledValueButton>\n          </Flex>\n        </FilterPillValueSelector>\n        <Tooltip content=\"Remove\">\n          <StyledCloseButton className={prefixClassName('filter-pill__close-button')} onClick={() => onDelete()}>\n            <CloseCircleFillIcon size={16} />\n          </StyledCloseButton>\n        </Tooltip>\n      </StyledFilterPill>\n    </TooltipProvider>\n  );\n};\n\nconst StyledFilterPill = styled(Flex, {\n  height: '$7',\n  alignItems: 'center',\n  borderWidth: '1px',\n  borderStyle: 'solid',\n  borderColor: '$black200',\n  borderRadius: '$lg',\n  transition: 'all $transitions$2',\n  cursor: 'default',\n  width: 'fit-content',\n  position: 'relative',\n  flexShrink: 0,\n  '&:hover': {\n    borderColor: '$black400'\n  },\n  [`&:hover .${prefixClassName('filter-pill__close-button')}`]: {\n    opacity: 1\n  },\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.4,\n        cursor: 'not-allowed'\n      }\n    },\n    variant: {\n      outline: {\n        backgroundColor: 'transparent'\n      },\n      filled: {\n        backgroundColor: '$secondary50'\n      },\n      error: {\n        backgroundColorOpacity: ['$negative500', 0.05],\n        borderStyle: 'dashed',\n        borderColor: '$negative400',\n        '&:hover': {\n          borderColor: '$negative400'\n        }\n      }\n    }\n  },\n  defaultVariants: {\n    variant: 'outline'\n  }\n});\n\nconst StyledValueButton = styled('button', {\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  border: 'none',\n  cursor: 'pointer',\n  height: '100%',\n  transition: 'all $transitions$2',\n  outlineWidth: '1px',\n  outlineStyle: 'solid',\n  outlineColor: 'transparent',\n  flexShrink: 0,\n  '&:focus, &:active': {\n    outlineColor: 'transparent'\n  },\n  '&:focus-visible': {\n    outline: '1px solid $primary400'\n  }\n});\n\nconst StyledCloseButton = styled('button', {\n  backgroundColor: 'transparent',\n  border: 'none',\n  cursor: 'pointer',\n  outline: 'none',\n  color: '$neutral500',\n  transition: 'all $transitions$2',\n  lineHeight: 0,\n  position: 'absolute',\n  right: 0,\n  top: 0,\n  transform: 'translate(35%, -35%)',\n  opacity: 0,\n  background: 'radial-gradient($white900, $white900 50%, transparent 50%, transparent)',\n  '&:hover, &:focus, &:active, &:focus-visible': {\n    opacity: 1\n  },\n  '& path': {\n    outlineWidth: '3px',\n    outlineStyle: 'solid',\n    outlineColor: '$white900',\n    borderRadius: '$round'\n  },\n  '&:hover': {\n    color: '$neutral800'\n  },\n  '&:hover path, &:focus path, &:active path, &:focus-visible path': {\n    outlineColor: '#F2F5F8'\n  }\n});\n"],"names":["dataTypes","optionTypes","initialFilterValueSelectorValue","TooltipProvider","Flex","CascaderDropdown","Text","Tooltip","prefixClassName","CloseCircleFillIcon","Box","FilterPillValueSelector","styled"],"mappings":"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"}

package/dist/cjs/index.js

@@ -7,6 +7,8 @@ var index$3 = require('./single-mapping/index.js');
 var index$4 = require('./triggers/index.js');
 var index$5 = require('./contact-import/index.js');
 var index$6 = require('./dynamic-mapping/index.js');
+var filterPill = require('./filter/filter-pill.js');
+var cascaderDropdown = require('./cascader-dropdown/cascader-dropdown.js');
 
 
 
@@ -17,4 +19,7 @@ exports.SingleMapping = index$3.SingleMapping;
 exports.Triggers = index$4.Triggers;
 exports.ContactImport = index$5.ContactImport;
 exports.DynamicMapping = index$6.DynamicMapping;
+exports.FilterPill = filterPill.FilterPill;
+exports.FilterPillWithoutOperator = filterPill.FilterPillWithoutOperator;
+exports.CascaderDropdown = cascaderDropdown.CascaderDropdown;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/integration-template/components/dashboard.js

@@ -794,7 +794,7 @@ const SingleMappingDashboardItem = ({
   integrationName,
   onMappingEditHandler
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z;
   const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
   const [isSyncing, setIsSyncing] = React.useState(null);
@@ -831,25 +831,9 @@ const SingleMappingDashboardItem = ({
           onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
         },
         isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
-        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), ((_e = field == null ? void 0 : field.configurationFields) == null ? void 0 : _e.sheetURL) && (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, `Sync `), /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            weight: "bold",
-            css: { color: "$neutral600" }
-          },
-          (field == null ? void 0 : field.importMethod) === "SEND_ALL_DATA" ? "All" : "Specific"
-        ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, "Survey responses to"), /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            weight: "bold",
-            css: { color: "$neutral600" }
-          },
-          typeof ((_f = field == null ? void 0 : field.configurationFields) == null ? void 0 : _f.spreadsheet) === "object" ? (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.spreadsheet) == null ? void 0 : _h.value) == null ? void 0 : _i.label : (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.spreadsheet) == null ? void 0 : _k.value
-        )) : null))
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (field == null ? void 0 : field.mappingName) ? field == null ? void 0 : field.mappingName : (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), (field == null ? void 0 : field.mappingDescription) ? /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, (field == null ? void 0 : field.mappingDescription) ? field == null ? void 0 : field.mappingDescription : `Sync survey responses to ${integrationName} when ${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.events) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()} is ${trasformToPastTense(`${(_j = (_i = (_h = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _h.action) == null ? void 0 : _i.label) == null ? void 0 : _j.toLowerCase()}`)}`) : null))
       ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, syncMapping ? /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
         button.Button,
         {
           variant: "ghost",
@@ -877,7 +861,7 @@ const SingleMappingDashboardItem = ({
           },
           /* @__PURE__ */ React.createElement(sync.default, null)
         )
-      )), (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
+      )) : null, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
         box.Box,
         {
           css: {
@@ -959,58 +943,58 @@ const SingleMappingDashboardItem = ({
         }
       },
       /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { field }),
-      !!((_o = (_n = (_m = (_l = field == null ? void 0 : field.mappedFields) == null ? void 0 : _l.questions) == null ? void 0 : _m.filter) == null ? void 0 : _n.call(_m, (question) => question.isEnabled)) == null ? void 0 : _o.length) ? /* @__PURE__ */ React.createElement(
+      !!((_n = (_m = (_l = (_k = field == null ? void 0 : field.mappedFields) == null ? void 0 : _k.questions) == null ? void 0 : _l.filter) == null ? void 0 : _m.call(_l, (question) => question.isEnabled)) == null ? void 0 : _n.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Questions",
-          fields: (_r = (_q = (_p = field == null ? void 0 : field.mappedFields) == null ? void 0 : _p.questions) == null ? void 0 : _q.filter) == null ? void 0 : _r.call(_q, (question) => question.isEnabled),
+          fields: (_q = (_p = (_o = field == null ? void 0 : field.mappedFields) == null ? void 0 : _o.questions) == null ? void 0 : _p.filter) == null ? void 0 : _q.call(_p, (question) => question.isEnabled),
           backgroundColor: "#E5F2FF"
         }
       ) : null,
-      !!((_v = (_u = (_t = (_s = field == null ? void 0 : field.mappedFields) == null ? void 0 : _s.derivedQuestions) == null ? void 0 : _t.filter) == null ? void 0 : _u.call(
-        _t,
+      !!((_u = (_t = (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.derivedQuestions) == null ? void 0 : _s.filter) == null ? void 0 : _t.call(
+        _s,
         (derivedQuestion) => derivedQuestion.isEnabled
-      )) == null ? void 0 : _v.length) ? /* @__PURE__ */ React.createElement(
+      )) == null ? void 0 : _u.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Enrich",
-          fields: (_y = (_x = (_w = field == null ? void 0 : field.mappedFields) == null ? void 0 : _w.derivedQuestions) == null ? void 0 : _x.filter) == null ? void 0 : _y.call(
-            _x,
+          fields: (_x = (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.derivedQuestions) == null ? void 0 : _w.filter) == null ? void 0 : _x.call(
+            _w,
             (derivedQuestion) => derivedQuestion.isEnabled
           ),
           backgroundColor: "#E5F2FF"
         }
       ) : null,
-      !!((_C = (_B = (_A = (_z = field == null ? void 0 : field.mappedFields) == null ? void 0 : _z.variables) == null ? void 0 : _A.filter) == null ? void 0 : _B.call(_A, (variable) => variable.isEnabled)) == null ? void 0 : _C.length) ? /* @__PURE__ */ React.createElement(
+      !!((_B = (_A = (_z = (_y = field == null ? void 0 : field.mappedFields) == null ? void 0 : _y.variables) == null ? void 0 : _z.filter) == null ? void 0 : _A.call(_z, (variable) => variable.isEnabled)) == null ? void 0 : _B.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Variables",
-          fields: (_F = (_E = (_D = field == null ? void 0 : field.mappedFields) == null ? void 0 : _D.variables) == null ? void 0 : _E.filter) == null ? void 0 : _F.call(_E, (variable) => variable.isEnabled),
+          fields: (_E = (_D = (_C = field == null ? void 0 : field.mappedFields) == null ? void 0 : _C.variables) == null ? void 0 : _D.filter) == null ? void 0 : _E.call(_D, (variable) => variable.isEnabled),
           backgroundColor: "$positive100"
         }
       ) : null,
-      !!((_J = (_I = (_H = (_G = field == null ? void 0 : field.mappedFields) == null ? void 0 : _G.contactProperties) == null ? void 0 : _H.filter) == null ? void 0 : _I.call(_H, (property) => property.isEnabled)) == null ? void 0 : _J.length) ? /* @__PURE__ */ React.createElement(
+      !!((_I = (_H = (_G = (_F = field == null ? void 0 : field.mappedFields) == null ? void 0 : _F.contactProperties) == null ? void 0 : _G.filter) == null ? void 0 : _H.call(_G, (property) => property.isEnabled)) == null ? void 0 : _I.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Contacts",
-          fields: (_M = (_L = (_K = field == null ? void 0 : field.mappedFields) == null ? void 0 : _K.contactProperties) == null ? void 0 : _L.filter) == null ? void 0 : _M.call(_L, (property) => property.isEnabled),
+          fields: (_L = (_K = (_J = field == null ? void 0 : field.mappedFields) == null ? void 0 : _J.contactProperties) == null ? void 0 : _K.filter) == null ? void 0 : _L.call(_K, (property) => property.isEnabled),
           backgroundColor: "$negative100"
         }
       ) : null,
-      !!((_Q = (_P = (_O = (_N = field == null ? void 0 : field.mappedFields) == null ? void 0 : _N.expressions) == null ? void 0 : _O.filter) == null ? void 0 : _P.call(_O, (expression) => expression.isEnabled)) == null ? void 0 : _Q.length) ? /* @__PURE__ */ React.createElement(
+      !!((_P = (_O = (_N = (_M = field == null ? void 0 : field.mappedFields) == null ? void 0 : _M.expressions) == null ? void 0 : _N.filter) == null ? void 0 : _O.call(_N, (expression) => expression.isEnabled)) == null ? void 0 : _P.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Expression",
           backgroundColor: "$neutral100",
-          fields: (_T = (_S = (_R = field == null ? void 0 : field.mappedFields) == null ? void 0 : _R.expressions) == null ? void 0 : _S.filter) == null ? void 0 : _T.call(_S, (expression) => expression.isEnabled)
+          fields: (_S = (_R = (_Q = field == null ? void 0 : field.mappedFields) == null ? void 0 : _Q.expressions) == null ? void 0 : _R.filter) == null ? void 0 : _S.call(_R, (expression) => expression.isEnabled)
         }
       ) : null,
-      !!((_X = (_W = (_V = (_U = field == null ? void 0 : field.mappedFields) == null ? void 0 : _U.property) == null ? void 0 : _V.filter) == null ? void 0 : _W.call(_V, (property) => property.isEnabled)) == null ? void 0 : _X.length) ? /* @__PURE__ */ React.createElement(
+      !!((_W = (_V = (_U = (_T = field == null ? void 0 : field.mappedFields) == null ? void 0 : _T.property) == null ? void 0 : _U.filter) == null ? void 0 : _V.call(_U, (property) => property.isEnabled)) == null ? void 0 : _W.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Property",
           hideBorder: true,
-          fields: (__ = (_Z = (_Y = field == null ? void 0 : field.mappedFields) == null ? void 0 : _Y.property) == null ? void 0 : _Z.filter) == null ? void 0 : __.call(_Z, (property) => property.isEnabled),
+          fields: (_Z = (_Y = (_X = field == null ? void 0 : field.mappedFields) == null ? void 0 : _X.property) == null ? void 0 : _Y.filter) == null ? void 0 : _Z.call(_Y, (property) => property.isEnabled),
           backgroundColor: "rgba(74, 156, 166, 0.15)"
         }
       ) : null