@lax-wp/design-system 0.13.45 → 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.
- package/dist/components/forms/date-range/DateRange.cjs.js +7 -7
- package/dist/components/forms/date-range/DateRange.cjs.js.map +1 -1
- package/dist/components/forms/date-range/DateRange.es.js +40 -41
- package/dist/components/forms/date-range/DateRange.es.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js.map +1 -1
- package/dist/components/navigation/tabs/TabOptions.cjs.js +1 -1
- package/dist/components/navigation/tabs/TabOptions.cjs.js.map +1 -1
- package/dist/components/navigation/tabs/TabOptions.es.js +36 -36
- package/dist/components/navigation/tabs/TabOptions.es.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs.js +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.es.js +1 -1
- package/dist/components/user-avatar/UserAvatar.es.js.map +1 -1
- package/dist/components/user-avatar/constants.cjs.js +1 -1
- package/dist/components/user-avatar/constants.cjs.js.map +1 -1
- package/dist/components/user-avatar/constants.es.js +8 -8
- package/dist/components/user-avatar/constants.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("@mui/icons-material"),C=require("antd"),S=require("../../../_virtual/index.cjs.js"),d=require("react"),h=require("../../button/Button.cjs.js"),a=require("../../data-display/typography/Typography.cjs.js"),L=require("../../forms/base-input-field/BaseInputField.cjs.js"),M=require("../../forms/select-field/SelectField.cjs.js"),j=require("../../forms/toggle/Toggle.cjs.js"),q=require("../../button/IconButton.cjs.js"),y=require("./types.cjs.js"),l=require("../../icon/icons.generated.cjs.js"),A=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),F=[{label:"Default",value:"default",icon:e.jsx(l.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:t,onApplyFilter:i,setUnsavedChanges:f,handleTabSort:w,onSearchChange:m,hasSuffixRecord:v=!1})=>{const[N,u]=d.useState(!1),[r,p]=d.useState(y.INITIAL_TAB_OPTION_CONFIG),[c,g]=d.useState(""),o=(s,x)=>{p(I=>({...I,[s]:x}))},k=()=>{p({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),m("","contains")},O=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),w(r.sortOrder),f(!0),u(!1),c&&m(c,r.filterType.value)};d.useEffect(()=>{t&&JSON.stringify(t)!==JSON.stringify(r)&&p(t)},[t]);const T=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(M.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:s=>o("filterType",s),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(L.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:c,onChange:s=>g(s),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:F.map(s=>{const x=r.sortOrder===s.value;return e.jsxs(h,{appearance:"outline",status:x?"secondary":"secondary-neutral",id:`sort-option-${s.value}`,onClick:()=>o("sortOrder",s.value),className:"w-full",children:[s.icon,s.label]},s.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(n.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.showCounts,onChange:s=>o("showCounts",s),hideStatus:!0,icon:{checkedIcon:e.jsx(l.VisibilityIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.VisibilityOffIcon,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(l.LockIcon,{className:"text-neutral-800 dark:text-white w-icon h-icon"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.lockOrder,onChange:s=>o("lockOrder",s),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(l.LockIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md"}),uncheckedIcon:e.jsx(l.LockOpenIcon,{className:"cursor-pointer !block text-neutral-700 w-md h-md"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(h,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(h,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:O,disabled:JSON.stringify(t)===JSON.stringify(r)&&c==="",children:"Apply"})]})]});return e.jsx(C.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:T,trigger:["click"],arrow:!1,open:N,onOpenChange:u,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(q,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>u(!0),children:[e.jsx(n.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(y.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(b,{className:"text-primary-600"})]})})})},b=({className:t})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",t),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=b;exports.TabOptions=V;
|
|
2
2
|
//# sourceMappingURL=TabOptions.cjs.js.map
|
|
@@ -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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"}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { Search as
|
|
3
|
-
import { Popover as
|
|
4
|
-
import
|
|
5
|
-
import { useState as u, useEffect as
|
|
2
|
+
import { Search as T, SwapVertOutlined as S, VisibilityOutlined as L, TagOutlined as M, Tune as j } from "@mui/icons-material";
|
|
3
|
+
import { Popover as V } from "antd";
|
|
4
|
+
import A from "../../../_virtual/index.es.js";
|
|
5
|
+
import { useState as u, useEffect as B } from "react";
|
|
6
6
|
import h from "../../button/Button.es.js";
|
|
7
7
|
import { Typography as i } from "../../data-display/typography/Typography.es.js";
|
|
8
|
-
import { BaseInputField as
|
|
9
|
-
import { SelectField as
|
|
10
|
-
import { Toggle as
|
|
11
|
-
import
|
|
12
|
-
import { INITIAL_TAB_OPTION_CONFIG as
|
|
13
|
-
import {
|
|
14
|
-
const
|
|
8
|
+
import { BaseInputField as F } from "../../forms/base-input-field/BaseInputField.es.js";
|
|
9
|
+
import { SelectField as H } from "../../forms/select-field/SelectField.es.js";
|
|
10
|
+
import { Toggle as g } from "../../forms/toggle/Toggle.es.js";
|
|
11
|
+
import J from "../../button/IconButton.es.js";
|
|
12
|
+
import { INITIAL_TAB_OPTION_CONFIG as x } from "./types.es.js";
|
|
13
|
+
import { VisibilityOffIcon as z, VisibilityIcon as D, LockIcon as b, LockOpenIcon as _, FormatListBulletedIcon as P } from "../../icon/icons.generated.es.js";
|
|
14
|
+
const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), W = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { width: a, height: a, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: s, children: /* @__PURE__ */ e("path", { d: "M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), Z = [
|
|
15
15
|
{
|
|
16
16
|
label: "Default",
|
|
17
17
|
value: "default",
|
|
18
|
-
icon: /* @__PURE__ */ e(
|
|
18
|
+
icon: /* @__PURE__ */ e(P, { className: "w-icon h-icon" })
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
label: "A-Z",
|
|
22
22
|
value: "asc",
|
|
23
|
-
icon: /* @__PURE__ */ e(
|
|
23
|
+
icon: /* @__PURE__ */ e(R, { className: "w-icon h-icon" })
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
label: "Z-A",
|
|
27
27
|
value: "desc",
|
|
28
|
-
icon: /* @__PURE__ */ e(
|
|
28
|
+
icon: /* @__PURE__ */ e(W, { className: "w-icon h-icon" })
|
|
29
29
|
}
|
|
30
30
|
], ie = ({
|
|
31
31
|
savedConfig: a,
|
|
@@ -35,9 +35,9 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
35
35
|
onSearchChange: m,
|
|
36
36
|
hasSuffixRecord: N = !1
|
|
37
37
|
}) => {
|
|
38
|
-
const [k, c] = u(!1), [l, d] = u(
|
|
39
|
-
d((
|
|
40
|
-
...
|
|
38
|
+
const [k, c] = u(!1), [l, d] = u(x), [n, f] = u(""), o = (r, p) => {
|
|
39
|
+
d((I) => ({
|
|
40
|
+
...I,
|
|
41
41
|
[r]: p
|
|
42
42
|
}));
|
|
43
43
|
}, y = () => {
|
|
@@ -55,19 +55,19 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
55
55
|
lockOrder: l.lockOrder
|
|
56
56
|
}), v(l.sortOrder), w(!0), c(!1), n && m(n, l.filterType.value);
|
|
57
57
|
};
|
|
58
|
-
|
|
58
|
+
B(() => {
|
|
59
59
|
a && JSON.stringify(a) !== JSON.stringify(l) && d(a);
|
|
60
60
|
}, [a]);
|
|
61
61
|
const C = /* @__PURE__ */ t("div", { children: [
|
|
62
62
|
/* @__PURE__ */ t("div", { className: "p-5 space-y-5", children: [
|
|
63
63
|
/* @__PURE__ */ t("div", { className: "space-y-2", children: [
|
|
64
64
|
/* @__PURE__ */ t(i, { size: "extra-small", variant: "regular", className: "!text-neutral-600 dark:!text-neutral-400 uppercase", appearance: "title", children: [
|
|
65
|
-
/* @__PURE__ */ e(
|
|
65
|
+
/* @__PURE__ */ e(T, { sx: { height: "14px", width: "14px" } }),
|
|
66
66
|
" Filter Tabs"
|
|
67
67
|
] }),
|
|
68
68
|
/* @__PURE__ */ t("div", { className: "grid grid-cols-[150px_3fr] gap-2", children: [
|
|
69
69
|
/* @__PURE__ */ e(
|
|
70
|
-
|
|
70
|
+
H,
|
|
71
71
|
{
|
|
72
72
|
showSearch: !1,
|
|
73
73
|
allowClear: !1,
|
|
@@ -80,7 +80,7 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
80
80
|
}
|
|
81
81
|
),
|
|
82
82
|
/* @__PURE__ */ e(
|
|
83
|
-
|
|
83
|
+
F,
|
|
84
84
|
{
|
|
85
85
|
id: "base-input-field-tab-options-filter",
|
|
86
86
|
placeholder: "Insert value",
|
|
@@ -96,7 +96,7 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
96
96
|
/* @__PURE__ */ e(S, { sx: { height: "14px", width: "14px" } }),
|
|
97
97
|
" Sort"
|
|
98
98
|
] }),
|
|
99
|
-
/* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children:
|
|
99
|
+
/* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: Z.map((r) => {
|
|
100
100
|
const p = l.sortOrder === r.value;
|
|
101
101
|
return /* @__PURE__ */ t(
|
|
102
102
|
h,
|
|
@@ -129,14 +129,14 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
129
129
|
] })
|
|
130
130
|
] }),
|
|
131
131
|
/* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
|
|
132
|
-
|
|
132
|
+
g,
|
|
133
133
|
{
|
|
134
134
|
isChecked: l.showCounts,
|
|
135
135
|
onChange: (r) => o("showCounts", r),
|
|
136
136
|
hideStatus: !0,
|
|
137
137
|
icon: {
|
|
138
|
-
checkedIcon: /* @__PURE__ */ e(
|
|
139
|
-
uncheckedIcon: /* @__PURE__ */ e(
|
|
138
|
+
checkedIcon: /* @__PURE__ */ e(D, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm" }),
|
|
139
|
+
uncheckedIcon: /* @__PURE__ */ e(z, { className: "cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm" })
|
|
140
140
|
},
|
|
141
141
|
withIcon: !0
|
|
142
142
|
}
|
|
@@ -144,22 +144,22 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
144
144
|
] }),
|
|
145
145
|
/* @__PURE__ */ t("div", { className: "rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3", children: [
|
|
146
146
|
/* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
|
|
147
|
-
/* @__PURE__ */ e("div", { className: "flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg", children: /* @__PURE__ */ e(
|
|
147
|
+
/* @__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" }) }),
|
|
148
148
|
/* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: [
|
|
149
149
|
/* @__PURE__ */ e(i, { size: "small", variant: "medium", appearance: "title", children: "Lock Order" }),
|
|
150
150
|
/* @__PURE__ */ e(i, { size: "extra-small", variant: "regular", appearance: "subtitle", children: "Prevent tab reordering" })
|
|
151
151
|
] })
|
|
152
152
|
] }),
|
|
153
153
|
/* @__PURE__ */ e("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ e(
|
|
154
|
-
|
|
154
|
+
g,
|
|
155
155
|
{
|
|
156
156
|
isChecked: l.lockOrder,
|
|
157
157
|
onChange: (r) => o("lockOrder", r),
|
|
158
158
|
hideStatus: !0,
|
|
159
159
|
withIcon: !0,
|
|
160
160
|
icon: {
|
|
161
|
-
checkedIcon: /* @__PURE__ */ e(
|
|
162
|
-
uncheckedIcon: /* @__PURE__ */ e(
|
|
161
|
+
checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-md h-md" }),
|
|
162
|
+
uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-md h-md" })
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
) })
|
|
@@ -183,7 +183,7 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
183
183
|
] })
|
|
184
184
|
] });
|
|
185
185
|
return /* @__PURE__ */ e(
|
|
186
|
-
|
|
186
|
+
V,
|
|
187
187
|
{
|
|
188
188
|
classNames: {
|
|
189
189
|
body: "rounded-md w-[348px] !p-0"
|
|
@@ -195,21 +195,21 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
195
195
|
open: k,
|
|
196
196
|
onOpenChange: c,
|
|
197
197
|
children: /* @__PURE__ */ e("div", { className: "border-l border-neutral-200 dark:border-neutral-800 pl-2", children: /* @__PURE__ */ t(
|
|
198
|
-
|
|
198
|
+
J,
|
|
199
199
|
{
|
|
200
200
|
tooltip: "Manage Tabs",
|
|
201
201
|
variant: "ghost",
|
|
202
202
|
className: "!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",
|
|
203
203
|
onClick: () => c(!0),
|
|
204
204
|
children: [
|
|
205
|
-
/* @__PURE__ */ e(
|
|
206
|
-
JSON.stringify(l) !== JSON.stringify(
|
|
205
|
+
/* @__PURE__ */ e(j, { sx: { height: "20px", width: "20px" } }),
|
|
206
|
+
JSON.stringify(l) !== JSON.stringify(x) && /* @__PURE__ */ e(E, { className: "text-primary-600" })
|
|
207
207
|
]
|
|
208
208
|
}
|
|
209
209
|
) })
|
|
210
210
|
}
|
|
211
211
|
);
|
|
212
|
-
},
|
|
212
|
+
}, E = ({ className: a }) => /* @__PURE__ */ e(
|
|
213
213
|
"svg",
|
|
214
214
|
{
|
|
215
215
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -217,12 +217,12 @@ const P = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
217
217
|
height: "5",
|
|
218
218
|
viewBox: "0 0 4 4",
|
|
219
219
|
fill: "none",
|
|
220
|
-
className:
|
|
220
|
+
className: A("absolute top-0.5 right-0.5", a),
|
|
221
221
|
children: /* @__PURE__ */ e("circle", { cx: "2", cy: "2", r: "2", fill: "currentColor" })
|
|
222
222
|
}
|
|
223
223
|
);
|
|
224
224
|
export {
|
|
225
|
-
|
|
225
|
+
E as Indicator,
|
|
226
226
|
ie as TabOptions
|
|
227
227
|
};
|
|
228
228
|
//# sourceMappingURL=TabOptions.es.js.map
|
|
@@ -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":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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;
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=UserAvatar.cjs.js.map
|