npm - @lax-wp/design-system - Versions diffs - 0.13.44 → 0.13.46 - Mend

@lax-wp/design-system 0.13.44 → 0.13.46

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 (25) hide show

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

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

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

@@ -1,31 +1,31 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Search as I, SwapVertOutlined as S, VisibilityOutlined as L, TagOutlined as M, VisibilityOffOutlined as j, RemoveRedEyeOutlined as V, LockOutlined as g, LockOpenRounded as A, Tune as B } from "@mui/icons-material";
-import { Popover as F } from "antd";
-import H from "../../../_virtual/index.es.js";
-import { useState as u, useEffect as J } from "react";
+import { Search as T, SwapVertOutlined as S, VisibilityOutlined as L, TagOutlined as M, Tune as j } from "@mui/icons-material";
+import { Popover as V } from "antd";
+import A from "../../../_virtual/index.es.js";
+import { useState as u, useEffect as B } from "react";
 import h from "../../button/Button.es.js";
 import { Typography as i } from "../../data-display/typography/Typography.es.js";
-import { BaseInputField as R } from "../../forms/base-input-field/BaseInputField.es.js";
-import { SelectField as z } from "../../forms/select-field/SelectField.es.js";
-import { Toggle as x } from "../../forms/toggle/Toggle.es.js";
-import D from "../../button/IconButton.es.js";
-import { INITIAL_TAB_OPTION_CONFIG as b } from "./types.es.js";
-import { FormatListBulletedIcon as _ } from "../../icon/icons.generated.es.js";
-const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), E = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), W = [
+import { BaseInputField as F } from "../../forms/base-input-field/BaseInputField.es.js";
+import { SelectField as H } from "../../forms/select-field/SelectField.es.js";
+import { Toggle as g } from "../../forms/toggle/Toggle.es.js";
+import J from "../../button/IconButton.es.js";
+import { INITIAL_TAB_OPTION_CONFIG as x } from "./types.es.js";
+import { VisibilityOffIcon as z, VisibilityIcon as D, LockIcon as b, LockOpenIcon as _, FormatListBulletedIcon as P } from "../../icon/icons.generated.es.js";
+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 = [
   {
     label: "Default",
     value: "default",
-    icon: /* @__PURE__ */ e(_, { className: "w-icon h-icon" })
+    icon: /* @__PURE__ */ e(P, { className: "w-icon h-icon" })
   },
   {
     label: "A-Z",
     value: "asc",
-    icon: /* @__PURE__ */ e(P, { className: "w-icon h-icon" })
+    icon: /* @__PURE__ */ e(R, { className: "w-icon h-icon" })
   },
   {
     label: "Z-A",
     value: "desc",
-    icon: /* @__PURE__ */ e(E, { className: "w-icon h-icon" })
+    icon: /* @__PURE__ */ e(W, { className: "w-icon h-icon" })
   }
 ], ie = ({
   savedConfig: a,
@@ -35,9 +35,9 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
   onSearchChange: m,
   hasSuffixRecord: N = !1
 }) => {
-  const [k, c] = u(!1), [l, d] = u(b), [n, f] = u(""), o = (r, p) => {
-    d((T) => ({
-      ...T,
+  const [k, c] = u(!1), [l, d] = u(x), [n, f] = u(""), o = (r, p) => {
+    d((I) => ({
+      ...I,
       [r]: p
     }));
   }, y = () => {
@@ -55,19 +55,19 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
       lockOrder: l.lockOrder
     }), v(l.sortOrder), w(!0), c(!1), n && m(n, l.filterType.value);
   };
-  J(() => {
+  B(() => {
     a && JSON.stringify(a) !== JSON.stringify(l) && d(a);
   }, [a]);
   const C = /* @__PURE__ */ t("div", { children: [
     /* @__PURE__ */ t("div", { className: "p-5 space-y-5", children: [
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
         /* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
-          /* @__PURE__ */ e(I, { sx: { height: "14px", width: "14px" } }),
+          /* @__PURE__ */ e(T, { sx: { height: "14px", width: "14px" } }),
           " Filter Tabs"
         ] }),
         /* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
           /* @__PURE__ */ e(
-            z,
+            H,
             {
               showSearch: !1,
               allowClear: !1,
@@ -80,7 +80,7 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
             }
           ),
           /* @__PURE__ */ e(
-            R,
+            F,
             {
               id: "base-input-field-tab-options-filter",
               placeholder: "Insert value",
@@ -96,7 +96,7 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
           /* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
           " Sort"
         ] }),
-        /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: W.map((r) => {
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: Z.map((r) => {
           const p = l.sortOrder === r.value;
           return /* @__PURE__ */ t(
             h,
@@ -129,14 +129,14 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
             ] })
           ] }),
           /* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
-            x,
+            g,
             {
               isChecked: l.showCounts,
               onChange: (r) => o("showCounts", r),
               hideStatus: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(V, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5" }),
-                uncheckedIcon: /* @__PURE__ */ e(j, { className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5" })
+                checkedIcon: /* @__PURE__ */ e(D, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm" }),
+                uncheckedIcon: /* @__PURE__ */ e(z, { className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm" })
               },
               withIcon: !0
             }
@@ -144,22 +144,22 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
         ] }),
         /* @__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(g, { 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(b, { className: "text-neutral-800 dark:text-white w-icon h-icon" }) }),
             /* @__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,
+            g,
             {
               isChecked: l.lockOrder,
               onChange: (r) => o("lockOrder", r),
               hideStatus: !0,
               withIcon: !0,
               icon: {
-                checkedIcon: /* @__PURE__ */ e(g, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5" }),
-                uncheckedIcon: /* @__PURE__ */ e(A, { className: "cursor-pointer !block text-neutral-700 w-1.5 h-1.5" })
+                checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md" }),
+                uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-md h-md" })
               }
             }
           ) })
@@ -183,7 +183,7 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
     ] })
   ] });
   return /* @__PURE__ */ e(
-    F,
+    V,
     {
       classNames: {
         body: "rounded-md w-[348px] !p-0"
@@ -195,21 +195,21 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
       open: k,
       onOpenChange: c,
       children: /* @__PURE__ */ e("div", { className: "border-l border-neutral-200 dark:border-neutral-800 pl-2", children: /* @__PURE__ */ t(
-        D,
+        J,
         {
           tooltip: "Manage Tabs",
           variant: "ghost",
           className: "!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",
           onClick: () => c(!0),
           children: [
-            /* @__PURE__ */ e(B, { sx: { height: "20px", width: "20px" } }),
-            JSON.stringify(l) !== JSON.stringify(b) && /* @__PURE__ */ e(Z, { className: "text-primary-600" })
+            /* @__PURE__ */ e(j, { sx: { height: "20px", width: "20px" } }),
+            JSON.stringify(l) !== JSON.stringify(x) && /* @__PURE__ */ e(E, { className: "text-primary-600" })
           ]
         }
       ) })
     }
   );
-}, Z = ({ className: a }) => /* @__PURE__ */ e(
+}, E = ({ className: a }) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -217,12 +217,12 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
     height: "5",
     viewBox: "0 0 4 4",
     fill: "none",
