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

package/dist/es/cascader-dropdown/cascader-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-dropdown.js","sources":["../../../src/cascader-dropdown/cascader-dropdown.tsx"],"sourcesContent":["import { ReactNode, RefAttributes, useMemo, useState } from \"react\";\nimport { PopoverProps, PopoverContentProps } from \"@radix-ui/react-popover\";\nimport { TooltipProps, TooltipProvider } from \"@sparrowengg/twigs-react\";\nimport {\n  CascaderDropdownItemType,\n  CascaderDropdownDataValueType,\n  CascaderDropdownValueSelectorType,\n  CascaderDropdownOperatorType,\n  initialFilterValueSelectorValue,\n} from \"./helpers/cascader-dropdown-constants\";\nimport { CascaderDropdownProvider } from \"./cascader-dropdown-provider\";\nimport { CascaderDropdownContent } from \"./cascader-dropdown-content\";\nimport { recursiveFind } from \"./helpers/cascader-dropdown-utils\";\nimport React from \"react\";\nimport ThemeWrapper from \"../commons/components/theme-wrapper\";\n\nexport type DropdownContentProps = PopoverContentProps &\n  RefAttributes<HTMLDivElement>;\n\nexport type CascaderDropdownProps = {\n  children?: ReactNode;\n  data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[];\n  value?: CascaderDropdownDataValueType | string | null;\n  defaultValue?: CascaderDropdownDataValueType | string | null;\n  onChange?: ({\n    value,\n    selectionPath,\n    selectedProperty,\n    selectorValue,\n  }: OnChangeReturnType) => void;\n  dropdownProps?: PopoverProps;\n  dropdownContentProps?: DropdownContentProps;\n  tooltipProps?: TooltipProps;\n  selectorValue?: CascaderDropdownValueSelectorType;\n} & CascaderDropdownComponentProps;\n\nexport type CascaderDropdownComponentProps = {};\n\nexport type OnChangeReturnType = {\n  value: CascaderDropdownDataValueType | CascaderDropdownOperatorType;\n  selectionPath: CascaderDropdownDataValueType[];\n  selectedProperty: CascaderDropdownDataValueType | null;\n  selectorValue?: CascaderDropdownValueSelectorType;\n};\n\nexport const CascaderDropdown = ({\n  children,\n  data = [],\n  value = null,\n  defaultValue = null,\n  onChange,\n  dropdownProps = {},\n  dropdownContentProps = {},\n  tooltipProps,\n  selectorValue = initialFilterValueSelectorValue,\n}: CascaderDropdownProps) => {\n  const [localValue, setLocalValue] = useState<CascaderDropdownDataValueType>(\n    (typeof defaultValue === \"object\"\n      ? defaultValue\n      : recursiveFind(data, { value: defaultValue, label: \"\" })) ?? {\n      value: \"\",\n      label: \"\",\n    }\n  );\n\n  const selectedValue = useMemo<CascaderDropdownDataValueType>(() => {\n    if (value && typeof value === \"object\") {\n      return value;\n    }\n\n    if (value) {\n      return (\n        recursiveFind(data, { value, label: \"\" }) ?? { value: \"\", label: \"\" }\n      );\n    }\n\n    if (localValue && typeof localValue === \"object\") {\n      return localValue;\n    }\n\n    return { value: \"\", label: \"\" };\n  }, [data, localValue, value]);\n\n  return (\n    <ThemeWrapper>\n      <TooltipProvider delayDuration={0}>\n        <CascaderDropdownProvider\n          data={data}\n          value={selectedValue}\n          selectorValue={selectorValue}\n          onChange={({\n            value: selectedDataValue,\n            selectionPath,\n            selectorValue: selectedSelectorValue,\n          }: {\n            value: CascaderDropdownDataValueType | CascaderDropdownOperatorType;\n            selectionPath: CascaderDropdownDataValueType[];\n            selectorValue?: CascaderDropdownValueSelectorType;\n          }) => {\n            setLocalValue(selectedDataValue);\n            if (onChange) {\n              onChange({\n                value: selectedDataValue,\n                selectionPath,\n                selectedProperty: recursiveFind(data, {\n                  value: selectedDataValue.value,\n                  label: \"\",\n                }),\n                selectorValue: selectedSelectorValue,\n              });\n            }\n          }}\n        >\n          <CascaderDropdownContent\n            {...dropdownProps}\n            dropdownContentProps={dropdownContentProps}\n            tooltipProps={tooltipProps}\n          >\n            {children}\n          </CascaderDropdownContent>\n        </CascaderDropdownProvider>\n      </TooltipProvider>\n    </ThemeWrapper>\n  );\n};\n"],"names":["_a","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,OAAO,EAAC;AAAA,EACR,KAAQ,GAAA,IAAA;AAAA,EACR,YAAe,GAAA,IAAA;AAAA,EACf,QAAA;AAAA,EACA,gBAAgB,EAAC;AAAA,EACjB,uBAAuB,EAAC;AAAA,EACxB,YAAA;AAAA,EACA,aAAgB,GAAA,+BAAA;AAClB,CAA6B,KAAA;AAvD7B,EAAA,IAAA,EAAA,CAAA;AAwDE,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAAA,CACjC,EAAO,GAAA,OAAA,YAAA,KAAiB,QACrB,GAAA,YAAA,GACA,aAAc,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,EAAG,EAAC,MAFzD,IAE+D,GAAA,EAAA,GAAA;AAAA,MAC9D,KAAO,EAAA,EAAA;AAAA,MACP,KAAO,EAAA,EAAA;AAAA,KACT;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,QAAuC,MAAM;AAjErE,IAAAA,IAAAA,GAAAA,CAAAA;AAkEI,IAAI,IAAA,KAAA,IAAS,OAAO,KAAA,KAAU,QAAU,EAAA;AACtC,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,OAAA,CACEA,GAAA,GAAA,aAAA,CAAc,IAAM,EAAA,EAAE,OAAO,KAAO,EAAA,EAAA,EAAI,CAAA,KAAxC,OAAAA,GAA6C,GAAA,EAAE,KAAO,EAAA,EAAA,EAAI,OAAO,EAAG,EAAA,CAAA;AAAA,KAExE;AAEA,IAAI,IAAA,UAAA,IAAc,OAAO,UAAA,KAAe,QAAU,EAAA;AAChD,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAEA,IAAA,OAAO,EAAE,KAAA,EAAO,EAAI,EAAA,KAAA,EAAO,EAAG,EAAA,CAAA;AAAA,GAC7B,EAAA,CAAC,IAAM,EAAA,UAAA,EAAY,KAAK,CAAC,CAAA,CAAA;AAE5B,EAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,eAAe,CAC9B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,wBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,KAAO,EAAA,aAAA;AAAA,MACP,aAAA;AAAA,MACA,UAAU,CAAC;AAAA,QACT,KAAO,EAAA,iBAAA;AAAA,QACP,aAAA;AAAA,QACA,aAAe,EAAA,qBAAA;AAAA,OAKX,KAAA;AACJ,QAAA,aAAA,CAAc,iBAAiB,CAAA,CAAA;AAC/B,QAAA,IAAI,QAAU,EAAA;AACZ,UAAS,QAAA,CAAA;AAAA,YACP,KAAO,EAAA,iBAAA;AAAA,YACP,aAAA;AAAA,YACA,gBAAA,EAAkB,cAAc,IAAM,EAAA;AAAA,cACpC,OAAO,iBAAkB,CAAA,KAAA;AAAA,cACzB,KAAO,EAAA,EAAA;AAAA,aACR,CAAA;AAAA,YACD,aAAe,EAAA,qBAAA;AAAA,WAChB,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,uBAAA;AAAA,MAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,aADL,CAAA,EAAA;AAAA,QAEC,oBAAA;AAAA,QACA,YAAA;AAAA,OAAA,CAAA;AAAA,MAEC,QAAA;AAAA,KACH;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-constants.js

@@ -0,0 +1,27 @@
+const optionTypes = {
+  VALUE_SELECTOR: "VALUE_SELECTOR",
+  ITEM: "ITEM"
+};
+const dataTypes = {
+  SINGLE_LINE_TEXT: "SINGLE_LINE_TEXT",
+  MULTI_LINE_TEXT: "MULTI_LINE_TEXT",
+  NUMBER: "NUMBER",
+  DATE: "DATE",
+  DATE_RANGE: "DATE_RANGE",
+  SINGLE_SELECT: "SINGLE_SELECT",
+  MULTI_SELECT: "MULTI_SELECT",
+  DATE_TIME_TIMEZONE: "DATE_TIME_TIMEZONE"
+};
+const initialFilterValueSelectorValue = {
+  NUMBER: null,
+  DATE: null,
+  DATE_RANGE: null,
+  DATE_TIME_TIMEZONE: null,
+  SINGLE_LINE_TEXT: null,
+  MULTI_LINE_TEXT: null,
+  SINGLE_SELECT: null,
+  MULTI_SELECT: null
+};
+
+export { dataTypes, initialFilterValueSelectorValue, optionTypes };
+//# sourceMappingURL=cascader-dropdown-constants.js.map

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-dropdown-constants.js","sources":["../../../../src/cascader-dropdown/helpers/cascader-dropdown-constants.ts"],"sourcesContent":["export const optionTypes = {\n  VALUE_SELECTOR: 'VALUE_SELECTOR',\n  ITEM: 'ITEM'\n};\n\nexport const dataTypes = {\n  SINGLE_LINE_TEXT: 'SINGLE_LINE_TEXT',\n  MULTI_LINE_TEXT: 'MULTI_LINE_TEXT',\n  NUMBER: 'NUMBER',\n  DATE: 'DATE',\n  DATE_RANGE: 'DATE_RANGE',\n  SINGLE_SELECT: 'SINGLE_SELECT',\n  MULTI_SELECT: 'MULTI_SELECT',\n  DATE_TIME_TIMEZONE: 'DATE_TIME_TIMEZONE'\n};\n\nexport type CascaderDropdownItemType = {\n  label: string;\n  value: string;\n  subLabel?: string;\n  operators?: CascaderDropdownOperatorType[];\n  options?: CascaderDropdownItemType[];\n  disabled?: boolean;\n  shouldFetchOptions?: boolean;\n  selectionPath: CascaderDropdownDataValueType[];\n};\n\nexport type CascaderDropdownOperatorType = {\n  label: string;\n  value: string;\n  dataType: keyof typeof dataTypes;\n  regex?: string;\n  disabled?: boolean;\n  shouldFetchOptions?: boolean;\n  type: 'VALUE_SELECTOR';\n  choices?: CascaderDropdownDataValueType[];\n};\n\nexport type CascaderDropdownDataValueType = {\n  label: string;\n  value: string;\n};\n\nexport type CascaderDropdownValueSelectorType = {\n  'NUMBER': number | null;\n  'DATE': string | null;\n  'DATE_RANGE': {\n    start: string | null;\n    end: string | null;\n  } | null;\n  'DATE_TIME_TIMEZONE': string | null;\n  'SINGLE_LINE_TEXT': string | null;\n  'MULTI_LINE_TEXT': string | null;\n  'SINGLE_SELECT': string | null;\n  'MULTI_SELECT': string[] | null;\n}\n\nexport const initialFilterValueSelectorValue: CascaderDropdownValueSelectorType = {\n  NUMBER: null,\n  DATE: null,\n  DATE_RANGE: null,\n  DATE_TIME_TIMEZONE: null,\n  SINGLE_LINE_TEXT: null,\n  MULTI_LINE_TEXT: null,\n  SINGLE_SELECT: null,\n  MULTI_SELECT: null\n};\n"],"names":[],"mappings":"AAAO,MAAM,WAAc,GAAA;AAAA,EACzB,cAAgB,EAAA,gBAAA;AAAA,EAChB,IAAM,EAAA,MAAA;AACR,EAAA;AAEO,MAAM,SAAY,GAAA;AAAA,EACvB,gBAAkB,EAAA,kBAAA;AAAA,EAClB,eAAiB,EAAA,iBAAA;AAAA,EACjB,MAAQ,EAAA,QAAA;AAAA,EACR,IAAM,EAAA,MAAA;AAAA,EACN,UAAY,EAAA,YAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,YAAc,EAAA,cAAA;AAAA,EACd,kBAAoB,EAAA,oBAAA;AACtB,EAAA;AA2CO,MAAM,+BAAqE,GAAA;AAAA,EAChF,MAAQ,EAAA,IAAA;AAAA,EACR,IAAM,EAAA,IAAA;AAAA,EACN,UAAY,EAAA,IAAA;AAAA,EACZ,kBAAoB,EAAA,IAAA;AAAA,EACpB,gBAAkB,EAAA,IAAA;AAAA,EAClB,eAAiB,EAAA,IAAA;AAAA,EACjB,aAAe,EAAA,IAAA;AAAA,EACf,YAAc,EAAA,IAAA;AAChB;;;;"}

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-utils.js

@@ -0,0 +1,129 @@
+import { CascaderDropdownRootNode } from '../cascader-dropdown-root-node.js';
+import { optionTypes } from './cascader-dropdown-constants.js';
+
+var __defProp = Object.defineProperty;
+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;
+};
+const recursiveFind = (data, value) => {
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+    if (item.value === value.value) {
+      return item;
+    }
+    if ("options" in item && item.options) {
+      const found = recursiveFind(item.options, value);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+const buildTree = (data) => {
+  const tree = new CascaderDropdownRootNode();
+  const traverse = (options, parentNode, valuePath, labelPath, level) => {
+    for (let i = 0; i < options.length; i++) {
+      const item = options[i];
+      const value = item.value.toString().trim();
+      const label = item.label.toString().trim();
+      const currentValuePath = !valuePath ? value : `${valuePath} ${value}`;
+      const currentLabelPath = !labelPath ? label : `${labelPath} ${label}`;
+      const node = tree.createNode({
+        value,
+        label,
+        options: __spreadValues({
+          disabled: item.disabled,
+          shouldFetchOptions: item.shouldFetchOptions
+        }, "type" in item ? {
+          dataType: item.dataType,
+          choices: item.choices,
+          regex: item.regex
+        } : {}),
+        level: level + 1,
+        labelPath: currentLabelPath,
+        valuePath: currentValuePath,
+        type: "type" in item ? optionTypes.VALUE_SELECTOR : optionTypes.ITEM
+      });
+      if (i === 0) {
+        node.setPrevNode(null);
+      } else {
+        const prevNode = parentNode.getLastChild();
+        if (prevNode)
+          prevNode.setNextNode(node);
+        node.setPrevNode(prevNode);
+      }
+      node.setParent(parentNode);
+      parentNode.appendChild(node);
+      if ("options" in item && item.options) {
+        traverse(item.options, node, currentValuePath, currentLabelPath, level + 1);
+      }
+    }
+  };
+  traverse(data, tree, "", "", 0);
+  return tree;
+};
+const buildSelectionPath = (node) => {
+  const selectionPath = [];
+  const foldersSelectionPath = [];
+  let currentNode = node;
+  while (currentNode && !currentNode.isRoot) {
+    selectionPath.unshift({
+      label: currentNode.label,
+      value: currentNode.value
+    });
+    if (currentNode.children.length > 0 || currentNode.getType() === optionTypes.VALUE_SELECTOR) {
+      foldersSelectionPath.unshift({
+        label: currentNode.label,
+        value: currentNode.value
+      });
+    }
+    currentNode = currentNode.parent;
+  }
+  return { selectionPath, foldersSelectionPath };
+};
+const stringSearchFlattenedNodes = (rootNode, searchValue) => {
+  if (!rootNode)
+    return [];
+  const searchString = searchValue.toLowerCase().trim();
+  if (!searchString)
+    return [];
+  const foundNodes = [];
+  for (const [path, lowercasePath] of rootNode.pathMapping) {
+    if (lowercasePath.includes(searchString)) {
+      const node = rootNode.findNodeByPath(path);
+      if (node)
+        foundNodes.push(node);
+    }
+  }
+  return foundNodes;
+};
+const findNextFocusableRowNode = (node) => {
+  let { nextNode } = node;
+  while (nextNode == null ? void 0 : nextNode.disabled) {
+    nextNode = nextNode.nextNode;
+  }
+  return nextNode;
+};
+const findPrevFocusableRowNode = (node) => {
+  let { prevNode } = node;
+  while (prevNode == null ? void 0 : prevNode.disabled) {
+    prevNode = prevNode.prevNode;
+  }
+  return prevNode;
+};
+
+export { buildSelectionPath, buildTree, findNextFocusableRowNode, findPrevFocusableRowNode, recursiveFind, stringSearchFlattenedNodes };
+//# sourceMappingURL=cascader-dropdown-utils.js.map

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-dropdown-utils.js","sources":["../../../../src/cascader-dropdown/helpers/cascader-dropdown-utils.ts"],"sourcesContent":["import { CascaderDropdownNode } from '../cascader-dropdown-node';\nimport { CascaderDropdownRootNode } from '../cascader-dropdown-root-node';\nimport {\n  CascaderDropdownDataValueType, CascaderDropdownItemType, CascaderDropdownOperatorType, optionTypes\n} from './cascader-dropdown-constants';\n\nexport const recursiveFind = (\n  data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[],\n  value: CascaderDropdownDataValueType\n): CascaderDropdownDataValueType | null => {\n  for (let i = 0; i < data.length; i++) {\n    const item = data[i];\n\n    if (item.value === value.value) {\n      return item;\n    }\n\n    if ('options' in item && item.options) {\n      const found = recursiveFind(item.options, value);\n      if (found) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n\nexport const buildTree = (data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[]): CascaderDropdownRootNode => {\n  const tree = new CascaderDropdownRootNode();\n\n  const traverse = (\n    options: (CascaderDropdownItemType | CascaderDropdownOperatorType)[],\n    parentNode: CascaderDropdownNode,\n    valuePath: string,\n    labelPath: string,\n    level: number\n  ) => {\n    for (let i = 0; i < options.length; i++) {\n      const item = options[i];\n\n      const value = item.value.toString().trim();\n      const label = item.label.toString().trim();\n\n      const currentValuePath = !valuePath ? value : `${valuePath} ${value}`;\n      const currentLabelPath = !labelPath ? label : `${labelPath} ${label}`;\n\n      const node = tree.createNode({\n        value,\n        label,\n        options: {\n          disabled: item.disabled,\n          shouldFetchOptions: item.shouldFetchOptions,\n          ...('type' in item ? {\n            dataType: item.dataType,\n            choices: item.choices,\n            regex: item.regex\n          } : {})\n        },\n        level: level + 1,\n        labelPath: currentLabelPath,\n        valuePath: currentValuePath,\n        type: 'type' in item ? optionTypes.VALUE_SELECTOR : optionTypes.ITEM\n      });\n\n      if (i === 0) {\n        node.setPrevNode(null);\n      } else {\n        const prevNode = parentNode.getLastChild();\n        if (prevNode) prevNode.setNextNode(node);\n        node.setPrevNode(prevNode);\n      }\n\n      node.setParent(parentNode);\n      parentNode.appendChild(node);\n\n      if ('options' in item && item.options) {\n        traverse(item.options, node, currentValuePath, currentLabelPath, level + 1);\n      }\n    }\n  };\n\n  traverse(data, tree, '', '', 0);\n\n  return tree;\n};\n\nexport const buildSelectionPath = (node: CascaderDropdownNode | null): { selectionPath: CascaderDropdownDataValueType[], foldersSelectionPath: CascaderDropdownDataValueType[] } => {\n  const selectionPath: CascaderDropdownDataValueType[] = [];\n  const foldersSelectionPath: CascaderDropdownDataValueType[] = [];\n\n  let currentNode: CascaderDropdownNode | null = node;\n\n  while (currentNode && !currentNode.isRoot) {\n    selectionPath.unshift({\n      label: currentNode.label,\n      value: currentNode.value\n    });\n\n    if (currentNode.children.length > 0 || currentNode.getType() === optionTypes.VALUE_SELECTOR) {\n      foldersSelectionPath.unshift({\n        label: currentNode.label,\n        value: currentNode.value\n      });\n    }\n\n    currentNode = currentNode.parent;\n  }\n\n  return { selectionPath, foldersSelectionPath };\n};\n\nexport const stringSearchFlattenedNodes = (\n  rootNode: CascaderDropdownRootNode | null,\n  searchValue: string\n) => {\n  if (!rootNode) return [];\n  const searchString = searchValue.toLowerCase().trim();\n  if (!searchString) return [];\n\n  const foundNodes: CascaderDropdownNode[] = [];\n  // eslint-disable-next-line no-restricted-syntax\n  for (const [path, lowercasePath] of rootNode.pathMapping) {\n    if (lowercasePath.includes(searchString)) {\n      const node = rootNode.findNodeByPath(path);\n      if (node) foundNodes.push(node);\n    }\n  }\n  return foundNodes;\n};\n\nexport const findNextFocusableRowNode = (node: CascaderDropdownNode): CascaderDropdownNode | null => {\n  let { nextNode } = node;\n  while (nextNode?.disabled) {\n    nextNode = nextNode.nextNode;\n  }\n  return nextNode;\n};\n\nexport const findPrevFocusableRowNode = (node: CascaderDropdownNode): CascaderDropdownNode | null => {\n  let { prevNode } = node;\n  while (prevNode?.disabled) {\n    prevNode = prevNode.prevNode;\n  }\n  return prevNode;\n};\n"],"names":[],"mappings":"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"}

package/dist/es/cascader-dropdown/popover/popover.js

@@ -0,0 +1,52 @@
+import * as index from '../../node_modules/@radix-ui/react-popover/dist/index.js';
+import { Content as Content2, Arrow as Arrow2, Close, Root as Root2 } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
+import { keyframes, styled } from '../../packages/frontend-templates/slitches.config.js';
+
+const slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+const slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+const slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+const slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+const PopoverContent = styled(Content2, {
+  padding: "$4",
+  width: 260,
+  zIndex: 100,
+  borderRadius: "$md",
+  backgroundColor: "$white900",
+  animationDuration: "400ms",
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="open"]': {
+    '&[data-side="top"]': { animationName: slideDownAndFade },
+    '&[data-side="right"]': { animationName: slideLeftAndFade },
+    '&[data-side="bottom"]': { animationName: slideUpAndFade },
+    '&[data-side="left"]': { animationName: slideRightAndFade }
+  }
+});
+styled(Arrow2, {
+  fill: "white"
+});
+styled(Close, {
+  all: "unset",
+  fontFamily: "inherit",
+  position: "absolute",
+  top: 5,
+  right: 5
+});
+const { PopoverTrigger } = index;
+const Popover = Root2;
+
+export { Popover, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.js.map

package/dist/es/cascader-dropdown/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../../src/cascader-dropdown/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { keyframes, styled } from '../../../slitches.config';\n\nconst slideUpAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateY(2px)' },\n  '100%': { opacity: 1, transform: 'translateY(0)' }\n});\n\nconst slideRightAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateX(-2px)' },\n  '100%': { opacity: 1, transform: 'translateX(0)' }\n});\n\nconst slideDownAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateY(-2px)' },\n  '100%': { opacity: 1, transform: 'translateY(0)' }\n});\n\nconst slideLeftAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateX(2px)' },\n  '100%': { opacity: 1, transform: 'translateX(0)' }\n});\n\nexport const PopoverContent = styled(PopoverPrimitive.Content, {\n  padding: '$4',\n  width: 260,\n  zIndex: 100,\n  borderRadius: '$md',\n  backgroundColor: '$white900',\n  animationDuration: '400ms',\n  boxShadow:\n    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',\n  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n  willChange: 'transform, opacity',\n  '&[data-state=\"open\"]': {\n    '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n    '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n    '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n    '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n  }\n});\n\nexport const PopoverArrow = styled(PopoverPrimitive.Arrow, {\n  fill: 'white'\n});\n\nexport const PopoverClose = styled(PopoverPrimitive.Close, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  position: 'absolute',\n  top: 5,\n  right: 5\n});\n\nexport const { PopoverTrigger } = PopoverPrimitive;\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverPortal = PopoverPrimitive.Portal;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n"],"names":["PopoverPrimitive.Content","PopoverPrimitive.Arrow","PopoverPrimitive.Close","PopoverPrimitive","PopoverPrimitive.Root"],"mappings":";;;;AAGA,MAAM,iBAAiB,SAAU,CAAA;AAAA,EAC/B,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,iBAAkB,EAAA;AAAA,EACjD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,oBAAoB,SAAU,CAAA;AAAA,EAClC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,kBAAmB,EAAA;AAAA,EAClD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmB,SAAU,CAAA;AAAA,EACjC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,kBAAmB,EAAA;AAAA,EAClD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmB,SAAU,CAAA;AAAA,EACjC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,iBAAkB,EAAA;AAAA,EACjD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAEY,MAAA,cAAA,GAAiB,MAAO,CAAAA,QAA0B,EAAA;AAAA,EAC7D,OAAS,EAAA,IAAA;AAAA,EACT,KAAO,EAAA,GAAA;AAAA,EACP,MAAQ,EAAA,GAAA;AAAA,EACR,YAAc,EAAA,KAAA;AAAA,EACd,eAAiB,EAAA,WAAA;AAAA,EACjB,iBAAmB,EAAA,OAAA;AAAA,EACnB,SACE,EAAA,sFAAA;AAAA,EACF,uBAAyB,EAAA,+BAAA;AAAA,EACzB,UAAY,EAAA,oBAAA;AAAA,EACZ,sBAAwB,EAAA;AAAA,IACtB,oBAAA,EAAsB,EAAE,aAAA,EAAe,gBAAiB,EAAA;AAAA,IACxD,sBAAA,EAAwB,EAAE,aAAA,EAAe,gBAAiB,EAAA;AAAA,IAC1D,uBAAA,EAAyB,EAAE,aAAA,EAAe,cAAe,EAAA;AAAA,IACzD,qBAAA,EAAuB,EAAE,aAAA,EAAe,iBAAkB,EAAA;AAAA,GAC5D;AACF,CAAC,EAAA;AAE2B,MAAO,CAAAC,MAAwB,EAAA;AAAA,EACzD,IAAM,EAAA,OAAA;AACR,CAAC,EAAA;AAE2B,MAAO,CAAAC,KAAwB,EAAA;AAAA,EACzD,GAAK,EAAA,OAAA;AAAA,EACL,UAAY,EAAA,SAAA;AAAA,EACZ,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,CAAA;AAAA,EACL,KAAO,EAAA,CAAA;AACT,CAAC,EAAA;AAEY,MAAA,EAAE,gBAAmB,GAAAC,MAAA;AAC3B,MAAM,UAAUC;;;;"}

package/dist/es/cascader-dropdown/styled/StyledItem.js

@@ -0,0 +1,39 @@
+import { config } from '../../packages/frontend-templates/slitches.config.js';
+import { styled } from '../../node_modules/@sparrowengg/twigs-react/dist/es/stitches.config.js';
+
+const prefixClassName = (className) => {
+  return `${config.prefix}-${className}`;
+};
+const StyledItem = styled("li", {
+  width: "100%",
+  padding: "$3 $6",
+  display: "flex",
+  alignItems: "center",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  cursor: "pointer",
+  [`.${prefixClassName("cascader-dropdown__item-icon")}`]: {
+    opacity: "0"
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColorOpacity: ["$primary500", 0.15]
+      }
+    },
+    hovered: {
+      true: {
+        backgroundColorOpacity: ["$secondary500", 0.06],
+        '&[data-is-selected="true"]': {
+          backgroundColorOpacity: ["$primary500", 0.15]
+        },
+        [`.${prefixClassName("cascader-dropdown__item-icon")}`]: {
+          opacity: "1"
+        }
+      }
+    }
+  }
+});
+
+export { StyledItem, prefixClassName };
+//# sourceMappingURL=StyledItem.js.map

