@lax-wp/design-system 0.13.32 → 0.13.33-beta.0

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"),S=require("../../../_virtual/index.cjs.js"),c=require("react"),p=require("../../button/Button.cjs.js"),l=require("../../data-display/typography/Typography.cjs.js"),C=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"})}),z=({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"})}),A=[{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(z,{fontSize:24})}],B=({savedConfig:s,onApplyFilter:j,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=()=>{j({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(C.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:A.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,{sx:{fontSize:12},className:"cursor-pointer !block text-primary-600 dark:text-primary-400"}),uncheckedIcon:e.jsx(a.LockOpenRounded,{sx:{fontSize:12},className:"cursor-pointer !block text-neutral-700"})}})})]})]})]}),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(f,{className:"text-primary-600"})]})})})},f=({className:s})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",s),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=f;exports.TabOptions=B;
+"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;
 //# 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 sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                  uncheckedIcon: <LockOpenRounded sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700\" />,\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  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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"}

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

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Search as T, SwapVertOutlined as I, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as z, RemoveRedEyeOutlined as j, LockOutlined as f, LockOpenRounded as V, Tune as A, FormatListBulletedOutlined as B } from "@mui/icons-material";
+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 { Popover as F } from "antd";
 import H from "../../../_virtual/index.es.js";
 import { useState as p, useEffect as J } from "react";
