@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/components/Row/Row.tsx

@@ -0,0 +1,377 @@
+
+import React from 'react';
+import { Cell } from '../Cell/Cell';
+import { Checkbox } from '../ui/Checkbox';
+import { ExpandIcon } from '../ui/ExpandIcon';
+import { DragHandleIcon } from '../ui/DragHandleIcon';
+import { DetailPanel } from '../DetailPanel/DetailPanel';
+import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight } from '../../types';
+import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
+import { isColumnPinned, calculatePinnedPositions, isRowPinned } from '../../utils/pinning';
+
+
+export interface RowProps<R extends GridRowModel = GridRowModel> {
+    row: R;
+    columns: GridColDef<R>[];
+    rowIndex: number;
+    isSelected?: boolean;
+    checkboxSelection?: boolean;
+    onRowClick?: (params: GridRowParams<R>) => void;
+    onCellClick?: (params: GridCellParams<R>) => void;
+    onSelectionChange?: (rowId: GridRowId, isSelected: boolean) => void;
+    columnWidths?: Record<string, number>;
+    pinnedColumns?: GridColumnPinning;
+    pinnedRows?: GridRowPinning;
+
+    hasDetailPanel?: boolean;
+    isDetailPanelExpanded?: boolean;
+    onDetailPanelToggle?: (rowId: GridRowId) => void;
+    detailPanelContent?: React.ReactNode;
+    detailPanelHeight?: GridDetailPanelHeight;
+
+    pinCheckboxColumn?: boolean;
+    pinExpandColumn?: boolean;
+
+    rowReordering?: boolean;
+    onDragStart?: (id: GridRowId) => (event: React.DragEvent) => void;
+    onDragOver?: (id: GridRowId) => (event: React.DragEvent) => void;
+    onDragEnd?: () => void;
+    onDrop?: (targetId: GridRowId) => (event: React.DragEvent) => void;
+    isDragging?: boolean;
+    isDragOver?: boolean;
+
+    editingCell?: { id: GridRowId; field: string; value: any; } | null;
+    onEditStart?: (params: { id: GridRowId, field: string, value: any }) => void;
+    onEditStop?: (params?: { cancel?: boolean }) => void;
+    onEditCellValueChange?: (params: { id: GridRowId, field: string, value: any }) => void;
+
+    focusedCellField?: string | null;
+    isFocusVisible?: boolean;
+
+    colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
+    rowSpanningCaches?: RowSpanningCaches;
+    rowHeight?: number;
+}
+
+export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
+    const {
+        row,
+        columns,
+        rowIndex,
+        isSelected = false,
+        checkboxSelection = false,
+        onRowClick,
+        onCellClick,
+        onSelectionChange,
+        columnWidths = {},
+        pinnedColumns,
+        pinnedRows,
+        hasDetailPanel = false,
+        isDetailPanelExpanded = false,
+        onDetailPanelToggle,
+        detailPanelContent,
+        detailPanelHeight = 200,
+        pinCheckboxColumn = true,
+        pinExpandColumn = true,
+        rowReordering = false,
+        onDragStart,
+        onDragOver,
+        onDragEnd,
+        onDrop,
+        isDragging,
+        isDragOver,
+
+        editingCell,
+        onEditStart,
+        onEditStop,
+        onEditCellValueChange,
+
+        focusedCellField,
+        isFocusVisible,
+
+        colspanMap,
+        rowSpanningCaches,
+        rowHeight = 52
+    } = props;
+
+    const expandCellRef = React.useRef<HTMLDivElement>(null);
+    const checkboxCellRef = React.useRef<HTMLDivElement>(null);
+
+    // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
+    if ((row as any)._isSkeleton) {
+        // Render shimmer placeholders — one per visible column, matching row height
+        const cellCount = Math.max(columns.length, 5);
+        return (
+            <div
+                className="ogx__row ogx__row--skeleton"
+                role="row"
+                aria-hidden="true"
+                style={{ height: rowHeight, minHeight: rowHeight }}
+            >
+                {Array.from({ length: cellCount }).map((_, i) => (
+                    <div key={i} className="ogx__skeleton-cell">
+                        <div className="ogx__skeleton-bar" />
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    React.useLayoutEffect(() => {
+        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
+            expandCellRef.current.focus({ preventScroll: true });
+        }
+        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
+            checkboxCellRef.current.focus({ preventScroll: true });
+        }
+    }, [focusedCellField]);
+
+    const handleRowClick = (event: React.MouseEvent) => {
+
+        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
+            return;
+        }
+        onRowClick?.({ row, id: row.id, rowIndex });
+    };
+
+    const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        event.stopPropagation();
+        onSelectionChange?.(row.id, event.target.checked);
+    };
+
+    const handleDetailPanelToggle = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        onDetailPanelToggle?.(row.id);
+    };
+
+    const pinnedPositions = React.useMemo(() => {
+        return calculatePinnedPositions(
+            columns,
+            columnWidths,
+            pinnedColumns,
+            checkboxSelection,
+            pinCheckboxColumn,
+            hasDetailPanel,
+            pinExpandColumn,
+            rowReordering
+        );
+    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
+
+    const rowPinnedPosition = isRowPinned(row.id, pinnedRows);
+    const isRowPinnedTop = rowPinnedPosition === 'top';
+    const isRowPinnedBottom = rowPinnedPosition === 'bottom';
+
+    const isGroupRow = (row as any)._hasChildren === true;
+
+    const handleCellEditStart = React.useCallback((field: string, value: any) => {
+        if (!isGroupRow) {
+            onEditStart?.({ id: row.id, field, value });
+        }
+    }, [isGroupRow, row.id, onEditStart]);
+
+    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
+        onEditCellValueChange?.({ id: row.id, field, value: newValue });
+    }, [onEditCellValueChange, row.id]);
+
+    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
+        onEditStop?.({ cancel });
+    }, [onEditStop]);
+
+    const classNames = [
+        'ogx__row',
+        isSelected && 'ogx__row--selected',
+        rowIndex % 2 === 0 && 'ogx__row--even',
+        rowIndex % 2 === 1 && 'ogx__row--odd',
+        isRowPinnedTop && 'ogx__row--pinned-top',
+        isRowPinnedBottom && 'ogx__row--pinned-bottom',
+        isDragging && 'ogx__row--dragging',
+        isDragOver && 'ogx__row--drag-over',
+        isGroupRow && 'ogx__row--group'
+    ].filter(Boolean).join(' ');
+
+    return (
+        <>
+            <div
+                className={classNames}
+                onClick={handleRowClick}
+                role="row"
+                aria-rowindex={rowIndex + 1}
+                aria-selected={isSelected}
+                data-rowindex={rowIndex}
+                onDragOver={onDragOver ? onDragOver(row.id) : undefined}
+                onDrop={onDrop ? onDrop(row.id) : undefined}
+                style={{
+                    maxHeight: `${rowHeight}px`,
+                    minHeight: `${rowHeight}px`,
+                    '--height': `${rowHeight}px`,
+                    '--border-width': '1px'
+                } as React.CSSProperties}
+            >
+                { }
+                {rowReordering && (
+                    <div
+                        className="ogx__cell ogx__cell--drag-handle"
+                        role="gridcell"
+                        aria-label="Drag to reorder row"
+                        style={{
+                            position: 'sticky',
+                            left: 0,
+                            zIndex: 4
+                        }}
+                        draggable={true}
+                        onDragStart={onDragStart ? onDragStart(row.id) : undefined}
+                        onDragEnd={onDragEnd}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <DragHandleIcon />
+                    </div>
+                )}
+
+                { }
+                {hasDetailPanel && (
+                    <div
+                        className={`ogx__cell ogx__cell--expand ${pinExpandColumn ? 'ogx__cell--pinned-left' : ''
+                            } ${focusedCellField === '__expand_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__expand_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
+                            }`}
+                        role="gridcell"
+                        aria-label={isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details'}
+                        aria-expanded={isDetailPanelExpanded}
+                        style={{
+                            position: pinExpandColumn ? 'sticky' : undefined,
+                            left: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
+                            zIndex: pinExpandColumn ? 5 : undefined
+                        }}
+                        ref={expandCellRef}
+                        tabIndex={-1}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onCellClick?.({
+                                row,
+                                field: '__expand_col__',
+                                value: isDetailPanelExpanded,
+                                colDef: { field: '__expand_col__', width: 48 } as any,
+                                rowIndex,
+                                colIndex: -1
+                            });
+                        }}
+                    >
+                        <ExpandIcon
+                            isExpanded={isDetailPanelExpanded}
+                            onClick={handleDetailPanelToggle}
+                            variant="plus-minus"
+                        />
+                    </div>
+                )}
+
+                { }
+                {checkboxSelection && (
+                    <div
+                        className={`ogx__cell ogx__cell--checkbox ${pinCheckboxColumn ? 'ogx__cell--pinned-left' : ''
+                            } ${focusedCellField === '__checkbox_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__checkbox_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
+                            }`}
+                        role="gridcell"
+                        style={{
+                            position: pinCheckboxColumn ? 'sticky' : undefined,
+                            left: pinCheckboxColumn ? ((rowReordering ? 48 : 0) + (hasDetailPanel && pinExpandColumn ? 48 : 0)) : undefined,
+                            zIndex: pinCheckboxColumn ? 11 : undefined
+                        }}
+                        ref={checkboxCellRef}
+                        tabIndex={-1}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onCellClick?.({
+                                row,
+                                field: '__checkbox_col__',
+                                value: isSelected,
+                                colDef: { field: '__checkbox_col__', width: 48 } as any,
+                                rowIndex,
+                                colIndex: -1
+                            });
+                        }}
+                    >
+                        <Checkbox
+                            id={`ogx-select-row-${row.id}`}
+                            name={`ogx-select-row-${row.id}`}
+                            checked={isSelected}
+                            onChange={handleCheckboxChange}
+                            onClick={(e) => e.stopPropagation()}
+                            aria-label={isSelected ? `Deselect row ${row.id}` : `Select row ${row.id}`}
+                            tabIndex={-1}
+                            onMouseDown={(e) => e.preventDefault()}
+                        />
+                    </div>
+                )}
+
+                { }
+                {columns.map((colDef, colIndex) => {
+                    if ((colDef as any).isSpacer) {
+                        return (
+                            <div
+                                key={colDef.field}
+                                style={{ width: colDef.width, minWidth: colDef.width, flexShrink: 0 }}
+                                aria-hidden="true"
+                            />
+                        );
+                    }
+                    const value = colDef.valueGetter
+                        ? colDef.valueGetter({ row, field: colDef.field, value: row[colDef.field] })
+                        : row[colDef.field];
+
+                    const effectiveWidth = columnWidths[colDef.field] ?? colDef.width;
+
+                    const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
+                    const pinnedOffset = pinnedPosition ? pinnedPositions[colDef.field] : undefined;
+
+                    const isEditing = editingCell?.id === row.id && editingCell?.field === colDef.field;
+
+                    const cellValue = isEditing ? editingCell?.value : value;
+
+                    const colSpanInfo = colspanMap?.get(row.id)?.[colDef.field];
+                    const rowSpan = rowSpanningCaches?.spannedCells[row.id]?.[colDef.field];
+                    const isHiddenByRowSpan = rowSpanningCaches?.hiddenCells[row.id]?.[colDef.field] || false;
+
+                    return (
+                        <Cell
+                            key={colDef.field}
+                            value={cellValue}
+                            row={row}
+                            colDef={colDef}
+                            rowIndex={rowIndex}
+                            colIndex={colIndex}
+                            isSelected={isSelected}
+                            onCellClick={onCellClick}
+                            width={effectiveWidth}
+                            pinnedPosition={pinnedPosition}
+                            pinnedOffset={pinnedOffset}
+
+                            isFocused={focusedCellField === colDef.field}
+                            isFocusVisible={isFocusVisible}
+
+                            isEditable={colDef.editable}
+                            isEditing={isEditing}
+                            onCellEditStart={handleCellEditStart}
+                            onEditStop={handleEditStopWrapper}
+                            onCellValueChange={handleCellValueChange}
+
+                            colSpanInfo={colSpanInfo}
+                            rowSpan={rowSpan}
+                            isHiddenByRowSpan={isHiddenByRowSpan}
+                        />
+                    );
+                })}
+            </div>
+
+            { }
+            {hasDetailPanel && (
+                <DetailPanel
+                    row={row}
+                    rowId={row.id}
+                    rowIndex={rowIndex}
+                    content={detailPanelContent}
+                    height={detailPanelHeight}
+                    isExpanded={isDetailPanelExpanded}
+                />
+            )}
+        </>
+    );
+}

