@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

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  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/EmptyPlaceholder/EmptyPlaceholder'\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\nconst toggleRowAndDescendants = <TData,>(row: Row<TData>, expanded: boolean) => {\n  row.toggleExpanded(expanded)\n  row.subRows.forEach((subRow) => toggleRowAndDescendants(subRow, expanded))\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  renameInitialValue,\n  onSubmitRename,\n  onCancelRename,\n  onRowDoubleClick,\n  onRowOptionClick,\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 renameInitialValueRef = useRef(renameInitialValue)\n  renameInitialValueRef.current = renameInitialValue\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    ): RowSelectionState => {\n      const currentId = rowId\n      const allProcessableRows = tableInstance.getFilteredRowModel().flatRows\n      const currentRow = allProcessableRows.find((r) => r.id === currentId)\n\n      if (!currentRow) return { ...(tableInstance.getState().rowSelection || {}) }\n\n      // Prevent selection of disabled rows\n      if (currentRow.original.isDisabled) {\n        return { ...(tableInstance.getState().rowSelection || {}) }\n      }\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      let nextSelection: RowSelectionState\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          nextSelection = { [currentId]: true }\n        } else {\n          const rowsToToggle = getRowRange(allProcessableRows, currentId, lastId)\n          nextSelection = {}\n          rowsToToggle.forEach((r) => (nextSelection[r.id] = true))\n        }\n      } else if (isMultiSelect && isCtrlOrMeta) {\n        // write a concrete object from live state; toggleSelected()'s functional updater runs\n        // against a stale rowSelection closure and drops the other selected rows\n        nextSelection = { ...(tableInstance.getState().rowSelection || {}) }\n        if (nextSelection[currentId]) {\n          delete nextSelection[currentId]\n        } else {\n          nextSelection[currentId] = true\n        }\n      } else {\n        // If it's already selected and it's the only one, don't update selection to avoid unnecessary re-renders\n        nextSelection = { ...(tableInstance.getState().rowSelection || {}) }\n        if (!(Object.keys(nextSelection).length === 1 && nextSelection[currentId])) {\n          nextSelection = { [currentId]: true }\n        }\n      }\n      tableInstance.setRowSelection(nextSelection)\n      lastSelectedIdRef.current = currentId\n      return nextSelection\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. Scope to this table's container: row ids are\n          // entity ids that can also exist in other SimpleTables on the page (slicer),\n          // so a document-wide getElementById would steal focus to a duplicate.\n          requestAnimationFrame(() => {\n            const container = tableContainerRef.current\n            const nextRowElement = container\n              ? container.querySelector(`#${CSS.escape(nextRow.id)}`)\n              : 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            // Keep an already-selected row selected for a plain option click.\n            // Modifier clicks still go through the normal range/toggle selection path.\n            const preserveSelection =\n              event.altKey &&\n              row.getIsSelected() &&\n              !event.shiftKey &&\n              !event.ctrlKey &&\n              !event.metaKey\n            const nextSelection: RowSelectionState = !preserveSelection\n              ? handleSelectionLogic(\n                  cellTableInstance, // Pass the cell's table instance\n                  row.id,\n                  event.shiftKey,\n                  event.ctrlKey || event.metaKey,\n                )\n              : cellTableInstance.getState().rowSelection || {}\n            if (event.altKey) {\n              onRowOptionClick?.(row.original, Object.keys(nextSelection))\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: (event?: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n              if (event?.altKey) {\n                toggleRowAndDescendants(row, !row.getIsExpanded())\n              } else {\n                row.toggleExpanded()\n              }\n            },\n            startContent: row.original.startContent,\n            endContent: row.original.endContent,\n            badge: row.original.badge,\n            isDisabled: row.original.isDisabled,\n            disabledMessage: row.original.disabledMessage,\n            isRenaming: row.id === renamingIdRef.current,\n            renameInitialValue:\n              row.id === renamingIdRef.current ? renameInitialValueRef.current : undefined,\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      onRowOptionClick,\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            selectedTableRows: nextSelectedRows\n              .map((selectedRowId) => table.getRowModel().rowsById[selectedRowId])\n              .filter((selectedRow): selectedRow is Row<SimpleTableRow> => !!selectedRow),\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","toggleRowAndDescendants","row","expanded","subRow","fuzzyFilter","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","renameInitialValue","onSubmitRename","onCancelRename","onRowDoubleClick","onRowOptionClick","rowContextMenuBuilders","children","pt","fitContent","props","rowSelection","setExpanded","onExpandedChange","onRowSelectionChange","rowPinning","onRowPinningChange","useSimpleTableContext","lastSelectedIdRef","useRef","tableRef","showRowContextMenu","useCreateContextMenu","onRowDoubleClickRef","renamingIdRef","renameInitialValueRef","onSubmitRenameRef","onCancelRenameRef","onRenameRef","tableData","useMemo","_","handleSelectionLogic","useCallback","tableInstance","rowId","isShift","isCtrlOrMeta","currentId","allProcessableRows","currentRow","r","nextSelection","lastId","rowsToToggle","handleRowSelectForKeydown","event","selectedRow","isShiftKey","isCtrlKey","handleArrowNavigation","direction","visibleRows","currentIndex","nextIndex","nextRow","container","tableContainerRef","nextCell","handleRenameForKeydown","handleRowKeyDown","useRowKeydown","columns","getValue","cellTableInstance","cellMeta","handleCellClick","clsx","e","v","jsx","SimpleTableCellTemplate","handleRowSelectionChangeCallback","updater","functionalUpdate","handleRowPinningChangeCallback","handleExpandedChange","old","newExpanded","table","useReactTable","getCoreRowModel","getFilteredRowModel","getExpandedRowModel","useEffect","handleRowContextMenu","rowIndex","selectedIds","nextSelectedRows","menuItems","builder","selectedRowId","rowVirtualizer","useVirtualizer","element","measureElementRef","node","handleScroll","target","scrollTop","scrollHeight","clientHeight","handleContainerClick","jsxs","Styled.TableContainer","virtualRow","cell","flexRender","EmptyPlaceholder"],"mappings":";;;;;;;;;;;;;;;AAoCA,MAAMA,KAAc,CAACC,MACdA,IACE,MAAM,QAAQA,CAAK,IAAIA,EAAM,OAAO,OAAO,IAAI,CAACA,CAAK,IADzC,CAAA,GAIfC,KAA0B,CAASC,GAAiBC,MAAsB;AAC9E,EAAAD,EAAI,eAAeC,CAAQ,GAC3BD,EAAI,QAAQ,QAAQ,CAACE,MAAWH,GAAwBG,GAAQD,CAAQ,CAAC;AAC3E,GAGME,KAA6B,CAACH,GAAKI,GAAUC,GAAaC,MAAY;AAC1E,QAAMC,IAAYP,EAAI,SAASI,CAAQ;AAEvC,MAAII,IACF,OAAOD,KAAc,WACjBA,IACA,MAAM,QAAQA,CAAS,IACvBA,EAAU,KAAK,GAAG,IAClB,KAAK,UAAUA,CAAS;AAG9B,EAAIH,MAAa,YACfI,IAAe,CAACR,EAAI,SAAS,OAAOA,EAAI,SAAS,MAAM,GAAIA,EAAI,SAAS,WAAW,CAAA,CAAG,EAAE;AAAA,IACtF;AAAA,EAAA;AAMJ,QAAMS,IAAWC,GAASF,GAAcH,GAAa,EAAE,WAAWM,GAAS,UAAU;AAGrF,SAAAL,EAAQ;AAAA,IACN,UAAAG;AAAA,EAAA,CACD,GAGMA,EAAS;AAClB,GAGMG,KAA4B,CAACC,GAAMC,GAAMV,MAAa;AAC1D,MAAIW,IAAM;AAGV,SAAIF,EAAK,kBAAkBT,CAAQ,MACjCW,IAAMC;AAAA,IACJH,EAAK,kBAAkBT,CAAQ,GAAG;AAAA,IAClCU,EAAK,kBAAkBV,CAAQ,GAAG;AAAA,EAAA,IAK/BW,MAAQ,IAAIE,GAAW,aAAaJ,GAAMC,GAAMV,CAAQ,IAAIW;AACrE;AAIA,SAASG,GACPC,GACAC,GACAC,GACmB;AACnB,QAAMC,IAA2B,CAAA;AAEjC,MAAIF,MAAQC,GAAK;AACf,UAAME,IAAYJ,EAAK,KAAK,CAACnB,MAAQA,EAAI,OAAOoB,CAAG;AACnD,WAAOG,IAAY,CAACA,CAAS,IAAI,CAAA;AAAA,EACnC;AAEA,MAAIC,IAAS,IACTC,IAAS;AAEb,WAASC,IAAI,GAAGA,IAAIP,EAAK,WACnBA,EAAKO,CAAC,EAAE,OAAON,MAAKI,IAASE,IAC7BP,EAAKO,CAAC,EAAE,OAAOL,MAAKI,IAASC,IAC7B,EAAAF,MAAW,MAAMC,MAAW,MAHDC;AAG/B;AAGF,MAAIF,MAAW,MAAMC,MAAW,WAAW,CAAA;AAE3C,QAAME,IAAQ,KAAK,IAAIH,GAAQC,CAAM,GAC/BG,IAAM,KAAK,IAAIJ,GAAQC,CAAM;AAEnC,WAASC,IAAIC,GAAOD,KAAKE,GAAKF;AAC5B,IAAAJ,EAAM,KAAKH,EAAKO,CAAC,CAAC;AAEpB,SAAOJ;AACT;AAEA,MAAMO,KAAoC,CAAC;AAAA,EACzC,MAAAC,IAAO,CAAA;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,uBAAAC,IAAwB;AAAA,EACxB,uBAAAC,IAAwB;AAAA,EACxB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,wBAAAC,IAAyB,CAAA;AAAA,EACzB,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,cAAAC;AAAA,IACA,UAAAtD;AAAA,IACA,aAAAuD;AAAA,IACA,kBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,IACEC,GAAA,GACEC,IAAoBC,EAAsB,IAAI,GAC9CC,IAAWD,EAAqC,IAAI,GACpD,CAACE,CAAkB,IAAIC,GAAA,GAOvBC,KAAsBJ,EAAOf,CAAgB;AACnD,EAAAmB,GAAoB,UAAUnB;AAC9B,QAAMoB,IAAgBL,EAAOnB,CAAU;AACvC,EAAAwB,EAAc,UAAUxB;AACxB,QAAMyB,KAAwBN,EAAOlB,CAAkB;AACvD,EAAAwB,GAAsB,UAAUxB;AAChC,QAAMyB,IAAoBP,EAAOjB,CAAc;AAC/C,EAAAwB,EAAkB,UAAUxB;AAC5B,QAAMyB,KAAoBR,EAAOhB,CAAc;AAC/C,EAAAwB,GAAkB,UAAUxB;AAC5B,QAAMyB,KAAcT,EAAOpB,CAAQ;AACnC,EAAA6B,GAAY,UAAU7B;AAGtB,QAAM8B,KAAYC,EAAQ,MACnB3C,IAGE,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC4C,GAAGjD,OAAO;AAAA,IAC3C,IAAI,eAAeA,CAAC;AAAA,IACpB,MAAM,eAAeA,CAAC;AAAA,IACtB,OAAO,eAAeA,CAAC;AAAA,IACvB,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS,CAAA;AAAA,IACT,MAAM;AAAA,MACJ,IAAI,eAAeA,CAAC;AAAA,IAAA;AAAA,EACtB,EACA,IAbqBI,GActB,CAACC,GAAWD,GAAMO,CAAgB,CAAC,GAGhCuC,IAAuBC;AAAA,IAC3B,CACEC,GACAC,GACAC,GACAC,MACsB;AACtB,YAAMC,IAAYH,GACZI,IAAqBL,EAAc,oBAAA,EAAsB,UACzDM,IAAaD,EAAmB,KAAK,CAACE,MAAMA,EAAE,OAAOH,CAAS;AAEpE,UAAI,CAACE,EAAY,QAAO,EAAE,GAAIN,EAAc,SAAA,EAAW,gBAAgB,GAAC;AAGxE,UAAIM,EAAW,SAAS;AACtB,eAAO,EAAE,GAAIN,EAAc,WAAW,gBAAgB,CAAA,EAAC;AAIzD,UACE3C,KACA,CAAC6C,KACD,CAACC,KACD,OAAO,KAAKH,EAAc,WAAW,gBAAgB,CAAA,CAAE,EAAE,WAAW,MACnEA,EAAc,SAAA,EAAW,gBAAgB,IAAII,CAAS;AAEvD,eAAAJ,EAAc,gBAAgB,EAAE,GAChChB,EAAkB,UAAU,MACrB,CAAA;AAGT,UAAIwB;AACJ,UAAIpD,KAAiB8C,KAAWlB,EAAkB,SAAS;AACzD,cAAMyB,IAASzB,EAAkB;AAGjC,YAAI,CAFcqB,EAAmB,KAAK,CAACE,MAAMA,EAAE,OAAOE,CAAM;AAG9D,UAAAD,IAAgB,EAAE,CAACJ,CAAS,GAAG,GAAA;AAAA,aAC1B;AACL,gBAAMM,IAAetE,GAAYiE,GAAoBD,GAAWK,CAAM;AACtE,UAAAD,IAAgB,CAAA,GAChBE,EAAa,QAAQ,CAACH,OAAOC,EAAcD,GAAE,EAAE,IAAI,EAAK;AAAA,QAC1D;AAAA,MACF,MAAA,CAAWnD,KAAiB+C,KAG1BK,IAAgB,EAAE,GAAIR,EAAc,WAAW,gBAAgB,CAAA,EAAC,GAC5DQ,EAAcJ,CAAS,IACzB,OAAOI,EAAcJ,CAAS,IAE9BI,EAAcJ,CAAS,IAAI,OAI7BI,IAAgB,EAAE,GAAIR,EAAc,WAAW,gBAAgB,CAAA,EAAC,GAC1D,OAAO,KAAKQ,CAAa,EAAE,WAAW,KAAKA,EAAcJ,CAAS,MACtEI,IAAgB,EAAE,CAACJ,CAAS,GAAG,GAAA;AAGnC,aAAAJ,EAAc,gBAAgBQ,CAAa,GAC3CxB,EAAkB,UAAUoB,GACrBI;AAAA,IACT;AAAA,IACA,CAACpD,GAAeC,CAAqB;AAAA,EAAA,GAKjCsD,KAA4BZ;AAAA,IAChC,CACEa,GACAC,MACG;AACH,UAAI,CAAC3B,EAAS,SAAS;AACrB,gBAAQ,KAAK,yDAAyD;AACtE;AAAA,MACF;AAGA,YAAM4B,IAAaF,EAAM,UACnBG,IAAYH,EAAM,WAAWA,EAAM;AAEzC,MAAAd;AAAA,QACEZ,EAAS;AAAA;AAAA,QACT2B,EAAY;AAAA,QACZC;AAAA,QACAC;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,CAACjB,CAAoB;AAAA;AAAA,EAAA,GAIjBkB,KAAwBjB;AAAA,IAC5B,CAACkB,GAA0BX,GAAiCM,MAA4B;AACtF,UAAI,CAAC1B,EAAS,QAAS;AAGvB,YAAMgC,IAAchC,EAAS,QAAQ,YAAA,EAAc,MAC7CiC,IAAeD,EAAY,UAAU,CAACX,MAAMA,EAAE,OAAOD,EAAW,EAAE;AAExE,UAAIa,MAAiB,GAAI;AAEzB,UAAIC,IAAYH,MAAc,SAASE,IAAe,IAAIA,IAAe;AAGzE,UAAI,EAAAC,IAAY,KAAKA,KAAaF,EAAY;AAG9C,eAAOE,KAAa,KAAKA,IAAYF,EAAY,UAAQ;AACvD,gBAAMG,IAAUH,EAAYE,CAAS;AACrC,cAAI,CAACC,EAAQ,SAAS,YAAY;AAGhC,YAAAvB;AAAA,cACEZ,EAAS;AAAA,cACTmC,EAAQ;AAAA,cACRT,EAAM;AAAA,cACNA,EAAM,WAAWA,EAAM;AAAA,YAAA,GAMzB,sBAAsB,MAAM;AAC1B,oBAAMU,IAAYC,EAAkB,SAI9BC,KAHiBF,IACnBA,EAAU,cAAc,IAAI,IAAI,OAAOD,EAAQ,EAAE,CAAC,EAAE,IACpD,SAAS,eAAeA,EAAQ,EAAE,IACL,cAAc,gBAAgB;AAC/D,cAAIG,MACFA,EAAS,MAAA,GACTA,EAAS,eAAe,EAAE,OAAO,WAAW,UAAU,UAAU;AAAA,YAEpE,CAAC;AACD;AAAA,UACF;AAEA,UAAAJ,IAAYH,MAAc,SAASG,IAAY,IAAIA,IAAY;AAAA,QACjE;AAAA,IACF;AAAA,IACA,CAACtB,CAAoB;AAAA,EAAA,GAKjB2B,KAAyB1B;AAAA,IAC7B,CAAC,GAAqB7E,MAA6B;AACjD,MAAKA,EAAI,SAAS,iBAAwB,UAAUA,EAAI,IAAIA,CAAG;AAAA,IACjE;AAAA,IACA,CAAA;AAAA;AAAA,EAAC,GAGG,EAAE,kBAAAwG,GAAA,IAAqBC,GAA8B;AAAA,IACzD,iBAAiBhB;AAAA,IACjB,uBAAAK;AAAA,IACA,cAAcS;AAAA,EAAA,CACf,GAEKG,KAAUhC;AAAA,IACd,MAAM;AAAA,MACJ;AAAA,QACE,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,WAAW9D;AAAA;AAAA,QACX,MAAM,CAAC,EAAE,KAAAZ,GAAK,UAAA2G,GAAU,OAAOC,QAAwB;AACrD,gBAAMC,IAAWD,EAAkB,QAAQ,MAErCE,IAAkB,CAACpB,MAAoD;AAE3E,gBACEA,EAAM,kBAAkB,oBACxBA,EAAM,kBAAkB,qBACxBA,EAAM,kBAAkB,uBACxBA,EAAM,kBAAkB,qBACxBA,EAAM,kBAAkB,qBACvBA,EAAM,OAAuB,QAAQ,oCAAoC;AAE1E;AAUF,kBAAMJ,IALJI,EAAM,UACN1F,EAAI,cAAA,KACJ,CAAC0F,EAAM,YACP,CAACA,EAAM,WACP,CAACA,EAAM,UAQLkB,EAAkB,WAAW,gBAAgB,CAAA,IAN7ChC;AAAA,cACEgC;AAAA;AAAA,cACA5G,EAAI;AAAA,cACJ0F,EAAM;AAAA,cACNA,EAAM,WAAWA,EAAM;AAAA,YAAA;AAG7B,YAAIA,EAAM,UACRzC,IAAmBjD,EAAI,UAAU,OAAO,KAAKsF,CAAa,CAAC;AAAA,UAE/D,GAEMhC,IAGF;AAAA,YACF,WAAWyD,GAAK;AAAA,cACd,UAAU/G,EAAI,cAAA;AAAA,cACd,SAAS6G,GAAU;AAAA,cACnB,UAAU7G,EAAI,SAAS;AAAA;AAAA,cACvB,UAAUA,EAAI,SAAS;AAAA;AAAA,YAAA,CACxB;AAAA,YACD,WAAW,CAACgH,MAAM;AAChB,cAAIA,EAAE,kBAAkB,oBAExBR,GAAiBQ,GAAGhH,CAAG;AAAA,YACzB;AAAA,YACA,OAAOA,EAAI;AAAA,YACX,UAAU;AAAA,YACV,OAAO2G,EAAA;AAAA,YACP,SAAS3G,EAAI,SAAS;AAAA,YACtB,MAAMA,EAAI,SAAS,QAAQ;AAAA,YAC3B,WAAWA,EAAI,SAAS;AAAA,YACxB,YAAYA,EAAI,SAAS;AAAA,YACzB,KAAKA,EAAI,SAAS;AAAA,YAClB,UAAUA,EAAI,SAAS;AAAA,YACvB,UAAAyC;AAAA,YACA,iBAAiBzC,EAAI,aAAA;AAAA,YACrB,uBAAAoC;AAAA,YACA,eAAepC,EAAI,cAAA;AAAA,YACnB,mBAAmB6G,GAAU;AAAA,YAC7B,eAAe,CAACnB,MAAqD;AACnE,cAAIA,GAAO,SACT3F,GAAwBC,GAAK,CAACA,EAAI,cAAA,CAAe,IAEjDA,EAAI,eAAA;AAAA,YAER;AAAA,YACA,cAAcA,EAAI,SAAS;AAAA,YAC3B,YAAYA,EAAI,SAAS;AAAA,YACzB,OAAOA,EAAI,SAAS;AAAA,YACpB,YAAYA,EAAI,SAAS;AAAA,YACzB,iBAAiBA,EAAI,SAAS;AAAA,YAC9B,YAAYA,EAAI,OAAOoE,EAAc;AAAA,YACrC,oBACEpE,EAAI,OAAOoE,EAAc,UAAUC,GAAsB,UAAU;AAAA,YACrE,gBAAgBC,EAAkB,UAC9B,CAAC2C,MAAM3C,EAAkB,QAAStE,EAAI,IAAIiH,CAAC,IAC3C;AAAA,YACJ,gBAAgB1C,GAAkB;AAAA,YAClC,GAAGnB,GAAI;AAAA,YACP,SAAS0D;AAAA;AAAA,YACT,eAAe,CAACE,MAAM7C,GAAoB,UAAUnE,EAAI,IAAIA,CAAG;AAAA,UAAA;AAIjE,iBAAO6G,GAAU,WACfA,EAAS,SAASvD,GAAOtD,GAAK4G,CAAiB,IAE/CM,gBAAAA,EAAAA,IAACC,IAAA,EAAyB,GAAG7D,GAAQ,GAAGF,GAAI,MAAM;AAAA,QAEtD;AAAA,MAAA;AAAA,IACF;AAAA,IAEF;AAAA,MACEf;AAAA,MACAuC;AAAA,MACA4B;AAAA,MACArE;AAAA,MACAC;AAAA,MACAK;AAAA,MACAQ;AAAA,IAAA;AAAA,EACF,GAGImE,KAAkEvC;AAAA,IACtE,CAACwC,MAAY;AACX,MAAA3D,EAAqB4D,GAAiBD,GAAS9D,CAAY,CAAC;AAAA,IAC9D;AAAA,IACA,CAACG,CAAoB;AAAA,EAAA,GAGjB6D,KAA8D1C;AAAA,IAClE,CAACwC,MAAY;AACX,MAAAzD,IAAqB0D,GAAiBD,GAAS1D,KAAc,CAAA,CAAE,CAAC;AAAA,IAClE;AAAA,IACA,CAACC,CAAkB;AAAA,EAAA,GAGf4D,KAAuB3C;AAAA,IAC3B,CAACwC,MAAiB;AAChB,MAAA7D,IAAc,CAACiE,MAAQ;AACrB,cAAMC,IAAcL,aAAmB,WAAWA,EAAQI,CAAG,IAAIJ;AACjE,eAAA5D,KAAmBiE,CAAW,GACvBA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAClE,CAAW;AAAA,EAAA,GAGRmE,IAAQC,GAAc;AAAA,IAC1B,MAAMnD;AAAA,IACN,SAAAiC;AAAA,IACA,OAAO;AAAA,MACL,UAAAzG;AAAA,MACA,cAAAsD;AAAA,MACA,cAAAjB;AAAA,MACA,YAAAqB;AAAA,IAAA;AAAA,IAEF,sBAAsByD;AAAA,IACtB,oBAAoBG;AAAA,IACpB,WAAW;AAAA,MACT,OAAOpH;AAAA,IAAA;AAAA,IAET,gBAAgB;AAAA,IAChB,oBAAoB;AAAA;AAAA,IACpB,kBAAkB,CAAC,CAACyD;AAAA,IACpB,UAAU,CAAC5D,MAAQA,EAAI;AAAA,IACvB,uBAAuB;AAAA;AAAA,IACvB,kBAAkBwH;AAAA,IAClB,YAAY,CAACxH,MAAQA,EAAI;AAAA,IACzB,iBAAiB6H,GAAA;AAAA,IACjB,qBAAqBC,GAAA;AAAA,IACrB,qBAAqBC,GAAA;AAAA,IACrB,oBAAoB;AAAA;AAAA;AAAA,IAGpB,MAAMrD;AAAA,MACJ,OAAO;AAAA,QACL,cAAc,CAAC,CAACzC;AAAA,QAChB,WAAAF;AAAA,QACA,UAAAoB;AAAA,QACA,GAAGZ;AAAA,MAAA;AAAA,MAEL,CAACN,GAAcF,GAAWoB,GAAUZ,CAAI;AAAA,IAAA;AAAA,EAC1C,CACD;AAID,EAAAyF,GAAU,MAAM;AACd,IAAAhE,EAAS,UAAU2D;AAAA,EACrB,GAAG,CAACA,CAAK,CAAC;AAEV,QAAM,EAAE,MAAAxG,EAAA,IAASwG,EAAM,YAAA,GAEjBM,KAAuBpD;AAAA,IAC3B,CAACE,GAAemD,GAAkBlB,MAA4C;AAC5E,UAAI,CAAChD,EAAS,QAAS;AACvB,YAAMhE,IAAMmB,EAAK+G,CAAQ;AACzB,UAAI,CAAClI,KAAOA,EAAI,aAAa,OAAW;AAExC,MAAAgH,EAAE,eAAA,GACFA,EAAE,gBAAA;AAEF,YAAMmB,IAAc,OAAO,KAAK5E,CAAY,GAEtC6E,IAAmBD,EAAY,SAASpD,CAAK,IAAIoD,IAAc,CAACpD,CAAK;AAE3E,UAAI,CAACoD,EAAY,SAASpD,CAAK,GAAG;AAEhC,cAAMO,IAAmC,EAAE,CAACP,CAAK,GAAG,GAAA;AACpD,QAAArB,IAAuB4B,CAAa;AAAA,MACtC;AAEA,YAAM+C,IAAYnF,EAAuB;AAAA,QAAQ,CAACoF,MAChDzI;AAAA,UACEyI,EAAQtB,GAAU;AAAA,YAChB,OAAAjC;AAAA,YACA,UAAAmD;AAAA,YACA,KAAAlI;AAAA,YACA,cAAcoI;AAAA,YACd,mBAAmBA,EAChB,IAAI,CAACG,MAAkBZ,EAAM,YAAA,EAAc,SAASY,CAAa,CAAC,EAClE,OAAO,CAAC5C,MAAoD,CAAC,CAACA,CAAW;AAAA,YAC5E,YAAYyC,EAAiB,SAASrD,CAAK;AAAA,UAAA,CAC5C;AAAA,QAAA;AAAA,MACH;AAGF,MAAIsD,EAAU,SAAS,KACrBpE,EAAmB+C,GAAUqB,CAAS;AAAA,IAE1C;AAAA,IACA,CAACnF,GAAwB/B,GAAMoC,GAAcG,GAAsBO,CAAkB;AAAA,EAAA,GAIjFoC,IAAoBtC,EAAuB,IAAI,GAE/CyE,IAAiBC,GAAe;AAAA,IACpC,OAAOtH,EAAK;AAAA,IACZ,cAAc,MAAMqB,KAAa;AAAA;AAAA,IACjC,kBAAkB,MAAM6D,EAAkB;AAAA;AAAA,IAE1C,gBAAgB7D,IACZ,MAAMA,IACN,OAAO,SAAW,OAAe,UAAU,UAAU,QAAQ,SAAS,MAAM,KAC5E,CAACkG,MAAYA,GAAS,sBAAA,EAAwB,SAC9C;AAAA,IACJ,UAAU;AAAA,EAAA,CACX,GAGKC,KAAoB9D;AAAA,IACxB,CAAC+D,MAA6B;AAC5B,MAAIA,KACFJ,EAAe,eAAeI,CAAI;AAAA,IAEtC;AAAA,IACA,CAACJ,CAAc;AAAA,EAAA,GAIXK,KAAehE;AAAA,IACnB,CAACa,MAAyC;AACxC,UAAI,CAAChD,EAAgB;AAErB,YAAMoG,IAASpD,EAAM,eACf,EAAE,WAAAqD,GAAW,cAAAC,GAAc,cAAAC,EAAA,IAAiBH;AAKlD,MAFqBE,IAAeD,IAAYE,IAAe,OAE3C,CAAClH,KACnBW,EAAA;AAAA,IAEJ;AAAA,IACA,CAACA,GAAgBX,CAAS;AAAA,EAAA,GAGtBmH,KAAuB,CAAC,MAAwC;AAEpE,IAAI/G,KAAyB,CAAE,EAAE,OAAuB,QAAQ,IAAI,MAClEwF,EAAM,gBAAgB,EAAE,GACxB7D,EAAkB,UAAU;AAAA,EAEhC;AAEA,SACEqF,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAK/C;AAAA,MACL,UAAUwC;AAAA,MACV,SAASK;AAAA,MACR,GAAG5F;AAAA,MACJ,WAAWyD,GAAKzD,EAAM,WAAW,EAAE,WAAAvB,GAAW,YAAAsB,IAAY;AAAA,MAEzD,UAAA;AAAA,QAAA,CAACrB,2BACC,SAAA,EACC,UAAAkF,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ,GAAGsB,GAAgB,aAAA,CAAc;AAAA;AAAA,YAAA;AAAA,YAG1C,UAAAA,GAAgB,gBAAA,EAAkB,IAAI,CAACa,MAAe;AACrD,oBAAMrJ,IAAMmB,EAAKkI,EAAW,KAAK;AACjC,qBACEnC,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,cAAYmC,EAAW;AAAA,kBACvB,KAAKV;AAAA,kBAEL,IAAI3I,EAAI;AAAA,kBACR,eAAe,CAACgH,MAAMiB,GAAqBjI,EAAI,IAAIqJ,EAAW,OAAOrC,CAAC;AAAA,kBACrE,GAAG5D,GAAI;AAAA,kBACR,OAAO;AAAA,oBACL,WAAW,cAAciG,EAAW,KAAK;AAAA;AAAA,oBACzC,GAAGjG,GAAI,KAAK;AAAA;AAAA,kBAAA;AAAA,kBAGb,UAAApD,EAAI,gBAAA,EAAkB,IAAI,CAACsJ,MAExBpC,gBAAAA,EAAAA,IAAC,MAAA,EACE,UAAAqC,GAAWD,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAA,CAAY,EAAA,GADlDA,EAAK,EAEd,CAEH;AAAA,gBAAA;AAAA,gBAfItJ,EAAI;AAAA,cAAA;AAAA,YAkBf,CAAC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QAED,CAAC,CAACgC,KAASkF,gBAAAA,EAAAA,IAACsC,MAAiB,OAAAxH,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}
+{"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 { compareItems } from '@tanstack/match-sorter-utils'\nimport { parseSearchQuery, matchSearchQuery } from '@shared/util'\nimport { useSimpleTableContext } from './context/SimpleTableContext'\nimport { SimpleTableCellTemplate, SimpleTableCellTemplateProps } from './SimpleTableRowTemplate'\nimport { EmptyPlaceholder } from '@shared/components/EmptyPlaceholder/EmptyPlaceholder'\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\nconst toggleRowAndDescendants = <TData,>(row: Row<TData>, expanded: boolean) => {\n  row.toggleExpanded(expanded)\n  row.subRows.forEach((subRow) => toggleRowAndDescendants(subRow, expanded))\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: string[][], 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  // searchValue is already parsed into OR/AND groups by resolveFilterValue\n  const itemRank = matchSearchQuery(searchString, searchValue)\n  addMeta({ itemRank })\n\n  return itemRank.passed\n}\n// parse once per filter pass instead of once per row\nfuzzyFilter.resolveFilterValue = parseSearchQuery\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  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  return rows.slice(start, end + 1)\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  imgPosition,\n  onScrollBottom,\n  onRename,\n  renamingId,\n  renameInitialValue,\n  onSubmitRename,\n  onCancelRename,\n  onRowDoubleClick,\n  onRowOptionClick,\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 renameInitialValueRef = useRef(renameInitialValue)\n  renameInitialValueRef.current = renameInitialValue\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    ): RowSelectionState => {\n      const currentId = rowId\n      const rowModel = tableInstance.getRowModel()\n      const visibleRows = rowModel.rows\n      const currentRow = rowModel.rowsById[currentId]\n      const currentSelection = tableInstance.getState().rowSelection || {}\n\n      if (!currentRow) return { ...currentSelection }\n\n      // Prevent selection of disabled rows\n      if (currentRow.original.isDisabled) {\n        return { ...currentSelection }\n      }\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(currentSelection).length === 1 &&\n        currentSelection[currentId]\n      ) {\n        tableInstance.setRowSelection({})\n        lastSelectedIdRef.current = null\n        return {}\n      }\n\n      let nextSelection: RowSelectionState\n      if (isMultiSelect && isShift && lastSelectedIdRef.current) {\n        const lastId = lastSelectedIdRef.current\n        const rowsToToggle = getRowRange(visibleRows, currentId, lastId)\n\n        if (rowsToToggle.length === 0) {\n          nextSelection = { ...currentSelection, [currentId]: true }\n        } else {\n          nextSelection = { ...currentSelection }\n          rowsToToggle.forEach((r) => (nextSelection[r.id] = true))\n        }\n      } else if (isMultiSelect && isCtrlOrMeta) {\n        // write a concrete object from live state; toggleSelected()'s functional updater runs\n        // against a stale rowSelection closure and drops the other selected rows\n        nextSelection = { ...currentSelection }\n        if (nextSelection[currentId]) {\n          delete nextSelection[currentId]\n        } else {\n          nextSelection[currentId] = true\n        }\n      } else {\n        // If it's already selected and it's the only one, don't update selection to avoid unnecessary re-renders\n        nextSelection = { ...currentSelection }\n        if (!(Object.keys(nextSelection).length === 1 && nextSelection[currentId])) {\n          nextSelection = { [currentId]: true }\n        }\n      }\n      tableInstance.setRowSelection(nextSelection)\n      lastSelectedIdRef.current = currentId\n      return nextSelection\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. Scope to this table's container: row ids are\n          // entity ids that can also exist in other SimpleTables on the page (slicer),\n          // so a document-wide getElementById would steal focus to a duplicate.\n          requestAnimationFrame(() => {\n            const container = tableContainerRef.current\n            const nextRowElement = container\n              ? container.querySelector(`#${CSS.escape(nextRow.id)}`)\n              : 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            // Keep an already-selected row selected for a plain option click.\n            // Modifier clicks still go through the normal range/toggle selection path.\n            const preserveSelection =\n              event.altKey &&\n              row.getIsSelected() &&\n              !event.shiftKey &&\n              !event.ctrlKey &&\n              !event.metaKey\n            const nextSelection: RowSelectionState = !preserveSelection\n              ? handleSelectionLogic(\n                  cellTableInstance, // Pass the cell's table instance\n                  row.id,\n                  event.shiftKey,\n                  event.ctrlKey || event.metaKey,\n                )\n              : cellTableInstance.getState().rowSelection || {}\n            if (event.altKey) {\n              onRowOptionClick?.(row.original, Object.keys(nextSelection))\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            imgPosition: imgPosition,\n            isRowExpandable: row.getCanExpand(),\n            enableNonFolderIndent,\n            isRowExpanded: row.getIsExpanded(),\n            isTableExpandable: cellMeta?.isExpandable,\n            onExpandClick: (event?: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n              if (event?.altKey) {\n                toggleRowAndDescendants(row, !row.getIsExpanded())\n              } else {\n                row.toggleExpanded()\n              }\n            },\n            startContent: row.original.startContent,\n            endContent: row.original.endContent,\n            badge: row.original.badge,\n            isDisabled: row.original.isDisabled,\n            disabledMessage: row.original.disabledMessage,\n            isRenaming: row.id === renamingIdRef.current,\n            renameInitialValue:\n              row.id === renamingIdRef.current ? renameInitialValueRef.current : undefined,\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      imgPosition,\n      onRowOptionClick,\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            selectedTableRows: nextSelectedRows\n              .map((selectedRowId) => table.getRowModel().rowsById[selectedRowId])\n              .filter((selectedRow): selectedRow is Row<SimpleTableRow> => !!selectedRow),\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","toggleRowAndDescendants","row","expanded","subRow","fuzzyFilter","columnId","searchValue","addMeta","cellValue","searchString","itemRank","matchSearchQuery","parseSearchQuery","fuzzySort","rowA","rowB","dir","compareItems","sortingFns","getRowRange","rows","idA","idB","indexA","indexB","i","start","end","SimpleTable","data","isLoading","error","isExpandable","isMultiSelect","enableClickToDeselect","enableNonFolderIndent","forceUpdateTable","globalFilter","meta","rowHeight","imgRatio","imgPosition","onScrollBottom","onRename","renamingId","renameInitialValue","onSubmitRename","onCancelRename","onRowDoubleClick","onRowOptionClick","rowContextMenuBuilders","children","pt","fitContent","props","rowSelection","setExpanded","onExpandedChange","onRowSelectionChange","rowPinning","onRowPinningChange","useSimpleTableContext","lastSelectedIdRef","useRef","tableRef","showRowContextMenu","useCreateContextMenu","onRowDoubleClickRef","renamingIdRef","renameInitialValueRef","onSubmitRenameRef","onCancelRenameRef","onRenameRef","tableData","useMemo","_","handleSelectionLogic","useCallback","tableInstance","rowId","isShift","isCtrlOrMeta","currentId","rowModel","visibleRows","currentRow","currentSelection","nextSelection","lastId","rowsToToggle","r","handleRowSelectForKeydown","event","selectedRow","isShiftKey","isCtrlKey","handleArrowNavigation","direction","currentIndex","nextIndex","nextRow","container","tableContainerRef","nextCell","handleRenameForKeydown","handleRowKeyDown","useRowKeydown","columns","getValue","cellTableInstance","cellMeta","handleCellClick","clsx","e","v","jsx","SimpleTableCellTemplate","handleRowSelectionChangeCallback","updater","functionalUpdate","handleRowPinningChangeCallback","handleExpandedChange","old","newExpanded","table","useReactTable","getCoreRowModel","getFilteredRowModel","getExpandedRowModel","useEffect","handleRowContextMenu","rowIndex","selectedIds","nextSelectedRows","menuItems","builder","selectedRowId","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

@@ -225,17 +225,24 @@
     width: auto;
     height: 24px;
     max-height: 24px;
+    flex: none;
     object-fit: cover;
     aspect-ratio: 1;
-    background-color: var(--md-sys-color-surface-container-lowest);
-    margin-right: 4px;
+
+    &.img-start {
+      margin-right: 4px;
+    }
+
+    &.img-end {
+      margin-left: 4px;
+    }
 
     &.circle {
       border-radius: 50%;
     }
 
     &.square {
-      border-radius: 4px;
+      border-radius: 2px;
     }
   }
 `,i=o(e.Button)`

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\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"}
+{"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    flex: none;\n    object-fit: cover;\n    aspect-ratio: 1;\n\n    &.img-start {\n      margin-right: 4px;\n    }\n\n    &.img-end {\n      margin-left: 4px;\n    }\n\n    &.circle {\n      border-radius: 50%;\n    }\n\n    &.square {\n      border-radius: 2px;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiMdG,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,4 +1,4 @@
-import { theme as e, Button as r } from "@ynput/ayon-react-components";
+import { theme as r, Button as e } from "@ynput/ayon-react-components";
 import o from "styled-components";
 const t = o.div`
   display: flex;
@@ -26,7 +26,7 @@ const t = o.div`
       font-size: 32px;
     }
     h3 {
-      ${e.titleMedium}
+      ${r.titleMedium}
     }
   }
 
