@lax-wp/design-system 0.13.39 → 0.13.40

package/dist/components/button/IconButton.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime");require("react");const h=require("../tooltip/Tooltip.cjs.js"),g=({children:o,className:a,variant:n="default",onClick:s,disabled:r,tooltip:l,tooltipPlacement:u="top",noborder:e,id:d,type:c="button"})=>{const i="flex items-center justify-center",b={default:`bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${e?"":"border border-neutral-300 dark:border-neutral-800"} p-2 hover:opacity-80`,secondary:`bg-transparent rounded-lg ${e?"":"border border-neutral-300 dark:border-black-400"} p-2 hover:opacity-80`,native:`bg-transparent rounded-lg ${e?"":"border border-neutral-300"} p-2 hover:opacity-80`,ghost:"text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out"},p=r?"cursor-not-allowed opacity-50":"cursor-pointer";return t.jsx(h,{title:l,placement:u,delayShow:!0,children:t.jsx("button",{id:d,disabled:r,className:`${i} ${b[n]} ${a||""} ${p}`,onClick:s,type:c,children:o})})};module.exports=g;
+"use strict";const t=require("react/jsx-runtime");require("react");const p=require("../tooltip/Tooltip.cjs.js"),g=({children:o,className:a,variant:n="default",onClick:s,disabled:r,tooltip:l,tooltipPlacement:u="top",noborder:e,id:d,type:c="button"})=>{const i="flex items-center justify-center",b={default:`bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${e?"":"border border-neutral-300 dark:border-neutral-800"} h-8 w-8 hover:opacity-80`,secondary:`bg-transparent rounded-lg ${e?"":"border border-neutral-300 dark:border-black-400"} h-8 w-8 hover:opacity-80`,native:`bg-transparent rounded-lg ${e?"":"border border-neutral-300"} h-8 w-8 hover:opacity-80`,ghost:"text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out"},h=r?"cursor-not-allowed opacity-50":"cursor-pointer";return t.jsx(p,{title:l,placement:u,delayShow:!0,children:t.jsx("button",{id:d,disabled:r,className:`${i} ${b[n]} ${a||""} ${h}`,onClick:s,type:c,children:o})})};module.exports=g;
 //# sourceMappingURL=IconButton.cjs.js.map

package/dist/components/button/IconButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } p-2 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} p-2 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} p-2 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":"gHAgBMA,EAAwC,CAAC,CAC7C,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,UACV,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmB,MACnB,SAAAC,EACA,GAAAC,EACA,KAAAC,EAAO,QACT,IAAM,CACJ,MAAMC,EAAc,mCACdC,EAAiB,CACrB,QAAS,sFACPJ,EAAW,GAAK,mDAClB,wBACA,UAAW,6BAA6BA,EAAW,GAAK,iDAAiD,wBACzG,OAAQ,6BAA6BA,EAAW,GAAK,2BAA2B,wBAChF,MACE,2MAAA,EAEEK,EAAkBR,EAAW,gCAAkC,iBAErE,aACGS,EAAA,CAAQ,MAAOR,EAAS,UAAWC,EAAkB,UAAS,GAC7D,SAAAQ,EAAAA,IAAC,SAAA,CACC,GAAAN,EACA,SAAAJ,EACA,UAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,GAAa,EAAE,IAAIW,CAAe,GAC1F,QAAAT,EACA,KAAAM,EAEC,SAAAT,CAAA,CAAA,EAEL,CAEJ"}
+{"version":3,"file":"IconButton.cjs.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } h-8 w-8 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} h-8 w-8 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} h-8 w-8 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":"gHAgBMA,EAAwC,CAAC,CAC7C,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,UACV,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmB,MACnB,SAAAC,EACA,GAAAC,EACA,KAAAC,EAAO,QACT,IAAM,CACJ,MAAMC,EAAc,mCACdC,EAAiB,CACrB,QAAS,sFACPJ,EAAW,GAAK,mDAClB,4BACA,UAAW,6BAA6BA,EAAW,GAAK,iDAAiD,4BACzG,OAAQ,6BAA6BA,EAAW,GAAK,2BAA2B,4BAChF,MACE,2MAAA,EAEEK,EAAkBR,EAAW,gCAAkC,iBAErE,aACGS,EAAA,CAAQ,MAAOR,EAAS,UAAWC,EAAkB,UAAS,GAC7D,SAAAQ,EAAAA,IAAC,SAAA,CACC,GAAAN,EACA,SAAAJ,EACA,UAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,GAAa,EAAE,IAAIW,CAAe,GAC1F,QAAAT,EACA,KAAAM,EAEC,SAAAT,CAAA,CAAA,EAEL,CAEJ"}

