npm - @ynput/ayon-frontend-shared - Versions diffs - 0.3.42 → 0.3.44 - Mend

@ynput/ayon-frontend-shared 0.3.42 → 0.3.44

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 (1133) 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, rankings } 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 with CONTAINS threshold to avoid overly permissive fuzzy matches\n // This ensures the search term must be a substring, not just scattered characters\n const itemRank = rankItem(searchString, searchValue, { threshold: rankings.CONTAINS })\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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\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 fitContent?: boolean\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 fitContent,\n ...props\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 onScroll={handleScroll}\n onClick={handleContainerClick}\n {...props}\n className={clsx(props.className, { isLoading, fitContent })}\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","rankings","fuzzySort","rowA","rowB","dir","compareItems","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","fitContent","props","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","nextCell","handleRowKeyDown","useRowKeydown","columns","getValue","cellTableInstance","cellMeta","handleCellClick","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 Table,\n RowData,\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 { rankItem, compareItems, rankings } 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'\nimport {\n SimpleTableProps,\n SimpleTableRow,\n SimpleTableRowContextMenuBuilder,\n} from './SimpleTable.types'\nimport { useCreateContextMenu } from '../ContextMenu'\n\nconst toMenuItems = (items: ReturnType<SimpleTableRowContextMenuBuilder>) => {\n if (!items) return []\n return Array.isArray(items) ? items.filter(Boolean) : [items]\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 with CONTAINS threshold to avoid overly permissive fuzzy matches\n // This ensures the search term must be a substring, not just scattered characters\n const itemRank = rankItem(searchString, searchValue, { threshold: rankings.CONTAINS })\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\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 onRename,\n renamingId,\n onSubmitRename,\n onCancelRename,\n onRowDoubleClick,\n rowContextMenuBuilders = [],\n children,\n pt,\n fitContent,\n ...props\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 const [showRowContextMenu] = useCreateContextMenu()\n\n // Refs for values used inside the columns memo.\n // Assigning synchronously (not via useEffect) means the cell function always reads\n // the latest value at render time, while the columns memo itself has a minimal dep\n // array and stays as a stable reference — critical because flexRender calls\n // React.createElement with the cell function, so a new reference = remount = broken dblclick.\n const onRowDoubleClickRef = useRef(onRowDoubleClick)\n onRowDoubleClickRef.current = onRowDoubleClick\n const renamingIdRef = useRef(renamingId)\n renamingIdRef.current = renamingId\n const onSubmitRenameRef = useRef(onSubmitRename)\n onSubmitRenameRef.current = onSubmitRename\n const onCancelRenameRef = useRef(onCancelRename)\n onCancelRenameRef.current = onCancelRename\n const onRenameRef = useRef(onRename)\n onRenameRef.current = onRename\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 // If it's already selected and it's the only one, don't update selection to avoid unnecessary re-renders\n const selection = tableInstance.getState().rowSelection\n if (!(Object.keys(selection).length === 1 && selection[currentId])) {\n tableInstance.setRowSelection({ [currentId]: true })\n }\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 // handleRenameForKeydown reads from onRenameRef so it has empty deps and is\n // permanently stable — keeping handleRowKeyDown and therefore columns stable.\n const handleRenameForKeydown = useCallback(\n (e: RowKeyboardEvent, row: Row<SimpleTableRow>) => {\n if (!row.original.isDisabled) onRenameRef.current?.(row.id, row)\n },\n [], // eslint-disable-line react-hooks/exhaustive-deps\n )\n\n const { handleRowKeyDown } = useRowKeydown<SimpleTableRow>({\n handleRowSelect: handleRowSelectForKeydown,\n handleArrowNavigation,\n handleRename: handleRenameForKeydown,\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 onDoubleClick?: (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 isRenaming: row.id === renamingIdRef.current,\n onSubmitRename: onSubmitRenameRef.current\n ? (v) => onSubmitRenameRef.current!(row.id, v)\n : undefined,\n onCancelRename: onCancelRenameRef.current,\n ...pt?.cell,\n onClick: handleCellClick, // Added onClick handler\n onDoubleClick: (e) => onRowDoubleClickRef.current?.(row.id, row),\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 ],\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 // @ts-expect-error: updateData is not required\n meta: useMemo(\n () => ({\n isExpandable: !!isExpandable,\n isLoading: isLoading,\n children: children,\n ...meta,\n }),\n [isExpandable, isLoading, children, 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 const handleRowContextMenu = useCallback(\n (rowId: string, rowIndex: number, e: ReactMouseEvent<HTMLTableRowElement>) => {\n if (!tableRef.current) return\n const row = rows[rowIndex]\n if (!row \|\| row.original === undefined) return\n\n e.preventDefault()\n e.stopPropagation()\n\n const selectedIds = Object.keys(rowSelection)\n\n const nextSelectedRows = selectedIds.includes(rowId) ? selectedIds : [rowId]\n\n if (!selectedIds.includes(rowId)) {\n // convert array to RowSelectionState object\n const nextSelection: RowSelectionState = { [rowId]: true }\n onRowSelectionChange?.(nextSelection)\n }\n\n const menuItems = rowContextMenuBuilders.flatMap((builder) =>\n toMenuItems(\n builder(e as any, {\n rowId,\n rowIndex,\n row,\n selectedRows: nextSelectedRows,\n isSelected: nextSelectedRows.includes(rowId),\n }),\n ),\n )\n\n if (menuItems.length > 0) {\n showRowContextMenu(e as any, menuItems)\n }\n },\n [rowContextMenuBuilders, rows, rowSelection, onRowSelectionChange, showRowContextMenu],\n )\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 onScroll={handleScroll}\n onClick={handleContainerClick}\n {...props}\n className={clsx(props.className, { isLoading, fitContent })}\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 onContextMenu={(e) => handleRowContextMenu(row.id, virtualRow.index, e)}\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":["toMenuItems","items","fuzzyFilter","row","columnId","searchValue","addMeta","cellValue","searchString","itemRank","rankItem","rankings","fuzzySort","rowA","rowB","dir","compareItems","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","onRename","renamingId","onSubmitRename","onCancelRename","onRowDoubleClick","rowContextMenuBuilders","children","pt","fitContent","props","rowSelection","expanded","setExpanded","onExpandedChange","onRowSelectionChange","rowPinning","onRowPinningChange","useSimpleTableContext","lastSelectedIdRef","useRef","tableRef","showRowContextMenu","useCreateContextMenu","onRowDoubleClickRef","renamingIdRef","onSubmitRenameRef","onCancelRenameRef","onRenameRef","tableData","useMemo","_","handleSelectionLogic","useCallback","tableInstance","rowId","isShift","isCtrlOrMeta","currentId","allProcessableRows","currentRow","r","lastId","rowsToToggle","newSelection","selection","handleRowSelectForKeydown","event","selectedRow","isShiftKey","isCtrlKey","handleArrowNavigation","direction","visibleRows","currentIndex","nextIndex","nextRow","nextCell","handleRenameForKeydown","e","handleRowKeyDown","useRowKeydown","columns","getValue","cellTableInstance","cellMeta","handleCellClick","clsx","v","jsx","SimpleTableCellTemplate","handleRowSelectionChangeCallback","updater","functionalUpdate","handleRowPinningChangeCallback","handleExpandedChange","old","newExpanded","table","useReactTable","getCoreRowModel","getFilteredRowModel","getExpandedRowModel","useEffect","handleRowContextMenu","rowIndex","selectedIds","nextSelectedRows","nextSelection","menuItems","builder","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

