@lax-wp/design-system 0.13.41 → 0.13.43

package/dist/components/data-display/infinite-table/head/cell/Options.es.js

@@ -1,70 +1,76 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { useOutsideClick as w } from "../../../../../hooks/useOutsideClick.es.js";
-import { useTableConfig as L } from "../../../../../providers/design-system-provider/hooks.es.js";
-import { ArrowDownwardRounded as O, ArrowUpwardRounded as T, FilterListRounded as j, AddRounded as E, EditRounded as Z, DeleteOutlineRounded as q } from "@mui/icons-material";
-import D from "../../../../../_virtual/index.es.js";
-import { motion as F } from "framer-motion";
-import { useRef as U, useEffect as g } from "react";
-const o = ({ id: i, label: r, onClick: t, icon: l }) => /* @__PURE__ */ b(
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import { useOutsideClick as O } from "../../../../../hooks/useOutsideClick.es.js";
+import { useTableConfig as D } from "../../../../../providers/design-system-provider/hooks.es.js";
+import { ArrowDownwardRounded as T, ArrowUpwardRounded as j, FilterListRounded as E, AddRounded as Z, EditRounded as q, DeleteOutlineRounded as F } from "@mui/icons-material";
+import w from "../../../../../_virtual/index.es.js";
+import { motion as U } from "framer-motion";
+import { useRef as g, useEffect as A } from "react";
+const o = ({ id: r, label: s, onClick: t, icon: l, isDisabled: i = !1 }) => /* @__PURE__ */ k(
   "button",
   {
-    id: i,
+    id: r,
     type: "button",
-    className: "flex w-full px-4 py-2 text-neutral-900 dark:text-white font-inter text-sm font-medium rounded-[4px] hover:bg-neutral-100 dark:hover:bg-neutral-900 items-center gap-3",
+    disabled: i,
+    className: w(
+      "flex w-full px-4 py-2 text-neutral-900 dark:text-white font-inter text-sm font-medium rounded-[4px] items-center gap-3",
+      i ? "opacity-60 cursor-not-allowed" : "hover:bg-neutral-100 dark:hover:bg-neutral-900"
+    ),
     onClick: t,
     children: [
       l,
-      r
+      s
     ]
   }
-), W = ({
-  headerIndex: i,
-  headerGroup: r,
+), X = ({
+  headerIndex: r,
+  headerGroup: s,
   column: t,
   onSort: l,
-  onFilter: f,
-  toggleHeaderOption: s,
-  setIsShowSortArrowAsc: u,
-  setIsShowSortArrowDesc: c,
-  setShowHeaderOptions: k,
-  toggleDataFilterModal: x,
-  isColumnConfigurable: d,
-  onAddColumnClick: y,
-  onEditColumnClick: N,
-  onDeleteColumnClick: R
+  onFilter: i,
+  toggleHeaderOption: d,
+  setIsShowSortArrowAsc: m,
+  setIsShowSortArrowDesc: p,
+  setShowHeaderOptions: x,
+  toggleDataFilterModal: y,
+  isColumnConfigurable: u,
+  onAddColumnClick: N,
+  onEditColumnClick: R,
+  onDeleteColumnClick: z,
+  disabled: c = !1
 }) => {
-  const m = L(), a = () => k(null), p = U(null);
-  w({
-    ref: p,
+  const b = D(), a = () => x(null), f = g(null);
+  O({
+    ref: f,
     handler: a
   });
-  const n = m?.t ?? ((h) => h), z = t?.dataType === "date", C = t?.dataType === "boolean", v = n(z ? "Least Recent" : "Sort By A-Z"), B = n(z ? "Most Recent" : "Sort By Z-A");
-  return g(() => {
-    p.current?.querySelector("button:not([disabled])")?.focus();
-  }, []), m?.renderColumnOptions ? m.renderColumnOptions({
-    headerIndex: i,
-    headerGroup: r,
+  const n = b?.t ?? ((v) => v), C = t?.dataType === "date", h = t?.dataType === "boolean", B = n(C ? "Least Recent" : "Sort By A-Z"), L = n(C ? "Most Recent" : "Sort By Z-A");
+  return A(() => {
+    f.current?.querySelector("button:not([disabled])")?.focus();
+  }, []), b?.renderColumnOptions ? b.renderColumnOptions({
+    headerIndex: r,
+    headerGroup: s,
     column: t,
     onSort: l,
-    onFilter: f,
-    toggleHeaderOption: s,
-    setIsShowSortArrowAsc: u,
-    setIsShowSortArrowDesc: c,
-    setShowHeaderOptions: k,
-    toggleDataFilterModal: x,
-    isColumnConfigurable: d,
-    onAddColumnClick: y,
-    onEditColumnClick: N,
-    onDeleteColumnClick: R,
-    onClose: a
-  }) : /* @__PURE__ */ b("div", { ref: p, children: [
+    onFilter: i,
+    toggleHeaderOption: d,
+    setIsShowSortArrowAsc: m,
+    setIsShowSortArrowDesc: p,
+    setShowHeaderOptions: x,
+    toggleDataFilterModal: y,
+    isColumnConfigurable: u,
+    onAddColumnClick: N,
+    onEditColumnClick: R,
+    onDeleteColumnClick: z,
+    onClose: a,
+    disabled: c
+  }) : /* @__PURE__ */ k("div", { ref: f, children: [
     /* @__PURE__ */ e("div", { className: "absolute inset-0", onClick: a }),
-    /* @__PURE__ */ b(
-      F.div,
+    /* @__PURE__ */ k(
+      U.div,
       {
-        className: D(
+        className: w(
           "absolute top-full bg-white dark:bg-black-700 rounded-lg shadow-lg cursor-pointer w-[220px] py-1 px-1 z-50 border border-neutral-200 dark:border-black-600",
-          i + 1 === (r.headers?.length ?? 0) ? "-right-6" : "left-0"
+          r + 1 === (s.headers?.length ?? 0) ? "-right-6" : "left-0"
         ),
         initial: { opacity: 0 },
         animate: { opacity: 1 },
@@ -72,69 +78,72 @@ const o = ({ id: i, label: r, onClick: t, icon: l }) => /* @__PURE__ */ b(
         transition: { ease: "linear", duration: 0.2 },
         role: "menu",
         children: [
-          l && !C ? /* @__PURE__ */ e(
+          l && !h ? /* @__PURE__ */ e(
             o,
             {
               id: "btn-column-options-arrow-down",
-              label: v,
-              icon: /* @__PURE__ */ e(O, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              label: B,
+              icon: /* @__PURE__ */ e(T, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              isDisabled: c,
               onClick: () => {
-                l(t.key, "asc"), s(t.key), u(t.key), c(null);
+                l(t.key, "asc"), d(t.key), m(t.key), p(null);
               }
             }
           ) : null,
-          l && !C ? /* @__PURE__ */ e(
+          l && !h ? /* @__PURE__ */ e(
             o,
             {
               id: "btn-column-options-arrow-up",
-              label: B,
-              icon: /* @__PURE__ */ e(T, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              label: L,
+              icon: /* @__PURE__ */ e(j, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              isDisabled: c,
               onClick: () => {
-                l(t.key, "desc"), s(t.key), u(null), c(t.key);
+                l(t.key, "desc"), d(t.key), m(null), p(t.key);
               }
             }
           ) : null,
-          f ? /* @__PURE__ */ e(
+          i ? /* @__PURE__ */ e(
             o,
             {
               id: "btn-column-options-filter-by",
               label: n("Filter By"),
-              icon: /* @__PURE__ */ e(j, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              icon: /* @__PURE__ */ e(E, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              isDisabled: c,
               onClick: () => {
-                x(t), s(t.key);
+                y(t), d(t.key);
               }
             }
           ) : null,
-          d ? /* @__PURE__ */ e(
+          u ? /* @__PURE__ */ e(
             o,
             {
               id: "btn-column-options-add-column",
               label: n("Add Column"),
-              icon: /* @__PURE__ */ e(E, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              icon: /* @__PURE__ */ e(Z, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
               onClick: () => {
-                y?.(t), a();
+                N?.(t), a();
               }
             }
           ) : null,
-          d ? /* @__PURE__ */ e(
+          u ? /* @__PURE__ */ e(
             o,
             {
               id: "btn-column-options-edit-column",
               label: n("Edit Column"),
-              icon: /* @__PURE__ */ e(Z, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              icon: /* @__PURE__ */ e(q, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
               onClick: () => {
-                N?.(t), a();
+                R?.(t), a();
               }
             }
           ) : null,
-          d ? /* @__PURE__ */ e(
+          u ? /* @__PURE__ */ e(
             o,
             {
               id: "btn-column-options-delete-column",
               label: n("Delete Column"),
-              icon: /* @__PURE__ */ e(q, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
+              icon: /* @__PURE__ */ e(F, { fontSize: "small", className: "text-neutral-900 dark:text-neutral-100" }),
               onClick: () => {
-                R?.(t), a();
+                z?.(t), a();
               }
             }
           ) : null
@@ -144,6 +153,6 @@ const o = ({ id: i, label: r, onClick: t, icon: l }) => /* @__PURE__ */ b(
   ] });
 };
 export {
-  W as Options
+  X as Options
 };
 //# sourceMappingURL=Options.es.js.map

package/dist/components/data-display/infinite-table/head/cell/Options.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Options.es.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/Options.tsx"],"sourcesContent":["import { useOutsideClick } from '../../../../../hooks/useOutsideClick';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { AddRounded, ArrowDownwardRounded, ArrowUpwardRounded, DeleteOutlineRounded, EditRounded, FilterListRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { useEffect, useRef } from 'react';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  dataType?: string;\n  [k: string]: unknown;\n}\n\ninterface OptionsProps {\n  headerIndex: number;\n  headerGroup: { headers?: unknown[]; [k: string]: unknown };\n  column: HeaderColumn;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick?: (column: HeaderColumn) => void;\n  onEditColumnClick?: (column: HeaderColumn) => void;\n  onDeleteColumnClick?: (column: HeaderColumn) => void;\n}\n\ntype OptionButtonProps = {\n  id: string;\n  label: string;\n  onClick: () => void;\n  icon: JSX.Element;\n};\n\nconst OptionButton = ({ id, label, onClick, icon }: OptionButtonProps) => {\n  return (\n    <button\n      id={id}\n      type='button'\n      className='flex w-full px-4 py-2 text-neutral-900 dark:text-white font-inter text-sm font-medium rounded-[4px] hover:bg-neutral-100 dark:hover:bg-neutral-900 items-center gap-3'\n      onClick={onClick}\n    >\n      {icon}\n      {label}\n    </button>\n  );\n};\n\nexport const Options = ({\n  headerIndex,\n  headerGroup,\n  column,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n}: OptionsProps) => {\n  const tableConfig = useTableConfig();\n  const handleCloseFilters = () => setShowHeaderOptions(null);\n  const ref = useRef<HTMLDivElement>(null);\n  useOutsideClick({\n    ref,\n    handler: handleCloseFilters,\n  });\n  const t = tableConfig?.t ?? ((key: string) => key);\n  const isDateColumn = column?.dataType === 'date';\n  const isBooleanColumn = column?.dataType === 'boolean';\n  const sortAscLabel = isDateColumn ? t('Least Recent') : t('Sort By A-Z');\n  const sortDescLabel = isDateColumn ? t('Most Recent') : t('Sort By Z-A');\n\n  useEffect(() => {\n    const firstOption = ref.current?.querySelector<HTMLButtonElement>('button:not([disabled])');\n    firstOption?.focus();\n  }, []);\n\n  if (tableConfig?.renderColumnOptions) {\n    return tableConfig.renderColumnOptions({\n      headerIndex,\n      headerGroup,\n      column,\n      onSort,\n      onFilter,\n      toggleHeaderOption,\n      setIsShowSortArrowAsc,\n      setIsShowSortArrowDesc,\n      setShowHeaderOptions,\n      toggleDataFilterModal,\n      isColumnConfigurable,\n      onAddColumnClick,\n      onEditColumnClick,\n      onDeleteColumnClick,\n      onClose: handleCloseFilters,\n    }) as JSX.Element;\n  }\n\n  return (\n    <div ref={ref}>\n      <div className='absolute inset-0' onClick={handleCloseFilters} />\n      <motion.div\n        className={cn(\n          'absolute top-full bg-white dark:bg-black-700 rounded-lg shadow-lg cursor-pointer w-[220px] py-1 px-1 z-50 border border-neutral-200 dark:border-black-600',\n          headerIndex + 1 === (headerGroup.headers?.length ?? 0) ? '-right-6' : 'left-0',\n        )}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n        transition={{ ease: 'linear', duration: 0.2 }}\n        role='menu'\n      >\n        {onSort && !isBooleanColumn ? (\n          <OptionButton\n            id='btn-column-options-arrow-down'\n            label={sortAscLabel}\n            icon={<ArrowDownwardRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onSort(column.key, 'asc');\n              toggleHeaderOption(column.key);\n              setIsShowSortArrowAsc(column.key);\n              setIsShowSortArrowDesc(null);\n            }}\n          />\n        ) : null}\n        {onSort && !isBooleanColumn ? (\n          <OptionButton\n            id='btn-column-options-arrow-up'\n            label={sortDescLabel}\n            icon={<ArrowUpwardRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onSort(column.key, 'desc');\n              toggleHeaderOption(column.key);\n              setIsShowSortArrowAsc(null);\n              setIsShowSortArrowDesc(column.key);\n            }}\n          />\n        ) : null}\n        {onFilter ? (\n          <OptionButton\n            id='btn-column-options-filter-by'\n            label={t('Filter By')}\n            icon={<FilterListRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              toggleDataFilterModal(column);\n              toggleHeaderOption(column.key);\n            }}\n          />\n        ) : null}\n        {isColumnConfigurable ? (\n          <OptionButton\n            id='btn-column-options-add-column'\n            label={t('Add Column')}\n            icon={<AddRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onAddColumnClick?.(column);\n              handleCloseFilters();\n            }}\n          />\n        ) : null}\n        {isColumnConfigurable ? (\n          <OptionButton\n            id='btn-column-options-edit-column'\n            label={t('Edit Column')}\n            icon={<EditRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onEditColumnClick?.(column);\n              handleCloseFilters();\n            }}\n          />\n        ) : null}\n        {isColumnConfigurable ? (\n          <OptionButton\n            id='btn-column-options-delete-column'\n            label={t('Delete Column')}\n            icon={<DeleteOutlineRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onDeleteColumnClick?.(column);\n              handleCloseFilters();\n            }}\n          />\n        ) : null}\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["OptionButton","id","label","onClick","icon","jsxs","Options","headerIndex","headerGroup","column","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","tableConfig","useTableConfig","handleCloseFilters","ref","useRef","useOutsideClick","t","key","isDateColumn","isBooleanColumn","sortAscLabel","sortDescLabel","useEffect","jsx","motion","cn","ArrowDownwardRounded","ArrowUpwardRounded","FilterListRounded","AddRounded","EditRounded","DeleteOutlineRounded"],"mappings":"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"}
+{"version":3,"file":"Options.es.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/Options.tsx"],"sourcesContent":["import { useOutsideClick } from '../../../../../hooks/useOutsideClick';\nimport { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { AddRounded, ArrowDownwardRounded, ArrowUpwardRounded, DeleteOutlineRounded, EditRounded, FilterListRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport { motion } from 'framer-motion';\nimport { useEffect, useRef } from 'react';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  dataType?: string;\n  [k: string]: unknown;\n}\n\ninterface OptionsProps {\n  headerIndex: number;\n  headerGroup: { headers?: unknown[]; [k: string]: unknown };\n  column: HeaderColumn;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick?: (column: HeaderColumn) => void;\n  onEditColumnClick?: (column: HeaderColumn) => void;\n  onDeleteColumnClick?: (column: HeaderColumn) => void;\n  disabled?: boolean;\n}\n\ntype OptionButtonProps = {\n  id: string;\n  label: string;\n  onClick: () => void;\n  icon: JSX.Element;\n  isDisabled?: boolean;\n};\n\nconst OptionButton = ({ id, label, onClick, icon, isDisabled = false }: OptionButtonProps) => {\n  return (\n    <button\n      id={id}\n      type='button'\n      disabled={isDisabled}\n      className={cn(\n        'flex w-full px-4 py-2 text-neutral-900 dark:text-white font-inter text-sm font-medium rounded-[4px] items-center gap-3',\n        isDisabled ? 'opacity-60 cursor-not-allowed' : 'hover:bg-neutral-100 dark:hover:bg-neutral-900',\n      )}\n      onClick={onClick}\n    >\n      {icon}\n      {label}\n    </button>\n  );\n};\n\nexport const Options = ({\n  headerIndex,\n  headerGroup,\n  column,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  disabled = false,\n}: OptionsProps) => {\n  const tableConfig = useTableConfig();\n  const handleCloseFilters = () => setShowHeaderOptions(null);\n  const ref = useRef<HTMLDivElement>(null);\n  useOutsideClick({\n    ref,\n    handler: handleCloseFilters,\n  });\n  const t = tableConfig?.t ?? ((key: string) => key);\n  const isDateColumn = column?.dataType === 'date';\n  const isBooleanColumn = column?.dataType === 'boolean';\n  const sortAscLabel = isDateColumn ? t('Least Recent') : t('Sort By A-Z');\n  const sortDescLabel = isDateColumn ? t('Most Recent') : t('Sort By Z-A');\n\n  useEffect(() => {\n    const firstOption = ref.current?.querySelector<HTMLButtonElement>('button:not([disabled])');\n    firstOption?.focus();\n  }, []);\n\n  if (tableConfig?.renderColumnOptions) {\n    return tableConfig.renderColumnOptions({\n      headerIndex,\n      headerGroup,\n      column,\n      onSort,\n      onFilter,\n      toggleHeaderOption,\n      setIsShowSortArrowAsc,\n      setIsShowSortArrowDesc,\n      setShowHeaderOptions,\n      toggleDataFilterModal,\n      isColumnConfigurable,\n      onAddColumnClick,\n      onEditColumnClick,\n      onDeleteColumnClick,\n      onClose: handleCloseFilters,\n      disabled,\n    }) as JSX.Element;\n  }\n\n  return (\n    <div ref={ref}>\n      <div className='absolute inset-0' onClick={handleCloseFilters} />\n      <motion.div\n        className={cn(\n          'absolute top-full bg-white dark:bg-black-700 rounded-lg shadow-lg cursor-pointer w-[220px] py-1 px-1 z-50 border border-neutral-200 dark:border-black-600',\n          headerIndex + 1 === (headerGroup.headers?.length ?? 0) ? '-right-6' : 'left-0',\n        )}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n        transition={{ ease: 'linear', duration: 0.2 }}\n        role='menu'\n      >\n        {onSort && !isBooleanColumn ? (\n          <OptionButton\n            id='btn-column-options-arrow-down'\n            label={sortAscLabel}\n            icon={<ArrowDownwardRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            isDisabled={disabled}\n            onClick={() => {\n              onSort(column.key, 'asc');\n              toggleHeaderOption(column.key);\n              setIsShowSortArrowAsc(column.key);\n              setIsShowSortArrowDesc(null);\n            }}\n          />\n        ) : null}\n        {onSort && !isBooleanColumn ? (\n          <OptionButton\n            id='btn-column-options-arrow-up'\n            label={sortDescLabel}\n            icon={<ArrowUpwardRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            isDisabled={disabled}\n            onClick={() => {\n              onSort(column.key, 'desc');\n              toggleHeaderOption(column.key);\n              setIsShowSortArrowAsc(null);\n              setIsShowSortArrowDesc(column.key);\n            }}\n          />\n        ) : null}\n        {onFilter ? (\n          <OptionButton\n            id='btn-column-options-filter-by'\n            label={t('Filter By')}\n            icon={<FilterListRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            isDisabled={disabled}\n            onClick={() => {\n              toggleDataFilterModal(column);\n              toggleHeaderOption(column.key);\n            }}\n          />\n        ) : null}\n        {isColumnConfigurable ? (\n          <OptionButton\n            id='btn-column-options-add-column'\n            label={t('Add Column')}\n            icon={<AddRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onAddColumnClick?.(column);\n              handleCloseFilters();\n            }}\n          />\n        ) : null}\n        {isColumnConfigurable ? (\n          <OptionButton\n            id='btn-column-options-edit-column'\n            label={t('Edit Column')}\n            icon={<EditRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onEditColumnClick?.(column);\n              handleCloseFilters();\n            }}\n          />\n        ) : null}\n        {isColumnConfigurable ? (\n          <OptionButton\n            id='btn-column-options-delete-column'\n            label={t('Delete Column')}\n            icon={<DeleteOutlineRounded fontSize='small' className='text-neutral-900 dark:text-neutral-100' />}\n            onClick={() => {\n              onDeleteColumnClick?.(column);\n              handleCloseFilters();\n            }}\n          />\n        ) : null}\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["OptionButton","id","label","onClick","icon","isDisabled","jsxs","cn","Options","headerIndex","headerGroup","column","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","disabled","tableConfig","useTableConfig","handleCloseFilters","ref","useRef","useOutsideClick","t","key","isDateColumn","isBooleanColumn","sortAscLabel","sortDescLabel","useEffect","jsx","motion","ArrowDownwardRounded","ArrowUpwardRounded","FilterListRounded","AddRounded","EditRounded","DeleteOutlineRounded"],"mappings":"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"}

package/dist/components/data-display/infinite-table/head/cell/Resizer.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../_virtual/index.cjs.js"),l=require("react"),c=({column:e,onResizeComplete:a})=>{const s=e.isResizing,r=e.getResizerProps?.()||{},[o,i]=l.useState(!1);return n.jsx("div",{...r,onDoubleClick:()=>e.resetResizing?.(),onMouseDown:t=>{r.onMouseDown?.(t)},onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),onMouseUp:()=>{a(e.Header,e.width)},onTouchStart:t=>{r.onTouchStart?.(t)},className:u("absolute top-0 right-0 w-1 h-full cursor-col-resize touch-none translate-x-1/2 transition-all z-10",{"bg-blue-400 dark:bg-blue-400":s,"bg-[#8ecae6] dark:bg-neutral-600":!s&&o,"bg-transparent":!s&&!o}),style:{userSelect:"none"},children:n.jsx("div",{className:"absolute inset-y-0 -left-2 -right-2 cursor-col-resize"})})};exports.Resizer=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("../../../../../_virtual/index.cjs.js"),l=require("react"),g=({column:r,onResizeComplete:c,disabled:e=!1})=>{const s=r.isResizing,t=e?{}:r.getResizerProps?.()||{},[n,i]=l.useState(!1);return u.jsx("div",{...t,onDoubleClick:()=>{e||r.resetResizing?.()},onMouseDown:o=>{t.onMouseDown?.(o)},onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),onMouseUp:()=>{e||c(r.Header,r.width)},onTouchStart:o=>{t.onTouchStart?.(o)},className:a("absolute top-0 right-0 w-1 h-full touch-none translate-x-1/2 transition-all z-10",{"cursor-col-resize":!e,"cursor-not-allowed":e,"bg-blue-400 dark:bg-blue-400":s,"bg-[#8ecae6] dark:bg-neutral-600":!s&&n&&!e,"bg-transparent":!s&&(!n||e)}),style:{userSelect:"none"},children:u.jsx("div",{className:a("absolute inset-y-0 -left-2 -right-2",e?"cursor-not-allowed":"cursor-col-resize")})})};exports.Resizer=g;
 //# sourceMappingURL=Resizer.cjs.js.map

package/dist/components/data-display/infinite-table/head/cell/Resizer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizer.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/Resizer.tsx"],"sourcesContent":["import cn from 'classnames';\nimport React, { useState } from 'react';\n\ninterface ResizerColumn {\n  isResizing?: boolean;\n  getResizerProps?: () => { onMouseDown?: (e: React.MouseEvent) => void; onTouchStart?: (e: React.TouchEvent) => void; [k: string]: unknown };\n  resetResizing?: () => void;\n  Header: string;\n  width: number;\n  [k: string]: unknown;\n}\n\ninterface ResizerProps {\n  column: ResizerColumn;\n  onResizeComplete: (columnHeader: string, width: number) => void;\n}\n\nexport const Resizer = ({ column, onResizeComplete }: ResizerProps) => {\n  const isResizing = column.isResizing;\n  const resizerProps = column.getResizerProps?.() || {};\n  const [isHoveringResizer, setIsHoveringResizer] = useState(false);\n\n  return (\n    <div\n      {...resizerProps}\n      onDoubleClick={() => column.resetResizing?.()}\n      onMouseDown={(e) => {\n        resizerProps.onMouseDown?.(e);\n      }}\n      onMouseEnter={() => setIsHoveringResizer(true)}\n      onMouseLeave={() => setIsHoveringResizer(false)}\n      onMouseUp={() => {\n        onResizeComplete(column.Header, column.width);\n      }}\n      onTouchStart={(e) => {\n        resizerProps.onTouchStart?.(e);\n      }}\n      className={cn('absolute top-0 right-0 w-1 h-full cursor-col-resize touch-none translate-x-1/2 transition-all z-10', {\n        'bg-blue-400 dark:bg-blue-400': isResizing,\n        'bg-[#8ecae6] dark:bg-neutral-600': !isResizing && isHoveringResizer,\n        'bg-transparent': !isResizing && !isHoveringResizer,\n      })}\n      style={{ userSelect: 'none' }}\n    >\n      <div className='absolute inset-y-0 -left-2 -right-2 cursor-col-resize' />\n    </div>\n  );\n};\n"],"names":["Resizer","column","onResizeComplete","isResizing","resizerProps","isHoveringResizer","setIsHoveringResizer","useState","jsx","e","cn"],"mappings":"0LAiBaA,EAAU,CAAC,CAAE,OAAAC,EAAQ,iBAAAC,KAAqC,CACrE,MAAMC,EAAaF,EAAO,WACpBG,EAAeH,EAAO,kBAAA,GAAuB,CAAA,EAC7C,CAACI,EAAmBC,CAAoB,EAAIC,EAAAA,SAAS,EAAK,EAEhE,OACEC,EAAAA,IAAC,MAAA,CACE,GAAGJ,EACJ,cAAe,IAAMH,EAAO,gBAAA,EAC5B,YAAcQ,GAAM,CAClBL,EAAa,cAAcK,CAAC,CAC9B,EACA,aAAc,IAAMH,EAAqB,EAAI,EAC7C,aAAc,IAAMA,EAAqB,EAAK,EAC9C,UAAW,IAAM,CACfJ,EAAiBD,EAAO,OAAQA,EAAO,KAAK,CAC9C,EACA,aAAeQ,GAAM,CACnBL,EAAa,eAAeK,CAAC,CAC/B,EACA,UAAWC,EAAG,qGAAsG,CAClH,+BAAgCP,EAChC,mCAAoC,CAACA,GAAcE,EACnD,iBAAkB,CAACF,GAAc,CAACE,CAAA,CACnC,EACD,MAAO,CAAE,WAAY,MAAA,EAErB,SAAAG,EAAAA,IAAC,MAAA,CAAI,UAAU,uDAAA,CAAwD,CAAA,CAAA,CAG7E"}
+{"version":3,"file":"Resizer.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/Resizer.tsx"],"sourcesContent":["import cn from 'classnames';\nimport React, { useState } from 'react';\n\ninterface ResizerColumn {\n  isResizing?: boolean;\n  getResizerProps?: () => { onMouseDown?: (e: React.MouseEvent) => void; onTouchStart?: (e: React.TouchEvent) => void; [k: string]: unknown };\n  resetResizing?: () => void;\n  Header: string;\n  width: number;\n  [k: string]: unknown;\n}\n\ninterface ResizerProps {\n  column: ResizerColumn;\n  onResizeComplete: (columnHeader: string, width: number) => void;\n  disabled?: boolean;\n}\n\nexport const Resizer = ({ column, onResizeComplete, disabled = false }: ResizerProps) => {\n  const isResizing = column.isResizing;\n  const resizerProps = disabled ? {} : column.getResizerProps?.() || {};\n  const [isHoveringResizer, setIsHoveringResizer] = useState(false);\n\n  return (\n    <div\n      {...resizerProps}\n      onDoubleClick={() => {\n        if (!disabled) column.resetResizing?.();\n      }}\n      onMouseDown={(e) => {\n        resizerProps.onMouseDown?.(e);\n      }}\n      onMouseEnter={() => setIsHoveringResizer(true)}\n      onMouseLeave={() => setIsHoveringResizer(false)}\n      onMouseUp={() => {\n        if (disabled) return;\n        onResizeComplete(column.Header, column.width);\n      }}\n      onTouchStart={(e) => {\n        resizerProps.onTouchStart?.(e);\n      }}\n      className={cn('absolute top-0 right-0 w-1 h-full touch-none translate-x-1/2 transition-all z-10', {\n        'cursor-col-resize': !disabled,\n        'cursor-not-allowed': disabled,\n        'bg-blue-400 dark:bg-blue-400': isResizing,\n        'bg-[#8ecae6] dark:bg-neutral-600': !isResizing && isHoveringResizer && !disabled,\n        'bg-transparent': !isResizing && (!isHoveringResizer || disabled),\n      })}\n      style={{ userSelect: 'none' }}\n    >\n      <div className={cn('absolute inset-y-0 -left-2 -right-2', disabled ? 'cursor-not-allowed' : 'cursor-col-resize')} />\n    </div>\n  );\n};\n"],"names":["Resizer","column","onResizeComplete","disabled","isResizing","resizerProps","isHoveringResizer","setIsHoveringResizer","useState","jsx","e","cn"],"mappings":"0LAkBaA,EAAU,CAAC,CAAE,OAAAC,EAAQ,iBAAAC,EAAkB,SAAAC,EAAW,MAA0B,CACvF,MAAMC,EAAaH,EAAO,WACpBI,EAAeF,EAAW,CAAA,EAAKF,EAAO,kBAAA,GAAuB,CAAA,EAC7D,CAACK,EAAmBC,CAAoB,EAAIC,EAAAA,SAAS,EAAK,EAEhE,OACEC,EAAAA,IAAC,MAAA,CACE,GAAGJ,EACJ,cAAe,IAAM,CACdF,GAAUF,EAAO,gBAAA,CACxB,EACA,YAAcS,GAAM,CAClBL,EAAa,cAAcK,CAAC,CAC9B,EACA,aAAc,IAAMH,EAAqB,EAAI,EAC7C,aAAc,IAAMA,EAAqB,EAAK,EAC9C,UAAW,IAAM,CACXJ,GACJD,EAAiBD,EAAO,OAAQA,EAAO,KAAK,CAC9C,EACA,aAAeS,GAAM,CACnBL,EAAa,eAAeK,CAAC,CAC/B,EACA,UAAWC,EAAG,mFAAoF,CAChG,oBAAqB,CAACR,EACtB,qBAAsBA,EACtB,+BAAgCC,EAChC,mCAAoC,CAACA,GAAcE,GAAqB,CAACH,EACzE,iBAAkB,CAACC,IAAe,CAACE,GAAqBH,EAAA,CACzD,EACD,MAAO,CAAE,WAAY,MAAA,EAErB,SAAAM,EAAAA,IAAC,OAAI,UAAWE,EAAG,sCAAuCR,EAAW,qBAAuB,mBAAmB,CAAA,CAAG,CAAA,CAAA,CAGxH"}

package/dist/components/data-display/infinite-table/head/cell/Resizer.d.ts

@@ -14,6 +14,7 @@ interface ResizerColumn {
 interface ResizerProps {
     column: ResizerColumn;
     onResizeComplete: (columnHeader: string, width: number) => void;
+    disabled?: boolean;
 }
-export declare const Resizer: ({ column, onResizeComplete }: ResizerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Resizer: ({ column, onResizeComplete, disabled }: ResizerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-display/infinite-table/head/cell/Resizer.es.js

@@ -1,35 +1,39 @@
-import { jsx as n } from "react/jsx-runtime";
-import l from "../../../../../_virtual/index.es.js";
-import { useState as u } from "react";
-const b = ({ column: e, onResizeComplete: a }) => {
-  const s = e.isResizing, r = e.getResizerProps?.() || {}, [t, i] = u(!1);
-  return /* @__PURE__ */ n(
+import { jsx as u } from "react/jsx-runtime";
+import a from "../../../../../_virtual/index.es.js";
+import { useState as l } from "react";
+const p = ({ column: r, onResizeComplete: c, disabled: e = !1 }) => {
+  const o = r.isResizing, s = e ? {} : r.getResizerProps?.() || {}, [n, i] = l(!1);
+  return /* @__PURE__ */ u(
     "div",
     {
-      ...r,
-      onDoubleClick: () => e.resetResizing?.(),
-      onMouseDown: (o) => {
-        r.onMouseDown?.(o);
+      ...s,
+      onDoubleClick: () => {
+        e || r.resetResizing?.();
+      },
+      onMouseDown: (t) => {
+        s.onMouseDown?.(t);
       },
       onMouseEnter: () => i(!0),
       onMouseLeave: () => i(!1),
       onMouseUp: () => {
-        a(e.Header, e.width);
+        e || c(r.Header, r.width);
       },
-      onTouchStart: (o) => {
-        r.onTouchStart?.(o);
+      onTouchStart: (t) => {
+        s.onTouchStart?.(t);
       },
-      className: l("absolute top-0 right-0 w-1 h-full cursor-col-resize touch-none translate-x-1/2 transition-all z-10", {
-        "bg-blue-400 dark:bg-blue-400": s,
-        "bg-[#8ecae6] dark:bg-neutral-600": !s && t,
-        "bg-transparent": !s && !t
+      className: a("absolute top-0 right-0 w-1 h-full touch-none translate-x-1/2 transition-all z-10", {
+        "cursor-col-resize": !e,
+        "cursor-not-allowed": e,
+        "bg-blue-400 dark:bg-blue-400": o,
+        "bg-[#8ecae6] dark:bg-neutral-600": !o && n && !e,
+        "bg-transparent": !o && (!n || e)
       }),
       style: { userSelect: "none" },
-      children: /* @__PURE__ */ n("div", { className: "absolute inset-y-0 -left-2 -right-2 cursor-col-resize" })
+      children: /* @__PURE__ */ u("div", { className: a("absolute inset-y-0 -left-2 -right-2", e ? "cursor-not-allowed" : "cursor-col-resize") })
     }
   );
 };
 export {
-  b as Resizer
+  p as Resizer
 };
 //# sourceMappingURL=Resizer.es.js.map

package/dist/components/data-display/infinite-table/head/cell/Resizer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizer.es.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/Resizer.tsx"],"sourcesContent":["import cn from 'classnames';\nimport React, { useState } from 'react';\n\ninterface ResizerColumn {\n  isResizing?: boolean;\n  getResizerProps?: () => { onMouseDown?: (e: React.MouseEvent) => void; onTouchStart?: (e: React.TouchEvent) => void; [k: string]: unknown };\n  resetResizing?: () => void;\n  Header: string;\n  width: number;\n  [k: string]: unknown;\n}\n\ninterface ResizerProps {\n  column: ResizerColumn;\n  onResizeComplete: (columnHeader: string, width: number) => void;\n}\n\nexport const Resizer = ({ column, onResizeComplete }: ResizerProps) => {\n  const isResizing = column.isResizing;\n  const resizerProps = column.getResizerProps?.() || {};\n  const [isHoveringResizer, setIsHoveringResizer] = useState(false);\n\n  return (\n    <div\n      {...resizerProps}\n      onDoubleClick={() => column.resetResizing?.()}\n      onMouseDown={(e) => {\n        resizerProps.onMouseDown?.(e);\n      }}\n      onMouseEnter={() => setIsHoveringResizer(true)}\n      onMouseLeave={() => setIsHoveringResizer(false)}\n      onMouseUp={() => {\n        onResizeComplete(column.Header, column.width);\n      }}\n      onTouchStart={(e) => {\n        resizerProps.onTouchStart?.(e);\n      }}\n      className={cn('absolute top-0 right-0 w-1 h-full cursor-col-resize touch-none translate-x-1/2 transition-all z-10', {\n        'bg-blue-400 dark:bg-blue-400': isResizing,\n        'bg-[#8ecae6] dark:bg-neutral-600': !isResizing && isHoveringResizer,\n        'bg-transparent': !isResizing && !isHoveringResizer,\n      })}\n      style={{ userSelect: 'none' }}\n    >\n      <div className='absolute inset-y-0 -left-2 -right-2 cursor-col-resize' />\n    </div>\n  );\n};\n"],"names":["Resizer","column","onResizeComplete","isResizing","resizerProps","isHoveringResizer","setIsHoveringResizer","useState","jsx","e","cn"],"mappings":";;;AAiBO,MAAMA,IAAU,CAAC,EAAE,QAAAC,GAAQ,kBAAAC,QAAqC;AACrE,QAAMC,IAAaF,EAAO,YACpBG,IAAeH,EAAO,kBAAA,KAAuB,CAAA,GAC7C,CAACI,GAAmBC,CAAoB,IAAIC,EAAS,EAAK;AAEhE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,eAAe,MAAMH,EAAO,gBAAA;AAAA,MAC5B,aAAa,CAACQ,MAAM;AAClB,QAAAL,EAAa,cAAcK,CAAC;AAAA,MAC9B;AAAA,MACA,cAAc,MAAMH,EAAqB,EAAI;AAAA,MAC7C,cAAc,MAAMA,EAAqB,EAAK;AAAA,MAC9C,WAAW,MAAM;AACf,QAAAJ,EAAiBD,EAAO,QAAQA,EAAO,KAAK;AAAA,MAC9C;AAAA,MACA,cAAc,CAACQ,MAAM;AACnB,QAAAL,EAAa,eAAeK,CAAC;AAAA,MAC/B;AAAA,MACA,WAAWC,EAAG,sGAAsG;AAAA,QAClH,gCAAgCP;AAAA,QAChC,oCAAoC,CAACA,KAAcE;AAAA,QACnD,kBAAkB,CAACF,KAAc,CAACE;AAAA,MAAA,CACnC;AAAA,MACD,OAAO,EAAE,YAAY,OAAA;AAAA,MAErB,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,wDAAA,CAAwD;AAAA,IAAA;AAAA,EAAA;AAG7E;"}
+{"version":3,"file":"Resizer.es.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/Resizer.tsx"],"sourcesContent":["import cn from 'classnames';\nimport React, { useState } from 'react';\n\ninterface ResizerColumn {\n  isResizing?: boolean;\n  getResizerProps?: () => { onMouseDown?: (e: React.MouseEvent) => void; onTouchStart?: (e: React.TouchEvent) => void; [k: string]: unknown };\n  resetResizing?: () => void;\n  Header: string;\n  width: number;\n  [k: string]: unknown;\n}\n\ninterface ResizerProps {\n  column: ResizerColumn;\n  onResizeComplete: (columnHeader: string, width: number) => void;\n  disabled?: boolean;\n}\n\nexport const Resizer = ({ column, onResizeComplete, disabled = false }: ResizerProps) => {\n  const isResizing = column.isResizing;\n  const resizerProps = disabled ? {} : column.getResizerProps?.() || {};\n  const [isHoveringResizer, setIsHoveringResizer] = useState(false);\n\n  return (\n    <div\n      {...resizerProps}\n      onDoubleClick={() => {\n        if (!disabled) column.resetResizing?.();\n      }}\n      onMouseDown={(e) => {\n        resizerProps.onMouseDown?.(e);\n      }}\n      onMouseEnter={() => setIsHoveringResizer(true)}\n      onMouseLeave={() => setIsHoveringResizer(false)}\n      onMouseUp={() => {\n        if (disabled) return;\n        onResizeComplete(column.Header, column.width);\n      }}\n      onTouchStart={(e) => {\n        resizerProps.onTouchStart?.(e);\n      }}\n      className={cn('absolute top-0 right-0 w-1 h-full touch-none translate-x-1/2 transition-all z-10', {\n        'cursor-col-resize': !disabled,\n        'cursor-not-allowed': disabled,\n        'bg-blue-400 dark:bg-blue-400': isResizing,\n        'bg-[#8ecae6] dark:bg-neutral-600': !isResizing && isHoveringResizer && !disabled,\n        'bg-transparent': !isResizing && (!isHoveringResizer || disabled),\n      })}\n      style={{ userSelect: 'none' }}\n    >\n      <div className={cn('absolute inset-y-0 -left-2 -right-2', disabled ? 'cursor-not-allowed' : 'cursor-col-resize')} />\n    </div>\n  );\n};\n"],"names":["Resizer","column","onResizeComplete","disabled","isResizing","resizerProps","isHoveringResizer","setIsHoveringResizer","useState","jsx","e","cn"],"mappings":";;;AAkBO,MAAMA,IAAU,CAAC,EAAE,QAAAC,GAAQ,kBAAAC,GAAkB,UAAAC,IAAW,SAA0B;AACvF,QAAMC,IAAaH,EAAO,YACpBI,IAAeF,IAAW,CAAA,IAAKF,EAAO,kBAAA,KAAuB,CAAA,GAC7D,CAACK,GAAmBC,CAAoB,IAAIC,EAAS,EAAK;AAEhE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,eAAe,MAAM;AACnB,QAAKF,KAAUF,EAAO,gBAAA;AAAA,MACxB;AAAA,MACA,aAAa,CAACS,MAAM;AAClB,QAAAL,EAAa,cAAcK,CAAC;AAAA,MAC9B;AAAA,MACA,cAAc,MAAMH,EAAqB,EAAI;AAAA,MAC7C,cAAc,MAAMA,EAAqB,EAAK;AAAA,MAC9C,WAAW,MAAM;AACf,QAAIJ,KACJD,EAAiBD,EAAO,QAAQA,EAAO,KAAK;AAAA,MAC9C;AAAA,MACA,cAAc,CAACS,MAAM;AACnB,QAAAL,EAAa,eAAeK,CAAC;AAAA,MAC/B;AAAA,MACA,WAAWC,EAAG,oFAAoF;AAAA,QAChG,qBAAqB,CAACR;AAAA,QACtB,sBAAsBA;AAAA,QACtB,gCAAgCC;AAAA,QAChC,oCAAoC,CAACA,KAAcE,KAAqB,CAACH;AAAA,QACzE,kBAAkB,CAACC,MAAe,CAACE,KAAqBH;AAAA,MAAA,CACzD;AAAA,MACD,OAAO,EAAE,YAAY,OAAA;AAAA,MAErB,UAAA,gBAAAM,EAAC,SAAI,WAAWE,EAAG,uCAAuCR,IAAW,uBAAuB,mBAAmB,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAGxH;"}

package/dist/components/data-display/infinite-table/head/cell/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),A=require("../../../../../providers/design-system-provider/hooks.cjs.js"),L=require("../../../datatype-icon/DataTypeIcon.cjs.js"),l=require("../../../../tooltip/Tooltip.cjs.js"),n=require("@mui/icons-material"),y=require("../../../../../_virtual/index.cjs.js"),u=require("react"),W=require("../../context.cjs.js"),_=require("./Options.cjs.js"),B=require("./Prefix.cjs.js"),E=require("./Resizer.cjs.js"),V=require("../../constants.cjs.js"),H=({headerGroup:f,headerIndex:o,showHeaderOptions:d,column:e,isShowSortArrowAsc:k,isShowSortArrowDesc:C,onSort:c,onFilter:g,toggleHeaderOption:x,setIsShowSortArrowAsc:m,setIsShowSortArrowDesc:j,setShowHeaderOptions:v,toggleDataFilterModal:w,isColumnConfigurable:N,onAddColumnClick:S,onEditColumnClick:K,onDeleteColumnClick:T,isResizable:q})=>{const t=A.useTableConfig(),p=t?.getPrimaryColor?.()||{},{lastNonStickyColumnIndex:I,setShowHeaderContextOptions:a,showHeaderContextOptions:P,getSumOfNextVisibleColumnWidth:z,handleUpdateColumnWidth:O,multiSelectConfig:b,headerContextOptions:h,showDataTypeIcon:R}=u.useContext(W.TableContext),D=e?.sticky?z?.(o):0,F=I?.(),{selectedColumnIds:i=[]}=b||{},$=y({"border border-primary-600 dark:border-blue-800":i?.includes(e.id),"border-b border-b-primary-300":e?.isPrimaryKey,"border-b border-b-purple-300":e?.isCompositeKey});return r.jsx(u.Fragment,{children:r.jsxs("th",{className:y("bg-white dark:bg-black-700",`${e?.sticky?"sticky left-0 bg-neutral-50 dark:bg-black-700 right-0":"relative"} h-row whitespace-normal max-w-lg ${F===o?"w-full":""} h-full gap-1 cursor-pointer`,!e.static&&!i?.includes(e.id)&&"hover:bg-neutral-200 dark:hover:bg-black-700",{"bg-primary-100 dark:bg-primary-900":i?.includes(e.id)},$),style:{minWidth:`${e.width}px`,maxWidth:`${e.width}px`,right:` ${e?.sticky?`${D}px`:V.CELL_DEFAULT_RIGHT_OFFSET}`},role:"cell",onClick:s=>b?.onTableColumnClick?.(s.nativeEvent,e.id),onContextMenu:s=>{i?.includes(e.id)&&(s.preventDefault(),a?.(e.key))},children:[r.jsxs("div",{className:"flex w-full px-4 gap-2 h-row justify-between items-center",children:[r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(B.Prefix,{column:e,isShowSortArrowAsc:k,isShowSortArrowDesc:C}),e?.isCompositeKey?t?.renderKeyIcons?t.renderKeyIcons("composite"):r.jsx(l,{title:"Composite Key",children:r.jsx("span",{className:"flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1",children:r.jsx(n.VpnKeyRounded,{sx:{fontSize:14,color:"#BB5DFF"}})})}):e?.isPrimaryKey?t?.renderKeyIcons?t.renderKeyIcons("primary",p?.[400]):r.jsx(l,{title:"Primary Key",children:r.jsx("span",{className:"flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1",children:r.jsx(n.VpnKeyRounded,{sx:{fontSize:14,color:p?.[400]||"var(--color-primary-400)"}})})}):null,r.jsx("span",{className:"text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap",children:e.render("Header")}),e.isSAP&&t?.renderSapLabel?.(),e.is_live_field&&r.jsx(l,{title:"Live Field",children:r.jsx("span",{className:"flex items-center",children:r.jsx(n.BoltOutlined,{sx:{fontSize:14,color:"var(--color-primary-600)"}})})}),!e.static&&e?.sortable&&c&&r.jsx("button",{className:"flex items-center justify-center h-full",children:r.jsx(n.KeyboardArrowDown,{sx:{fontSize:18,color:"#98A2B3",transform:d===e.key?"rotate(180deg)":"none",transition:"transform 0.2s"},onClick:s=>{s.stopPropagation(),e.static||x(e.key)}})})]}),!e.static&&d===e.key&&r.jsx(_.Options,{headerIndex:o,headerGroup:f,column:e,onSort:c,toggleHeaderOption:x,setIsShowSortArrowAsc:m,setIsShowSortArrowDesc:j,setShowHeaderOptions:v,toggleDataFilterModal:w,isColumnConfigurable:N,onAddColumnClick:S,onEditColumnClick:K,onDeleteColumnClick:T,onFilter:g}),P===e.key?t?.renderColumnContextOptions?.({onClose:()=>a?.(null),children:h})||r.jsxs("div",{className:"absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]",children:[r.jsx("div",{className:"flex justify-end p-1 border-b border-neutral-100 dark:border-black-600",children:r.jsx("button",{type:"button",className:"text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1",onClick:()=>a?.(null),children:"Close"})}),r.jsx("div",{className:"p-1",children:h})]}):null,R&&r.jsx(L.DataTypeIcon,{dataType:e?.dataType||"string"})]}),q?r.jsx(E.Resizer,{column:e,onResizeComplete:O}):null]})})};exports.Cell=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),L=require("../../../../../providers/design-system-provider/hooks.cjs.js"),W=require("../../../datatype-icon/DataTypeIcon.cjs.js"),o=require("../../../../tooltip/Tooltip.cjs.js"),a=require("@mui/icons-material"),u=require("../../../../../_virtual/index.cjs.js"),f=require("react"),_=require("../../context.cjs.js"),B=require("./Options.cjs.js"),E=require("./Prefix.cjs.js"),V=require("./Resizer.cjs.js"),H=require("../../constants.cjs.js"),M=({headerGroup:k,headerIndex:n,showHeaderOptions:d,column:e,isShowSortArrowAsc:C,isShowSortArrowDesc:g,onSort:c,onFilter:m,toggleHeaderOption:x,setIsShowSortArrowAsc:j,setIsShowSortArrowDesc:v,setShowHeaderOptions:w,toggleDataFilterModal:N,isColumnConfigurable:S,onAddColumnClick:T,onEditColumnClick:K,onDeleteColumnClick:q,isResizable:I})=>{const t=L.useTableConfig(),p=t?.getPrimaryColor?.()||{},{lastNonStickyColumnIndex:O,setShowHeaderContextOptions:l,showHeaderContextOptions:P,getSumOfNextVisibleColumnWidth:R,handleUpdateColumnWidth:z,multiSelectConfig:b,headerContextOptions:h,showDataTypeIcon:D,isTableViewReadOnly:y}=f.useContext(_.TableContext),F=e?.sticky?R?.(n):0,$=O?.(),{selectedColumnIds:i=[]}=b||{},A=u({"border border-primary-600 dark:border-blue-800":i?.includes(e.id),"border-b border-b-primary-300":e?.isPrimaryKey,"border-b border-b-purple-300":e?.isCompositeKey});return r.jsx(f.Fragment,{children:r.jsxs("th",{className:u("bg-white dark:bg-black-700",`${e?.sticky?"sticky left-0 bg-neutral-50 dark:bg-black-700 right-0":"relative"} h-row whitespace-normal max-w-lg ${$===n?"w-full":""} h-full gap-1 cursor-pointer`,!e.static&&!i?.includes(e.id)&&"hover:bg-neutral-200 dark:hover:bg-black-700",{"bg-primary-100 dark:bg-primary-900":i?.includes(e.id)},A),style:{minWidth:`${e.width}px`,maxWidth:`${e.width}px`,right:` ${e?.sticky?`${F}px`:H.CELL_DEFAULT_RIGHT_OFFSET}`},role:"cell",onClick:s=>b?.onTableColumnClick?.(s.nativeEvent,e.id),onContextMenu:s=>{i?.includes(e.id)&&(s.preventDefault(),l?.(e.key))},children:[r.jsxs("div",{className:"flex w-full px-4 gap-2 h-row justify-between items-center",children:[r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(E.Prefix,{column:e,isShowSortArrowAsc:C,isShowSortArrowDesc:g}),e?.isCompositeKey?t?.renderKeyIcons?t.renderKeyIcons("composite"):r.jsx(o,{title:"Composite Key",children:r.jsx("span",{className:"flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1",children:r.jsx(a.VpnKeyRounded,{sx:{fontSize:14,color:"#BB5DFF"}})})}):e?.isPrimaryKey?t?.renderKeyIcons?t.renderKeyIcons("primary",p?.[400]):r.jsx(o,{title:"Primary Key",children:r.jsx("span",{className:"flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1",children:r.jsx(a.VpnKeyRounded,{sx:{fontSize:14,color:p?.[400]||"var(--color-primary-400)"}})})}):null,r.jsx("span",{className:"text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap",children:e.render("Header")}),e.isSAP&&t?.renderSapLabel?.(),e.is_live_field&&r.jsx(o,{title:"Live Field",children:r.jsx("span",{className:"flex items-center",children:r.jsx(a.BoltOutlined,{sx:{fontSize:14,color:"var(--color-primary-600)"}})})}),!e.static&&e?.sortable&&c&&r.jsx("button",{className:"flex items-center justify-center h-full",children:r.jsx(a.KeyboardArrowDown,{sx:{fontSize:18,color:"#98A2B3",transform:d===e.key?"rotate(180deg)":"none",transition:"transform 0.2s"},onClick:s=>{s.stopPropagation(),e.static||x(e.key)}})})]}),!e.static&&d===e.key&&r.jsx(B.Options,{headerIndex:n,headerGroup:k,column:e,onSort:c,toggleHeaderOption:x,setIsShowSortArrowAsc:j,setIsShowSortArrowDesc:v,setShowHeaderOptions:w,toggleDataFilterModal:N,isColumnConfigurable:S,onAddColumnClick:T,onEditColumnClick:K,onDeleteColumnClick:q,onFilter:m,disabled:y}),P===e.key?t?.renderColumnContextOptions?.({onClose:()=>l?.(null),children:h})||r.jsxs("div",{className:"absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]",children:[r.jsx("div",{className:"flex justify-end p-1 border-b border-neutral-100 dark:border-black-600",children:r.jsx("button",{type:"button",className:"text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1",onClick:()=>l?.(null),children:"Close"})}),r.jsx("div",{className:"p-1",children:h})]}):null,D&&r.jsx(W.DataTypeIcon,{dataType:e?.dataType||"string"})]}),I?r.jsx(V.Resizer,{column:e,onResizeComplete:z,disabled:y}):null]})})};exports.Cell=M;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/data-display/infinite-table/head/cell/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/index.tsx"],"sourcesContent":["import { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { DataTypeIcon } from '../../../../data-display/datatype-icon/DataTypeIcon';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { BoltOutlined, KeyboardArrowDown, VpnKeyRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { Fragment, useContext } from 'react';\n\nimport { TableContext } from '../../context';\nimport { Options } from './Options';\nimport { Prefix } from './Prefix';\nimport { Resizer } from './Resizer';\nimport { CELL_DEFAULT_RIGHT_OFFSET } from '../../constants';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  sticky?: boolean;\n  static?: boolean;\n  isPrimaryKey?: boolean;\n  isCompositeKey?: boolean;\n  isSAP?: boolean;\n  is_live_field?: boolean;\n  dataType?: string;\n  visible?: boolean;\n  sortable?: boolean\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface CellProps {\n  headerGroup: { getHeaderGroupProps: () => Record<string, unknown>; headers: HeaderColumn[]; [k: string]: unknown };\n  headerIndex: number;\n  showHeaderOptions: string;\n  column: HeaderColumn;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  isResizable: boolean;\n}\n\nexport const Cell = ({\n  headerGroup,\n  headerIndex,\n  showHeaderOptions,\n  column,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  isResizable,\n}: CellProps) => {\n  const tableConfig = useTableConfig();\n  const primaryColorShades = tableConfig?.getPrimaryColor?.() || {};\n  const {\n    lastNonStickyColumnIndex,\n    setShowHeaderContextOptions,\n    showHeaderContextOptions,\n    getSumOfNextVisibleColumnWidth,\n    handleUpdateColumnWidth,\n    multiSelectConfig,\n    headerContextOptions,\n    showDataTypeIcon,\n  } = useContext(TableContext);\n\n  const nextWidthSum = column?.sticky ? getSumOfNextVisibleColumnWidth?.(headerIndex) : 0;\n  const lastNonStickyColIndex = lastNonStickyColumnIndex?.();\n  const { selectedColumnIds = [] } = multiSelectConfig || {};\n\n  const borderClass = cn({\n    'border border-primary-600 dark:border-blue-800': selectedColumnIds?.includes(column.id),\n    'border-b border-b-primary-300': column?.isPrimaryKey,\n    'border-b border-b-purple-300': column?.isCompositeKey,\n  });\n\n  return (\n    <Fragment>\n      <th\n        className={cn(\n          'bg-white dark:bg-black-700',\n          `${column?.sticky ? `sticky left-0 bg-neutral-50 dark:bg-black-700 right-0` : `relative`} h-row whitespace-normal max-w-lg ${lastNonStickyColIndex === headerIndex ? 'w-full' : ''} h-full gap-1 cursor-pointer`,\n          !column.static && !selectedColumnIds?.includes(column.id) && 'hover:bg-neutral-200 dark:hover:bg-black-700',\n          { 'bg-primary-100 dark:bg-primary-900': selectedColumnIds?.includes(column.id) },\n          borderClass,\n        )}\n        style={{\n          minWidth: `${column.width}px`,\n          maxWidth: `${column.width}px`,\n          right: ` ${column?.sticky ? `${nextWidthSum}px` : CELL_DEFAULT_RIGHT_OFFSET}`,\n        }}\n        role='cell'\n        onClick={(e) => multiSelectConfig?.onTableColumnClick?.(e.nativeEvent, column.id)}\n        onContextMenu={(e) => {\n          if (selectedColumnIds?.includes(column.id)) {\n            e.preventDefault();\n            setShowHeaderContextOptions?.(column.key);\n          }\n        }}\n      >\n        <div className='flex w-full px-4 gap-2 h-row justify-between items-center'>\n          <div className='flex items-center gap-2'>\n            <Prefix {...{ column, isShowSortArrowAsc, isShowSortArrowDesc }} />\n\n            {column?.isCompositeKey\n              ? tableConfig?.renderKeyIcons\n                ? tableConfig.renderKeyIcons('composite')\n                : (\n                    <Tooltip title='Composite Key'>\n                      <span className='flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1'>\n                        <VpnKeyRounded sx={{ fontSize: 14, color: '#BB5DFF' }} />\n                      </span>\n                    </Tooltip>\n                  )\n              : column?.isPrimaryKey\n                ? tableConfig?.renderKeyIcons\n                  ? tableConfig.renderKeyIcons('primary', primaryColorShades?.[400])\n                  : (\n                      <Tooltip title='Primary Key'>\n                        <span className='flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1'>\n                          <VpnKeyRounded sx={{ fontSize: 14, color: primaryColorShades?.[400] || 'var(--color-primary-400)' }} />\n                        </span>\n                      </Tooltip>\n                    )\n                : null}\n\n            <span className='text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap'>{column.render('Header')}</span>\n            {column.isSAP && tableConfig?.renderSapLabel?.()}\n            {column.is_live_field && (\n              <Tooltip title='Live Field'>\n                <span className='flex items-center'>\n                  <BoltOutlined sx={{ fontSize: 14, color: 'var(--color-primary-600)' }} />\n                </span>\n              </Tooltip>\n            )}\n            {!column.static && column?.sortable && onSort && (\n              <button className='flex items-center justify-center h-full'>\n                <KeyboardArrowDown\n                  sx={{ fontSize: 18, color: '#98A2B3', transform: showHeaderOptions === column.key ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!column.static) toggleHeaderOption(column.key);\n                  }}\n                />\n              </button>\n            )}\n          </div>\n          {!column.static && showHeaderOptions === column.key && (\n            <Options\n              headerIndex={headerIndex}\n              headerGroup={headerGroup}\n              column={column}\n              onSort={onSort}\n              toggleHeaderOption={toggleHeaderOption}\n              setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n              setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n              setShowHeaderOptions={setShowHeaderOptions}\n              toggleDataFilterModal={toggleDataFilterModal}\n              isColumnConfigurable={isColumnConfigurable}\n              onAddColumnClick={onAddColumnClick}\n              onEditColumnClick={onEditColumnClick}\n              onDeleteColumnClick={onDeleteColumnClick}\n              onFilter={onFilter}\n            />\n          )}\n          {showHeaderContextOptions === column.key\n            ? tableConfig?.renderColumnContextOptions?.({\n                onClose: () => setShowHeaderContextOptions?.(null),\n                children: headerContextOptions,\n              }) || (\n                <div className='absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]'>\n                  <div className='flex justify-end p-1 border-b border-neutral-100 dark:border-black-600'>\n                    <button\n                      type='button'\n                      className='text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1'\n                      onClick={() => setShowHeaderContextOptions?.(null)}\n                    >\n                      Close\n                    </button>\n                  </div>\n                  <div className='p-1'>{headerContextOptions}</div>\n                </div>\n              )\n            : null}\n          {showDataTypeIcon && <DataTypeIcon dataType={column?.dataType || 'string'} />}\n        </div>\n        {isResizable ? <Resizer column={column} onResizeComplete={handleUpdateColumnWidth!} /> : null}\n      </th>\n    </Fragment>\n  );\n};\n"],"names":["Cell","headerGroup","headerIndex","showHeaderOptions","column","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","isResizable","tableConfig","useTableConfig","primaryColorShades","lastNonStickyColumnIndex","setShowHeaderContextOptions","showHeaderContextOptions","getSumOfNextVisibleColumnWidth","handleUpdateColumnWidth","multiSelectConfig","headerContextOptions","showDataTypeIcon","useContext","TableContext","nextWidthSum","lastNonStickyColIndex","selectedColumnIds","borderClass","cn","Fragment","jsxs","CELL_DEFAULT_RIGHT_OFFSET","e","jsx","Prefix","Tooltip","VpnKeyRounded","BoltOutlined","KeyboardArrowDown","Options","DataTypeIcon","Resizer"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/index.tsx"],"sourcesContent":["import { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { DataTypeIcon } from '../../../../data-display/datatype-icon/DataTypeIcon';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { BoltOutlined, KeyboardArrowDown, VpnKeyRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { Fragment, useContext } from 'react';\n\nimport { TableContext } from '../../context';\nimport { Options } from './Options';\nimport { Prefix } from './Prefix';\nimport { Resizer } from './Resizer';\nimport { CELL_DEFAULT_RIGHT_OFFSET } from '../../constants';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  sticky?: boolean;\n  static?: boolean;\n  isPrimaryKey?: boolean;\n  isCompositeKey?: boolean;\n  isSAP?: boolean;\n  is_live_field?: boolean;\n  dataType?: string;\n  visible?: boolean;\n  sortable?: boolean\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface CellProps {\n  headerGroup: { getHeaderGroupProps: () => Record<string, unknown>; headers: HeaderColumn[]; [k: string]: unknown };\n  headerIndex: number;\n  showHeaderOptions: string;\n  column: HeaderColumn;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  isResizable: boolean;\n}\n\nexport const Cell = ({\n  headerGroup,\n  headerIndex,\n  showHeaderOptions,\n  column,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  isResizable,\n}: CellProps) => {\n  const tableConfig = useTableConfig();\n  const primaryColorShades = tableConfig?.getPrimaryColor?.() || {};\n  const {\n    lastNonStickyColumnIndex,\n    setShowHeaderContextOptions,\n    showHeaderContextOptions,\n    getSumOfNextVisibleColumnWidth,\n    handleUpdateColumnWidth,\n    multiSelectConfig,\n    headerContextOptions,\n    showDataTypeIcon,\n    isTableViewReadOnly,\n  } = useContext(TableContext);\n\n  const nextWidthSum = column?.sticky ? getSumOfNextVisibleColumnWidth?.(headerIndex) : 0;\n  const lastNonStickyColIndex = lastNonStickyColumnIndex?.();\n  const { selectedColumnIds = [] } = multiSelectConfig || {};\n\n  const borderClass = cn({\n    'border border-primary-600 dark:border-blue-800': selectedColumnIds?.includes(column.id),\n    'border-b border-b-primary-300': column?.isPrimaryKey,\n    'border-b border-b-purple-300': column?.isCompositeKey,\n  });\n\n  return (\n    <Fragment>\n      <th\n        className={cn(\n          'bg-white dark:bg-black-700',\n          `${column?.sticky ? `sticky left-0 bg-neutral-50 dark:bg-black-700 right-0` : `relative`} h-row whitespace-normal max-w-lg ${lastNonStickyColIndex === headerIndex ? 'w-full' : ''} h-full gap-1 cursor-pointer`,\n          !column.static && !selectedColumnIds?.includes(column.id) && 'hover:bg-neutral-200 dark:hover:bg-black-700',\n          { 'bg-primary-100 dark:bg-primary-900': selectedColumnIds?.includes(column.id) },\n          borderClass,\n        )}\n        style={{\n          minWidth: `${column.width}px`,\n          maxWidth: `${column.width}px`,\n          right: ` ${column?.sticky ? `${nextWidthSum}px` : CELL_DEFAULT_RIGHT_OFFSET}`,\n        }}\n        role='cell'\n        onClick={(e) => multiSelectConfig?.onTableColumnClick?.(e.nativeEvent, column.id)}\n        onContextMenu={(e) => {\n          if (selectedColumnIds?.includes(column.id)) {\n            e.preventDefault();\n            setShowHeaderContextOptions?.(column.key);\n          }\n        }}\n      >\n        <div className='flex w-full px-4 gap-2 h-row justify-between items-center'>\n          <div className='flex items-center gap-2'>\n            <Prefix {...{ column, isShowSortArrowAsc, isShowSortArrowDesc }} />\n\n            {column?.isCompositeKey\n              ? tableConfig?.renderKeyIcons\n                ? tableConfig.renderKeyIcons('composite')\n                : (\n                    <Tooltip title='Composite Key'>\n                      <span className='flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1'>\n                        <VpnKeyRounded sx={{ fontSize: 14, color: '#BB5DFF' }} />\n                      </span>\n                    </Tooltip>\n                  )\n              : column?.isPrimaryKey\n                ? tableConfig?.renderKeyIcons\n                  ? tableConfig.renderKeyIcons('primary', primaryColorShades?.[400])\n                  : (\n                      <Tooltip title='Primary Key'>\n                        <span className='flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1'>\n                          <VpnKeyRounded sx={{ fontSize: 14, color: primaryColorShades?.[400] || 'var(--color-primary-400)' }} />\n                        </span>\n                      </Tooltip>\n                    )\n                : null}\n\n            <span className='text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap'>{column.render('Header')}</span>\n            {column.isSAP && tableConfig?.renderSapLabel?.()}\n            {column.is_live_field && (\n              <Tooltip title='Live Field'>\n                <span className='flex items-center'>\n                  <BoltOutlined sx={{ fontSize: 14, color: 'var(--color-primary-600)' }} />\n                </span>\n              </Tooltip>\n            )}\n            {!column.static && column?.sortable && onSort && (\n              <button className='flex items-center justify-center h-full'>\n                <KeyboardArrowDown\n                  sx={{ fontSize: 18, color: '#98A2B3', transform: showHeaderOptions === column.key ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!column.static) toggleHeaderOption(column.key);\n                  }}\n                />\n              </button>\n            )}\n          </div>\n          {!column.static && showHeaderOptions === column.key && (\n            <Options\n              headerIndex={headerIndex}\n              headerGroup={headerGroup}\n              column={column}\n              onSort={onSort}\n              toggleHeaderOption={toggleHeaderOption}\n              setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n              setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n              setShowHeaderOptions={setShowHeaderOptions}\n              toggleDataFilterModal={toggleDataFilterModal}\n              isColumnConfigurable={isColumnConfigurable}\n              onAddColumnClick={onAddColumnClick}\n              onEditColumnClick={onEditColumnClick}\n              onDeleteColumnClick={onDeleteColumnClick}\n              onFilter={onFilter}\n              disabled={isTableViewReadOnly}\n            />\n          )}\n          {showHeaderContextOptions === column.key\n            ? tableConfig?.renderColumnContextOptions?.({\n                onClose: () => setShowHeaderContextOptions?.(null),\n                children: headerContextOptions,\n              }) || (\n                <div className='absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]'>\n                  <div className='flex justify-end p-1 border-b border-neutral-100 dark:border-black-600'>\n                    <button\n                      type='button'\n                      className='text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1'\n                      onClick={() => setShowHeaderContextOptions?.(null)}\n                    >\n                      Close\n                    </button>\n                  </div>\n                  <div className='p-1'>{headerContextOptions}</div>\n                </div>\n              )\n            : null}\n          {showDataTypeIcon && <DataTypeIcon dataType={column?.dataType || 'string'} />}\n        </div>\n        {isResizable ? <Resizer column={column} onResizeComplete={handleUpdateColumnWidth!} disabled={isTableViewReadOnly} /> : null}\n      </th>\n    </Fragment>\n  );\n};\n"],"names":["Cell","headerGroup","headerIndex","showHeaderOptions","column","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","isResizable","tableConfig","useTableConfig","primaryColorShades","lastNonStickyColumnIndex","setShowHeaderContextOptions","showHeaderContextOptions","getSumOfNextVisibleColumnWidth","handleUpdateColumnWidth","multiSelectConfig","headerContextOptions","showDataTypeIcon","isTableViewReadOnly","useContext","TableContext","nextWidthSum","lastNonStickyColIndex","selectedColumnIds","borderClass","cn","Fragment","jsxs","CELL_DEFAULT_RIGHT_OFFSET","e","jsx","Prefix","Tooltip","VpnKeyRounded","BoltOutlined","KeyboardArrowDown","Options","DataTypeIcon","Resizer"],"mappings":"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"}