package/dist/components/button/IconButton.es.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
-import h from "../tooltip/Tooltip.es.js";
+import p from "../tooltip/Tooltip.es.js";
 const f = ({
   children: o,
   className: a,
@@ -14,17 +14,17 @@ const f = ({
   type: c = "button"
 }) => {
   const i = "flex items-center justify-center", b = {
-    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${r ? "" : "border border-neutral-300 dark:border-neutral-800"} p-2 hover:opacity-80`,
-    secondary: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300 dark:border-black-400"} p-2 hover:opacity-80`,
-    native: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300"} p-2 hover:opacity-80`,
+    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${r ? "" : "border border-neutral-300 dark:border-neutral-800"} h-8 w-8 hover:opacity-80`,
+    secondary: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300 dark:border-black-400"} h-8 w-8 hover:opacity-80`,
+    native: `bg-transparent rounded-lg ${r ? "" : "border border-neutral-300"} h-8 w-8 hover:opacity-80`,
     ghost: "text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out"
-  }, p = e ? "cursor-not-allowed opacity-50" : "cursor-pointer";
-  return /* @__PURE__ */ t(h, { title: s, placement: u, delayShow: !0, children: /* @__PURE__ */ t(
+  }, h = e ? "cursor-not-allowed opacity-50" : "cursor-pointer";
+  return /* @__PURE__ */ t(p, { title: s, placement: u, delayShow: !0, children: /* @__PURE__ */ t(
     "button",
     {
       id: d,
       disabled: e,
-      className: `${i} ${b[n]} ${a || ""} ${p}`,
+      className: `${i} ${b[n]} ${a || ""} ${h}`,
       onClick: l,
       type: c,
       children: o

package/dist/components/button/IconButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.es.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } p-2 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} p-2 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} p-2 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":";;;AAgBA,MAAMA,IAAwC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,MAAAC,IAAO;AACT,MAAM;AACJ,QAAMC,IAAc,oCACdC,IAAiB;AAAA,IACrB,SAAS,sFACPJ,IAAW,KAAK,mDAClB;AAAA,IACA,WAAW,6BAA6BA,IAAW,KAAK,iDAAiD;AAAA,IACzG,QAAQ,6BAA6BA,IAAW,KAAK,2BAA2B;AAAA,IAChF,OACE;AAAA,EAAA,GAEEK,IAAkBR,IAAW,kCAAkC;AAErE,2BACGS,GAAA,EAAQ,OAAOR,GAAS,WAAWC,GAAkB,WAAS,IAC7D,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAN;AAAA,MACA,UAAAJ;AAAA,MACA,WAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,KAAa,EAAE,IAAIW,CAAe;AAAA,MAC1F,SAAAT;AAAA,MACA,MAAAM;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}
+{"version":3,"file":"IconButton.es.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface IconButtonProps {\n  children: ReactNode;\n  className?: string;\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;\n  variant?: 'default' | 'secondary' | 'native' | 'ghost';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n  noborder?: boolean;\n  id?: string;\n  type?: 'button' | 'submit' | 'reset';\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  children,\n  className,\n  variant = 'default',\n  onClick,\n  disabled,\n  tooltip,\n  tooltipPlacement = 'top',\n  noborder,\n  id,\n  type = 'button',\n}) => {\n  const baseClasses = 'flex items-center justify-center';\n  const variantClasses = {\n    default: `bg-white dark:bg-black-800 hover:bg-neutral-100 dark:hover:bg-black-700 rounded-lg ${\n      noborder ? '' : 'border border-neutral-300 dark:border-neutral-800'\n    } h-8 w-8 hover:opacity-80`,\n    secondary: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300 dark:border-black-400'} h-8 w-8 hover:opacity-80`,\n    native: `bg-transparent rounded-lg ${noborder ? '' : 'border border-neutral-300'} h-8 w-8 hover:opacity-80`,\n    ghost:\n      'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 p-1 cursor-pointer rounded-full hover:scale-75 transition-all duration-500 ease-in-out',\n  };\n  const disabledClasses = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n  return (\n    <Tooltip title={tooltip} placement={tooltipPlacement} delayShow>\n      <button\n        id={id}\n        disabled={disabled}\n        className={`${baseClasses} ${variantClasses[variant]} ${className || ''} ${disabledClasses}`}\n        onClick={onClick}\n        type={type}\n      >\n        {children}\n      </button>\n    </Tooltip>\n  );\n};\n\nexport default IconButton;\n"],"names":["IconButton","children","className","variant","onClick","disabled","tooltip","tooltipPlacement","noborder","id","type","baseClasses","variantClasses","disabledClasses","Tooltip","jsx"],"mappings":";;;AAgBA,MAAMA,IAAwC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,MAAAC,IAAO;AACT,MAAM;AACJ,QAAMC,IAAc,oCACdC,IAAiB;AAAA,IACrB,SAAS,sFACPJ,IAAW,KAAK,mDAClB;AAAA,IACA,WAAW,6BAA6BA,IAAW,KAAK,iDAAiD;AAAA,IACzG,QAAQ,6BAA6BA,IAAW,KAAK,2BAA2B;AAAA,IAChF,OACE;AAAA,EAAA,GAEEK,IAAkBR,IAAW,kCAAkC;AAErE,2BACGS,GAAA,EAAQ,OAAOR,GAAS,WAAWC,GAAkB,WAAS,IAC7D,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAN;AAAA,MACA,UAAAJ;AAAA,MACA,WAAW,GAAGM,CAAW,IAAIC,EAAeT,CAAO,CAAC,IAAID,KAAa,EAAE,IAAIW,CAAe;AAAA,MAC1F,SAAAT;AAAA,MACA,MAAAM;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/navigation/tabs/TabOptions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),I=require("antd"),C=require("../../../_virtual/index.cjs.js"),c=require("react"),p=require("../../button/Button.cjs.js"),l=require("../../data-display/typography/Typography.cjs.js"),S=require("../../forms/base-input-field/BaseInputField.cjs.js"),L=require("../../forms/select-field/SelectField.cjs.js"),g=require("../../forms/toggle/Toggle.cjs.js"),M=require("../../button/IconButton.cjs.js"),m=require("./types.cjs.js"),q=({fontSize:s=24})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),A=({fontSize:s=24})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=[{label:"Default",value:"default",icon:e.jsx(a.FormatListBulletedOutlined,{sx:{height:"14px",width:"14px"}})},{label:"A-Z",value:"asc",icon:e.jsx(q,{fontSize:24})},{label:"Z-A",value:"desc",icon:e.jsx(A,{fontSize:24})}],F=({savedConfig:s,onApplyFilter:f,setUnsavedChanges:y,handleTabSort:b,onSearchChange:x,hasSuffixRecord:v=!1})=>{const[w,o]=c.useState(!1),[r,d]=c.useState(m.INITIAL_TAB_OPTION_CONFIG),[i,h]=c.useState(""),n=(t,u)=>{d(T=>({...T,[t]:u}))},k=()=>{d({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),h(""),x("","contains")},N=()=>{f({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),b(r.sortOrder),y(!0),o(!1),i&&x(i,r.filterType.value)};c.useEffect(()=>{s&&JSON.stringify(s)!==JSON.stringify(r)&&d(s)},[s]);const O=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(L.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:t=>n("filterType",t),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(S.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:i,onChange:t=>h(t),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:B.map(t=>{const u=r.sortOrder===t.value;return e.jsxs(p,{appearance:"outline",status:u?"secondary":"secondary-neutral",id:`sort-option-${t.value}`,onClick:()=>n("sortOrder",t.value),className:"w-full",children:[t.icon,t.label]},t.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(g.Toggle,{isChecked:r.showCounts,onChange:t=>n("showCounts",t),hideStatus:!0,icon:{checkedIcon:e.jsx(a.RemoveRedEyeOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-primary-600 dark:text-primary-400"}),uncheckedIcon:e.jsx(a.VisibilityOffOutlined,{sx:{fontSize:12},className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.LockOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(g.Toggle,{isChecked:r.lockOrder,onChange:t=>n("lockOrder",t),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(a.LockOutlined,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs"}),uncheckedIcon:e.jsx(a.LockOpenRounded,{className:"cursor-pointer !block text-neutral-700 w-2xs h-2xs"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(p,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(p,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:N,disabled:JSON.stringify(s)===JSON.stringify(r)&&i==="",children:"Apply"})]})]});return e.jsx(I.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:O,trigger:["click"],arrow:!1,open:w,onOpenChange:o,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(M,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>o(!0),children:[e.jsx(a.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(m.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(j,{className:"text-primary-600"})]})})})},j=({className:s})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:C("absolute top-0.5 right-0.5",s),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=j;exports.TabOptions=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),I=require("antd"),C=require("../../../_virtual/index.cjs.js"),o=require("react"),x=require("../../button/Button.cjs.js"),l=require("../../data-display/typography/Typography.cjs.js"),S=require("../../forms/base-input-field/BaseInputField.cjs.js"),L=require("../../forms/select-field/SelectField.cjs.js"),m=require("../../forms/toggle/Toggle.cjs.js"),M=require("../../button/IconButton.cjs.js"),j=require("./types.cjs.js"),q=require("../../icon/icons.generated.cjs.js"),A=({fontSize:s=24,className:i})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=({fontSize:s=24,className:i})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),F=[{label:"Default",value:"default",icon:e.jsx(q.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:s,onApplyFilter:i,setUnsavedChanges:b,handleTabSort:f,onSearchChange:h,hasSuffixRecord:w=!1})=>{const[v,d]=o.useState(!1),[r,u]=o.useState(j.INITIAL_TAB_OPTION_CONFIG),[n,g]=o.useState(""),c=(t,p)=>{u(T=>({...T,[t]:p}))},N=()=>{u({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),h("","contains")},k=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),f(r.sortOrder),b(!0),d(!1),n&&h(n,r.filterType.value)};o.useEffect(()=>{s&&JSON.stringify(s)!==JSON.stringify(r)&&u(s)},[s]);const O=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(L.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:t=>c("filterType",t),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(S.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:n,onChange:t=>g(t),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:F.map(t=>{const p=r.sortOrder===t.value;return e.jsxs(x,{appearance:"outline",status:p?"secondary":"secondary-neutral",id:`sort-option-${t.value}`,onClick:()=>c("sortOrder",t.value),className:"w-full",children:[t.icon,t.label]},t.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(l.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(a.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),w&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(m.Toggle,{isChecked:r.showCounts,onChange:t=>c("showCounts",t),hideStatus:!0,icon:{checkedIcon:e.jsx(a.RemoveRedEyeOutlined,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5"}),uncheckedIcon:e.jsx(a.VisibilityOffOutlined,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(a.LockOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(l.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(l.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(m.Toggle,{isChecked:r.lockOrder,onChange:t=>c("lockOrder",t),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(a.LockOutlined,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5"}),uncheckedIcon:e.jsx(a.LockOpenRounded,{className:"cursor-pointer !block text-neutral-700 w-1.5 h-1.5"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(x,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:N,children:"Reset"}),e.jsx(x,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:k,disabled:JSON.stringify(s)===JSON.stringify(r)&&n==="",children:"Apply"})]})]});return e.jsx(I.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:O,trigger:["click"],arrow:!1,open:v,onOpenChange:d,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(M,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>d(!0),children:[e.jsx(a.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(j.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(y,{className:"text-primary-600"})]})})})},y=({className:s})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:C("absolute top-0.5 right-0.5",s),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=y;exports.TabOptions=V;
 //# sourceMappingURL=TabOptions.cjs.js.map

package/dist/components/navigation/tabs/TabOptions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  FormatListBulletedOutlined,\n  LockOpenRounded,\n  LockOutlined,\n  RemoveRedEyeOutlined,\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOffOutlined,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedOutlined sx={{ height: '14px', width: '14px' }} />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon fontSize={24} />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon fontSize={24} />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <RemoveRedEyeOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                    uncheckedIcon: <VisibilityOffOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-2xs h-2xs\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedOutlined","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","className","classNames"],"mappings":"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"}
+{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  LockOpenRounded,\n  LockOutlined,\n  RemoveRedEyeOutlined,\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOffOutlined,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <RemoveRedEyeOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n                    uncheckedIcon: <VisibilityOffOutlined className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-1.5 h-1.5\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}

package/dist/components/navigation/tabs/TabOptions.es.js

@@ -1,77 +1,78 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Search as S, SwapVertOutlined as I, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as j, RemoveRedEyeOutlined as z, LockOutlined as x, LockOpenRounded as V, Tune as A, FormatListBulletedOutlined as B } from "@mui/icons-material";
+import { Search as I, SwapVertOutlined as S, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as j, RemoveRedEyeOutlined as V, LockOutlined as g, LockOpenRounded as A, Tune as B } from "@mui/icons-material";
 import { Popover as F } from "antd";
 import H from "../../../_virtual/index.es.js";
-import { useState as p, useEffect as J } from "react";
-import u from "../../button/Button.es.js";
+import { useState as u, useEffect as J } from "react";
+import h from "../../button/Button.es.js";
 import { Typography as i } from "../../data-display/typography/Typography.es.js";
 import { BaseInputField as R } from "../../forms/base-input-field/BaseInputField.es.js";
-import { SelectField as D } from "../../forms/select-field/SelectField.es.js";
-import { Toggle as f } from "../../forms/toggle/Toggle.es.js";
-import _ from "../../button/IconButton.es.js";
-import { INITIAL_TAB_OPTION_CONFIG as g } from "./types.es.js";
-const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), E = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), W = [
+import { SelectField as z } from "../../forms/select-field/SelectField.es.js";
+import { Toggle as x } from "../../forms/toggle/Toggle.es.js";
+import D from "../../button/IconButton.es.js";
+import { INITIAL_TAB_OPTION_CONFIG as b } from "./types.es.js";
+import { FormatListBulletedIcon as _ } from "../../icon/icons.generated.es.js";
+const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), E = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), W = [
   {
     label: "Default",
     value: "default",
-    icon: /* @__PURE__ */ e(B, { sx: { height: "14px", width: "14px" } })
+    icon: /* @__PURE__ */ e(_, { className: "w-icon h-icon" })
   },
   {
     label: "A-Z",
     value: "asc",
-    icon: /* @__PURE__ */ e(P, { fontSize: 24 })
+    icon: /* @__PURE__ */ e(P, { className: "w-icon h-icon" })
   },
   {
     label: "Z-A",
     value: "desc",
-    icon: /* @__PURE__ */ e(E, { fontSize: 24 })
+    icon: /* @__PURE__ */ e(E, { className: "w-icon h-icon" })
   }
-], le = ({
+], ie = ({
   savedConfig: a,
-  onApplyFilter: b,
+  onApplyFilter: s,
   setUnsavedChanges: w,
   handleTabSort: v,
-  onSearchChange: h,
-  hasSuffixRecord: k = !1
+  onSearchChange: m,
+  hasSuffixRecord: N = !1
 }) => {
-  const [y, o] = p(!1), [l, c] = p(g), [s, m] = p(""), n = (r, d) => {
-    c((T) => ({
+  const [k, c] = u(!1), [l, d] = u(b), [n, f] = u(""), o = (r, p) => {
+    d((T) => ({
       ...T,
-      [r]: d
+      [r]: p
     }));
-  }, N = () => {
-    c({
+  }, y = () => {
+    d({
       filterType: { label: "Contains", value: "contains" },
       sortOrder: "default",
       showCounts: !0,
       lockOrder: !1
-    }), m(""), h("", "contains");
+    }), f(""), m("", "contains");
   }, O = () => {
-    b({
+    s({
       filterType: l.filterType,
       sortOrder: l.sortOrder,
       showCounts: l.showCounts,
       lockOrder: l.lockOrder
-    }), v(l.sortOrder), w(!0), o(!1), s && h(s, l.filterType.value);
+    }), v(l.sortOrder), w(!0), c(!1), n && m(n, l.filterType.value);
   };
   J(() => {
-    a && JSON.stringify(a) !== JSON.stringify(l) && c(a);
+    a && JSON.stringify(a) !== JSON.stringify(l) && d(a);
   }, [a]);
   const C = /* @__PURE__ */ t("div", { children: [
     /* @__PURE__ */ t("div", { className: "p-5 space-y-5", children: [
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
         /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
-          /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(I, { sx: { height: "14px", width: "14px" } }),
           " Filter Tabs"
         ] }),
         /* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
           /* @__PURE__ */ e(
-            D,
+            z,
             {
               showSearch: !1,
               allowClear: !1,
               value: l.filterType,
-              onChange: (r) => n("filterType", r),
+              onChange: (r) => o("filterType", r),
               options: [
                 { label: "Contains", value: "contains" },
                 { label: "Does not contain", value: "does-not-contain" }
@@ -83,8 +84,8 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
             {
               id: "base-input-field-tab-options-filter",
               placeholder: "Insert value",
-              value: s,
-              onChange: (r) => m(r),
+              value: n,
+              onChange: (r) => f(r),
               isClearable: !0
             }
           )
@@ -92,18 +93,18 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       ] }),
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
         /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
-          /* @__PURE__ */ e(I, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
           " Sort"
         ] }),
         /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: W.map((r) => {
-          const d = l.sortOrder === r.value;
+          const p = l.sortOrder === r.value;
           return /* @__PURE__ */ t(
-            u,
+            h,
             {
               appearance: "outline",
-              status: d ? "secondary" : "secondary-neutral",
+              status: p ? "secondary" : "secondary-neutral",
               id: `sort-option-${r.value}`,
-              onClick: () => n("sortOrder", r.value),
+              onClick: () => o("sortOrder", r.value),
               className: "w-full",
               children: [
                 r.icon,
@@ -119,7 +120,7 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
           /* @__PURE__ */ e(L, { sx: { height: "14px", width: "14px" } }),
           " Display Options"
         ] }),
-        k && /* @__PURE__ */ t("div", { className: "rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3", children: [
+        N && /* @__PURE__ */ t("div", { className: "rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3", children: [
           /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(M, { sx: { height: "16px", width: "16px" }, className: "text-neutral-800 dark:text-white" }) }),
             /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
@@ -128,14 +129,14 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            f,
+            x,
             {
               isChecked: l.showCounts,
-              onChange: (r) => n("showCounts", r),
+              onChange: (r) => o("showCounts", r),
               hideStatus: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(z, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-primary-600 dark:text-primary-400" }),
-                uncheckedIcon: /* @__PURE__ */ e(j, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300" })
+                checkedIcon: /* @__PURE__ */ e(V, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5" }),
+                uncheckedIcon: /* @__PURE__ */ e(j, { className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5" })
               },
               withIcon: !0
             }
@@ -143,22 +144,22 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
         ] }),
         /* @__PURE__ */ t("div", { className: "rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3", children: [
           /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(x, { sx: { height: "16px", width: "16px" }, className: "text-neutral-800 dark:text-white" }) }),
+            /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(g, { sx: { height: "16px", width: "16px" }, className: "text-neutral-800 dark:text-white" }) }),
             /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
               /* @__PURE__ */ e(i, { size: "small", variant: "medium", appearance: "title", children: "Lock Order" }),
               /* @__PURE__ */ e(i, { size: "extra-small", variant: "regular", appearance: "subtitle", children: "Prevent tab reordering" })
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            f,
+            x,
             {
               isChecked: l.lockOrder,
-              onChange: (r) => n("lockOrder", r),
+              onChange: (r) => o("lockOrder", r),
               hideStatus: !0,
               withIcon: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(x, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs" }),
-                uncheckedIcon: /* @__PURE__ */ e(V, { className: "cursor-pointer !block text-neutral-700 w-2xs h-2xs" })
+                checkedIcon: /* @__PURE__ */ e(g, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5" }),
+                uncheckedIcon: /* @__PURE__ */ e(A, { className: "cursor-pointer !block text-neutral-700 w-1.5 h-1.5" })
               }
             }
           ) })
@@ -166,16 +167,16 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       ] })
     ] }),
     /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5", children: [
-      /* @__PURE__ */ e(u, { id: "btn-tab-options-reset", appearance: "outline", status: "cancel", className: "w-full", onClick: N, children: "Reset" }),
+      /* @__PURE__ */ e(h, { id: "btn-tab-options-reset", appearance: "outline", status: "cancel", className: "w-full", onClick: y, children: "Reset" }),
       /* @__PURE__ */ e(
-        u,
+        h,
         {
           id: "btn-tab-options-apply",
           appearance: "filled",
           status: "primary",
           className: "w-full",
           onClick: O,
-          disabled: JSON.stringify(a) === JSON.stringify(l) && s === "",
+          disabled: JSON.stringify(a) === JSON.stringify(l) && n === "",
           children: "Apply"
         }
       )
@@ -191,18 +192,18 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       content: C,
       trigger: ["click"],
       arrow: !1,
-      open: y,
-      onOpenChange: o,
+      open: k,
+      onOpenChange: c,
       children: /* @__PURE__ */ e("div", { className: "border-l border-neutral-200 dark:border-neutral-800 pl-2", children: /* @__PURE__ */ t(
-        _,
+        D,
         {
           tooltip: "Manage Tabs",
           variant: "ghost",
           className: "!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",
-          onClick: () => o(!0),
+          onClick: () => c(!0),
           children: [
-            /* @__PURE__ */ e(A, { sx: { height: "20px", width: "20px" } }),
-            JSON.stringify(l) !== JSON.stringify(g) && /* @__PURE__ */ e(Z, { className: "text-primary-600" })
+            /* @__PURE__ */ e(B, { sx: { height: "20px", width: "20px" } }),
+            JSON.stringify(l) !== JSON.stringify(b) && /* @__PURE__ */ e(Z, { className: "text-primary-600" })
           ]
         }
       ) })
@@ -222,6 +223,6 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
 );
 export {
   Z as Indicator,
-  le as TabOptions
+  ie as TabOptions
 };
 //# sourceMappingURL=TabOptions.es.js.map

package/dist/components/navigation/tabs/TabOptions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  FormatListBulletedOutlined,\n  LockOpenRounded,\n  LockOutlined,\n  RemoveRedEyeOutlined,\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOffOutlined,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24 }: { fontSize?: number }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedOutlined sx={{ height: '14px', width: '14px' }} />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon fontSize={24} />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon fontSize={24} />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <RemoveRedEyeOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                    uncheckedIcon: <VisibilityOffOutlined sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-2xs h-2xs\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-2xs h-2xs\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedOutlined","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","className","classNames"],"mappings":"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"}
+{"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  LockOpenRounded,\n  LockOutlined,\n  RemoveRedEyeOutlined,\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOffOutlined,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <RemoveRedEyeOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n                    uncheckedIcon: <VisibilityOffOutlined className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n                  uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-1.5 h-1.5\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.13.39",
+  "version": "0.13.40",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",