-    className: H("absolute top-0.5 right-0.5", a),
+    className: A("absolute top-0.5 right-0.5", a),
     children: /* @__PURE__ */ e("circle", { cx: "2", cy: "2", r: "2", fill: "currentColor" })
   }
 );
 export {
-  Z as Indicator,
+  E as Indicator,
   ie as TabOptions
 };
 //# sourceMappingURL=TabOptions.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n LockOpenRounded,\n LockOutlined,\n RemoveRedEyeOutlined,\n Search,\n SwapVertOutlined,\n TagOutlined,\n Tune,\n VisibilityOffOutlined,\n VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon } from '../../icon';\n\ntype TabOptionsProps = {\n savedConfig: TabOptionConfig;\n onApplyFilter: (config: TabOptionConfig) => void;\n setUnsavedChanges: (unsavedChanges: boolean) => void;\n handleTabSort: (order: 'asc' \| 'desc') => void;\n onSearchChange: (searchValue: string, filterType: 'contains' \| 'does-not-contain') => void;\n hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n);\n\nconst SORT_OPTIONS = [\n {\n label: 'Default',\n value: 'default',\n icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n },\n {\n label: 'A-Z',\n value: 'asc',\n icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n },\n {\n label: 'Z-A',\n value: 'desc',\n icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n },\n];\n\nexport const TabOptions = ({\n savedConfig,\n onApplyFilter,\n setUnsavedChanges,\n handleTabSort,\n onSearchChange,\n hasSuffixRecord = false,\n}: TabOptionsProps) => {\n const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n const [filterValue, setFilterValue] = useState('');\n\n const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n setTabOptionConfig((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n const handleReset = () => {\n setTabOptionConfig({\n filterType: { label: 'Contains', value: 'contains' },\n sortOrder: 'default',\n showCounts: true,\n lockOrder: false,\n });\n setFilterValue('');\n onSearchChange('', 'contains');\n };\n\n const applyFilter = () => {\n onApplyFilter({\n filterType: tabOptionConfig.filterType,\n sortOrder: tabOptionConfig.sortOrder,\n showCounts: tabOptionConfig.showCounts,\n lockOrder: tabOptionConfig.lockOrder,\n });\n handleTabSort(tabOptionConfig.sortOrder as 'asc' \| 'desc');\n setUnsavedChanges(true);\n setIsTabOptionsVisible(false);\n if (filterValue) {\n onSearchChange(filterValue, tabOptionConfig.filterType.value);\n }\n };\n\n useEffect(() => {\n if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n setTabOptionConfig(savedConfig);\n }\n }, [savedConfig]);\n\n const content = (\n <div>\n <div className=\"p-5 space-y-5\">\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n </Typography>\n <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n <SelectField\n showSearch={false}\n allowClear={false}\n value={tabOptionConfig.filterType}\n onChange={(value) => handleConfigChange('filterType', value)}\n options={[\n { label: 'Contains', value: 'contains' },\n { label: 'Does not contain', value: 'does-not-contain' },\n ]}\n />\n <BaseInputField\n id=\"base-input-field-tab-options-filter\"\n placeholder=\"Insert value\"\n value={filterValue}\n onChange={(value: string) => setFilterValue(value)}\n isClearable\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n </Typography>\n <div className=\"grid grid-cols-3 gap-2\">\n {SORT_OPTIONS.map((option) => {\n const isActive = tabOptionConfig.sortOrder === option.value;\n return (\n <Button\n appearance=\"outline\"\n status={isActive ? 'secondary' : 'secondary-neutral'}\n id={`sort-option-${option.value}`}\n onClick={() => handleConfigChange('sortOrder', option.value as 'default' \| 'asc' \| 'desc')}\n className=\"w-full\"\n key={option.value}\n >\n {option.icon}\n {option.label}\n </Button>\n );\n })}\n </div>\n </div>\n <div className=\"space-y-2\">\n <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n </Typography>\n {hasSuffixRecord && (\n <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n </div>\n <div className=\"flex flex-col gap-0\">\n <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n Show Counts\n </Typography>\n <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n Display item counts on tabs\n </Typography>\n </div>\n </div>\n <div className=\"flex items-center justify-end\">\n <Toggle\n isChecked={tabOptionConfig.showCounts}\n onChange={(v) => handleConfigChange('showCounts', v)}\n hideStatus\n icon={{\n checkedIcon: <RemoveRedEyeOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n uncheckedIcon: <VisibilityOffOutlined className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-1.5 h-1.5\" />,\n }}\n withIcon\n />\n </div>\n </div>\n )}\n <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n <LockOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n </div>\n <div className=\"flex flex-col gap-0\">\n <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n Lock Order\n </Typography>\n <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n Prevent tab reordering\n </Typography>\n </div>\n </div>\n <div className=\"flex items-center justify-end\">\n <Toggle\n isChecked={tabOptionConfig.lockOrder}\n onChange={(v) => handleConfigChange('lockOrder', v)}\n hideStatus\n withIcon\n icon={{\n checkedIcon: <LockOutlined className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-1.5 h-1.5\" />,\n uncheckedIcon: <LockOpenRounded className=\"cursor-pointer !block text-neutral-700 w-1.5 h-1.5\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","RemoveRedEyeOutlined","VisibilityOffOutlined","LockOutlined","LockOpenRounded","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