@@ -7,7 +7,7 @@ import u 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 x } from "../../forms/toggle/Toggle.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 = [
@@ -29,14 +29,14 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
 ], le = ({
   savedConfig: a,
   onApplyFilter: b,
-  setUnsavedChanges: v,
-  handleTabSort: w,
+  setUnsavedChanges: w,
+  handleTabSort: v,
   onSearchChange: h,
   hasSuffixRecord: k = !1
 }) => {
   const [y, o] = p(!1), [l, c] = p(g), [s, m] = p(""), n = (r, d) => {
-    c((S) => ({
-      ...S,
+    c((T) => ({
+      ...T,
       [r]: d
     }));
   }, N = () => {
@@ -52,7 +52,7 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
       sortOrder: l.sortOrder,
       showCounts: l.showCounts,
       lockOrder: l.lockOrder
-    }), w(l.sortOrder), v(!0), o(!1), s && h(s, l.filterType.value);
+    }), v(l.sortOrder), w(!0), o(!1), s && h(s, l.filterType.value);
   };
   J(() => {
     a && JSON.stringify(a) !== JSON.stringify(l) && c(a);
@@ -61,7 +61,7 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
     /* @__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(T, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
           " Filter Tabs"
         ] }),
         /* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
@@ -128,14 +128,14 @@ const P = ({ fontSize: a = 24 }) => /* @__PURE__ */ e("svg", { width: a, height:
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            x,
+            f,
             {
               isChecked: l.showCounts,
               onChange: (r) => n("showCounts", r),
               hideStatus: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(j, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-primary-600 dark:text-primary-400" }),
-                uncheckedIcon: /* @__PURE__ */ e(z, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300" })
+                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" })
               },
               withIcon: !0
             }
@@ -143,22 +143,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(f, { 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(x, { 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(
-            x,
+            f,
             {
               isChecked: l.lockOrder,
               onChange: (r) => n("lockOrder", r),
               hideStatus: !0,
               withIcon: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(f, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-primary-600 dark:text-primary-400" }),
-                uncheckedIcon: /* @__PURE__ */ e(V, { sx: { fontSize: 12 }, className: "cursor-pointer !block text-neutral-700" })
+                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" })
               }
             }
           ) })

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 sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-primary-600 dark:text-primary-400\" />,\n                  uncheckedIcon: <LockOpenRounded sx={{ fontSize: 12 }} className=\"cursor-pointer !block text-neutral-700\" />,\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":";;;;;;;;;;;;AAiCA,MAAMA,IAAuB,CAAC,EAAE,UAAAC,IAAW,GAAA,MACzC,gBAAAC,EAAC,OAAA,EAAI,OAAOD,GAAU,QAAQA,GAAU,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAC5E,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,oEAAmE,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,GAClK,GAGIC,IAAqB,CAAC,EAAE,UAAAF,IAAW,GAAA,MACvC,gBAAAC,EAAC,OAAA,EAAI,OAAOD,GAAU,QAAQA,GAAU,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAC5E,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,gEAA+D,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,GAC9J,GAGIE,IAAe;AAAA,EACnB;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,wBAAOC,GAAA,EAA2B,IAAI,EAAE,QAAQ,QAAQ,OAAO,SAAO,CAAG;AAAA,EAAA;AAAA,EAE3E;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAH,EAACF,GAAA,EAAqB,UAAU,GAAA,CAAI;AAAA,EAAA;AAAA,EAE5C;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAE,EAACC,GAAA,EAAmB,UAAU,GAAA,CAAI;AAAA,EAAA;AAE5C,GAEaG,KAAa,CAAC;AAAA,EACzB,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AACpB,MAAuB;AACrB,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAAS,EAAK,GAC9D,CAACC,GAAiBC,CAAkB,IAAIF,EAA0BG,CAAyB,GAC3F,CAACC,GAAaC,CAAc,IAAIL,EAAS,EAAE,GAE3CM,IAAqB,CAAyCC,GAAQC,MAAuC;AACjH,IAAAN,EAAmB,CAACO,OAAU;AAAA,MAC5B,GAAGA;AAAA,MACH,CAACF,CAAG,GAAGC;AAAA,IAAA,EACP;AAAA,EACJ,GAEME,IAAc,MAAM;AACxB,IAAAR,EAAmB;AAAA,MACjB,YAAY,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MACxC,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA,CACZ,GACDG,EAAe,EAAE,GACjBT,EAAe,IAAI,UAAU;AAAA,EAC/B,GAEMe,IAAc,MAAM;AACxB,IAAAlB,EAAc;AAAA,MACZ,YAAYQ,EAAgB;AAAA,MAC5B,WAAWA,EAAgB;AAAA,MAC3B,YAAYA,EAAgB;AAAA,MAC5B,WAAWA,EAAgB;AAAA,IAAA,CAC5B,GACDN,EAAcM,EAAgB,SAA2B,GACzDP,EAAkB,EAAI,GACtBK,EAAuB,EAAK,GACxBK,KACFR,EAAeQ,GAAaH,EAAgB,WAAW,KAAK;AAAA,EAEhE;AAEA,EAAAW,EAAU,MAAM;AACd,IAAIpB,KAAe,KAAK,UAAUA,CAAW,MAAM,KAAK,UAAUS,CAAe,KAC/EC,EAAmBV,CAAW;AAAA,EAElC,GAAG,CAACA,CAAW,CAAC;AAEhB,QAAMqB,sBACH,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,eAAc,SAAQ,WAAU,WAAU,sDAAqD,YAAW,SACzH,UAAA;AAAA,UAAA,gBAAA5B,EAAC6B,KAAO,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,UAAE;AAAA,QAAA,GACnD;AAAA,QACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,UAAA,gBAAA3B;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,OAAOhB,EAAgB;AAAA,cACvB,UAAU,CAACO,MAAUF,EAAmB,cAAcE,CAAK;AAAA,cAC3D,SAAS;AAAA,gBACP,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,gBAC5B,EAAE,OAAO,oBAAoB,OAAO,mBAAA;AAAA,cAAmB;AAAA,YACzD;AAAA,UAAA;AAAA,UAEF,gBAAArB;AAAA,YAAC+B;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,aAAY;AAAA,cACZ,OAAOd;AAAA,cACP,UAAU,CAACI,MAAkBH,EAAeG,CAAK;AAAA,cACjD,aAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,eAAc,SAAQ,WAAU,WAAU,sDAAqD,YAAW,SACzH,UAAA;AAAA,UAAA,gBAAA5B,EAACgC,KAAiB,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,UAAE;AAAA,QAAA,GAC7D;AAAA,0BACC,OAAA,EAAI,WAAU,0BACZ,UAAA9B,EAAa,IAAI,CAAC+B,MAAW;AAC5B,gBAAMC,IAAWpB,EAAgB,cAAcmB,EAAO;AACtD,iBACE,gBAAAN;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,YAAW;AAAA,cACX,QAAQD,IAAW,cAAc;AAAA,cACjC,IAAI,eAAeD,EAAO,KAAK;AAAA,cAC/B,SAAS,MAAMd,EAAmB,aAAac,EAAO,KAAmC;AAAA,cACzF,WAAU;AAAA,cAGT,UAAA;AAAA,gBAAAA,EAAO;AAAA,gBACPA,EAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAHHA,EAAO;AAAA,UAAA;AAAA,QAMlB,CAAC,EAAA,CACH;AAAA,MAAA,GACF;AAAA,MACA,gBAAAN,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,eAAc,SAAQ,WAAU,WAAU,sDAAqD,YAAW,SACzH,UAAA;AAAA,UAAA,gBAAA5B,EAACoC,KAAmB,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,UAAE;AAAA,QAAA,GAC/D;AAAA,QACC1B,KACC,gBAAAiB,EAAC,OAAA,EAAI,WAAU,6GACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,gBAAA3B,EAAC,OAAA,EAAI,WAAU,oFACb,UAAA,gBAAAA,EAACqC,KAAY,IAAI,EAAE,QAAQ,QAAQ,OAAO,OAAA,GAAU,WAAU,oCAAmC,GACnG;AAAA,YACA,gBAAAV,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,cAAA,gBAAA3B,EAAC4B,KAAW,MAAK,SAAQ,SAAQ,UAAS,YAAW,SAAQ,UAAA,cAAA,CAE7D;AAAA,cACA,gBAAA5B,EAAC4B,KAAW,MAAK,eAAc,SAAQ,WAAU,YAAW,YAAW,UAAA,8BAAA,CAEvE;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UACA,gBAAA5B,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,YAACsC;AAAA,YAAA;AAAA,cACC,WAAWxB,EAAgB;AAAA,cAC3B,UAAU,CAACyB,MAAMpB,EAAmB,cAAcoB,CAAC;AAAA,cACnD,YAAU;AAAA,cACV,MAAM;AAAA,gBACJ,+BAAcC,GAAA,EAAqB,IAAI,EAAE,UAAU,GAAA,GAAM,WAAU,gEAA+D;AAAA,gBAClI,iCAAgBC,GAAA,EAAsB,IAAI,EAAE,UAAU,GAAA,GAAM,WAAU,+DAAA,CAA+D;AAAA,cAAA;AAAA,cAEvI,UAAQ;AAAA,YAAA;AAAA,UAAA,EACV,CACF;AAAA,QAAA,GACF;AAAA,QAEF,gBAAAd,EAAC,OAAA,EAAI,WAAU,6GACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,gBAAA3B,EAAC,OAAA,EAAI,WAAU,oFACb,UAAA,gBAAAA,EAAC0C,KAAa,IAAI,EAAE,QAAQ,QAAQ,OAAO,OAAA,GAAU,WAAU,oCAAmC,GACpG;AAAA,YACA,gBAAAf,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,cAAA,gBAAA3B,EAAC4B,KAAW,MAAK,SAAQ,SAAQ,UAAS,YAAW,SAAQ,UAAA,aAAA,CAE7D;AAAA,cACA,gBAAA5B,EAAC4B,KAAW,MAAK,eAAc,SAAQ,WAAU,YAAW,YAAW,UAAA,yBAAA,CAEvE;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UACA,gBAAA5B,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,YAACsC;AAAA,YAAA;AAAA,cACC,WAAWxB,EAAgB;AAAA,cAC3B,UAAU,CAACyB,MAAMpB,EAAmB,aAAaoB,CAAC;AAAA,cAClD,YAAU;AAAA,cACV,UAAQ;AAAA,cACR,MAAM;AAAA,gBACJ,+BAAcG,GAAA,EAAa,IAAI,EAAE,UAAU,GAAA,GAAM,WAAU,gEAA+D;AAAA,gBAC1H,iCAAgBC,GAAA,EAAgB,IAAI,EAAE,UAAU,GAAA,GAAM,WAAU,yCAAA,CAAyC;AAAA,cAAA;AAAA,YAC3G;AAAA,UAAA,EACF,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,kFACb,UAAA;AAAA,MAAA,gBAAA3B,EAACmC,GAAA,EAAO,IAAG,yBAAwB,YAAW,WAAU,QAAO,UAAS,WAAU,UAAS,SAASZ,GAAa,UAAA,SAEjH;AAAA,MACA,gBAAAvB;AAAA,QAACmC;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV,SAASX;AAAA,UACT,UAAU,KAAK,UAAUnB,CAAW,MAAM,KAAK,UAAUS,CAAe,KAAKG,MAAgB;AAAA,UAC9F,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF;AAAA,EAAA,GACF;AAGF,SACE,gBAAAjB;AAAA,IAAC4C;AAAA,IAAA;AAAA,MACC,YAAY;AAAA,QACV,MAAM;AAAA,MAAA;AAAA,MAER,WAAU;AAAA,MACV,SAAAlB;AAAA,MACA,SAAS,CAAC,OAAO;AAAA,MACjB,OAAO;AAAA,MACP,MAAMf;AAAA,MACN,cAAcC;AAAA,MAEd,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,4DACb,UAAA,gBAAA2B;AAAA,QAACkB;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAMjC,EAAuB,EAAI;AAAA,UAE1C,UAAA;AAAA,YAAA,gBAAAZ,EAAC8C,KAAK,IAAI,EAAE,QAAQ,QAAQ,OAAO,UAAU;AAAA,YAC5C,KAAK,UAAUhC,CAAe,MAAM,KAAK,UAAUE,CAAyB,KAAK,gBAAAhB,EAAC+C,GAAA,EAAU,WAAU,mBAAA,CAAmB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAC5H,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaA,IAAY,CAAC,EAAE,WAAAC,QAExB,gBAAAhD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAWiD,EAAW,8BAA8BD,CAAS;AAAA,IAE7D,UAAA,gBAAAhD,EAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,eAAA,CAAe;AAAA,EAAA;AAAA;"}
+{"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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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../_virtual/index.cjs.js"),u=require("./Children.cjs.js"),P=require("react-i18next"),T=({showCounts:g=!0,title:e,icon:p,suffixRecord:x,classValue:j,isSelected:n,selectedClassValue:v,textClassValue:N,selectedId:f,iconsOnly:h,draggingTab:m,disableAnimation:w,tabOptions:y,color:c="light",href:s,onClick:d,role:C,ariaSelected:q,tabIndex:$,onKeyDown:I})=>{const{t:K}=P.useTranslation(),l={selectedId:f,isSelected:n,selectedClassValue:v,textClassValue:N,disableAnimation:w},o={role:C,"aria-selected":q,tabIndex:$,onKeyDown:I},i=r.jsxs("div",{className:a("flex items-center text-center","opacity-100",h?"":"gap-1.5"),children:[p?r.jsx("div",{className:n?"opacity-100":`opacity-40 ${c==="dark"?"dark:opacity-100 dark:text-black-100":""}`,children:p}):null,r.jsx("div",{className:n?"opacity-100":"opacity-80",children:h?null:K(e||"")}),e!=="More..."&&x?.[e||""]!==void 0&&g?r.jsx("span",{className:a("ml-2 text-xs leading-[18px] font-normal border rounded-full pr-2 pl-2 border-1",n?a("text-primary-700 border-primary-200 dark:!border-primary-600 border-1",c==="dark"?"text-white bg-primary-700":"bg-neutral-100 dark:bg-primary-700 dark:text-white"):a("text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1",c==="dark"?"bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800":"bg-neutral-100 dark:bg-transparent")),children:String(x?.[e||""]??"0")}):null]}),b=a(j,m?"opacity-0 cursor-grabbing":"","focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none"),k=t=>{t.metaKey||t.ctrlKey||t.shiftKey||t.button!==0||(t.preventDefault(),d?.())};return y?r.jsx("div",{id:`btn-tabs-tabswitch-${e}`,className:b,...o,children:r.jsx(u.Children,{...l,children:r.jsxs("div",{className:"flex items-center gap-1",children:[s?r.jsx("a",{href:s,onClick:k,className:"contents uppercase",tabIndex:-1,children:i}):r.jsx("button",{type:"button",onClick:d,className:"contents uppercase",tabIndex:-1,children:i}),y]})})}):s?r.jsx("a",{id:`btn-tabs-tabswitch-${e}`,href:s,className:b,onClick:k,...o,children:r.jsx(u.Children,{...l,children:i})}):r.jsx("button",{id:`btn-tabs-tabswitch-${e}`,className:b,type:"button",onClick:d,...o,children:r.jsx(u.Children,{...l,children:i})})};exports.TabSwitch=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../_virtual/index.cjs.js"),u=require("./Children.cjs.js"),P=require("react-i18next"),T=({showCounts:g=!0,title:e,icon:p,suffixRecord:x,classValue:j,isSelected:n,selectedClassValue:v,textClassValue:N,selectedId:f,iconsOnly:h,draggingTab:m,disableAnimation:w,tabOptions:y,color:c="light",href:s,onClick:d,role:C,ariaSelected:q,tabIndex:$,onKeyDown:I})=>{const{t:K}=P.useTranslation(),l={selectedId:f,isSelected:n,selectedClassValue:v,textClassValue:N,disableAnimation:w},o={role:C,"aria-selected":q,tabIndex:$,onKeyDown:I},i=r.jsxs("div",{className:a("flex items-center text-center","opacity-100",h?"":"gap-1.5"),children:[p?r.jsx("div",{className:n?"opacity-100":`opacity-40 ${c==="dark"?"dark:opacity-100 dark:text-black-100":""}`,children:p}):null,r.jsx("div",{className:n?"opacity-100":"opacity-80",children:h?null:K(e||"")}),e!=="More..."&&x?.[e||""]!==void 0&&g?r.jsx("span",{className:a("ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1",n?a("text-primary-700 border-primary-200 dark:!border-primary-600 border-1",c==="dark"?"text-white bg-primary-700":"bg-neutral-100 dark:bg-primary-700 dark:text-white"):a("text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1",c==="dark"?"bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800":"bg-neutral-100 dark:bg-transparent")),children:String(x?.[e||""]??"0")}):null]}),b=a(j,m?"opacity-0 cursor-grabbing":"","focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none"),k=t=>{t.metaKey||t.ctrlKey||t.shiftKey||t.button!==0||(t.preventDefault(),d?.())};return y?r.jsx("div",{id:`btn-tabs-tabswitch-${e}`,className:b,...o,children:r.jsx(u.Children,{...l,children:r.jsxs("div",{className:"flex items-center gap-1",children:[s?r.jsx("a",{href:s,onClick:k,className:"contents uppercase",tabIndex:-1,children:i}):r.jsx("button",{type:"button",onClick:d,className:"contents uppercase",tabIndex:-1,children:i}),y]})})}):s?r.jsx("a",{id:`btn-tabs-tabswitch-${e}`,href:s,className:b,onClick:k,...o,children:r.jsx(u.Children,{...l,children:i})}):r.jsx("button",{id:`btn-tabs-tabswitch-${e}`,className:b,type:"button",onClick:d,...o,children:r.jsx(u.Children,{...l,children:i})})};exports.TabSwitch=T;
 //# sourceMappingURL=TabSwitch.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch.cjs.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n  showCounts = true,\n  title,\n  icon,\n  suffixRecord,\n  classValue,\n  isSelected,\n  selectedClassValue,\n  textClassValue,\n  selectedId,\n  iconsOnly,\n  draggingTab,\n  disableAnimation,\n  tabOptions,\n  color = 'light',\n  href,\n  onClick,\n  role,\n  ariaSelected,\n  tabIndex,\n  onKeyDown,\n}: TabSwitchProps) => {\n  const { t } = useTranslation();\n  const childrenProps = {\n    selectedId,\n    isSelected,\n    selectedClassValue,\n    textClassValue,\n    disableAnimation,\n  };\n\n  const ariaProps = {\n    role,\n    'aria-selected': ariaSelected,\n    tabIndex,\n    onKeyDown,\n  };\n\n  const text = (\n    <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n      {icon ? (\n        <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n          {icon}\n        </div>\n      ) : null}\n      <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n        {iconsOnly ? null : t(title || '')}\n      </div>\n      {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n        <span\n          className={classNames(\n            'ml-2 text-xs leading-[18px] font-normal border rounded-full pr-2 pl-2 border-1',\n            isSelected\n              ? classNames(\n                'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n                color === 'dark'\n                  ? 'text-white bg-primary-700'\n                  : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n              )\n              : classNames(\n                'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n                color === 'dark'\n                  ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n                  : 'bg-neutral-100 dark:bg-transparent',\n              ),\n          )}\n        >\n          {String(suffixRecord?.[title || ''] ?? '0')}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  const sharedClassName = classNames(\n    classValue,\n    draggingTab ? 'opacity-0 cursor-grabbing' : '',\n    'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n  );\n\n  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n    e.preventDefault();\n    onClick?.();\n  };\n\n  if (tabOptions) {\n    return (\n      <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n        <Children {...childrenProps}>\n          <div className=\"flex items-center gap-1\">\n            {href ? (\n              <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </a>\n            ) : (\n              <button type=\"button\" onClick={onClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </button>\n            )}\n            {tabOptions}\n          </div>\n        </Children>\n      </div>\n    );\n  }\n\n  if (href) {\n    return (\n      <a\n        id={`btn-tabs-tabswitch-${title}`}\n        href={href}\n        className={sharedClassName}\n        onClick={handleLinkClick}\n        {...ariaProps}\n      >\n        <Children {...childrenProps}>{text}</Children>\n      </a>\n    );\n  }\n\n  return (\n    <button\n      id={`btn-tabs-tabswitch-${title}`}\n      className={sharedClassName}\n      type='button'\n      onClick={onClick}\n      {...ariaProps}\n    >\n      <Children {...childrenProps}>{text}</Children>\n    </button>\n  );\n};\n"],"names":["TabSwitch","showCounts","title","icon","suffixRecord","classValue","isSelected","selectedClassValue","textClassValue","selectedId","iconsOnly","draggingTab","disableAnimation","tabOptions","color","href","onClick","role","ariaSelected","tabIndex","onKeyDown","t","useTranslation","childrenProps","ariaProps","text","jsxs","classNames","jsx","sharedClassName","handleLinkClick","e","Children"],"mappings":"2NAMaA,EAAY,CAAC,CACxB,WAAAC,EAAa,GACb,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EACA,QAAAC,EACA,KAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAsB,CACpB,KAAM,CAAE,EAAAC,CAAA,EAAMC,iBAAA,EACRC,EAAgB,CACpB,WAAAd,EACA,WAAAH,EACA,mBAAAC,EACA,eAAAC,EACA,iBAAAI,CAAA,EAGIY,EAAY,CAChB,KAAAP,EACA,gBAAiBC,EACjB,SAAAC,EACA,UAAAC,CAAA,EAGIK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAW,gCAA+C,cAAgCjB,EAAwB,GAAZ,SAAc,EACjI,SAAA,CAAAP,EACCyB,EAAAA,IAAC,MAAA,CAAI,UAAWtB,EAAa,cAAgB,cAAcQ,IAAU,OAAS,uCAAyC,EAAE,GACtH,SAAAX,CAAA,CACH,EACE,KACJyB,EAAAA,IAAC,MAAA,CAAI,UAAWtB,EAAa,cAAgB,aAC1C,SAAAI,EAAY,KAAOW,EAAEnB,GAAS,EAAE,CAAA,CACnC,EACCA,IAAU,WAAaE,IAAeF,GAAS,EAAE,IAAM,QAAaD,EACnE2B,EAAAA,IAAC,OAAA,CACC,UAAWD,EACT,iFACArB,EACIqB,EACA,wEACAb,IAAU,OACN,4BACA,oDAAA,EAEJa,EACA,6FACAb,IAAU,OACN,6DACA,oCAAA,CACN,EAGH,SAAA,OAAOV,IAAeF,GAAS,EAAE,GAAK,GAAG,CAAA,CAAA,EAE1C,IAAA,EACN,EAGI2B,EAAkBF,EACtBtB,EACAM,EAAc,4BAA8B,GAC5C,gFAAA,EAGImB,EAAmBC,GAAqC,CACxDA,EAAE,SAAWA,EAAE,SAAWA,EAAE,UAAYA,EAAE,SAAW,IACzDA,EAAE,eAAA,EACFf,IAAA,EACF,EAEA,OAAIH,QAEC,MAAA,CAAI,GAAI,sBAAsBX,CAAK,GAAI,UAAW2B,EAAkB,GAAGL,EACtE,eAACQ,EAAAA,SAAA,CAAU,GAAGT,EACZ,SAAAG,OAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAX,EACCa,EAAAA,IAAC,KAAE,KAAAb,EAAY,QAASe,EAAiB,UAAU,qBAAqB,SAAU,GAC/E,SAAAL,CAAA,CACH,EAEAG,EAAAA,IAAC,SAAA,CAAO,KAAK,SAAS,QAAAZ,EAAkB,UAAU,qBAAqB,SAAU,GAC9E,SAAAS,CAAA,CACH,EAEDZ,CAAA,CAAA,CACH,EACF,EACF,EAIAE,EAEAa,EAAAA,IAAC,IAAA,CACC,GAAI,sBAAsB1B,CAAK,GAC/B,KAAAa,EACA,UAAWc,EACX,QAASC,EACR,GAAGN,EAEJ,SAAAI,EAAAA,IAACI,EAAAA,SAAA,CAAU,GAAGT,EAAgB,SAAAE,CAAA,CAAK,CAAA,CAAA,EAMvCG,EAAAA,IAAC,SAAA,CACC,GAAI,sBAAsB1B,CAAK,GAC/B,UAAW2B,EACX,KAAK,SACL,QAAAb,EACC,GAAGQ,EAEJ,SAAAI,EAAAA,IAACI,EAAAA,SAAA,CAAU,GAAGT,EAAgB,SAAAE,CAAA,CAAK,CAAA,CAAA,CAGzC"}
+{"version":3,"file":"TabSwitch.cjs.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n  showCounts = true,\n  title,\n  icon,\n  suffixRecord,\n  classValue,\n  isSelected,\n  selectedClassValue,\n  textClassValue,\n  selectedId,\n  iconsOnly,\n  draggingTab,\n  disableAnimation,\n  tabOptions,\n  color = 'light',\n  href,\n  onClick,\n  role,\n  ariaSelected,\n  tabIndex,\n  onKeyDown,\n}: TabSwitchProps) => {\n  const { t } = useTranslation();\n  const childrenProps = {\n    selectedId,\n    isSelected,\n    selectedClassValue,\n    textClassValue,\n    disableAnimation,\n  };\n\n  const ariaProps = {\n    role,\n    'aria-selected': ariaSelected,\n    tabIndex,\n    onKeyDown,\n  };\n\n  const text = (\n    <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n      {icon ? (\n        <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n          {icon}\n        </div>\n      ) : null}\n      <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n        {iconsOnly ? null : t(title || '')}\n      </div>\n      {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n        <span\n          className={classNames(\n            'ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1',\n            isSelected\n              ? classNames(\n                'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n                color === 'dark'\n                  ? 'text-white bg-primary-700'\n                  : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n              )\n              : classNames(\n                'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n                color === 'dark'\n                  ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n                  : 'bg-neutral-100 dark:bg-transparent',\n              ),\n          )}\n        >\n          {String(suffixRecord?.[title || ''] ?? '0')}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  const sharedClassName = classNames(\n    classValue,\n    draggingTab ? 'opacity-0 cursor-grabbing' : '',\n    'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n  );\n\n  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n    e.preventDefault();\n    onClick?.();\n  };\n\n  if (tabOptions) {\n    return (\n      <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n        <Children {...childrenProps}>\n          <div className=\"flex items-center gap-1\">\n            {href ? (\n              <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </a>\n            ) : (\n              <button type=\"button\" onClick={onClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </button>\n            )}\n            {tabOptions}\n          </div>\n        </Children>\n      </div>\n    );\n  }\n\n  if (href) {\n    return (\n      <a\n        id={`btn-tabs-tabswitch-${title}`}\n        href={href}\n        className={sharedClassName}\n        onClick={handleLinkClick}\n        {...ariaProps}\n      >\n        <Children {...childrenProps}>{text}</Children>\n      </a>\n    );\n  }\n\n  return (\n    <button\n      id={`btn-tabs-tabswitch-${title}`}\n      className={sharedClassName}\n      type='button'\n      onClick={onClick}\n      {...ariaProps}\n    >\n      <Children {...childrenProps}>{text}</Children>\n    </button>\n  );\n};\n"],"names":["TabSwitch","showCounts","title","icon","suffixRecord","classValue","isSelected","selectedClassValue","textClassValue","selectedId","iconsOnly","draggingTab","disableAnimation","tabOptions","color","href","onClick","role","ariaSelected","tabIndex","onKeyDown","t","useTranslation","childrenProps","ariaProps","text","jsxs","classNames","jsx","sharedClassName","handleLinkClick","e","Children"],"mappings":"2NAMaA,EAAY,CAAC,CACxB,WAAAC,EAAa,GACb,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EACA,QAAAC,EACA,KAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAsB,CACpB,KAAM,CAAE,EAAAC,CAAA,EAAMC,iBAAA,EACRC,EAAgB,CACpB,WAAAd,EACA,WAAAH,EACA,mBAAAC,EACA,eAAAC,EACA,iBAAAI,CAAA,EAGIY,EAAY,CAChB,KAAAP,EACA,gBAAiBC,EACjB,SAAAC,EACA,UAAAC,CAAA,EAGIK,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAW,gCAA+C,cAAgCjB,EAAwB,GAAZ,SAAc,EACjI,SAAA,CAAAP,EACCyB,EAAAA,IAAC,MAAA,CAAI,UAAWtB,EAAa,cAAgB,cAAcQ,IAAU,OAAS,uCAAyC,EAAE,GACtH,SAAAX,CAAA,CACH,EACE,KACJyB,EAAAA,IAAC,MAAA,CAAI,UAAWtB,EAAa,cAAgB,aAC1C,SAAAI,EAAY,KAAOW,EAAEnB,GAAS,EAAE,CAAA,CACnC,EACCA,IAAU,WAAaE,IAAeF,GAAS,EAAE,IAAM,QAAaD,EACnE2B,EAAAA,IAAC,OAAA,CACC,UAAWD,EACT,4EACArB,EACIqB,EACA,wEACAb,IAAU,OACN,4BACA,oDAAA,EAEJa,EACA,6FACAb,IAAU,OACN,6DACA,oCAAA,CACN,EAGH,SAAA,OAAOV,IAAeF,GAAS,EAAE,GAAK,GAAG,CAAA,CAAA,EAE1C,IAAA,EACN,EAGI2B,EAAkBF,EACtBtB,EACAM,EAAc,4BAA8B,GAC5C,gFAAA,EAGImB,EAAmBC,GAAqC,CACxDA,EAAE,SAAWA,EAAE,SAAWA,EAAE,UAAYA,EAAE,SAAW,IACzDA,EAAE,eAAA,EACFf,IAAA,EACF,EAEA,OAAIH,QAEC,MAAA,CAAI,GAAI,sBAAsBX,CAAK,GAAI,UAAW2B,EAAkB,GAAGL,EACtE,eAACQ,EAAAA,SAAA,CAAU,GAAGT,EACZ,SAAAG,OAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAX,EACCa,EAAAA,IAAC,KAAE,KAAAb,EAAY,QAASe,EAAiB,UAAU,qBAAqB,SAAU,GAC/E,SAAAL,CAAA,CACH,EAEAG,EAAAA,IAAC,SAAA,CAAO,KAAK,SAAS,QAAAZ,EAAkB,UAAU,qBAAqB,SAAU,GAC9E,SAAAS,CAAA,CACH,EAEDZ,CAAA,CAAA,CACH,EACF,EACF,EAIAE,EAEAa,EAAAA,IAAC,IAAA,CACC,GAAI,sBAAsB1B,CAAK,GAC/B,KAAAa,EACA,UAAWc,EACX,QAASC,EACR,GAAGN,EAEJ,SAAAI,EAAAA,IAACI,EAAAA,SAAA,CAAU,GAAGT,EAAgB,SAAAE,CAAA,CAAK,CAAA,CAAA,EAMvCG,EAAAA,IAAC,SAAA,CACC,GAAI,sBAAsB1B,CAAK,GAC/B,UAAW2B,EACX,KAAK,SACL,QAAAb,EACC,GAAGQ,EAEJ,SAAAI,EAAAA,IAACI,EAAAA,SAAA,CAAU,GAAGT,EAAgB,SAAAE,CAAA,CAAK,CAAA,CAAA,CAGzC"}

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

@@ -15,7 +15,7 @@ const A = ({
   iconsOnly: h,
   draggingTab: y,
   disableAnimation: C,
-  tabOptions: x,
+  tabOptions: k,
   color: c = "light",
   href: i,
   onClick: d,
@@ -42,7 +42,7 @@ const A = ({
       "span",
       {
         className: e(
-          "ml-2 text-xs leading-[18px] font-normal border rounded-full pr-2 pl-2 border-1",
+          "ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1",
           n ? e(
             "text-primary-700 border-primary-200 dark:!border-primary-600 border-1",
             c === "dark" ? "text-white bg-primary-700" : "bg-neutral-100 dark:bg-primary-700 dark:text-white"
@@ -58,19 +58,19 @@ const A = ({
     N,
     y ? "opacity-0 cursor-grabbing" : "",
     "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none"
-  ), k = (t) => {
+  ), x = (t) => {
     t.metaKey || t.ctrlKey || t.shiftKey || t.button !== 0 || (t.preventDefault(), d?.());
   };
-  return x ? /* @__PURE__ */ r("div", { id: `btn-tabs-tabswitch-${a}`, className: b, ...o, children: /* @__PURE__ */ r(p, { ...l, children: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
-    i ? /* @__PURE__ */ r("a", { href: i, onClick: k, className: "contents uppercase", tabIndex: -1, children: s }) : /* @__PURE__ */ r("button", { type: "button", onClick: d, className: "contents uppercase", tabIndex: -1, children: s }),
-    x
+  return k ? /* @__PURE__ */ r("div", { id: `btn-tabs-tabswitch-${a}`, className: b, ...o, children: /* @__PURE__ */ r(p, { ...l, children: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
+    i ? /* @__PURE__ */ r("a", { href: i, onClick: x, className: "contents uppercase", tabIndex: -1, children: s }) : /* @__PURE__ */ r("button", { type: "button", onClick: d, className: "contents uppercase", tabIndex: -1, children: s }),
+    k
   ] }) }) }) : i ? /* @__PURE__ */ r(
     "a",
     {
       id: `btn-tabs-tabswitch-${a}`,
       href: i,
       className: b,
-      onClick: k,
+      onClick: x,
       ...o,
       children: /* @__PURE__ */ r(p, { ...l, children: s })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch.es.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n  showCounts = true,\n  title,\n  icon,\n  suffixRecord,\n  classValue,\n  isSelected,\n  selectedClassValue,\n  textClassValue,\n  selectedId,\n  iconsOnly,\n  draggingTab,\n  disableAnimation,\n  tabOptions,\n  color = 'light',\n  href,\n  onClick,\n  role,\n  ariaSelected,\n  tabIndex,\n  onKeyDown,\n}: TabSwitchProps) => {\n  const { t } = useTranslation();\n  const childrenProps = {\n    selectedId,\n    isSelected,\n    selectedClassValue,\n    textClassValue,\n    disableAnimation,\n  };\n\n  const ariaProps = {\n    role,\n    'aria-selected': ariaSelected,\n    tabIndex,\n    onKeyDown,\n  };\n\n  const text = (\n    <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n      {icon ? (\n        <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n          {icon}\n        </div>\n      ) : null}\n      <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n        {iconsOnly ? null : t(title || '')}\n      </div>\n      {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n        <span\n          className={classNames(\n            'ml-2 text-xs leading-[18px] font-normal border rounded-full pr-2 pl-2 border-1',\n            isSelected\n              ? classNames(\n                'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n                color === 'dark'\n                  ? 'text-white bg-primary-700'\n                  : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n              )\n              : classNames(\n                'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n                color === 'dark'\n                  ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n                  : 'bg-neutral-100 dark:bg-transparent',\n              ),\n          )}\n        >\n          {String(suffixRecord?.[title || ''] ?? '0')}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  const sharedClassName = classNames(\n    classValue,\n    draggingTab ? 'opacity-0 cursor-grabbing' : '',\n    'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n  );\n\n  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n    e.preventDefault();\n    onClick?.();\n  };\n\n  if (tabOptions) {\n    return (\n      <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n        <Children {...childrenProps}>\n          <div className=\"flex items-center gap-1\">\n            {href ? (\n              <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </a>\n            ) : (\n              <button type=\"button\" onClick={onClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </button>\n            )}\n            {tabOptions}\n          </div>\n        </Children>\n      </div>\n    );\n  }\n\n  if (href) {\n    return (\n      <a\n        id={`btn-tabs-tabswitch-${title}`}\n        href={href}\n        className={sharedClassName}\n        onClick={handleLinkClick}\n        {...ariaProps}\n      >\n        <Children {...childrenProps}>{text}</Children>\n      </a>\n    );\n  }\n\n  return (\n    <button\n      id={`btn-tabs-tabswitch-${title}`}\n      className={sharedClassName}\n      type='button'\n      onClick={onClick}\n      {...ariaProps}\n    >\n      <Children {...childrenProps}>{text}</Children>\n    </button>\n  );\n};\n"],"names":["TabSwitch","showCounts","title","icon","suffixRecord","classValue","isSelected","selectedClassValue","textClassValue","selectedId","iconsOnly","draggingTab","disableAnimation","tabOptions","color","href","onClick","role","ariaSelected","tabIndex","onKeyDown","t","useTranslation","childrenProps","ariaProps","text","jsxs","classNames","jsx","sharedClassName","handleLinkClick","e","Children"],"mappings":"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"}
+{"version":3,"file":"TabSwitch.es.js","sources":["../../../../src/components/navigation/tabs/TabSwitch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { MouseEvent } from 'react';\nimport { Children } from './Children';\nimport { useTranslation } from 'react-i18next'\nimport type { TabSwitchProps } from './types';\n\nexport const TabSwitch = ({\n  showCounts = true,\n  title,\n  icon,\n  suffixRecord,\n  classValue,\n  isSelected,\n  selectedClassValue,\n  textClassValue,\n  selectedId,\n  iconsOnly,\n  draggingTab,\n  disableAnimation,\n  tabOptions,\n  color = 'light',\n  href,\n  onClick,\n  role,\n  ariaSelected,\n  tabIndex,\n  onKeyDown,\n}: TabSwitchProps) => {\n  const { t } = useTranslation();\n  const childrenProps = {\n    selectedId,\n    isSelected,\n    selectedClassValue,\n    textClassValue,\n    disableAnimation,\n  };\n\n  const ariaProps = {\n    role,\n    'aria-selected': ariaSelected,\n    tabIndex,\n    onKeyDown,\n  };\n\n  const text = (\n    <div className={classNames('flex items-center text-center', draggingTab ? 'opacity-100' : 'opacity-100', !iconsOnly ? 'gap-1.5' : '')}>\n      {icon ? (\n        <div className={isSelected ? 'opacity-100' : `opacity-40 ${color === 'dark' ? 'dark:opacity-100 dark:text-black-100' : ''}`}>\n          {icon}\n        </div>\n      ) : null}\n      <div className={isSelected ? 'opacity-100' : 'opacity-80'}>\n        {iconsOnly ? null : t(title || '')}\n      </div>\n      {title !== 'More...' && suffixRecord?.[title || ''] !== undefined && showCounts ? (\n        <span\n          className={classNames(\n            'ml-2 text-xs leading-4 font-normal border rounded-full pr-2 pl-2 border-1',\n            isSelected\n              ? classNames(\n                'text-primary-700 border-primary-200 dark:!border-primary-600 border-1',\n                color === 'dark'\n                  ? 'text-white bg-primary-700'\n                  : 'bg-neutral-100 dark:bg-primary-700 dark:text-white',\n              )\n              : classNames(\n                'text-neutral-500 dark:text-neutral-400 border-neutral-300 dark:border-neutral-500 border-1',\n                color === 'dark'\n                  ? 'bg-neutral-800 dark:bg-neutral-700 dark:border-neutral-800'\n                  : 'bg-neutral-100 dark:bg-transparent',\n              ),\n          )}\n        >\n          {String(suffixRecord?.[title || ''] ?? '0')}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  const sharedClassName = classNames(\n    classValue,\n    draggingTab ? 'opacity-0 cursor-grabbing' : '',\n    'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none',\n  );\n\n  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;\n    e.preventDefault();\n    onClick?.();\n  };\n\n  if (tabOptions) {\n    return (\n      <div id={`btn-tabs-tabswitch-${title}`} className={sharedClassName} {...ariaProps}>\n        <Children {...childrenProps}>\n          <div className=\"flex items-center gap-1\">\n            {href ? (\n              <a href={href} onClick={handleLinkClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </a>\n            ) : (\n              <button type=\"button\" onClick={onClick} className=\"contents uppercase\" tabIndex={-1}>\n                {text}\n              </button>\n            )}\n            {tabOptions}\n          </div>\n        </Children>\n      </div>\n    );\n  }\n\n  if (href) {\n    return (\n      <a\n        id={`btn-tabs-tabswitch-${title}`}\n        href={href}\n        className={sharedClassName}\n        onClick={handleLinkClick}\n        {...ariaProps}\n      >\n        <Children {...childrenProps}>{text}</Children>\n      </a>\n    );\n  }\n\n  return (\n    <button\n      id={`btn-tabs-tabswitch-${title}`}\n      className={sharedClassName}\n      type='button'\n      onClick={onClick}\n      {...ariaProps}\n    >\n      <Children {...childrenProps}>{text}</Children>\n    </button>\n  );\n};\n"],"names":["TabSwitch","showCounts","title","icon","suffixRecord","classValue","isSelected","selectedClassValue","textClassValue","selectedId","iconsOnly","draggingTab","disableAnimation","tabOptions","color","href","onClick","role","ariaSelected","tabIndex","onKeyDown","t","useTranslation","childrenProps","ariaProps","text","jsxs","classNames","jsx","sharedClassName","handleLinkClick","e","Children"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("@dnd-kit/core"),ne=require("@dnd-kit/sortable"),we=require("antd"),c=require("../../../_virtual/index.cjs.js"),a=require("react"),Dt=require("react-i18next"),Je=require("@mui/icons-material/MoreHorizOutlined"),Vt=require("./types.cjs.js"),Mt=require("../../../utils/formatters.cjs.js"),Lt=require("../../../providers/design-system-provider/hooks.cjs.js"),qt=require("../../../hooks/useTextWidth.cjs.js"),Rt=require("../../button/IconButton.cjs.js"),S=require("../../buttons/option-button/OptionButton.cjs.js"),Bt=require("../../forms/search-bar/SearchBar.cjs.js"),ke=require("../../tooltip/Tooltip.cjs.js"),Ht=require("../../icons/EditIcon.cjs.js"),Ut=require("react-toastify"),ye=require("./TabSwitch.cjs.js"),k=require("../../icon/icons.generated.cjs.js"),Qe=require("./SortableTab.cjs.js"),zt=require("./DropableWrapper.cjs.js"),Wt=require("./MoreButton.cjs.js"),Pt=require("./TabOptions.cjs.js"),Ft=require("./TabDragOverlay.cjs.js"),$t=()=>Math.random().toString(16).slice(2,13),se=["[&_.ant-dropdown-menu-item]:!outline-none","[&_.ant-dropdown-menu-submenu-title]:!outline-none","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:dark:bg-black-600","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"].join(" ");let Se=null;const Te=T=>{T?(Se=document.activeElement,setTimeout(()=>{document.querySelector(".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title")?.focus()},50)):setTimeout(()=>{Se?.focus(),Se=null},0)},d={SELECT:"Select",MOVE_LEFT:"MoveLeft",MOVE_RIGHT:"MoveRight",HIDE:"Hide",UNHIDE:"Unhide",COPY_LINK:"CopyLink",DELETE:"Delete",PIN:"Pin",UNPIN:"Unpin",EDIT:"Edit"},At=({variant:T="default",tabs:O=[],activeTab:i,onTabClick:Xe,suffixRecord:P,isLoading:Ze,size:_="md",className:Ce,draggable:E=!1,showAllItems:F=!1,copyLink:Ke=!1,isDisabled:et=!1,color:ae="light",iconsOnly:tt=!1,tabIcons:oe={},height:nt="h-6",fullWidth:re=!1,fitContentWidth:st=!1,disableAnimation:at=!1,onEdit:je,onDelete:Ie,onCopyLink:Ne,allowPin:C=!1,isFullWidth:$=!1,rightSection:L,initialTabs:ot,tabConfig:rt,onTabConfigChange:ve,onTabsChange:Oe,parentContainer:it=document.body,tabKey:j,linkConfig:x,showTabOptions:lt=!0})=>{const g=Lt.useTabConfig(),_e=j?g?.getTabSettings(j):void 0,ie=ot??_e?.tab_items,A=rt??_e?.tab_options,[le,ct]=a.useState(""),[N,G]=a.useState(!1),[q,dt]=a.useState(0),[u,ce]=a.useState([]),[Y,ut]=a.useState([]),[pt,J]=a.useState(null),[D,Q]=a.useState(null),[xt,Ee]=a.useState(!1),[De,Ve]=a.useState(A??Vt.INITIAL_TAB_OPTION_CONFIG),[de,bt]=a.useState(""),[Me,mt]=a.useState("contains"),{showCounts:y,lockOrder:R,sortOrder:ue}=De,{t:p}=Dt.useTranslation(),X=a.useRef(null),ft=a.useRef(null),Le=a.useRef(q),{measureText:B}=qt.useTextWidth(),H=a.useMemo(()=>$t(),[]),ht=v.useSensors(v.useSensor(v.MouseSensor,{activationConstraint:{distance:5}}),v.useSensor(v.TouchSensor,{activationConstraint:{delay:300,tolerance:5}})),b=a.useMemo(()=>P&&Object.fromEntries(Object.entries(P).map(([e,t])=>[e,Mt.formatCount(t)])),[P]),qe=a.useMemo(()=>Y.filter(({is_hidden:e})=>!e),[Y]),V=a.useMemo(()=>Y.filter(({is_hidden:e})=>e),[Y]),Re=a.useMemo(()=>qe.filter(({name:e})=>{if(!de)return!0;const t=(e??"").toLowerCase(),s=de.toLowerCase();return Me==="contains"?t.includes(s):!t.includes(s)}),[qe,de,Me]),r=a.useMemo(()=>[...Re].sort((e,t)=>e.is_pinned&&!t.is_pinned?-1:!e.is_pinned&&t.is_pinned?1:0),[Re]),gt=q<r.length,Z=F?r.length:gt?q:r.length,Be=r.findIndex(e=>e.name===i)>=Z,He=u.length-Z-(Be?1:0);Le.current=q;const U=a.useCallback(e=>{ce(e),Oe?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_items:e})},[Oe,j,g]),wt=a.useCallback(e=>{Ve(e),ve?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_options:e})},[ve,j,g]),Ue=e=>e.is_pinned?32:0,pe=a.useCallback(e=>{if(!e)return;const t=E?30:0,s=y?190:84,l=_==="sm"?4:8,o=32;let m=0,ee=0,w=0;const f=e-(L?.width||0)-t,Fe=Le.current,$e=Fe<r.length,Ae=V.length>0;for(let h=0;h<r.length;h++){const I=r[h],te=b?.[I.name]?String(b?.[I.name]):"",fe=y&&te?B(te,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,he=B(I?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),ge=C?Ue(I):0,Ye=he+fe+o+l+ge;if(I.name===i&&(ee=Ye),m+=Ye,f>m+($e||Ae?s:0)+h*25)w=h+1;else break}const Ge=r.length-w;if(Ge+V.length===1&&V.length===0&&Ge===1&&w<r.length){const h=r[w];if(h){const I=b?.[h.name]?String(b?.[h.name]):"",te=y&&I?B(I,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,fe=B(h?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),he=C?Ue(h):0,ge=fe+te+o+l+he;f>=m+ge&&(w+=1)}}const Et=F?r.length:w;r.findIndex(h=>h.name===i)>=Et&&(m+=ee,f<m+($e||Ae?s:0)&&(w=Math.max(w-1,0))),w!==Fe&&dt(w)},[r,y,F,C,b,L?.width,i,_,E,V.length,B]),xe=a.useCallback(()=>{if(typeof window<"u")return new URLSearchParams(window.location.search);if(x&&g?.getSearchParam){const e=new URLSearchParams,t=g.getSearchParam(x.key);return t&&e.set(x.key,t),e}return new URLSearchParams},[x,g]),be=a.useCallback((e,t)=>(x&&(t===x.defaultLink?e.delete(x.key):e.set(x.key,t),x.onResolve?.(e)),e),[x]),z=a.useCallback(e=>x?`?${be(xe(),e).toString()}`:void 0,[be,xe,x]),kt=Ke||!!x,yt=a.useCallback(async e=>{const t=z(e),s=typeof window<"u"?window.location.origin:"",l=typeof window<"u"?window.location.pathname:"",o=t?`${s}${l}${t}`:`${s}${l}`;await navigator.clipboard.writeText(o),Ut.toast.success(p("Link copied to clipboard"),{toastId:"Link copied to clipboard"}),Ne?.(e,o)},[z,p,Ne]),W=e=>{if(G(!1),Xe?.(e),x&&g?.navigate){const t=be(xe(),e);g.navigate(`?${t.toString()}`)}},ze=e=>{if(r.length<=1)return;const t=u.map(o=>o.name===e?{...o,is_hidden:!0}:o),s=r.findIndex(o=>o.name===e),l=s===0?1:s-1;W(r[l].name),U(t)},St=e=>{const t=u.map(s=>s.name===e?{...s,is_hidden:!1}:s);G(!1),U(t)},K=e=>{if(!C)return;const t=u.map(s=>s.name===e?{...s,is_pinned:!s.is_pinned}:s);U(t)},We=(e,t)=>{const s=u.findIndex(({name:o})=>o===e),l=t==="left"?s-(u[s-1]?.name===i?2:1):s+1;U(ne.arrayMove(u,s,l))},Pe=()=>G(!N),Tt=e=>Q(e.active.id),Ct=e=>{const{active:t,over:s}=e;if(s?.id==="more-tabs"){ze(t.id),Q(null),J(null);return}const l=u.findIndex(({name:m})=>m===t.id),o=u.findIndex(({name:m})=>m===s?.id);U(ne.arrayMove(u,l,o)),Q(null),J(null)},jt=()=>{Q(null),J(null)},It=e=>{J(e.over?.id==="more-tabs"?"more-tabs":null)},Nt=()=>{},vt=(e,t)=>{bt(e),mt(t)},me=(e,t=!1,s=!1)=>{const o=u.find(f=>f.name===e)?.is_pinned,m=[{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowOutwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Select Tab"),className:"text-black-900 dark:text-white"}),key:d.SELECT,onClick:()=>W(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowUpwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Up"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_LEFT,disabled:R,onClick:()=>We(e,"left")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowDownwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Down"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_RIGHT,disabled:R,onClick:()=>We(e,"right")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ContentCopyIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Copy Link"),className:"text-black-900 dark:text-white"}),key:d.COPY_LINK,onClick:()=>yt(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityOffIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Hide"),className:"text-black-900 dark:text-white"}),key:d.HIDE,onClick:()=>ze(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Unhide"),className:"text-black-900 dark:text-white"}),key:d.UNHIDE,onClick:()=>St(e)},{label:n.jsx(S.OptionButton,{icon:o?n.jsx(k.UnpinFilledIcon,{size:20,className:"rotate-12 text-inherit dark:text-inherit"}):n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"}),text:p(o?"Unpin":"Pin"),className:"text-black-900 dark:text-white",notVisible:!C}),key:o?d.UNPIN:d.PIN,onClick:()=>K(e)},{label:n.jsx(S.OptionButton,{className:"text-black-900 dark:text-white",icon:n.jsx(Ht.EditIcon,{}),text:p("Edit"),notVisible:!je}),key:d.EDIT,onClick:()=>je?.(e)},{label:n.jsx(S.OptionButton,{className:"text-error-600 dark:text-error-600",icon:n.jsx(k.DeleteIcon,{size:18,className:"text-error-600 dark:text-error-600"}),text:p("Delete"),notVisible:!Ie}),key:d.DELETE,onClick:()=>Ie?.(e)}],ee=[d.HIDE,d.UNHIDE],w=[d.SELECT,d.MOVE_LEFT,d.MOVE_RIGHT,d.UNHIDE];return m.filter(f=>t?f.key===d.UNHIDE:s?!ee.includes(f.key):!w.includes(f.key)).filter(f=>kt?!0:f.key!==d.COPY_LINK).filter(f=>r.length===1?f.key!==d.HIDE:!0)},M=(e,t)=>({classValue:{default:c("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),secondary:c("flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",_==="sm"?"py-1 px-3 text-sm":"py-2 px-4 text-base")},selectedClassValue:{default:c("absolute left-0 bottom-0 w-full h-[3px] bg-primary-600"),secondary:c("absolute inset-0 bg-primary-50 dark:bg-primary-975 rounded-lg")},textClassValue:{default:c("relative uppercase font-sans font-semibold text-sm whitespace-nowrap",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 hover:text-neutral-500 dark:text-neutral-100 dark:hover:text-white"),secondary:c("relative whitespace-nowrap text-sm",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 dark:text-neutral-400")}})[e][T];a.useEffect(()=>{if(!X.current||T==="switch")return;const e=new ResizeObserver(t=>{const s=t[0].contentRect.width;pe(s)});return e.observe(X.current),pe(X.current.clientWidth),()=>e.disconnect()},[pe,T]);const Ot=JSON.stringify(O),_t=JSON.stringify(ie?.map(({name:e})=>e));return a.useEffect(()=>{if(ie?.length){let e=[...ie];O.forEach(t=>{e.find(s=>s.name===t)||e.push({name:t,is_default:!1,is_hidden:!1,is_pinned:!1})}),e=e.filter((t,s,l)=>O.includes(t.name)&&s===l.findIndex(o=>o.name===t.name)),ce(e)}else ce(O.map(e=>({name:e,is_default:!1,is_hidden:!1,is_pinned:!1})).filter((e,t,s)=>t===s.findIndex(l=>l.name===e.name)))},[Ot,_t]),a.useEffect(()=>{A&&Ve(A)},[A]),a.useEffect(()=>{if(!u.length)return;const e=[...u];ue==="asc"?e.sort((t,s)=>t.name.localeCompare(s.name)):ue==="desc"&&e.sort((t,s)=>s.name.localeCompare(t.name)),ut(e)},[u,ue]),a.useEffect(()=>{Te(N)},[N]),T==="switch"?n.jsx("div",{className:c("inline",Ce),children:n.jsx("ul",{role:"tablist","aria-orientation":"horizontal",className:c("inline-flex grow-0 p-1 rounded-lg",ae==="dark"?"border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800":"bg-neutral-100 dark:bg-black-700",re?"w-full":"w-auto"),children:O.map(e=>{const t=i===e,s=oe?.[e],l=u.find(m=>m.name===e),o=C&&l?.is_pinned;return n.jsx("li",{role:"presentation",className:c("inline-flex",re?"w-full":"w-auto"),children:n.jsx(ye.TabSwitch,{title:e,showCounts:y,role:"tab",ariaSelected:t,tabIndex:0,icon:o?n.jsx(ke,{title:"Unpin",children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):s,iconsOnly:tt,classValue:c("relative py-0.5 border-gray-200",nt,re?"w-full flex items-center justify-center":"px-3"),selectedClassValue:c("absolute inset-0 rounded-md z-0",ae==="dark"?"bg-neutral-900":"bg-white dark:bg-black-800"),textClassValue:c("relative text-xs font-semibold font-sans whitespace-nowrap",t?"text-neutral-900 dark:text-neutral-100":"text-neutral-700 dark:text-neutral-100"),isSelected:t,href:z(e),onClick:et?void 0:()=>W(e),suffixRecord:b,selectedId:H,color:ae,disableAnimation:at})},e)})})}):n.jsx("div",{ref:X,className:c(st?"w-fit":"w-full"),onMouseEnter:()=>Ee(!0),onMouseLeave:()=>Ee(!1),children:n.jsxs(v.DndContext,{sensors:ht,onDragEnd:Ct,onDragStart:Tt,onDragCancel:jt,collisionDetection:v.closestCenter,onDragOver:It,children:[n.jsxs("ul",{role:"tablist","aria-orientation":"horizontal",className:c("flex items-center w-full",Ce,$?"gap-0":_==="sm"?"gap-1":"gap-2"),ref:ft,children:[Ze?n.jsx("div",{className:"skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded"}):n.jsxs(ne.SortableContext,{items:r.map(({name:e})=>e),strategy:ne.horizontalListSortingStrategy,id:"sortable",disabled:!E||R,children:[r.slice(0,Z).map(({name:e,is_pinned:t})=>{const s=i===e&&!N,l=C&&t;return n.jsx(Qe.SortableTab,{title:e,isDragging:D===e,className:$?"flex-1 flex justify-center":"",children:n.jsx("li",{role:"presentation",className:c($?"w-full flex":"sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:e,role:"tab",ariaSelected:s,tabIndex:0,classValue:c(M("classValue",s),$?"w-full justify-center":""),selectedClassValue:M("selectedClassValue",s),textClassValue:M("textClassValue",s),isSelected:s,tabOptions:s&&E?n.jsx(we.Dropdown,{menu:{items:me(e),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Rt,{tooltip:p("More"),variant:"ghost",className:"!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",children:n.jsx(Je,{sx:{fontSize:20}})})}):null,draggingTab:D===e,href:z(e),onClick:()=>W(e),suffixRecord:b,selectedId:H,icon:l?n.jsx(ke,{title:p("Unpin"),children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[e]??null})},e)},e)}),i&&Be?n.jsx(Qe.SortableTab,{title:i,isDragging:D===i,children:n.jsx("li",{role:"presentation",className:c("sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:i,role:"tab",ariaSelected:!0,tabIndex:0,classValue:M("classValue",!0),selectedClassValue:M("selectedClassValue",!0),textClassValue:M("textClassValue",!0),isSelected:!0,tabOptions:E?n.jsx(we.Dropdown,{menu:{items:me(i),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Je,{sx:{fontSize:20},className:"text-primary-600"})}):null,draggingTab:D===i,href:z(i),suffixRecord:b,selectedId:H,icon:C&&u.find(e=>e.name===i)?.is_pinned?n.jsx(ke,{title:p("Pinned"),children:n.jsx("span",{onClick:()=>K(i),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[i]??null})},i)},i):null,(q<r.length&&!F||V.length>0)&&He>0?n.jsx(zt.DropableWrapper,{id:"more-tabs",children:n.jsx(we.Dropdown,{overlayStyle:{maxHeight:"calc(100vh - 350px)",overflow:"auto",marginTop:"8px",scrollbarWidth:"none",borderRadius:8,boxShadow:"0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"},onOpenChange:()=>Pe(),open:N,menu:{items:[{key:"Search",disabled:!0,style:{minWidth:"190px",marginBottom:"8px"},label:n.jsx("div",{className:"px-2 bg-white dark:bg-black-800",children:n.jsx(Bt.SearchBar,{id:"search-bar-more-tabs",value:le,classValues:"!rounded-lg",onChange:e=>ct(e)})})},...r.slice(Z).filter(e=>e.name!==i).concat(V).filter(({name:e})=>typeof e=="string"&&(e??"").toLowerCase().includes(le.toLowerCase())).map(({name:e,is_hidden:t})=>({key:e,label:n.jsx(S.OptionButton,{className:c("uppercase",t?"text-neutral-400 dark:text-neutral-500":"text-black-900 dark:text-black-200"),text:e,suffixRecord:y?b:{},highlight:le,truncateText:!0,isDisabled:t,onClick:t?void 0:()=>{W(e),G(!1)}}),popupClassName:se,children:N?me(e,t,!0):null}))],className:se},openClassName:"max-h-[350px] overflow-y-auto",trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",getPopupContainer:e=>e.parentElement,children:n.jsx(Wt.MoreButton,{title:`${y?He:""} MORE...`,variant:T,size:_,draggingOver:pt,suffixRecord:b,handleShowMoreDropdown:Pe,selectedId:H,showMoreDropdown:N})})}):null]}),L?n.jsx("div",{className:c(L?.className),children:n.jsx("li",{children:L.component})}):null,E&&lt&&n.jsx("li",{className:c(xt?"opacity-100":"opacity-0","transition-opacity duration-300"),children:n.jsx(Pt.TabOptions,{hasSuffixRecord:!!(b&&Object.keys(b).length>0),savedConfig:De,onApplyFilter:e=>wt(e),setUnsavedChanges:()=>{},handleTabSort:Nt,onSearchChange:vt})})]}),D?n.jsx(Ft.TabDragOverlay,{draggingTab:D,suffixRecord:b,size:_,variant:T,selectedId:H,parentContainer:it}):null]})})};exports.Tabs=At;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("@dnd-kit/core"),ne=require("@dnd-kit/sortable"),we=require("antd"),c=require("../../../_virtual/index.cjs.js"),a=require("react"),Dt=require("react-i18next"),Je=require("@mui/icons-material/MoreHorizOutlined"),Vt=require("./types.cjs.js"),Mt=require("../../../utils/formatters.cjs.js"),Lt=require("../../../providers/design-system-provider/hooks.cjs.js"),qt=require("../../../hooks/useTextWidth.cjs.js"),Rt=require("../../button/IconButton.cjs.js"),S=require("../../buttons/option-button/OptionButton.cjs.js"),Bt=require("../../forms/search-bar/SearchBar.cjs.js"),ke=require("../../tooltip/Tooltip.cjs.js"),Ht=require("../../icons/EditIcon.cjs.js"),Ut=require("react-toastify"),ye=require("./TabSwitch.cjs.js"),k=require("../../icon/icons.generated.cjs.js"),Qe=require("./SortableTab.cjs.js"),zt=require("./DropableWrapper.cjs.js"),Wt=require("./MoreButton.cjs.js"),Pt=require("./TabOptions.cjs.js"),Ft=require("./TabDragOverlay.cjs.js"),$t=()=>Math.random().toString(16).slice(2,13),se=["[&_.ant-dropdown-menu-item]:!outline-none","[&_.ant-dropdown-menu-submenu-title]:!outline-none","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:dark:bg-black-600","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"].join(" ");let Se=null;const Te=T=>{T?(Se=document.activeElement,setTimeout(()=>{document.querySelector(".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title")?.focus()},50)):setTimeout(()=>{Se?.focus(),Se=null},0)},d={SELECT:"Select",MOVE_LEFT:"MoveLeft",MOVE_RIGHT:"MoveRight",HIDE:"Hide",UNHIDE:"Unhide",COPY_LINK:"CopyLink",DELETE:"Delete",PIN:"Pin",UNPIN:"Unpin",EDIT:"Edit"},At=({variant:T="default",tabs:O=[],activeTab:i,onTabClick:Xe,suffixRecord:P,isLoading:Ze,size:_="md",className:Ce,draggable:E=!1,showAllItems:F=!1,copyLink:Ke=!1,isDisabled:et=!1,color:ae="light",iconsOnly:tt=!1,tabIcons:oe={},height:nt="h-6",fullWidth:re=!1,fitContentWidth:st=!1,disableAnimation:at=!1,onEdit:je,onDelete:Ie,onCopyLink:Ne,allowPin:C=!1,isFullWidth:$=!1,rightSection:L,initialTabs:ot,tabConfig:rt,onTabConfigChange:ve,onTabsChange:Oe,parentContainer:it=document.body,tabKey:j,linkConfig:x,showTabOptions:lt=!0})=>{const g=Lt.useTabConfig(),_e=j?g?.getTabSettings(j):void 0,ie=ot??_e?.tab_items,A=rt??_e?.tab_options,[le,ct]=a.useState(""),[N,G]=a.useState(!1),[q,dt]=a.useState(0),[u,ce]=a.useState([]),[Y,ut]=a.useState([]),[pt,J]=a.useState(null),[D,Q]=a.useState(null),[xt,Ee]=a.useState(!1),[De,Ve]=a.useState(A??Vt.INITIAL_TAB_OPTION_CONFIG),[de,bt]=a.useState(""),[Me,mt]=a.useState("contains"),{showCounts:y,lockOrder:R,sortOrder:ue}=De,{t:p}=Dt.useTranslation(),X=a.useRef(null),ft=a.useRef(null),Le=a.useRef(q),{measureText:B}=qt.useTextWidth(),H=a.useMemo(()=>$t(),[]),ht=v.useSensors(v.useSensor(v.MouseSensor,{activationConstraint:{distance:5}}),v.useSensor(v.TouchSensor,{activationConstraint:{delay:300,tolerance:5}})),b=a.useMemo(()=>P&&Object.fromEntries(Object.entries(P).map(([e,t])=>[e,Mt.formatCount(t)])),[P]),qe=a.useMemo(()=>Y.filter(({is_hidden:e})=>!e),[Y]),V=a.useMemo(()=>Y.filter(({is_hidden:e})=>e),[Y]),Re=a.useMemo(()=>qe.filter(({name:e})=>{if(!de)return!0;const t=(e??"").toLowerCase(),s=de.toLowerCase();return Me==="contains"?t.includes(s):!t.includes(s)}),[qe,de,Me]),r=a.useMemo(()=>[...Re].sort((e,t)=>e.is_pinned&&!t.is_pinned?-1:!e.is_pinned&&t.is_pinned?1:0),[Re]),gt=q<r.length,Z=F?r.length:gt?q:r.length,Be=r.findIndex(e=>e.name===i)>=Z,He=u.length-Z-(Be?1:0);Le.current=q;const U=a.useCallback(e=>{ce(e),Oe?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_items:e})},[Oe,j,g]),wt=a.useCallback(e=>{Ve(e),ve?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_options:e})},[ve,j,g]),Ue=e=>e.is_pinned?32:0,pe=a.useCallback(e=>{if(!e)return;const t=E?30:0,s=y?190:84,l=_==="sm"?4:8,o=32;let m=0,ee=0,w=0;const f=e-(L?.width||0)-t,Fe=Le.current,$e=Fe<r.length,Ae=V.length>0;for(let h=0;h<r.length;h++){const I=r[h],te=b?.[I.name]?String(b?.[I.name]):"",fe=y&&te?B(te,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,he=B(I?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),ge=C?Ue(I):0,Ye=he+fe+o+l+ge;if(I.name===i&&(ee=Ye),m+=Ye,f>m+($e||Ae?s:0)+h*25)w=h+1;else break}const Ge=r.length-w;if(Ge+V.length===1&&V.length===0&&Ge===1&&w<r.length){const h=r[w];if(h){const I=b?.[h.name]?String(b?.[h.name]):"",te=y&&I?B(I,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,fe=B(h?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),he=C?Ue(h):0,ge=fe+te+o+l+he;f>=m+ge&&(w+=1)}}const Et=F?r.length:w;r.findIndex(h=>h.name===i)>=Et&&(m+=ee,f<m+($e||Ae?s:0)&&(w=Math.max(w-1,0))),w!==Fe&&dt(w)},[r,y,F,C,b,L?.width,i,_,E,V.length,B]),xe=a.useCallback(()=>{if(typeof window<"u")return new URLSearchParams(window.location.search);if(x&&g?.getSearchParam){const e=new URLSearchParams,t=g.getSearchParam(x.key);return t&&e.set(x.key,t),e}return new URLSearchParams},[x,g]),be=a.useCallback((e,t)=>(x&&(t===x.defaultLink?e.delete(x.key):e.set(x.key,t),x.onResolve?.(e)),e),[x]),z=a.useCallback(e=>x?`?${be(xe(),e).toString()}`:void 0,[be,xe,x]),kt=Ke||!!x,yt=a.useCallback(async e=>{const t=z(e),s=typeof window<"u"?window.location.origin:"",l=typeof window<"u"?window.location.pathname:"",o=t?`${s}${l}${t}`:`${s}${l}`;await navigator.clipboard.writeText(o),Ut.toast.success(p("Link copied to clipboard"),{toastId:"Link copied to clipboard"}),Ne?.(e,o)},[z,p,Ne]),W=e=>{if(G(!1),Xe?.(e),x&&g?.navigate){const t=be(xe(),e);g.navigate(`?${t.toString()}`)}},ze=e=>{if(r.length<=1)return;const t=u.map(o=>o.name===e?{...o,is_hidden:!0}:o),s=r.findIndex(o=>o.name===e),l=s===0?1:s-1;W(r[l].name),U(t)},St=e=>{const t=u.map(s=>s.name===e?{...s,is_hidden:!1}:s);G(!1),U(t)},K=e=>{if(!C)return;const t=u.map(s=>s.name===e?{...s,is_pinned:!s.is_pinned}:s);U(t)},We=(e,t)=>{const s=u.findIndex(({name:o})=>o===e),l=t==="left"?s-(u[s-1]?.name===i?2:1):s+1;U(ne.arrayMove(u,s,l))},Pe=()=>G(!N),Tt=e=>Q(e.active.id),Ct=e=>{const{active:t,over:s}=e;if(s?.id==="more-tabs"){ze(t.id),Q(null),J(null);return}const l=u.findIndex(({name:m})=>m===t.id),o=u.findIndex(({name:m})=>m===s?.id);U(ne.arrayMove(u,l,o)),Q(null),J(null)},jt=()=>{Q(null),J(null)},It=e=>{J(e.over?.id==="more-tabs"?"more-tabs":null)},Nt=()=>{},vt=(e,t)=>{bt(e),mt(t)},me=(e,t=!1,s=!1)=>{const o=u.find(f=>f.name===e)?.is_pinned,m=[{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowOutwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Select Tab"),className:"text-black-900 dark:text-white"}),key:d.SELECT,onClick:()=>W(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowUpwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Up"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_LEFT,disabled:R,onClick:()=>We(e,"left")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowDownwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Down"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_RIGHT,disabled:R,onClick:()=>We(e,"right")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ContentCopyIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Copy Link"),className:"text-black-900 dark:text-white"}),key:d.COPY_LINK,onClick:()=>yt(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityOffIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Hide"),className:"text-black-900 dark:text-white"}),key:d.HIDE,onClick:()=>ze(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Unhide"),className:"text-black-900 dark:text-white"}),key:d.UNHIDE,onClick:()=>St(e)},{label:n.jsx(S.OptionButton,{icon:o?n.jsx(k.UnpinFilledIcon,{size:20,className:"rotate-12 text-inherit dark:text-inherit"}):n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"}),text:p(o?"Unpin":"Pin"),className:"text-black-900 dark:text-white",notVisible:!C}),key:o?d.UNPIN:d.PIN,onClick:()=>K(e)},{label:n.jsx(S.OptionButton,{className:"text-black-900 dark:text-white",icon:n.jsx(Ht.EditIcon,{}),text:p("Edit"),notVisible:!je}),key:d.EDIT,onClick:()=>je?.(e)},{label:n.jsx(S.OptionButton,{className:"text-error-600 dark:text-error-600",icon:n.jsx(k.DeleteIcon,{size:18,className:"text-error-600 dark:text-error-600"}),text:p("Delete"),notVisible:!Ie}),key:d.DELETE,onClick:()=>Ie?.(e)}],ee=[d.HIDE,d.UNHIDE],w=[d.SELECT,d.MOVE_LEFT,d.MOVE_RIGHT,d.UNHIDE];return m.filter(f=>t?f.key===d.UNHIDE:s?!ee.includes(f.key):!w.includes(f.key)).filter(f=>kt?!0:f.key!==d.COPY_LINK).filter(f=>r.length===1?f.key!==d.HIDE:!0)},M=(e,t)=>({classValue:{default:c("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),secondary:c("flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",_==="sm"?"py-1 px-3 text-sm":"py-2 px-4 text-base")},selectedClassValue:{default:c("absolute left-0 bottom-0 w-full h-[3px] bg-primary-600"),secondary:c("absolute inset-0 bg-primary-50 dark:bg-primary-975 rounded-lg")},textClassValue:{default:c("relative uppercase font-sans font-semibold text-sm whitespace-nowrap",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 hover:text-neutral-500 dark:text-neutral-100 dark:hover:text-white"),secondary:c("relative whitespace-nowrap text-sm",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 dark:text-neutral-400")}})[e][T];a.useEffect(()=>{if(!X.current||T==="switch")return;const e=new ResizeObserver(t=>{const s=t[0].contentRect.width;pe(s)});return e.observe(X.current),pe(X.current.clientWidth),()=>e.disconnect()},[pe,T]);const Ot=JSON.stringify(O),_t=JSON.stringify(ie?.map(({name:e})=>e));return a.useEffect(()=>{if(ie?.length){let e=[...ie];O.forEach(t=>{e.find(s=>s.name===t)||e.push({name:t,is_default:!1,is_hidden:!1,is_pinned:!1})}),e=e.filter((t,s,l)=>O.includes(t.name)&&s===l.findIndex(o=>o.name===t.name)),ce(e)}else ce(O.map(e=>({name:e,is_default:!1,is_hidden:!1,is_pinned:!1})).filter((e,t,s)=>t===s.findIndex(l=>l.name===e.name)))},[Ot,_t]),a.useEffect(()=>{A&&Ve(A)},[A]),a.useEffect(()=>{if(!u.length)return;const e=[...u];ue==="asc"?e.sort((t,s)=>t.name.localeCompare(s.name)):ue==="desc"&&e.sort((t,s)=>s.name.localeCompare(t.name)),ut(e)},[u,ue]),a.useEffect(()=>{Te(N)},[N]),T==="switch"?n.jsx("div",{className:c("inline",Ce),children:n.jsx("ul",{role:"tablist","aria-orientation":"horizontal",className:c("inline-flex grow-0 p-1 rounded-lg",ae==="dark"?"border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800":"bg-neutral-100 dark:bg-black-700",re?"w-full":"w-auto"),children:O.map(e=>{const t=i===e,s=oe?.[e],l=u.find(m=>m.name===e),o=C&&l?.is_pinned;return n.jsx("li",{role:"presentation",className:c("inline-flex",re?"w-full":"w-auto"),children:n.jsx(ye.TabSwitch,{title:e,showCounts:y,role:"tab",ariaSelected:t,tabIndex:0,icon:o?n.jsx(ke,{title:"Unpin",children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):s,iconsOnly:tt,classValue:c("relative py-0.5 border-gray-200",nt,re?"w-full flex items-center justify-center":"px-2"),selectedClassValue:c("absolute inset-0 rounded-md z-0",ae==="dark"?"bg-neutral-900":"bg-white dark:bg-black-800"),textClassValue:c("relative text-xs font-semibold font-sans whitespace-nowrap",t?"text-neutral-900 dark:text-neutral-100":"text-neutral-700 dark:text-neutral-100"),isSelected:t,href:z(e),onClick:et?void 0:()=>W(e),suffixRecord:b,selectedId:H,color:ae,disableAnimation:at})},e)})})}):n.jsx("div",{ref:X,className:c(st?"w-fit":"w-full"),onMouseEnter:()=>Ee(!0),onMouseLeave:()=>Ee(!1),children:n.jsxs(v.DndContext,{sensors:ht,onDragEnd:Ct,onDragStart:Tt,onDragCancel:jt,collisionDetection:v.closestCenter,onDragOver:It,children:[n.jsxs("ul",{role:"tablist","aria-orientation":"horizontal",className:c("flex items-center w-full",Ce,$?"gap-0":_==="sm"?"gap-1":"gap-2"),ref:ft,children:[Ze?n.jsx("div",{className:"skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded"}):n.jsxs(ne.SortableContext,{items:r.map(({name:e})=>e),strategy:ne.horizontalListSortingStrategy,id:"sortable",disabled:!E||R,children:[r.slice(0,Z).map(({name:e,is_pinned:t})=>{const s=i===e&&!N,l=C&&t;return n.jsx(Qe.SortableTab,{title:e,isDragging:D===e,className:$?"flex-1 flex justify-center":"",children:n.jsx("li",{role:"presentation",className:c($?"w-full flex":"sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:e,role:"tab",ariaSelected:s,tabIndex:0,classValue:c(M("classValue",s),$?"w-full justify-center":""),selectedClassValue:M("selectedClassValue",s),textClassValue:M("textClassValue",s),isSelected:s,tabOptions:s&&E?n.jsx(we.Dropdown,{menu:{items:me(e),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Rt,{tooltip:p("More"),variant:"ghost",className:"!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",children:n.jsx(Je,{sx:{fontSize:20}})})}):null,draggingTab:D===e,href:z(e),onClick:()=>W(e),suffixRecord:b,selectedId:H,icon:l?n.jsx(ke,{title:p("Unpin"),children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[e]??null})},e)},e)}),i&&Be?n.jsx(Qe.SortableTab,{title:i,isDragging:D===i,children:n.jsx("li",{role:"presentation",className:c("sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:i,role:"tab",ariaSelected:!0,tabIndex:0,classValue:M("classValue",!0),selectedClassValue:M("selectedClassValue",!0),textClassValue:M("textClassValue",!0),isSelected:!0,tabOptions:E?n.jsx(we.Dropdown,{menu:{items:me(i),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Je,{sx:{fontSize:20},className:"text-primary-600"})}):null,draggingTab:D===i,href:z(i),suffixRecord:b,selectedId:H,icon:C&&u.find(e=>e.name===i)?.is_pinned?n.jsx(ke,{title:p("Pinned"),children:n.jsx("span",{onClick:()=>K(i),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[i]??null})},i)},i):null,(q<r.length&&!F||V.length>0)&&He>0?n.jsx(zt.DropableWrapper,{id:"more-tabs",children:n.jsx(we.Dropdown,{overlayStyle:{maxHeight:"calc(100vh - 350px)",overflow:"auto",marginTop:"8px",scrollbarWidth:"none",borderRadius:8,boxShadow:"0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"},onOpenChange:()=>Pe(),open:N,menu:{items:[{key:"Search",disabled:!0,style:{minWidth:"190px",marginBottom:"8px"},label:n.jsx("div",{className:"px-2 bg-white dark:bg-black-800",children:n.jsx(Bt.SearchBar,{id:"search-bar-more-tabs",value:le,classValues:"!rounded-lg",onChange:e=>ct(e)})})},...r.slice(Z).filter(e=>e.name!==i).concat(V).filter(({name:e})=>typeof e=="string"&&(e??"").toLowerCase().includes(le.toLowerCase())).map(({name:e,is_hidden:t})=>({key:e,label:n.jsx(S.OptionButton,{className:c("uppercase",t?"text-neutral-400 dark:text-neutral-500":"text-black-900 dark:text-black-200"),text:e,suffixRecord:y?b:{},highlight:le,truncateText:!0,isDisabled:t,onClick:t?void 0:()=>{W(e),G(!1)}}),popupClassName:se,children:N?me(e,t,!0):null}))],className:se},openClassName:"max-h-[350px] overflow-y-auto",trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",getPopupContainer:e=>e.parentElement,children:n.jsx(Wt.MoreButton,{title:`${y?He:""} MORE...`,variant:T,size:_,draggingOver:pt,suffixRecord:b,handleShowMoreDropdown:Pe,selectedId:H,showMoreDropdown:N})})}):null]}),L?n.jsx("div",{className:c(L?.className),children:n.jsx("li",{children:L.component})}):null,E&&lt&&n.jsx("li",{className:c(xt?"opacity-100":"opacity-0","transition-opacity duration-300"),children:n.jsx(Pt.TabOptions,{hasSuffixRecord:!!(b&&Object.keys(b).length>0),savedConfig:De,onApplyFilter:e=>wt(e),setUnsavedChanges:()=>{},handleTabSort:Nt,onSearchChange:vt})})]}),D?n.jsx(Ft.TabDragOverlay,{draggingTab:D,suffixRecord:b,size:_,variant:T,selectedId:H,parentContainer:it}):null]})})};exports.Tabs=At;
 //# sourceMappingURL=Tabs.cjs.js.map