@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Framer/Typeahead/fuzzy.js

@@ -1,133 +1,74 @@
-/*
- * Fuzzy
- * https://github.com/myork/fuzzy
- *
- * Copyright (c) 2012 Matt York
- * Licensed under the MIT license.
- */
-
-const fuzzy = {};
-
-// Return all elements of `array` that have a fuzzy
-// match against `pattern`.
-fuzzy.simpleFilter = function (pattern, array) {
-  return array.filter(function (str) {
-    return fuzzy.test(pattern, str);
-  });
-};
-
-// Does `pattern` fuzzy match `str`?
-fuzzy.test = function (pattern, str) {
-  return fuzzy.match(pattern, str) !== null;
-};
-
-// If `pattern` matches `str`, wrap each matching character
-// in `opts.pre` and `opts.post`. If no match, return null
-fuzzy.match = function (pattern, str, opts) {
-  opts = opts || {};
-  let patternIdx = 0;
-  const result = [];
-  const len = str.length;
-  let totalScore = 0;
-  let currScore = 0;
-  // prefix
-  const pre = opts.pre || '';
-  // suffix
-  const post = opts.post || '';
-  // String to compare against. This might be a lowercase version of the
-  // raw string
-  const compareString = (opts.caseSensitive && str) || str.toLowerCase();
-  let ch;
-
-  pattern = (opts.caseSensitive && pattern) || pattern.toLowerCase();
-
-  // For each character in the string, either add it to the result
-  // or wrap in template if it's the next string in the pattern
-  for (let idx = 0; idx < len; idx++) {
-    ch = str[idx];
-    if (compareString[idx] === pattern[patternIdx]) {
-      ch = pre + ch + post;
-      patternIdx += 1;
-
-      // consecutive characters should increase the score more than linearly
-      currScore += 1 + currScore;
-    } else {
-      currScore = 0;
-    }
-    totalScore += currScore;
-    result[result.length] = ch;
-  }
-
-  // return rendered string if we have a match for every char
-  if (patternIdx === pattern.length) {
-    // if the string is an exact match with pattern, totalScore should be maxed
-    totalScore = compareString === pattern ? Infinity : totalScore;
-    return { rendered: result.join(''), score: totalScore };
-  }
-
-  return null;
-};
-
-// The normal entry point. Filters `arr` for matches against `pattern`.
-// It returns an array with matching values of the type:
-//
-//     [{
-//         string:   '<b>lah' // The rendered string
-//       , index:    2        // The index of the element in `arr`
-//       , original: 'blah'   // The original element in `arr`
-//     }]
-//
-// `opts` is an optional argument bag. Details:
-//
-//    opts = {
-//        // string to put before a matching character
-//        pre:     '<b>'
-//
-//        // string to put after matching character
-//      , post:    '</b>'
-//
-//        // Optional function. Input is an entry in the given arr`,
-//        // output should be the string to test `pattern` against.
-//        // In this example, if `arr = [{crying: 'koala'}]` we would return
-//        // 'koala'.
-//      , extract: function(arg) { return arg.crying; }
-//    }
-fuzzy.filter = function (pattern, arr, opts) {
-  if (!arr || arr.length === 0) {
-    return [];
-  }
-  if (typeof pattern !== 'string') {
-    return arr;
-  }
-  opts = opts || {};
-  return (
-    arr
-      .reduce(function (prev, element, idx, _arr) {
-        let str = element;
-        if (opts.extract) {
-          str = opts.extract(element);
+const fuzzy = {
+    simpleFilter(pattern, array) {
+        return array.filter((str) => this.test(pattern, str));
+    },
+    test(pattern, str) {
+        return this.match(pattern, str) !== null;
+    },
+    match(pattern, str, opts = {}) {
+        let patternIdx = 0;
+        const result = [];
+        const len = str.length;
+        let totalScore = 0;
+        let currScore = 0;
+        const pre = opts.pre || '';
+        const post = opts.post || '';
+        const compareString = opts.caseSensitive ? str : str.toLowerCase();
+        pattern = opts.caseSensitive ? pattern : pattern.toLowerCase();
+        for (let idx = 0; idx < len; idx++) {
+            let ch = str[idx];
+            if (compareString[idx] === pattern[patternIdx]) {
+                ch = pre + ch + post;
+                patternIdx += 1;
+                currScore += 1 + currScore;
+            }
+            else {
+                currScore = 0;
+            }
+            totalScore += currScore;
+            result[result.length] = ch;
+        }
+        if (patternIdx === pattern.length) {
+            totalScore = compareString === pattern ? Infinity : totalScore;
+            return { rendered: result.join(''), score: totalScore };
+        }
+        return null;
+    },
+    filter(pattern, arr, opts = {}) {
+        if (!arr || arr.length === 0) {
+            return [];
         }
-        const rendered = fuzzy.match(pattern, str, opts);
-        if (rendered != null) {
-          prev[prev.length] = {
-            string: rendered.rendered,
-            score: rendered.score,
-            index: idx,
-            original: element,
-          };
+        if (typeof pattern !== 'string') {
+            return arr.map((element, index) => ({
+                string: element,
+                score: 0,
+                index,
+                original: element,
+            }));
         }
-        return prev;
-      }, [])
-
-      // Sort by score. Browsers are inconsistent wrt stable/unstable
-      // sorting, so force stable by using the index in the case of tie.
-      // See http://ofb.net/~sethml/is-sort-stable.html
-      .sort(function (a, b) {
-        const compare = b.score - a.score;
-        if (compare) return compare;
-        return a.index - b.index;
-      })
-  );
+        return arr
+            .reduce((prev, element, idx) => {
+            let str = element;
+            if (opts.extract) {
+                str = opts.extract(element);
+            }
+            const rendered = this.match(pattern, str, opts);
+            if (rendered != null) {
+                prev.push({
+                    string: rendered.rendered,
+                    score: rendered.score,
+                    index: idx,
+                    original: element,
+                });
+            }
+            return prev;
+        }, [])
+            .sort((a, b) => {
+            const compare = b.score - a.score;
+            if (compare)
+                return compare;
+            return a.index - b.index;
+        });
+    },
 };
-
 export default fuzzy;

package/dist/components/Framer/Typeahead/index.svelte

@@ -1,85 +1,106 @@
-<script>
-  /**
-   * @typedef {Object} TItem
-   * @property {number} index
-   * @property {string} embed
-   */
-
-  export let id = 'typeahead-' + Math.random().toString(36);
-  export let value = '';
-
-  /** @type {TItem[]} */
-  export let data = [];
-
-  /** @type {(item: TItem) => any} */
-  export let extract = (item) => item;
-
-  /** @type {(item: TItem) => boolean} */
-  export let disable = (_item) => false;
-
-  /** @type {(item: TItem) => boolean} */
-  export let filter = (_item) => false;
-
-  /** Set to `false` to prevent the first result from being selected */
-  export let autoselect = true;
-
-  /**
-   * Set to `keep` to keep the search field unchanged after select, set to `clear` to auto-clear search field
-   * @type {"update" | "clear" | "keep"}
-   */
-  export let inputAfterSelect = 'update';
-
-  /** @type {{ original: TItem; index: number; score: number; string: string; disabled?: boolean; }[]} */
-  export let results = [];
-
-  /** Set to `true` to re-focus the input after selecting a result */
-  export let focusAfterSelect = false;
-
-  /** Set to `true` to only show results when the input is focused */
-  export let showDropdownOnFocus = false;
-
-  /**
-   * Specify the maximum number of results to return
-   * @type {number}
-   */
-  export let limit = Infinity;
-
-  import fuzzy from './fuzzy.js';
-  import Search from 'svelte-search';
-  import { tick, createEventDispatcher, afterUpdate } from 'svelte';
-
-  const dispatch = createEventDispatcher();
-
-  let comboboxRef = null;
-  let searchRef = null;
-  let hideDropdown = false;
-  let selectedIndex = -1;
-  let prevResults = '';
-  let isFocused = false;
-
-  $: options = { pre: '<mark>', post: '</mark>', extract };
-  $: results =
-    value !== '' ?
-      fuzzy
-        .filter(value, data, options)
-        .filter(({ score }) => score > 0)
-        .slice(0, limit)
-        .filter((result) => !filter(result.original))
-        .map((result) => ({ ...result, disabled: disable(result.original) }))
-    : data.map((d) => ({ string: extract(d), original: d }));
-
-  $: resultsId = results.map((result) => extract(result.original)).join('');
-  $: showResults = !hideDropdown && results.length > 0 && isFocused;
-  $: if (showDropdownOnFocus) {
-    showResults = showResults && isFocused;
+<script lang="ts">
+  type TItem = {
+    index: number;
+    embed: string;
+    disabled?: boolean;
+  };
+
+  type SelectedItem = {
+    selectedIndex: number;
+    searched: string;
+    selected: string;
+    original: TItem;
+    originalIndex: number;
+  };
+
+  interface Props {
+    id?: string;
+    value: string;
+    label: string;
+    data: TItem[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    extract?: (item: TItem) => any;
+    disable?: (item: TItem) => boolean;
+    filter?: (item: TItem) => boolean;
+    onselect: (item: SelectedItem) => void;
+    autoselect?: boolean;
+    inputAfterSelect?: 'update' | 'clear' | 'keep';
+    focusAfterSelect?: boolean;
+    showDropdownOnFocus?: boolean;
+    limit?: number;
+    noResults?: Snippet;
   }
 
-  afterUpdate(() => {
+  let {
+    id = 'typeahead-' + Math.random().toString(36),
+    value = '',
+    label = '',
+    data = [],
+    extract = (item) => item,
+    disable = (_item) => false,
+    filter = (_item) => false,
+    autoselect = true,
+    // Set to `keep` to keep the search field unchanged after select, set to `clear` to auto-clear search field
+    inputAfterSelect = 'update',
+    /** Set to `true` to re-focus the input after selecting a result */
+    focusAfterSelect = false,
+    /** Set to `true` to only show results when the input is focused */
+    showDropdownOnFocus = false,
+    /** Specify the maximum number of results to return */
+    limit = Infinity,
+    noResults,
+    onselect,
+    ...restProps
+  }: Props = $props();
+
+  import fuzzy from './fuzzy';
+  import Search from './Search.svelte';
+  import { tick, type Snippet } from 'svelte';
+
+  let comboboxRef: HTMLElement | null = $state(null);
+  let searchRef: HTMLElement | null = $state(null);
+  let hideDropdown = $state(true);
+  let selectedIndex = $state(-1);
+  let prevResults = $state('');
+  let isFocused = $state(false);
+
+  let options = $derived({ pre: '<mark>', post: '</mark>', extract });
+  let results = $derived.by(() => {
+    return value !== '' ?
+        fuzzy
+          .filter(value, data, options)
+          .filter(({ score }) => score > 0)
+          .slice(0, limit)
+          .filter((result) => !filter(result.original))
+          .map((result) => ({ ...result, disabled: disable(result.original) }))
+      : data.map((d, index) => ({
+          index,
+          string: extract(d),
+          original: d,
+          disabled: disable(d),
+        }));
+  });
+
+  let resultsId = $derived(
+    results.map((result) => extract(result.original)).join('')
+  );
+
+  let showResults: boolean = $state(
+    // svelte-ignore state_referenced_locally
+    !hideDropdown && results.length > 0 && isFocused
+  );
+  $effect(() => {
+    if (showDropdownOnFocus) {
+      showResults = showResults && isFocused;
+    }
+  });
+
+  $effect(() => {
     if (prevResults !== resultsId && autoselect) {
       selectedIndex = getNextNonDisabledIndex();
     }
 
-    if (prevResults !== resultsId && !$$slots['no-results']) {
+    if (prevResults !== resultsId && !noResults) {
       hideDropdown = results.length === 0;
     }
 
@@ -89,7 +110,7 @@
   async function select() {
     const result = results[selectedIndex];
 
-    if (result.disabled) return;
+    if (result.original.disabled) return;
 
     const selectedValue = extract(result.original);
     const searchedValue = value;
@@ -97,7 +118,7 @@
     if (inputAfterSelect === 'clear') value = '';
     if (inputAfterSelect === 'update') value = selectedValue;
 
-    dispatch('select', {
+    onselect({
       selectedIndex,
       searched: searchedValue,
       selected: selectedValue,
@@ -107,11 +128,10 @@
 
     await tick();
 
-    if (focusAfterSelect) searchRef.focus();
+    if (focusAfterSelect) searchRef?.focus();
     close();
   }
 
-  /** @type {() => number} */
   function getNextNonDisabledIndex() {
     let index = 0;
     let disabled = results[index]?.disabled ?? false;
@@ -129,8 +149,7 @@
     return index;
   }
 
-  /** @type {(direction: -1 | 1) => void} */
-  function change(direction) {
+  function change(direction: -1 | 1) {
     let index =
       direction === 1 && selectedIndex === results.length - 1 ?
         0
@@ -157,55 +176,49 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
-    if (!hideDropdown && !comboboxRef?.contains(target)) {
+  onclick={({ target }) => {
+    console.log('HELLO', !comboboxRef?.contains(target as Node));
+    if (!hideDropdown && !comboboxRef?.contains(target as Node)) {
       close();
     }
-  }}"
+  }}
 />
 
 <div
   data-svelte-typeahead
-  bind:this="{comboboxRef}"
+  bind:this={comboboxRef}
   role="combobox"
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
-  class:dropdown="{results.length > 0}"
+  class:dropdown={results.length > 0}
   aria-controls="{id}-listbox"
-  aria-expanded="{showResults ||
-    (isFocused && value.length > 0 && results.length === 0)}"
+  aria-expanded={showResults ||
+    (isFocused && value.length > 0 && results.length === 0)}
   id="{id}-typeahead"
 >
   <Search
+    bind:value
     {id}
-    removeFormAriaAttributes="{true}"
-    {...$$restProps}
-    bind:ref="{searchRef}"
+    {label}
+    removeFormAriaAttributes={true}
+    bind:ref={searchRef!}
     aria-autocomplete="list"
     aria-controls="{id}-listbox"
     aria-labelledby="{id}-label"
-    aria-activedescendant="{(
+    aria-activedescendant={(
       selectedIndex >= 0 && !hideDropdown && results.length > 0
     ) ?
       `${id}-result-${selectedIndex}`
-    : null}"
-    bind:value
-    on:type
-    on:input
-    on:change
-    on:focus
-    on:focus="{() => {
+    : null}
+    onfocus={() => {
       open();
       if (showDropdownOnFocus) {
         showResults = true;
         isFocused = true;
       }
-    }}"
-    on:clear
-    on:clear="{open}"
-    on:blur
-    on:keydown
-    on:keydown="{(e) => {
+    }}
+    onclear={open}
+    onkeydown={(e: KeyboardEvent) => {
       if (results.length === 0) return;
 
       switch (e.key) {
@@ -227,41 +240,40 @@
           close();
           break;
       }
-    }}"
+    }}
+    {...restProps}
   />
   <ul
-    class:svelte-typeahead-list="{true}"
+    class:svelte-typeahead-list={true}
     role="listbox"
     aria-labelledby="{id}-label"
     id="{id}-listbox"
   >
-    {#if showResults}
+    {#if showResults && !hideDropdown}
       {#each results as result, index}
         <li
           role="option"
           id="{id}-result-{index}"
-          class:selected="{selectedIndex === index}"
-          class:disabled="{result.disabled}"
-          aria-selected="{selectedIndex === index}"
-          on:click="{() => {
+          class:selected={selectedIndex === index}
+          class:disabled={result.disabled}
+          aria-selected={selectedIndex === index}
+          onclick={() => {
             if (result.disabled) return;
             selectedIndex = index;
             select();
-          }}"
-          on:keyup="{(e) => {
+          }}
+          onkeyup={(e) => {
             if (e.key !== 'Enter') return;
             if (result.disabled) return;
             selectedIndex = index;
             select();
-          }}"
-          on:mouseenter="{() => {
+          }}
+          onmouseenter={() => {
             if (result.disabled) return;
             selectedIndex = index;
-          }}"
+          }}
         >
-          <slot {result} {index} {value}>
-            {@html result.string}
-          </slot>
+          {@html result.string}
         </li>
       {/each}
     {/if}