@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/dist/_chunk/createTypeSelect.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTypeSelect.jsx","names":[],"sources":["../../src/selection/createTypeSelect.ts"],"sourcesContent":["/**\n * createTypeSelect - Handles typeahead interactions with collections.\n * Based on @react-aria/selection useTypeSelect.\n *\n * Allows users to navigate to items by typing characters that match\n * item text values. Supports multi-character search with debouncing.\n */\n\nimport { onCleanup } from \"solid-js\";\nimport type { JSX, Accessor } from \"solid-js\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\nimport { createCollator } from \"../i18n/createCollator\";\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface TypeSelectOptions<T> {\n  /** The collection to search through. */\n  collection: Accessor<Collection<T>>;\n  /** The currently focused key. */\n  focusedKey: Accessor<Key | null>;\n  /** Callback to set the focused key when a match is found. */\n  onFocusedKeyChange: (key: Key) => void;\n  /** Callback when an item is focused by typing. */\n  onTypeSelect?: (key: Key) => void;\n  /** Function to check if a key is disabled. */\n  isKeyDisabled?: (key: Key) => boolean;\n  /** Whether type-to-select is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TypeSelectAria {\n  /** Props to spread on the collection element. */\n  typeSelectProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// Internal state for tracking the search buffer\ninterface TypeSelectState {\n  search: string;\n  timeout: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Get a printable character from a key event.\n * Returns the character if it's a single printable character,\n * or empty string for non-printable keys.\n */\nfunction getStringForKey(key: string): string {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n  return \"\";\n}\n\n/**\n * Search for a key in the collection that matches the search string.\n * Starts *at* `fromKey` (inclusive) and scans to the end, with no internal\n * wrap; the caller retries from the top to cover earlier items. Matching is\n * locale-aware via the supplied `collator`.\n */\nfunction getKeyForSearch<T>(\n  collection: Collection<T>,\n  search: string,\n  fromKey: Key | null,\n  collator: Intl.Collator,\n  isKeyDisabled?: (key: Key) => boolean,\n): Key | null {\n  // Collect all items in order\n  const items: CollectionNode<T>[] = [];\n  for (const item of collection) {\n    if (item.type === \"item\") {\n      items.push(item);\n    }\n  }\n\n  if (items.length === 0) return null;\n\n  // Find the starting index. Start *at* the currently focused item (inclusive),\n  // mirroring upstream ListKeyboardDelegate.getKeyForSearch (`key = fromKey ||\n  // getFirstKey()`): typing a prefix the focused item already matches keeps focus\n  // on it instead of advancing to the next match.\n  let startIndex = 0;\n  if (fromKey != null) {\n    const fromIndex = items.findIndex((item) => item.key === fromKey);\n    if (fromIndex !== -1) {\n      startIndex = fromIndex;\n    }\n  }\n\n  // Scan from startIndex to the end (no wrap). The caller retries from the top to\n  // cover items before the focused one, matching upstream useTypeSelect.\n  for (let index = startIndex; index < items.length; index++) {\n    const item = items[index];\n\n    // Skip disabled items\n    if (item.isDisabled || (isKeyDisabled && isKeyDisabled(item.key))) {\n      continue;\n    }\n\n    // Match the leading characters of the text value against the search string\n    // using locale-aware collation, mirroring upstream ListKeyboardDelegate\n    // (`collator.compare(textValue.slice(0, search.length), search) === 0`). The\n    // collator's `usage: 'search'` / `sensitivity: 'base'` makes this case- and\n    // diacritic-insensitive in a locale-aware way.\n    const textValue = item.textValue || \"\";\n    const substring = textValue.slice(0, search.length);\n    if (textValue && collator.compare(substring, search) === 0) {\n      return item.key;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Creates typeahead/type-to-select functionality for a collection.\n *\n * @example\n * ```tsx\n * const { typeSelectProps } = createTypeSelect({\n *   collection: () => state.collection(),\n *   focusedKey: () => state.focusedKey(),\n *   onFocusedKeyChange: (key) => state.setFocusedKey(key),\n * });\n *\n * return <ul {...mergeProps(listBoxProps, typeSelectProps)}>...</ul>;\n * ```\n */\nexport function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {\n  // Create mutable state object to persist across keystrokes\n  const state: TypeSelectState = {\n    search: \"\",\n    timeout: undefined,\n  };\n\n  // Locale-aware search collator, mirroring upstream useSelectableList's\n  // `useCollator({ usage: 'search', sensitivity: 'base' })`.\n  const collator = createCollator({ usage: \"search\", sensitivity: \"base\" });\n\n  // Append the search buffer, find a matching key (from the focused item,\n  // falling back to the whole list), focus it, and (re)start the debounce timer.\n  // Shared by both phase handlers below, mirroring the duplicated body in\n  // upstream useTypeSelect.\n  const searchAndFocus = (): Key | null => {\n    const collection = options.collection();\n    const currentKey = options.focusedKey();\n\n    // Prioritize items at/after the focused item, then retry from the top to\n    // cover earlier ones (upstream's two getKeyForSearch calls).\n    let key = getKeyForSearch(\n      collection,\n      state.search,\n      currentKey,\n      collator(),\n      options.isKeyDisabled,\n    );\n    if (key == null) {\n      key = getKeyForSearch(collection, state.search, null, collator(), options.isKeyDisabled);\n    }\n\n    if (key != null) {\n      options.onFocusedKeyChange(key);\n      options.onTypeSelect?.(key);\n    }\n\n    return key;\n  };\n\n  const restartDebounce = () => {\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  // Capture phase: mid-search a Spacebar is part of the query, not a selection\n  // action, so we consume it before the collection's own keydown handler can act\n  // on it. Mirrors upstream useTypeSelect's onKeyDownCapture.\n  const onKeyDownCapture: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    if (state.search.length > 0 && e.key === \" \") {\n      e.preventDefault();\n      // Upstream guards this with `!('continuePropagation' in e) ||\n      // !e.isPropagationStopped()`. Our raw DOM KeyboardEvents never carry\n      // `continuePropagation`, so the guard always holds — stop unconditionally.\n      e.stopPropagation();\n      state.search += \" \";\n      searchAndFocus();\n      restartDebounce();\n    }\n  };\n\n  // Bubble phase: handles ordinary characters (and, in environments where the\n  // capture listener above is inert, mid-search Spacebar via its non-bailing\n  // branch). Mirrors upstream useTypeSelect's onKeyDown.\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    const character = getStringForKey(e.key);\n\n    // Ignore non-printable keys, Ctrl/Meta/Alt combos (Alt is excluded to match\n    // upstream — AltGr-only layouts shouldn't drive type-select), events from\n    // outside the element, and a leading Space (a common action key).\n    if (\n      !character ||\n      e.ctrlKey ||\n      e.metaKey ||\n      e.altKey ||\n      !e.currentTarget.contains(e.target as HTMLElement) ||\n      (state.search.length === 0 && character === \" \")\n    ) {\n      return;\n    }\n\n    state.search += character;\n\n    const key = searchAndFocus();\n\n    if (key != null) {\n      e.preventDefault();\n      // Our raw DOM events never carry `continuePropagation`, so upstream's\n      // `if (!('continuePropagation' in e)) e.stopPropagation()` is unconditional.\n      e.stopPropagation();\n    } else {\n      // Nothing matched even after retrying from the top: type-to-select is done,\n      // so reset the buffer and let the key propagate normally.\n      state.search = \"\";\n      clearTimeout(state.timeout);\n      state.timeout = undefined;\n      return;\n    }\n\n    restartDebounce();\n  };\n\n  // Mirror upstream's unmount cleanup (a useEffect teardown) so a pending\n  // debounce timer never fires after the consumer is disposed.\n  onCleanup(() => {\n    clearTimeout(state.timeout);\n  });\n\n  return {\n    typeSelectProps: {\n      // Upstream binds `onKeyDownCapture` so Spacebar is handled before the\n      // collection's own keydown handler. In Solid a capture handler delivered\n      // through a `{...typeSelectProps}` spread is inert (it never fires), so the\n      // bubble-phase `onKeyDown` is the live path — and it also covers mid-search\n      // Space because its bail check only rejects a *leading* Space. True capture\n      // would need a ref-based addEventListener threaded through every consumer;\n      // see the typeahead follow-up in upstream-sync.md.\n      onKeyDownCapture,\n      onKeyDown,\n    } as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,6BAA6B;;;;;;AAiCnC,SAAS,gBAAgB,KAAqB;CAK5C,IAAI,IAAI,WAAW,KAAK,CAAC,UAAU,KAAK,GAAG,GACzC,OAAO;CAET,OAAO;AACT;;;;;;;AAQA,SAAS,gBACP,YACA,QACA,SACA,UACA,eACY;CAEZ,MAAM,QAA6B,CAAC;CACpC,KAAK,MAAM,QAAQ,YACjB,IAAI,KAAK,SAAS,QAChB,MAAM,KAAK,IAAI;CAInB,IAAI,MAAM,WAAW,GAAG,OAAO;CAM/B,IAAI,aAAa;CACjB,IAAI,WAAW,MAAM;EACnB,MAAM,YAAY,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO;EAChE,IAAI,cAAc,IAChB,aAAa;CAEjB;CAIA,KAAK,IAAI,QAAQ,YAAY,QAAQ,MAAM,QAAQ,SAAS;EAC1D,MAAM,OAAO,MAAM;EAGnB,IAAI,KAAK,cAAe,iBAAiB,cAAc,KAAK,GAAG,GAC7D;EAQF,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,YAAY,UAAU,MAAM,GAAG,OAAO,MAAM;EAClD,IAAI,aAAa,SAAS,QAAQ,WAAW,MAAM,MAAM,GACvD,OAAO,KAAK;CAEhB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,iBAAoB,SAA+C;CAEjF,MAAM,QAAyB;EAC7B,QAAQ;EACR,SAAS,KAAA;CACX;CAIA,MAAM,WAAW,eAAe;EAAE,OAAO;EAAU,aAAa;CAAO,CAAC;CAMxE,MAAM,uBAAmC;EACvC,MAAM,aAAa,QAAQ,WAAW;EACtC,MAAM,aAAa,QAAQ,WAAW;EAItC,IAAI,MAAM,gBACR,YACA,MAAM,QACN,YACA,SAAS,GACT,QAAQ,aACV;EACA,IAAI,OAAO,MACT,MAAM,gBAAgB,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,QAAQ,aAAa;EAGzF,IAAI,OAAO,MAAM;GACf,QAAQ,mBAAmB,GAAG;GAC9B,QAAQ,eAAe,GAAG;EAC5B;EAEA,OAAO;CACT;CAEA,MAAM,wBAAwB;EAC5B,aAAa,MAAM,OAAO;EAC1B,MAAM,UAAU,iBAAiB;GAC/B,MAAM,SAAS;EACjB,GAAG,0BAA0B;CAC/B;CAKA,MAAM,oBAAkE,MAAM;EAC5E,IAAI,QAAQ,YAAY;EAExB,IAAI,MAAM,OAAO,SAAS,KAAK,EAAE,QAAQ,KAAK;GAC5C,EAAE,eAAe;GAIjB,EAAE,gBAAgB;GAClB,MAAM,UAAU;GAChB,eAAe;GACf,gBAAgB;EAClB;CACF;CAKA,MAAM,aAA2D,MAAM;EACrE,IAAI,QAAQ,YAAY;EAExB,MAAM,YAAY,gBAAgB,EAAE,GAAG;EAKvC,IACE,CAAC,aACD,EAAE,WACF,EAAE,WACF,EAAE,UACF,CAAC,EAAE,cAAc,SAAS,EAAE,MAAqB,KAChD,MAAM,OAAO,WAAW,KAAK,cAAc,KAE5C;EAGF,MAAM,UAAU;EAIhB,IAFY,eAEN,KAAK,MAAM;GACf,EAAE,eAAe;GAGjB,EAAE,gBAAgB;EACpB,OAAO;GAGL,MAAM,SAAS;GACf,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,KAAA;GAChB;EACF;EAEA,gBAAgB;CAClB;CAIA,gBAAgB;EACd,aAAa,MAAM,OAAO;CAC5B,CAAC;CAED,OAAO,EACL,iBAAiB;EAQf;EACA;CACF,EACF;AACF"}