diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte index e2f96cd24b..e0bbc002fb 100644 --- a/src/Accordion/AccordionItem.svelte +++ b/src/Accordion/AccordionItem.svelte @@ -14,24 +14,13 @@ /** Specify the ARIA label for the accordion item chevron icon */ export let iconDescription = "Expand/Collapse"; - import { onMount, getContext } from "svelte"; + import { getContext } from "svelte"; import ChevronRight from "../icons/ChevronRight.svelte"; - let initialDisabled = disabled; - - const ctx = getContext("Accordion"); - const unsubscribe = ctx.disableItems.subscribe((value) => { - if (!value && initialDisabled) return; - disabled = value; - }); - let animation = undefined; - onMount(() => { - return () => { - unsubscribe(); - }; - }); + const { disableItems } = getContext("Accordion"); + $: disabled = $disableItems; diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte index 48fd5b4def..9f9f43f87b 100644 --- a/src/ContentSwitcher/Switch.svelte +++ b/src/ContentSwitcher/Switch.svelte @@ -17,25 +17,19 @@ /** Obtain a reference to the button HTML element */ export let ref = null; - import { afterUpdate, getContext, onMount } from "svelte"; + import { afterUpdate, getContext } from "svelte"; - const ctx = getContext("ContentSwitcher"); + const { add, update, change, currentId } = getContext("ContentSwitcher"); - ctx.add({ id, text, selected }); + add({ id, text, selected }); - const unsubscribe = ctx.currentId.subscribe(($) => { - selected = $ === id; - }); + $: selected = $currentId === id; afterUpdate(() => { if (selected) { ref.focus(); } }); - - onMount(() => { - return () => unsubscribe(); - }); @@ -52,7 +46,7 @@ {...$$restProps} on:click on:click|preventDefault="{() => { - ctx.update(id); + update(id); }}" on:mouseover on:mouseenter @@ -60,9 +54,9 @@ on:keydown on:keydown="{({ key }) => { if (key === 'ArrowRight') { - ctx.change(1); + change(1); } else if (key === 'ArrowLeft') { - ctx.change(-1); + change(-1); } }}" > diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte index 09ae7c919c..665994c146 100644 --- a/src/ProgressIndicator/ProgressStep.svelte +++ b/src/ProgressIndicator/ProgressStep.svelte @@ -23,7 +23,7 @@ /** Set an id for the top-level element */ export let id = "ccs-" + Math.random().toString(36); - import { onMount, getContext } from "svelte"; + import { getContext } from "svelte"; import CheckmarkOutline from "../icons/CheckmarkOutline.svelte"; import Warning from "../icons/Warning.svelte"; import CircleDash from "../icons/CircleDash.svelte"; @@ -35,20 +35,11 @@ getContext("ProgressIndicator"); $: add({ id, complete, disabled }); - - const unsubscribe = stepsById.subscribe((value) => { - if (value[id]) { - step = value[id]; - current = step.current; - complete = step.complete; - } - }); - - onMount(() => { - return () => { - unsubscribe(); - }; - }); + $: if ($stepsById[id]) { + step = $stepsById[id]; + current = step.current; + complete = step.complete; + } diff --git a/src/Tooltip/TooltipFooter.svelte b/src/Tooltip/TooltipFooter.svelte index 946bbef349..eb096670b3 100644 --- a/src/Tooltip/TooltipFooter.svelte +++ b/src/Tooltip/TooltipFooter.svelte @@ -2,23 +2,14 @@ /** Specify a selector to be focused inside the footer when opening the tooltip */ export let selectorPrimaryFocus = "a[href], button:not([disabled])"; - import { getContext, onMount } from "svelte"; + import { getContext } from "svelte"; let ref = null; let open = false; - const ctx = getContext("Tooltip"); - const unsubscribe = ctx.tooltipOpen.subscribe((tooltipOpen) => { - open = tooltipOpen; - }); + const { tooltipOpen } = getContext("Tooltip"); - onMount(() => { - return () => { - unsubscribe(); - }; - }); - - $: if (open && ref) { + $: if ((open || $tooltipOpen) && ref) { const node = ref.querySelector(selectorPrimaryFocus); if (node) node.focus(); }