@@ -54,7 +54,7 @@
     padding: 1px 0px;
     width: 100%;
   }
-`,t=o.div`
+`,a=o.div`
   width: 100%;
   min-height: 32px;
   user-select: none;
@@ -98,6 +98,9 @@
   &.selected {
     background-color: var(--md-sys-color-primary-container);
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
     &,
     .icon {
@@ -110,6 +113,81 @@
         background-color: var(--md-sys-color-on-primary);
       }
     }
+    /* update action buttons */
+    .actions {
+      .icon:hover {
+        background-color: var(--md-sys-color-on-primary);
+        color: var(--md-sys-color-primary);
+      }
+      .pin.active {
+        opacity: 0.7;
+        font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+      }
+    }
+  }
+  /* badges and actions */
+  .badges,
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--base-gap-small);
+  }
+  .badges {
+    color: var(--md-sys-color-outline);
+    padding-right: 4px;
+  }
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--base-gap-small);
+    .icon {
+      border-radius: var(--border-radius-m);
+      padding: var(--padding-s);
+      cursor: pointer;
+      display: none;
+      &.show-always {
+        display: flex;
+      }
+      &:hover {
+        background-color: var(--md-sys-color-surface-container-highest-hover);
+      }
+      &.active {
+        display: flex;
+        opacity: 0.7;
+        font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+      }
+    }
+  }
+  &:hover {
+    .actions {
+      .icon:not(.show-hidden) {
+        display: flex;
+      }
+    }
+    &.has-actions .badges {
+      display: none;
+    }
+  }
+  &.pinned {
+    .pin {
+      display: flex;
+    }
+    .badges {
+      display: none;
+    }
+  }
+  .spacer {
+    flex: 1;
   }
   &.inactive {
@@ -169,7 +247,7 @@
       background-color: var(--md-sys-color-surface-container-high-hover);
     }
   }