package/dist/es/cascader-dropdown/styled/StyledItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledItem.js","sources":["../../../../src/cascader-dropdown/styled/StyledItem.tsx"],"sourcesContent":["import { styled } from '@sparrowengg/twigs-react';\nimport { config } from '../../../slitches.config';\n\nexport const prefixClassName = (className: string) => {\n  return `${config.prefix}-${className}`;\n};\n\nexport const StyledItem = styled('li', {\n  width: '100%',\n  padding: '$3 $6',\n  display: 'flex',\n  alignItems: 'center',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  cursor: 'pointer',\n  [`.${prefixClassName('cascader-dropdown__item-icon')}`]: {\n    opacity: '0'\n  },\n  variants: {\n    selected: {\n      true: {\n        backgroundColorOpacity: ['$primary500', 0.15]\n      }\n    },\n    hovered: {\n      true: {\n        backgroundColorOpacity: ['$secondary500', 0.06],\n        '&[data-is-selected=\"true\"]': {\n          backgroundColorOpacity: ['$primary500', 0.15]\n        },\n        [`.${prefixClassName('cascader-dropdown__item-icon')}`]: {\n          opacity: '1'\n        }\n      }\n    }\n  }\n});\n"],"names":[],"mappings":";;;AAGa,MAAA,eAAA,GAAkB,CAAC,SAAsB,KAAA;AACpD,EAAA,OAAO,CAAG,EAAA,MAAA,CAAO,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAA;AACtC,EAAA;AAEa,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,OAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,UAAY,EAAA,QAAA;AAAA,EACZ,MAAQ,EAAA,SAAA;AAAA,EACR,CAAC,CAAI,CAAA,EAAA,eAAA,CAAgB,8BAA8B,CAAC,EAAE,GAAG;AAAA,IACvD,OAAS,EAAA,GAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,sBAAA,EAAwB,CAAC,aAAA,EAAe,IAAI,CAAA;AAAA,OAC9C;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,sBAAA,EAAwB,CAAC,eAAA,EAAiB,IAAI,CAAA;AAAA,QAC9C,4BAA8B,EAAA;AAAA,UAC5B,sBAAA,EAAwB,CAAC,aAAA,EAAe,IAAI,CAAA;AAAA,SAC9C;AAAA,QACA,CAAC,CAAI,CAAA,EAAA,eAAA,CAAgB,8BAA8B,CAAC,EAAE,GAAG;AAAA,UACvD,OAAS,EAAA,GAAA;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC;;;;"}