package/lib/components/Skeleton/Skeleton.css

@@ -0,0 +1,55 @@
+.ogx__skeleton {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ogx__skeleton-row {
+  display: flex;
+  align-items: center;
+  min-height: var(--ogx-row-height);
+  border-bottom: 1px solid var(--ogx-grid-border-color);
+  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
+  background-color: var(--ogx-grid-background);
+}
+.ogx__skeleton-cell {
+  flex: 1;
+  margin-right: 16px;
+}
+.ogx__skeleton-cell:last-child {
+  margin-right: 0;
+}
+.ogx__skeleton-content {
+  height: 16px;
+  background: linear-gradient(
+    90deg,
+    var(--ogx-skeleton-base) 0%,
+    var(--ogx-skeleton-highlight) 50%,
+    var(--ogx-skeleton-base) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: 4px;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+.ogx__skeleton-cell:nth-child(1) .ogx__skeleton-content {
+  width: 60%;
+}
+.ogx__skeleton-cell:nth-child(2) .ogx__skeleton-content {
+  width: 80%;
+}
+.ogx__skeleton-cell:nth-child(3) .ogx__skeleton-content {
+  width: 70%;
+}
+.ogx__skeleton-cell:nth-child(4) .ogx__skeleton-content {
+  width: 90%;
+}
+.ogx__skeleton-cell:nth-child(5) .ogx__skeleton-content {
+  width: 75%;
+}
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

package/lib/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,22 @@
+
+
+export interface SkeletonProps {
+    rows?: number;
+    columns?: number;
+}
+
+export function Skeleton({ rows = 5, columns = 5 }: SkeletonProps) {
+    return (
+        <div className="ogx__skeleton">
+            {Array.from({ length: rows }).map((_, rowIndex) => (
+                <div key={rowIndex} className="ogx__skeleton-row">
+                    {Array.from({ length: columns }).map((_, colIndex) => (
+                        <div key={colIndex} className="ogx__skeleton-cell">
+                            <div className="ogx__skeleton-content" />
+                        </div>
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+}

package/lib/components/SkeletonRow/SkeletonRow.css

@@ -0,0 +1,32 @@
+.ogx__skeleton-row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--ogx-grid-border-color);
+  background-color: var(--ogx-grid-background);
+}
+.ogx__skeleton-cell {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.ogx-skeleton-box {
+  background: linear-gradient(
+    90deg,
+    var(--ogx-skeleton-base) 0%,
+    var(--ogx-skeleton-highlight) 50%,
+    var(--ogx-skeleton-base) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

package/lib/components/SkeletonRow/SkeletonRow.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+
+interface SkeletonRowProps {
+    columns: any[];
+    rowHeight: number;
+    checkboxSelection?: boolean;
+    hasDetailPanel?: boolean;
+    rowReordering?: boolean;
+}
+
+export const SkeletonRow: React.FC<SkeletonRowProps> = ({
+    columns,
+    rowHeight,
+    checkboxSelection = false,
+    hasDetailPanel = false,
+    rowReordering = false
+}) => {
+    return (
+        <div
+            className="ogx__row ogx__skeleton-row"
+            style={{ height: rowHeight }}
+            role="row"
+        >
+            { }
+            {checkboxSelection && (
+                <div
+                    className="ogx__cell ogx__skeleton-cell"
+                    style={{ width: 48, minWidth: 48 }}
+                >
+                    <div className="ogx-skeleton-box" style={{ width: 18, height: 18, borderRadius: 2 }} />
+                </div>
+            )}
+
+            { }
+            {hasDetailPanel && (
+                <div
+                    className="ogx__cell ogx__skeleton-cell"
+                    style={{ width: 48, minWidth: 48 }}
+                >
+                    <div className="ogx-skeleton-box" style={{ width: 18, height: 18, borderRadius: 2 }} />
+                </div>
+            )}
+
+            { }
+            {rowReordering && (
+                <div
+                    className="ogx__cell ogx__skeleton-cell"
+                    style={{ width: 48, minWidth: 48 }}
+                >
+                    <div className="ogx-skeleton-box" style={{ width: 18, height: 18, borderRadius: 2 }} />
+                </div>
+            )}
+
+            { }
+            {columns.map((col, index) => {
+                const width = col.width || 150;
+                const skeletonWidth = Math.min(width * 0.7, width - 20);
+
+                return (
+                    <div
+                        key={col.field || index}
+                        className="ogx__cell ogx__skeleton-cell"
+                        style={{
+                            width,
+                            minWidth: col.minWidth,
+                            maxWidth: col.maxWidth,
+                            left: col.left,
+                            right: col.right,
+                            position: col.isSpacer ? 'relative' : (col.pinned ? 'sticky' : 'relative'),
+                            zIndex: col.zIndex
+                        }}
+                    >
+                        {!col.isSpacer && (
+                            <div
+                                className="ogx-skeleton-box"
+                                style={{
+                                    width: skeletonWidth,
+                                    height: 16,
+                                    borderRadius: 4
+                                }}
+                            />
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/lib/components/SkeletonRow/index.ts

@@ -0,0 +1 @@
+export { SkeletonRow } from './SkeletonRow';

package/lib/components/Toolbar/GlobalSearch.css

@@ -0,0 +1,113 @@
+/* ─── Container ─────────────────────────────────────────────────────────────
+   Always in normal flex flow so the toolbar spacer absorbs expansion,
+   keeping every icon pinned to the right edge.
+   ─────────────────────────────────────────────────────────────────────────── */
+.ogx-global-search {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 8px;
+    border: 1.5px solid transparent;
+    background: transparent;
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+    cursor: pointer;
+    overflow: hidden;          /* clips invisible input while collapsed    */
+    /* Animate width + visual props — NO position changes, so focus is stable */
+    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+                background  0.2s ease,
+                border-color 0.2s ease,
+                box-shadow  0.2s ease;
+}
+
+/* hover feedback only when collapsed */
+.ogx-global-search:not(.ogx-global-search--expanded):hover {
+    background: var(--ogx-grid-header-hover-background, #f1f5f9);
+}
+
+/* ─── Expanded state ────────────────────────────────────────────────────────
+   Width grows leftwards into the spacer; icons stay where they are.
+   overflow must stay `hidden` so the blue border-radius is respected.
+   ─────────────────────────────────────────────────────────────────────────── */
+.ogx-global-search--expanded {
+    width: 220px;
+    border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary, #3b82f6));
+    background: var(--ogx-toolbar-input-bg, var(--ogx-grid-background, #fff));
+    box-shadow: var(--ogx-toolbar-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, 0.12));
+    cursor: default;
+    overflow: hidden;
+}
+
+/* ─── Icon wrapper ────────────────────────────────────────────────────────── */
+.ogx-global-search__icon-wrapper {
+    /* Fixed 34×34 square — never shrinks so the icon is always centred       */
+    flex: 0 0 34px;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ogx-grid-header-text, #64748b);
+    pointer-events: none;
+    flex-shrink: 0;
+    transition: color 0.15s;
+    /* No border, no background — the unit looks seamless                      */
+}
+.ogx-global-search--expanded .ogx-global-search__icon-wrapper {
+    color: var(--ogx-color-primary, #3b82f6);
+}
+
+/* Focus-within: tint icon blue whenever the input is focused                 */
+.ogx-global-search:focus-within .ogx-global-search__icon-wrapper {
+    color: var(--ogx-color-primary, #3b82f6);
+}
+
+/* ─── Input ───────────────────────────────────────────────────────────────── */
+.ogx-global-search__input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    padding: 0 28px 0 0;      /* right pad for clear button, NO left border  */
+    border: none;
+    background: transparent;
+    font-family: var(--ogx-font-family, system-ui, sans-serif);
+    font-size: var(--ogx-font-size-sm, 13px);
+    color: var(--ogx-grid-row-text, #1e293b);
+    outline: none;
+    /* Hide with opacity, not display:none, so focus events still fire         */
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s ease;
+}
+.ogx-global-search--expanded .ogx-global-search__input {
+    opacity: 1;
+    pointer-events: auto;
+}
+.ogx-global-search__input::placeholder {
+    color: var(--ogx-color-gray-400, #94a3b8);
+    font-size: var(--ogx-font-size-sm, 13px);
+}
+
+/* ─── Clear button ────────────────────────────────────────────────────────── */
+.ogx-global-search__clear {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--ogx-grid-header-text, #94a3b8);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    line-height: 0;
+    transition: background 0.15s, color 0.15s;
+}
+.ogx-global-search__clear:hover {
+    background: rgba(239, 68, 68, 0.08);
+    color: #ef4444;
+}