@ynput/ayon-frontend-shared 0.2.26 → 0.2.28

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectTreeTable.styled.cjs.js","sources":["../../../../../src/containers/ProjectTreeTable/ProjectTreeTable.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// Create shadow mixins to make combinations work properly\nconst topShadow = `inset 0 1px 0 0 var(--md-sys-color-primary)`\nconst rightShadow = `inset -1px 0 0 0 var(--md-sys-color-primary)`\nconst bottomShadow = `inset 0 -1px 0 0 var(--md-sys-color-primary)`\nconst leftShadow = `inset 1px 0 0 0 var(--md-sys-color-primary)`\n\nconst getDefaultShadow = (isLastPinned: boolean) => {\n  const defaultShadow = `inset 1px -1px 0 0 var(--md-sys-color-surface-container)`\n  const defaultShadowLastPinned = `inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)`\n  return isLastPinned ? defaultShadowLastPinned : defaultShadow\n}\n\n// Use the known string literal for DRAG_HANDLE_COLUMN_ID to avoid import complexities here\nconst DRAG_HANDLE_CLASS = 'drag-handle'\n\nexport const TR = styled.tr`\n  display: flex;\n  position: absolute;\n  width: 100%;\n\n  &:hover {\n    // When the row (TR) is hovered...\n\n    // Target the button inside the drag handle cell to make it visible at 50% opacity.\n    // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.\n    td.${DRAG_HANDLE_CLASS} button {\n      opacity: 0.5;\n      visibility: visible;\n    }\n\n    // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...\n    // Make the button 100% opacity. This selector is more specific and will override the above.\n    td.${DRAG_HANDLE_CLASS} button:hover {\n      opacity: 1;\n    }\n  }\n\n  &.group-row {\n    td {\n      /* group headers do not have vertical grid lines */\n      box-shadow: inset 0px -1px 0 0 var(--md-sys-color-surface-container);\n    }\n  }\n`\n\nexport const TableCellContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: var(--border-radius-m);\n  user-select: none;\n  padding-right: 0;\n\n  &.bold {\n    font-weight: 600;\n  }\n\n  &.loading {\n    margin: 0px 5px;\n    padding: 0 !important;\n    width: calc(100% - 10px);\n    height: 28px;\n    margin-top: 3px;\n\n    &:not(.hierarchy) {\n      height: 32px;\n    }\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const ResizedHandler = styled.div`\n  position: absolute;\n  right: -1px;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize !important;\n  background-color: var(--md-sys-color-surface-container-high);\n\n  opacity: 0;\n\n  &.resizing {\n    background-color: var(--md-sys-color-primary);\n    opacity: 1;\n    cursor: col-resize !important;\n  }\n`\n\nexport const ColumnHeader = styled.tr`\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const HeaderCell = styled.th`\n  position: relative;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);\n  display: flex;\n  align-items: center;\n  min-height: fit-content;\n\n  &:hover {\n    .resize-handle {\n      opacity: 1;\n    }\n  }\n\n  /* show action buttons */\n  &:hover {\n    .actions {\n      display: flex;\n    }\n  }\n\n  /* Hide action buttons when resizing */\n  &.resizing {\n    .actions {\n      display: none !important;\n    }\n    cursor: col-resize !important;\n    \n    /* Ensure all child elements also have the resize cursor */\n    * {\n      cursor: col-resize !important;\n    }\n  }\n\n  /* Styling for the last pinned left column */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* special styles for the left selection column */\n  &.__row_selection__ {\n    min-width: unset;\n    width: 20px !important;\n\n    .actions {\n      display: none;\n    }\n  }\n`\n\nexport const HeaderButtons = styled.div`\n  display: none;\n  gap: var(--base-gap-small);\n  align-items: center;\n\n  position: absolute;\n  z-index: 10;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: var(--md-sys-color-surface-container-lowest);\n  padding-left: 4px;\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\ntype TableCellProps = {\n  $isLastPinned?: boolean\n}\n\nexport const TableCell = styled.td<TableCellProps>`\n  position: relative;\n  box-shadow: ${getDefaultShadow(false)};\n  background-color: var(--md-sys-color-surface-container-low);\n\n  &.${DRAG_HANDLE_CLASS} {\n    // Styles for the button inside the drag handle cell\n    button {\n      opacity: 0; // Default: hidden\n      visibility: hidden;\n      transition: opacity 0.2s ease, visibility 0.2s ease;\n      // Base appearance styles (cursor, border, background, etc.)\n      // are primarily handled by inline styles in RowDragHandleCellContent.tsx.\n      // Add any necessary overrides or defaults here if needed.\n      // For example, ensuring the button itself doesn't interfere with cell styling:\n      background: transparent;\n      border: none;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &.task {\n    background-color: hsl(216 15% 11.5% / 1);\n  }\n\n  &.selected-row {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  /* show hover effect only if direct child div does NOT have .readonly */\n  &:not(:has(> div.readonly)) {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n\n    .selected {\n      background-color: var(--md-sys-color-secondary-container);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-secondary-container);\n    position: relative;\n    z-index: 1;\n  }\n\n  /* remove default focus style */\n  &:focus-visible {\n    outline: none;\n  }\n\n  /* Styling for the last pinned left column */\n  /* extra border on the right */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* Shadow combinations - single side */\n  &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${bottomShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${leftShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Two sides */\n  &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {\n    box-shadow: ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {\n    box-shadow: ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Three sides */\n  &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {\n    box-shadow: ${topShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {\n    box-shadow: ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* All four sides */\n  &.shadow-top.shadow-right.shadow-bottom.shadow-left {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Focus styling */\n  &.focused {\n    position: relative;\n    z-index: 2;\n  }\n\n  /* Use pseudo-element for focused outline to avoid box-shadow conflicts */\n  &.focused::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid var(--md-sys-color-primary);\n    pointer-events: none;\n  }\n\n  &.editing {\n    z-index: 10 !important;\n    /* light border around the outside */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 2px;\n      border: 2px solid var(--md-sys-color-surface-container-low);\n    }\n  }\n\n  /* special styles for selection bar cells */\n  &.__row_selection__ {\n    width: 20px !important;\n    min-width: unset;\n\n    &.selected {\n      background-color: var(--md-sys-color-primary-container) !important;\n      box-shadow: none !important;\n      /* reveal the check mark */\n      [icon='check'] {\n        display: block;\n      }\n    }\n  }\n`\n\nexport const TableHeader = styled.thead`\n  display: grid !important;\n  position: sticky;\n  top: 0;\n  min-height: 34px;\n  z-index: 10;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const TableWrapper = styled.div`\n  overflow: hidden;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--border-radius-m);\n\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const TableContainer = styled.div`\n  display: flex;\n\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 4px;\n  padding-top: 0;\n\n  &.isLoading {\n    overflow: hidden;\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  td {\n    height: 34px;\n    padding: 1px 0px;\n    width: 100%;\n  }\n`\n\nexport const LinkColumnHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  .icon {\n    font-size: 18px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["topShadow","rightShadow","bottomShadow","leftShadow","getDefaultShadow","isLastPinned","DRAG_HANDLE_CLASS","TR","styled","TableCellContent","ResizedHandler","ColumnHeader","HeaderCell","HeaderButtons","TableCell","$isLastPinned","TableHeader","TableWrapper","TableContainer","LinkColumnHeader"],"mappings":"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"}
+{"version":3,"file":"ProjectTreeTable.styled.cjs.js","sources":["../../../../../src/containers/ProjectTreeTable/ProjectTreeTable.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// Create shadow mixins to make combinations work properly\nconst topShadow = `inset 0 1px 0 0 var(--md-sys-color-primary)`\nconst rightShadow = `inset -1px 0 0 0 var(--md-sys-color-primary)`\nconst bottomShadow = `inset 0 -1px 0 0 var(--md-sys-color-primary)`\nconst leftShadow = `inset 1px 0 0 0 var(--md-sys-color-primary)`\n\nconst getDefaultShadow = (isLastPinned: boolean) => {\n  const defaultShadow = `inset 1px -1px 0 0 var(--md-sys-color-surface-container)`\n  const defaultShadowLastPinned = `inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)`\n  return isLastPinned ? defaultShadowLastPinned : defaultShadow\n}\n\n// Use the known string literal for DRAG_HANDLE_COLUMN_ID to avoid import complexities here\nconst DRAG_HANDLE_CLASS = 'drag-handle'\n\nexport const TR = styled.tr`\n  display: flex;\n  position: absolute;\n  width: 100%;\n\n  &:hover {\n    // When the row (TR) is hovered...\n\n    // Target the button inside the drag handle cell to make it visible at 50% opacity.\n    // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.\n    td.${DRAG_HANDLE_CLASS} button {\n      opacity: 0.5;\n      visibility: visible;\n    }\n\n    // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...\n    // Make the button 100% opacity. This selector is more specific and will override the above.\n    td.${DRAG_HANDLE_CLASS} button:hover {\n      opacity: 1;\n    }\n\n    /* row selection hover */\n    td:not(.selected) {\n      background-color: hsl(215 14% 15%);\n    }\n  }\n\n  &.group-row {\n    td {\n      /* group headers do not have vertical grid lines */\n      box-shadow: inset 0px -1px 0 0 var(--md-sys-color-surface-container);\n    }\n  }\n`\n\nexport const TableCellContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: var(--border-radius-m);\n  user-select: none;\n  padding-right: 0;\n\n  &.bold {\n    font-weight: 600;\n  }\n\n  &.loading {\n    margin: 0px 5px;\n    padding: 0 !important;\n    width: calc(100% - 10px);\n    height: 28px;\n    margin-top: 3px;\n\n    &:not(.hierarchy) {\n      height: 32px;\n    }\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const ResizedHandler = styled.div`\n  position: absolute;\n  right: -1px;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize !important;\n  background-color: var(--md-sys-color-surface-container-high);\n\n  opacity: 0;\n\n  &.resizing {\n    background-color: var(--md-sys-color-primary);\n    opacity: 1;\n    cursor: col-resize !important;\n  }\n`\n\nexport const ColumnHeader = styled.tr`\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const HeaderCell = styled.th`\n  position: relative;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);\n  display: flex;\n  align-items: center;\n  min-height: fit-content;\n\n  &:hover {\n    .resize-handle {\n      opacity: 1;\n    }\n    \n    .actions {\n      display: flex !important;\n    }\n    \n    .actions .header-menu {\n      display: flex !important;\n    }\n  }\n\n  /* Hide action buttons when resizing */\n  &.resizing {\n    .actions {\n      display: none !important;\n    }\n    cursor: col-resize !important;\n\n    * {\n      cursor: col-resize !important;\n    }\n  }\n\n  /* Styling for the last pinned left column */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* special styles for the left selection column */\n  &.__row_selection__ {\n    min-width: unset;\n    width: 20px !important;\n\n    .actions {\n      display: none;\n    }\n  }\n`\n\nexport const HeaderButtons = styled.div<{ $isOpen: boolean }>`\n  display: none;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    `\n    display: flex !important;\n  `}\n\n  gap: var(--base-gap-small);\n  align-items: center;\n\n  position: absolute;\n  z-index: 10;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: var(--md-sys-color-surface-container-lowest);\n  padding-left: 4px;\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n\n  &:has(.sort-button.visible),\n  &:has(.sort-button.selected) {\n    display: flex !important;\n  }\n\n  .sort-button.visible {\n    display: flex !important;\n  }\n  \n  .sort-button.selected {\n    display: flex !important;\n  }\n\n  .header-menu {\n    display: none;\n  }\n  \n  ${({ $isOpen }) =>\n    $isOpen &&\n    `\n    .header-menu {\n      display: flex !important;\n    }\n  `}\n  \n  .header-menu.open,\n  .header-menu.active {\n    display: flex !important;\n  }\n\n   .resizing & {\n    .sort-button,\n    .header-menu {\n      display: none !important;\n    }\n  }\n`\n\ntype TableCellProps = {\n  $isLastPinned?: boolean\n}\n\nexport const TableCell = styled.td<TableCellProps>`\n  position: relative;\n  box-shadow: ${getDefaultShadow(false)};\n  background-color: var(--md-sys-color-surface-container-low);\n\n  &.${DRAG_HANDLE_CLASS} {\n    // Styles for the button inside the drag handle cell\n    button {\n      opacity: 0; // Default: hidden\n      visibility: hidden;\n      transition: opacity 0.2s ease, visibility 0.2s ease;\n      // Base appearance styles (cursor, border, background, etc.)\n      // are primarily handled by inline styles in RowDragHandleCellContent.tsx.\n      // Add any necessary overrides or defaults here if needed.\n      // For example, ensuring the button itself doesn't interfere with cell styling:\n      background: transparent;\n      border: none;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  --task-background-color: hsl(216 15% 11.5% / 1);\n  &.task {\n    background-color: var(--task-background-color);\n  }\n\n  &.selected-row {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  /* show hover effect only if direct child div does NOT have .readonly and is not selected */\n  &:not(:has(> div.readonly)) {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n\n    &.selected {\n      background-color: var(--md-sys-color-secondary-container);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-secondary-container);\n    position: relative;\n    z-index: 1;\n  }\n\n  /* remove default focus style */\n  &:focus-visible {\n    outline: none;\n  }\n\n  /* Styling for the last pinned left column */\n  /* extra border on the right */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* Shadow combinations - single side */\n  &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${bottomShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${leftShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Two sides */\n  &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {\n    box-shadow: ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {\n    box-shadow: ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Three sides */\n  &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {\n    box-shadow: ${topShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {\n    box-shadow: ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* All four sides */\n  &.shadow-top.shadow-right.shadow-bottom.shadow-left {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Focus styling */\n  &.focused {\n    position: relative;\n    z-index: 2;\n  }\n\n  /* Use pseudo-element for focused outline to avoid box-shadow conflicts */\n  &.focused::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid var(--md-sys-color-primary);\n    pointer-events: none;\n  }\n\n  /* read only fields are dimmed down for bg and border */\n  &:has(> div.readonly) {\n    &:not(.multiple-selected) {\n      --focused-readonly-color: hsl(212 15% 18% / 1);\n      &.focused {\n        background-color: var(--focused-readonly-color);\n        &::after {\n          border-color: var(--focused-readonly-color);\n        }\n      }\n    }\n\n    /* when focused is readonly and multiple-selected */\n    &.multiple-selected {\n      &.focused::after {\n        display: none;\n      }\n    }\n  }\n\n  /* if there is no cell widget element (no children) then the cell should not be selectable at all */\n  &:not(:has(> div)) {\n    pointer-events: none;\n    cursor: default;\n  }\n\n  &.editing {\n    z-index: 10 !important;\n    /* light border around the outside */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 2px;\n      border: 2px solid var(--md-sys-color-surface-container-low);\n    }\n  }\n\n  /* special styles for selection bar cells */\n  &.__row_selection__ {\n    width: 20px !important;\n    min-width: unset;\n\n    &.selected {\n      background-color: var(--md-sys-color-primary-container) !important;\n      box-shadow: none !important;\n      /* reveal the check mark */\n      [icon='check'] {\n        display: block;\n      }\n    }\n  }\n`\n\nexport const TableHeader = styled.thead`\n  display: grid !important;\n  position: sticky;\n  top: 0;\n  min-height: 34px;\n  z-index: 10;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const TableWrapper = styled.div`\n  overflow: hidden;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--border-radius-m);\n\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const TableContainer = styled.div`\n  display: flex;\n\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 4px;\n  padding-top: 0;\n\n  &.isLoading {\n    overflow: hidden;\n  }\n\n  /* Hide all header buttons when any column is being resized */\n  &.resizing {\n    .actions {\n      display: none !important;\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  td {\n    height: 34px;\n    padding: 1px 0px;\n    width: 100%;\n  }\n`\n\nexport const LinkColumnHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  .icon {\n    font-size: 18px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["topShadow","rightShadow","bottomShadow","leftShadow","getDefaultShadow","isLastPinned","DRAG_HANDLE_CLASS","TR","styled","TableCellContent","ResizedHandler","ColumnHeader","HeaderCell","HeaderButtons","$isOpen","TableCell","$isLastPinned","TableHeader","TableWrapper","TableContainer","LinkColumnHeader"],"mappings":"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"}

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.styled.es.js

@@ -1,5 +1,5 @@
-import e from "styled-components";
-const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 var(--md-sys-color-primary)", r = "inset 0 -1px 0 0 var(--md-sys-color-primary)", i = "inset 1px 0 0 0 var(--md-sys-color-primary)", t = (o) => o ? "inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)" : "inset 1px -1px 0 0 var(--md-sys-color-surface-container)", n = "drag-handle", h = e.tr`
+import t from "styled-components";
+const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 var(--md-sys-color-primary)", r = "inset 0 -1px 0 0 var(--md-sys-color-primary)", n = "inset 1px 0 0 0 var(--md-sys-color-primary)", e = (o) => o ? "inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)" : "inset 1px -1px 0 0 var(--md-sys-color-surface-container)", i = "drag-handle", h = t.tr`
   display: flex;
   position: absolute;
   width: 100%;
