@lax-wp/design-system 0.14.9 → 0.14.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/forms/currency-input/CurrencyInputField.cjs.js +1 -1
  2. package/dist/components/forms/currency-input/CurrencyInputField.cjs.js.map +1 -1
  3. package/dist/components/forms/currency-input/CurrencyInputField.es.js +1 -1
  4. package/dist/components/forms/currency-input/CurrencyInputField.es.js.map +1 -1
  5. package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js +1 -1
  6. package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js.map +1 -1
  7. package/dist/components/forms/master-data-input/MasterDataInputField.es.js +26 -26
  8. package/dist/components/forms/master-data-input/MasterDataInputField.es.js.map +1 -1
  9. package/dist/components/navigation/tabs/TabOptions.cjs.js +1 -1
  10. package/dist/components/navigation/tabs/TabOptions.cjs.js.map +1 -1
  11. package/dist/components/navigation/tabs/TabOptions.es.js +45 -45
  12. package/dist/components/navigation/tabs/TabOptions.es.js.map +1 -1
  13. package/package.json +1 -1
package/dist/components/navigation/tabs/TabOptions.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n Search,\n SwapVertOutlined,\n Tune,\n VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, TagIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n savedConfig: TabOptionConfig;\n onApplyFilter: (config: TabOptionConfig) => void;\n setUnsavedChanges: (unsavedChanges: boolean) => void;\n handleTabSort: (order: 'asc' | 'desc') => void;\n onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SORT_OPTIONS = [\n {\n label: 'Default',\n value: 'default',\n icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n },\n {\n label: 'A-Z',\n value: 'asc',\n icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n },\n {\n label: 'Z-A',\n value: 'desc',\n icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n },\n];\n\nexport const TabOptions = ({\n savedConfig,\n onApplyFilter,\n setUnsavedChanges,\n handleTabSort,\n onSearchChange,\n hasSuffixRecord = false,\n}: TabOptionsProps) => {\n const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n const [filterValue, setFilterValue] = useState('');\n\n const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n setTabOptionConfig((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n const handleReset = () => {\n setTabOptionConfig({\n filterType: { label: 'Contains', value: 'contains' },\n sortOrder: 'default',\n showCounts: true,\n lockOrder: false,\n });\n setFilterValue('');\n onSearchChange('', 'contains');\n };\n\n const applyFilter = () => {\n onApplyFilter({\n filterType: tabOptionConfig.filterType,\n sortOrder: tabOptionConfig.sortOrder,\n showCounts: tabOptionConfig.showCounts,\n lockOrder: tabOptionConfig.lockOrder,\n });\n handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n setUnsavedChanges(true);\n setIsTabOptionsVisible(false);\n if (filterValue) {\n onSearchChange(filterValue, tabOptionConfig.filterType.value);\n }\n };\n\n useEffect(() => {\n if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n setTabOptionConfig(savedConfig);\n }\n }, [savedConfig]);\n\n const content = (\n <div>\n <div className=\"p-5 space-y-5\">\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n </Typography>\n <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n <SelectField\n showSearch={false}\n allowClear={false}\n value={tabOptionConfig.filterType}\n onChange={(value) => handleConfigChange('filterType', value)}\n options={[\n { label: 'Contains', value: 'contains' },\n { label: 'Does not contain', value: 'does-not-contain' },\n ]}\n />\n <BaseInputField\n id=\"base-input-field-tab-options-filter\"\n placeholder=\"Insert value\"\n value={filterValue}\n onChange={(value: string) => setFilterValue(value)}\n isClearable\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n </Typography>\n <div className=\"grid grid-cols-3 gap-2\">\n {SORT_OPTIONS.map((option) => {\n const isActive = tabOptionConfig.sortOrder === option.value;\n return (\n <Button\n appearance=\"outline\"\n status={isActive ? 'secondary' : 'secondary-neutral'}\n id={`sort-option-${option.value}`}\n onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n className=\"w-full\"\n key={option.value}\n >\n {option.icon}\n {option.label}\n </Button>\n );\n })}\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n </Typography>\n {hasSuffixRecord && (\n <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center h-8 w-8 justify-center bg-white dark:bg-neutral-700 rounded-lg\">\n <TagIcon className=\"text-neutral-800 dark:text-white h-icon w-icon\" />\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: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\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-primary-800 rounded-lg\">\n <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\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: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagIcon","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
1
+ {"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n Search,\n SwapVertOutlined,\n Tune,\n VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, TagIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n savedConfig: TabOptionConfig;\n onApplyFilter: (config: TabOptionConfig) => void;\n setUnsavedChanges: (unsavedChanges: boolean) => void;\n handleTabSort: (order: 'asc' | 'desc') => void;\n onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SORT_OPTIONS = [\n {\n label: 'Default',\n value: 'default',\n icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n },\n {\n label: 'A-Z',\n value: 'asc',\n icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n },\n {\n label: 'Z-A',\n value: 'desc',\n icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n },\n];\n\nexport const TabOptions = ({\n savedConfig,\n onApplyFilter,\n setUnsavedChanges,\n handleTabSort,\n onSearchChange,\n hasSuffixRecord = false,\n}: TabOptionsProps) => {\n const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n const [filterValue, setFilterValue] = useState('');\n\n const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n setTabOptionConfig((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n const handleReset = () => {\n setTabOptionConfig({\n filterType: { label: 'Contains', value: 'contains' },\n sortOrder: 'default',\n showCounts: true,\n lockOrder: false,\n });\n setFilterValue('');\n onSearchChange('', 'contains');\n };\n\n const applyFilter = () => {\n onApplyFilter({\n filterType: tabOptionConfig.filterType,\n sortOrder: tabOptionConfig.sortOrder,\n showCounts: tabOptionConfig.showCounts,\n lockOrder: tabOptionConfig.lockOrder,\n });\n handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n setUnsavedChanges(true);\n setIsTabOptionsVisible(false);\n if (filterValue) {\n onSearchChange(filterValue, tabOptionConfig.filterType.value);\n }\n };\n\n useEffect(() => {\n if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n setTabOptionConfig(savedConfig);\n }\n }, [savedConfig]);\n\n const content = (\n <div>\n <div className=\"p-5 space-y-5\">\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n </Typography>\n <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n <SelectField\n showSearch={false}\n allowClear={false}\n value={tabOptionConfig.filterType}\n onChange={(value) => handleConfigChange('filterType', value)}\n options={[\n { label: 'Contains', value: 'contains' },\n { label: 'Does not contain', value: 'does-not-contain' },\n ]}\n />\n <BaseInputField\n id=\"base-input-field-tab-options-filter\"\n placeholder=\"Insert value\"\n value={filterValue}\n onChange={(value: string) => setFilterValue(value)}\n isClearable\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n </Typography>\n <div className=\"grid grid-cols-3 gap-2\">\n {SORT_OPTIONS.map((option) => {\n const isActive = tabOptionConfig.sortOrder === option.value;\n return (\n <Button\n appearance=\"outline\"\n status={isActive ? 'secondary' : 'secondary-neutral'}\n id={`sort-option-${option.value}`}\n onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n className=\"w-full\"\n key={option.value}\n >\n {option.icon}\n {option.label}\n </Button>\n );\n })}\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n </Typography>\n {hasSuffixRecord && (\n <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center h-8 w-8 justify-center bg-white dark:bg-primary-800 rounded-lg\">\n <TagIcon className=\"text-neutral-800 dark:text-white h-icon w-icon\" />\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: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-white w-sm h-sm\" />,\n uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-white w-sm h-sm\" />,\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-primary-800 rounded-lg\">\n <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\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: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-white w-sm h-sm\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-white w-sm h-sm\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagIcon","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
package/dist/components/navigation/tabs/TabOptions.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as r, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
2
  import { Search as T, SwapVertOutlined as S, VisibilityOutlined as L, Tune as M } from "@mui/icons-material";
3
3
  import { Popover as j } from "antd";
4
4
  import V from "../../../_virtual/index.es.js";
@@ -10,7 +10,7 @@ import { SelectField as F } from "../../forms/select-field/SelectField.es.js";
10
10
  import { Toggle as g } from "../../forms/toggle/Toggle.es.js";
11
11
  import H from "../../button/IconButton.es.js";
12
12
  import { INITIAL_TAB_OPTION_CONFIG as x } from "./types.es.js";
13
- import { TagIcon as J, VisibilityOffIcon as z, VisibilityIcon as D, LockIcon as b, LockOpenIcon as _, FormatListBulletedIcon as P } from "../../icon/icons.generated.es.js";
13
+ import { TagIcon as J, VisibilityOffIcon as z, VisibilityIcon as D, LockIcon as w, LockOpenIcon as _, FormatListBulletedIcon as P } from "../../icon/icons.generated.es.js";
14
14
  const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), W = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), Z = [
15
15
  {
16
16
  label: "Default",
@@ -30,17 +30,17 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
30
30
  ], ie = ({
31
31
  savedConfig: a,
32
32
  onApplyFilter: s,
33
- setUnsavedChanges: w,
33
+ setUnsavedChanges: b,
34
34
  handleTabSort: v,
35
35
  onSearchChange: m,
36
- hasSuffixRecord: y = !1
36
+ hasSuffixRecord: N = !1
37
37
  }) => {
38
- const [N, c] = u(!1), [l, d] = u(x), [n, f] = u(""), o = (t, p) => {
38
+ const [k, c] = u(!1), [l, d] = u(x), [n, f] = u(""), o = (r, p) => {
39
39
  d((C) => ({
40
40
  ...C,
41
- [t]: p
41
+ [r]: p
42
42
  }));
43
- }, k = () => {
43
+ }, y = () => {
44
44
  d({
45
45
  filterType: { label: "Contains", value: "contains" },
46
46
  sortOrder: "default",
@@ -53,26 +53,26 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
53
53
  sortOrder: l.sortOrder,
54
54
  showCounts: l.showCounts,
55
55
  lockOrder: l.lockOrder
56
- }), v(l.sortOrder), w(!0), c(!1), n && m(n, l.filterType.value);
56
+ }), v(l.sortOrder), b(!0), c(!1), n && m(n, l.filterType.value);
57
57
  };
58
58
  A(() => {
59
59
  a && JSON.stringify(a) !== JSON.stringify(l) && d(a);
60
60
  }, [a]);
61
- const I = /* @__PURE__ */ r("div", { children: [
62
- /* @__PURE__ */ r("div", { className: "p-5 space-y-5", children: [
63
- /* @__PURE__ */ r("div", { className: "space-y-2", children: [
64
- /* @__PURE__ */ r(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
61
+ const I = /* @__PURE__ */ t("div", { children: [
62
+ /* @__PURE__ */ t("div", { className: "p-5 space-y-5", children: [
63
+ /* @__PURE__ */ t("div", { className: "space-y-2", children: [
64
+ /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
65
65
  /* @__PURE__ */ e(T, { sx: { height: "14px", width: "14px" } }),
66
66
  " Filter Tabs"
67
67
  ] }),
68
- /* @__PURE__ */ r("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
68
+ /* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
69
69
  /* @__PURE__ */ e(
70
70
  F,
71
71
  {
72
72
  showSearch: !1,
73
73
  allowClear: !1,
74
74
  value: l.filterType,
75
- onChange: (t) => o("filterType", t),
75
+ onChange: (r) => o("filterType", r),
76
76
  options: [
77
77
  { label: "Contains", value: "contains" },
78
78
  { label: "Does not contain", value: "does-not-contain" }
@@ -85,45 +85,45 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
85
85
  id: "base-input-field-tab-options-filter",
86
86
  placeholder: "Insert value",
87
87
  value: n,
88
- onChange: (t) => f(t),
88
+ onChange: (r) => f(r),
89
89
  isClearable: !0
90
90
  }
91
91
  )
92
92
  ] })
93
93
  ] }),
94
- /* @__PURE__ */ r("div", { className: "space-y-2", children: [
95
- /* @__PURE__ */ r(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
94
+ /* @__PURE__ */ t("div", { className: "space-y-2", children: [
95
+ /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
96
96
  /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
97
97
  " Sort"
98
98
  ] }),
99
- /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: Z.map((t) => {
100
- const p = l.sortOrder === t.value;
101
- return /* @__PURE__ */ r(
99
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: Z.map((r) => {
100
+ const p = l.sortOrder === r.value;
101
+ return /* @__PURE__ */ t(
102
102
  h,
103
103
  {
104
104
  appearance: "outline",
105
105
  status: p ? "secondary" : "secondary-neutral",
106
- id: `sort-option-${t.value}`,
107
- onClick: () => o("sortOrder", t.value),
106
+ id: `sort-option-${r.value}`,
107
+ onClick: () => o("sortOrder", r.value),
108
108
  className: "w-full",
109
109
  children: [
110
- t.icon,
111
- t.label
110
+ r.icon,
111
+ r.label
112
112
  ]
113
113
  },
114
- t.value
114
+ r.value
115
115
  );
116
116
  }) })
117
117
  ] }),
118
- /* @__PURE__ */ r("div", { className: "space-y-2", children: [
119
- /* @__PURE__ */ r(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
118
+ /* @__PURE__ */ t("div", { className: "space-y-2", children: [
119
+ /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
120
120
  /* @__PURE__ */ e(L, { sx: { height: "14px", width: "14px" } }),
121
121
  " Display Options"
122
122
  ] }),
123
- y && /* @__PURE__ */ r("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: [
124
- /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
125
- /* @__PURE__ */ e("div", { className: "flex items-center h-8 w-8 justify-center bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(J, { className: "text-neutral-800 dark:text-white h-icon w-icon" }) }),
126
- /* @__PURE__ */ r("div", { className: "flex flex-col gap-0", children: [
123
+ N && /* @__PURE__ */ t("div", { className: "rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3", children: [
124
+ /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
125
+ /* @__PURE__ */ e("div", { className: "flex items-center h-8 w-8 justify-center bg-white dark:bg-primary-800 rounded-lg", children: /* @__PURE__ */ e(J, { className: "text-neutral-800 dark:text-white h-icon w-icon" }) }),
126
+ /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
127
127
  /* @__PURE__ */ e(i, { size: "small", variant: "medium", appearance: "title", children: "Show Counts" }),
128
128
  /* @__PURE__ */ e(i, { size: "extra-small", variant: "regular", appearance: "subtitle", children: "Display item counts on tabs" })
129
129
  ] })
@@ -132,20 +132,20 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
132
132
  g,
133
133
  {
134
134
  isChecked: l.showCounts,
135
- onChange: (t) => o("showCounts", t),
135
+ onChange: (r) => o("showCounts", r),
136
136
  hideStatus: !0,
137
137
  icon: {
138
- checkedIcon: /* @__PURE__ */ e(D, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm" }),
139
- uncheckedIcon: /* @__PURE__ */ e(z, { className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm" })
138
+ checkedIcon: /* @__PURE__ */ e(D, { className: "cursor-pointer !block text-primary-600 dark:text-white w-sm h-sm" }),
139
+ uncheckedIcon: /* @__PURE__ */ e(z, { className: "cursor-pointer !block text-neutral-700 dark:text-white w-sm h-sm" })
140
140
  },
141
141
  withIcon: !0
142
142
  }
143
143
  ) })
144
144
  ] }),
145
- /* @__PURE__ */ r("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: [
146
- /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
147
- /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-primary-800 rounded-lg", children: /* @__PURE__ */ e(b, { className: "text-neutral-800 dark:text-white w-icon h-icon" }) }),
148
- /* @__PURE__ */ r("div", { className: "flex flex-col gap-0", children: [
145
+ /* @__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: [
146
+ /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
147
+ /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-primary-800 rounded-lg", children: /* @__PURE__ */ e(w, { className: "text-neutral-800 dark:text-white w-icon h-icon" }) }),
148
+ /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
149
149
  /* @__PURE__ */ e(i, { size: "small", variant: "medium", appearance: "title", children: "Lock Order" }),
150
150
  /* @__PURE__ */ e(i, { size: "extra-small", variant: "regular", appearance: "subtitle", children: "Prevent tab reordering" })
151
151
  ] })
@@ -154,20 +154,20 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
154
154
  g,
155
155
  {
156
156
  isChecked: l.lockOrder,
157
- onChange: (t) => o("lockOrder", t),
157
+ onChange: (r) => o("lockOrder", r),
158
158
  hideStatus: !0,
159
159
  withIcon: !0,
160
160
  icon: {
161
- checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm" }),
162
- uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-sm h-sm" })
161
+ checkedIcon: /* @__PURE__ */ e(w, { className: "cursor-pointer !block text-primary-600 dark:text-white w-sm h-sm" }),
162
+ uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-white w-sm h-sm" })
163
163
  }
164
164
  }
165
165
  ) })
166
166
  ] })
167
167
  ] })
168
168
  ] }),
169
- /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5", children: [
170
- /* @__PURE__ */ e(h, { id: "btn-tab-options-reset", appearance: "outline", status: "cancel", className: "w-full", onClick: k, children: "Reset" }),
169
+ /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5", children: [
170
+ /* @__PURE__ */ e(h, { id: "btn-tab-options-reset", appearance: "outline", status: "cancel", className: "w-full", onClick: y, children: "Reset" }),
171
171
  /* @__PURE__ */ e(
172
172
  h,
173
173
  {
@@ -192,9 +192,9 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
192
192
  content: I,
193
193
  trigger: ["click"],
194
194
  arrow: !1,
195
- open: N,
195
+ open: k,
196
196
  onOpenChange: c,
197
- children: /* @__PURE__ */ e("div", { className: "border-l border-neutral-200 dark:border-neutral-800 pl-2", children: /* @__PURE__ */ r(
197
+ children: /* @__PURE__ */ e("div", { className: "border-l border-neutral-200 dark:border-neutral-800 pl-2", children: /* @__PURE__ */ t(
198
198
  H,
199
199
  {
200
200
  tooltip: "Manage Tabs",
package/dist/components/navigation/tabs/TabOptions.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n Search,\n SwapVertOutlined,\n Tune,\n VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, TagIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n savedConfig: TabOptionConfig;\n onApplyFilter: (config: TabOptionConfig) => void;\n setUnsavedChanges: (unsavedChanges: boolean) => void;\n handleTabSort: (order: 'asc' | 'desc') => void;\n onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SORT_OPTIONS = [\n {\n label: 'Default',\n value: 'default',\n icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n },\n {\n label: 'A-Z',\n value: 'asc',\n icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n },\n {\n label: 'Z-A',\n value: 'desc',\n icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n },\n];\n\nexport const TabOptions = ({\n savedConfig,\n onApplyFilter,\n setUnsavedChanges,\n handleTabSort,\n onSearchChange,\n hasSuffixRecord = false,\n}: TabOptionsProps) => {\n const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n const [filterValue, setFilterValue] = useState('');\n\n const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n setTabOptionConfig((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n const handleReset = () => {\n setTabOptionConfig({\n filterType: { label: 'Contains', value: 'contains' },\n sortOrder: 'default',\n showCounts: true,\n lockOrder: false,\n });\n setFilterValue('');\n onSearchChange('', 'contains');\n };\n\n const applyFilter = () => {\n onApplyFilter({\n filterType: tabOptionConfig.filterType,\n sortOrder: tabOptionConfig.sortOrder,\n showCounts: tabOptionConfig.showCounts,\n lockOrder: tabOptionConfig.lockOrder,\n });\n handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n setUnsavedChanges(true);\n setIsTabOptionsVisible(false);\n if (filterValue) {\n onSearchChange(filterValue, tabOptionConfig.filterType.value);\n }\n };\n\n useEffect(() => {\n if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n setTabOptionConfig(savedConfig);\n }\n }, [savedConfig]);\n\n const content = (\n <div>\n <div className=\"p-5 space-y-5\">\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n </Typography>\n <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n <SelectField\n showSearch={false}\n allowClear={false}\n value={tabOptionConfig.filterType}\n onChange={(value) => handleConfigChange('filterType', value)}\n options={[\n { label: 'Contains', value: 'contains' },\n { label: 'Does not contain', value: 'does-not-contain' },\n ]}\n />\n <BaseInputField\n id=\"base-input-field-tab-options-filter\"\n placeholder=\"Insert value\"\n value={filterValue}\n onChange={(value: string) => setFilterValue(value)}\n isClearable\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n </Typography>\n <div className=\"grid grid-cols-3 gap-2\">\n {SORT_OPTIONS.map((option) => {\n const isActive = tabOptionConfig.sortOrder === option.value;\n return (\n <Button\n appearance=\"outline\"\n status={isActive ? 'secondary' : 'secondary-neutral'}\n id={`sort-option-${option.value}`}\n onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n className=\"w-full\"\n key={option.value}\n >\n {option.icon}\n {option.label}\n </Button>\n );\n })}\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n </Typography>\n {hasSuffixRecord && (\n <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center h-8 w-8 justify-center bg-white dark:bg-neutral-700 rounded-lg\">\n <TagIcon className=\"text-neutral-800 dark:text-white h-icon w-icon\" />\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: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\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-primary-800 rounded-lg\">\n <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\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: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagIcon","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
1
+ {"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n Search,\n SwapVertOutlined,\n Tune,\n VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, TagIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n savedConfig: TabOptionConfig;\n onApplyFilter: (config: TabOptionConfig) => void;\n setUnsavedChanges: (unsavedChanges: boolean) => void;\n handleTabSort: (order: 'asc' | 'desc') => void;\n onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SORT_OPTIONS = [\n {\n label: 'Default',\n value: 'default',\n icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n },\n {\n label: 'A-Z',\n value: 'asc',\n icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n },\n {\n label: 'Z-A',\n value: 'desc',\n icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n },\n];\n\nexport const TabOptions = ({\n savedConfig,\n onApplyFilter,\n setUnsavedChanges,\n handleTabSort,\n onSearchChange,\n hasSuffixRecord = false,\n}: TabOptionsProps) => {\n const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n const [filterValue, setFilterValue] = useState('');\n\n const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n setTabOptionConfig((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n const handleReset = () => {\n setTabOptionConfig({\n filterType: { label: 'Contains', value: 'contains' },\n sortOrder: 'default',\n showCounts: true,\n lockOrder: false,\n });\n setFilterValue('');\n onSearchChange('', 'contains');\n };\n\n const applyFilter = () => {\n onApplyFilter({\n filterType: tabOptionConfig.filterType,\n sortOrder: tabOptionConfig.sortOrder,\n showCounts: tabOptionConfig.showCounts,\n lockOrder: tabOptionConfig.lockOrder,\n });\n handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n setUnsavedChanges(true);\n setIsTabOptionsVisible(false);\n if (filterValue) {\n onSearchChange(filterValue, tabOptionConfig.filterType.value);\n }\n };\n\n useEffect(() => {\n if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n setTabOptionConfig(savedConfig);\n }\n }, [savedConfig]);\n\n const content = (\n <div>\n <div className=\"p-5 space-y-5\">\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n </Typography>\n <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n <SelectField\n showSearch={false}\n allowClear={false}\n value={tabOptionConfig.filterType}\n onChange={(value) => handleConfigChange('filterType', value)}\n options={[\n { label: 'Contains', value: 'contains' },\n { label: 'Does not contain', value: 'does-not-contain' },\n ]}\n />\n <BaseInputField\n id=\"base-input-field-tab-options-filter\"\n placeholder=\"Insert value\"\n value={filterValue}\n onChange={(value: string) => setFilterValue(value)}\n isClearable\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n </Typography>\n <div className=\"grid grid-cols-3 gap-2\">\n {SORT_OPTIONS.map((option) => {\n const isActive = tabOptionConfig.sortOrder === option.value;\n return (\n <Button\n appearance=\"outline\"\n status={isActive ? 'secondary' : 'secondary-neutral'}\n id={`sort-option-${option.value}`}\n onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n className=\"w-full\"\n key={option.value}\n >\n {option.icon}\n {option.label}\n </Button>\n );\n })}\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n </Typography>\n {hasSuffixRecord && (\n <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center h-8 w-8 justify-center bg-white dark:bg-primary-800 rounded-lg\">\n <TagIcon className=\"text-neutral-800 dark:text-white h-icon w-icon\" />\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: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-white w-sm h-sm\" />,\n uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-white w-sm h-sm\" />,\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-primary-800 rounded-lg\">\n <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\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: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-white w-sm h-sm\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-white w-sm h-sm\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagIcon","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lax-wp/design-system",
3
3
  "private": false,
4
- "version": "0.14.9",
4
+ "version": "0.14.10",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.es.js",