@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/filter-modal.tsx

@@ -4,14 +4,15 @@ import { useEffect, useRef, useState } from 'react';
 import type { DateRange } from 'react-day-picker';
 import { cn } from '../../utils/cn';
 import { Filter02Icon } from '../icons-v2-generated/sort-and-filter/filter-02-icon';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
+import type { DataTableFilters } from './data-table/types';
 import { DateFilterPanel, type DateFilterResult } from './date-picker';
 import { FilterCheckboxItem } from './filter-checkbox-item';
+import { LOADING_NOOP, LoadingItems, LoadingScope } from './loading-scope';
 import { ModalV2, ModalV2Content, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2';
 import { ScrollFadeOverlay, useScrollFade } from './scroll-fade';
 import { SortColumnItem, type SortConfig, type SortDirection } from './sort-column-item';
-import type { TableFilters } from './table/types';
 import { TagKeyValueFilter, type TagKeyConfig } from './tag-key-value-filter';
 
 export interface FilterModalOption {
@@ -31,8 +32,8 @@ export interface FilterModalProps {
   onClose: () => void;
   title?: string;
   filterGroups: FilterGroup[];
-  onFilterChange: (filters: TableFilters) => void;
-  currentFilters?: TableFilters;
+  onFilterChange: (filters: DataTableFilters) => void;
+  currentFilters?: DataTableFilters;
   resetButtonText?: string;
   applyButtonText?: string;
   className?: string;
@@ -73,6 +74,12 @@ export interface FilterModalProps {
   emptyStateDescription?: string;
 }
 
+/** Filter groups a loading modal draws (its groups are read with the facets): a typical two. */
+const FILTER_MODAL_SKELETON_GROUPS = 2;
+
+/** Options each loading group draws: a typical three (a facet's option count is the data's). */
+const FILTER_MODAL_SKELETON_OPTIONS = 3;
+
 export function FilterModal({
   isOpen,
   onClose,
@@ -95,7 +102,7 @@ export function FilterModal({
   emptyStateTitle = 'No filters available',
   emptyStateDescription = 'There are no filter options to display at the moment',
 }: FilterModalProps) {
-  const [selectedFilters, setSelectedFilters] = useState<TableFilters>(() => {
+  const [selectedFilters, setSelectedFilters] = useState<DataTableFilters>(() => {
     return { ...currentFilters };
   });
   const [pendingTags, setPendingTags] = useState<string[]>(selectedTags ?? []);
@@ -130,7 +137,7 @@ export function FilterModal({
   }, [isOpen, seedKey]);
 
   const handleFilterToggle = (groupId: string, optionId: string, checked: boolean) => {
-    setSelectedFilters((prev: TableFilters) => {
+    setSelectedFilters((prev: DataTableFilters) => {
       const current = prev[groupId] || [];
       const updated = checked
         ? current.includes(optionId)
@@ -195,27 +202,7 @@ export function FilterModal({
             onScroll={updateFade}
             className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto md:py-3"
           >
-            {isLoading ? (
-              <>
-                {[0, 1].map(group => (
-                  <div key={group} className="flex flex-col gap-1">
-                    <UnifiedSkeleton className="h-5 w-24" />
-                    <div className="overflow-hidden rounded-md border border-ods-border">
-                      {[0, 1, 2].map(row => (
-                        <div
-                          key={row}
-                          className="flex items-center gap-3 border-b border-ods-border bg-ods-card px-4 py-3 last:border-b-0"
-                        >
-                          <UnifiedSkeleton className="h-6 w-6 shrink-0 rounded-[6px]" />
-                          <UnifiedSkeleton className="h-4 max-w-[60%] flex-1" />
-                          <UnifiedSkeleton className="h-4 w-10 shrink-0" />
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </>
-            ) : isEmpty ? (
+            {isEmpty ? (
               <div className="flex h-[240px] flex-col items-center justify-center gap-6 p-6">
                 <Filter02Icon className="text-ods-text-secondary" size={24} />
                 <div className="flex flex-col items-center text-center text-ods-text-secondary">
@@ -224,7 +211,10 @@ export function FilterModal({
                 </div>
               </div>
             ) : (
-              <>
+              // ONE tree for both forms: while the facets are read (`isLoading`) the modal is its own loading state in a
+              // scope (inert): the sort columns and the date filter the page configures are drawn real, the read filter
+              // groups as their loading rows.
+              <LoadingScope active={isLoading} className="contents">
                 {/* Sort columns */}
                 {sortConfig && sortConfig.columns.length > 0 && (
                   <div className="flex flex-col gap-1">
@@ -243,30 +233,55 @@ export function FilterModal({
                   </div>
                 )}
 
-                {/* Filter groups. A group with no options is skipped, not drawn as an
+                {isLoading ? (
+                  <LoadingItems count={FILTER_MODAL_SKELETON_GROUPS}>
+                    {() => (
+                      <div data-loading-item className="flex flex-col gap-1">
+                        <TextLineSkeleton type="h5" className="w-24" />
+                        <div className="overflow-hidden rounded-md border border-ods-border">
+                          <LoadingItems count={FILTER_MODAL_SKELETON_OPTIONS}>
+                            {() => (
+                              <FilterCheckboxItem
+                                data-loading-item
+                                label=""
+                                count={0}
+                                checked={false}
+                                onChange={LOADING_NOOP}
+                              />
+                            )}
+                          </LoadingItems>
+                        </div>
+                      </div>
+                    )}
+                  </LoadingItems>
+                ) : (
+                  <>
+                    {/* Filter groups. A group with no options is skipped, not drawn as an
             empty box: same rule the column funnels follow — a control that
             cannot be used is worse than no control. */}
-                {filterGroups.map(group => {
-                  if (group.options.length === 0) return null;
-                  const groupSelection = selectedFilters[group.id] || [];
-                  return (
-                    <div key={group.id} className="flex flex-col gap-1">
-                      <span className="text-ods-text-secondary text-h5">{group.title}</span>
-                      <div className="overflow-hidden rounded-md border border-ods-border">
-                        {group.options.map(option => (
-                          <FilterCheckboxItem
-                            key={option.id}
-                            label={option.label}
-                            count={option.count}
-                            checked={groupSelection.includes(option.id)}
-                            onChange={checked => handleFilterToggle(group.id, option.id, checked)}
-                          />
-                        ))}
-                      </div>
-                    </div>
-                  );
-                })}
-
+                    {filterGroups.map(group => {
+                      if (group.options.length === 0) return null;
+                      const groupSelection = selectedFilters[group.id] || [];
+                      return (
+                        <div key={group.id} data-loading-item className="flex flex-col gap-1">
+                          <span className="text-ods-text-secondary text-h5">{group.title}</span>
+                          <div className="overflow-hidden rounded-md border border-ods-border">
+                            {group.options.map(option => (
+                              <FilterCheckboxItem
+                                key={option.id}
+                                data-loading-item
+                                label={option.label}
+                                count={option.count}
+                                checked={groupSelection.includes(option.id)}
+                                onChange={checked => handleFilterToggle(group.id, option.id, checked)}
+                              />
+                            ))}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </>
+                )}
                 {/* Tag key:value filter */}
                 {tagFilterKeys && tagFilterKeys.length > 0 && onTagsChange && (
                   <TagKeyValueFilter
@@ -292,7 +307,7 @@ export function FilterModal({
                     />
                   </div>
                 )}
-              </>
+              </LoadingScope>
             )}
           </div>
 

package/src/components/ui/filter-pill-row.tsx

@@ -109,16 +109,19 @@ export function FilterPillRow({
   );
 }
 
+/** Pill boxes a loading row draws when the page states no options: a typical facet. */
+const FILTER_PILL_ROW_SKELETON_PILLS = 5;
+
 /**
  * The loading state of a SERVED pill row (facets that arrive with the data):
  * the same row shell, its label real, the `options` it states as real pills,
  * else `pills` boxes of a pill's size, so the filters never pop in under the
  * content. With `count` the count line is a bar.
  */
-export function FilterPillRowSkeleton({
+function FilterPillRowSkeleton({
   label,
   options,
-  pills = 5,
+  pills = FILTER_PILL_ROW_SKELETON_PILLS,
   count = false,
 }: {
   label: string;

package/src/components/ui/hidden-tags-popup.tsx

@@ -3,6 +3,7 @@
 import { type CSSProperties, type ForwardedRef, type ReactNode, forwardRef } from 'react';
 import { cn } from '../../utils/cn';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { Button } from './button';
 
 export interface HiddenTagItem {
   label: ReactNode;
@@ -49,17 +50,19 @@ export const HiddenTagsPopup = forwardRef(function HiddenTagsPopupImpl(
             {item.label}
           </span>
           {!disabled && onRemove && (
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
               type="button"
               onClick={e => {
                 e.stopPropagation();
                 onRemove(item.value);
               }}
-              className="shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary"
+              className="shrink-0"
               aria-label={`Remove ${String(item.label)}`}
             >
-              <XmarkCircleIcon size={20} />
-            </button>
+              <XmarkCircleIcon className="text-ods-text-secondary" />
+            </Button>
           )}
         </div>
       ))}

package/src/components/ui/hover-dropdown.tsx

@@ -4,6 +4,7 @@ import type React from 'react';
 import { useState, useRef, useCallback } from 'react';
 import Link from '../../embed-shims/next-link';
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
+import { Button } from './button';
 
 // =============================================================================
 // Types
@@ -209,7 +210,10 @@ export function HoverDropdown({
             // inside it — the local does.
             const secondaryAction = item.secondaryAction;
             const secondary = secondaryAction ? (
-              <button
+              <Button
+                variant="transparent"
+                size="icon-sm"
+                type="button"
                 onClick={e => {
                   e.preventDefault();
                   e.stopPropagation();
@@ -217,10 +221,10 @@ export function HoverDropdown({
                 }}
                 aria-label={secondaryAction.label}
                 title={secondaryAction.label}
-                className="inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-ods-text-secondary opacity-60 transition-opacity hover:bg-ods-accent/15 hover:text-ods-text-primary hover:opacity-100 [&_svg]:size-3"
+                className="shrink-0"
               >
                 {secondaryAction.icon}
-              </button>
+              </Button>
             ) : null;
 
             if (item.href) {
@@ -257,9 +261,9 @@ export function HoverDropdown({
 
             return (
               <div key={i} className={rowClass}>
-                <button onClick={item.onClick} className={primaryClass}>
+                <Button variant="row" type="button" onClick={item.onClick} className="min-w-0 flex-1">
                   {content}
-                </button>
+                </Button>
                 {secondary}
               </div>
             );

package/src/components/ui/image-uploader.tsx

@@ -9,6 +9,7 @@ import { fileMediaType, IMAGE_FILE_ACCEPT } from '../../utils/media-type';
 import { ImagePlusIcon } from '../icons-v2-generated/audio-and-visual/image-plus-icon';
 import { TrashIcon } from '../icons-v2-generated/interface/trash-icon';
 import { Refresh02VrIcon } from '../icons-v2-generated/media-playback/refresh-02-vr-icon';
+import { Button } from './button';
 import { FieldWrapper } from './field-wrapper';
 
 export interface ImageUploaderProps {
@@ -233,11 +234,11 @@ export function ImageUploader({
 
             <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-4">
               <ActionIconButton onClick={openDialog} disabled={!interactive} ariaLabel="Replace image">
-                <Refresh02VrIcon className="size-6" />
+                <Refresh02VrIcon />
               </ActionIconButton>
               {onRemove && (
                 <ActionIconButton onClick={onRemove} disabled={!interactive} ariaLabel="Remove image">
-                  <TrashIcon className="size-6" />
+                  <TrashIcon />
                 </ActionIconButton>
               )}
             </div>
@@ -276,7 +277,9 @@ interface ActionIconButtonProps {
 
 function ActionIconButton({ onClick, disabled, ariaLabel, children }: ActionIconButtonProps) {
   return (
-    <button
+    <Button
+      variant="overlay"
+      size="icon-sm"
       type="button"
       onClick={e => {
         e.stopPropagation();
@@ -284,17 +287,9 @@ function ActionIconButton({ onClick, disabled, ariaLabel, children }: ActionIcon
       }}
       disabled={disabled}
       aria-label={ariaLabel}
-      className={cn(
-        'flex shrink-0 items-center justify-center rounded-md p-3',
-        'bg-[var(--ods-system-greys-white)] text-ods-text-on-accent',
-        'transition-colors duration-150',
-        'hover:bg-[var(--ods-system-greys-white-hover)]',
-        'active:bg-[var(--ods-system-greys-white-action)]',
-        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ods-accent',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-      )}
+      className="shrink-0"
     >
       {children}
-    </button>
+    </Button>
   );
 }

package/src/components/ui/index.ts

@@ -14,6 +14,7 @@ export * from './date-picker';
 export * from './duration-input';
 export * from './field';
 export * from './field-wrapper';
+export * from './field-value-skeleton';
 export * from './honeypot-field';
 export * from './info-hint';
 export * from './json-detail-list';
@@ -141,38 +142,11 @@ export * from './touch-friendly-tooltip';
 export * from './error-state';
 export * from './content-loader';
 
-// Table components
-export {
-  Table,
-  TableCardSkeleton,
-  TableCell,
-  TableDescriptionCell,
-  TableEmptyState,
-  TableHeader,
-  TableRow,
-  TableTimestampCell,
-} from './table';
-
-export type {
-  PagePagination,
-  RowAction,
-  TableCardSkeletonProps,
-  TableCellProps,
-  TableColumn,
-  TableDescriptionCellProps,
-  TableEmptyStateProps,
-  TableHeaderProps,
-  TableProps,
-  TableRowProps,
-  TableTimestampCellProps,
-} from './table';
-
 // Query Report Table (dynamic columns for osquery results)
 export {
   QueryReportTable,
   QueryReportTableHeader,
   QueryReportTableRow,
-  QueryReportTableSkeleton,
   deriveColumns,
   exportToCSV,
 } from './query-report-table';
@@ -181,15 +155,14 @@ export type {
   QueryReportTableProps,
   QueryReportTableHeaderProps,
   QueryReportTableRowProps,
-  QueryReportTableSkeletonProps,
   QueryResultRow,
 } from './query-report-table';
 
 // Pagination components
-export { CursorPagination, CursorPaginationSimple, CursorPaginationSkeleton } from './cursor-pagination';
+export { CursorPagination, CursorPaginationSimple } from './cursor-pagination';
 export type { CursorPaginationProps } from './cursor-pagination';
 
-// DataTable (headless, TanStack Table-based) — replacement for legacy `Table`.
+// DataTable (headless, TanStack Table-based): the lib's one table.
 export * from './data-table';
 
 // Password input (show/hide toggle)
@@ -272,4 +245,4 @@ export {
   ORGANIZATION_CARD_FOOTER_CLASS,
   ORGANIZATION_CARD_STATS_CLASS,
   ORGANIZATION_CARD_STAT_CLASS,
-} from '../loading/organization-card-skeleton';
+} from './organization-card';

package/src/components/ui/info-card-row.tsx

@@ -86,7 +86,7 @@ export function InfoCardRow({ lead, stats, className }: InfoCardRowProps) {
  * lines bars, each stat's caption a `text-h3` bar under its title (the page's own label, drawn for real when it
  * is given, else a bar).
  */
-export function InfoCardRowSkeleton({
+function InfoCardRowSkeleton({
   leadIcon = true,
   statTitles = ['', ''],
   className,