@proyecto-viviana/solid-stately 0.2.4 → 0.2.7

package/src/toggle/createToggleGroupState.ts

@@ -0,0 +1,127 @@
+/**
+ * Toggle group state for Solid Stately
+ *
+ * Provides state management for groups of toggle buttons with
+ * single or multiple selection.
+ *
+ * This is a port of @react-stately/toggle's useToggleGroupState.
+ */
+
+import { createSignal } from 'solid-js';
+import type { Key } from '../collections';
+import { type MaybeAccessor, access } from '../utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ToggleGroupProps {
+  /**
+   * Whether single or multiple selection is enabled.
+   * @default 'single'
+   */
+  selectionMode?: 'single' | 'multiple';
+  /** Whether empty selection is disallowed. */
+  disallowEmptySelection?: boolean;
+  /** Controlled selected keys. */
+  selectedKeys?: Iterable<Key>;
+  /** Uncontrolled initial selected keys. */
+  defaultSelectedKeys?: Iterable<Key>;
+  /** Called when selected keys change. */
+  onSelectionChange?: (keys: Set<Key>) => void;
+  /** Whether all items are disabled. */
+  isDisabled?: boolean;
+}
+
+export interface ToggleGroupState {
+  /** Whether single or multiple selection is enabled. */
+  readonly selectionMode: 'single' | 'multiple';
+  /** Whether all items are disabled. */
+  readonly isDisabled: boolean;
+  /** Current selected keys. */
+  readonly selectedKeys: Set<Key>;
+  /** Toggles selected state for a key. */
+  toggleKey(key: Key): void;
+  /** Sets selected state for a key. */
+  setSelected(key: Key, isSelected: boolean): void;
+  /** Replaces selected keys. */
+  setSelectedKeys(keys: Set<Key>): void;
+}
+
+function toKeySet(keys?: Iterable<Key>): Set<Key> {
+  return new Set(keys ? Array.from(keys) : []);
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Manages state for a group of toggle buttons.
+ */
+export function createToggleGroupState(
+  props: MaybeAccessor<ToggleGroupProps> = {}
+): ToggleGroupState {
+  const getProps = () => access(props);
+
+  const initialProps = getProps();
+  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
+    toKeySet(initialProps.defaultSelectedKeys)
+  );
+
+  const isControlled = () => getProps().selectedKeys !== undefined;
+  const selectedKeys = () =>
+    isControlled() ? toKeySet(getProps().selectedKeys) : internalSelectedKeys();
+
+  function setSelectedKeys(keys: Set<Key>): void {
+    const nextKeys = new Set(keys);
+    if (!isControlled()) {
+      setInternalSelectedKeys(nextKeys);
+    }
+    getProps().onSelectionChange?.(nextKeys);
+  }
+
+  function toggleKey(key: Key): void {
+    const props = getProps();
+    const mode = props.selectionMode ?? 'single';
+    const disallowEmptySelection = props.disallowEmptySelection ?? false;
+    const currentKeys = selectedKeys();
+
+    let nextKeys: Set<Key>;
+    if (mode === 'multiple') {
+      nextKeys = new Set(currentKeys);
+      if (nextKeys.has(key) && (!disallowEmptySelection || nextKeys.size > 1)) {
+        nextKeys.delete(key);
+      } else {
+        nextKeys.add(key);
+      }
+    } else {
+      nextKeys = new Set(
+        currentKeys.has(key) && !disallowEmptySelection ? [] : [key]
+      );
+    }
+
+    setSelectedKeys(nextKeys);
+  }
+
+  function setSelected(key: Key, isSelected: boolean): void {
+    if (isSelected !== selectedKeys().has(key)) {
+      toggleKey(key);
+    }
+  }
+
+  return {
+    get selectionMode() {
+      return getProps().selectionMode ?? 'single';
+    },
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get selectedKeys() {
+      return new Set(selectedKeys());
+    },
+    toggleKey,
+    setSelected,
+    setSelectedKeys,
+  };
+}

package/src/toggle/index.ts

@@ -3,3 +3,9 @@ export {
   type ToggleStateOptions,
   type ToggleState,
 } from './createToggleState';