package/dist/es/cascader-dropdown/use-value.js

@@ -0,0 +1,42 @@
+import { createContext, useContext } from 'react';
+import { CascaderDropdownRootNode } from './cascader-dropdown-root-node.js';
+
+const CascaderDropdownContext = createContext({
+  data: [],
+  value: { value: "", label: "" },
+  popoverOpen: false,
+  setPopoverOpen: () => {
+  },
+  id: "",
+  rootNode: new CascaderDropdownRootNode(),
+  selectedNode: null,
+  setSelectedNode: () => {
+  },
+  selectionPath: [],
+  foldersSelectionPath: [],
+  focusPreviousColumn: () => {
+  },
+  setFocusedNode: () => {
+  },
+  focusedNode: null,
+  inputRef: null,
+  focusNthColumn: () => {
+  },
+  focusNextRow: () => {
+  },
+  focusPreviousRow: () => {
+  },
+  focusNextColumn: () => {
+  },
+  handleChange: () => {
+  },
+  selectFocusedNode: () => {
+  },
+  selectorValue: void 0
+});
+const useCascaderDropdownContext = () => {
+  return useContext(CascaderDropdownContext);
+};
+
+export { CascaderDropdownContext, useCascaderDropdownContext };
+//# sourceMappingURL=use-value.js.map

