@lax-wp/design-system 0.13.46 → 0.13.48
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/floating-bar/FloatingBar.cjs.js +1 -1
- package/dist/components/floating-bar/FloatingBar.cjs.js.map +1 -1
- package/dist/components/floating-bar/FloatingBar.es.js +12 -12
- package/dist/components/floating-bar/FloatingBar.es.js.map +1 -1
- package/dist/components/forms/checkbox/Checkbox.cjs.js +1 -1
- package/dist/components/forms/checkbox/Checkbox.cjs.js.map +1 -1
- package/dist/components/forms/checkbox/Checkbox.es.js +56 -52
- package/dist/components/forms/checkbox/Checkbox.es.js.map +1 -1
- 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 +41 -40
- package/dist/components/forms/date-range/DateRange.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 +2 -2
- package/dist/components/navigation/tabs/TabOptions.es.js.map +1 -1
- package/dist/components/navigation/tabs/Tabs.cjs.js +1 -1
- package/dist/components/navigation/tabs/Tabs.cjs.js.map +1 -1
- package/dist/components/navigation/tabs/Tabs.es.js +66 -66
- package/dist/components/navigation/tabs/Tabs.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/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRange.es.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n eventName: K,\n handler: (event: DocumentEventMap[K]) => void\n) => {\n const savedHandler = useRef(handler);\n\n useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n useEffect(() => {\n const eventListener = (event: DocumentEventMap[K]) =>\n savedHandler.current(event);\n document.addEventListener(eventName, eventListener);\n return () => {\n document.removeEventListener(eventName, eventListener);\n };\n }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n /** Unique identifier for the date range */\n id: string;\n /** Label text to display above the date range */\n label?: string;\n /** Start date value (ISO string or formatted date string) */\n startDate: string;\n /** End date value (ISO string or formatted date string) */\n endDate: string;\n /** Callback function called when date range changes */\n onChange(data: any): void;\n /** Callback function called when calendar selection changes */\n onCalendarChange?(data: any): void;\n /** Whether the field is required */\n required?: boolean;\n /** Error message to display below the date range */\n errorMessage?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether the date range is disabled */\n disabled?: boolean;\n /** Custom date format */\n dateFormat?: string;\n /** Whether popup should render inside parent element */\n shouldPopOnParent?: boolean;\n /** Custom function to get popup container */\n getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n /** Maximum date range in days */\n maxDateRange?: number;\n /** Whether the picker is open */\n open?: boolean;\n /** Callback function called when open state changes */\n onOpenChange?(open: boolean): void;\n /** Placement of the dropdown */\n placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n /** Whether to render as an icon button that triggers the date picker */\n renderAsIconButton?: boolean;\n /** Additional CSS classes for the icon button */\n iconButtonClassName?: string;\n /** Additional CSS classes for the calendar icon inside the button */\n iconClassName?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n * id=\"event-dates\"\n * label=\"Event Duration\"\n * startDate={startDate}\n * endDate={endDate}\n * onChange={(dates) => {\n * setStartDate(dates[0]);\n * setEndDate(dates[1]);\n * }}\n * required\n * />\n * ```\n */\nexport const DateRange = ({\n onCalendarChange = undefined,\n onChange,\n required,\n label,\n startDate,\n endDate,\n errorMessage,\n className,\n id,\n disabled = false,\n dateFormat,\n shouldPopOnParent = true,\n getPopupContainer: customGetPopupContainer,\n maxDateRange,\n open,\n onOpenChange,\n placement = \"bottomLeft\",\n renderAsIconButton = false,\n iconButtonClassName,\n iconClassName,\n labelExtra,\n inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n const emphasisBg =\n emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n const emphasisBorder =\n emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n const [isOpen, setIsOpen] = useState(false);\n const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n const pickerRef = useRef<any>(null);\n const normalPickerRef = useRef<any>(null);\n const suppressNextIconOpenRef = useRef(false);\n const suppressNextNormalOpenRef = useRef(false);\n\n const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n if (!str) return null;\n return dayjs(str);\n };\n\n const START_ID = `date-range-start-${generateShortUUID()}`;\n const END_ID = `date-range-end-${generateShortUUID()}`;\n\n const handleIconClick = () => {\n setIsOpen(true);\n setTimeout(() => {\n if (pickerRef.current) {\n pickerRef.current.focus();\n }\n }, 0);\n };\n\n useEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === KEYBOARD_KEYS.ENTER &&\n document.activeElement instanceof HTMLInputElement\n ) {\n if (document?.activeElement?.id === START_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([date, parseDate(endDate)]);\n }\n }\n if (document?.activeElement?.id === END_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([parseDate(startDate), date]);\n }\n }\n }\n });\n\n const disabledDate = useCallback(\n (current: dayjs.Dayjs) => {\n const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n if (!maxDateRange) return false;\n\n if (start) {\n return (\n current.isBefore(start.startOf(\"day\")) ||\n current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n );\n }\n\n if (end) {\n return (\n current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n current.isAfter(end.endOf(\"day\"))\n );\n }\n\n return false;\n },\n [startDate, endDate, maxDateRange]\n );\n\n const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n if (e.key === KEYBOARD_KEYS.ENTER) {\n const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n if (!pickerIsOpen) {\n e.preventDefault();\n e.stopPropagation();\n\n const form = (e.target as HTMLElement).closest('form');\n if (form) {\n const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n if (submitBtn) {\n submitBtn.click();\n } else {\n form.requestSubmit();\n }\n }\n }\n }\n }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextIconOpenRef.current) {\n suppressNextIconOpenRef.current = false;\n setIsOpen(false);\n return;\n }\n\n setIsOpen(nextOpen);\n if (!nextOpen) {\n suppressNextIconOpenRef.current = true;\n requestAnimationFrame(() => {\n pickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextIconOpenRef.current = false;\n });\n });\n }\n }, []);\n\n const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextNormalOpenRef.current) {\n suppressNextNormalOpenRef.current = false;\n setIsNormalPickerOpen(false);\n onOpenChange?.(false);\n return;\n }\n\n setIsNormalPickerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n if (!nextOpen) {\n suppressNextNormalOpenRef.current = true;\n requestAnimationFrame(() => {\n normalPickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextNormalOpenRef.current = false;\n });\n });\n }\n }, [onOpenChange]);\n\n if (renderAsIconButton) {\n return (\n <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n <IconButton\n onClick={handleIconClick}\n disabled={disabled}\n variant=\"default\"\n className={iconButtonClassName}\n >\n <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n </IconButton>\n <RangePicker\n ref={pickerRef}\n onChange={(dates) => {\n onChange(dates);\n setIsOpen(false);\n }}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n autoComplete=\"off\"\n open={isOpen}\n onOpenChange={handleIconPickerOpenChange}\n placement={placement}\n // style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n />\n </div>\n );\n }\n\n return (\n <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n {(label || labelExtra) && (\n <div className=\"mb-1 flex items-center justify-between gap-1\">\n <InputLabel label={label || \"\"} required={required || false} />\n {labelExtra}\n </div>\n )}\n {(emphasisBg || emphasisBorder) && (\n <style>{`\n #${id} .ant-picker {\n background-color: ${emphasisBg} !important;\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker:hover {\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker.ant-picker-focused {\n border-color: ${emphasisBorder} !important;\n box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n }\n #${id} .ant-picker .ant-picker-input > input {\n color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n }\n `}</style>\n )}\n <RangePicker\n ref={normalPickerRef}\n onChange={onChange}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={\n <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n }\n suffixIcon={\n <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n }\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n open={open ?? isNormalPickerOpen}\n onOpenChange={handleNormalOpenChange}\n autoComplete=\"off\"\n placement={placement}\n />\n {errorMessage && (\n <p\n className={cn(\n \"text-sm font-inter font-normal text-left pt-[6px]\",\n \"text-red-500\"\n )}\n >\n {errorMessage}\n </p>\n )}\n </div>\n );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateRange.es.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n eventName: K,\n handler: (event: DocumentEventMap[K]) => void\n) => {\n const savedHandler = useRef(handler);\n\n useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n useEffect(() => {\n const eventListener = (event: DocumentEventMap[K]) =>\n savedHandler.current(event);\n document.addEventListener(eventName, eventListener);\n return () => {\n document.removeEventListener(eventName, eventListener);\n };\n }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n /** Unique identifier for the date range */\n id: string;\n /** Label text to display above the date range */\n label?: string;\n /** Start date value (ISO string or formatted date string) */\n startDate: string;\n /** End date value (ISO string or formatted date string) */\n endDate: string;\n /** Callback function called when date range changes */\n onChange(data: any): void;\n /** Callback function called when calendar selection changes */\n onCalendarChange?(data: any): void;\n /** Whether the field is required */\n required?: boolean;\n /** Error message to display below the date range */\n errorMessage?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether the date range is disabled */\n disabled?: boolean;\n /** Custom date format */\n dateFormat?: string;\n /** Whether popup should render inside parent element */\n shouldPopOnParent?: boolean;\n /** Custom function to get popup container */\n getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n /** Maximum date range in days */\n maxDateRange?: number;\n /** Whether the picker is open */\n open?: boolean;\n /** Callback function called when open state changes */\n onOpenChange?(open: boolean): void;\n /** Placement of the dropdown */\n placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n /** Whether to render as an icon button that triggers the date picker */\n renderAsIconButton?: boolean;\n /** Additional CSS classes for the icon button */\n iconButtonClassName?: string;\n /** Additional CSS classes for the calendar icon inside the button */\n iconClassName?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n * id=\"event-dates\"\n * label=\"Event Duration\"\n * startDate={startDate}\n * endDate={endDate}\n * onChange={(dates) => {\n * setStartDate(dates[0]);\n * setEndDate(dates[1]);\n * }}\n * required\n * />\n * ```\n */\nexport const DateRange = ({\n onCalendarChange = undefined,\n onChange,\n required,\n label,\n startDate,\n endDate,\n errorMessage,\n className,\n id,\n disabled = false,\n dateFormat,\n shouldPopOnParent = true,\n getPopupContainer: customGetPopupContainer,\n maxDateRange,\n open,\n onOpenChange,\n placement = \"bottomLeft\",\n renderAsIconButton = false,\n iconButtonClassName,\n iconClassName,\n labelExtra,\n inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n const emphasisBg =\n emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n const emphasisBorder =\n emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n const [isOpen, setIsOpen] = useState(false);\n const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n const pickerRef = useRef<any>(null);\n const normalPickerRef = useRef<any>(null);\n const suppressNextIconOpenRef = useRef(false);\n const suppressNextNormalOpenRef = useRef(false);\n\n const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n if (!str) return null;\n return dayjs(str);\n };\n\n const START_ID = `date-range-start-${generateShortUUID()}`;\n const END_ID = `date-range-end-${generateShortUUID()}`;\n\n const handleIconClick = () => {\n setIsOpen(true);\n setTimeout(() => {\n if (pickerRef.current) {\n pickerRef.current.focus();\n }\n }, 0);\n };\n\n useEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === KEYBOARD_KEYS.ENTER &&\n document.activeElement instanceof HTMLInputElement\n ) {\n if (document?.activeElement?.id === START_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([date, parseDate(endDate)]);\n }\n }\n if (document?.activeElement?.id === END_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([parseDate(startDate), date]);\n }\n }\n }\n });\n\n const disabledDate = useCallback(\n (current: dayjs.Dayjs) => {\n const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n if (!maxDateRange) return false;\n\n if (start) {\n return (\n current.isBefore(start.startOf(\"day\")) ||\n current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n );\n }\n\n if (end) {\n return (\n current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n current.isAfter(end.endOf(\"day\"))\n );\n }\n\n return false;\n },\n [startDate, endDate, maxDateRange]\n );\n\n const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n if (e.key === KEYBOARD_KEYS.ENTER) {\n const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n if (!pickerIsOpen) {\n e.preventDefault();\n e.stopPropagation();\n\n const form = (e.target as HTMLElement).closest('form');\n if (form) {\n const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n if (submitBtn) {\n submitBtn.click();\n } else {\n form.requestSubmit();\n }\n }\n }\n }\n }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextIconOpenRef.current) {\n suppressNextIconOpenRef.current = false;\n setIsOpen(false);\n return;\n }\n\n setIsOpen(nextOpen);\n if (!nextOpen) {\n suppressNextIconOpenRef.current = true;\n requestAnimationFrame(() => {\n pickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextIconOpenRef.current = false;\n });\n });\n }\n }, []);\n\n const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextNormalOpenRef.current) {\n suppressNextNormalOpenRef.current = false;\n setIsNormalPickerOpen(false);\n onOpenChange?.(false);\n return;\n }\n\n setIsNormalPickerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n if (!nextOpen) {\n suppressNextNormalOpenRef.current = true;\n requestAnimationFrame(() => {\n normalPickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextNormalOpenRef.current = false;\n });\n });\n }\n }, [onOpenChange]);\n\n if (renderAsIconButton) {\n return (\n <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n <IconButton\n onClick={handleIconClick}\n disabled={disabled}\n variant=\"default\"\n className={iconButtonClassName}\n >\n <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n </IconButton>\n <RangePicker\n ref={pickerRef}\n onChange={(dates) => {\n onChange(dates);\n setIsOpen(false);\n }}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n autoComplete=\"off\"\n open={isOpen}\n onOpenChange={handleIconPickerOpenChange}\n placement={placement}\n style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n />\n </div>\n );\n }\n\n return (\n <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n {(label || labelExtra) && (\n <div className=\"mb-1 flex items-center justify-between gap-1\">\n <InputLabel label={label || \"\"} required={required || false} />\n {labelExtra}\n </div>\n )}\n {(emphasisBg || emphasisBorder) && (\n <style>{`\n #${id} .ant-picker {\n background-color: ${emphasisBg} !important;\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker:hover {\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker.ant-picker-focused {\n border-color: ${emphasisBorder} !important;\n box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n }\n #${id} .ant-picker .ant-picker-input > input {\n color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n }\n `}</style>\n )}\n <RangePicker\n ref={normalPickerRef}\n onChange={onChange}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={\n <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n }\n suffixIcon={\n <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n }\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n open={open ?? isNormalPickerOpen}\n onOpenChange={handleNormalOpenChange}\n autoComplete=\"off\"\n placement={placement}\n />\n {errorMessage && (\n <p\n className={cn(\n \"text-sm font-inter font-normal text-left pt-[6px]\",\n \"text-red-500\"\n )}\n >\n {errorMessage}\n </p>\n )}\n </div>\n );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"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"),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-
|
|
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-sm h-sm"}),uncheckedIcon:e.jsx(l.LockOpenIcon,{className:"cursor-pointer !block text-neutral-700 w-sm h-sm"})}})})]})]})]}),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 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
|
+
{"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-sm h-sm\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
|
|
@@ -158,8 +158,8 @@ const R = ({ fontSize: a = 24, className: s }) => /* @__PURE__ */ e("svg", { wid
|
|
|
158
158
|
hideStatus: !0,
|
|
159
159
|
withIcon: !0,
|
|
160
160
|
icon: {
|
|
161
|
-
checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-
|
|
162
|
-
uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-
|
|
161
|
+
checkedIcon: /* @__PURE__ */ e(b, { className: "cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm" }),
|
|
162
|
+
uncheckedIcon: /* @__PURE__ */ e(_, { className: "cursor-pointer !block text-neutral-700 w-sm h-sm" })
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
) })
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"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-sm h-sm\" />,\n uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n Reset\n </Button>\n <Button\n id=\"btn-tab-options-apply\"\n appearance=\"filled\"\n status=\"primary\"\n className=\"w-full\"\n onClick={applyFilter}\n disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n >\n Apply\n </Button>\n </div>\n </div>\n );\n\n return (\n <Popover\n classNames={{\n body: 'rounded-md w-[348px] !p-0',\n }}\n placement=\"bottomLeft\"\n content={content}\n trigger={['click']}\n arrow={false}\n open={isTabOptionsVisible}\n onOpenChange={setIsTabOptionsVisible}\n >\n <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n <IconButton\n tooltip=\"Manage Tabs\"\n variant=\"ghost\"\n className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n onClick={() => setIsTabOptionsVisible(true)}\n >\n <Tune sx={{ height: '20px', width: '20px' }} />\n {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n </IconButton>\n </div>\n </Popover>\n );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"5\"\n height=\"5\"\n viewBox=\"0 0 4 4\"\n fill=\"none\"\n className={classNames('absolute top-0.5 right-0.5', className)}\n >\n <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","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 n=require("react/jsx-runtime"),v=require("@dnd-kit/core"),ne=require("@dnd-kit/sortable"),we=require("antd"),c=require("../../../_virtual/index.cjs.js"),a=require("react"),Dt=require("react-i18next"),Je=require("@mui/icons-material/MoreHorizOutlined"),Vt=require("./types.cjs.js"),Mt=require("../../../utils/formatters.cjs.js"),Lt=require("../../../providers/design-system-provider/hooks.cjs.js"),qt=require("../../../hooks/useTextWidth.cjs.js"),Rt=require("../../button/IconButton.cjs.js"),S=require("../../buttons/option-button/OptionButton.cjs.js"),Bt=require("../../forms/search-bar/SearchBar.cjs.js"),ke=require("../../tooltip/Tooltip.cjs.js"),Ht=require("../../icons/EditIcon.cjs.js"),Ut=require("react-toastify"),ye=require("./TabSwitch.cjs.js"),k=require("../../icon/icons.generated.cjs.js"),Qe=require("./SortableTab.cjs.js"),zt=require("./DropableWrapper.cjs.js"),Wt=require("./MoreButton.cjs.js"),Pt=require("./TabOptions.cjs.js"),Ft=require("./TabDragOverlay.cjs.js"),$t=()=>Math.random().toString(16).slice(2,13),se=["[&_.ant-dropdown-menu-item]:!outline-none","[&_.ant-dropdown-menu-submenu-title]:!outline-none","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:dark:bg-black-600","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"].join(" ");let Se=null;const Te=T=>{T?(Se=document.activeElement,setTimeout(()=>{document.querySelector(".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title")?.focus()},50)):setTimeout(()=>{Se?.focus(),Se=null},0)},d={SELECT:"Select",MOVE_LEFT:"MoveLeft",MOVE_RIGHT:"MoveRight",HIDE:"Hide",UNHIDE:"Unhide",COPY_LINK:"CopyLink",DELETE:"Delete",PIN:"Pin",UNPIN:"Unpin",EDIT:"Edit"},At=({variant:T="default",tabs:O=[],activeTab:i,onTabClick:Xe,suffixRecord:P,isLoading:Ze,size:_="md",className:Ce,draggable:E=!1,showAllItems:F=!1,copyLink:Ke=!1,isDisabled:et=!1,color:ae="light",iconsOnly:tt=!1,tabIcons:oe={},height:nt="h-6",fullWidth:re=!1,fitContentWidth:st=!1,disableAnimation:at=!1,onEdit:je,onDelete:Ie,onCopyLink:Ne,allowPin:C=!1,isFullWidth:$=!1,rightSection:L,initialTabs:ot,tabConfig:rt,onTabConfigChange:ve,onTabsChange:Oe,parentContainer:it=document.body,tabKey:j,linkConfig:x,showTabOptions:lt=!0})=>{const g=Lt.useTabConfig(),_e=j?g?.getTabSettings(j):void 0,ie=ot??_e?.tab_items,A=rt??_e?.tab_options,[le,ct]=a.useState(""),[N,G]=a.useState(!1),[q,dt]=a.useState(0),[u,ce]=a.useState([]),[Y,ut]=a.useState([]),[pt,J]=a.useState(null),[D,Q]=a.useState(null),[xt,Ee]=a.useState(!1),[De,Ve]=a.useState(A??Vt.INITIAL_TAB_OPTION_CONFIG),[de,bt]=a.useState(""),[Me,mt]=a.useState("contains"),{showCounts:y,lockOrder:R,sortOrder:ue}=De,{t:p}=Dt.useTranslation(),X=a.useRef(null),ft=a.useRef(null),Le=a.useRef(q),{measureText:B}=qt.useTextWidth(),H=a.useMemo(()=>$t(),[]),ht=v.useSensors(v.useSensor(v.MouseSensor,{activationConstraint:{distance:5}}),v.useSensor(v.TouchSensor,{activationConstraint:{delay:300,tolerance:5}})),b=a.useMemo(()=>P&&Object.fromEntries(Object.entries(P).map(([e,t])=>[e,Mt.formatCount(t)])),[P]),qe=a.useMemo(()=>Y.filter(({is_hidden:e})=>!e),[Y]),V=a.useMemo(()=>Y.filter(({is_hidden:e})=>e),[Y]),Re=a.useMemo(()=>qe.filter(({name:e})=>{if(!de)return!0;const t=(e??"").toLowerCase(),s=de.toLowerCase();return Me==="contains"?t.includes(s):!t.includes(s)}),[qe,de,Me]),r=a.useMemo(()=>[...Re].sort((e,t)=>e.is_pinned&&!t.is_pinned?-1:!e.is_pinned&&t.is_pinned?1:0),[Re]),gt=q<r.length,Z=F?r.length:gt?q:r.length,Be=r.findIndex(e=>e.name===i)>=Z,He=u.length-Z-(Be?1:0);Le.current=q;const U=a.useCallback(e=>{ce(e),Oe?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_items:e})},[Oe,j,g]),wt=a.useCallback(e=>{Ve(e),ve?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_options:e})},[ve,j,g]),Ue=e=>e.is_pinned?32:0,pe=a.useCallback(e=>{if(!e)return;const t=E?30:0,s=y?190:84,l=_==="sm"?4:8,o=32;let m=0,ee=0,w=0;const f=e-(L?.width||0)-t,Fe=Le.current,$e=Fe<r.length,Ae=V.length>0;for(let h=0;h<r.length;h++){const I=r[h],te=b?.[I.name]?String(b?.[I.name]):"",fe=y&&te?B(te,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,he=B(I?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),ge=C?Ue(I):0,Ye=he+fe+o+l+ge;if(I.name===i&&(ee=Ye),m+=Ye,f>m+($e||Ae?s:0)+h*25)w=h+1;else break}const Ge=r.length-w;if(Ge+V.length===1&&V.length===0&&Ge===1&&w<r.length){const h=r[w];if(h){const I=b?.[h.name]?String(b?.[h.name]):"",te=y&&I?B(I,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,fe=B(h?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),he=C?Ue(h):0,ge=fe+te+o+l+he;f>=m+ge&&(w+=1)}}const Et=F?r.length:w;r.findIndex(h=>h.name===i)>=Et&&(m+=ee,f<m+($e||Ae?s:0)&&(w=Math.max(w-1,0))),w!==Fe&&dt(w)},[r,y,F,C,b,L?.width,i,_,E,V.length,B]),xe=a.useCallback(()=>{if(typeof window<"u")return new URLSearchParams(window.location.search);if(x&&g?.getSearchParam){const e=new URLSearchParams,t=g.getSearchParam(x.key);return t&&e.set(x.key,t),e}return new URLSearchParams},[x,g]),be=a.useCallback((e,t)=>(x&&(t===x.defaultLink?e.delete(x.key):e.set(x.key,t),x.onResolve?.(e)),e),[x]),z=a.useCallback(e=>x?`?${be(xe(),e).toString()}`:void 0,[be,xe,x]),kt=Ke||!!x,yt=a.useCallback(async e=>{const t=z(e),s=typeof window<"u"?window.location.origin:"",l=typeof window<"u"?window.location.pathname:"",o=t?`${s}${l}${t}`:`${s}${l}`;await navigator.clipboard.writeText(o),Ut.toast.success(p("Link copied to clipboard"),{toastId:"Link copied to clipboard"}),Ne?.(e,o)},[z,p,Ne]),W=e=>{if(G(!1),Xe?.(e),x&&g?.navigate){const t=be(xe(),e);g.navigate(`?${t.toString()}`)}},ze=e=>{if(r.length<=1)return;const t=u.map(o=>o.name===e?{...o,is_hidden:!0}:o),s=r.findIndex(o=>o.name===e),l=s===0?1:s-1;W(r[l].name),U(t)},St=e=>{const t=u.map(s=>s.name===e?{...s,is_hidden:!1}:s);G(!1),U(t)},K=e=>{if(!C)return;const t=u.map(s=>s.name===e?{...s,is_pinned:!s.is_pinned}:s);U(t)},We=(e,t)=>{const s=u.findIndex(({name:o})=>o===e),l=t==="left"?s-(u[s-1]?.name===i?2:1):s+1;U(ne.arrayMove(u,s,l))},Pe=()=>G(!N),Tt=e=>Q(e.active.id),Ct=e=>{const{active:t,over:s}=e;if(s?.id==="more-tabs"){ze(t.id),Q(null),J(null);return}const l=u.findIndex(({name:m})=>m===t.id),o=u.findIndex(({name:m})=>m===s?.id);U(ne.arrayMove(u,l,o)),Q(null),J(null)},jt=()=>{Q(null),J(null)},It=e=>{J(e.over?.id==="more-tabs"?"more-tabs":null)},Nt=()=>{},vt=(e,t)=>{bt(e),mt(t)},me=(e,t=!1,s=!1)=>{const o=u.find(f=>f.name===e)?.is_pinned,m=[{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowOutwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Select Tab"),className:"text-black-900 dark:text-white"}),key:d.SELECT,onClick:()=>W(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowUpwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Up"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_LEFT,disabled:R,onClick:()=>We(e,"left")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowDownwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Down"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_RIGHT,disabled:R,onClick:()=>We(e,"right")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ContentCopyIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Copy Link"),className:"text-black-900 dark:text-white"}),key:d.COPY_LINK,onClick:()=>yt(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityOffIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Hide"),className:"text-black-900 dark:text-white"}),key:d.HIDE,onClick:()=>ze(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Unhide"),className:"text-black-900 dark:text-white"}),key:d.UNHIDE,onClick:()=>St(e)},{label:n.jsx(S.OptionButton,{icon:o?n.jsx(k.UnpinFilledIcon,{size:20,className:"rotate-12 text-inherit dark:text-inherit"}):n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"}),text:p(o?"Unpin":"Pin"),className:"text-black-900 dark:text-white",notVisible:!C}),key:o?d.UNPIN:d.PIN,onClick:()=>K(e)},{label:n.jsx(S.OptionButton,{className:"text-black-900 dark:text-white",icon:n.jsx(Ht.EditIcon,{}),text:p("Edit"),notVisible:!je}),key:d.EDIT,onClick:()=>je?.(e)},{label:n.jsx(S.OptionButton,{className:"text-error-600 dark:text-error-600",icon:n.jsx(k.DeleteIcon,{size:18,className:"text-error-600 dark:text-error-600"}),text:p("Delete"),notVisible:!Ie}),key:d.DELETE,onClick:()=>Ie?.(e)}],ee=[d.HIDE,d.UNHIDE],w=[d.SELECT,d.MOVE_LEFT,d.MOVE_RIGHT,d.UNHIDE];return m.filter(f=>t?f.key===d.UNHIDE:s?!ee.includes(f.key):!w.includes(f.key)).filter(f=>kt?!0:f.key!==d.COPY_LINK).filter(f=>r.length===1?f.key!==d.HIDE:!0)},M=(e,t)=>({classValue:{default:c("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),secondary:c("flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",_==="sm"?"py-1 px-3 text-sm":"py-2 px-4 text-base")},selectedClassValue:{default:c("absolute left-0 bottom-0 w-full h-[3px] bg-primary-600"),secondary:c("absolute inset-0 bg-primary-50 dark:bg-primary-975 rounded-lg")},textClassValue:{default:c("relative uppercase font-sans font-semibold text-sm whitespace-nowrap",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 hover:text-neutral-500 dark:text-neutral-100 dark:hover:text-white"),secondary:c("relative whitespace-nowrap text-sm",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 dark:text-neutral-400")}})[e][T];a.useEffect(()=>{if(!X.current||T==="switch")return;const e=new ResizeObserver(t=>{const s=t[0].contentRect.width;pe(s)});return e.observe(X.current),pe(X.current.clientWidth),()=>e.disconnect()},[pe,T]);const Ot=JSON.stringify(O),_t=JSON.stringify(ie?.map(({name:e})=>e));return a.useEffect(()=>{if(ie?.length){let e=[...ie];O.forEach(t=>{e.find(s=>s.name===t)||e.push({name:t,is_default:!1,is_hidden:!1,is_pinned:!1})}),e=e.filter((t,s,l)=>O.includes(t.name)&&s===l.findIndex(o=>o.name===t.name)),ce(e)}else ce(O.map(e=>({name:e,is_default:!1,is_hidden:!1,is_pinned:!1})).filter((e,t,s)=>t===s.findIndex(l=>l.name===e.name)))},[Ot,_t]),a.useEffect(()=>{A&&Ve(A)},[A]),a.useEffect(()=>{if(!u.length)return;const e=[...u];ue==="asc"?e.sort((t,s)=>t.name.localeCompare(s.name)):ue==="desc"&&e.sort((t,s)=>s.name.localeCompare(t.name)),ut(e)},[u,ue]),a.useEffect(()=>{Te(N)},[N]),T==="switch"?n.jsx("div",{className:c("inline",Ce),children:n.jsx("ul",{role:"tablist","aria-orientation":"horizontal",className:c("inline-flex grow-0 p-1 rounded-lg",ae==="dark"?"border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800":"bg-neutral-100 dark:bg-black-700",re?"w-full":"w-auto"),children:O.map(e=>{const t=i===e,s=oe?.[e],l=u.find(m=>m.name===e),o=C&&l?.is_pinned;return n.jsx("li",{role:"presentation",className:c("inline-flex",re?"w-full":"w-auto"),children:n.jsx(ye.TabSwitch,{title:e,showCounts:y,role:"tab",ariaSelected:t,tabIndex:0,icon:o?n.jsx(ke,{title:"Unpin",children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):s,iconsOnly:tt,classValue:c("relative py-0.5 border-gray-200",nt,re?"w-full flex items-center justify-center":"px-2"),selectedClassValue:c("absolute inset-0 rounded-md z-0",ae==="dark"?"bg-neutral-900":"bg-white dark:bg-black-800"),textClassValue:c("relative text-xs font-semibold font-sans whitespace-nowrap",t?"text-neutral-900 dark:text-neutral-100":"text-neutral-700 dark:text-neutral-100"),isSelected:t,href:z(e),onClick:et?void 0:()=>W(e),suffixRecord:b,selectedId:H,color:ae,disableAnimation:at})},e)})})}):n.jsx("div",{ref:X,className:c(st?"w-fit":"w-full"),onMouseEnter:()=>Ee(!0),onMouseLeave:()=>Ee(!1),children:n.jsxs(v.DndContext,{sensors:ht,onDragEnd:Ct,onDragStart:Tt,onDragCancel:jt,collisionDetection:v.closestCenter,onDragOver:It,children:[n.jsxs("ul",{role:"tablist","aria-orientation":"horizontal",className:c("flex items-center w-full",Ce,$?"gap-0":_==="sm"?"gap-1":"gap-2"),ref:ft,children:[Ze?n.jsx("div",{className:"skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded"}):n.jsxs(ne.SortableContext,{items:r.map(({name:e})=>e),strategy:ne.horizontalListSortingStrategy,id:"sortable",disabled:!E||R,children:[r.slice(0,Z).map(({name:e,is_pinned:t})=>{const s=i===e&&!N,l=C&&t;return n.jsx(Qe.SortableTab,{title:e,isDragging:D===e,className:$?"flex-1 flex justify-center":"",children:n.jsx("li",{role:"presentation",className:c($?"w-full flex":"sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:e,role:"tab",ariaSelected:s,tabIndex:0,classValue:c(M("classValue",s),$?"w-full justify-center":""),selectedClassValue:M("selectedClassValue",s),textClassValue:M("textClassValue",s),isSelected:s,tabOptions:s&&E?n.jsx(we.Dropdown,{menu:{items:me(e),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Rt,{tooltip:p("More"),variant:"ghost",className:"!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",children:n.jsx(Je,{sx:{fontSize:20}})})}):null,draggingTab:D===e,href:z(e),onClick:()=>W(e),suffixRecord:b,selectedId:H,icon:l?n.jsx(ke,{title:p("Unpin"),children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[e]??null})},e)},e)}),i&&Be?n.jsx(Qe.SortableTab,{title:i,isDragging:D===i,children:n.jsx("li",{role:"presentation",className:c("sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:i,role:"tab",ariaSelected:!0,tabIndex:0,classValue:M("classValue",!0),selectedClassValue:M("selectedClassValue",!0),textClassValue:M("textClassValue",!0),isSelected:!0,tabOptions:E?n.jsx(we.Dropdown,{menu:{items:me(i),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Je,{sx:{fontSize:20},className:"text-primary-600"})}):null,draggingTab:D===i,href:z(i),suffixRecord:b,selectedId:H,icon:C&&u.find(e=>e.name===i)?.is_pinned?n.jsx(ke,{title:p("Pinned"),children:n.jsx("span",{onClick:()=>K(i),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[i]??null})},i)},i):null,(q<r.length&&!F||V.length>0)&&He>0?n.jsx(zt.DropableWrapper,{id:"more-tabs",children:n.jsx(we.Dropdown,{overlayStyle:{maxHeight:"calc(100vh - 350px)",overflow:"auto",marginTop:"8px",scrollbarWidth:"none",borderRadius:8,boxShadow:"0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"},onOpenChange:()=>Pe(),open:N,menu:{items:[{key:"Search",disabled:!0,style:{minWidth:"190px",marginBottom:"8px"},label:n.jsx("div",{className:"px-2 bg-white dark:bg-black-800",children:n.jsx(Bt.SearchBar,{id:"search-bar-more-tabs",value:le,classValues:"!rounded-lg",onChange:e=>ct(e)})})},...r.slice(Z).filter(e=>e.name!==i).concat(V).filter(({name:e})=>typeof e=="string"&&(e??"").toLowerCase().includes(le.toLowerCase())).map(({name:e,is_hidden:t})=>({key:e,label:n.jsx(S.OptionButton,{className:c("uppercase",t?"text-neutral-400 dark:text-neutral-500":"text-black-900 dark:text-black-200"),text:e,suffixRecord:y?b:{},highlight:le,truncateText:!0,isDisabled:t,onClick:t?void 0:()=>{W(e),G(!1)}}),popupClassName:se,children:N?me(e,t,!0):null}))],className:se},openClassName:"max-h-[350px] overflow-y-auto",trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",getPopupContainer:e=>e.parentElement,children:n.jsx(Wt.MoreButton,{title:`${y?He:""} MORE...`,variant:T,size:_,draggingOver:pt,suffixRecord:b,handleShowMoreDropdown:Pe,selectedId:H,showMoreDropdown:N})})}):null]}),L?n.jsx("div",{className:c(L?.className),children:n.jsx("li",{children:L.component})}):null,E&<&&n.jsx("li",{className:c(xt?"opacity-100":"opacity-0","transition-opacity duration-300"),children:n.jsx(Pt.TabOptions,{hasSuffixRecord:!!(b&&Object.keys(b).length>0),savedConfig:De,onApplyFilter:e=>wt(e),setUnsavedChanges:()=>{},handleTabSort:Nt,onSearchChange:vt})})]}),D?n.jsx(Ft.TabDragOverlay,{draggingTab:D,suffixRecord:b,size:_,variant:T,selectedId:H,parentContainer:it}):null]})})};exports.Tabs=At;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("@dnd-kit/core"),ne=require("@dnd-kit/sortable"),we=require("antd"),c=require("../../../_virtual/index.cjs.js"),a=require("react"),Dt=require("react-i18next"),Je=require("@mui/icons-material/MoreHorizOutlined"),Vt=require("./types.cjs.js"),Mt=require("../../../utils/formatters.cjs.js"),Lt=require("../../../providers/design-system-provider/hooks.cjs.js"),qt=require("../../../hooks/useTextWidth.cjs.js"),Rt=require("../../button/IconButton.cjs.js"),S=require("../../buttons/option-button/OptionButton.cjs.js"),Bt=require("../../forms/search-bar/SearchBar.cjs.js"),ke=require("../../tooltip/Tooltip.cjs.js"),Ht=require("../../icons/EditIcon.cjs.js"),Ut=require("react-toastify"),ye=require("./TabSwitch.cjs.js"),k=require("../../icon/icons.generated.cjs.js"),Qe=require("./SortableTab.cjs.js"),Wt=require("./DropableWrapper.cjs.js"),zt=require("./MoreButton.cjs.js"),Pt=require("./TabOptions.cjs.js"),Ft=require("./TabDragOverlay.cjs.js"),$t=()=>Math.random().toString(16).slice(2,13),se=["[&_.ant-dropdown-menu-item]:!outline-none","[&_.ant-dropdown-menu-submenu-title]:!outline-none","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:dark:bg-black-600","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-2","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:ring-primary-500","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50","[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"].join(" ");let Se=null;const Te=T=>{T?(Se=document.activeElement,setTimeout(()=>{document.querySelector(".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title")?.focus()},50)):setTimeout(()=>{Se?.focus(),Se=null},0)},d={SELECT:"Select",MOVE_LEFT:"MoveLeft",MOVE_RIGHT:"MoveRight",HIDE:"Hide",UNHIDE:"Unhide",COPY_LINK:"CopyLink",DELETE:"Delete",PIN:"Pin",UNPIN:"Unpin",EDIT:"Edit"},At=({variant:T="default",tabs:O=[],activeTab:i,onTabClick:Xe,suffixRecord:P,isLoading:Ze,size:_="md",className:Ce,draggable:E=!1,showAllItems:F=!1,copyLink:Ke=!1,isDisabled:et=!1,color:ae="light",iconsOnly:tt=!1,tabIcons:oe={},height:nt="h-6",fullWidth:re=!1,fitContentWidth:st=!1,disableAnimation:at=!1,onEdit:je,onDelete:Ie,onCopyLink:Ne,allowPin:C=!1,isFullWidth:$=!1,rightSection:L,initialTabs:ot,tabConfig:rt,onTabConfigChange:ve,onTabsChange:Oe,parentContainer:it=document.body,tabKey:j,linkConfig:x,showTabOptions:lt=!0})=>{const g=Lt.useTabConfig(),_e=j?g?.getTabSettings(j):void 0,ie=ot??_e?.tab_items,A=rt??_e?.tab_options,[le,ct]=a.useState(""),[N,G]=a.useState(!1),[q,dt]=a.useState(0),[u,ce]=a.useState([]),[Y,ut]=a.useState([]),[pt,J]=a.useState(null),[D,Q]=a.useState(null),[xt,Ee]=a.useState(!1),[De,Ve]=a.useState(A??Vt.INITIAL_TAB_OPTION_CONFIG),[de,bt]=a.useState(""),[Me,mt]=a.useState("contains"),{showCounts:y,lockOrder:R,sortOrder:ue}=De,{t:p}=Dt.useTranslation(),X=a.useRef(null),ft=a.useRef(null),Le=a.useRef(q),{measureText:B}=qt.useTextWidth(),H=a.useMemo(()=>$t(),[]),ht=v.useSensors(v.useSensor(v.MouseSensor,{activationConstraint:{distance:5}}),v.useSensor(v.TouchSensor,{activationConstraint:{delay:300,tolerance:5}})),b=a.useMemo(()=>P&&Object.fromEntries(Object.entries(P).map(([e,t])=>[e,Mt.formatCount(t)])),[P]),qe=a.useMemo(()=>Y.filter(({is_hidden:e})=>!e),[Y]),V=a.useMemo(()=>Y.filter(({is_hidden:e})=>e),[Y]),Re=a.useMemo(()=>qe.filter(({name:e})=>{if(!de)return!0;const t=(e??"").toLowerCase(),s=de.toLowerCase();return Me==="contains"?t.includes(s):!t.includes(s)}),[qe,de,Me]),r=a.useMemo(()=>[...Re].sort((e,t)=>e.is_pinned&&!t.is_pinned?-1:!e.is_pinned&&t.is_pinned?1:0),[Re]),gt=q<r.length,Z=F?r.length:gt?q:r.length,Be=r.findIndex(e=>e.name===i)>=Z,He=u.length-Z-(Be?1:0);Le.current=q;const U=a.useCallback(e=>{ce(e),Oe?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_items:e})},[Oe,j,g]),wt=a.useCallback(e=>{Ve(e),ve?.(e),j&&g?.persistTabSettings&&g.persistTabSettings({tab_type:j,tab_options:e})},[ve,j,g]),Ue=e=>e.is_pinned?32:0,pe=a.useCallback(e=>{if(!e)return;const t=E?30:0,s=y?190:84,l=_==="sm"?4:8,o=32;let m=0,ee=0,w=0;const f=e-(L?.width||0)-t,Fe=Le.current,$e=Fe<r.length,Ae=V.length>0;for(let h=0;h<r.length;h++){const I=r[h],te=b?.[I.name]?String(b?.[I.name]):"",fe=y&&te?B(te,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,he=B(I?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),ge=C?Ue(I):0,Ye=he+fe+o+l+ge;if(I.name===i&&(ee=Ye),m+=Ye,f>m+($e||Ae?s:0)+h*25)w=h+1;else break}const Ge=r.length-w;if(Ge+V.length===1&&V.length===0&&Ge===1&&w<r.length){const h=r[w];if(h){const I=b?.[h.name]?String(b?.[h.name]):"",te=y&&I?B(I,{fontSize:"16px",fontWeight:"500",fontFamily:"Inter, system-ui, -apple-system, sans-serif"})+18+2:0,fe=B(h?.name||"",{fontSize:"16px",fontWeight:"600",fontFamily:"Inter, system-ui, -apple-system, sans-serif"}),he=C?Ue(h):0,ge=fe+te+o+l+he;f>=m+ge&&(w+=1)}}const Et=F?r.length:w;r.findIndex(h=>h.name===i)>=Et&&(m+=ee,f<m+($e||Ae?s:0)&&(w=Math.max(w-1,0))),w!==Fe&&dt(w)},[r,y,F,C,b,L?.width,i,_,E,V.length,B]),xe=a.useCallback(()=>{if(typeof window<"u")return new URLSearchParams(window.location.search);if(x&&g?.getSearchParam){const e=new URLSearchParams,t=g.getSearchParam(x.key);return t&&e.set(x.key,t),e}return new URLSearchParams},[x,g]),be=a.useCallback((e,t)=>(x&&(t===x.defaultLink?e.delete(x.key):e.set(x.key,t),x.onResolve?.(e)),e),[x]),W=a.useCallback(e=>x?`?${be(xe(),e).toString()}`:void 0,[be,xe,x]),kt=Ke||!!x,yt=a.useCallback(async e=>{const t=W(e),s=typeof window<"u"?window.location.origin:"",l=typeof window<"u"?window.location.pathname:"",o=t?`${s}${l}${t}`:`${s}${l}`;await navigator.clipboard.writeText(o),Ut.toast.success(p("Link copied to clipboard"),{toastId:"Link copied to clipboard"}),Ne?.(e,o)},[W,p,Ne]),z=e=>{if(G(!1),Xe?.(e),x&&g?.navigate){const t=be(xe(),e);g.navigate(`?${t.toString()}`)}},We=e=>{if(r.length<=1)return;const t=u.map(o=>o.name===e?{...o,is_hidden:!0}:o),s=r.findIndex(o=>o.name===e),l=s===0?1:s-1;z(r[l].name),U(t)},St=e=>{const t=u.map(s=>s.name===e?{...s,is_hidden:!1}:s);G(!1),U(t)},K=e=>{if(!C)return;const t=u.map(s=>s.name===e?{...s,is_pinned:!s.is_pinned}:s);U(t)},ze=(e,t)=>{const s=u.findIndex(({name:o})=>o===e),l=t==="left"?s-(u[s-1]?.name===i?2:1):s+1;U(ne.arrayMove(u,s,l))},Pe=()=>G(!N),Tt=e=>Q(e.active.id),Ct=e=>{const{active:t,over:s}=e;if(s?.id==="more-tabs"){We(t.id),Q(null),J(null);return}const l=u.findIndex(({name:m})=>m===t.id),o=u.findIndex(({name:m})=>m===s?.id);U(ne.arrayMove(u,l,o)),Q(null),J(null)},jt=()=>{Q(null),J(null)},It=e=>{J(e.over?.id==="more-tabs"?"more-tabs":null)},Nt=()=>{},vt=(e,t)=>{bt(e),mt(t)},me=(e,t=!1,s=!1)=>{const o=u.find(f=>f.name===e)?.is_pinned,m=[{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowOutwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Select Tab"),className:"text-black-900 dark:text-white"}),key:d.SELECT,onClick:()=>z(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowUpwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Up"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_LEFT,disabled:R,onClick:()=>ze(e,"left")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ArrowDownwardIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Move Down"),isDisabled:R,className:"text-black-900 dark:text-white"}),key:d.MOVE_RIGHT,disabled:R,onClick:()=>ze(e,"right")},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.ContentCopyIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Copy Link"),className:"text-black-900 dark:text-white"}),key:d.COPY_LINK,onClick:()=>yt(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityOffIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Hide"),className:"text-black-900 dark:text-white"}),key:d.HIDE,onClick:()=>We(e)},{label:n.jsx(S.OptionButton,{icon:n.jsx(k.VisibilityIcon,{size:18,className:"text-inherit dark:text-inherit"}),text:p("Unhide"),className:"text-black-900 dark:text-white"}),key:d.UNHIDE,onClick:()=>St(e)},{label:n.jsx(S.OptionButton,{icon:o?n.jsx(k.UnpinFilledIcon,{size:20,className:"rotate-12 text-inherit dark:text-inherit"}):n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"}),text:p(o?"Unpin":"Pin"),className:"text-black-900 dark:text-white",notVisible:!C}),key:o?d.UNPIN:d.PIN,onClick:()=>K(e)},{label:n.jsx(S.OptionButton,{className:"text-black-900 dark:text-white",icon:n.jsx(Ht.EditIcon,{}),text:p("Edit"),notVisible:!je}),key:d.EDIT,onClick:()=>je?.(e)},{label:n.jsx(S.OptionButton,{className:"text-error-600 dark:text-error-600",icon:n.jsx(k.DeleteIcon,{size:18,className:"text-error-600 dark:text-error-600"}),text:p("Delete"),notVisible:!Ie}),key:d.DELETE,onClick:()=>Ie?.(e)}],ee=[d.HIDE,d.UNHIDE],w=[d.SELECT,d.MOVE_LEFT,d.MOVE_RIGHT,d.UNHIDE];return m.filter(f=>t?f.key===d.UNHIDE:s?!ee.includes(f.key):!w.includes(f.key)).filter(f=>kt?!0:f.key!==d.COPY_LINK).filter(f=>r.length===1?f.key!==d.HIDE:!0)},M=(e,t)=>({classValue:{default:c("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),secondary:c("flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",_==="sm"?"py-1 px-3 text-sm":"py-2 px-4 text-base")},selectedClassValue:{default:c("absolute left-0 bottom-0 w-full h-[3px] bg-primary-600"),secondary:c("absolute inset-0 bg-primary-50 dark:bg-primary-975 rounded-lg")},textClassValue:{default:c("relative uppercase font-sans font-semibold text-sm whitespace-nowrap",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 hover:text-neutral-500 dark:text-neutral-100 dark:hover:text-white"),secondary:c("relative whitespace-nowrap text-sm",t?"text-primary-600 dark:text-primary-500":"text-neutral-400 dark:text-neutral-400")}})[e][T];a.useEffect(()=>{if(!X.current||T==="switch")return;const e=new ResizeObserver(t=>{const s=t[0].contentRect.width;pe(s)});return e.observe(X.current),pe(X.current.clientWidth),()=>e.disconnect()},[pe,T]);const Ot=JSON.stringify(O),_t=JSON.stringify(ie?.map(({name:e})=>e));return a.useEffect(()=>{if(ie?.length){let e=[...ie];O.forEach(t=>{e.find(s=>s.name===t)||e.push({name:t,is_default:!1,is_hidden:!1,is_pinned:!1})}),e=e.filter((t,s,l)=>O.includes(t.name)&&s===l.findIndex(o=>o.name===t.name)),ce(e)}else ce(O.map(e=>({name:e,is_default:!1,is_hidden:!1,is_pinned:!1})).filter((e,t,s)=>t===s.findIndex(l=>l.name===e.name)))},[Ot,_t]),a.useEffect(()=>{A&&Ve(A)},[A]),a.useEffect(()=>{if(!u.length)return;const e=[...u];ue==="asc"?e.sort((t,s)=>t.name.localeCompare(s.name)):ue==="desc"&&e.sort((t,s)=>s.name.localeCompare(t.name)),ut(e)},[u,ue]),a.useEffect(()=>{Te(N)},[N]),T==="switch"?n.jsx("div",{className:c("inline",Ce),children:n.jsx("ul",{role:"tablist","aria-orientation":"horizontal",className:c("inline-flex grow-0 p-1 rounded-lg",ae==="dark"?"border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800":"bg-neutral-100 dark:bg-black-700",re?"w-full":"w-auto"),children:O.map(e=>{const t=i===e,s=oe?.[e],l=u.find(m=>m.name===e),o=C&&l?.is_pinned;return n.jsx("li",{role:"presentation",className:c("inline-flex",re?"w-full":"w-auto"),children:n.jsx(ye.TabSwitch,{title:e,showCounts:y,role:"tab",ariaSelected:t,tabIndex:0,icon:o?n.jsx(ke,{title:"Unpin",children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{className:"rotate-45 w-icon h-icon text-inherit dark:text-inherit"})})}):s,iconsOnly:tt,classValue:c("relative py-0.5 border-gray-200",nt,re?"w-full flex items-center justify-center":"px-2"),selectedClassValue:c("absolute inset-0 rounded-md z-0",ae==="dark"?"bg-neutral-900":"bg-white dark:bg-black-800"),textClassValue:c("relative text-xs font-semibold font-sans whitespace-nowrap",t?"text-neutral-900 dark:text-neutral-100":"text-neutral-700 dark:text-neutral-100"),isSelected:t,href:W(e),onClick:et?void 0:()=>z(e),suffixRecord:b,selectedId:H,color:ae,disableAnimation:at})},e)})})}):n.jsx("div",{ref:X,className:c(st?"w-fit":"w-full"),onMouseEnter:()=>Ee(!0),onMouseLeave:()=>Ee(!1),children:n.jsxs(v.DndContext,{sensors:ht,onDragEnd:Ct,onDragStart:Tt,onDragCancel:jt,collisionDetection:v.closestCenter,onDragOver:It,children:[n.jsxs("ul",{role:"tablist","aria-orientation":"horizontal",className:c("flex items-center w-full",Ce,$?"gap-0":_==="sm"?"gap-1":"gap-2"),ref:ft,children:[Ze?n.jsx("div",{className:"skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded"}):n.jsxs(ne.SortableContext,{items:r.map(({name:e})=>e),strategy:ne.horizontalListSortingStrategy,id:"sortable",disabled:!E||R,children:[r.slice(0,Z).map(({name:e,is_pinned:t})=>{const s=i===e&&!N,l=C&&t;return n.jsx(Qe.SortableTab,{title:e,isDragging:D===e,className:$?"flex-1 flex justify-center":"",children:n.jsx("li",{role:"presentation",className:c($?"w-full flex":"sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:e,role:"tab",ariaSelected:s,tabIndex:0,classValue:c(M("classValue",s),$?"w-full justify-center":""),selectedClassValue:M("selectedClassValue",s),textClassValue:M("textClassValue",s),isSelected:s,tabOptions:s&&E?n.jsx(we.Dropdown,{menu:{items:me(e),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Rt,{tooltip:p("More"),variant:"ghost",className:"!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",children:n.jsx(Je,{sx:{fontSize:20}})})}):null,draggingTab:D===e,href:W(e),onClick:()=>z(e),suffixRecord:b,selectedId:H,icon:l?n.jsx(ke,{title:p("Unpin"),children:n.jsx("span",{onClick:()=>K(e),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[e]??null})},e)},e)}),i&&Be?n.jsx(Qe.SortableTab,{title:i,isDragging:D===i,children:n.jsx("li",{role:"presentation",className:c("sm:mr-2"),children:n.jsx(ye.TabSwitch,{showCounts:y,title:i,role:"tab",ariaSelected:!0,tabIndex:0,classValue:M("classValue",!0),selectedClassValue:M("selectedClassValue",!0),textClassValue:M("textClassValue",!0),isSelected:!0,tabOptions:E?n.jsx(we.Dropdown,{menu:{items:me(i),className:se},trigger:["click"],onOpenChange:Te,overlayClassName:"row-option-cell",rootClassName:"",openClassName:"max-h-[350px] overflow-y-auto",placement:"bottom",children:n.jsx(Je,{sx:{fontSize:20},className:"text-primary-600"})}):null,draggingTab:D===i,href:W(i),suffixRecord:b,selectedId:H,icon:C&&u.find(e=>e.name===i)?.is_pinned?n.jsx(ke,{title:p("Pinned"),children:n.jsx("span",{onClick:()=>K(i),children:n.jsx(k.PinIcon,{size:20,className:"rotate-45 text-inherit dark:text-inherit"})})}):oe?.[i]??null})},i)},i):null,(q<r.length&&!F||V.length>0)&&He>0?n.jsx(Wt.DropableWrapper,{id:"more-tabs",children:n.jsx(we.Dropdown,{overlayStyle:{maxHeight:"calc(100vh - 350px)",overflow:"auto",marginTop:"8px",scrollbarWidth:"none",borderRadius:8,boxShadow:"0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"},onOpenChange:()=>Pe(),open:N,menu:{items:[{key:"Search",disabled:!0,style:{minWidth:"190px",marginBottom:"8px"},label:n.jsx("div",{className:"px-2 bg-white dark:bg-black-800",children:n.jsx(Bt.SearchBar,{id:"search-bar-more-tabs",value:le,classValues:"!rounded-lg",onChange:e=>ct(e)})})},...r.slice(Z).filter(e=>e.name!==i).concat(V).filter(({name:e})=>typeof e=="string"&&(e??"").toLowerCase().includes(le.toLowerCase())).map(({name:e,is_hidden:t})=>({key:e,label:n.jsx(S.OptionButton,{className:c("uppercase",t?"text-neutral-400 dark:text-neutral-500":"text-black-900 dark:text-black-200"),text:e,suffixRecord:y?b:{},highlight:le,truncateText:!0,isDisabled:t,onClick:t?void 0:()=>{z(e),G(!1)}}),popupClassName:se,children:N?me(e,t,!0):null}))],className:se},openClassName:"max-h-[350px] overflow-y-auto",trigger:["click"],overlayClassName:"row-option-cell",placement:"bottomRight",getPopupContainer:e=>e.parentElement,children:n.jsx(zt.MoreButton,{title:`${y?He:""} MORE...`,variant:T,size:_,draggingOver:pt,suffixRecord:b,handleShowMoreDropdown:Pe,selectedId:H,showMoreDropdown:N})})}):null]}),L?n.jsx("div",{className:c(L?.className),children:n.jsx("li",{children:L.component})}):null,E&<&&n.jsx("li",{className:c(xt?"opacity-100":"opacity-0","transition-opacity duration-300"),children:n.jsx(Pt.TabOptions,{hasSuffixRecord:!!(b&&Object.keys(b).length>0),savedConfig:De,onApplyFilter:e=>wt(e),setUnsavedChanges:()=>{},handleTabSort:Nt,onSearchChange:vt})})]}),D?n.jsx(Ft.TabDragOverlay,{draggingTab:D,suffixRecord:b,size:_,variant:T,selectedId:H,parentContainer:it}):null]})})};exports.Tabs=At;
|
|
2
2
|
//# sourceMappingURL=Tabs.cjs.js.map
|