npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.35 → 0.2.36 - Mend

@ynput/ayon-frontend-shared 0.2.35 → 0.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (832) hide show

package/dist/shared/src/containers/SimpleTable/SimpleTable.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleTable.es.js","sources":["../../../../../src/containers/SimpleTable/SimpleTable.tsx"],"sourcesContent":["import { FC, useMemo, useRef, MouseEvent as ReactMouseEvent, useCallback, useEffect } from 'react'\nimport * as Styled from './SimpleTable.styled'\nimport {\n useReactTable,\n getCoreRowModel,\n getFilteredRowModel,\n getExpandedRowModel,\n ColumnDef,\n flexRender,\n Row,\n FilterFn,\n SortingFn,\n sortingFns,\n RowData,\n Table,\n OnChangeFn,\n RowSelectionState,\n functionalUpdate,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nimport clsx from 'clsx'\nimport useRowKeydown, { RowKeyboardEvent } from './hooks/useRowKeydown'\n\nimport { RankingInfo, rankItem, compareItems } from '@tanstack/match-sorter-utils'\nimport { useSimpleTableContext } from './context/SimpleTableContext'\nimport { SimpleTableCellTemplate, SimpleTableCellTemplateProps } from './SimpleTableRowTemplate'\nimport { EmptyPlaceholder } from '@shared/components'\nimport { RowPinningState } from '@tanstack/react-table'\n\ndeclare module '@tanstack/react-table' {\n //add fuzzy filter to the filterFns\n interface FilterFns {\n fuzzy: FilterFn<unknown>\n }\n interface FilterMeta {\n itemRank: RankingInfo\n }\n\n interface TableMeta<TData extends RowData> {\n isExpandable?: boolean\n isLoading?: boolean\n children?: (\n props: SimpleTableCellTemplateProps,\n row: Row<TData>,\n table: Table<SimpleTableRow>,\n ) => JSX.Element\n [key: string]: any\n }\n}\n\n// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)\nconst fuzzyFilter: FilterFn<any> = (row, columnId, searchValue, addMeta) => {\n const cellValue = row.getValue(columnId)\n // convert non-string cell values to string\n let searchString =\n typeof cellValue === 'string'\n ? cellValue\n : Array.isArray(cellValue)\n ? cellValue.join(' ')\n : JSON.stringify(cellValue)\n\n // combine label and parents into a single string for searching if columnId is 'label'\n if (columnId === 'label') {\n searchString = [row.original.label, row.original.name, ...(row.original.parents \|\| [])].join(\n ' ',\n )\n }\n\n // Rank the item\n const itemRank = rankItem(searchString, searchValue)\n\n // Store the itemRank info\n addMeta({\n itemRank,\n })\n\n // Return if the item should be filtered in/out\n return itemRank.passed\n}\n\n// Define a custom fuzzy sort function that will sort by rank if the row has ranking information\nconst fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {\n let dir = 0\n\n // Only sort by rank if the column has ranking information\n if (rowA.columnFiltersMeta[columnId]) {\n dir = compareItems(\n rowA.columnFiltersMeta[columnId]?.itemRank!,\n rowB.columnFiltersMeta[columnId]?.itemRank!,\n )\n }\n\n // Provide an alphanumeric fallback for when the item ranks are equal\n return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir\n}\n\nexport type RowItemData = {\n id: string\n name?: string \| null\n label?: string \| null\n subType?: string \| null\n [key: string]: any\n}\n\nexport type SimpleTableRow = {\n id: string\n parentId?: string\n name: string\n label: string\n parents?: string[]\n icon?: string \| null\n iconColor?: string\n iconFilled?: boolean\n img?: string \| null\n startContent?: JSX.Element\n endContent?: JSX.Element\n subRows: SimpleTableRow[]\n data: RowItemData\n isDisabled?: boolean\n disabledMessage?: string\n inactive?: boolean\n}\n\nexport interface SimpleTableProps {\n data: SimpleTableRow[]\n isLoading: boolean\n error?: string\n isExpandable?: boolean // show expand/collapse icons\n isMultiSelect?: boolean // enable multi-select with shift+click and ctrl/cmd+click\n enableClickToDeselect?: boolean // allow deselecting a single selected row by clicking it again & clicking outside clears selection\n enableNonFolderIndent?: boolean // indent non-folder rows to align with folder rows\n forceUpdateTable?: any\n globalFilter?: string\n meta?: Record<string, any>\n rowHeight?: number // height of each row, used for virtual scrolling\n onScrollBottom?: () => void // callback fired when scrolled to the bottom of the table\n children?: (\n props: SimpleTableCellTemplateProps,\n row: Row<SimpleTableRow>,\n table: Table<SimpleTableRow>,\n ) => JSX.Element\n pt?: {\n cell?: SimpleTableCellTemplateProps\n row?: React.HTMLAttributes<HTMLTableRowElement>\n }\n}\n\n// Helper function to get row range for shift-selection\n// Operates on the provided list of rows (e.g., filtered and sorted rows)\nfunction getRowRange<TData extends RowData>(\n rows: Array<Row<TData>>,\n idA: string,\n idB: string,\n): Array<Row<TData>> {\n const range: Array<Row<TData>> = []\n // If idA and idB are the same, or one is not found, handle appropriately\n if (idA === idB) {\n const singleRow = rows.find((row) => row.id === idA)\n return singleRow ? [singleRow] : []\n }\n\n let indexA = -1\n let indexB = -1\n\n for (let i = 0; i < rows.length; i++) {\n if (rows[i].id === idA) indexA = i\n if (rows[i].id === idB) indexB = i\n if (indexA !== -1 && indexB !== -1) break\n }\n\n if (indexA === -1 \|\| indexB === -1) return [] // One or both IDs not found\n\n const start = Math.min(indexA, indexB)\n const end = Math.max(indexA, indexB)\n\n for (let i = start; i <= end; i++) {\n range.push(rows[i])\n }\n return range\n}\n\nconst SimpleTable: FC<SimpleTableProps> = ({\n data = [],\n isLoading,\n error,\n isExpandable,\n isMultiSelect = true,\n enableClickToDeselect = true,\n enableNonFolderIndent = true,\n forceUpdateTable,\n globalFilter,\n meta,\n rowHeight,\n onScrollBottom,\n children,\n pt,\n}) => {\n const {\n rowSelection,\n expanded,\n setExpanded,\n onExpandedChange,\n onRowSelectionChange,\n rowPinning,\n onRowPinningChange,\n } = useSimpleTableContext()\n const lastSelectedIdRef = useRef<string \| null>(null)\n const tableRef = useRef<Table<SimpleTableRow> \| null>(null)\n\n // stable data reference\n const tableData = useMemo(() => {\n if (!isLoading) return data\n\n // show loading placeholders\n return Array.from({ length: 10 }, (_, i) => ({\n id: `placeholder-${i}`,\n name: `placeholder-${i}`,\n label: `placeholder-${i}`,\n icon: null,\n img: null,\n subRows: [],\n data: {\n id: `placeholder-${i}`,\n },\n }))\n }, [isLoading, data, forceUpdateTable])\n\n // Define the core selection logic using useCallback for stability\n const handleSelectionLogic = useCallback(\n (\n tableInstance: Table<SimpleTableRow>,\n rowId: string,\n isShift: boolean,\n isCtrlOrMeta: boolean,\n ) => {\n const currentId = rowId\n const allProcessableRows = tableInstance.getFilteredRowModel().flatRows\n const currentRow = allProcessableRows.find((r) => r.id === currentId)\n\n if (!currentRow) return\n\n // Prevent selection of disabled rows\n if (currentRow.original.isDisabled) return\n\n // If click-to-deselect is enabled and only one row is selected and it's the current row\n if (\n enableClickToDeselect &&\n !isShift &&\n !isCtrlOrMeta &&\n Object.keys(tableInstance.getState().rowSelection).length === 1 &&\n tableInstance.getState().rowSelection[currentId]\n ) {\n tableInstance.setRowSelection({})\n lastSelectedIdRef.current = null\n return\n }\n\n if (isMultiSelect && isShift && lastSelectedIdRef.current) {\n const lastId = lastSelectedIdRef.current\n const anchorRow = allProcessableRows.find((r) => r.id === lastId)\n\n if (!anchorRow) {\n tableInstance.setRowSelection({ [currentId]: true })\n } else {\n const rowsToToggle = getRowRange(allProcessableRows, currentId, lastId)\n const newSelection: RowSelectionState = {}\n rowsToToggle.forEach((r) => (newSelection[r.id] = true))\n tableInstance.setRowSelection(newSelection)\n }\n } else if (isMultiSelect && isCtrlOrMeta) {\n currentRow.toggleSelected()\n } else {\n tableInstance.setRowSelection({ [currentId]: true })\n }\n lastSelectedIdRef.current = currentId\n },\n [isMultiSelect, enableClickToDeselect],\n )\n\n // Callback for useRowKeydown's handleRowSelect prop\n // Uses tableRef to access the table instance, avoiding direct dependency on 'table' variable at definition time\n const handleRowSelectForKeydown = useCallback(\n (\n event: RowKeyboardEvent, // Use the specific keyboard event type from the hook\n selectedRow: Row<SimpleTableRow>,\n ) => {\n if (!tableRef.current) {\n console.warn('tableRef not yet available in handleRowSelectForKeydown')\n return\n }\n\n // Extract modifier keys from the event\n const isShiftKey = event.shiftKey\n const isCtrlKey = event.ctrlKey \|\| event.metaKey\n\n handleSelectionLogic(\n tableRef.current, // Pass the main table instance\n selectedRow.id,\n isShiftKey,\n isCtrlKey,\n )\n },\n [handleSelectionLogic], // Depends only on handleSelectionLogic\n )\n\n const { handleRowKeyDown } = useRowKeydown<SimpleTableRow>({\n handleRowSelect: handleRowSelectForKeydown,\n })\n\n const columns = useMemo<ColumnDef<SimpleTableRow>[]>(\n () => [\n {\n accessorKey: 'label',\n header: undefined,\n filterFn: 'fuzzy',\n sortingFn: fuzzySort, //sort by fuzzy rank (falls back to alphanumeric)\n cell: ({ row, getValue, table: cellTableInstance }) => {\n const cellMeta = cellTableInstance.options.meta\n\n const handleCellClick = (event: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n // Prevent row selection if clicking on an interactive element within the cell\n if (\n event.target instanceof HTMLInputElement \|\|\n event.target instanceof HTMLButtonElement \|\|\n event.target instanceof HTMLTextAreaElement \|\|\n event.target instanceof HTMLSelectElement \|\|\n event.target instanceof HTMLAnchorElement \|\|\n (event.target as HTMLElement).closest('button, a, input, textarea, select')\n ) {\n return\n }\n handleSelectionLogic(\n cellTableInstance, // Pass the cell's table instance\n row.id,\n event.shiftKey,\n event.ctrlKey \|\| event.metaKey,\n )\n }\n\n const props: SimpleTableCellTemplateProps & {\n onClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void\n } = {\n className: clsx({\n selected: row.getIsSelected(),\n loading: cellMeta?.isLoading,\n disabled: row.original.isDisabled, // you can't select disabled rows\n inactive: row.original.inactive, // false: archived items but still selectable\n }),\n onKeyDown: (e) => {\n if (e.target instanceof HTMLInputElement) return\n // Corrected typo: handleRowKeydown -> handleRowKeyDown\n handleRowKeyDown(e, row)\n },\n onClick: handleCellClick, // Added onClick handler\n depth: row.depth,\n tabIndex: 0,\n value: getValue<string>(),\n parents: row.original.parents,\n icon: row.original.icon \|\| undefined,\n iconColor: row.original.iconColor,\n iconFilled: row.original.iconFilled,\n isRowExpandable: row.getCanExpand(),\n enableNonFolderIndent,\n isRowExpanded: row.getIsExpanded(),\n isTableExpandable: cellMeta?.isExpandable,\n onExpandClick: row.getToggleExpandedHandler(),\n startContent: row.original.startContent,\n endContent: row.original.endContent,\n isDisabled: row.original.isDisabled,\n disabledMessage: row.original.disabledMessage,\n }\n\n // Use children function if provided, otherwise default to SimpleTableCellTemplate\n return cellMeta?.children ? (\n cellMeta.children(props, row, cellTableInstance)\n ) : (\n <SimpleTableCellTemplate {...props} {...pt?.cell} />\n )\n },\n },\n ],\n [\n forceUpdateTable,\n handleSelectionLogic,\n handleRowKeyDown,\n enableClickToDeselect,\n enableNonFolderIndent,\n ], // include enableClickToDeselect for completeness\n )\n\n const handleRowSelectionChangeCallback: OnChangeFn<RowSelectionState> = useCallback(\n (updater) => {\n onRowSelectionChange(functionalUpdate(updater, rowSelection))\n },\n [onRowSelectionChange, rowSelection], // Depends only on the stable setState function from context\n )\n\n const handleRowPinningChangeCallback: OnChangeFn<RowPinningState> = useCallback(\n (updater) => {\n rowPinning && onRowPinningChange?.(functionalUpdate(updater, rowPinning))\n },\n [onRowPinningChange], // Depends only on the stable setState function from context\n )\n\n const handleExpandedChange = useCallback(\n (updater: any) => {\n setExpanded?.((old) => {\n const newExpanded = updater instanceof Function ? updater(old) : updater\n onExpandedChange?.(newExpanded)\n return newExpanded\n })\n },\n [setExpanded, onExpandedChange],\n )\n\n const table = useReactTable({\n data: tableData,\n columns,\n state: {\n expanded,\n rowSelection,\n globalFilter,\n rowPinning,\n },\n onRowSelectionChange: handleRowSelectionChangeCallback,\n onRowPinningChange: handleRowPinningChangeCallback,\n filterFns: {\n fuzzy: fuzzyFilter,\n },\n globalFilterFn: 'fuzzy',\n enableRowSelection: true, //enable row selection for all rows\n enableRowPinning: !!onRowPinningChange,\n getRowId: (row) => row.id,\n enableSubRowSelection: false, //disable sub row selection\n onExpandedChange: handleExpandedChange,\n getSubRows: (row) => row.subRows,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n filterFromLeafRows: true,\n // debugTable: true,\n meta: {\n isExpandable: !!isExpandable,\n isLoading: isLoading,\n children: children,\n ...meta,\n },\n })\n\n // Update tableRef whenever the table instance changes.\n // This ensures handleRowSelectForKeydown uses the current table instance.\n useEffect(() => {\n tableRef.current = table\n }, [table])\n\n const { rows } = table.getRowModel()\n\n //The virtualizer needs to know the scrollable container element\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const rowVirtualizer = useVirtualizer({\n count: rows.length,\n estimateSize: () => rowHeight \|\| 34, //estimate row height for accurate scrollbar dragging\n getScrollElement: () => tableContainerRef.current,\n //measure dynamic row height, except in firefox because it measures table border height incorrectly\n measureElement: rowHeight\n ? () => rowHeight\n : typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1\n ? (element) => element?.getBoundingClientRect().height\n : undefined,\n overscan: 5,\n })\n\n // Memoize the ref callback to prevent infinite re-renders\n const measureElementRef = useCallback(\n (node: HTMLElement \| null) => {\n if (node) {\n rowVirtualizer.measureElement(node)\n }\n },\n [rowVirtualizer],\n )\n\n // Handle scroll to bottom detection\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLDivElement>) => {\n if (!onScrollBottom) return\n\n const target = event.currentTarget\n const { scrollTop, scrollHeight, clientHeight } = target\n\n // Check if we're near the bottom (within 100px)\n const isNearBottom = scrollHeight - scrollTop - clientHeight < 100\n\n if (isNearBottom && !isLoading) {\n onScrollBottom()\n }\n },\n [onScrollBottom, isLoading],\n )\n\n const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {\n // if the click is outside of any row, clear selection\n if (enableClickToDeselect && !(e.target as HTMLElement).closest('tr')) {\n table.setRowSelection({})\n lastSelectedIdRef.current = null\n }\n }\n\n return (\n <Styled.TableContainer\n ref={tableContainerRef}\n className={clsx({ isLoading })}\n onScroll={handleScroll}\n onClick={handleContainerClick}\n >\n {!error && (\n <table>\n <tbody\n style={{\n height: `${rowVirtualizer?.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n >\n {rowVirtualizer?.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index] as Row<SimpleTableRow>\n return (\n <tr\n data-index={virtualRow.index} //needed for dynamic row height measurement\n ref={measureElementRef} //measure dynamic row height\n key={row.id}\n id={row.id}\n {...pt?.row}\n style={{\n transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll\n ...pt?.row?.style, // custom styles to be passed\n }}\n >\n {row.getVisibleCells().map((cell) => {\n return (\n <td key={cell.id}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </td>\n )\n })}\n </tr>\n )\n })}\n </tbody>\n </table>\n )}\n {!!error && <EmptyPlaceholder error={error} />}\n </Styled.TableContainer>\n )\n}\n\nexport default SimpleTable\n"],"names":["fuzzyFilter","row","columnId","searchValue","addMeta","cellValue","searchString","itemRank","rankItem","fuzzySort","rowA","rowB","dir","compareItems","_a","_b","sortingFns","getRowRange","rows","idA","idB","range","singleRow","indexA","indexB","i","start","end","SimpleTable","data","isLoading","error","isExpandable","isMultiSelect","enableClickToDeselect","enableNonFolderIndent","forceUpdateTable","globalFilter","meta","rowHeight","onScrollBottom","children","pt","rowSelection","expanded","setExpanded","onExpandedChange","onRowSelectionChange","rowPinning","onRowPinningChange","useSimpleTableContext","lastSelectedIdRef","useRef","tableRef","tableData","useMemo","_","handleSelectionLogic","useCallback","tableInstance","rowId","isShift","isCtrlOrMeta","currentId","allProcessableRows","currentRow","r","lastId","rowsToToggle","newSelection","handleRowSelectForKeydown","event","selectedRow","isShiftKey","isCtrlKey","handleRowKeyDown","useRowKeydown","columns","getValue","cellTableInstance","cellMeta","handleCellClick","props","clsx","e","jsx","SimpleTableCellTemplate","handleRowSelectionChangeCallback","updater","functionalUpdate","handleRowPinningChangeCallback","handleExpandedChange","old","newExpanded","table","useReactTable","getCoreRowModel","getFilteredRowModel","getExpandedRowModel","useEffect","tableContainerRef","rowVirtualizer","useVirtualizer","element","measureElementRef","node","handleScroll","target","scrollTop","scrollHeight","clientHeight","handleContainerClick","jsxs","Styled.TableContainer","virtualRow","cell","flexRender","EmptyPlaceholder"],"mappings":"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"}
1	+ {"version":3,"file":"SimpleTable.es.js","sources":["../../../../../src/containers/SimpleTable/SimpleTable.tsx"],"sourcesContent":["import { FC, useMemo, useRef, MouseEvent as ReactMouseEvent, useCallback, useEffect } from 'react'\nimport * as Styled from './SimpleTable.styled'\nimport {\n useReactTable,\n getCoreRowModel,\n getFilteredRowModel,\n getExpandedRowModel,\n ColumnDef,\n flexRender,\n Row,\n FilterFn,\n SortingFn,\n sortingFns,\n RowData,\n Table,\n OnChangeFn,\n RowSelectionState,\n functionalUpdate,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nimport clsx from 'clsx'\nimport useRowKeydown, { RowKeyboardEvent } from './hooks/useRowKeydown'\n\nimport { RankingInfo, rankItem, compareItems } from '@tanstack/match-sorter-utils'\nimport { useSimpleTableContext } from './context/SimpleTableContext'\nimport { SimpleTableCellTemplate, SimpleTableCellTemplateProps } from './SimpleTableRowTemplate'\nimport { EmptyPlaceholder } from '@shared/components'\nimport { RowPinningState } from '@tanstack/react-table'\n\ndeclare module '@tanstack/react-table' {\n //add fuzzy filter to the filterFns\n interface FilterFns {\n fuzzy: FilterFn<unknown>\n }\n interface FilterMeta {\n itemRank: RankingInfo\n }\n\n interface TableMeta<TData extends RowData> {\n isExpandable?: boolean\n isLoading?: boolean\n children?: (\n props: SimpleTableCellTemplateProps,\n row: Row<TData>,\n table: Table<SimpleTableRow>,\n ) => JSX.Element\n [key: string]: any\n }\n}\n\n// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)\nconst fuzzyFilter: FilterFn<any> = (row, columnId, searchValue, addMeta) => {\n const cellValue = row.getValue(columnId)\n // convert non-string cell values to string\n let searchString =\n typeof cellValue === 'string'\n ? cellValue\n : Array.isArray(cellValue)\n ? cellValue.join(' ')\n : JSON.stringify(cellValue)\n\n // combine label and parents into a single string for searching if columnId is 'label'\n if (columnId === 'label') {\n searchString = [row.original.label, row.original.name, ...(row.original.parents \|\| [])].join(\n ' ',\n )\n }\n\n // Rank the item\n const itemRank = rankItem(searchString, searchValue)\n\n // Store the itemRank info\n addMeta({\n itemRank,\n })\n\n // Return if the item should be filtered in/out\n return itemRank.passed\n}\n\n// Define a custom fuzzy sort function that will sort by rank if the row has ranking information\nconst fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {\n let dir = 0\n\n // Only sort by rank if the column has ranking information\n if (rowA.columnFiltersMeta[columnId]) {\n dir = compareItems(\n rowA.columnFiltersMeta[columnId]?.itemRank!,\n rowB.columnFiltersMeta[columnId]?.itemRank!,\n )\n }\n\n // Provide an alphanumeric fallback for when the item ranks are equal\n return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir\n}\n\nexport type RowItemData = {\n id: string\n name?: string \| null\n label?: string \| null\n subType?: string \| null\n [key: string]: any\n}\n\nexport type SimpleTableRow = {\n id: string\n parentId?: string\n name: string\n label: string\n parents?: string[]\n icon?: string \| null\n iconColor?: string\n iconFilled?: boolean\n img?: string \| null\n imgShape?: 'square' \| 'circle'\n startContent?: JSX.Element\n endContent?: JSX.Element\n subRows: SimpleTableRow[]\n data: RowItemData\n isDisabled?: boolean\n disabledMessage?: string\n inactive?: boolean\n}\n\nexport interface SimpleTableProps {\n data: SimpleTableRow[]\n isLoading: boolean\n error?: string\n isExpandable?: boolean // show expand/collapse icons\n isMultiSelect?: boolean // enable multi-select with shift+click and ctrl/cmd+click\n enableClickToDeselect?: boolean // allow deselecting a single selected row by clicking it again & clicking outside clears selection\n enableNonFolderIndent?: boolean // indent non-folder rows to align with folder rows\n forceUpdateTable?: any\n globalFilter?: string\n meta?: Record<string, any>\n rowHeight?: number // height of each row, used for virtual scrolling\n imgRatio?: number\n onScrollBottom?: () => void // callback fired when scrolled to the bottom of the table\n children?: (\n props: SimpleTableCellTemplateProps,\n row: Row<SimpleTableRow>,\n table: Table<SimpleTableRow>,\n ) => JSX.Element\n pt?: {\n cell?: Partial<SimpleTableCellTemplateProps>\n row?: Partial<React.HTMLAttributes<HTMLTableRowElement>>\n }\n}\n\n// Helper function to get row range for shift-selection\n// Operates on the provided list of rows (e.g., filtered and sorted rows)\nfunction getRowRange<TData extends RowData>(\n rows: Array<Row<TData>>,\n idA: string,\n idB: string,\n): Array<Row<TData>> {\n const range: Array<Row<TData>> = []\n // If idA and idB are the same, or one is not found, handle appropriately\n if (idA === idB) {\n const singleRow = rows.find((row) => row.id === idA)\n return singleRow ? [singleRow] : []\n }\n\n let indexA = -1\n let indexB = -1\n\n for (let i = 0; i < rows.length; i++) {\n if (rows[i].id === idA) indexA = i\n if (rows[i].id === idB) indexB = i\n if (indexA !== -1 && indexB !== -1) break\n }\n\n if (indexA === -1 \|\| indexB === -1) return [] // One or both IDs not found\n\n const start = Math.min(indexA, indexB)\n const end = Math.max(indexA, indexB)\n\n for (let i = start; i <= end; i++) {\n range.push(rows[i])\n }\n return range\n}\n\nconst SimpleTable: FC<SimpleTableProps> = ({\n data = [],\n isLoading,\n error,\n isExpandable,\n isMultiSelect = true,\n enableClickToDeselect = true,\n enableNonFolderIndent = true,\n forceUpdateTable,\n globalFilter,\n meta,\n rowHeight,\n imgRatio,\n onScrollBottom,\n children,\n pt,\n}) => {\n const {\n rowSelection,\n expanded,\n setExpanded,\n onExpandedChange,\n onRowSelectionChange,\n rowPinning,\n onRowPinningChange,\n } = useSimpleTableContext()\n const lastSelectedIdRef = useRef<string \| null>(null)\n const tableRef = useRef<Table<SimpleTableRow> \| null>(null)\n\n // stable data reference\n const tableData = useMemo(() => {\n if (!isLoading) return data\n\n // show loading placeholders\n return Array.from({ length: 10 }, (_, i) => ({\n id: `placeholder-${i}`,\n name: `placeholder-${i}`,\n label: `placeholder-${i}`,\n icon: null,\n img: null,\n subRows: [],\n data: {\n id: `placeholder-${i}`,\n },\n }))\n }, [isLoading, data, forceUpdateTable])\n\n // Define the core selection logic using useCallback for stability\n const handleSelectionLogic = useCallback(\n (\n tableInstance: Table<SimpleTableRow>,\n rowId: string,\n isShift: boolean,\n isCtrlOrMeta: boolean,\n ) => {\n const currentId = rowId\n const allProcessableRows = tableInstance.getFilteredRowModel().flatRows\n const currentRow = allProcessableRows.find((r) => r.id === currentId)\n\n if (!currentRow) return\n\n // Prevent selection of disabled rows\n if (currentRow.original.isDisabled) return\n\n // If click-to-deselect is enabled and only one row is selected and it's the current row\n if (\n enableClickToDeselect &&\n !isShift &&\n !isCtrlOrMeta &&\n Object.keys(tableInstance.getState().rowSelection).length === 1 &&\n tableInstance.getState().rowSelection[currentId]\n ) {\n tableInstance.setRowSelection({})\n lastSelectedIdRef.current = null\n return\n }\n\n if (isMultiSelect && isShift && lastSelectedIdRef.current) {\n const lastId = lastSelectedIdRef.current\n const anchorRow = allProcessableRows.find((r) => r.id === lastId)\n\n if (!anchorRow) {\n tableInstance.setRowSelection({ [currentId]: true })\n } else {\n const rowsToToggle = getRowRange(allProcessableRows, currentId, lastId)\n const newSelection: RowSelectionState = {}\n rowsToToggle.forEach((r) => (newSelection[r.id] = true))\n tableInstance.setRowSelection(newSelection)\n }\n } else if (isMultiSelect && isCtrlOrMeta) {\n currentRow.toggleSelected()\n } else {\n tableInstance.setRowSelection({ [currentId]: true })\n }\n lastSelectedIdRef.current = currentId\n },\n [isMultiSelect, enableClickToDeselect],\n )\n\n // Callback for useRowKeydown's handleRowSelect prop\n // Uses tableRef to access the table instance, avoiding direct dependency on 'table' variable at definition time\n const handleRowSelectForKeydown = useCallback(\n (\n event: RowKeyboardEvent, // Use the specific keyboard event type from the hook\n selectedRow: Row<SimpleTableRow>,\n ) => {\n if (!tableRef.current) {\n console.warn('tableRef not yet available in handleRowSelectForKeydown')\n return\n }\n\n // Extract modifier keys from the event\n const isShiftKey = event.shiftKey\n const isCtrlKey = event.ctrlKey \|\| event.metaKey\n\n handleSelectionLogic(\n tableRef.current, // Pass the main table instance\n selectedRow.id,\n isShiftKey,\n isCtrlKey,\n )\n },\n [handleSelectionLogic], // Depends only on handleSelectionLogic\n )\n\n // Handle arrow key navigation\n const handleArrowNavigation = useCallback(\n (direction: 'up' \| 'down', currentRow: Row<SimpleTableRow>, event: RowKeyboardEvent) => {\n if (!tableRef.current) return\n\n // Use the row model which respects expanded state, not filtered model\n const visibleRows = tableRef.current.getRowModel().rows\n const currentIndex = visibleRows.findIndex((r) => r.id === currentRow.id)\n\n if (currentIndex === -1) return\n\n let nextIndex = direction === 'down' ? currentIndex + 1 : currentIndex - 1\n\n // Check bounds\n if (nextIndex < 0 \|\| nextIndex >= visibleRows.length) return\n\n // Skip disabled rows\n while (nextIndex >= 0 && nextIndex < visibleRows.length) {\n const nextRow = visibleRows[nextIndex]\n if (!nextRow.original.isDisabled) {\n // Found a valid row\n // Select the next row\n handleSelectionLogic(\n tableRef.current,\n nextRow.id,\n event.shiftKey,\n event.ctrlKey \|\| event.metaKey,\n )\n\n // Focus the next row's cell\n requestAnimationFrame(() => {\n const nextRowElement = document.getElementById(nextRow.id)\n const nextCell = nextRowElement?.querySelector('[tabindex=\"0\"]') as HTMLElement\n if (nextCell) {\n nextCell.focus()\n nextCell.scrollIntoView({ block: 'nearest', behavior: 'smooth' })\n }\n })\n return\n }\n // Move to next row if current is disabled\n nextIndex = direction === 'down' ? nextIndex + 1 : nextIndex - 1\n }\n },\n [handleSelectionLogic],\n )\n\n const { handleRowKeyDown } = useRowKeydown<SimpleTableRow>({\n handleRowSelect: handleRowSelectForKeydown,\n handleArrowNavigation,\n })\n\n const columns = useMemo<ColumnDef<SimpleTableRow>[]>(\n () => [\n {\n accessorKey: 'label',\n header: undefined,\n filterFn: 'fuzzy',\n sortingFn: fuzzySort, //sort by fuzzy rank (falls back to alphanumeric)\n cell: ({ row, getValue, table: cellTableInstance }) => {\n const cellMeta = cellTableInstance.options.meta\n\n const handleCellClick = (event: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n // Prevent row selection if clicking on an interactive element within the cell\n if (\n event.target instanceof HTMLInputElement \|\|\n event.target instanceof HTMLButtonElement \|\|\n event.target instanceof HTMLTextAreaElement \|\|\n event.target instanceof HTMLSelectElement \|\|\n event.target instanceof HTMLAnchorElement \|\|\n (event.target as HTMLElement).closest('button, a, input, textarea, select')\n ) {\n return\n }\n handleSelectionLogic(\n cellTableInstance, // Pass the cell's table instance\n row.id,\n event.shiftKey,\n event.ctrlKey \|\| event.metaKey,\n )\n }\n\n const props: SimpleTableCellTemplateProps & {\n onClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void\n } = {\n className: clsx({\n selected: row.getIsSelected(),\n loading: cellMeta?.isLoading,\n disabled: row.original.isDisabled, // you can't select disabled rows\n inactive: row.original.inactive, // false: archived items but still selectable\n }),\n onKeyDown: (e) => {\n if (e.target instanceof HTMLInputElement) return\n // Corrected typo: handleRowKeydown -> handleRowKeyDown\n handleRowKeyDown(e, row)\n },\n depth: row.depth,\n tabIndex: 0,\n value: getValue<string>(),\n parents: row.original.parents,\n icon: row.original.icon \|\| undefined,\n iconColor: row.original.iconColor,\n iconFilled: row.original.iconFilled,\n img: row.original.img,\n imgShape: row.original.imgShape,\n imgRatio: imgRatio,\n isRowExpandable: row.getCanExpand(),\n enableNonFolderIndent,\n isRowExpanded: row.getIsExpanded(),\n isTableExpandable: cellMeta?.isExpandable,\n onExpandClick: row.getToggleExpandedHandler(),\n startContent: row.original.startContent,\n endContent: row.original.endContent,\n isDisabled: row.original.isDisabled,\n disabledMessage: row.original.disabledMessage,\n ...pt?.cell,\n onClick: handleCellClick, // Added onClick handler\n }\n\n // Use children function if provided, otherwise default to SimpleTableCellTemplate\n return cellMeta?.children ? (\n cellMeta.children(props, row, cellTableInstance)\n ) : (\n <SimpleTableCellTemplate {...props} {...pt?.cell} />\n )\n },\n },\n ],\n [\n forceUpdateTable,\n handleSelectionLogic,\n handleRowKeyDown,\n enableClickToDeselect,\n enableNonFolderIndent,\n imgRatio,\n ], // include enableClickToDeselect for completeness\n )\n\n const handleRowSelectionChangeCallback: OnChangeFn<RowSelectionState> = useCallback(\n (updater) => {\n onRowSelectionChange(functionalUpdate(updater, rowSelection))\n },\n [onRowSelectionChange],\n )\n\n const handleRowPinningChangeCallback: OnChangeFn<RowPinningState> = useCallback(\n (updater) => {\n onRowPinningChange?.(functionalUpdate(updater, rowPinning \|\| {}))\n },\n [onRowPinningChange],\n )\n\n const handleExpandedChange = useCallback(\n (updater: any) => {\n setExpanded?.((old) => {\n const newExpanded = updater instanceof Function ? updater(old) : updater\n onExpandedChange?.(newExpanded)\n return newExpanded\n })\n },\n [setExpanded],\n )\n\n const table = useReactTable({\n data: tableData,\n columns,\n state: {\n expanded,\n rowSelection,\n globalFilter,\n rowPinning,\n },\n onRowSelectionChange: handleRowSelectionChangeCallback,\n onRowPinningChange: handleRowPinningChangeCallback,\n filterFns: {\n fuzzy: fuzzyFilter,\n },\n globalFilterFn: 'fuzzy',\n enableRowSelection: true, //enable row selection for all rows\n enableRowPinning: !!onRowPinningChange,\n getRowId: (row) => row.id,\n enableSubRowSelection: false, //disable sub row selection\n onExpandedChange: handleExpandedChange,\n getSubRows: (row) => row.subRows,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n filterFromLeafRows: true,\n // debugTable: true,\n meta: {\n isExpandable: !!isExpandable,\n isLoading: isLoading,\n children: children,\n ...meta,\n },\n })\n\n // Update tableRef whenever the table instance changes.\n // This ensures handleRowSelectForKeydown uses the current table instance.\n useEffect(() => {\n tableRef.current = table\n }, [table])\n\n const { rows } = table.getRowModel()\n\n //The virtualizer needs to know the scrollable container element\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const rowVirtualizer = useVirtualizer({\n count: rows.length,\n estimateSize: () => rowHeight \|\| 34, //estimate row height for accurate scrollbar dragging\n getScrollElement: () => tableContainerRef.current,\n //measure dynamic row height, except in firefox because it measures table border height incorrectly\n measureElement: rowHeight\n ? () => rowHeight\n : typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1\n ? (element) => element?.getBoundingClientRect().height\n : undefined,\n overscan: 5,\n })\n\n // Memoize the ref callback to prevent infinite re-renders\n const measureElementRef = useCallback(\n (node: HTMLElement \| null) => {\n if (node) {\n rowVirtualizer.measureElement(node)\n }\n },\n [rowVirtualizer],\n )\n\n // Handle scroll to bottom detection\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLDivElement>) => {\n if (!onScrollBottom) return\n\n const target = event.currentTarget\n const { scrollTop, scrollHeight, clientHeight } = target\n\n // Check if we're near the bottom (within 100px)\n const isNearBottom = scrollHeight - scrollTop - clientHeight < 100\n\n if (isNearBottom && !isLoading) {\n onScrollBottom()\n }\n },\n [onScrollBottom, isLoading],\n )\n\n const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {\n // if the click is outside of any row, clear selection\n if (enableClickToDeselect && !(e.target as HTMLElement).closest('tr')) {\n table.setRowSelection({})\n lastSelectedIdRef.current = null\n }\n }\n\n return (\n <Styled.TableContainer\n ref={tableContainerRef}\n className={clsx({ isLoading })}\n onScroll={handleScroll}\n onClick={handleContainerClick}\n >\n {!error && (\n <table>\n <tbody\n style={{\n height: `${rowVirtualizer?.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n >\n {rowVirtualizer?.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index] as Row<SimpleTableRow>\n return (\n <tr\n data-index={virtualRow.index} //needed for dynamic row height measurement\n ref={measureElementRef} //measure dynamic row height\n key={row.id}\n id={row.id}\n {...pt?.row}\n style={{\n transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll\n ...pt?.row?.style, // custom styles to be passed\n }}\n >\n {row.getVisibleCells().map((cell) => {\n return (\n <td key={cell.id}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </td>\n )\n })}\n </tr>\n )\n })}\n </tbody>\n </table>\n )}\n {!!error && <EmptyPlaceholder error={error} />}\n </Styled.TableContainer>\n )\n}\n\nexport default SimpleTable\n"],"names":["fuzzyFilter","row","columnId","searchValue","addMeta","cellValue","searchString","itemRank","rankItem","fuzzySort","rowA","rowB","dir","compareItems","_a","_b","sortingFns","getRowRange","rows","idA","idB","range","singleRow","indexA","indexB","i","start","end","SimpleTable","data","isLoading","error","isExpandable","isMultiSelect","enableClickToDeselect","enableNonFolderIndent","forceUpdateTable","globalFilter","meta","rowHeight","imgRatio","onScrollBottom","children","pt","rowSelection","expanded","setExpanded","onExpandedChange","onRowSelectionChange","rowPinning","onRowPinningChange","useSimpleTableContext","lastSelectedIdRef","useRef","tableRef","tableData","useMemo","_","handleSelectionLogic","useCallback","tableInstance","rowId","isShift","isCtrlOrMeta","currentId","allProcessableRows","currentRow","r","lastId","rowsToToggle","newSelection","handleRowSelectForKeydown","event","selectedRow","isShiftKey","isCtrlKey","handleArrowNavigation","direction","visibleRows","currentIndex","nextIndex","nextRow","nextRowElement","nextCell","handleRowKeyDown","useRowKeydown","columns","getValue","cellTableInstance","cellMeta","handleCellClick","props","clsx","e","jsx","SimpleTableCellTemplate","handleRowSelectionChangeCallback","updater","functionalUpdate","handleRowPinningChangeCallback","handleExpandedChange","old","newExpanded","table","useReactTable","getCoreRowModel","getFilteredRowModel","getExpandedRowModel","useEffect","tableContainerRef","rowVirtualizer","useVirtualizer","element","measureElementRef","node","handleScroll","target","scrollTop","scrollHeight","clientHeight","handleContainerClick","jsxs","Styled.TableContainer","virtualRow","cell","flexRender","EmptyPlaceholder"],"mappings":"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"}

package/dist/shared/src/containers/SimpleTable/SimpleTable.styled.cjs.js CHANGED Viewed

@@ -63,16 +63,25 @@
   border-radius: var(--border-radius-m);
-  .value {
+  .text {
     width: 100%;
+    overflow: hidden;
+    display: flex;
+  }
+  .value {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .path {
-    display: flex;
-    gap: var(--base-gap-small);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: fit-content;
+    margin-right: 4px;
+    flex: 1; // path ellipsis first before value
   }
   .loading {
@@ -129,7 +138,25 @@
   .icon.filled {
     font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
   }
-`,n=o(e.Button)`
+  .image {
+    width: auto;
+    height: 24px;
+    max-height: 24px;
+    object-fit: cover;
+    aspect-ratio: 1;
+    background-color: var(--md-sys-color-surface-container-lowest);
+    margin-right: 4px;
+    &.circle {
+      border-radius: 50%;
+    }
+    &.square {
+      border-radius: 4px;
+    }
+  }
+`,t=o(e.Button)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -138,7 +165,7 @@
       background-color: var(--md-sys-color-surface-container-high-hover);
     }
   }
-`,t=o.div`
+`,i=o.div`
   border-radius: var(--border-radius-m);
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
@@ -148,7 +175,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-`,i=o.div`
+`,n=o.div`
   padding: 2px;
   width: 100%;
   justify-content: space-between;
@@ -179,5 +206,5 @@
   &.active {
     background-color: var(--md-sys-color-surface-container-hover) !important;
   }
-`;exports.Cell=a;exports.Container=t;exports.Expander=n;exports.Header=i;exports.HeaderButton=d;exports.TableContainer=r;
+`;exports.Cell=a;exports.Container=i;exports.Expander=t;exports.Header=n;exports.HeaderButton=d;exports.TableContainer=r;
 //# sourceMappingURL=SimpleTable.styled.cjs.js.map

package/dist/shared/src/containers/SimpleTable/SimpleTable.styled.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleTable.styled.cjs.js","sources":["../../../../../src/containers/SimpleTable/SimpleTable.styled.ts"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const TableContainer = styled.div`\n display: flex;\n\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 4px;\n padding-top: 8px;\n\n &.isLoading {\n overflow: hidden;\n }\n\n /* make error icon smaller /\n .empty-placeholder {\n width: 100%;\n padding: 8px;\n max-width: 240px;\n .icon {\n font-size: 32px;\n }\n h3 {\n ${theme.titleMedium}\n }\n }\n\n table {\n height: fit-content;\n width: 100%;\n display: grid;\n }\n\n thead {\n display: none;\n }\n\n tbody {\n position: relative;\n display: grid;\n }\n\n tr {\n position: absolute;\n display: flex;\n width: 100%;\n / transform: set on dynamically /\n }\n\n td {\n padding: 1px 0px;\n width: 100%;\n }\n`\n\nexport const Cell = styled.div`\n width: 100%;\n min-height: 32px;\n user-select: none;\n padding: 0px 4px;\n\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n cursor: pointer;\n\n border-radius: var(--border-radius-m);\n\n .~~value~~ {\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .path {\n ~~display~~: ~~flex~~;\n ~~gap~~: ~~var(--base~~-~~gap~~-~~small)~~;\n }\n\n .loading {\n pointer-events: none;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &,\n .icon {\n color: var(--md-sys-color-on-primary-container);\n }\n\n / update expander styles /\n .expander {\n &:hover {\n background-color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n &.inactive {\n .icon,\n .value {\n color: var(--md-sys-color-outline);\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n\n &,\n .value,\n .icon {\n color: var(--md-sys-color-outline);\n }\n\n &:hover {\n background-color: transparent;\n }\n\n .value {\n text-decoration: line-through;\n }\n }\n\n / filled icon */\n .icon.filled {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n`\n\nexport const Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n cursor: pointer;\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n`\n\n// utility styles for wrapping the table\nexport const Container = styled.div`\n border-radius: var(--border-radius-m);\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n height: 100%;\n flex: 1;\n\n display: flex;\n flex-direction: column;\n position: relative;\n`\n\nexport const Header = styled.div`\n padding: 2px;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n position: relative;\n\n display: flex;\n gap: var(--base-gap-small);\n\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n`\n\nexport const HeaderButton = styled(Button)`\n background-color: unset !important;\n z-index: 110;\n position: relative;\n\n &.hasIcon {\n padding: 4px;\n }\n\n &.open {\n background-color: unset !important;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n\n &.active {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n`\n"],"names":["TableContainer","styled","theme","Cell","Expander","Button","Container","Header","HeaderButton"],"mappings":"+JAGaA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsB7BC,QAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgCZC,EAAOF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAiFdG~~,EAAWH,EAAOI,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAYL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnBM,EAASN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAahBO,EAAeP,EAAOI,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"SimpleTable.styled.cjs.js","sources":["../../../../../src/containers/SimpleTable/SimpleTable.styled.ts"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const TableContainer = styled.div`\n display: flex;\n\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 4px;\n padding-top: 8px;\n\n &.isLoading {\n overflow: hidden;\n }\n\n /* make error icon smaller /\n .empty-placeholder {\n width: 100%;\n padding: 8px;\n max-width: 240px;\n .icon {\n font-size: 32px;\n }\n h3 {\n ${theme.titleMedium}\n }\n }\n\n table {\n height: fit-content;\n width: 100%;\n display: grid;\n }\n\n thead {\n display: none;\n }\n\n tbody {\n position: relative;\n display: grid;\n }\n\n tr {\n position: absolute;\n display: flex;\n width: 100%;\n / transform: set on dynamically /\n }\n\n td {\n padding: 1px 0px;\n width: 100%;\n }\n`\n\nexport const Cell = styled.div`\n width: 100%;\n min-height: 32px;\n user-select: none;\n padding: 0px 4px;\n\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n cursor: pointer;\n\n border-radius: var(--border-radius-m);\n\n .text {\n width: 100%;\n overflow: hidden;\n display: flex;\n }\n\n .value {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .path {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: fit-content;\n margin-right: 4px;\n flex: 1; // path ellipsis first before value\n }\n\n .loading {\n pointer-events: none;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &,\n .icon {\n color: var(--md-sys-color-on-primary-container);\n }\n\n / update expander styles /\n .expander {\n &:hover {\n background-color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n &.inactive {\n .icon,\n .value {\n color: var(--md-sys-color-outline);\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n\n &,\n .value,\n .icon {\n color: var(--md-sys-color-outline);\n }\n\n &:hover {\n background-color: transparent;\n }\n\n .value {\n text-decoration: line-through;\n }\n }\n\n / filled icon */\n .icon.filled {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n\n .image {\n width: auto;\n height: 24px;\n max-height: 24px;\n object-fit: cover;\n aspect-ratio: 1;\n background-color: var(--md-sys-color-surface-container-lowest);\n margin-right: 4px;\n\n &.circle {\n border-radius: 50%;\n }\n\n &.square {\n border-radius: 4px;\n }\n }\n`\n\nexport const Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n cursor: pointer;\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n`\n\n// utility styles for wrapping the table\nexport const Container = styled.div`\n border-radius: var(--border-radius-m);\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n height: 100%;\n flex: 1;\n\n display: flex;\n flex-direction: column;\n position: relative;\n`\n\nexport const Header = styled.div`\n padding: 2px;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n position: relative;\n\n display: flex;\n gap: var(--base-gap-small);\n\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n`\n\nexport const HeaderButton = styled(Button)`\n background-color: unset !important;\n z-index: 110;\n position: relative;\n\n &.hasIcon {\n padding: 4px;\n }\n\n &.open {\n background-color: unset !important;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n\n &.active {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n`\n"],"names":["TableContainer","styled","theme","Cell","Expander","Button","Container","Header","HeaderButton"],"mappings":"+JAGaA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsB7BC,QAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgCZC,EAAOF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4GdG,EAAWH,EAAOI,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYxBC,EAAYL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnBM,EAASN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAahBO,EAAeP,EAAOI,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/containers/SimpleTable/SimpleTable.styled.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { theme as e, Button as r } from "@ynput/ayon-react-components";
 import o from "styled-components";
-const n = o.div`
+const t = o.div`
   display: flex;
   height: 100%;
@@ -52,7 +52,7 @@ const n = o.div`
     padding: 1px 0px;
     width: 100%;
   }
-`, t = o.div`
+`, n = o.div`
   width: 100%;
   min-height: 32px;
   user-select: none;
@@ -65,16 +65,25 @@ const n = o.div`
   border-radius: var(--border-radius-m);
-  .value {
+  .text {
     width: 100%;
+    overflow: hidden;
+    display: flex;
+  }
+  .value {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .path {
-    display: flex;
-    gap: var(--base-gap-small);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: fit-content;
+    margin-right: 4px;
+    flex: 1; // path ellipsis first before value
   }
   .loading {
@@ -131,6 +140,24 @@ const n = o.div`
   .icon.filled {
     font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
   }
+  .image {
+    width: auto;
+    height: 24px;
+    max-height: 24px;
+    object-fit: cover;
+    aspect-ratio: 1;
+    background-color: var(--md-sys-color-surface-container-lowest);
+    margin-right: 4px;
+    &.circle {
+      border-radius: 50%;
+    }
+    &.square {
+      border-radius: 4px;
+    }
+  }
 `, d = o(r)`
   &.expander {
     background-color: unset;
@@ -183,11 +210,11 @@ const n = o.div`
   }
 `;
 export {
-  t as Cell,
+  n as Cell,
   l as Container,
   d as Expander,
   s as Header,
   c as HeaderButton,
-  n as TableContainer
+  t as TableContainer
 };
 //# sourceMappingURL=SimpleTable.styled.es.js.map

package/dist/shared/src/containers/SimpleTable/SimpleTable.styled.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleTable.styled.es.js","sources":["../../../../../src/containers/SimpleTable/SimpleTable.styled.ts"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const TableContainer = styled.div`\n display: flex;\n\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 4px;\n padding-top: 8px;\n\n &.isLoading {\n overflow: hidden;\n }\n\n /* make error icon smaller /\n .empty-placeholder {\n width: 100%;\n padding: 8px;\n max-width: 240px;\n .icon {\n font-size: 32px;\n }\n h3 {\n ${theme.titleMedium}\n }\n }\n\n table {\n height: fit-content;\n width: 100%;\n display: grid;\n }\n\n thead {\n display: none;\n }\n\n tbody {\n position: relative;\n display: grid;\n }\n\n tr {\n position: absolute;\n display: flex;\n width: 100%;\n / transform: set on dynamically /\n }\n\n td {\n padding: 1px 0px;\n width: 100%;\n }\n`\n\nexport const Cell = styled.div`\n width: 100%;\n min-height: 32px;\n user-select: none;\n padding: 0px 4px;\n\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n cursor: pointer;\n\n border-radius: var(--border-radius-m);\n\n .~~value~~ {\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .path {\n ~~display~~: ~~flex~~;\n ~~gap~~: ~~var(--base~~-~~gap~~-~~small)~~;\n }\n\n .loading {\n pointer-events: none;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &,\n .icon {\n color: var(--md-sys-color-on-primary-container);\n }\n\n / update expander styles /\n .expander {\n &:hover {\n background-color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n &.inactive {\n .icon,\n .value {\n color: var(--md-sys-color-outline);\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n\n &,\n .value,\n .icon {\n color: var(--md-sys-color-outline);\n }\n\n &:hover {\n background-color: transparent;\n }\n\n .value {\n text-decoration: line-through;\n }\n }\n\n / filled icon */\n .icon.filled {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n`\n\nexport const Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n cursor: pointer;\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n`\n\n// utility styles for wrapping the table\nexport const Container = styled.div`\n border-radius: var(--border-radius-m);\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n height: 100%;\n flex: 1;\n\n display: flex;\n flex-direction: column;\n position: relative;\n`\n\nexport const Header = styled.div`\n padding: 2px;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n position: relative;\n\n display: flex;\n gap: var(--base-gap-small);\n\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n`\n\nexport const HeaderButton = styled(Button)`\n background-color: unset !important;\n z-index: 110;\n position: relative;\n\n &.hasIcon {\n padding: 4px;\n }\n\n &.open {\n background-color: unset !important;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n\n &.active {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n`\n"],"names":["TableContainer","styled","theme","Cell","Expander","Button","Container","Header","HeaderButton"],"mappings":";;AAGO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsB7BC,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgCZC,IAAOF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAiFdG~~,IAAWH,EAAOI,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYxBC,IAAYL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBM,IAASN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAahBO,IAAeP,EAAOI,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"SimpleTable.styled.es.js","sources":["../../../../../src/containers/SimpleTable/SimpleTable.styled.ts"],"sourcesContent":["import { Button, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const TableContainer = styled.div`\n display: flex;\n\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 4px;\n padding-top: 8px;\n\n &.isLoading {\n overflow: hidden;\n }\n\n /* make error icon smaller /\n .empty-placeholder {\n width: 100%;\n padding: 8px;\n max-width: 240px;\n .icon {\n font-size: 32px;\n }\n h3 {\n ${theme.titleMedium}\n }\n }\n\n table {\n height: fit-content;\n width: 100%;\n display: grid;\n }\n\n thead {\n display: none;\n }\n\n tbody {\n position: relative;\n display: grid;\n }\n\n tr {\n position: absolute;\n display: flex;\n width: 100%;\n / transform: set on dynamically /\n }\n\n td {\n padding: 1px 0px;\n width: 100%;\n }\n`\n\nexport const Cell = styled.div`\n width: 100%;\n min-height: 32px;\n user-select: none;\n padding: 0px 4px;\n\n display: flex;\n gap: var(--base-gap-small);\n align-items: center;\n cursor: pointer;\n\n border-radius: var(--border-radius-m);\n\n .text {\n width: 100%;\n overflow: hidden;\n display: flex;\n }\n\n .value {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .path {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: fit-content;\n margin-right: 4px;\n flex: 1; // path ellipsis first before value\n }\n\n .loading {\n pointer-events: none;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n\n &.selected {\n background-color: var(--md-sys-color-primary-container);\n\n &,\n .icon {\n color: var(--md-sys-color-on-primary-container);\n }\n\n / update expander styles /\n .expander {\n &:hover {\n background-color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n &.inactive {\n .icon,\n .value {\n color: var(--md-sys-color-outline);\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed !important;\n\n &,\n .value,\n .icon {\n color: var(--md-sys-color-outline);\n }\n\n &:hover {\n background-color: transparent;\n }\n\n .value {\n text-decoration: line-through;\n }\n }\n\n / filled icon */\n .icon.filled {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n\n .image {\n width: auto;\n height: 24px;\n max-height: 24px;\n object-fit: cover;\n aspect-ratio: 1;\n background-color: var(--md-sys-color-surface-container-lowest);\n margin-right: 4px;\n\n &.circle {\n border-radius: 50%;\n }\n\n &.square {\n border-radius: 4px;\n }\n }\n`\n\nexport const Expander = styled(Button)`\n &.expander {\n background-color: unset;\n padding: 2px;\n cursor: pointer;\n &:hover {\n background-color: var(--md-sys-color-surface-container-high-hover);\n }\n }\n`\n\n// utility styles for wrapping the table\nexport const Container = styled.div`\n border-radius: var(--border-radius-m);\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n height: 100%;\n flex: 1;\n\n display: flex;\n flex-direction: column;\n position: relative;\n`\n\nexport const Header = styled.div`\n padding: 2px;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n position: relative;\n\n display: flex;\n gap: var(--base-gap-small);\n\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n`\n\nexport const HeaderButton = styled(Button)`\n background-color: unset !important;\n z-index: 110;\n position: relative;\n\n &.hasIcon {\n padding: 4px;\n }\n\n &.open {\n background-color: unset !important;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n\n &.active {\n background-color: var(--md-sys-color-surface-container-hover) !important;\n }\n`\n"],"names":["TableContainer","styled","theme","Cell","Expander","Button","Container","Header","HeaderButton"],"mappings":";;AAGO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsB7BC,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgCZC,IAAOF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4GdG,IAAWH,EAAOI,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYxBC,IAAYL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBM,IAASN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAahBO,IAAeP,EAAOI,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/containers/SimpleTable/SimpleTableRowTemplate.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),p=require("react"),c=require("./SimpleTable.styled.cjs.js"),f=require("@ynput/ayon-react-components"),q=require("clsx"),m=({isRowExpandable:l,isRowExpanded:t,enableNonFolderIndent:r=!0,isTableExpandable:i,onExpandClick:s})=>l?e.jsxRuntimeExports.jsx(c.Expander,{onClick:a=>{a.stopPropagation(),s==null||s()},icon:t?"expand_more":"chevron_right",className:"expander",style:{cursor:"pointer"}}):i&&r&&e.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}),S=p.forwardRef(({value:l,icon:t,parents:r,iconColor:i,iconFilled:s,isRowExpandable:a,isRowExpanded:u,isTableExpandable:j,enableNonFolderIndent:R=!0,onExpandClick:d,startContent:n,endContent:x,depth:h=0,isDisabled:y,disabledMessage:E,active:N,style:b,...g},v)=>e.jsxRuntimeExports.jsxs(c.Cell,{...g,ref:v,style:{...b,paddingLeft:`calc(${h*.5}rem + 4px)`},title:y?E:void 0,children:[e.jsxRuntimeExports.jsx(m,{isRowExpandable:a,isRowExpanded:u,isTableExpandable:j,onExpandClick:d,enableNonFolderIndent:R}),n&&n,t&&e.jsxRuntimeExports.jsx(f.Icon,{icon:t,className:q({filled:s}),style:{color:i}}),r&&e.jsxRuntimeExports.jsx("span",{className:"path",children:r.map((T,o)=>e.jsxRuntimeExports.jsxs(p.Fragment,{children:[e.jsxRuntimeExports.jsx("span",{children:T},o+"-path"),e.jsxRuntimeExports.jsx("span",{children:"/"},o+"-separator")]},o))}),e.jsxRuntimeExports.jsx("span",{className:"value",children:l}),x&&x]}));exports.RowExpander=m;exports.SimpleTableCellTemplate=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../_virtual/jsx-runtime.cjs.js"),I=require("react"),R=require("./SimpleTable.styled.cjs.js"),L=require("@ynput/ayon-react-components"),d=require("clsx"),y=({isRowExpandable:o,isRowExpanded:i,enableNonFolderIndent:l=!0,isTableExpandable:n,onExpandClick:r})=>o?s.jsxRuntimeExports.jsx(R.Expander,{onClick:a=>{a.stopPropagation(),r==null||r()},icon:i?"expand_more":"chevron_right",className:"expander",style:{cursor:"pointer"}}):n&&l&&s.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}),M=I.forwardRef(({value:o,icon:i,parents:l,iconColor:n,iconFilled:r,img:a,imgShape:g="square",imgRatio:h=1,isRowExpandable:E,isRowExpanded:N,isTableExpandable:v,enableNonFolderIndent:b=!0,onExpandClick:q,startContent:c,endContent:x,depth:S=0,isDisabled:T,disabledMessage:f,active:O,style:w,pt:e,..._},P)=>{var m,u,j,t;return s.jsxRuntimeExports.jsxs(R.Cell,{..._,ref:P,style:{...w,paddingLeft:`calc(${S*.5}rem + 4px)`},title:T?f:void 0,children:[s.jsxRuntimeExports.jsx(y,{isRowExpandable:E,isRowExpanded:N,isTableExpandable:v,onExpandClick:q,enableNonFolderIndent:b,...e==null?void 0:e.expander}),c&&c,a&&s.jsxRuntimeExports.jsx("img",{src:a,...e==null?void 0:e.img,alt:"",className:d("image",g,(m=e==null?void 0:e.img)==null?void 0:m.className),style:{aspectRatio:h.toString(),...(u=e==null?void 0:e.img)==null?void 0:u.style}}),i&&s.jsxRuntimeExports.jsx(L.Icon,{icon:i,className:d({filled:r},(j=e==null?void 0:e.icon)==null?void 0:j.className),style:{color:n,...(t=e==null?void 0:e.icon)==null?void 0:t.style},...e==null?void 0:e.icon}),s.jsxRuntimeExports.jsxs("div",{className:"text",...e==null?void 0:e.text,children:[l&&s.jsxRuntimeExports.jsxs("span",{className:"path",children:[l.join(" / ")," / "]}),s.jsxRuntimeExports.jsx("span",{className:"value",children:o})]}),x&&x]})});exports.RowExpander=y;exports.SimpleTableCellTemplate=M;
 //# sourceMappingURL=SimpleTableRowTemplate.cjs.js.map

package/dist/shared/src/containers/SimpleTable/SimpleTableRowTemplate.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleTableRowTemplate.cjs.js","sources":["../../../../../src/containers/SimpleTable/SimpleTableRowTemplate.tsx"],"sourcesContent":["import { forwardRef, Fragment } from 'react'\nimport * as Styled from './SimpleTable.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\n\nexport type RowExpanderProps = {\n isRowExpandable?: boolean\n isRowExpanded?: boolean\n enableNonFolderIndent?: boolean\n isTableExpandable?: boolean\n onExpandClick?: () => void\n}\n\nexport const RowExpander = ({\n isRowExpandable,\n isRowExpanded,\n enableNonFolderIndent = true,\n isTableExpandable,\n onExpandClick,\n}: RowExpanderProps) =>\n isRowExpandable ? (\n <Styled.Expander\n onClick={(e) => {\n e.stopPropagation()\n onExpandClick?.()\n }}\n icon={isRowExpanded ? 'expand_more' : 'chevron_right'}\n className=\"expander\"\n style={{ cursor: 'pointer' }}\n />\n ) : (\n isTableExpandable &&\n enableNonFolderIndent && <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n\nexport interface SimpleTableCellTemplateProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string\n icon?: string\n parents?: string[]\n iconColor?: string\n iconFilled?: boolean\n isRowExpandable?: boolean\n isRowExpanded?: boolean\n isTableExpandable?: boolean\n enableNonFolderIndent?: boolean\n onExpandClick?: () => void\n // when used as a template\n startContent?: React.ReactNode\n endContent?: React.ReactNode\n depth?: number\n isDisabled?: boolean\n disabledMessage?: string\n active?: boolean\n}\n\nexport const SimpleTableCellTemplate = forwardRef<HTMLDivElement, SimpleTableCellTemplateProps>(\n (\n {\n value,\n icon,\n parents,\n iconColor,\n iconFilled,\n isRowExpandable,\n isRowExpanded,\n isTableExpandable,\n enableNonFolderIndent = true,\n onExpandClick,\n startContent,\n endContent,\n depth = 0,\n isDisabled,\n disabledMessage,\n active,\n style,\n ...props\n },\n ref,\n ) => {\n return (\n <Styled.Cell\n {...props}\n ref={ref}\n style={{\n ...style,\n paddingLeft: `calc(${depth * 0.5}rem + 4px)`,\n }}\n title={isDisabled ? disabledMessage : undefined}\n >\n <RowExpander\n isRowExpandable={isRowExpandable}\n isRowExpanded={isRowExpanded}\n isTableExpandable={isTableExpandable}\n onExpandClick={onExpandClick}\n enableNonFolderIndent={enableNonFolderIndent}\n />\n {startContent && startContent}\n {~~icon~~ && (\n <~~Icon~~\n ~~icon~~={~~icon~~}\n className={clsx({ ~~filled:~~ ~~iconFilled }~~)}\n style={{\n ~~color~~: ~~iconColor~~,\n }}\n />\n )}\n {~~parents~~ && (\n <~~span className=\"path~~\~~">\~~n {~~parents.map~~(~~(part~~, ~~index~~) ~~=> (~~\n ~~<Fragment~~ ~~key=~~{~~index~~}>\n <~~span~~ ~~key={index~~ ~~+ '-path'}>~~{~~part~~}~~</span~~>\n <span ~~key=~~{~~index~~ + '~~-separator'}>/</span>\n </Fragment>\n~~ ))}\n </span~~>\n )~~}\n <span className=\"value\">{value}</span>\n {endContent && endContent}\n </Styled.Cell>\n )\n },\n)\n"],"names":["RowExpander","isRowExpandable","isRowExpanded","enableNonFolderIndent","isTableExpandable","onExpandClick","jsx","Styled.Expander","e","SimpleTableCellTemplate","forwardRef","value","icon","parents","iconColor","iconFilled","startContent","endContent","depth","isDisabled","disabledMessage","active","style","props","ref","jsxs","Styled.Cell","~~Icon~~","~~clsx~~","~~part~~","~~index~~","~~Fragment~~"],"mappings":"mQAaaA,EAAc,CAAC,CAC1B,gBAAAC,EACA,cAAAC,EACA,sBAAAC,EAAwB,GACxB,kBAAAC,EACA,cAAAC,CACF,IACEJ,EACEK,EAAA,kBAAA,IAACC,EAAO,SAAP,CACC,QAAUC,GAAM,CACdA,EAAE,gBAAgB,EACFH,GAAA,MAAAA,GAClB,EACA,KAAMH,EAAgB,cAAgB,gBACtC,UAAU,WACV,MAAO,CAAE,OAAQ,SAAU,CAAA,CAC7B,EAEAE,GACAD,GAAyBG,EAAA,kBAAA,IAAC,MAAI,CAAA,MAAO,CAAE,QAAS,eAAgB,SAAU,EAAA,CAAM,CAAA,~~EAuBvEG~~,EAA0BC,EAAA,WACrC,CACE,CACE,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,WAAAC,EACA,~~gBAAAd~~,EACA,cAAAC,EACA,kBAAAE,EACA,sBAAAD,EAAwB,GACxB,cAAAE,EACA,~~aAAAW~~,EACA,WAAAC,EACA,MAAAC,EAAQ,EACR,WAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,MAAAC,EACA,GAAGC,GAELC,~~IAGEC~~,EAAA,kBAAA,KAACC,EAAO,KAAP,CACE,GAAGH,EACJ,IAAAC,EACA,MAAO,CACL,~~GAAGF~~,EACH,YAAa,QAAQJ,EAAQ,EAAG,YAClC,EACA,MAAOC,EAAaC,EAAkB,OAEtC,SAAA,~~CAAAd~~,EAAA,kBAAA,IAACN,EAAA,CACC,gBAAAC,EACA,cAAAC,EACA,kBAAAE,EACA,cAAAC,EACA,sBAAAF,~~CAAA~~,~~CACF~~,~~EACCa~~,GAAgBA,~~EAChBJ~~,~~GACCN~~,EAAA,kBAAA,~~IAACqB~~,~~EAAA~~,~~KAAA,~~CACC,~~KAAAf~~,~~EACA~~,~~UAAWgB~~,EAAK,~~CAAE~~,~~OAAQb~~,~~EAAY~~,~~EACtC~~,MAAO,CACL,~~MAAOD~~,~~CAAA~~,~~CACT~~,CACF,~~EAEDD~~,~~GACEP~~,EAAA,kBAAA,~~IAAA~~,~~OAAA~~,~~CAAK~~,~~UAAU~~,~~OACb~~,~~SAAQO~~,~~EAAA~~,~~IAAI~~,~~CAACgB~~,~~EAAMC~~,~~IAClBL~~,~~EAAA~~,~~kBAAA~~,~~KAACM~~,~~EACC~~,~~SAAA~~,~~CAAA~~,~~SAAA~~,~~CAACzB~~,~~EAAA~~,~~kBAAA~~,IAAA,~~OAAA~~,~~CAA4B~~,~~SAAlBuB~~,CAAA,~~EAAAC~~,~~EAAQ~~,~~OAAe~~,~~EACjCxB~~,EAAA,kBAAA,~~IAAA~~,~~OAAA~~,~~CAAgC~~,~~SAAtB~~,~~GAAA~~,~~EAAAwB~~,EAAQ,~~YAAe~~,~~CAAA~~,~~GAFrBA~~,~~CAGf~~,~~CACD~~,~~EACH~~,~~EAEDxB,~~EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,QAAS,SAAMK,~~EAAA~~,~~EAC9BM~~,GAAcA,CAAA,CAAA,CACjB,CAGN"}
1	+ {"version":3,"file":"SimpleTableRowTemplate.cjs.js","sources":["../../../../../src/containers/SimpleTable/SimpleTableRowTemplate.tsx"],"sourcesContent":["import { forwardRef, Fragment } from 'react'\nimport * as Styled from './SimpleTable.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\n\nexport type RowExpanderProps = {\n isRowExpandable?: boolean\n isRowExpanded?: boolean\n enableNonFolderIndent?: boolean\n isTableExpandable?: boolean\n onExpandClick?: () => void\n}\n\nexport const RowExpander = ({\n isRowExpandable,\n isRowExpanded,\n enableNonFolderIndent = true,\n isTableExpandable,\n onExpandClick,\n}: RowExpanderProps) =>\n isRowExpandable ? (\n <Styled.Expander\n onClick={(e) => {\n e.stopPropagation()\n onExpandClick?.()\n }}\n icon={isRowExpanded ? 'expand_more' : 'chevron_right'}\n className=\"expander\"\n style={{ cursor: 'pointer' }}\n />\n ) : (\n isTableExpandable &&\n enableNonFolderIndent && <div style={{ display: 'inline-block', minWidth: 24 }} />\n )\n\nexport interface SimpleTableCellTemplateProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string\n icon?: string\n parents?: string[]\n iconColor?: string\n iconFilled?: boolean\n img?: string \| null\n imgShape?: 'square' \| 'circle'\n imgRatio?: number\n isRowExpandable?: boolean\n isRowExpanded?: boolean\n isTableExpandable?: boolean\n enableNonFolderIndent?: boolean\n onExpandClick?: () => void\n // when used as a template\n startContent?: React.ReactNode\n endContent?: React.ReactNode\n depth?: number\n isDisabled?: boolean\n disabledMessage?: string\n active?: boolean\n pt?: {\n img?: Partial<React.ImgHTMLAttributes<HTMLImageElement>>\n expander?: Partial<React.ComponentProps<typeof RowExpander>>\n icon?: Partial<React.ComponentProps<typeof Icon>>\n text?: React.HTMLAttributes<HTMLDivElement>\n }\n}\n\nexport const SimpleTableCellTemplate = forwardRef<HTMLDivElement, SimpleTableCellTemplateProps>(\n (\n {\n value,\n icon,\n parents,\n iconColor,\n iconFilled,\n img,\n imgShape = 'square',\n imgRatio = 1,\n isRowExpandable,\n isRowExpanded,\n isTableExpandable,\n enableNonFolderIndent = true,\n onExpandClick,\n startContent,\n endContent,\n depth = 0,\n isDisabled,\n disabledMessage,\n active,\n style,\n pt,\n ...props\n },\n ref,\n ) => {\n return (\n <Styled.Cell\n {...props}\n ref={ref}\n style={{\n ...style,\n paddingLeft: `calc(${depth * 0.5}rem + 4px)`,\n }}\n title={isDisabled ? disabledMessage : undefined}\n >\n <RowExpander\n isRowExpandable={isRowExpandable}\n isRowExpanded={isRowExpanded}\n isTableExpandable={isTableExpandable}\n onExpandClick={onExpandClick}\n enableNonFolderIndent={enableNonFolderIndent}\n {...pt?.expander}\n />\n {startContent && startContent}\n {img && (\n <img\n src={img}\n {...pt?.img}\n alt=\"\"\n className={clsx('image', imgShape, pt?.img?.className)}\n style={{\n aspectRatio: imgRatio.toString(),\n ...pt?.img?.style,\n }}\n />\n )}\n {icon && (\n <Icon\n icon={icon}\n className={clsx({ filled: iconFilled }, pt?.icon?.className)}\n style={{\n color: iconColor,\n ...pt?.icon?.style,\n }}\n {...pt?.icon}\n />\n )}\n <div className=\"text\" {...pt?.text}>\n {parents && <span className=\"path\">{parents.join(' / ')} / </span>}\n <span className=\"value\">{value}</span>\n </div>\n {endContent && endContent}\n </Styled.Cell>\n )\n },\n)\n"],"names":["RowExpander","isRowExpandable","isRowExpanded","enableNonFolderIndent","isTableExpandable","onExpandClick","jsx","Styled.Expander","e","SimpleTableCellTemplate","forwardRef","value","icon","parents","iconColor","iconFilled","img","imgShape","imgRatio","startContent","endContent","depth","isDisabled","disabledMessage","active","style","pt","props","ref","jsxs","Styled.Cell","clsx","_a","_b","Icon","_c","_d"],"mappings":"mQAaaA,EAAc,CAAC,CAC1B,gBAAAC,EACA,cAAAC,EACA,sBAAAC,EAAwB,GACxB,kBAAAC,EACA,cAAAC,CACF,IACEJ,EACEK,EAAA,kBAAA,IAACC,EAAO,SAAP,CACC,QAAUC,GAAM,CACdA,EAAE,gBAAgB,EACFH,GAAA,MAAAA,GAClB,EACA,KAAMH,EAAgB,cAAgB,gBACtC,UAAU,WACV,MAAO,CAAE,OAAQ,SAAU,CAAA,CAC7B,EAEAE,GACAD,GAAyBG,EAAA,kBAAA,IAAC,MAAI,CAAA,MAAO,CAAE,QAAS,eAAgB,SAAU,EAAA,CAAM,CAAA,EAgCvEG,EAA0BC,EAAA,WACrC,CACE,CACE,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,WAAAC,EACA,IAAAC,EACA,SAAAC,EAAW,SACX,SAAAC,EAAW,EACX,gBAAAjB,EACA,cAAAC,EACA,kBAAAE,EACA,sBAAAD,EAAwB,GACxB,cAAAE,EACA,aAAAc,EACA,WAAAC,EACA,MAAAC,EAAQ,EACR,WAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,MAAAC,EACA,GAAAC,EACA,GAAGC,GAELC,IACG,aAED,OAAAC,EAAA,kBAAA,KAACC,EAAO,KAAP,CACE,GAAGH,EACJ,IAAAC,EACA,MAAO,CACL,GAAGH,EACH,YAAa,QAAQJ,EAAQ,EAAG,YAClC,EACA,MAAOC,EAAaC,EAAkB,OAEtC,SAAA,CAAAjB,EAAA,kBAAA,IAACN,EAAA,CACC,gBAAAC,EACA,cAAAC,EACA,kBAAAE,EACA,cAAAC,EACA,sBAAAF,EACC,GAAGuB,GAAA,YAAAA,EAAI,QAAA,CACV,EACCP,GAAgBA,EAChBH,GACCV,EAAA,kBAAA,IAAC,MAAA,CACC,IAAKU,EACJ,GAAGU,GAAA,YAAAA,EAAI,IACR,IAAI,GACJ,UAAWK,EAAK,QAASd,GAAUe,EAAAN,GAAA,YAAAA,EAAI,MAAJ,YAAAM,EAAS,SAAS,EACrD,MAAO,CACL,YAAad,EAAS,SAAS,EAC/B,IAAGe,EAAAP,GAAA,YAAAA,EAAI,MAAJ,YAAAO,EAAS,KAAA,CACd,CACF,EAEDrB,GACCN,EAAA,kBAAA,IAAC4B,EAAA,KAAA,CACC,KAAAtB,EACA,UAAWmB,EAAK,CAAE,OAAQhB,IAAcoB,EAAAT,GAAA,YAAAA,EAAI,OAAJ,YAAAS,EAAU,SAAS,EAC3D,MAAO,CACL,MAAOrB,EACP,IAAGsB,EAAAV,GAAA,YAAAA,EAAI,OAAJ,YAAAU,EAAU,KACf,EACC,GAAGV,GAAA,YAAAA,EAAI,IAAA,CACV,2BAED,MAAI,CAAA,UAAU,OAAQ,GAAGA,GAAA,YAAAA,EAAI,KAC3B,SAAA,CAAWb,GAAAgB,EAAA,kBAAA,KAAC,OAAK,CAAA,UAAU,OAAQ,SAAA,CAAAhB,EAAQ,KAAK,KAAK,EAAE,KAAA,EAAG,EAC1DP,EAAA,kBAAA,IAAA,OAAA,CAAK,UAAU,QAAS,SAAMK,CAAA,CAAA,CAAA,EACjC,EACCS,GAAcA,CAAA,CAAA,CACjB,CAAA,CAGN"}

package/dist/shared/src/containers/SimpleTable/SimpleTableRowTemplate.es.js CHANGED Viewed

@@ -1,88 +1,113 @@
-import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
-import { forwardRef as N, Fragment as R } from "react";
-import { Cell as b, Expander as w } from "./SimpleTable.styled.es.js";
-import { Icon as T } from "@ynput/ayon-react-components";
-import _ from "clsx";
-const F = ({
-  isRowExpandable: a,
-  isRowExpanded: s,
+import { j as s } from "../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef as L } from "react";
+import { Cell as P, Expander as W } from "./SimpleTable.styled.es.js";
+import { Icon as $ } from "@ynput/ayon-react-components";
+import g from "clsx";
+const z = ({
+  isRowExpandable: o,
+  isRowExpanded: a,
   enableNonFolderIndent: l = !0,
-  isTableExpandable: o,
+  isTableExpandable: m,
   onExpandClick: r
-}) => a ? /* @__PURE__ */ e.jsx(
-  w,
+}) => o ? /* @__PURE__ */ s.jsx(
+  W,
   {
-    onClick: (t) => {
-      t.stopPropagation(), r == null || r();
+    onClick: (i) => {
+      i.stopPropagation(), r == null || r();
     },
-    icon: s ? "expand_more" : "chevron_right",
+    icon: a ? "expand_more" : "chevron_right",
     className: "expander",
     style: { cursor: "pointer" }
   }
-) : o && l && /* @__PURE__ */ e.jsx("div", { style: { display: "inline-block", minWidth: 24 } }), q = N(
+) : m && l && /* @__PURE__ */ s.jsx("div", { style: { display: "inline-block", minWidth: 24 } }), J = L(
   ({
-    value: a,
-    icon: s,
+    value: o,
+    icon: a,
     parents: l,
-    iconColor: o,
+    iconColor: m,
     iconFilled: r,
-    isRowExpandable: t,
-    isRowExpanded: c,
-    isTableExpandable: x,
-    enableNonFolderIndent: j = !0,
-    onExpandClick: n,
-    startContent: m,
-    endContent: p,
-    depth: d = 0,
-    isDisabled: h,
-    disabledMessage: f,
-    active: I,
-    style: u,
-    ...v
-  }, y) => /* @__PURE__ */ e.jsxs(
-    b,
-    {
-      ...v,
-      ref: y,
-      style: {
-        ...u,
-        paddingLeft: `calc(${d * 0.5}rem + 4px)`
-      },
-      title: h ? f : void 0,
-      children: [
-        /* @__PURE__ */ e.jsx(
-          F,
-          {
-            isRowExpandable: t,
-            isRowExpanded: c,
-            isTableExpandable: x,
-            onExpandClick: n,
-            enableNonFolderIndent: j
-          }
-        ),
-        m && m,
-        s && /* @__PURE__ */ e.jsx(
-          T,
-          {
-            icon: s,
-            className: _({ filled: r }),
-            style: {
-              color: o
+    img: i,
+    imgShape: h = "square",
+    imgRatio: y = 1,
+    isRowExpandable: N,
+    isRowExpanded: u,
+    isTableExpandable: v,
+    enableNonFolderIndent: R = !0,
+    onExpandClick: b,
+    startContent: c,
+    endContent: x,
+    depth: w = 0,
+    isDisabled: S,
+    disabledMessage: T,
+    active: A,
+    style: _,
+    pt: e,
+    ...q
+  }, I) => {
+    var n, d, j, f;
+    return /* @__PURE__ */ s.jsxs(
+      P,
+      {
+        ...q,
+        ref: I,
+        style: {
+          ..._,
+          paddingLeft: `calc(${w * 0.5}rem + 4px)`
+        },
+        title: S ? T : void 0,
+        children: [
+          /* @__PURE__ */ s.jsx(
+            z,
+            {
+              isRowExpandable: N,
+              isRowExpanded: u,
+              isTableExpandable: v,
+              onExpandClick: b,
+              enableNonFolderIndent: R,
+              ...e == null ? void 0 : e.expander
             }
-          }
-        ),
-        l && /* @__PURE__ */ e.jsx("span", { className: "path", children: l.map((g, i) => /* @__PURE__ */ e.jsxs(R, { children: [
-          /* @__PURE__ */ e.jsx("span", { children: g }, i + "-path"),
-          /* @__PURE__ */ e.jsx("span", { children: "/" }, i + "-separator")
-        ] }, i)) }),
-        /* @__PURE__ */ e.jsx("span", { className: "value", children: a }),
-        p && p
-      ]
-    }
-  )
+          ),
+          c && c,
+          i && /* @__PURE__ */ s.jsx(
+            "img",
+            {
+              src: i,
+              ...e == null ? void 0 : e.img,
+              alt: "",
+              className: g("image", h, (n = e == null ? void 0 : e.img) == null ? void 0 : n.className),
+              style: {
+                aspectRatio: y.toString(),
+                ...(d = e == null ? void 0 : e.img) == null ? void 0 : d.style
+              }
+            }
+          ),
+          a && /* @__PURE__ */ s.jsx(
+            $,
+            {
+              icon: a,
+              className: g({ filled: r }, (j = e == null ? void 0 : e.icon) == null ? void 0 : j.className),
+              style: {
+                color: m,
+                ...(f = e == null ? void 0 : e.icon) == null ? void 0 : f.style
+              },
+              ...e == null ? void 0 : e.icon
+            }
+          ),
+          /* @__PURE__ */ s.jsxs("div", { className: "text", ...e == null ? void 0 : e.text, children: [
+            l && /* @__PURE__ */ s.jsxs("span", { className: "path", children: [
+              l.join(" / "),
+              " / "
+            ] }),
+            /* @__PURE__ */ s.jsx("span", { className: "value", children: o })
+          ] }),
+          x && x
+        ]
+      }
+    );
+  }
 );
 export {
-  F as RowExpander,
-  q as SimpleTableCellTemplate
+  z as RowExpander,
+  J as SimpleTableCellTemplate
 };
 //# sourceMappingURL=SimpleTableRowTemplate.es.js.map