package/dist/es/cascader-dropdown/use-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-value.js","sources":["../../../src/cascader-dropdown/use-value.ts"],"sourcesContent":["import { createContext, useContext, RefObject } from 'react';\nimport {\n  CascaderDropdownItemType, CascaderDropdownOperatorType, CascaderDropdownValueSelectorType, CascaderDropdownDataValueType\n} from './helpers/cascader-dropdown-constants';\nimport { CascaderDropdownRootNode } from './cascader-dropdown-root-node';\nimport { CascaderDropdownNode } from './cascader-dropdown-node';\n\nexport type CascaderDropdownContextType = {\n  data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[];\n  value: CascaderDropdownDataValueType;\n  popoverOpen: boolean;\n  setPopoverOpen: (open: boolean) => void;\n  id: string;\n  rootNode: CascaderDropdownRootNode;\n  selectedNode: CascaderDropdownNode | null;\n  setSelectedNode: (node: CascaderDropdownNode | null) => void;\n  selectionPath: CascaderDropdownDataValueType[];\n  foldersSelectionPath: CascaderDropdownDataValueType[];\n  focusPreviousColumn: () => void;\n  focusNthColumn: (index: number) => void;\n  focusedNode: CascaderDropdownNode | null;\n  setFocusedNode: (node: CascaderDropdownNode | null) => void;\n  inputRef: RefObject<HTMLInputElement> | null;\n  focusNextRow: () => void;\n  focusPreviousRow: () => void;\n  focusNextColumn: () => void;\n  handleChange: (node: CascaderDropdownNode | CascaderDropdownOperatorType, value?: CascaderDropdownValueSelectorType) => void;\n  selectFocusedNode: () => void;\n  selectorValue?: CascaderDropdownValueSelectorType;\n};\n\nexport const CascaderDropdownContext = createContext<CascaderDropdownContextType>({\n  data: [],\n  value: { value: '', label: '' },\n  popoverOpen: false,\n  setPopoverOpen: () => {},\n  id: '',\n  rootNode: new CascaderDropdownRootNode(),\n  selectedNode: null,\n  setSelectedNode: () => {},\n  selectionPath: [],\n  foldersSelectionPath: [],\n  focusPreviousColumn: () => {},\n  setFocusedNode: () => {},\n  focusedNode: null,\n  inputRef: null,\n  focusNthColumn: () => {},\n  focusNextRow: () => {},\n  focusPreviousRow: () => {},\n  focusNextColumn: () => {},\n  handleChange: () => {},\n  selectFocusedNode: () => {},\n  selectorValue: undefined\n});\n\nexport const useCascaderDropdownContext = () => {\n  return useContext(CascaderDropdownContext);\n};\n"],"names":[],"mappings":";;;AA+BO,MAAM,0BAA0B,aAA2C,CAAA;AAAA,EAChF,MAAM,EAAC;AAAA,EACP,KAAO,EAAA,EAAE,KAAO,EAAA,EAAA,EAAI,OAAO,EAAG,EAAA;AAAA,EAC9B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM;AAAA,GAAC;AAAA,EACvB,EAAI,EAAA,EAAA;AAAA,EACJ,QAAA,EAAU,IAAI,wBAAyB,EAAA;AAAA,EACvC,YAAc,EAAA,IAAA;AAAA,EACd,iBAAiB,MAAM;AAAA,GAAC;AAAA,EACxB,eAAe,EAAC;AAAA,EAChB,sBAAsB,EAAC;AAAA,EACvB,qBAAqB,MAAM;AAAA,GAAC;AAAA,EAC5B,gBAAgB,MAAM;AAAA,GAAC;AAAA,EACvB,WAAa,EAAA,IAAA;AAAA,EACb,QAAU,EAAA,IAAA;AAAA,EACV,gBAAgB,MAAM;AAAA,GAAC;AAAA,EACvB,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,kBAAkB,MAAM;AAAA,GAAC;AAAA,EACzB,iBAAiB,MAAM;AAAA,GAAC;AAAA,EACxB,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,mBAAmB,MAAM;AAAA,GAAC;AAAA,EAC1B,aAAe,EAAA,KAAA,CAAA;AACjB,CAAC,EAAA;AAEM,MAAM,6BAA6B,MAAM;AAC9C,EAAA,OAAO,WAAW,uBAAuB,CAAA,CAAA;AAC3C;;;;"}

