@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/table/types.d.ts

@@ -2,138 +2,144 @@
  * Table state types for Table components.
  * Based on @react-stately/table and @react-types/table.
  */
-import type { Key } from '../collections/types';
-import type { GridState, GridCollection, GridNode } from '../grid/types';
+import type { Key } from "../collections/types";
+import type { GridState, GridCollection, GridNode } from "../grid/types";
 /**
  * Sort direction for table columns.
  */
-export type SortDirection = 'ascending' | 'descending';
+export type SortDirection = "ascending" | "descending";
 /**
  * Describes which column to sort by and in what direction.
  */
 export interface SortDescriptor {
-    /** The key of the column to sort by. */
-    column: Key;
-    /** The direction to sort by. */
-    direction: SortDirection;
+  /** The key of the column to sort by. */
+  column: Key;
+  /** The direction to sort by. */
+  direction: SortDirection;
 }
 /**
  * Interface for sortable components.
  */
 export interface Sortable {
-    /** The current sorted column and direction. */
-    sortDescriptor?: SortDescriptor;
-    /** Handler that is called when the sorted column or direction changes. */
-    onSortChange?: (descriptor: SortDescriptor) => void;
+  /** The current sorted column and direction. */
+  sortDescriptor?: SortDescriptor;
+  /** Handler that is called when the sorted column or direction changes. */
+  onSortChange?: (descriptor: SortDescriptor) => void;
 }
 /**
  * A collection of table rows and columns.
  * Extends GridCollection with table-specific metadata.
  */
 export interface TableCollection<T = unknown> extends GridCollection<T> {
-    /** A list of header row nodes in the table. */
-    readonly headerRows: GridNode<T>[];
-    /** A list of column nodes in the table. */
-    readonly columns: GridNode<T>[];
-    /** A set of column keys that serve as the row header. */
-    readonly rowHeaderColumnKeys: Set<Key>;
-    /** The node that makes up the header of the table. */
-    readonly head?: GridNode<T>;
-    /** The node that makes up the body of the table. */
-    readonly body: GridNode<T>;
+  /** A list of header row nodes in the table. */
+  readonly headerRows: GridNode<T>[];
+  /** A list of column nodes in the table. */
+  readonly columns: GridNode<T>[];
+  /** A set of column keys that serve as the row header. */
+  readonly rowHeaderColumnKeys: Set<Key>;
+  /** The node that makes up the header of the table. */
+  readonly head?: GridNode<T>;
+  /** The node that makes up the body of the table. */
+  readonly body: GridNode<T>;
 }
 /**
  * State for a table component.
  * Extends GridState with table-specific functionality.
  */
