@abcnews/components-builder 0.0.12 → 0.0.14

package/README.md

@@ -136,6 +136,11 @@ You can provide your own footer elements to make either an okay/cancel alert, or
 
 This uses the native dialogue element, so focus will always be inside the modal. Take care not to show more than one at a time.
 
+Use the `position` prop to control where the modal appears:
+
+- `centre` (default): Centred in the screen with a full dark backdrop.
+- `right`: Aligned to the right, with a gradient backdrop that leaves your viz visible. Especially useful when the modal changes the viz reactively, so you can see the results.
+
 ```svelte
 {#snippet children()}
   Hello this is the modal content
@@ -144,7 +149,7 @@ This uses the native dialogue element, so focus will always be inside the modal.
   <button onclick={() => (isOpen = false)}>Ok!</button>
 {/snippet}
 
-<Modal title="Example modal" {children} {footerChildren} />
+<Modal title="Example modal" {children} {footerChildren} position="right" />
 ```
 
 ## Google Doc Scrollyteller

package/dist/ContextMenu/ContextMenu.svelte

@@ -53,51 +53,58 @@
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.5rem;
     animation: fadein 0.2s;
-    &::backdrop {
-      animation: fadein 0.2s;
-      background: rgba(0, 0, 0, 0.05);
-    }
-    :global {
-      .menu {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      .menu--double {
-        display: grid;
-        grid-template-columns: 50% 50%;
-        gap: 0.25rem;
-        & li {
-          white-space: nowrap;
-        }
-      }
-      .section {
-        padding: 0.75rem;
-      }
+  }
 
-      .item,
-      button.item {
-        display: block;
-        width: 100%;
-        border: none;
-        background: none;
-        text-align: left;
-        cursor: pointer;
-        margin: 0 !important;
-        font-size: 1rem;
-        &:focus-visible,
-        &:hover {
-          background: Highlight;
-          color: HighlightText;
-        }
-      }
-      hr {
-        border: none;
-        margin: 0;
-        padding: 0;
-        border-bottom: 1px solid var(--border);
-      }
-    }
+  .dialog::backdrop {
+    animation: fadein 0.2s;
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.dialog .menu) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :global(.dialog .menu--double) {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    gap: 0.25rem;
+  }
+
+  :global(.dialog .menu--double li) {
+    white-space: nowrap;
+  }
+
+  :global(.dialog .section) {
+    padding: 0.75rem;
+  }
+
+  :global(.dialog .item),
+  :global(.dialog button.item) {
+    display: block;
+    width: 100%;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    margin: 0 !important;
+    font-size: 1rem;
+  }
+
+  :global(.dialog .item:focus-visible),
+  :global(.dialog .item:hover),
+  :global(.dialog button.item:focus-visible),
+  :global(.dialog button.item:hover) {
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  :global(.dialog hr) {
+    border: none;
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--border);
   }
 
   @keyframes fadein {

package/dist/MarkerAdmin/MarkerAdmin.svelte

@@ -24,7 +24,7 @@
 
   let hasLoaded = $state(false);
   let markers = $state<Marker[]>([]);
-  let mode = $state(Object.keys(prefixes)?.[0]);
+  let mode = $state(untrack(() => Object.keys(prefixes)?.[0]));
 
   /** which button should show the success indicator */
   let successIndicator = $state("");
@@ -33,7 +33,9 @@
     window.location.pathname
       .match(/\/news-projects\/[^/]+\/(\d+\.\d+\.\d+)/)
       ?.slice(1) || [];
-  const localStorageKey = `ABC_NEWS_BUILDER_${projectName.toUpperCase().replace(/-/g, "_")}`;
+  const localStorageKey = $derived(
+    `ABC_NEWS_BUILDER_${projectName.toUpperCase().replace(/-/g, "_")}`,
+  );
 
   /** Load & sanitise markers from localStorage on initial load */
   $effect(() => {
@@ -76,7 +78,7 @@
     }
 
     interval = setInterval(() => {
-      const goodMarkers = (marker) =>
+      const goodMarkers = (marker: Marker) =>
         !marker.deleted || marker.deleted > Date.now() - 5000;
       if (!_markers.every(goodMarkers)) {
         markers = _markers.filter(goodMarkers);
@@ -240,7 +242,7 @@
       }
 
       let sanitisedMarker = text;
-      Object.keys(prefixes).forEach(
+      Object.values(prefixes).forEach(
         (prefix) => (sanitisedMarker = sanitisedMarker.replace(prefix, "")),
       );
 

package/dist/Modal/Modal.svelte

@@ -1,116 +1,138 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { X } from 'svelte-bootstrap-icons';
+  import { onMount } from "svelte";
+  import { X } from "svelte-bootstrap-icons";
 
-	let { children, footerChildren, title = '', onClose = () => {} } = $props();
-	let dialogEl = $state<HTMLDialogElement | undefined>();
-	let rect = $state<DOMRect>();
-	$effect(() => {
-		if (dialogEl) {
-			rect = dialogEl.getBoundingClientRect();
-		}
-	});
-	onMount(() => {
-		dialogEl?.showModal();
-		return () => {
-			dialogEl?.close();
-		};
-	});
+  let {
+    children,
+    footerChildren,
+    title = "",
+    onClose = () => {},
+    position = "centre",
+  } = $props<{
+    children?: any;
+    footerChildren?: any;
+    title?: string;
+    onClose?: () => void;
+    position?: string;
+  }>();
+  let dialogEl = $state<HTMLDialogElement | undefined>();
+  let rect = $state<DOMRect>();
+  $effect(() => {
+    if (dialogEl) {
+      rect = dialogEl.getBoundingClientRect();
+    }
+  });
+  onMount(() => {
+    dialogEl?.showModal();
+    return () => {
+      dialogEl?.close();
+    };
+  });
 
-	/* Proxy required otherwise Typescript complains */
-	function onCloseTypescriptProxy() {
-		onClose();
-	}
+  function onCloseTypescriptProxy(e) {
+    if (e.target === dialogEl) {
+      onClose();
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- We must track clicks on the modal so clicking the backdrop can close it. This is not an accessibility issue. -->
 <dialog
-	class="modal"
-	bind:this={dialogEl}
-	onclick={onCloseTypescriptProxy}
-	onclose={onCloseTypescriptProxy}
+  bind:this={dialogEl}
+  class="modal modal--{position}"
+  onclick={onCloseTypescriptProxy}
+  onclose={onCloseTypescriptProxy}
 >
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div onclick={(e) => e.stopPropagation()}>
-		{#if title}
-			<div class="modal-title">
-				<h1>
-					{title}
-				</h1>
-				<button class="modal-close" onclick={onCloseTypescriptProxy}>
-					<X />
-				</button>
-			</div>
-		{/if}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div onclick={(e) => e.stopPropagation()}>
+    {#if title}
+      <div class="modal-title">
+        <h1>
+          {title}
+        </h1>
+        <button class="modal-close" onclick={onCloseTypescriptProxy}>
+          <X />
+        </button>
+      </div>
+    {/if}
 
-		<div class="modal-content">
-			{@render children?.()}
-		</div>
-		{#if footerChildren}
-			<div class="modal-footer">
-				{@render footerChildren?.()}
-			</div>
-		{/if}
-	</div>
+    <div class="modal-content">
+      {@render children?.()}
+    </div>
+    {#if footerChildren}
+      <div class="modal-footer">
+        {@render footerChildren?.()}
+      </div>
+    {/if}
+  </div>
 </dialog>
 
 <style>
-	.modal {
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		margin: 0;
-		padding: 0;
-		background: var(--background);
-		color: var(--text);
-		border: 1px solid var(--border);
-		border-radius: 0.5rem;
-		animation: fadein 0.2s;
-		&::backdrop {
-			animation: fadein 0.2s;
-			background: rgba(0, 0, 0, 0.8);
-		}
-	}
+  .modal {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+    padding: 0;
+    background: var(--background);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    animation: fadein 0.2s;
+    &::backdrop {
+      animation: fadein 0.2s;
+      background: rgba(0, 0, 0, 0.8);
+    }
+  }
+  .modal--right {
+    left: 100%;
+    transform: translate(calc(-100% - 2rem), -50%);
+    &::backdrop {
+      animation: fadein 0.2s;
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 50%);
+    }
+  }
 
-	.modal-title {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0.5rem 0.5rem 0.5rem 1rem;
-		gap: 1rem;
-		border-bottom: 1px solid var(--border);
-	}
-	.modal-title h1 {
-		font-size: 1rem;
-		margin: 0;
-		padding: 0;
-		flex: 1;
-	}
-	button.modal-close {
-		width: 2rem;
-		border: none;
-		height: 2rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	.modal-content {
-		padding: 0.5rem 1rem;
-		max-height: 50vh;
-		overflow: auto;
-	}
-	.modal-footer {
-		text-align: right;
-		border-top: 1px solid var(--border);
-		padding: 0.5rem 1rem;
-	}
-	@keyframes fadein {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
+  .modal-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+    gap: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .modal-title h1 {
+    font-size: 1rem;
+    margin: 0;
+    padding: 0;
+    flex: 1;
+  }
+  button.modal-close {
+    width: 2rem;
+    border: none;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .modal-content {
+    padding: 0.5rem 1rem;
+    max-height: 50vh;
+    overflow: hidden auto;
+  }
+  .modal-footer {
+    text-align: right;
+    border-top: 1px solid var(--border);
+    padding: 0.5rem 1rem;
+  }
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 </style>

package/dist/Modal/Modal.svelte.d.ts

@@ -1,8 +1,10 @@
-declare const Modal: import("svelte").Component<{
-    children: any;
-    footerChildren: any;
+type $$ComponentProps = {
+    children?: any;
+    footerChildren?: any;
     title?: string;
-    onClose?: Function;
-}, {}, "">;
+    onClose?: () => void;
+    position?: string;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/Typeahead/Typeahead.svelte

@@ -17,7 +17,7 @@
   } = $props();
 
   const uniqueId = "list" + (Math.random() * 10e15).toString(16);
-  let selectedValues = $state<string[]>(value);
+  let selectedValues = $state<string[]>(untrack(() => value));
   let isFocused = $state(false);
   let inputElement = $state<HTMLInputElement>();
   let inputValue = $state("");

package/dist/UpdateChecker/UpdateChecker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Modal from "../Modal/Modal.svelte";
-  import { onMount } from "svelte";
+  import { onMount, untrack } from "svelte";
 
   type NewVersion = {
     newVersion: string;
@@ -12,9 +12,10 @@
     buttonText = "Open new builder",
   }: { overrideNewVersion?: NewVersion; buttonText?: string } = $props();
 
-  let newVersion = $state<NewVersion | undefined>(overrideNewVersion);
-  // svelte-ignore state_referenced_locally
-  let isOpen = $state(!!newVersion);
+  let newVersion = $state<NewVersion | undefined>(
+    untrack(() => overrideNewVersion),
+  );
+  let isOpen = $state(untrack(() => !!newVersion));
 
   /**
    * Check for a new version of the given project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/components-builder",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",