@reuters-graphics/graphics-components 0.0.5 → 0.0.8

package/dist/@types/components/Framer/Typeahead/index.svelte.d.ts

@@ -62,9 +62,6 @@ export default class Index extends SvelteComponentTyped<{
         index: any;
         value: string;
     };
-    'no-results': {
-        value: string;
-    };
 }> {
 }
 export type IndexProps = typeof __propDef.props;
@@ -135,9 +132,6 @@ declare const __propDef: {
             index: any;
             value: string;
         };
-        'no-results': {
-            value: string;
-        };
     };
 };
 export {};

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

@@ -147,7 +147,7 @@
           .slice(0, limit)
           .filter((result) => !filter(result.original))
           .map((result) => ({ ...result, disabled: disable(result.original) }))
-      : data.slice(0, 10).map((d) => ({ string: extract(d), original: d }));
+      : data.map((d) => ({ string: extract(d), original: d }));
 
   $: resultsId = results.map((result) => extract(result.original)).join('');
   $: showResults = !hideDropdown && results.length > 0 && isFocused;
@@ -171,7 +171,8 @@
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
   class:dropdown="{results.length > 0}"
-  aria-expanded="{showResults}"
+  aria-expanded="{showResults ||
+    (isFocused && value.length > 0 && results.length === 0)}"
   id="{id}-typeahead"
 >
   <Search
@@ -257,37 +258,45 @@
         </li>
       {/each}
     {/if}
-    {#if $$slots['no-results'] && !hideDropdown && value.length > 0 && results.length === 0}
-      <div class:no-results="{true}">
-        <slot name="no-results" value="{value}" />
-      </div>
+    {#if value.length > 0 && results.length === 0}
+      <li class="no-results disabled">No embeds found...</li>
     {/if}
   </ul>
 </div>
 
 <style>[data-svelte-typeahead] {
   position: relative;
-  background-color: #fff;
 }
 
 ul {
   position: absolute;
   top: 100%;
   left: 0;
-  width: 100%;
+  width: calc(100% - 2px);
   padding: 0;
+  margin: 0;
   list-style: none;
-  background-color: inherit;
+  background-color: #fff;
 }
 
 [aria-expanded=true] ul {
   z-index: 1;
   border: 1px solid #ddd;
+  max-height: 50vh;
+  overflow-y: scroll;
 }
 
 li,
-.no-results {
+li.no-results {
   padding: 0.25rem 1rem;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  color: #333;
+}
+
+li.no-results {
+  color: #333;
+  font-size: 0.85rem;
+  font-style: italic;
 }
 
 li {
@@ -334,6 +343,7 @@ li:hover {
   font-size: 1rem;
   border: 0;
   border-radius: 0 !important;
+  background-color: #fff;
   border: 1px solid #ddd;
   font-family: var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",