@ynput/ayon-frontend-shared 0.2.34 → 0.2.36

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

@@ -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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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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