@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/disclosure/createDisclosureState.d.ts

@@ -2,63 +2,67 @@
  * Disclosure state management for SolidJS
  * Based on @react-stately/disclosure useDisclosureState and useDisclosureGroupState
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface DisclosureStateProps {
-    /** Whether the disclosure is expanded (controlled). */
-    isExpanded?: boolean;
-    /** Whether the disclosure is expanded by default (uncontrolled). */
-    defaultExpanded?: boolean;
-    /** Handler that is called when the disclosure expanded state changes. */
-    onExpandedChange?: (isExpanded: boolean) => void;
+  /** Whether the disclosure is expanded (controlled). */
+  isExpanded?: boolean;
+  /** Whether the disclosure is expanded by default (uncontrolled). */
+  defaultExpanded?: boolean;
+  /** Handler that is called when the disclosure expanded state changes. */
+  onExpandedChange?: (isExpanded: boolean) => void;
 }
 export interface DisclosureState {
-    /** Whether the disclosure is currently expanded. */
-    readonly isExpanded: Accessor<boolean>;
-    /** Sets whether the disclosure is expanded. */
-    setExpanded(isExpanded: boolean): void;
-    /** Expand the disclosure. */
-    expand(): void;
-    /** Collapse the disclosure. */
-    collapse(): void;
-    /** Toggles the disclosure's visibility. */
-    toggle(): void;
+  /** Whether the disclosure is currently expanded. */
+  readonly isExpanded: Accessor<boolean>;
+  /** Sets whether the disclosure is expanded. */
+  setExpanded(isExpanded: boolean): void;
+  /** Expand the disclosure. */
+  expand(): void;
+  /** Collapse the disclosure. */
+  collapse(): void;
+  /** Toggles the disclosure's visibility. */
+  toggle(): void;
 }
 /**
  * Manages state for a disclosure widget. Tracks whether the disclosure is expanded,
  * and provides methods to toggle this state.
  */
-export declare function createDisclosureState(props?: MaybeAccessor<DisclosureStateProps>): DisclosureState;
+export declare function createDisclosureState(
+  props?: MaybeAccessor<DisclosureStateProps>,
+): DisclosureState;
 export type Key = string | number;
 export interface DisclosureGroupStateProps {
-    /** Whether multiple items can be expanded at the same time. */
-    allowsMultipleExpanded?: boolean;
-    /** Whether all items are disabled. */
-    isDisabled?: boolean;
-    /** The currently expanded keys in the group (controlled). */
-    expandedKeys?: Iterable<Key>;
-    /** The initial expanded keys in the group (uncontrolled). */
-    defaultExpandedKeys?: Iterable<Key>;
-    /** Handler that is called when items are expanded or collapsed. */
-    onExpandedChange?: (keys: Set<Key>) => void;
+  /** Whether multiple items can be expanded at the same time. */
+  allowsMultipleExpanded?: boolean;
+  /** Whether all items are disabled. */
+  isDisabled?: boolean;
+  /** The currently expanded keys in the group (controlled). */
+  expandedKeys?: Iterable<Key>;
+  /** The initial expanded keys in the group (uncontrolled). */
+  defaultExpandedKeys?: Iterable<Key>;
+  /** Handler that is called when items are expanded or collapsed. */
+  onExpandedChange?: (keys: Set<Key>) => void;
 }
 export interface DisclosureGroupState {
-    /** Whether multiple items can be expanded at the same time. */
-    readonly allowsMultipleExpanded: boolean;
-    /** Whether all items are disabled. */
-    readonly isDisabled: boolean;
-    /** A set of keys for items that are expanded. */
-    readonly expandedKeys: Accessor<Set<Key>>;
-    /** Toggles the expanded state for an item by its key. */
-    toggleKey(key: Key): void;
-    /** Replaces the set of expanded keys. */
-    setExpandedKeys(keys: Set<Key>): void;
-    /** Check if a specific key is expanded. */
-    isExpanded(key: Key): boolean;
+  /** Whether multiple items can be expanded at the same time. */
+  readonly allowsMultipleExpanded: boolean;
+  /** Whether all items are disabled. */
+  readonly isDisabled: boolean;
+  /** A set of keys for items that are expanded. */
+  readonly expandedKeys: Accessor<Set<Key>>;
+  /** Toggles the expanded state for an item by its key. */
+  toggleKey(key: Key): void;
+  /** Replaces the set of expanded keys. */
+  setExpandedKeys(keys: Set<Key>): void;
+  /** Check if a specific key is expanded. */
+  isExpanded(key: Key): boolean;
 }
 /**
  * Manages state for a group of disclosures, e.g. an accordion.
  * It supports both single and multiple expanded items.
  */