1	+ {"version":3,"file":"TabOptions.es.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n Search,\n SwapVertOutlined,\n TagOutlined,\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, 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 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: <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-neutral-700 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-md h-md\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-md h-md\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":";;;;;;;;;;;;;AA6BA,MAAMA,IAAuB,CAAC,EAAE,UAAAC,IAAW,IAAI,WAAAC,EAAA,MAC7C,gBAAAC,EAAC,OAAA,EAAI,OAAOF,GAAU,QAAQA,GAAU,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAA6B,WAAAC,GACzG,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,oEAAmE,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,GAClK,GAGIC,IAAqB,CAAC,EAAE,UAAAH,IAAW,IAAI,WAAAC,EAAA,MAC3C,gBAAAC,EAAC,OAAA,EAAI,OAAOF,GAAU,QAAQA,GAAU,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAA6B,WAAAC,GACzG,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,MAAM,gBAAAF,EAACG,GAAA,EAAuB,WAAU,gBAAA,CAAgB;AAAA,EAAA;AAAA,EAE1D;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAH,EAACH,GAAA,EAAqB,WAAU,gBAAA,CAAgB;AAAA,EAAA;AAAA,EAExD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM,gBAAAG,EAACC,GAAA,EAAmB,WAAU,gBAAA,CAAgB;AAAA,EAAA;AAExD,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,aAAa,gBAAAvC,EAACwC,GAAA,EAAe,WAAU,yEAAA,CAAyE;AAAA,gBAChH,eAAe,gBAAAxC,EAACyC,GAAA,EAAkB,WAAU,yEAAA,CAAyE;AAAA,cAAA;AAAA,cAEvH,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,SAAI,WAAU,oFACb,4BAAC0C,GAAA,EAAS,WAAU,kDAAiD,EAAA,CACvE;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,aAAa,gBAAAvC,EAAC0C,GAAA,EAAS,WAAU,yEAAA,CAAyE;AAAA,gBAC1G,eAAe,gBAAA1C,EAAC2C,GAAA,EAAa,WAAU,mDAAA,CAAmD;AAAA,cAAA;AAAA,YAC5F;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,WAAAhD,QAExB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAWgD,EAAW,8BAA8BjD,CAAS;AAAA,IAE7D,UAAA,gBAAAC,EAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,eAAA,CAAe;AAAA,EAAA;AAAA;"}

