react-restyle-components 0.4.41 → 0.4.42

package/lib/src/core-components/src/components/ag-grid/elements.js

@@ -356,6 +356,7 @@ export const StyledTable = styled.table `
   width: 100%;
   border-collapse: collapse;
   table-layout: ${({ $fixedLayout }) => ($fixedLayout ? 'fixed' : 'auto')};
+  color: ${({ $theme }) => $theme.textColor};
 `;
 // ============================================================================
 // Header
@@ -558,10 +559,11 @@ export const FloatingFilterCell = styled.td `
 // Body
 // ============================================================================
 export const TableBody = styled.tbody `
-  /* Base styles */
+  color: ${({ $theme }) => $theme.textColor};
 `;
 export const TableRow = styled.tr `
   height: ${({ $height }) => ($height ? `${$height}px` : '42px')};
+  color: ${({ $theme }) => $theme.textColor};
   background: ${({ $theme, $selected, $highlighted, $striped, $even, $group }) => {
     if ($selected)
         return $theme.selectedRowBackgroundColor;
@@ -610,6 +612,7 @@ export const TableCell = styled.td `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: ${({ $theme }) => $theme.textColor};
 
   ${({ $width }) => $width && css `width: ${$width}px;`}
 
@@ -643,6 +646,7 @@ export const CellContent = styled.div `
   align-items: center;
   gap: 8px;
   min-height: 20px;
+  color: inherit;
 
   ${({ $wrapText }) => $wrapText &&
     css `
@@ -1151,6 +1155,640 @@ export const SelectionActions = styled.div `
   gap: 8px;
 `;
 // ============================================================================
+// Side Panel (Right Panel with Columns & Filters tabs)
+// ============================================================================
+export const SidePanel = styled.div `
+  width: ${({ $open, $width }) => ($open ? ($width ? `${$width}px` : '280px') : '40px')};
+  min-width: ${({ $open }) => ($open ? '200px' : '40px')};
+  max-width: ${({ $open }) => ($open ? '400px' : '40px')};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border-left: 1px solid ${({ $theme }) => $theme.borderColor};
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease;
+  flex-shrink: 0;
+`;
+export const SidePanelTabs = styled.div `
+  display: flex;
+  flex-direction: ${({ $collapsed }) => ($collapsed ? 'column' : 'row')};
+  border-bottom: ${({ $collapsed }) => ($collapsed ? 'none' : '1px solid')};
+  border-color: ${({ $theme }) => $theme.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const SidePanelTab = styled.button `
+  flex: ${({ $collapsed }) => ($collapsed ? 'none' : '1')};
+  padding: ${({ $collapsed }) => ($collapsed ? '12px 10px' : '10px 12px')};
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border: none;
+  background: ${({ $theme, $active }) => ($active ? $theme.backgroundColor : 'transparent')};
+  color: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.headerTextColor)};
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border-bottom: 2px solid ${({ $theme, $active }) => ($active ? $theme.accentColor : 'transparent')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+    color: ${({ $theme }) => $theme.accentColor};
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+export const SidePanelContent = styled.div `
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+export const SidePanelSearch = styled.div `
+  padding: 10px 12px;
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+
+  input {
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 12px;
+    border: 1px solid ${({ $theme }) => $theme.borderColor};
+    border-radius: 4px;
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
+    outline: none;
+
+    &::placeholder {
+      color: ${({ $theme }) => $theme.headerTextColor};
+      opacity: 0.6;
+    }
+
+    &:focus {
+      border-color: ${({ $theme }) => $theme.accentColor};
+    }
+  }
+`;
+export const SidePanelSection = styled.div `
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const SidePanelSectionHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: ${({ $theme }) => $theme.headerTextColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  cursor: ${({ $collapsible }) => ($collapsible ? 'pointer' : 'default')};
+  user-select: none;
+
+  &:hover {
+    background: ${({ $collapsible, $theme }) => ($collapsible ? $theme.hoverRowBackgroundColor : $theme.headerBackgroundColor)};
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+    transition: transform 0.2s ease;
+  }
+`;
+export const SidePanelColumnItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  padding-left: ${({ $indent }) => ($indent ? `${12 + $indent * 16}px` : '12px')};
+  font-size: 13px;
+  color: ${({ $theme }) => $theme.textColor};
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.1s ease;
+  border-left: 2px solid transparent;
+
+  ${({ $selected, $theme }) => $selected &&
+    css `
+      background: ${$theme.selectedRowBackgroundColor}40;
+      border-left-color: ${$theme.accentColor};
+    `}
+
+  ${({ $dragging, $theme }) => $dragging &&
+    css `
+      opacity: 0.5;
+      background: ${$theme.accentColor}20;
+    `}
+
+  &:hover {
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+  }
+`;
+export const SidePanelDragHandle = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  cursor: grab;
+  opacity: 0.4;
+  flex-shrink: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+export const SidePanelGroupLabel = styled.span `
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+// ============================================================================
+// Row Groups Drop Zone
+// ============================================================================
+export const RowGroupsZone = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  min-height: 36px;
+  background: ${({ $theme, $dragOver }) => ($dragOver ? `${$theme.accentColor}15` : $theme.headerBackgroundColor)};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+  border: ${({ $dragOver, $theme }) => ($dragOver ? `2px dashed ${$theme.accentColor}` : '1px solid transparent')};
+  transition: all 0.15s ease;
+  flex-wrap: wrap;
+
+  ${({ $hasItems }) => !$hasItems &&
+    css `
+      justify-content: center;
+    `}
+`;
+export const RowGroupsLabel = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: ${({ $theme }) => $theme.headerTextColor};
+  white-space: nowrap;
+
+  svg {
+    width: 14px;
+    height: 14px;
+    opacity: 0.6;
+  }
+`;
+export const RowGroupChip = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  background: ${({ $theme }) => $theme.accentColor}15;
+  color: ${({ $theme }) => $theme.accentColor};
+  border-radius: 16px;
+  cursor: default;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    opacity: 0.6;
+    border-radius: 50%;
+    transition: all 0.1s ease;
+
+    &:hover {
+      opacity: 1;
+      background: ${({ $theme }) => $theme.accentColor}30;
+    }
+
+    svg {
+      width: 10px;
+      height: 10px;
+    }
+  }
+`;
+// ============================================================================
+// Values/Aggregation Panel
+// ============================================================================
+export const ValuesPanel = styled.div `
+  min-height: 60px;
+`;
+export const ValueItem = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: ${({ $theme }) => $theme.textColor};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+  }
+`;
+export const ValueItemLabel = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  overflow: hidden;
+
+  svg {
+    width: 12px;
+    height: 12px;
+    opacity: 0.5;
+  }
+`;
+export const ValueItemRemove = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.5;
+  border-radius: 50%;
+
+  &:hover {
+    opacity: 1;
+    background: ${({ $theme }) => $theme.borderColor};
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+// ============================================================================
+// Pivot Mode Toggle
+// ============================================================================
+export const PivotModeToggle = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const PivotModeLabel = styled.span `
+  font-size: 12px;
+  font-weight: 500;
+  color: ${({ $theme }) => $theme.textColor};
+`;
+export const ToggleSwitch = styled.label `
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  cursor: pointer;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  span {
+    position: absolute;
+    inset: 0;
+    background: ${({ $theme }) => $theme.borderColor};
+    border-radius: 20px;
+    transition: all 0.2s ease;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      left: 3px;
+      bottom: 3px;
+      background: white;
+      border-radius: 50%;
+      transition: transform 0.2s ease;
+    }
+  }
+
+  input:checked + span {
+    background: ${({ $theme }) => $theme.accentColor};
+  }
+
+  input:checked + span::before {
+    transform: translateX(16px);
+  }
+`;
+// ============================================================================
+// Column Header Menu (Three Dot Menu)
+// ============================================================================
+export const HeaderMenuButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: ${({ $active, $theme }) => ($active ? $theme.hoverRowBackgroundColor : 'transparent')};
+  border-radius: 3px;
+  cursor: pointer;
+  opacity: ${({ $active }) => ($active ? 1 : 0)};
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    opacity: 1;
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    color: ${({ $theme }) => $theme.headerTextColor};
+  }
+`;
+export const ColumnMenuPopup = styled.div `
+  position: fixed;
+  top: ${({ $y }) => $y}px;
+  left: ${({ $x }) => $x}px;
+  min-width: 200px;
+  max-width: 280px;
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  overflow: hidden;
+  animation: ${fadeIn} 0.15s ease;
+`;
+export const ColumnMenuSection = styled.div `
+  padding: 4px 0;
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+export const ColumnMenuItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: ${({ $theme, $disabled }) => ($disabled ? $theme.headerTextColor : $theme.textColor)};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+  transition: background-color 0.1s ease;
+
+  &:hover {
+    background: ${({ $disabled, $theme }) => ($disabled ? 'transparent' : $theme.hoverRowBackgroundColor)};
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    opacity: 0.6;
+    flex-shrink: 0;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  ${({ $hasSubmenu }) => $hasSubmenu &&
+    css `
+      &::after {
+        content: '›';
+        margin-left: auto;
+        font-size: 16px;
+        opacity: 0.5;
+      }
+    `}
+`;
+export const ColumnMenuSubmenu = styled.div `
+  position: absolute;
+  top: 0;
+  left: 100%;
+  min-width: 150px;
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+`;
+// ============================================================================
+// Set Filter (Filter by unique values)
+// ============================================================================
+export const SetFilterContainer = styled.div `
+  min-width: 200px;
+  max-width: 300px;
+  max-height: 400px;
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+export const SetFilterHeader = styled.div `
+  padding: 8px 12px;
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+  font-size: 12px;
+  font-weight: 600;
+  color: ${({ $theme }) => $theme.headerTextColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const SetFilterSearch = styled.div `
+  padding: 8px 10px;
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+
+  input {
+    width: 100%;
+    padding: 6px 10px;
+    font-size: 12px;
+    border: 1px solid ${({ $theme }) => $theme.borderColor};
+    border-radius: 4px;
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
+    outline: none;
+
+    &:focus {
+      border-color: ${({ $theme }) => $theme.accentColor};
+    }
+
+    &::placeholder {
+      color: ${({ $theme }) => $theme.headerTextColor};
+      opacity: 0.6;
+    }
+  }
+`;
+export const SetFilterList = styled.div `
+  flex: 1;
+  overflow-y: auto;
+  max-height: 280px;
+`;
+export const SetFilterItem = styled.label `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: ${({ $theme }) => $theme.textColor};
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  border-bottom: ${({ $selectAll, $theme }) => ($selectAll ? `1px solid ${$theme.borderColor}` : 'none')};
+  font-weight: ${({ $selectAll }) => ($selectAll ? '500' : 'normal')};
+
+  &:hover {
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+  }
+
+  input {
+    margin: 0;
+    accent-color: ${({ $theme }) => $theme.accentColor};
+  }
+`;
+export const SetFilterActions = styled.div `
+  display: flex;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid ${({ $theme }) => $theme.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const SetFilterButton = styled.button `
+  flex: 1;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid ${({ $theme, $primary }) => ($primary ? $theme.accentColor : $theme.borderColor)};
+  border-radius: 4px;
+  background: ${({ $theme, $primary }) => ($primary ? $theme.accentColor : $theme.backgroundColor)};
+  color: ${({ $primary, $theme }) => ($primary ? '#ffffff' : $theme.textColor)};
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+`;
+// ============================================================================
+// Filter Panel in Side Bar
+// ============================================================================
+export const FilterPanelColumn = styled.div `
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const FilterPanelHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: ${({ $theme, $hasFilter }) => ($hasFilter ? $theme.accentColor : $theme.textColor)};
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+
+  &:hover {
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+    transition: transform 0.2s ease;
+    transform: ${({ $expanded }) => ($expanded ? 'rotate(90deg)' : 'rotate(0deg)')};
+    opacity: 0.5;
+  }
+`;
+export const FilterPanelContent = styled.div `
+  display: ${({ $expanded }) => ($expanded ? 'block' : 'none')};
+  padding: 8px 12px;
+  background: ${({ $theme }) => $theme.headerBackgroundColor}50;
+`;
+// ============================================================================
+// Grid Container with Side Panel Layout
+// ============================================================================
+export const GridLayout = styled.div `
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+export const GridMainArea = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+`;
+// ============================================================================
+// Column Visibility Dropdown
+// ============================================================================
+export const ColumnVisibilityDropdown = styled.div `
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 220px;
+  max-height: 400px;
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  animation: ${fadeIn} 0.15s ease;
+`;
+export const ColumnVisibilityList = styled.div `
+  flex: 1;
+  overflow-y: auto;
+`;
+export const ColumnVisibilityItem = styled.label `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: ${({ $theme }) => $theme.textColor};
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+
+  &:hover {
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+  }
+
+  input {
+    margin: 0;
+    accent-color: ${({ $theme }) => $theme.accentColor};
+  }
+`;
+// ============================================================================
 // Export all themes
 // ============================================================================
 export { themes };