+
+export {
+  createToggleGroupState,
+  type ToggleGroupProps,
+  type ToggleGroupState,
+} from './createToggleGroupState';

package/src/tooltip/createTooltipTriggerState.ts

@@ -1,183 +1,183 @@
-/**
- * Manages state for a tooltip trigger.
- * Based on @react-stately/tooltip useTooltipTriggerState.
- *
- * Tracks whether the tooltip is open, and provides methods to toggle this state.
- * Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.
- */
-
-import { createSignal, onCleanup, type Accessor } from 'solid-js';
-import { createOverlayTriggerState, type OverlayTriggerProps } from '../overlays';
-import { isServer } from '../ssr';
-
-// Default delays (in ms)
-const TOOLTIP_DELAY = 1500;
-const TOOLTIP_COOLDOWN = 500;
-
-export interface TooltipTriggerProps extends OverlayTriggerProps {
-  /** The delay time in milliseconds for the tooltip to show up. */
-  delay?: number;
-  /** The delay time in milliseconds for the tooltip to close. */
-  closeDelay?: number;
-}
-
-export interface TooltipTriggerState {
-  /** Whether the tooltip is currently showing. */
-  readonly isOpen: Accessor<boolean>;
-  /**
-   * Shows the tooltip. By default, the tooltip becomes visible after a delay
-   * depending on a global warmup timer. The `immediate` option shows the
-   * tooltip immediately instead.
-   */
-  open(immediate?: boolean): void;
-  /** Hides the tooltip. */
-  close(immediate?: boolean): void;
-}
-
-// Global state for coordinating tooltips
-let tooltips: Record<string, (immediate?: boolean) => void> = {};
-let tooltipId = 0;
-let globalWarmedUp = false;
-let globalWarmUpTimeout: ReturnType<typeof setTimeout> | null = null;
-let globalCooldownTimeout: ReturnType<typeof setTimeout> | null = null;
-
-/**
- * Resets the global tooltip state. Useful for testing.
- * @internal
- */
-export function resetTooltipState(): void {
-  tooltips = {};
-  tooltipId = 0;
-  globalWarmedUp = false;
-  if (globalWarmUpTimeout) {
-    clearTimeout(globalWarmUpTimeout);
-    globalWarmUpTimeout = null;
-  }
-  if (globalCooldownTimeout) {
-    clearTimeout(globalCooldownTimeout);
-    globalCooldownTimeout = null;
-  }
-}
-
-/**
- * Manages state for a tooltip trigger. Tracks whether the tooltip is open, and provides
- * methods to toggle this state. Ensures only one tooltip is open at a time and controls
- * the delay for showing a tooltip.
- */
-export function createTooltipTriggerState(
-  props: TooltipTriggerProps = {}
-): TooltipTriggerState {
-  const delay = () => props.delay ?? TOOLTIP_DELAY;
-  const closeDelay = () => props.closeDelay ?? TOOLTIP_COOLDOWN;
-
-  const overlayState = createOverlayTriggerState(props);
-  const id = `tooltip-${++tooltipId}`;
-
-  let closeTimeout: ReturnType<typeof setTimeout> | null = null;
-  const [closeCallback, setCloseCallback] = createSignal<() => void>(() => overlayState.close());
-
-  const ensureTooltipEntry = () => {
-    tooltips[id] = hideTooltip;
-  };
-
-  const closeOpenTooltips = () => {
-    for (const hideTooltipId in tooltips) {
-      if (hideTooltipId !== id) {
-        tooltips[hideTooltipId](true);
-        delete tooltips[hideTooltipId];
-      }
-    }
-  };
-
-  const showTooltip = () => {
-    if (closeTimeout) {
-      clearTimeout(closeTimeout);
-      closeTimeout = null;
-    }
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    globalWarmedUp = true;
-    overlayState.open();
-
-    if (globalWarmUpTimeout) {
-      clearTimeout(globalWarmUpTimeout);
-      globalWarmUpTimeout = null;
-    }
-    if (globalCooldownTimeout) {
-      clearTimeout(globalCooldownTimeout);
-      globalCooldownTimeout = null;
-    }
-  };
-
-  const hideTooltip = (immediate?: boolean) => {
-    if (immediate || closeDelay() <= 0) {
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-      closeCallback()();
-    } else if (!closeTimeout) {
-      closeTimeout = setTimeout(() => {
-        closeTimeout = null;
-        closeCallback()();
-      }, closeDelay());
-    }
-
-    if (globalWarmUpTimeout) {
-      clearTimeout(globalWarmUpTimeout);
-      globalWarmUpTimeout = null;
-    }
-
-    if (globalWarmedUp) {
-      if (globalCooldownTimeout) {
-        clearTimeout(globalCooldownTimeout);
-      }
-      globalCooldownTimeout = setTimeout(() => {
-        delete tooltips[id];
-        globalCooldownTimeout = null;
-        globalWarmedUp = false;
-      }, Math.max(TOOLTIP_COOLDOWN, closeDelay()));
-    }
-  };
-
-  const warmupTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-
-    if (!overlayState.isOpen() && !globalWarmUpTimeout && !globalWarmedUp) {
-      globalWarmUpTimeout = setTimeout(() => {
-        globalWarmUpTimeout = null;
-        globalWarmedUp = true;
-        showTooltip();
-      }, delay());
-    } else if (!overlayState.isOpen()) {
-      showTooltip();
-    }
-  };
-
-  // Update close callback when overlayState.close changes
-  setCloseCallback(() => overlayState.close);
-
-  // Cleanup on unmount
-  onCleanup(() => {
-    if (closeTimeout) {
-      clearTimeout(closeTimeout);
-    }
-    if (tooltips[id]) {
-      delete tooltips[id];
-    }
-  });
-
-  return {
-    isOpen: overlayState.isOpen,
-    open: (immediate?: boolean) => {
-      if (isServer) return;
-      if (!immediate && delay() > 0 && !closeTimeout) {
-        warmupTooltip();
-      } else {
-        showTooltip();
-      }
-    },
-    close: hideTooltip,
-  };
-}
+/**
+ * Manages state for a tooltip trigger.
+ * Based on @react-stately/tooltip useTooltipTriggerState.
+ *
+ * Tracks whether the tooltip is open, and provides methods to toggle this state.
+ * Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.
+ */
+
+import { createSignal, onCleanup, type Accessor } from 'solid-js';
+import { createOverlayTriggerState, type OverlayTriggerProps } from '../overlays';
+import { isServer } from '../ssr';
+
+// Default delays (in ms)
+const TOOLTIP_DELAY = 1500;
+const TOOLTIP_COOLDOWN = 500;
+
+export interface TooltipTriggerProps extends OverlayTriggerProps {
+  /** The delay time in milliseconds for the tooltip to show up. */
+  delay?: number;
+  /** The delay time in milliseconds for the tooltip to close. */
+  closeDelay?: number;
+}
+
+export interface TooltipTriggerState {
+  /** Whether the tooltip is currently showing. */
+  readonly isOpen: Accessor<boolean>;
+  /**
+   * Shows the tooltip. By default, the tooltip becomes visible after a delay
+   * depending on a global warmup timer. The `immediate` option shows the
+   * tooltip immediately instead.
+   */
+  open(immediate?: boolean): void;
+  /** Hides the tooltip. */
+  close(immediate?: boolean): void;
+}
+
+// Global state for coordinating tooltips
+let tooltips: Record<string, (immediate?: boolean) => void> = {};
+let tooltipId = 0;
+let globalWarmedUp = false;
+let globalWarmUpTimeout: ReturnType<typeof setTimeout> | null = null;
+let globalCooldownTimeout: ReturnType<typeof setTimeout> | null = null;
+
+/**
+ * Resets the global tooltip state. Useful for testing.
+ * @internal
+ */
+export function resetTooltipState(): void {
+  tooltips = {};
+  tooltipId = 0;
+  globalWarmedUp = false;
+  if (globalWarmUpTimeout) {
+    clearTimeout(globalWarmUpTimeout);
+    globalWarmUpTimeout = null;
+  }
+  if (globalCooldownTimeout) {
+    clearTimeout(globalCooldownTimeout);
+    globalCooldownTimeout = null;
+  }
+}
+
+/**
+ * Manages state for a tooltip trigger. Tracks whether the tooltip is open, and provides
+ * methods to toggle this state. Ensures only one tooltip is open at a time and controls
+ * the delay for showing a tooltip.
+ */
+export function createTooltipTriggerState(
+  props: TooltipTriggerProps = {}
+): TooltipTriggerState {
+  const delay = () => props.delay ?? TOOLTIP_DELAY;
+  const closeDelay = () => props.closeDelay ?? TOOLTIP_COOLDOWN;
+
+  const overlayState = createOverlayTriggerState(props);
+  const id = `tooltip-${++tooltipId}`;
+
+  let closeTimeout: ReturnType<typeof setTimeout> | null = null;
+  const [closeCallback, setCloseCallback] = createSignal<() => void>(() => overlayState.close());
+
+  const ensureTooltipEntry = () => {
+    tooltips[id] = hideTooltip;
+  };
+
+  const closeOpenTooltips = () => {
+    for (const hideTooltipId in tooltips) {
+      if (hideTooltipId !== id) {
+        tooltips[hideTooltipId](true);
+        delete tooltips[hideTooltipId];
+      }
+    }
+  };
+
+  const showTooltip = () => {
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      closeTimeout = null;
+    }
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    globalWarmedUp = true;
+    overlayState.open();
+
+    if (globalWarmUpTimeout) {
+      clearTimeout(globalWarmUpTimeout);
+      globalWarmUpTimeout = null;
+    }
+    if (globalCooldownTimeout) {
+      clearTimeout(globalCooldownTimeout);
+      globalCooldownTimeout = null;
+    }
+  };
+
+  const hideTooltip = (immediate?: boolean) => {
+    if (immediate || closeDelay() <= 0) {
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+      closeCallback()();
+    } else if (!closeTimeout) {
+      closeTimeout = setTimeout(() => {
+        closeTimeout = null;
+        closeCallback()();
+      }, closeDelay());
+    }
+
+    if (globalWarmUpTimeout) {
+      clearTimeout(globalWarmUpTimeout);
+      globalWarmUpTimeout = null;
+    }
+
+    if (globalWarmedUp) {
+      if (globalCooldownTimeout) {
+        clearTimeout(globalCooldownTimeout);
+      }
+      globalCooldownTimeout = setTimeout(() => {
+        delete tooltips[id];
+        globalCooldownTimeout = null;
+        globalWarmedUp = false;
+      }, Math.max(TOOLTIP_COOLDOWN, closeDelay()));
+    }
+  };
+
+  const warmupTooltip = () => {
+    closeOpenTooltips();
+    ensureTooltipEntry();
+
+    if (!overlayState.isOpen() && !globalWarmUpTimeout && !globalWarmedUp) {
+      globalWarmUpTimeout = setTimeout(() => {
+        globalWarmUpTimeout = null;
+        globalWarmedUp = true;
+        showTooltip();
+      }, delay());
+    } else if (!overlayState.isOpen()) {
+      showTooltip();
+    }
+  };
+
+  // Update close callback when overlayState.close changes
+  setCloseCallback(() => overlayState.close);
+
+  // Cleanup on unmount
+  onCleanup(() => {
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+    }
+    if (tooltips[id]) {
+      delete tooltips[id];
+    }
+  });
+
+  return {
+    isOpen: overlayState.isOpen,
+    open: (immediate?: boolean) => {
+      if (isServer) return;
+      if (!immediate && delay() > 0 && !closeTimeout) {
+        warmupTooltip();
+      } else {
+        showTooltip();
+      }
+    },
+    close: hideTooltip,
+  };
+}

package/src/tooltip/index.ts

@@ -1,6 +1,6 @@
-export {
-  createTooltipTriggerState,
-  resetTooltipState,
-  type TooltipTriggerProps,
-  type TooltipTriggerState,
-} from './createTooltipTriggerState';
+export {
+  createTooltipTriggerState,
+  resetTooltipState,
+  type TooltipTriggerProps,
+  type TooltipTriggerState,
+} from './createTooltipTriggerState';