package/dist/components/user-avatar/UserAvatar.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("@mui/icons-material"),V=require("@mui/icons-material/EditOutlined"),D=require("@mui/icons-material/WarningRounded"),o=require("../../_virtual/index.cjs.js"),n=require("react"),d=require("../data-display/typography/Typography.cjs.js"),g=require("../data-display/tag/Tag.cjs.js"),ee=require("../data-display/skeleton/Skeleton.cjs.js"),re=require("../../utils/countryFlags.cjs.js"),ae=require("./UserAvatarPopper.cjs.js"),oe=require("./StatusInfoRow.cjs.js"),x=require("./constants.cjs.js"),se=require("./PersonIcon.cjs.js"),ne=require("./useDynamicPosition.cjs.js"),j=({label:t,content:l})=>e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx(d.Typography,{size:"small",variant:"medium",className:"mr-5",appearance:"body",children:t}),l]}),H=({firstName:t,lastName:l,email:U,profilePic:c,size:N="md",hoverSize:T="lg",containerClassName:A="",enablePopper:P=!0,className:B,userId:C,lastViewedOn:u,isActive:m,statusIndicator:F=!1,userDetails:r,isFetchingUserDetails:$=!1,authToken:R,onHover:G,currentlyEditing:z})=>{if(t==="All"&&l==="Users")return e.jsx("div",{className:"p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center",children:e.jsx(O.GroupsOutlined,{sx:{fontSize:16},className:"text-primary-600 dark:text-primary-600"})});const[W,v]=n.useState(!1),[M,i]=n.useState(!1),J=x.sizeClasses[N],{triggerRef:K,dropdownRef:Q,position:f,isVisible:X,show:S,hide:q}=ne.useDynamicPosition(),k=n.useRef({}),I=n.useMemo(()=>{if(m||!u)return!1;const a=new Date(u);return(new Date().getTime()-a.getTime())/(1e3*60*60)<24},[m,u]),h=m?"bg-primary-600 dark:bg-primary-600":I?"bg-primary-300 dark:bg-primary-300":u?"bg-neutral-400 dark:bg-neutral-400":null,b=m?"border-primary-600 dark:border-primary-600":I?"border-primary-300 dark:border-primary-300":u?"border-neutral-400 dark:border-neutral-400":"border-primary-200 dark:border-neutral-800",Y={"2xs":"w-1.5 h-1.5",xs:"w-2 h-2",sm:"w-2.5 h-2.5",md:"w-3 h-3",lg:"w-3.5 h-3.5",xl:"w-4 h-4"};n.useEffect(()=>{if(c)if(k.current[c])i(!0);else{i(!1);const a=new Image,p=R||(typeof localStorage<"u"?localStorage.getItem("token"):null);a.src=c+(p?"?token="+p:""),a.onload=()=>{k.current[c]=a.src,i(!0)},a.onerror=()=>{i(!1)}}else i(!1)},[c,R]),n.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]);const y=c?k.current[c]:void 0,s=n.useRef(null),w=n.useRef(null),Z=()=>{G?.(),t&&l&&P&&(s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{v(!0)},300))},L=a=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{w.current&&!w.current.contains(a.relatedTarget)&&v(!1)},200)},_=e.jsxs("div",{ref:w,className:"bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]",onMouseEnter:()=>{s.current&&clearTimeout(s.current)},onMouseLeave:a=>L(a),children:[e.jsxs("div",{className:"flex flex-col gap-1 items-center p-5",children:[e.jsxs("div",{className:o("relative",x.sizeClasses[T]),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border-2 object-cover w-full h-full",b),onError:()=>i(!1)}):e.jsx("div",{className:o("bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full",b),children:x.getInitials((t||"")+" "+(l||""))}),h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",Y[T],h)})]}),e.jsxs("div",{className:"flex flex-row gap-1 items-center justify-center",children:[e.jsxs(d.Typography,{size:"medium",variant:"semibold",className:"w-full text-center",children:[t||""," ",l||""]}),r?.region&&e.jsx("span",{children:re.getFlagComponentRectangleMd(r?.region)})]}),e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:U||r?.email||""})]}),z?e.jsx("div",{className:"px-5 pb-3",children:e.jsxs("div",{className:"flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]",children:[e.jsx("div",{className:"flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950",children:e.jsx(V,{sx:{width:13,height:13},className:"text-primary-600 dark:text-primary-500"})}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx(d.Typography,{size:"extra-small",variant:"semibold",appearance:"custom",className:"text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500",children:"Currently editing"}),e.jsx(d.Typography,{size:"extra-small",variant:"semibold",className:"truncate",children:z})]})]})}):null,C&&($?e.jsx("div",{className:"p-5",children:e.jsx(ee.Skeleton,{})}):C&&(r?.teams||r?.clearanceLevel||r?.group)?e.jsxs("div",{className:"flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg",children:[e.jsx(oe.StatusInfoRow,{isActive:m,lastViewedOn:u}),r.username&&e.jsx(j,{label:"Username",content:e.jsx("div",{className:"flex gap-2",children:e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:r.username})})}),r?.teams&&r?.teams?.length>0&&e.jsx(j,{label:"Team",content:e.jsxs("div",{className:"flex gap-2",children:[r?.teams?.length>0&&e.jsx(g.Tag,{label:r?.teams[0]?.name,color:r?.teams[0]?.color||"#e38715",size:"md",isHashColor:!0},r?.teams[0]?.id),r?.teams?.length>=2&&e.jsxs("div",{ref:K,className:"relative cursor-pointer",onMouseEnter:S,onMouseLeave:q,onClick:a=>a.stopPropagation(),children:[e.jsx(g.Tag,{label:`+ ${r?.teams?.length-1} More`,color:"#004f08",size:"md",isHashColor:!0},1),X&&e.jsx("div",{ref:Q,className:o("absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60",{"top-full":f.vertical==="bottom","bottom-full":f.vertical==="top","left-0":f.horizontal==="left","right-0":f.horizontal==="right"}),onMouseEnter:S,onMouseLeave:q,children:r?.teams?.slice(1)?.map((a,p)=>e.jsx("div",{className:"my-2",children:e.jsx(g.Tag,{label:a?.name,color:a?.color||"#4A5568",size:"md",isHashColor:!0,className:"w-fit"},a?.id)},a?.id||p))})]})]})}),r?.group&&e.jsx(j,{label:"Role",content:e.jsx(g.Tag,{label:r?.group,color:"#004094",size:"md",isHashColor:!0},r?.group)}),r?.clearanceLevel&&e.jsx(j,{label:"Clearance Level",content:e.jsx(g.Tag,{label:`Level ${r?.clearanceLevel}`,color:"#b30000",size:"md",isHashColor:!0},String(r?.clearanceLevel))})]}):e.jsx("div",{className:"flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg",children:e.jsxs(d.Typography,{className:"flex items-center justify-center gap-1",size:"extra-small",variant:"medium",appearance:"body",children:[e.jsx(D,{sx:{height:"16px",width:"16px",color:"#F04438"}}),"No other information found!"]})}))]}),E=n.useRef(null);return e.jsxs("div",{onMouseEnter:Z,onMouseLeave:L,className:o("inline-block relative cursor-pointer",B),ref:E,children:[e.jsxs("div",{className:o("relative",A||J),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border object-cover w-full h-full",b),onError:()=>i(!1)}):t&&l?e.jsx("div",{className:o("bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",x.sizeClasses[N],b),children:x.getInitials((t||"")+" "+(l||""))}):e.jsx("div",{className:o(b,"p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"),children:e.jsx(se.PersonIcon,{fill:"#98A2B3"})}),F&&h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2",h)})]}),e.jsx(ae.UserAvatarPopper,{isOpen:W,onClose:()=>v(!1),anchorEl:E.current,className:"bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600",children:_})]})};H.displayName="UserAvatar";exports.UserAvatar=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("@mui/icons-material"),V=require("@mui/icons-material/EditOutlined"),D=require("@mui/icons-material/WarningRounded"),o=require("../../_virtual/index.cjs.js"),n=require("react"),d=require("../data-display/typography/Typography.cjs.js"),g=require("../data-display/tag/Tag.cjs.js"),ee=require("../data-display/skeleton/Skeleton.cjs.js"),re=require("../../utils/countryFlags.cjs.js"),ae=require("./UserAvatarPopper.cjs.js"),oe=require("./StatusInfoRow.cjs.js"),x=require("./constants.cjs.js"),se=require("./PersonIcon.cjs.js"),ne=require("./useDynamicPosition.cjs.js"),j=({label:t,content:l})=>e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx(d.Typography,{size:"small",variant:"medium",className:"mr-5",appearance:"body",children:t}),l]}),H=({firstName:t,lastName:l,email:U,profilePic:c,size:N="md",hoverSize:T="lg",containerClassName:A="",enablePopper:P=!0,className:B,userId:C,lastViewedOn:u,isActive:m,statusIndicator:F=!1,userDetails:r,isFetchingUserDetails:$=!1,authToken:R,onHover:G,currentlyEditing:z})=>{if(t==="All"&&l==="Users")return e.jsx("div",{className:"p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center",children:e.jsx(O.GroupsOutlined,{sx:{fontSize:16},className:"text-primary-600 dark:text-primary-600"})});const[W,v]=n.useState(!1),[M,i]=n.useState(!1),J=x.sizeClasses[N],{triggerRef:K,dropdownRef:Q,position:f,isVisible:X,show:S,hide:q}=ne.useDynamicPosition(),k=n.useRef({}),I=n.useMemo(()=>{if(m||!u)return!1;const a=new Date(u);return(new Date().getTime()-a.getTime())/(1e3*60*60)<24},[m,u]),h=m?"bg-primary-600 dark:bg-primary-600":I?"bg-primary-300 dark:bg-primary-300":u?"bg-neutral-400 dark:bg-neutral-400":null,b=m?"border-primary-600 dark:border-primary-600":I?"border-primary-300 dark:border-primary-300":u?"border-neutral-400 dark:border-neutral-400":"border-primary-200 dark:border-neutral-800",Y={"2xs":"w-1.5 h-1.5",xs:"w-2 h-2",sm:"w-2.5 h-2.5",md:"w-3 h-3",lg:"w-3.5 h-3.5",xl:"w-4 h-4"};n.useEffect(()=>{if(c)if(k.current[c])i(!0);else{i(!1);const a=new Image,p=R||(typeof localStorage<"u"?localStorage.getItem("token"):null);a.src=c+(p?"?token="+p:""),a.onload=()=>{k.current[c]=a.src,i(!0)},a.onerror=()=>{i(!1)}}else i(!1)},[c,R]),n.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]);const y=c?k.current[c]:void 0,s=n.useRef(null),w=n.useRef(null),Z=()=>{G?.(),t&&l&&P&&(s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{v(!0)},300))},L=a=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{w.current&&!w.current.contains(a.relatedTarget)&&v(!1)},200)},_=e.jsxs("div",{ref:w,className:"bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]",onMouseEnter:()=>{s.current&&clearTimeout(s.current)},onMouseLeave:a=>L(a),children:[e.jsxs("div",{className:"flex flex-col gap-1 items-center p-5",children:[e.jsxs("div",{className:o("relative",x.sizeClasses[T]),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border-2 object-cover w-full h-full",b),onError:()=>i(!1)}):e.jsx("div",{className:o("bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full",b),children:x.getInitials((t||"")+" "+(l||""))}),h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",Y[T],h)})]}),e.jsxs("div",{className:"flex flex-row gap-1 items-center justify-center",children:[e.jsxs(d.Typography,{size:"medium",variant:"semibold",className:"w-full text-center",children:[t||""," ",l||""]}),r?.region&&e.jsx("span",{children:re.getFlagComponentRectangleMd(r?.region)})]}),e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:U||r?.email||""})]}),z?e.jsx("div",{className:"px-5 pb-3",children:e.jsxs("div",{className:"flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]",children:[e.jsx("div",{className:"flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950",children:e.jsx(V,{sx:{width:13,height:13},className:"text-primary-600 dark:text-primary-500"})}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx(d.Typography,{size:"extra-small",variant:"semibold",appearance:"custom",className:"text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500",children:"Currently editing"}),e.jsx(d.Typography,{size:"extra-small",variant:"semibold",className:"truncate",children:z})]})]})}):null,C&&($?e.jsx("div",{className:"p-5",children:e.jsx(ee.Skeleton,{})}):C&&(r?.teams||r?.clearanceLevel||r?.group)?e.jsxs("div",{className:"flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg",children:[e.jsx(oe.StatusInfoRow,{isActive:m,lastViewedOn:u}),r.username&&e.jsx(j,{label:"Username",content:e.jsx("div",{className:"flex gap-2",children:e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:r.username})})}),r?.teams&&r?.teams?.length>0&&e.jsx(j,{label:"Team",content:e.jsxs("div",{className:"flex gap-2",children:[r?.teams?.length>0&&e.jsx(g.Tag,{label:r?.teams[0]?.name,color:r?.teams[0]?.color||"#e38715",size:"md",isHashColor:!0},r?.teams[0]?.id),r?.teams?.length>=2&&e.jsxs("div",{ref:K,className:"relative cursor-pointer",onMouseEnter:S,onMouseLeave:q,onClick:a=>a.stopPropagation(),children:[e.jsx(g.Tag,{label:`+ ${r?.teams?.length-1} More`,color:"#004f08",size:"md",isHashColor:!0},1),X&&e.jsx("div",{ref:Q,className:o("absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60",{"top-full":f.vertical==="bottom","bottom-full":f.vertical==="top","left-0":f.horizontal==="left","right-0":f.horizontal==="right"}),onMouseEnter:S,onMouseLeave:q,children:r?.teams?.slice(1)?.map((a,p)=>e.jsx("div",{className:"my-2",children:e.jsx(g.Tag,{label:a?.name,color:a?.color||"#4A5568",size:"md",isHashColor:!0,className:"w-fit"},a?.id)},a?.id||p))})]})]})}),r?.group&&e.jsx(j,{label:"Role",content:e.jsx(g.Tag,{label:r?.group,color:"#004094",size:"md",isHashColor:!0},r?.group)}),r?.clearanceLevel&&e.jsx(j,{label:"Clearance Level",content:e.jsx(g.Tag,{label:`Level ${r?.clearanceLevel}`,color:"#b30000",size:"md",isHashColor:!0},String(r?.clearanceLevel))})]}):e.jsx("div",{className:"flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg",children:e.jsxs(d.Typography,{className:"flex items-center justify-center gap-1",size:"extra-small",variant:"medium",appearance:"body",children:[e.jsx(D,{sx:{height:"16px",width:"16px",color:"#F04438"}}),"No other information found!"]})}))]}),E=n.useRef(null);return e.jsxs("div",{onMouseEnter:Z,onMouseLeave:L,className:o("inline-block relative cursor-pointer",B),ref:E,children:[e.jsxs("div",{className:o("relative",A||J),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border object-cover w-full h-full",b),onError:()=>i(!1)}):t&&l?e.jsx("div",{className:o(" bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",x.sizeClasses[N],b),children:x.getInitials((t||"")+" "+(l||""))}):e.jsx("div",{className:o(b,"p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"),children:e.jsx(se.PersonIcon,{fill:"#98A2B3"})}),F&&h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2",h)})]}),e.jsx(ae.UserAvatarPopper,{isOpen:W,onClose:()=>v(!1),anchorEl:E.current,className:"bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600",children:_})]})};H.displayName="UserAvatar";exports.UserAvatar=H;
 //# sourceMappingURL=UserAvatar.cjs.js.map

package/dist/components/user-avatar/UserAvatar.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700', \n sizeClasses[size],\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
1	+ {"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n ' bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700', \n sizeClasses[size],\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}

package/dist/components/user-avatar/UserAvatar.es.js CHANGED Viewed

@@ -268,7 +268,7 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
             "div",
             {
               className: l(
-                "bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",
+                " bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",
                 C[z],
                 b
               ),