@@ -9,16 +9,21 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
 
     // Target the button inside the drag handle cell to make it visible at 50% opacity.
     // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.
-    td.${n} button {
+    td.${i} button {
       opacity: 0.5;
       visibility: visible;
     }
 
     // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...
     // Make the button 100% opacity. This selector is more specific and will override the above.
-    td.${n} button:hover {
+    td.${i} button:hover {
       opacity: 1;
     }
+
+    /* row selection hover */
+    td:not(.selected) {
+      background-color: hsl(215 14% 15%);
+    }
   }
 
   &.group-row {
@@ -27,7 +32,7 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
       box-shadow: inset 0px -1px 0 0 var(--md-sys-color-surface-container);
     }
   }
-`, p = e.div`
+`, p = t.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
@@ -63,7 +68,7 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
   .resizing & {
     cursor: col-resize !important;
   }
-`, w = e.div`
+`, w = t.div`
   position: absolute;
   right: -1px;
   top: 0;
@@ -79,9 +84,9 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
     opacity: 1;
     cursor: col-resize !important;
   }
-`, f = e.tr`
+`, u = t.tr`
   background-color: var(--md-sys-color-surface-container-low);
-`, u = e.th`
+`, f = t.th`
   position: relative;
   background-color: var(--md-sys-color-surface-container-lowest);
   box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);
@@ -93,12 +98,13 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
     .resize-handle {
       opacity: 1;
     }
-  }
-
-  /* show action buttons */
-  &:hover {
+    
     .actions {
-      display: flex;
+      display: flex !important;
+    }
+    
+    .actions .header-menu {
+      display: flex !important;
     }
   }
 
@@ -108,8 +114,7 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
       display: none !important;
     }
     cursor: col-resize !important;
-    
-    /* Ensure all child elements also have the resize cursor */
+
     * {
       cursor: col-resize !important;
     }
@@ -130,8 +135,13 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
       display: none;
     }
   }
-`, b = e.div`
+`, m = t.div`
   display: none;
+
+  ${({ $isOpen: o }) => o && `
+    display: flex !important;
+  `}
+
   gap: var(--base-gap-small);
   align-items: center;
 
@@ -146,12 +156,47 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
   .resizing & {
     cursor: col-resize !important;
   }
-`, m = e.td`
+
+  &:has(.sort-button.visible),
+  &:has(.sort-button.selected) {
+    display: flex !important;
+  }
+
+  .sort-button.visible {
+    display: flex !important;
+  }
+  
+  .sort-button.selected {
+    display: flex !important;
+  }
+
+  .header-menu {
+    display: none;
+  }
+  
+  ${({ $isOpen: o }) => o && `
+    .header-menu {
+      display: flex !important;
+    }
+  `}
+  
+  .header-menu.open,
+  .header-menu.active {
+    display: flex !important;
+  }
+
+   .resizing & {
+    .sort-button,
+    .header-menu {
+      display: none !important;
+    }
+  }
+`, b = t.td`
   position: relative;
-  box-shadow: ${t(!1)};
+  box-shadow: ${e(!1)};
   background-color: var(--md-sys-color-surface-container-low);
 
-  &.${n} {
+  &.${i} {
     // Styles for the button inside the drag handle cell
     button {
       opacity: 0; // Default: hidden
@@ -172,22 +217,23 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
     }
   }
 
+  --task-background-color: hsl(216 15% 11.5% / 1);
   &.task {
-    background-color: hsl(216 15% 11.5% / 1);
+    background-color: var(--task-background-color);
   }
 
   &.selected-row {
     background-color: var(--md-sys-color-surface-container-high);
   }
 
-  /* show hover effect only if direct child div does NOT have .readonly */
+  /* show hover effect only if direct child div does NOT have .readonly and is not selected */
   &:not(:has(> div.readonly)) {
     cursor: pointer;
     &:hover {
       background-color: var(--md-sys-color-surface-container);
     }
 
-    .selected {
+    &.selected {
       background-color: var(--md-sys-color-secondary-container);
     }
   }
@@ -212,77 +258,77 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
 
   /* Shadow combinations - single side */
   &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {
-    box-shadow: ${s}, ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${s}, ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {
-    box-shadow: ${a}, ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${a}, ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {
-    box-shadow: ${r}, ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${r}, ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {
-    box-shadow: ${i}, ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${n}, ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   /* Two sides */
   &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {
     box-shadow: ${s}, ${a},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {
     box-shadow: ${s}, ${r},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {
-    box-shadow: ${s}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${s}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {
     box-shadow: ${a}, ${r},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {
-    box-shadow: ${a}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${a}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {
-    box-shadow: ${r}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${r}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   /* Three sides */
   &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {
     box-shadow: ${s}, ${a}, ${r},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {
-    box-shadow: ${s}, ${a}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${s}, ${a}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {
-    box-shadow: ${s}, ${r}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${s}, ${r}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {
-    box-shadow: ${a}, ${r}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${a}, ${r}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   /* All four sides */
   &.shadow-top.shadow-right.shadow-bottom.shadow-left {
-    box-shadow: ${s}, ${a}, ${r}, ${i},
-      ${({ $isLastPinned: o }) => t(o || !1)};
+    box-shadow: ${s}, ${a}, ${r}, ${n},
+      ${({ $isLastPinned: o }) => e(o || !1)};
   }
 
   /* Focus styling */
@@ -303,6 +349,32 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
     pointer-events: none;
   }
 
+  /* read only fields are dimmed down for bg and border */
+  &:has(> div.readonly) {
+    &:not(.multiple-selected) {
+      --focused-readonly-color: hsl(212 15% 18% / 1);
+      &.focused {
+        background-color: var(--focused-readonly-color);
+        &::after {
+          border-color: var(--focused-readonly-color);
+        }
+      }
+    }
+
+    /* when focused is readonly and multiple-selected */
+    &.multiple-selected {
+      &.focused::after {
+        display: none;
+      }
+    }
+  }
+
+  /* if there is no cell widget element (no children) then the cell should not be selectable at all */
+  &:not(:has(> div)) {
+    pointer-events: none;
+    cursor: default;
+  }
+
   &.editing {
     z-index: 10 !important;
     /* light border around the outside */
@@ -328,7 +400,7 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
       }
     }
   }
-`, g = e.thead`
+`, g = t.thead`
   display: grid !important;
   position: sticky;
   top: 0;
@@ -339,14 +411,14 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
   .resizing & {
     cursor: col-resize !important;
   }
-`, y = e.div`
+`, y = t.div`
   overflow: hidden;
   position: absolute;
   inset: 0;
   border-radius: var(--border-radius-m);
 
   background-color: var(--md-sys-color-surface-container-low);
-`, x = e.div`
+`, x = t.div`
   display: flex;
 
   height: 100%;
@@ -359,6 +431,13 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
     overflow: hidden;
   }
 
+  /* Hide all header buttons when any column is being resized */
+  &.resizing {
+    .actions {
+      display: none !important;
+    }
+  }
+
   table {
     height: fit-content;
     width: 100%;
@@ -379,7 +458,7 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
     padding: 1px 0px;
     width: 100%;
   }
-`, v = e.div`
+`, v = t.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -389,13 +468,13 @@ const s = "inset 0 1px 0 0 var(--md-sys-color-primary)", a = "inset -1px 0 0 0 v
   }
 `;
 export {
-  f as ColumnHeader,
-  b as HeaderButtons,
-  u as HeaderCell,
+  u as ColumnHeader,
+  m as HeaderButtons,
+  f as HeaderCell,
   v as LinkColumnHeader,
   w as ResizedHandler,
   h as TR,
-  m as TableCell,
+  b as TableCell,
   p as TableCellContent,
   x as TableContainer,
   g as TableHeader,

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectTreeTable.styled.es.js","sources":["../../../../../src/containers/ProjectTreeTable/ProjectTreeTable.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// Create shadow mixins to make combinations work properly\nconst topShadow = `inset 0 1px 0 0 var(--md-sys-color-primary)`\nconst rightShadow = `inset -1px 0 0 0 var(--md-sys-color-primary)`\nconst bottomShadow = `inset 0 -1px 0 0 var(--md-sys-color-primary)`\nconst leftShadow = `inset 1px 0 0 0 var(--md-sys-color-primary)`\n\nconst getDefaultShadow = (isLastPinned: boolean) => {\n  const defaultShadow = `inset 1px -1px 0 0 var(--md-sys-color-surface-container)`\n  const defaultShadowLastPinned = `inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)`\n  return isLastPinned ? defaultShadowLastPinned : defaultShadow\n}\n\n// Use the known string literal for DRAG_HANDLE_COLUMN_ID to avoid import complexities here\nconst DRAG_HANDLE_CLASS = 'drag-handle'\n\nexport const TR = styled.tr`\n  display: flex;\n  position: absolute;\n  width: 100%;\n\n  &:hover {\n    // When the row (TR) is hovered...\n\n    // Target the button inside the drag handle cell to make it visible at 50% opacity.\n    // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.\n    td.${DRAG_HANDLE_CLASS} button {\n      opacity: 0.5;\n      visibility: visible;\n    }\n\n    // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...\n    // Make the button 100% opacity. This selector is more specific and will override the above.\n    td.${DRAG_HANDLE_CLASS} button:hover {\n      opacity: 1;\n    }\n  }\n\n  &.group-row {\n    td {\n      /* group headers do not have vertical grid lines */\n      box-shadow: inset 0px -1px 0 0 var(--md-sys-color-surface-container);\n    }\n  }\n`\n\nexport const TableCellContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: var(--border-radius-m);\n  user-select: none;\n  padding-right: 0;\n\n  &.bold {\n    font-weight: 600;\n  }\n\n  &.loading {\n    margin: 0px 5px;\n    padding: 0 !important;\n    width: calc(100% - 10px);\n    height: 28px;\n    margin-top: 3px;\n\n    &:not(.hierarchy) {\n      height: 32px;\n    }\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const ResizedHandler = styled.div`\n  position: absolute;\n  right: -1px;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize !important;\n  background-color: var(--md-sys-color-surface-container-high);\n\n  opacity: 0;\n\n  &.resizing {\n    background-color: var(--md-sys-color-primary);\n    opacity: 1;\n    cursor: col-resize !important;\n  }\n`\n\nexport const ColumnHeader = styled.tr`\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const HeaderCell = styled.th`\n  position: relative;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);\n  display: flex;\n  align-items: center;\n  min-height: fit-content;\n\n  &:hover {\n    .resize-handle {\n      opacity: 1;\n    }\n  }\n\n  /* show action buttons */\n  &:hover {\n    .actions {\n      display: flex;\n    }\n  }\n\n  /* Hide action buttons when resizing */\n  &.resizing {\n    .actions {\n      display: none !important;\n    }\n    cursor: col-resize !important;\n    \n    /* Ensure all child elements also have the resize cursor */\n    * {\n      cursor: col-resize !important;\n    }\n  }\n\n  /* Styling for the last pinned left column */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* special styles for the left selection column */\n  &.__row_selection__ {\n    min-width: unset;\n    width: 20px !important;\n\n    .actions {\n      display: none;\n    }\n  }\n`\n\nexport const HeaderButtons = styled.div`\n  display: none;\n  gap: var(--base-gap-small);\n  align-items: center;\n\n  position: absolute;\n  z-index: 10;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: var(--md-sys-color-surface-container-lowest);\n  padding-left: 4px;\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\ntype TableCellProps = {\n  $isLastPinned?: boolean\n}\n\nexport const TableCell = styled.td<TableCellProps>`\n  position: relative;\n  box-shadow: ${getDefaultShadow(false)};\n  background-color: var(--md-sys-color-surface-container-low);\n\n  &.${DRAG_HANDLE_CLASS} {\n    // Styles for the button inside the drag handle cell\n    button {\n      opacity: 0; // Default: hidden\n      visibility: hidden;\n      transition: opacity 0.2s ease, visibility 0.2s ease;\n      // Base appearance styles (cursor, border, background, etc.)\n      // are primarily handled by inline styles in RowDragHandleCellContent.tsx.\n      // Add any necessary overrides or defaults here if needed.\n      // For example, ensuring the button itself doesn't interfere with cell styling:\n      background: transparent;\n      border: none;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &.task {\n    background-color: hsl(216 15% 11.5% / 1);\n  }\n\n  &.selected-row {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  /* show hover effect only if direct child div does NOT have .readonly */\n  &:not(:has(> div.readonly)) {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n\n    .selected {\n      background-color: var(--md-sys-color-secondary-container);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-secondary-container);\n    position: relative;\n    z-index: 1;\n  }\n\n  /* remove default focus style */\n  &:focus-visible {\n    outline: none;\n  }\n\n  /* Styling for the last pinned left column */\n  /* extra border on the right */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* Shadow combinations - single side */\n  &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${bottomShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${leftShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Two sides */\n  &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {\n    box-shadow: ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {\n    box-shadow: ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Three sides */\n  &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {\n    box-shadow: ${topShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {\n    box-shadow: ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* All four sides */\n  &.shadow-top.shadow-right.shadow-bottom.shadow-left {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Focus styling */\n  &.focused {\n    position: relative;\n    z-index: 2;\n  }\n\n  /* Use pseudo-element for focused outline to avoid box-shadow conflicts */\n  &.focused::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid var(--md-sys-color-primary);\n    pointer-events: none;\n  }\n\n  &.editing {\n    z-index: 10 !important;\n    /* light border around the outside */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 2px;\n      border: 2px solid var(--md-sys-color-surface-container-low);\n    }\n  }\n\n  /* special styles for selection bar cells */\n  &.__row_selection__ {\n    width: 20px !important;\n    min-width: unset;\n\n    &.selected {\n      background-color: var(--md-sys-color-primary-container) !important;\n      box-shadow: none !important;\n      /* reveal the check mark */\n      [icon='check'] {\n        display: block;\n      }\n    }\n  }\n`\n\nexport const TableHeader = styled.thead`\n  display: grid !important;\n  position: sticky;\n  top: 0;\n  min-height: 34px;\n  z-index: 10;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const TableWrapper = styled.div`\n  overflow: hidden;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--border-radius-m);\n\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const TableContainer = styled.div`\n  display: flex;\n\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 4px;\n  padding-top: 0;\n\n  &.isLoading {\n    overflow: hidden;\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  td {\n    height: 34px;\n    padding: 1px 0px;\n    width: 100%;\n  }\n`\n\nexport const LinkColumnHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  .icon {\n    font-size: 18px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["topShadow","rightShadow","bottomShadow","leftShadow","getDefaultShadow","isLastPinned","DRAG_HANDLE_CLASS","TR","styled","TableCellContent","ResizedHandler","ColumnHeader","HeaderCell","HeaderButtons","TableCell","$isLastPinned","TableHeader","TableWrapper","TableContainer","LinkColumnHeader"],"mappings":"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"}
+{"version":3,"file":"ProjectTreeTable.styled.es.js","sources":["../../../../../src/containers/ProjectTreeTable/ProjectTreeTable.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// Create shadow mixins to make combinations work properly\nconst topShadow = `inset 0 1px 0 0 var(--md-sys-color-primary)`\nconst rightShadow = `inset -1px 0 0 0 var(--md-sys-color-primary)`\nconst bottomShadow = `inset 0 -1px 0 0 var(--md-sys-color-primary)`\nconst leftShadow = `inset 1px 0 0 0 var(--md-sys-color-primary)`\n\nconst getDefaultShadow = (isLastPinned: boolean) => {\n  const defaultShadow = `inset 1px -1px 0 0 var(--md-sys-color-surface-container)`\n  const defaultShadowLastPinned = `inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)`\n  return isLastPinned ? defaultShadowLastPinned : defaultShadow\n}\n\n// Use the known string literal for DRAG_HANDLE_COLUMN_ID to avoid import complexities here\nconst DRAG_HANDLE_CLASS = 'drag-handle'\n\nexport const TR = styled.tr`\n  display: flex;\n  position: absolute;\n  width: 100%;\n\n  &:hover {\n    // When the row (TR) is hovered...\n\n    // Target the button inside the drag handle cell to make it visible at 50% opacity.\n    // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.\n    td.${DRAG_HANDLE_CLASS} button {\n      opacity: 0.5;\n      visibility: visible;\n    }\n\n    // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...\n    // Make the button 100% opacity. This selector is more specific and will override the above.\n    td.${DRAG_HANDLE_CLASS} button:hover {\n      opacity: 1;\n    }\n\n    /* row selection hover */\n    td:not(.selected) {\n      background-color: hsl(215 14% 15%);\n    }\n  }\n\n  &.group-row {\n    td {\n      /* group headers do not have vertical grid lines */\n      box-shadow: inset 0px -1px 0 0 var(--md-sys-color-surface-container);\n    }\n  }\n`\n\nexport const TableCellContent = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 100%;\n  width: 100%;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: var(--border-radius-m);\n  user-select: none;\n  padding-right: 0;\n\n  &.bold {\n    font-weight: 600;\n  }\n\n  &.loading {\n    margin: 0px 5px;\n    padding: 0 !important;\n    width: calc(100% - 10px);\n    height: 28px;\n    margin-top: 3px;\n\n    &:not(.hierarchy) {\n      height: 32px;\n    }\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const ResizedHandler = styled.div`\n  position: absolute;\n  right: -1px;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize !important;\n  background-color: var(--md-sys-color-surface-container-high);\n\n  opacity: 0;\n\n  &.resizing {\n    background-color: var(--md-sys-color-primary);\n    opacity: 1;\n    cursor: col-resize !important;\n  }\n`\n\nexport const ColumnHeader = styled.tr`\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const HeaderCell = styled.th`\n  position: relative;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);\n  display: flex;\n  align-items: center;\n  min-height: fit-content;\n\n  &:hover {\n    .resize-handle {\n      opacity: 1;\n    }\n    \n    .actions {\n      display: flex !important;\n    }\n    \n    .actions .header-menu {\n      display: flex !important;\n    }\n  }\n\n  /* Hide action buttons when resizing */\n  &.resizing {\n    .actions {\n      display: none !important;\n    }\n    cursor: col-resize !important;\n\n    * {\n      cursor: col-resize !important;\n    }\n  }\n\n  /* Styling for the last pinned left column */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* special styles for the left selection column */\n  &.__row_selection__ {\n    min-width: unset;\n    width: 20px !important;\n\n    .actions {\n      display: none;\n    }\n  }\n`\n\nexport const HeaderButtons = styled.div<{ $isOpen: boolean }>`\n  display: none;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    `\n    display: flex !important;\n  `}\n\n  gap: var(--base-gap-small);\n  align-items: center;\n\n  position: absolute;\n  z-index: 10;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: var(--md-sys-color-surface-container-lowest);\n  padding-left: 4px;\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n\n  &:has(.sort-button.visible),\n  &:has(.sort-button.selected) {\n    display: flex !important;\n  }\n\n  .sort-button.visible {\n    display: flex !important;\n  }\n  \n  .sort-button.selected {\n    display: flex !important;\n  }\n\n  .header-menu {\n    display: none;\n  }\n  \n  ${({ $isOpen }) =>\n    $isOpen &&\n    `\n    .header-menu {\n      display: flex !important;\n    }\n  `}\n  \n  .header-menu.open,\n  .header-menu.active {\n    display: flex !important;\n  }\n\n   .resizing & {\n    .sort-button,\n    .header-menu {\n      display: none !important;\n    }\n  }\n`\n\ntype TableCellProps = {\n  $isLastPinned?: boolean\n}\n\nexport const TableCell = styled.td<TableCellProps>`\n  position: relative;\n  box-shadow: ${getDefaultShadow(false)};\n  background-color: var(--md-sys-color-surface-container-low);\n\n  &.${DRAG_HANDLE_CLASS} {\n    // Styles for the button inside the drag handle cell\n    button {\n      opacity: 0; // Default: hidden\n      visibility: hidden;\n      transition: opacity 0.2s ease, visibility 0.2s ease;\n      // Base appearance styles (cursor, border, background, etc.)\n      // are primarily handled by inline styles in RowDragHandleCellContent.tsx.\n      // Add any necessary overrides or defaults here if needed.\n      // For example, ensuring the button itself doesn't interfere with cell styling:\n      background: transparent;\n      border: none;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  --task-background-color: hsl(216 15% 11.5% / 1);\n  &.task {\n    background-color: var(--task-background-color);\n  }\n\n  &.selected-row {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  /* show hover effect only if direct child div does NOT have .readonly and is not selected */\n  &:not(:has(> div.readonly)) {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n\n    &.selected {\n      background-color: var(--md-sys-color-secondary-container);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-secondary-container);\n    position: relative;\n    z-index: 1;\n  }\n\n  /* remove default focus style */\n  &:focus-visible {\n    outline: none;\n  }\n\n  /* Styling for the last pinned left column */\n  /* extra border on the right */\n  &.last-pinned-left {\n    box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n      inset -2px 0 0 0 var(--md-sys-color-surface-container);\n  }\n\n  /* Shadow combinations - single side */\n  &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${bottomShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${leftShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Two sides */\n  &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {\n    box-shadow: ${topShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {\n    box-shadow: ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {\n    box-shadow: ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {\n    box-shadow: ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Three sides */\n  &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {\n    box-shadow: ${topShadow}, ${rightShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {\n    box-shadow: ${topShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {\n    box-shadow: ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* All four sides */\n  &.shadow-top.shadow-right.shadow-bottom.shadow-left {\n    box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow}, ${leftShadow},\n      ${({ $isLastPinned }) => getDefaultShadow($isLastPinned || false)};\n  }\n\n  /* Focus styling */\n  &.focused {\n    position: relative;\n    z-index: 2;\n  }\n\n  /* Use pseudo-element for focused outline to avoid box-shadow conflicts */\n  &.focused::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid var(--md-sys-color-primary);\n    pointer-events: none;\n  }\n\n  /* read only fields are dimmed down for bg and border */\n  &:has(> div.readonly) {\n    &:not(.multiple-selected) {\n      --focused-readonly-color: hsl(212 15% 18% / 1);\n      &.focused {\n        background-color: var(--focused-readonly-color);\n        &::after {\n          border-color: var(--focused-readonly-color);\n        }\n      }\n    }\n\n    /* when focused is readonly and multiple-selected */\n    &.multiple-selected {\n      &.focused::after {\n        display: none;\n      }\n    }\n  }\n\n  /* if there is no cell widget element (no children) then the cell should not be selectable at all */\n  &:not(:has(> div)) {\n    pointer-events: none;\n    cursor: default;\n  }\n\n  &.editing {\n    z-index: 10 !important;\n    /* light border around the outside */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 2px;\n      border: 2px solid var(--md-sys-color-surface-container-low);\n    }\n  }\n\n  /* special styles for selection bar cells */\n  &.__row_selection__ {\n    width: 20px !important;\n    min-width: unset;\n\n    &.selected {\n      background-color: var(--md-sys-color-primary-container) !important;\n      box-shadow: none !important;\n      /* reveal the check mark */\n      [icon='check'] {\n        display: block;\n      }\n    }\n  }\n`\n\nexport const TableHeader = styled.thead`\n  display: grid !important;\n  position: sticky;\n  top: 0;\n  min-height: 34px;\n  z-index: 10;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  .resizing & {\n    cursor: col-resize !important;\n  }\n`\n\nexport const TableWrapper = styled.div`\n  overflow: hidden;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--border-radius-m);\n\n  background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const TableContainer = styled.div`\n  display: flex;\n\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 4px;\n  padding-top: 0;\n\n  &.isLoading {\n    overflow: hidden;\n  }\n\n  /* Hide all header buttons when any column is being resized */\n  &.resizing {\n    .actions {\n      display: none !important;\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  td {\n    height: 34px;\n    padding: 1px 0px;\n    width: 100%;\n  }\n`\n\nexport const LinkColumnHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  .icon {\n    font-size: 18px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["topShadow","rightShadow","bottomShadow","leftShadow","getDefaultShadow","isLastPinned","DRAG_HANDLE_CLASS","TR","styled","TableCellContent","ResizedHandler","ColumnHeader","HeaderCell","HeaderButtons","$isOpen","TableCell","$isLastPinned","TableHeader","TableWrapper","TableContainer","LinkColumnHeader"],"mappings":"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"}