-`,a=o.div`
+`,n=o.div`
   border-radius: var(--border-radius-m);
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
@@ -179,7 +257,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-`,n=o.div`
+`,t=o.div`
   padding: 2px;
   width: 100%;
   justify-content: space-between;
@@ -190,7 +268,7 @@
   gap: var(--base-gap-small);
   border-bottom: 1px solid var(--md-sys-color-outline-variant);
-`,d=o(e.Button)`
+`,s=o(e.Button)`
   background-color: unset !important;
   z-index: 110;
   position: relative;
@@ -210,5 +288,5 @@
   &.active {
     background-color: var(--md-sys-color-surface-container-hover) !important;
   }
-`;exports.Cell=t;exports.Container=a;exports.Expander=i;exports.Header=n;exports.HeaderButton=d;exports.TableContainer=r;
+`;exports.Cell=a;exports.Container=n;exports.Expander=i;exports.Header=t;exports.HeaderButton=s;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\n &.isLoading {\n overflow: hidden;\n }\n &.fitContent {\n height: auto;\n overflow: visible;\n flex: none;\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;AAAA;AAAA;AAAA;AAAA,QA0B7BC,EAAAA,MAAM,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"}
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\n &.isLoading {\n overflow: hidden;\n }\n &.fitContent {\n height: auto;\n overflow: visible;\n flex: none;\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 &:hover {\n background-color: var(--md-sys-color-primary-container-hover);\n }\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 / update action buttons /\n .actions {\n .icon:hover {\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n }\n .pin.active {\n opacity: 0.7;\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n }\n }\n\n / badges and actions /\n .badges,\n .actions {\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n }\n\n .badges {\n color: var(--md-sys-color-outline);\n padding-right: 4px;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n .icon {\n border-radius: var(--border-radius-m);\n padding: var(--padding-s);\n cursor: pointer;\n display: none;\n\n &.show-always {\n display: flex;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-highest-hover);\n }\n &.active {\n display: flex;\n opacity: 0.7;\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n }\n }\n\n &:hover {\n .actions {\n .icon:not(.show-hidden) {\n display: flex;\n }\n }\n &.has-actions .badges {\n display: none;\n }\n }\n\n &.pinned {\n .pin {\n display: flex;\n }\n .badges {\n display: none;\n }\n }\n\n .spacer {\n flex: 1;\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;AAAA;AAAA;AAAA;AAAA,QA0B7BC,EAAAA,MAAM,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0LdG,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 r, Button as e } from "@ynput/ayon-react-components";
+import { theme as e, Button as r } from "@ynput/ayon-react-components";
 import o from "styled-components";
-const a = o.div`
+const t = o.div`
   display: flex;
   height: 100%;
@@ -26,7 +26,7 @@ const a = o.div`
       font-size: 32px;
     }
     h3 {
-      ${r.titleMedium}
+      ${e.titleMedium}
     }
   }
@@ -100,6 +100,9 @@ const a = o.div`
   &.selected {
     background-color: var(--md-sys-color-primary-container);
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
     &,
     .icon {
@@ -112,6 +115,81 @@ const a = o.div`
         background-color: var(--md-sys-color-on-primary);
       }
     }
+    /* update action buttons */
+    .actions {
+      .icon:hover {
+        background-color: var(--md-sys-color-on-primary);
+        color: var(--md-sys-color-primary);
+      }
+      .pin.active {
+        opacity: 0.7;
+        font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+      }
+    }
+  }
+  /* badges and actions */
+  .badges,
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--base-gap-small);
+  }
+  .badges {
+    color: var(--md-sys-color-outline);
+    padding-right: 4px;
+  }
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--base-gap-small);
+    .icon {
+      border-radius: var(--border-radius-m);
+      padding: var(--padding-s);
+      cursor: pointer;
+      display: none;
+      &.show-always {
+        display: flex;
+      }
+      &:hover {
+        background-color: var(--md-sys-color-surface-container-highest-hover);
+      }
+      &.active {
+        display: flex;
+        opacity: 0.7;
+        font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+      }
+    }
+  }
+  &:hover {
+    .actions {
+      .icon:not(.show-hidden) {
+        display: flex;
+      }
+    }
+    &.has-actions .badges {
+      display: none;
+    }
+  }
+  &.pinned {
+    .pin {
+      display: flex;
+    }
+    .badges {
+      display: none;
+    }
+  }
+  .spacer {
+    flex: 1;
   }
   &.inactive {
@@ -162,7 +240,7 @@ const a = o.div`
       border-radius: 4px;
     }
   }
-`, d = o(e)`
+`, s = o(r)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -171,7 +249,7 @@ const a = o.div`
       background-color: var(--md-sys-color-surface-container-high-hover);
     }
   }