-export interface TableState<T, C extends TableCollection<T> = TableCollection<T>> extends Omit<GridState<T, GridCollection<T>>, 'collection'> {
-    /** The table collection. */
-    readonly collection: C;
-    /** Whether the row selection checkboxes should be displayed. */
-    readonly showSelectionCheckboxes: boolean;
-    /** The current sorted column and direction. */
-    readonly sortDescriptor: SortDescriptor | null;
-    /** Sort by the given column and direction. */
-    sort(columnKey: Key, direction?: SortDirection): void;
+export interface TableState<T, C extends TableCollection<T> = TableCollection<T>> extends Omit<
+  GridState<T, GridCollection<T>>,
+  "collection"
+> {
+  /** The table collection. */
+  readonly collection: C;
+  /** Whether the row selection checkboxes should be displayed. */
+  readonly showSelectionCheckboxes: boolean;
+  /** The current sorted column and direction. */
+  readonly sortDescriptor: SortDescriptor | null;
+  /** Sort by the given column and direction. */
+  sort(columnKey: Key, direction?: SortDirection): void;
 }
 /**
  * Options for creating table state.
  */
-export interface TableStateOptions<T, C extends TableCollection<T> = TableCollection<T>> extends Sortable {
-    /** The table collection. */
-    collection: C;
-    /** Keys of disabled rows. */
-    disabledKeys?: Iterable<Key>;
-    /** Focus mode: 'row' or 'cell'. */
-    focusMode?: 'row' | 'cell';
-    /** Selection mode. */
-    selectionMode?: 'none' | 'single' | 'multiple';
-    /** Selection behavior. */
-    selectionBehavior?: 'toggle' | 'replace';
-    /** Whether empty selection is disallowed. */
-    disallowEmptySelection?: boolean;
-    /** Currently selected keys (controlled). */
-    selectedKeys?: 'all' | Iterable<Key>;
-    /** Default selected keys (uncontrolled). */
-    defaultSelectedKeys?: 'all' | Iterable<Key>;
-    /** Handler for selection changes. */
-    onSelectionChange?: (keys: 'all' | Set<Key>) => void;
-    /** Whether the row selection checkboxes should be displayed. */
-    showSelectionCheckboxes?: boolean;
+export interface TableStateOptions<
+  T,
+  C extends TableCollection<T> = TableCollection<T>,
+> extends Sortable {
+  /** The table collection. */
+  collection: C;
+  /** Keys of disabled rows. */
+  disabledKeys?: Iterable<Key>;
+  /** Focus mode: 'row' or 'cell'. */
+  focusMode?: "row" | "cell";
+  /** Selection mode. */
+  selectionMode?: "none" | "single" | "multiple";
+  /** Selection behavior. */
+  selectionBehavior?: "toggle" | "replace";
+  /** Whether empty selection is disallowed. */
+  disallowEmptySelection?: boolean;
+  /** Currently selected keys (controlled). */
+  selectedKeys?: "all" | Iterable<Key>;
+  /** Default selected keys (uncontrolled). */
+  defaultSelectedKeys?: "all" | Iterable<Key>;
+  /** Handler for selection changes. */
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
+  /** Whether the row selection checkboxes should be displayed. */
+  showSelectionCheckboxes?: boolean;
 }
 /**
  * Column definition for building table collections.
  */
 export interface ColumnDefinition<T = unknown> {
-    /** The key for the column. */
-    key: Key;
-    /** The display name or rendered content. */
-    name?: string;
-    /** Text value for accessibility. */
-    textValue?: string;
-    /** Whether this column is a row header. */
-    isRowHeader?: boolean;
-    /** Whether this column allows sorting. */
-    allowsSorting?: boolean;
-    /** Child columns (for column groups). */
-    children?: ColumnDefinition<T>[];
-    /** Width of the column. */
-    width?: number | string;
-    /** Minimum width of the column. */
-    minWidth?: number;
-    /** Maximum width of the column. */
-    maxWidth?: number;
+  /** The key for the column. */
+  key: Key;
+  /** The display name or rendered content. */
+  name?: string;
+  /** Text value for accessibility. */
+  textValue?: string;
+  /** Whether this column is a row header. */
+  isRowHeader?: boolean;
+  /** Whether this column allows sorting. */
+  allowsSorting?: boolean;
+  /** Child columns (for column groups). */
+  children?: ColumnDefinition<T>[];
+  /** Width of the column. */
+  width?: number | string;
+  /** Minimum width of the column. */
+  minWidth?: number;
+  /** Maximum width of the column. */
+  maxWidth?: number;
 }
 /**
  * Row definition for building table collections.
  */
 export interface RowDefinition<T = unknown> {
-    /** The key for the row. */
-    key: Key;
-    /** The data value for the row. */
-    value: T;
-    /** Text value for accessibility/search. */
-    textValue?: string;
-    /** Whether this row has child rows (for tree tables). */
-    hasChildRows?: boolean;
-    /** Child rows (for tree tables). */
-    childRows?: RowDefinition<T>[];
+  /** The key for the row. */
+  key: Key;
+  /** The data value for the row. */
+  value: T;
+  /** Text value for accessibility/search. */
+  textValue?: string;
+  /** Whether this row has child rows (for tree tables). */
+  hasChildRows?: boolean;
+  /** Child rows (for tree tables). */
+  childRows?: RowDefinition<T>[];
 }
 /**
  * Options for building a table collection.
  */
 export interface TableCollectionOptions<T = unknown> {
-    /** Column definitions. */
-    columns: ColumnDefinition<T>[];
-    /** Row definitions or data items. */
-    rows: RowDefinition<T>[] | T[];
-    /** Function to get the key from a data item. */
-    getKey?: (item: T) => Key;
-    /** Function to get the text value from a data item. */
-    getTextValue?: (item: T, column: ColumnDefinition<T>) => string;
-    /** Whether to show selection checkboxes. */
-    showSelectionCheckboxes?: boolean;
-    /** Set of column keys that serve as row headers. */
-    rowHeaderColumnKeys?: Set<Key>;
+  /** Column definitions. */
+  columns: ColumnDefinition<T>[];
+  /** Row definitions or data items. */
+  rows: RowDefinition<T>[] | T[];
+  /** Function to get the key from a data item. */
+  getKey?: (item: T) => Key;
+  /** Function to get the text value from a data item. */
+  getTextValue?: (item: T, column: ColumnDefinition<T>) => string;
+  /** Whether to show selection checkboxes. */
+  showSelectionCheckboxes?: boolean;
+  /** Set of column keys that serve as row headers. */
+  rowHeaderColumnKeys?: Set<Key>;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/src/table/types.ts

@@ -3,13 +3,13 @@
  * Based on @react-stately/table and @react-types/table.
  */
 
-import type { Key, FocusStrategy } from '../collections/types';
-import type { GridState, GridCollection, GridNode, GridNodeType } from '../grid/types';
+import type { Key, FocusStrategy } from "../collections/types";
+import type { GridState, GridCollection, GridNode, GridNodeType } from "../grid/types";
 
 /**
  * Sort direction for table columns.
  */
-export type SortDirection = 'ascending' | 'descending';
+export type SortDirection = "ascending" | "descending";
 
 /**
  * Describes which column to sort by and in what direction.
@@ -52,8 +52,10 @@ export interface TableCollection<T = unknown> extends GridCollection<T> {
  * State for a table component.
  * Extends GridState with table-specific functionality.
  */
-export interface TableState<T, C extends TableCollection<T> = TableCollection<T>>
-  extends Omit<GridState<T, GridCollection<T>>, 'collection'> {
+export interface TableState<T, C extends TableCollection<T> = TableCollection<T>> extends Omit<
+  GridState<T, GridCollection<T>>,
+  "collection"
+> {
   /** The table collection. */
   readonly collection: C;
   /** Whether the row selection checkboxes should be displayed. */
@@ -67,26 +69,28 @@ export interface TableState<T, C extends TableCollection<T> = TableCollection<T>
 /**
  * Options for creating table state.
  */
-export interface TableStateOptions<T, C extends TableCollection<T> = TableCollection<T>>
-  extends Sortable {
+export interface TableStateOptions<
+  T,
+  C extends TableCollection<T> = TableCollection<T>,
+> extends Sortable {
   /** The table collection. */
   collection: C;
   /** Keys of disabled rows. */
   disabledKeys?: Iterable<Key>;
   /** Focus mode: 'row' or 'cell'. */
-  focusMode?: 'row' | 'cell';
+  focusMode?: "row" | "cell";
   /** Selection mode. */
-  selectionMode?: 'none' | 'single' | 'multiple';
+  selectionMode?: "none" | "single" | "multiple";
   /** Selection behavior. */
-  selectionBehavior?: 'toggle' | 'replace';
+  selectionBehavior?: "toggle" | "replace";
   /** Whether empty selection is disallowed. */
   disallowEmptySelection?: boolean;
   /** Currently selected keys (controlled). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler for selection changes. */
-  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
   /** Whether the row selection checkboxes should be displayed. */
   showSelectionCheckboxes?: boolean;
 }

package/src/tabs/createTabListState.d.ts

@@ -2,67 +2,69 @@
  * State management for tab components.
  * Based on @react-stately/tabs.
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
-import type { Collection, CollectionNode, Key, FocusStrategy } from '../collections/types';
-export type KeyboardActivation = 'automatic' | 'manual';
-export type TabOrientation = 'horizontal' | 'vertical';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
+import type { Collection, CollectionNode, Key, FocusStrategy } from "../collections/types";
+export type KeyboardActivation = "automatic" | "manual";
+export type TabOrientation = "horizontal" | "vertical";
 export interface TabListStateProps<T = unknown> {
-    /** The items in the tab list. */
-    items?: T[];
-    /** Function to get a key from an item. */
-    getKey?: (item: T) => Key;
-    /** Function to get text value from an item. */
-    getTextValue?: (item: T) => string;
-    /** Function to check if an item is disabled. */
-    getDisabled?: (item: T) => boolean;
-    /** Keys of disabled tabs. */
-    disabledKeys?: Iterable<Key>;
-    /** The currently selected tab key (controlled). */
-    selectedKey?: Key | null;
-    /** The default selected tab key (uncontrolled). */
-    defaultSelectedKey?: Key;
-    /** Handler for tab selection changes. */
-    onSelectionChange?: (key: Key) => void;
-    /** Whether the entire tab list is disabled. */
-    isDisabled?: boolean;
-    /** Whether tabs are activated automatically on focus or manually. */
-    keyboardActivation?: KeyboardActivation;
-    /** The orientation of the tab list. */
-    orientation?: TabOrientation;
+  /** The items in the tab list. */
+  items?: T[];
+  /** Function to get a key from an item. */
+  getKey?: (item: T) => Key;
+  /** Function to get text value from an item. */
+  getTextValue?: (item: T) => string;
+  /** Function to check if an item is disabled. */
+  getDisabled?: (item: T) => boolean;
+  /** Keys of disabled tabs. */
+  disabledKeys?: Iterable<Key>;
+  /** The currently selected tab key (controlled). */
+  selectedKey?: Key | null;
+  /** The default selected tab key (uncontrolled). */
+  defaultSelectedKey?: Key;
+  /** Handler for tab selection changes. */
+  onSelectionChange?: (key: Key) => void;
+  /** Whether the entire tab list is disabled. */
+  isDisabled?: boolean;
+  /** Whether tabs are activated automatically on focus or manually. */
+  keyboardActivation?: KeyboardActivation;
+  /** The orientation of the tab list. */
+  orientation?: TabOrientation;
 }
 export interface TabListState<T = unknown> {
-    /** The collection of tabs. */
-    readonly collection: Accessor<Collection<T>>;
-    /** The currently selected tab key. */
-    readonly selectedKey: Accessor<Key | null>;
-    /** Set the selected tab key. */
-    setSelectedKey(key: Key): void;
-    /** The currently selected tab item. */
-    readonly selectedItem: Accessor<CollectionNode<T> | null>;
-    /** Whether the tab list is disabled. */
-    readonly isDisabled: Accessor<boolean>;
-    /** The keyboard activation mode. */
-    readonly keyboardActivation: Accessor<KeyboardActivation>;
-    /** The orientation of the tab list. */
-    readonly orientation: Accessor<TabOrientation>;
-    /** Whether a tab key is disabled. */
-    isKeyDisabled(key: Key): boolean;
-    /** The set of disabled keys. */
-    readonly disabledKeys: Accessor<Set<Key>>;
-    /** Whether the collection is focused. */
-    readonly isFocused: Accessor<boolean>;
-    /** Set the focused state. */
-    setFocused(isFocused: boolean): void;
-    /** The currently focused tab key. */
-    readonly focusedKey: Accessor<Key | null>;
-    /** Set the focused tab key. */
-    setFocusedKey(key: Key | null, childStrategy?: FocusStrategy): void;
-    /** The child focus strategy. */
-    readonly childFocusStrategy: Accessor<FocusStrategy | null>;
+  /** The collection of tabs. */
+  readonly collection: Accessor<Collection<T>>;
+  /** The currently selected tab key. */
+  readonly selectedKey: Accessor<Key | null>;
+  /** Set the selected tab key. */
+  setSelectedKey(key: Key): void;
+  /** The currently selected tab item. */
+  readonly selectedItem: Accessor<CollectionNode<T> | null>;
+  /** Whether the tab list is disabled. */
+  readonly isDisabled: Accessor<boolean>;
+  /** The keyboard activation mode. */
+  readonly keyboardActivation: Accessor<KeyboardActivation>;
+  /** The orientation of the tab list. */
+  readonly orientation: Accessor<TabOrientation>;
+  /** Whether a tab key is disabled. */
+  isKeyDisabled(key: Key): boolean;
+  /** The set of disabled keys. */
+  readonly disabledKeys: Accessor<Set<Key>>;
+  /** Whether the collection is focused. */
+  readonly isFocused: Accessor<boolean>;
+  /** Set the focused state. */
+  setFocused(isFocused: boolean): void;
+  /** The currently focused tab key. */
+  readonly focusedKey: Accessor<Key | null>;
+  /** Set the focused tab key. */
+  setFocusedKey(key: Key | null, childStrategy?: FocusStrategy): void;
+  /** The child focus strategy. */
+  readonly childFocusStrategy: Accessor<FocusStrategy | null>;
 }
 /**
  * Creates state for a tab list component.
  */
-export declare function createTabListState<T = unknown>(props: MaybeAccessor<TabListStateProps<T>>): TabListState<T>;
-//# sourceMappingURL=createTabListState.d.ts.map
+export declare function createTabListState<T = unknown>(
+  props: MaybeAccessor<TabListStateProps<T>>,
+): TabListState<T>;
+//# sourceMappingURL=createTabListState.d.ts.map

package/src/tabs/createTabListState.ts

@@ -3,19 +3,19 @@
  * Based on @react-stately/tabs.
  */
 
-import { createComputed, createMemo, createSignal, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { ListCollection } from '../collections/ListCollection';
+import { createComputed, createMemo, createSignal, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { ListCollection } from "../collections/ListCollection";
 import type {
   Collection,
   CollectionItemLike,
   CollectionNode,
   Key,
   FocusStrategy,
-} from '../collections/types';
+} from "../collections/types";
 
-export type KeyboardActivation = 'automatic' | 'manual';
-export type TabOrientation = 'horizontal' | 'vertical';
+export type KeyboardActivation = "automatic" | "manual";
+export type TabOrientation = "horizontal" | "vertical";
 
 export interface TabListStateProps<T = unknown> {
   /** The items in the tab list. */
@@ -77,11 +77,10 @@ export interface TabListState<T = unknown> {
  * Creates state for a tab list component.
  */
 export function createTabListState<T = unknown>(
-  props: MaybeAccessor<TabListStateProps<T>>
+  props: MaybeAccessor<TabListStateProps<T>>,
 ): TabListState<T> {
   const getProps = () => access(props);
 
-  // Build collection from items
   const collection: Accessor<Collection<T>> = createMemo(() => {
     const p = getProps();
     const items = p.items ?? [];
@@ -89,12 +88,11 @@ export function createTabListState<T = unknown>(
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
       const o = item as CollectionItemLike;
       const key = p.getKey?.(item) ?? o.key ?? o.id ?? index;
-      const textValue =
-        p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
+      const textValue = p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
       const isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {
-        type: 'item' as const,
+        type: "item" as const,
         key,
         value: item,
         textValue,
@@ -126,7 +124,6 @@ export function createTabListState<T = unknown>(
     return result;
   });
 
-  // Check if a key is disabled
   const isKeyDisabled = (key: Key): boolean => {
     const p = getProps();
     if (p.isDisabled) return true;
@@ -144,30 +141,24 @@ export function createTabListState<T = unknown>(
     return null;
   };
 
-  // Get initial selected key
   const getInitialSelectedKey = (): Key | null => {
     const p = getProps();
 
-    // If controlled, use that value
     if (p.selectedKey !== undefined) {
       return p.selectedKey;
     }
 
-    // If default provided and not disabled, use it
     if (p.defaultSelectedKey !== undefined && !isKeyDisabled(p.defaultSelectedKey)) {
       return p.defaultSelectedKey;
     }
 
-    // Otherwise, select first non-disabled
     return findFirstNonDisabledKey();
   };
 
-  // Selection state
   const [selectedKeyInternal, setSelectedKeyInternal] = createSignal<Key | null>(
-    getInitialSelectedKey()
+    getInitialSelectedKey(),
   );
 
-  // Compute actual selected key (controlled vs uncontrolled)
   const selectedKey: Accessor<Key | null> = () => {
     const p = getProps();
     if (p.selectedKey !== undefined) {
@@ -177,39 +168,30 @@ export function createTabListState<T = unknown>(
   };
 
   const setSelectedKey = (key: Key) => {
-    // Don't select disabled keys
     if (isKeyDisabled(key)) return;
     if (selectedKey() === key) return;
 
     const p = getProps();
-    // For uncontrolled mode, update internal state
     if (p.selectedKey === undefined) {
       setSelectedKeyInternal(key);
     }
 
-    // Always call onChange
     p.onSelectionChange?.(key);
   };
 
-  // Get selected item
   const selectedItem: Accessor<CollectionNode<T> | null> = () => {
     const key = selectedKey();
     if (key === null) return null;
     return collection().getItem(key);
   };
 
-  // Is disabled accessor
   const isDisabled: Accessor<boolean> = () => getProps().isDisabled ?? false;
 
-  // Keyboard activation accessor
   const keyboardActivation: Accessor<KeyboardActivation> = () =>
-    getProps().keyboardActivation ?? 'automatic';
+    getProps().keyboardActivation ?? "automatic";
 
-  // Orientation accessor
-  const orientation: Accessor<TabOrientation> = () =>
-    getProps().orientation ?? 'horizontal';
+  const orientation: Accessor<TabOrientation> = () => getProps().orientation ?? "horizontal";
 
-  // Focus state
   const [isFocused, setIsFocused] = createSignal(false);
   const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
   const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
@@ -220,7 +202,7 @@ export function createTabListState<T = unknown>(
 
     // In automatic mode, selecting follows focus
     if (
-      keyboardActivation() === 'automatic' &&
+      keyboardActivation() === "automatic" &&
       key !== null &&
       key !== selectedKey() &&
       !isKeyDisabled(key)
@@ -241,6 +223,17 @@ export function createTabListState<T = unknown>(
 
     if (currentExists && currentEnabled) return;
 
+    if (
+      p.defaultSelectedKey !== undefined &&
+      coll.getItem(p.defaultSelectedKey) !== null &&
+      !isKeyDisabled(p.defaultSelectedKey)
+    ) {
+      if (p.defaultSelectedKey !== current) {
+        setSelectedKeyInternal(p.defaultSelectedKey);
+      }
+      return;
+    }
+
     const nextKey = findFirstNonDisabledKey();
     if (nextKey !== current) {
       setSelectedKeyInternal(nextKey);

package/src/tabs/index.d.ts

@@ -1,2 +1,8 @@
-export { createTabListState, type TabListStateProps, type TabListState, type KeyboardActivation, type TabOrientation, } from './createTabListState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createTabListState,
+  type TabListStateProps,
+  type TabListState,
+  type KeyboardActivation,
+  type TabOrientation,
+} from "./createTabListState";
+//# sourceMappingURL=index.d.ts.map

package/src/tabs/index.ts

@@ -4,4 +4,4 @@ export {
   type TabListState,
   type KeyboardActivation,
   type TabOrientation,
-} from './createTabListState';
+} from "./createTabListState";