-export declare function createDisclosureGroupState(props?: MaybeAccessor<DisclosureGroupStateProps>): DisclosureGroupState;
-//# sourceMappingURL=createDisclosureState.d.ts.map
+export declare function createDisclosureGroupState(
+  props?: MaybeAccessor<DisclosureGroupStateProps>,
+): DisclosureGroupState;
+//# sourceMappingURL=createDisclosureState.d.ts.map

package/src/disclosure/createDisclosureState.ts

@@ -3,12 +3,8 @@
  * Based on @react-stately/disclosure useDisclosureState and useDisclosureGroupState
  */
 
-import { createSignal, createEffect, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-
-// ============================================
-// SINGLE DISCLOSURE STATE
-// ============================================
+import { createSignal, createEffect, createMemo, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
 export interface DisclosureStateProps {
   /** Whether the disclosure is expanded (controlled). */
@@ -37,16 +33,14 @@ export interface DisclosureState {
  * and provides methods to toggle this state.
  */
 export function createDisclosureState(
-  props: MaybeAccessor<DisclosureStateProps> = {}
+  props: MaybeAccessor<DisclosureStateProps> = {},
 ): DisclosureState {
   const propsAccessor = () => access(props);
 
-  // Internal state for uncontrolled mode
   const [internalExpanded, setInternalExpanded] = createSignal(
-    propsAccessor().defaultExpanded ?? false
+    propsAccessor().defaultExpanded ?? false,
   );
 
-  // Determine if expanded (controlled vs uncontrolled)
   const isExpanded: Accessor<boolean> = () => {
     const p = propsAccessor();
     return p.isExpanded !== undefined ? p.isExpanded : internalExpanded();
@@ -73,10 +67,6 @@ export function createDisclosureState(
   };
 }
 
-// ============================================
-// DISCLOSURE GROUP STATE (Accordion)
-// ============================================
-
 export type Key = string | number;
 
 export interface DisclosureGroupStateProps {
@@ -112,20 +102,18 @@ export interface DisclosureGroupState {
  * It supports both single and multiple expanded items.
  */
 export function createDisclosureGroupState(
-  props: MaybeAccessor<DisclosureGroupStateProps> = {}
+  props: MaybeAccessor<DisclosureGroupStateProps> = {},
 ): DisclosureGroupState {
   const propsAccessor = () => access(props);
 
-  // Internal state for uncontrolled mode
   const [internalKeys, setInternalKeys] = createSignal<Set<Key>>(
-    new Set(propsAccessor().defaultExpandedKeys ?? [])
+    new Set(propsAccessor().defaultExpandedKeys ?? []),
   );
 
-  // Determine expanded keys (controlled vs uncontrolled)
-  const expandedKeys: Accessor<Set<Key>> = () => {
+  const expandedKeys: Accessor<Set<Key>> = createMemo(() => {
     const p = propsAccessor();
     return p.expandedKeys !== undefined ? new Set(p.expandedKeys) : internalKeys();
-  };
+  });
 
   const setExpandedKeys = (keys: Set<Key>) => {
     const p = propsAccessor();
@@ -135,8 +123,7 @@ export function createDisclosureGroupState(
     p.onExpandedChange?.(keys);
   };
 
-  // Ensure only one item is expanded if allowsMultipleExpanded is false
-  // Note: We use untrack to prevent infinite loops when calling setExpandedKeys
+  // Ensure only one item is expanded if allowsMultipleExpanded is false.
   createEffect(() => {
     const p = propsAccessor();
     const allowsMultiple = p.allowsMultipleExpanded ?? false;
@@ -167,7 +154,6 @@ export function createDisclosureGroupState(
         newKeys.add(key);
       }
     } else {
-      // Single selection: toggle off if already expanded, otherwise select only this one
       newKeys = new Set(currentKeys.has(key) ? [] : [key]);
     }
 

package/src/disclosure/index.d.ts

@@ -1,2 +1,10 @@
-export { createDisclosureState, createDisclosureGroupState, type DisclosureStateProps, type DisclosureState, type DisclosureGroupStateProps, type DisclosureGroupState, type Key, } from './createDisclosureState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createDisclosureState,
+  createDisclosureGroupState,
+  type DisclosureStateProps,
+  type DisclosureState,
+  type DisclosureGroupStateProps,
+  type DisclosureGroupState,
+  type Key,
+} from "./createDisclosureState";
+//# sourceMappingURL=index.d.ts.map

package/src/disclosure/index.ts

@@ -6,4 +6,4 @@ export {
   type DisclosureGroupStateProps,
   type DisclosureGroupState,
   type Key,
-} from './createDisclosureState';
+} from "./createDisclosureState";

package/src/dnd/createDragState.d.ts

@@ -3,51 +3,60 @@
  *
  * Provides reactive state for drag operations.
  */
-import { type Accessor } from 'solid-js';
-import type { DragItem, DragStartEvent, DragMoveEvent, DragEndEvent, DropOperation, DragPreviewRenderer } from './types';
+import { type Accessor } from "solid-js";
+import type {
+  DragItem,
+  DragStartEvent,
+  DragMoveEvent,
+  DragEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from "./types";
 export interface DragStateOptions {
-    /** A function that returns the items being dragged. */
-    getItems: () => DragItem[];
-    /** Function that returns the allowed drop operations. */
-    getAllowedDropOperations?: () => DropOperation[];
-    /** Handler that is called when a drag operation is started. */
-    onDragStart?: (e: DragStartEvent) => void;
-    /** Handler that is called when the drag is moved. */
-    onDragMove?: (e: DragMoveEvent) => void;
-    /** Handler that is called when the drag operation ends. */
-    onDragEnd?: (e: DragEndEvent) => void;
-    /** Whether the drag operation is disabled. */
-    isDisabled?: boolean;
-    /** Whether there is a separate drag button affordance. */
-    hasDragButton?: boolean;
-    /** Preview renderer function ref. */
-    preview?: {
-        current: DragPreviewRenderer | null;
-    };
+  /** A function that returns the items being dragged. */
+  getItems: () => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DragStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DragMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DragEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Whether there is a separate drag button affordance. */
+  hasDragButton?: boolean;
+  /** Preview renderer function ref. */
+  preview?: {
+    current: DragPreviewRenderer | null;
+  };
 }
 export interface DragState {
-    /** Whether an element is currently being dragged. */
-    readonly isDragging: boolean;
-    /** Whether drag is disabled. */
-    readonly isDisabled: boolean;
-    /** Start a drag operation. */
-    startDrag(x: number, y: number): void;
-    /** Update drag position. */
-    moveDrag(x: number, y: number): void;
-    /** End a drag operation. */
-    endDrag(x: number, y: number, dropOperation: DropOperation): void;
-    /** Cancel a drag operation. */
-    cancelDrag(): void;
-    /** Get the items being dragged. */
-    getItems(): DragItem[];
-    /** Get allowed drop operations. */
-    getAllowedDropOperations(): DropOperation[];
-    /** Whether there is a drag button. */
-    readonly hasDragButton: boolean;
-    /** Preview renderer. */
-    readonly preview: {
+  /** Whether an element is currently being dragged. */
+  readonly isDragging: boolean;
+  /** Whether drag is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation. */
+  startDrag(x: number, y: number): void;
+  /** Update drag position. */
+  moveDrag(x: number, y: number): void;
+  /** End a drag operation. */
+  endDrag(x: number, y: number, dropOperation: DropOperation): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged. */
+  getItems(): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Whether there is a drag button. */
+  readonly hasDragButton: boolean;
+  /** Preview renderer. */
+  readonly preview:
+    | {
         current: DragPreviewRenderer | null;
-    } | undefined;
+      }
+    | undefined;
 }
 /**
  * Creates drag state for managing drag operations.
@@ -56,4 +65,4 @@ export interface DragState {
  * @returns Drag state object
  */
 export declare function createDragState(props: Accessor<DragStateOptions>): DragState;
-//# sourceMappingURL=createDragState.d.ts.map
+//# sourceMappingURL=createDragState.d.ts.map

package/src/dnd/createDragState.ts

@@ -1,153 +1,151 @@
-/**
- * Drag state management for solid-stately.
- *
- * Provides reactive state for drag operations.
- */
-
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type {
-  DragItem,
-  DragStartEvent,
-  DragMoveEvent,
-  DragEndEvent,
-  DropOperation,
-  DragPreviewRenderer,
-} from './types';
-
-export interface DragStateOptions {
-  /** A function that returns the items being dragged. */
-  getItems: () => DragItem[];
-  /** Function that returns the allowed drop operations. */
-  getAllowedDropOperations?: () => DropOperation[];
-  /** Handler that is called when a drag operation is started. */
-  onDragStart?: (e: DragStartEvent) => void;
-  /** Handler that is called when the drag is moved. */
-  onDragMove?: (e: DragMoveEvent) => void;
-  /** Handler that is called when the drag operation ends. */
-  onDragEnd?: (e: DragEndEvent) => void;
-  /** Whether the drag operation is disabled. */
-  isDisabled?: boolean;
-  /** Whether there is a separate drag button affordance. */
-  hasDragButton?: boolean;
-  /** Preview renderer function ref. */
-  preview?: { current: DragPreviewRenderer | null };
-}
-
-export interface DragState {
-  /** Whether an element is currently being dragged. */
-  readonly isDragging: boolean;
-  /** Whether drag is disabled. */
-  readonly isDisabled: boolean;
-  /** Start a drag operation. */
-  startDrag(x: number, y: number): void;
-  /** Update drag position. */
-  moveDrag(x: number, y: number): void;
-  /** End a drag operation. */
-  endDrag(x: number, y: number, dropOperation: DropOperation): void;
-  /** Cancel a drag operation. */
-  cancelDrag(): void;
-  /** Get the items being dragged. */
-  getItems(): DragItem[];
-  /** Get allowed drop operations. */
-  getAllowedDropOperations(): DropOperation[];
-  /** Whether there is a drag button. */
-  readonly hasDragButton: boolean;
-  /** Preview renderer. */
-  readonly preview: { current: DragPreviewRenderer | null } | undefined;
-}
-
-/**
- * Creates drag state for managing drag operations.
- *
- * @param props - Accessor returning drag state options
- * @returns Drag state object
- */
-export function createDragState(
-  props: Accessor<DragStateOptions>
-): DragState {
-  const getProps = createMemo(() => props());
-
-  const [isDragging, setIsDragging] = createSignal(false);
-
-  const startDrag = (x: number, y: number) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    setIsDragging(true);
-
-    if (typeof p.onDragStart === 'function') {
-      p.onDragStart({
-        type: 'dragstart',
-        x,
-        y,
-      });
-    }
-  };
-
-  const moveDrag = (x: number, y: number) => {
-    const p = getProps();
-    if (!isDragging() || p.isDisabled) return;
-
-    if (typeof p.onDragMove === 'function') {
-      p.onDragMove({
-        type: 'dragmove',
-        x,
-        y,
-      });
-    }
-  };
-
-  const endDrag = (x: number, y: number, dropOperation: DropOperation) => {
-    const p = getProps();
-    if (!isDragging()) return;
-
-    setIsDragging(false);
-
-    if (typeof p.onDragEnd === 'function') {
-      p.onDragEnd({
-        type: 'dragend',
-        x,
-        y,
-        dropOperation,
-      });
-    }
-  };
-
-  const cancelDrag = () => {
-    endDrag(0, 0, 'cancel');
-  };
-
-  const getItems = () => {
-    const p = getProps();
-    return p.getItems();
-  };
-
-  const getAllowedDropOperations = (): DropOperation[] => {
-    const p = getProps();
-    if (typeof p.getAllowedDropOperations === 'function') {
-      return p.getAllowedDropOperations();
-    }
-    return ['move', 'copy', 'link'];
-  };
-
-  return {
-    get isDragging() {
-      return isDragging();
-    },
-    get isDisabled() {
-      return getProps().isDisabled ?? false;
-    },
-    get hasDragButton() {
-      return getProps().hasDragButton ?? false;
-    },
-    get preview() {
-      return getProps().preview;
-    },
-    startDrag,
-    moveDrag,
-    endDrag,
-    cancelDrag,
-    getItems,
-    getAllowedDropOperations,
-  };
-}
+/**
+ * Drag state management for solid-stately.
+ *
+ * Provides reactive state for drag operations.
+ */
+
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type {
+  DragItem,
+  DragStartEvent,
+  DragMoveEvent,
+  DragEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from "./types";
+
+export interface DragStateOptions {
+  /** A function that returns the items being dragged. */
+  getItems: () => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DragStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DragMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DragEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Whether there is a separate drag button affordance. */
+  hasDragButton?: boolean;
+  /** Preview renderer function ref. */
+  preview?: { current: DragPreviewRenderer | null };
+}
+
+export interface DragState {
+  /** Whether an element is currently being dragged. */
+  readonly isDragging: boolean;
+  /** Whether drag is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation. */
+  startDrag(x: number, y: number): void;
+  /** Update drag position. */
+  moveDrag(x: number, y: number): void;
+  /** End a drag operation. */
+  endDrag(x: number, y: number, dropOperation: DropOperation): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged. */
+  getItems(): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Whether there is a drag button. */
+  readonly hasDragButton: boolean;
+  /** Preview renderer. */
+  readonly preview: { current: DragPreviewRenderer | null } | undefined;
+}
+
+/**
+ * Creates drag state for managing drag operations.
+ *
+ * @param props - Accessor returning drag state options
+ * @returns Drag state object
+ */
+export function createDragState(props: Accessor<DragStateOptions>): DragState {
+  const getProps = createMemo(() => props());
+
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  const startDrag = (x: number, y: number) => {
+    const p = getProps();
+    if (p.isDisabled) return;
+
+    setIsDragging(true);
+
+    if (typeof p.onDragStart === "function") {
+      p.onDragStart({
+        type: "dragstart",
+        x,
+        y,
+      });
+    }
+  };
+
+  const moveDrag = (x: number, y: number) => {
+    const p = getProps();
+    if (!isDragging() || p.isDisabled) return;
+
+    if (typeof p.onDragMove === "function") {
+      p.onDragMove({
+        type: "dragmove",
+        x,
+        y,
+      });
+    }
+  };
+
+  const endDrag = (x: number, y: number, dropOperation: DropOperation) => {
+    const p = getProps();
+    if (!isDragging()) return;
+
+    setIsDragging(false);
+
+    if (typeof p.onDragEnd === "function") {
+      p.onDragEnd({
+        type: "dragend",
+        x,
+        y,
+        dropOperation,
+      });
+    }
+  };
+
+  const cancelDrag = () => {
+    endDrag(0, 0, "cancel");
+  };
+
+  const getItems = () => {
+    const p = getProps();
+    return p.getItems();
+  };
+
+  const getAllowedDropOperations = (): DropOperation[] => {
+    const p = getProps();
+    if (typeof p.getAllowedDropOperations === "function") {
+      return p.getAllowedDropOperations();
+    }
+    return ["move", "copy", "link"];
+  };
+
+  return {
+    get isDragging() {
+      return isDragging();
+    },
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get hasDragButton() {
+      return getProps().hasDragButton ?? false;
+    },
+    get preview() {
+      return getProps().preview;
+    },
+    startDrag,
+    moveDrag,
+    endDrag,
+    cancelDrag,
+    getItems,
+    getAllowedDropOperations,
+  };
+}