-`, l = o.div`
+`, d = o.div`
   border-radius: var(--border-radius-m);
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
@@ -181,7 +259,7 @@ const a = o.div`
   display: flex;
   flex-direction: column;
   position: relative;
-`, s = o.div`
+`, l = o.div`
   padding: 2px;
   width: 100%;
   justify-content: space-between;
@@ -192,7 +270,7 @@ const a = o.div`
   gap: var(--base-gap-small);
   border-bottom: 1px solid var(--md-sys-color-outline-variant);
-`, c = o(e)`
+`, c = o(r)`
   background-color: unset !important;
   z-index: 110;
   position: relative;
@@ -215,10 +293,10 @@ const a = o.div`
 `;
 export {
   n as Cell,
-  l as Container,
-  d as Expander,
-  s as Header,
+  d as Container,
+  s as Expander,
+  l as Header,
   c as HeaderButton,
-  a 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\n &.isLoading {\n overflow: hidden;\n }\n &.fitContent {\n height: auto;\n overflow: visible;\n flex: none;\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;AAAA;AAAA;AAAA;AAAA,QA0B7BC,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;"}
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\n &.isLoading {\n overflow: hidden;\n }\n &.fitContent {\n height: auto;\n overflow: visible;\n flex: none;\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 &:hover {\n background-color: var(--md-sys-color-primary-container-hover);\n }\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 / update action buttons /\n .actions {\n .icon:hover {\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n }\n .pin.active {\n opacity: 0.7;\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n }\n }\n\n / badges and actions /\n .badges,\n .actions {\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n }\n\n .badges {\n color: var(--md-sys-color-outline);\n padding-right: 4px;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n .icon {\n border-radius: var(--border-radius-m);\n padding: var(--padding-s);\n cursor: pointer;\n display: none;\n\n &.show-always {\n display: flex;\n }\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-highest-hover);\n }\n &.active {\n display: flex;\n opacity: 0.7;\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n }\n }\n }\n\n &:hover {\n .actions {\n .icon:not(.show-hidden) {\n display: flex;\n }\n }\n &.has-actions .badges {\n display: none;\n }\n }\n\n &.pinned {\n .pin {\n display: flex;\n }\n .badges {\n display: none;\n }\n }\n\n .spacer {\n flex: 1;\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;AAAA;AAAA;AAAA;AAAA,QA0B7BC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0LdG,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"),T=require("react"),m=require("./SimpleTable.styled.cjs.js"),f=require("@ynput/ayon-react-components"),x=require("clsx"),p=({isRowExpandable:r,isRowExpanded:t,enableNonFolderIndent:i=!0,isTableExpandable:a,onExpandClick:n})=>r?e.jsxRuntimeExports.jsx(m.Expander,{onClick:l=>{l.stopPropagation(),n?.()},icon:t?"expand_more":"chevron_right",className:"expander",style:{cursor:"pointer"}}):a&&i&&e.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}),w=T.forwardRef(({value:r,icon:t,parents:i,iconColor:a,iconFilled:n,img:l,imgShape:u="square",imgRatio:d=1,isRowExpandable:j,isRowExpanded:R,isTableExpandable:y,enableNonFolderIndent:E=!0,onExpandClick:g,startContent:o,endContent:c,depth:h=0,isDisabled:N,disabledMessage:v,active:C,style:b,pt:s,...q},S)=>e.jsxRuntimeExports.jsxs(m.Cell,{...q,ref:S,style:{...b,paddingLeft:`calc(${h*.5}rem + 4px)`},title:N?v:void 0,children:[e.jsxRuntimeExports.jsx(p,{isRowExpandable:j,isRowExpanded:R,isTableExpandable:y,onExpandClick:g,enableNonFolderIndent:E,...s?.expander}),o&&o,l&&e.jsxRuntimeExports.jsx("img",{src:l,...s?.img,alt:"",className:x("image",u,s?.img?.className),style:{aspectRatio:d.toString(),...s?.img?.style}}),t&&e.jsxRuntimeExports.jsx(f.Icon,{icon:t,className:x({filled:n},s?.icon?.className),style:{color:a,...s?.icon?.style},...s?.icon}),e.jsxRuntimeExports.jsxs("div",{className:"text",...s?.text,children:[i&&e.jsxRuntimeExports.jsxs("span",{className:"path",children:[i.join(" / ")," / "]}),e.jsxRuntimeExports.jsx("span",{className:"value",children:r})]}),c&&c]}));exports.RowExpander=p;exports.SimpleTableCellTemplate=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),E=require("react"),w=require("./SimpleTable.styled.cjs.js"),x=require("@ynput/ayon-react-components"),c=require("clsx"),T=({isRowExpandable:r,isRowExpanded:o,enableNonFolderIndent:n=!0,isTableExpandable:m,onExpandClick:u})=>r?e.jsxRuntimeExports.jsx(w.Expander,{onClick:a=>{a.stopPropagation(),u?.()},icon:o?"expand_more":"chevron_right",className:"expander",style:{cursor:"pointer"}}):m&&n&&e.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}),A=E.forwardRef(({value:r,icon:o,parents:n,iconColor:m,iconFilled:u,img:a,imgShape:q="square",imgRatio:b=1,isRowExpandable:k,isRowExpanded:C,isTableExpandable:F,enableNonFolderIndent:P=!0,onExpandClick:_,startContent:R,endContent:h,badge:l,actions:p,isRenaming:i,renameInitialValue:j,onSubmitRename:B,onCancelRename:y,renamePlaceholder:I,depth:K=0,isDisabled:N,disabledMessage:L,active:M,inactive:O,style:W,pt:s,...f},$)=>{const[g,S]=E.useState(j??r);return E.useEffect(()=>{i&&S(j??r)},[r,i,j]),e.jsxRuntimeExports.jsxs(w.Cell,{...f,ref:$,className:c(f.className,{disabled:N,inactive:O||M===!1,"has-actions":!!p?.length}),style:{...W,paddingLeft:`calc(${K*1.5}rem + 4px)`},title:N?L:void 0,children:[e.jsxRuntimeExports.jsx(T,{isRowExpandable:k,isRowExpanded:C,isTableExpandable:F,onExpandClick:_,enableNonFolderIndent:P,...s?.expander}),R&&R,a&&e.jsxRuntimeExports.jsx("img",{src:a,...s?.img,alt:"",className:c("image",q,s?.img?.className),style:{aspectRatio:b.toString(),...s?.img?.style}}),o&&e.jsxRuntimeExports.jsx(x.Icon,{icon:o,className:c({filled:u},s?.icon?.className),style:{color:m,...s?.icon?.style},...s?.icon}),i?e.jsxRuntimeExports.jsx(x.InputText,{autoFocus:!0,style:{flex:1},onChange:t=>S(t.target.value),value:g,placeholder:I,onKeyDown:t=>{t.key==="Enter"&&B?.(g),t.key==="Escape"&&y?.()},onBlur:()=>{y?.()},onFocus:t=>{t.target.select()},...s?.input}):e.jsxRuntimeExports.jsxs("div",{className:"text",...s?.text,children:[n&&e.jsxRuntimeExports.jsxs("span",{className:"path",children:[n.join(" / ")," / "]}),e.jsxRuntimeExports.jsx("span",{className:"value",children:r})]}),!i&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(x.Spacer,{className:"spacer"}),l?.toString()&&e.jsxRuntimeExports.jsx("div",{className:"badges",children:typeof l=="string"?e.jsxRuntimeExports.jsx("span",{children:l}):l}),p&&e.jsxRuntimeExports.jsx("div",{className:"actions",children:p.map((t,z)=>{const{show:v="hover",...d}=t;return v==="hidden"?null:e.jsxRuntimeExports.jsx(x.Icon,{...d,className:c(d.className,{"show-always":v==="always"})},d.icon+z.toString())})})]}),h&&h]})});exports.RowExpander=T;exports.SimpleTableCellTemplate=A;
 //# 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 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","Icon"],"mappings":"mQAaaA,EAAc,CAAC,CAC1B,gBAAAC,EACA,cAAAC,EACA,sBAAAC,EAAwB,GACxB,kBAAAC,EACA,cAAAC,CACF,IACEJ,EACEK,EAAAA,kBAAAA,IAACC,EAAAA,SAAA,CACC,QAAUC,GAAM,CACdA,EAAE,gBAAA,EACFH,IAAA,CACF,EACA,KAAMH,EAAgB,cAAgB,gBACtC,UAAU,WACV,MAAO,CAAE,OAAQ,SAAA,CAAU,CAC7B,EAEAE,GACAD,GAAyBG,EAAAA,kBAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,eAAgB,SAAU,EAAA,CAAG,CAAG,EAgCvEG,EAA0BC,EAAAA,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,CAAA,EAELC,IAGEC,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACE,GAAGH,EACJ,IAAAC,EACA,MAAO,CACL,GAAGH,EACH,YAAa,QAAQJ,EAAQ,EAAG,YAAA,EAElC,MAAOC,EAAaC,EAAkB,OAEtC,SAAA,CAAAjB,EAAAA,kBAAAA,IAACN,EAAA,CACC,gBAAAC,EACA,cAAAC,EACA,kBAAAE,EACA,cAAAC,EACA,sBAAAF,EACC,GAAGuB,GAAI,QAAA,CAAA,EAETP,GAAgBA,EAChBH,GACCV,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAKU,EACJ,GAAGU,GAAI,IACR,IAAI,GACJ,UAAWK,EAAK,QAASd,EAAUS,GAAI,KAAK,SAAS,EACrD,MAAO,CACL,YAAaR,EAAS,SAAA,EACtB,GAAGQ,GAAI,KAAK,KAAA,CACd,CAAA,EAGHd,GACCN,EAAAA,kBAAAA,IAAC0B,EAAAA,KAAA,CACC,KAAApB,EACA,UAAWmB,EAAK,CAAE,OAAQhB,GAAcW,GAAI,MAAM,SAAS,EAC3D,MAAO,CACL,MAAOZ,EACP,GAAGY,GAAI,MAAM,KAAA,EAEd,GAAGA,GAAI,IAAA,CAAA,2BAGX,MAAA,CAAI,UAAU,OAAQ,GAAGA,GAAI,KAC3B,SAAA,CAAAb,GAAWgB,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,OAAQ,SAAA,CAAAhB,EAAQ,KAAK,KAAK,EAAE,KAAA,EAAG,EAC3DP,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,QAAS,SAAAK,CAAA,CAAM,CAAA,EACjC,EACCS,GAAcA,CAAA,CAAA,CAAA,CAIvB"}
1	+ {"version":3,"file":"SimpleTableRowTemplate.cjs.js","sources":["../../../../../src/containers/SimpleTable/SimpleTableRowTemplate.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport * as Styled from './SimpleTable.styled'\nimport { Icon, IconProps, InputText, Spacer } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\n\nexport interface TableRowAction extends IconProps {\n show?: 'always' \| 'hover' \| 'hidden'\n}\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 badge?: string \| React.ReactNode\n actions?: TableRowAction[]\n isRenaming?: boolean\n renameInitialValue?: string\n onSubmitRename?: (value: string) => void\n onCancelRename?: () => void\n renamePlaceholder?: string\n depth?: number\n isDisabled?: boolean\n disabledMessage?: string\n active?: boolean\n inactive?: 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 input?: Partial<React.ComponentProps<typeof InputText>>\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 badge,\n actions,\n isRenaming,\n renameInitialValue,\n onSubmitRename,\n onCancelRename,\n renamePlaceholder,\n depth = 0,\n isDisabled,\n disabledMessage,\n active,\n inactive,\n style,\n pt,\n ...props\n },\n ref,\n ) => {\n const [renameValue, setRenameValue] = useState(renameInitialValue ?? value)\n\n useEffect(() => {\n if (isRenaming) {\n setRenameValue(renameInitialValue ?? value)\n }\n }, [value, isRenaming, renameInitialValue])\n\n return (\n <Styled.Cell\n {...props}\n ref={ref}\n className={clsx(props.className, {\n disabled: isDisabled,\n inactive: inactive \|\| active === false,\n 'has-actions': !!actions?.length,\n })}\n style={{\n ...style,\n paddingLeft: `calc(${depth * 1.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 {isRenaming ? (\n <InputText\n autoFocus\n style={{ flex: 1 }}\n onChange={(e) => setRenameValue(e.target.value)}\n value={renameValue}\n placeholder={renamePlaceholder}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n onSubmitRename?.(renameValue)\n }\n if (e.key === 'Escape') {\n onCancelRename?.()\n }\n }}\n onBlur={() => {\n onCancelRename?.()\n }}\n onFocus={(e) => {\n e.target.select()\n }}\n {...pt?.input}\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 )}\n\n {!isRenaming && (\n <>\n <Spacer className=\"spacer\" />\n {badge?.toString() && (\n <div className=\"badges\">\n {typeof badge === 'string' ? <span>{badge}</span> : badge}\n </div>\n )}\n {actions && (\n <div className=\"actions\">\n {actions.map((action, i) => {\n const { show = 'hover', ...iconProps } = action\n\n if (show === 'hidden') return null\n\n return (\n <Icon\n key={iconProps.icon + i.toString()}\n {...iconProps}\n className={clsx(iconProps.className, { 'show-always': show === 'always' })}\n />\n )\n })}\n </div>\n )}\n </>\n )}\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","badge","actions","isRenaming","renameInitialValue","onSubmitRename","onCancelRename","renamePlaceholder","depth","isDisabled","disabledMessage","active","inactive","style","pt","props","ref","renameValue","setRenameValue","useState","useEffect","jsxs","Styled.Cell","clsx","Icon","InputText","Fragment","Spacer","action","i","show","iconProps"],"mappings":"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"}