@@ -227,20 +227,27 @@ const t = o.div`
     width: auto;
     height: 24px;
     max-height: 24px;
+    flex: none;
     object-fit: cover;
     aspect-ratio: 1;
-    background-color: var(--md-sys-color-surface-container-lowest);
-    margin-right: 4px;
+
+    &.img-start {
+      margin-right: 4px;
+    }
+
+    &.img-end {
+      margin-left: 4px;
+    }
 
     &.circle {
       border-radius: 50%;
     }
 
     &.square {
-      border-radius: 4px;
+      border-radius: 2px;
     }
   }
-`, s = o(r)`
+`, s = o(e)`
   &.expander {
     background-color: unset;
     padding: 2px;
@@ -270,7 +277,7 @@ const t = o.div`
   gap: var(--base-gap-small);
 
   border-bottom: 1px solid var(--md-sys-color-outline-variant);
-`, c = o(r)`
+`, c = o(e)`
   background-color: unset !important;
   z-index: 110;
   position: relative;

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\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;"}
+{"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    flex: none;\n    object-fit: cover;\n    aspect-ratio: 1;\n\n    &.img-start {\n      margin-right: 4px;\n    }\n\n    &.img-end {\n      margin-left: 4px;\n    }\n\n    &.circle {\n      border-radius: 50%;\n    }\n\n    &.square {\n      border-radius: 2px;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiMdG,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 s=require("../../../../_virtual/jsx-runtime.cjs.js"),E=require("react"),T=require("./SimpleTable.styled.cjs.js"),x=require("@ynput/ayon-react-components"),c=require("clsx"),q=({isRowExpandable:r,isRowExpanded:n,enableNonFolderIndent:a=!0,isTableExpandable:m,onExpandClick:u})=>r?s.jsxRuntimeExports.jsx(T.Expander,{onClick:o=>{o.stopPropagation(),u?.(o)},icon:n?"expand_more":"chevron_right",className:"expander",style:{cursor:"pointer"}}):m&&a&&s.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}),A=E.forwardRef(({value:r,icon:n,parents:a,iconColor:m,iconFilled:u,img:o,imgShape:b="square",imgRatio:k=1,isRowExpandable:C,isRowExpanded:F,isTableExpandable:P,enableNonFolderIndent:_=!0,onExpandClick:B,startContent:R,endContent:h,badge:l,actions:p,isRenaming:i,renameInitialValue:j,onSubmitRename:I,onCancelRename:y,renamePlaceholder:K,depth:N=0,isDisabled:f,disabledMessage:L,active:M,inactive:O,style:W,pt:e,...g},$)=>{const[S,v]=E.useState(j??r);return E.useEffect(()=>{i&&v(j??r)},[r,i,j]),s.jsxRuntimeExports.jsxs(T.Cell,{...g,ref:$,className:c(g.className,{disabled:f,inactive:O||M===!1,"has-actions":!!p?.length}),style:{...W,paddingLeft:`calc(${N*1.5}rem + 4px)`},title:f?L:void 0,children:[s.jsxRuntimeExports.jsx(q,{isRowExpandable:C,isRowExpanded:F,isTableExpandable:P,onExpandClick:B,enableNonFolderIndent:_,...e?.expander}),R&&R,o&&s.jsxRuntimeExports.jsx("img",{src:o,...e?.img,alt:"",className:c("image",b,e?.img?.className),style:{aspectRatio:k.toString(),...e?.img?.style}}),n&&s.jsxRuntimeExports.jsx(x.Icon,{icon:n,className:c({filled:u},e?.icon?.className),style:{color:m,...e?.icon?.style},...e?.icon}),i?s.jsxRuntimeExports.jsx(x.InputText,{autoFocus:!0,style:{flex:1},onChange:t=>v(t.target.value),value:S,placeholder:K,onKeyDown:t=>{t.key==="Enter"&&I?.(S),t.key==="Escape"&&y?.()},onBlur:()=>{y?.()},onFocus:t=>{t.target.select()},...e?.input}):s.jsxRuntimeExports.jsxs("div",{className:"text",...e?.text,children:[a&&N===0&&s.jsxRuntimeExports.jsxs("span",{className:"path",children:[a.join(" / ")," / "]}),s.jsxRuntimeExports.jsx("span",{className:"value",children:r})]}),!i&&s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(x.Spacer,{className:"spacer"}),l?.toString()&&s.jsxRuntimeExports.jsx("div",{className:"badges",children:typeof l=="string"?s.jsxRuntimeExports.jsx("span",{children:l}):l}),p&&s.jsxRuntimeExports.jsx("div",{className:"actions",children:p.map((t,z)=>{const{show:w="hover",...d}=t;return w==="hidden"?null:s.jsxRuntimeExports.jsx(x.Icon,{...d,className:c(d.className,{"show-always":w==="always"})},d.icon+z.toString())})})]}),h&&h]})});exports.RowExpander=q;exports.SimpleTableCellTemplate=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../_virtual/jsx-runtime.cjs.js"),R=require("react"),k=require("./SimpleTable.styled.cjs.js"),m=require("@ynput/ayon-react-components"),l=require("clsx"),C=({isRowExpandable:r,isRowExpanded:n,enableNonFolderIndent:o=!0,isTableExpandable:u,onExpandClick:j})=>r?s.jsxRuntimeExports.jsx(k.Expander,{onClick:a=>{a.stopPropagation(),j?.(a)},icon:n?"expand_more":"chevron_right",className:"expander",style:{cursor:"pointer"}}):u&&o&&s.jsxRuntimeExports.jsx("div",{style:{display:"inline-block",minWidth:24}}),H=R.forwardRef(({value:r,icon:n,parents:o,iconColor:u,iconFilled:j,img:a,imgShape:h="square",imgRatio:p,imgPosition:x="start",isRowExpandable:F,isRowExpanded:_,isTableExpandable:$,enableNonFolderIndent:B=!0,onExpandClick:I,startContent:K,endContent:N,badge:c,actions:d,isRenaming:i,renameInitialValue:E,onSubmitRename:L,onCancelRename:f,renamePlaceholder:M,depth:g=0,isDisabled:v,disabledMessage:O,active:W,inactive:z,style:A,pt:e,...S},D)=>{const[w,T]=R.useState(E??r);R.useEffect(()=>{i&&T(E??r)},[r,i,E]);const q=a?s.jsxRuntimeExports.jsx("img",{src:a,...e?.img,alt:"",className:l("image",h,`img-${x}`,e?.img?.className),style:{aspectRatio:(p??1).toString(),...e?.img?.style}}):p!==void 0&&s.jsxRuntimeExports.jsx("div",{className:l("image",h,`img-${x}`,e?.img?.className),style:{aspectRatio:p.toString(),...e?.img?.style}});return s.jsxRuntimeExports.jsxs(k.Cell,{...S,ref:D,className:l(S.className,{disabled:v,inactive:z||W===!1,"has-actions":!!d?.length}),style:{...A,paddingLeft:`calc(${g*1.5}rem + 4px)`},title:v?O:void 0,children:[s.jsxRuntimeExports.jsx(C,{isRowExpandable:F,isRowExpanded:_,isTableExpandable:$,onExpandClick:I,enableNonFolderIndent:B,...e?.expander}),x==="start"&&q,K,n&&s.jsxRuntimeExports.jsx(m.Icon,{icon:n,className:l({filled:j},e?.icon?.className),style:{color:u,...e?.icon?.style},...e?.icon}),i?s.jsxRuntimeExports.jsx(m.InputText,{autoFocus:!0,style:{flex:1},onChange:t=>T(t.target.value),value:w,placeholder:M,onKeyDown:t=>{t.key==="Enter"&&L?.(w),t.key==="Escape"&&f?.()},onBlur:()=>{f?.()},onFocus:t=>{t.target.select()},...e?.input}):s.jsxRuntimeExports.jsxs("div",{className:"text",...e?.text,children:[o&&g===0&&s.jsxRuntimeExports.jsxs("span",{className:"path",children:[o.join(" / ")," / "]}),s.jsxRuntimeExports.jsx("span",{className:"value",children:r})]}),!i&&s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(m.Spacer,{className:"spacer"}),c?.toString()&&s.jsxRuntimeExports.jsx("div",{className:"badges",children:typeof c=="string"?s.jsxRuntimeExports.jsx("span",{children:c}):c}),d&&s.jsxRuntimeExports.jsx("div",{className:"actions",children:d.map((t,G)=>{const{show:b="hover",...y}=t;return b==="hidden"?null:s.jsxRuntimeExports.jsx(m.Icon,{...y,className:l(y.className,{"show-always":b==="always"})},y.icon+G.toString())})})]}),x==="end"&&q,N&&N]})});exports.RowExpander=C;exports.SimpleTableCellTemplate=H;
 //# 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, 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?: (event: React.MouseEvent) => 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?.(e)\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 && depth === 0 && <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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"}