package/dist/es/commons/components/NamingModal.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import React__default, { useCallback } from 'react';
+import { SIZE_VALUES, COLORS, VARIANTS, ARIA_LABELS, COMPONENT_DISPLAY_NAMES, MODAL_TITLES, PLACEHOLDERS, NUMERIC_CONSTANTS, BUTTON_TEXT } from '../constants/strings.js';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose } from '../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js';
 import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
 import { FormInput } from '../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js';
@@ -7,39 +8,66 @@ import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box
 import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
 import { CloseIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js';
 
-function NamingModal({
+const DEFAULT_CONFIG = {
+  title: MODAL_TITLES.MAPPING_NAME,
+  placeholder: PLACEHOLDERS.ENTER_NAME_FOR_FUTURE_REFERENCE,
+  maxLength: NUMERIC_CONSTANTS.MAX_LENGTH_DEFAULT,
+  saveButtonText: BUTTON_TEXT.SAVE_MAPPING,
+  updateButtonText: BUTTON_TEXT.UPDATE_MAPPING
+};
+const NamingModal = ({
   editFieldId,
-  mappingLoader,
-  saveHandler,
-  closeHandler,
+  isLoading = false,
+  onSave,
+  onClose,
   value,
-  setValue,
-  isOpen
-}) {
-  return /* @__PURE__ */ React__default.createElement(Dialog, { open: isOpen, size: "sm" }, /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(
+  onValueChange,
+  isOpen,
+  maxLength = DEFAULT_CONFIG.maxLength,
+  placeholder = DEFAULT_CONFIG.placeholder
+}) => {
+  const handleInputChange = useCallback(
+    (event) => {
+      onValueChange(event.target.value);
+    },
+    [onValueChange]
+  );
+  const buttonText = editFieldId ? DEFAULT_CONFIG.updateButtonText : DEFAULT_CONFIG.saveButtonText;
+  const isSaveDisabled = !value.trim() || isLoading;
+  return /* @__PURE__ */ React__default.createElement(Dialog, { open: isOpen, size: SIZE_VALUES.SMALL }, /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(
     DialogHeader,
     {
       css: {
         display: "flex",
         flexDirection: "column",
         alignItems: "flex-start",
-        justifyContent: "center"
+        justifyContent: "center",
+        borderBottom: "none !important"
       }
     },
-    /* @__PURE__ */ React__default.createElement(DialogTitle, { size: "lg" }, "Mapping Name")
-  ), /* @__PURE__ */ React__default.createElement(DialogBody, null, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$2", css: { marginBottom: "$2" } }, /* @__PURE__ */ React__default.createElement(
-    FormInput,
+    /* @__PURE__ */ React__default.createElement(DialogTitle, { size: SIZE_VALUES.LARGE }, DEFAULT_CONFIG.title)
+  ), /* @__PURE__ */ React__default.createElement(
+    DialogBody,
     {
-      size: "lg",
-      id: "name",
-      label: "Name",
-      showCount: true,
-      value,
-      onChange: (e) => setValue(e.target.value),
-      maxLength: 50,
-      placeholder: "Sync to "
-    }
-  ))), /* @__PURE__ */ React__default.createElement(DialogFooter, null, /* @__PURE__ */ React__default.createElement(
+      css: {
+        paddingInline: "$12",
+        paddingTop: "0 !important",
+        paddingBottom: "$8"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$2", css: { marginBottom: "$2" } }, /* @__PURE__ */ React__default.createElement(
+      FormInput,
+      {
+        size: SIZE_VALUES.LARGE,
+        id: "mappingName",
+        value,
+        onChange: handleInputChange,
+        maxLength,
+        placeholder,
+        autoFocus: true
+      }
+    ))
+  ), /* @__PURE__ */ React__default.createElement(DialogFooter, null, /* @__PURE__ */ React__default.createElement(
     Flex,
     {
       css: {
@@ -49,27 +77,30 @@ function NamingModal({
     /* @__PURE__ */ React__default.createElement(
       Button,
       {
-        loading: mappingLoader,
-        size: "lg",
-        color: "primary",
+        loading: isLoading,
+        size: SIZE_VALUES.LARGE,
+        color: COLORS.PRIMARY,
         css: {
           width: "100%"
         },
-        onClick: saveHandler
+        onClick: onSave,
+        disabled: isSaveDisabled
       },
-      editFieldId ? "Update Mapping" : "Save Mapping"
+      buttonText
     )
-  )), /* @__PURE__ */ React__default.createElement(Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React__default.createElement(DialogClose, { asChild: true, onClick: closeHandler }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React__default.createElement(DialogClose, { asChild: true, onClick: onClose }, /* @__PURE__ */ React__default.createElement(
     IconButton,
     {
-      size: "lg",
+      size: SIZE_VALUES.LARGE,
       icon: /* @__PURE__ */ React__default.createElement(CloseIcon, null),
-      variant: "ghost",
-      "aria-label": "Close",
-      color: "default"
+      variant: VARIANTS.GHOST,
+      "aria-label": ARIA_LABELS.CLOSE_MODAL,
+      color: COLORS.DEFAULT,
+      disabled: isLoading
     }
   )))));
-}
+};
+NamingModal.displayName = COMPONENT_DISPLAY_NAMES.NAMING_MODAL;
 
 export { NamingModal as default };
 //# sourceMappingURL=NamingModal.js.map

package/dist/es/commons/components/NamingModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  FormInput,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\n\nexport default function NamingModal({\n  editFieldId,\n  mappingLoader,\n  saveHandler,\n  closeHandler,\n  value,\n  setValue,\n  isOpen,\n}: {\n  editFieldId: string | number | undefined;\n  mappingLoader: boolean;\n  saveHandler: () => void;\n  closeHandler: () => void;\n  value: string;\n  setValue: (value: string) => void;\n  isOpen: boolean;\n}) {\n  return (\n    <Dialog open={isOpen} size=\"sm\">\n      <DialogContent>\n        <DialogHeader\n          css={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"flex-start\",\n            justifyContent: \"center\",\n          }}\n        >\n          <DialogTitle size=\"lg\">Mapping Name</DialogTitle>\n        </DialogHeader>\n        <DialogBody>\n          <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: \"$2\" }}>\n            <FormInput\n              size=\"lg\"\n              id=\"name\"\n              label=\"Name\"\n              showCount\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n              maxLength={50}\n              placeholder=\"Sync to \"\n            />\n          </Flex>\n        </DialogBody>\n        <DialogFooter>\n          <Flex\n            css={{\n              width: \"100%\",\n            }}\n          >\n            <Button\n              loading={mappingLoader}\n              size=\"lg\"\n              color=\"primary\"\n              css={{\n                width: \"100%\",\n              }}\n              onClick={saveHandler}\n            >\n              {editFieldId ? \"Update Mapping\" : \"Save Mapping\"}\n            </Button>\n          </Flex>\n        </DialogFooter>\n        <Box css={{ position: \"absolute\", top: \"$8\", right: \"$8\" }}>\n          <DialogClose asChild onClick={closeHandler}>\n            <IconButton\n              size=\"lg\"\n              icon={<CloseIcon />}\n              variant=\"ghost\"\n              aria-label=\"Close\"\n              color=\"default\"\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAkBA,SAAwB,WAAY,CAAA;AAAA,EAClC,WAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AACF,CAQG,EAAA;AACD,EAAA,oDACG,MAAO,EAAA,EAAA,IAAA,EAAM,QAAQ,IAAK,EAAA,IAAA,EAAA,+CACxB,aACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,KAAA;AAAA,oBAECA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,IAAK,EAAA,IAAA,EAAA,EAAK,cAAY,CAAA;AAAA,GAErC,kBAAAA,cAAA,CAAA,aAAA,CAAC,UACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,aAAA,EAAc,QAAS,EAAA,GAAA,EAAI,IAAK,EAAA,GAAA,EAAK,EAAE,YAAA,EAAc,MACzD,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,EAAG,EAAA,MAAA;AAAA,MACH,KAAM,EAAA,MAAA;AAAA,MACN,SAAS,EAAA,IAAA;AAAA,MACT,KAAA;AAAA,MACA,UAAU,CAAC,CAAA,KAAM,QAAS,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,MACxC,SAAW,EAAA,EAAA;AAAA,MACX,WAAY,EAAA,UAAA;AAAA,KAAA;AAAA,GAEhB,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,YACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,aAAA;AAAA,QACT,IAAK,EAAA,IAAA;AAAA,QACL,KAAM,EAAA,SAAA;AAAA,QACN,GAAK,EAAA;AAAA,UACH,KAAO,EAAA,MAAA;AAAA,SACT;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,OAAA;AAAA,MAER,cAAc,gBAAmB,GAAA,cAAA;AAAA,KACpC;AAAA,GAEJ,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAI,GAAK,EAAA,EAAE,UAAU,UAAY,EAAA,GAAA,EAAK,IAAM,EAAA,KAAA,EAAO,MAClD,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,eAAY,OAAO,EAAA,IAAA,EAAC,SAAS,YAC5B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,IAAA,+CAAO,SAAU,EAAA,IAAA,CAAA;AAAA,MACjB,OAAQ,EAAA,OAAA;AAAA,MACR,YAAW,EAAA,OAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,KAAA;AAAA,GAEV,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent } from 'react';\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  FormInput,\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon } from '@sparrowengg/twigs-react-icons';\nimport {\n  MODAL_TITLES,\n  PLACEHOLDERS,\n  BUTTON_TEXT,\n  NUMERIC_CONSTANTS,\n  SIZE_VALUES,\n  COLORS,\n  VARIANTS,\n  ARIA_LABELS,\n  COMPONENT_DISPLAY_NAMES,\n} from '../constants/strings';\n\n/**\n * Props for the NamingModal component\n */\nexport interface NamingModalProps {\n  /** ID of the mapping being edited (undefined for new mappings) */\n  editFieldId?: string | number;\n  /** Whether the save operation is in progress */\n  isLoading?: boolean;\n  /** Callback invoked when save button is clicked */\n  onSave: () => void;\n  /** Callback invoked when modal is closed */\n  onClose: () => void;\n  /** Current value of the mapping name input */\n  value: string;\n  /** Callback to update the mapping name value */\n  onValueChange: (value: string) => void;\n  /** Whether the modal is open */\n  isOpen: boolean;\n  /** Optional: Maximum character length for input (defaults to 50) */\n  maxLength?: number;\n  /** Optional: Custom placeholder text */\n  placeholder?: string;\n}\n\n/**\n * Default configuration for the naming modal\n */\nconst DEFAULT_CONFIG = {\n  title: MODAL_TITLES.MAPPING_NAME,\n  placeholder: PLACEHOLDERS.ENTER_NAME_FOR_FUTURE_REFERENCE,\n  maxLength: NUMERIC_CONSTANTS.MAX_LENGTH_DEFAULT,\n  saveButtonText: BUTTON_TEXT.SAVE_MAPPING,\n  updateButtonText: BUTTON_TEXT.UPDATE_MAPPING,\n} as const;\n\n/**\n * NamingModal Component\n * \n * A modal dialog for naming or renaming mapping configurations.\n * Supports both create and edit modes with validation and loading states.\n * \n * @example\n * ```tsx\n * <NamingModal\n *   isOpen={isModalOpen}\n *   value={mappingName}\n *   onValueChange={setMappingName}\n *   onSave={handleSave}\n *   onClose={handleClose}\n *   editFieldId={existingMappingId}\n * />\n * ```\n */\nconst NamingModal: React.FC<NamingModalProps> = ({\n  editFieldId,\n  isLoading = false,\n  onSave,\n  onClose,\n  value,\n  onValueChange,\n  isOpen,\n  maxLength = DEFAULT_CONFIG.maxLength,\n  placeholder = DEFAULT_CONFIG.placeholder,\n}) => {\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      onValueChange(event.target.value);\n    },\n    [onValueChange]\n  );\n\n  const buttonText = editFieldId\n    ? DEFAULT_CONFIG.updateButtonText\n    : DEFAULT_CONFIG.saveButtonText;\n\n  const isSaveDisabled = !value.trim() || isLoading;\n\n  return (\n    <Dialog open={isOpen} size={SIZE_VALUES.SMALL}>\n      <DialogContent>\n        <DialogHeader\n          css={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            justifyContent: 'center',\n            borderBottom: 'none !important',\n          }}\n        >\n          <DialogTitle size={SIZE_VALUES.LARGE}>{DEFAULT_CONFIG.title}</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody\n          css={{\n            paddingInline: '$12',\n            paddingTop: '0 !important',\n            paddingBottom: '$8',\n          }}\n        >\n          <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: '$2' }}>\n            <FormInput\n              size={SIZE_VALUES.LARGE}\n              id=\"mappingName\"\n              value={value}\n              onChange={handleInputChange}\n              maxLength={maxLength}\n              placeholder={placeholder}\n              autoFocus\n            />\n          </Flex>\n        </DialogBody>\n\n        <DialogFooter>\n          <Flex\n            css={{\n              width: '100%',\n            }}\n          >\n            <Button\n              loading={isLoading}\n              size={SIZE_VALUES.LARGE}\n              color={COLORS.PRIMARY}\n              css={{\n                width: '100%',\n              }}\n              onClick={onSave}\n              disabled={isSaveDisabled}\n            >\n              {buttonText}\n            </Button>\n          </Flex>\n        </DialogFooter>\n\n        <Box css={{ position: 'absolute', top: '$8', right: '$8' }}>\n          <DialogClose asChild onClick={onClose}>\n            <IconButton\n              size={SIZE_VALUES.LARGE}\n              icon={<CloseIcon />}\n              variant={VARIANTS.GHOST}\n              aria-label={ARIA_LABELS.CLOSE_MODAL}\n              color={COLORS.DEFAULT}\n              disabled={isLoading}\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nNamingModal.displayName = COMPONENT_DISPLAY_NAMES.NAMING_MODAL;\n\nexport default NamingModal;\n"],"names":["React"],"mappings":"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"}

package/dist/es/commons/components/confirmation-modal.js

@@ -1,22 +1,33 @@
-import React__default, { useState } from 'react';
+import React__default, { useState, useCallback } from 'react';
+import { CSS_CLASS_NAMES, BORDER_RADIUS, COLORS, VARIANTS, SIZE_VALUES, BUTTON_TEXT, COMPONENT_DISPLAY_NAMES } from '../constants/strings.js';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogActions, AlertDialogCancel, AlertDialogAction } from '../../node_modules/@sparrowengg/twigs-react/dist/es/alert-dialog/alert-dialog.js';
 import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
 
 const ConfirmationModal = ({
-  name,
+  title,
   description,
   onConfirm,
-  onCancel
+  onCancel,
+  confirmText = BUTTON_TEXT.CONFIRM,
+  cancelText = BUTTON_TEXT.CANCEL,
+  showErrorState = false
 }) => {
-  const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);
+  const [isConfirmHover, setIsConfirmHover] = useState(false);
+  const handleMouseEnter = useCallback(() => {
+    setIsConfirmHover(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsConfirmHover(false);
+  }, []);
+  const confirmButtonColor = showErrorState && isConfirmHover ? COLORS.ERROR : COLORS.DEFAULT;
   return /* @__PURE__ */ React__default.createElement(AlertDialog, { open: true }, /* @__PURE__ */ React__default.createElement(
     AlertDialogContent,
     {
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: "dm-sans",
+      className: CSS_CLASS_NAMES.DM_SANS,
       css: {
         button: {
-          borderRadius: "8px"
+          borderRadius: BORDER_RADIUS.EIGHT_PX
         }
       }
     },
@@ -30,7 +41,7 @@ const ConfirmationModal = ({
           padding: "24px $12 8px $12 !important"
         }
       },
-      name
+      title
     ),
     /* @__PURE__ */ React__default.createElement(
       AlertDialogDescription,
@@ -48,19 +59,20 @@ const ConfirmationModal = ({
       },
       description
     ),
-    /* @__PURE__ */ React__default.createElement(AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React__default.createElement(AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React__default.createElement(Button, { color: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React__default.createElement(AlertDialogAction, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React__default.createElement(AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React__default.createElement(Button, { color: COLORS.DEFAULT, variant: VARIANTS.SOLID, size: SIZE_VALUES.LARGE }, cancelText)), /* @__PURE__ */ React__default.createElement(AlertDialogAction, { asChild: true }, /* @__PURE__ */ React__default.createElement(
       Button,
       {
-        onMouseEnter: () => setIsDeleteIconHover(true),
-        onMouseLeave: () => setIsDeleteIconHover(false),
-        color: isDeleteIconHover ? "error" : "default",
-        size: "lg",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        color: confirmButtonColor,
+        size: SIZE_VALUES.LARGE,
         onClick: onConfirm
       },
-      "Confirm"
+      confirmText
     )))
   ));
 };
+ConfirmationModal.displayName = COMPONENT_DISPLAY_NAMES.CONFIRMATION_MODAL;
 
 export { ConfirmationModal as default };
 //# sourceMappingURL=confirmation-modal.js.map