@reuters-graphics/graphics-components 0.0.7 → 0.0.10

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/Framer.svelte

@@ -14,7 +14,15 @@
   export let minFrameWidth = 320;
   export let maxFrameWidth = 1200;
 
-  let activeEmbed = embeds[0];
+  const getDefaultEmbed = () => {
+    if (typeof window === 'undefined') return embeds[0];
+    const lastActiveEmbed = window.localStorage.getItem('framer-active-embed');
+    if (!lastActiveEmbed) return embeds[0];
+    if (embeds.indexOf(lastActiveEmbed) > -1) return lastActiveEmbed;
+    return embeds[0];
+  };
+
+  let activeEmbed = getDefaultEmbed();
 
   $: embedTitles = getUniqNames(embeds);
 
@@ -66,6 +74,11 @@
       placeholder="{'Search'}"
       showDropdownOnFocus="{true}"
       on:select="{({ detail }) => {
+        if (typeof window !== 'undefined')
+          window.localStorage.setItem(
+            'framer-active-embed',
+            detail.original.embed
+          );
         activeEmbed = detail.original.embed;
       }}"
     />

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

@@ -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,10 +258,8 @@
         </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>
@@ -273,11 +272,11 @@ ul {
   position: absolute;
   top: 100%;
   left: 0;
-  width: calc(100% - 2px);
+  width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
-  background-color: inherit;
+  background-color: #fff;
 }
 
 [aria-expanded=true] ul {
@@ -288,12 +287,18 @@ ul {
 }
 
 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 {
   cursor: pointer;
 }

package/package.json

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