+{"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?: (event: React.MouseEvent) => 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?.(e)\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  imgPosition?: 'start' | 'end'\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,\n      imgPosition = 'start',\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    const thumbnail = img ? (\n      <img\n        src={img}\n        {...pt?.img}\n        alt=\"\"\n        className={clsx('image', imgShape, `img-${imgPosition}`, pt?.img?.className)}\n        style={{\n          aspectRatio: (imgRatio ?? 1).toString(),\n          ...pt?.img?.style,\n        }}\n      />\n    ) : (\n      // keep the slot so rows don't shift when a thumbnail is missing\n      imgRatio !== undefined && (\n        <div\n          className={clsx('image', imgShape, `img-${imgPosition}`, pt?.img?.className)}\n          style={{\n            aspectRatio: imgRatio.toString(),\n            ...pt?.img?.style,\n          }}\n        />\n      )\n    )\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        {imgPosition === 'start' && thumbnail}\n        {startContent}\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 && depth === 0 && <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        {imgPosition === 'end' && thumbnail}\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","imgPosition","startContent","endContent","badge","actions","isRenaming","renameInitialValue","onSubmitRename","onCancelRename","renamePlaceholder","depth","isDisabled","disabledMessage","active","inactive","style","pt","props","ref","renameValue","setRenameValue","useState","useEffect","thumbnail","clsx","jsxs","Styled.Cell","Icon","InputText","Fragment","Spacer","action","i","show","iconProps"],"mappings":"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"}