@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/Tooltip.svelte

@@ -1,240 +1,106 @@
-<script>import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
-import { onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { portal } from "./actions/portal";
-import { prefersReducedMotion } from "./stores/prefersReducedMotion";
-export let disabled = false;
-export let showOn = "hover";
-export let hoverDelayMilliseconds = 1e3;
+<script>import { onMount } from 'svelte';
+import Callout from './Callout.svelte';
+// ----- Props ----- //
+// Forwarded to Callout
+export let conditionalRender = true;
+export let crossAxisOffset = 0;
+export let mainAxisOffset = 0;
 export let open = false;
-export let placement = "top";
-export let portalTarget = void 0;
+export let placement = 'bottom-start';
+export let portalHost = undefined;
+export let variant = '';
+/** When true, the tooltip is disabled and will not be shown. */
+export let disabled = false;
+/** The duration of mouse hover before showing the tooltip. */
+export let hoverDelayMilliseconds = 1000;
+// ----- State ----- //
 let originRef;
-let tooltipRef;
-let arrowRef;
-let position = void 0;
-$:
-  reference = $$slots.default ? originRef?.previousElementSibling : void 0;
-const computeTooltipPosition = async () => {
-  if (reference && tooltipRef && arrowRef) {
-    const floatingOffset = Math.sqrt(2 * arrowRef.offsetWidth ** 2) / 2;
-    const middleware = [
-      offset(floatingOffset),
-      flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-      arrow({
-        element: arrowRef
-      })
-    ];
-    position = await computePosition(reference, tooltipRef, {
-      placement,
-      middleware
-    });
-  } else {
-    position = void 0;
-  }
-};
-let cleanupAutoUpdate = () => {
-};
-const autoUpdateTooltipPosition = () => {
-  cleanupAutoUpdate();
-  cleanupAutoUpdate = () => {
-  };
-  if (reference && tooltipRef) {
-    cleanupAutoUpdate = autoUpdate(reference, tooltipRef, computeTooltipPosition);
-  }
-};
-$:
-  reference, tooltipRef, autoUpdateTooltipPosition();
-$:
-  open, placement, computeTooltipPosition();
-$:
-  tipStyle = position ? `left:${position.x}px; top:${position.y}px;` : "";
-const getArrowPlacementStyle = (position2) => {
-  if (position2?.placement) {
-    switch (position2.placement) {
-      case "top":
-      case "top-start":
-      case "top-end":
-        return `bottom: -${arrowRef.offsetWidth}px;transform:translate(0, -50%) rotate(135deg);`;
-      case "right":
-      case "right-start":
-      case "right-end":
-        return `left: -${arrowRef.offsetWidth}px;transform:translate(50%, 0) rotate(225deg);`;
-      case "bottom":
-      case "bottom-start":
-      case "bottom-end":
-        return `top: -${arrowRef.offsetWidth}px;transform:translate(0, 50%) rotate(-45deg);`;
-      case "left":
-      case "left-start":
-      case "left-end":
-        return `right: -${arrowRef.offsetWidth}px;transform:translate(-50%, 0) rotate(45deg);`;
-    }
-  }
-  return "";
-};
-const getArrowOffsetStyle = (position2) => {
-  const arrow2 = position2?.middlewareData?.arrow;
-  if (arrow2) {
-    if (arrow2.x !== null && arrow2.x !== void 0) {
-      return `left: ${arrow2.x}px;`;
-    } else if (arrow2.y !== null && arrow2.y !== void 0) {
-      return `top: ${arrow2.y}px;`;
-    }
-  }
-  return "";
-};
-$:
-  arrowStyle = getArrowPlacementStyle(position) + getArrowOffsetStyle(position);
+$: reference = $$slots.default ? originRef?.previousElementSibling : undefined;
+// ----- Show/Hide ----- //
 const show = () => {
-  if (!disabled) {
-    open = true;
-  }
-};
-const hide = () => open = false;
-const toggle = () => {
-  if (!disabled) {
-    open = !open;
-  } else {
-    open = false;
-  }
+    if (!disabled) {
+        open = true;
+    }
 };
+const hide = () => (open = false);
 const delayShow = () => {
-  hoverDelayMilliseconds === 0 ? show() : setTimeout(() => {
-    show();
-  }, hoverDelayMilliseconds);
+    hoverDelayMilliseconds === 0
+        ? show()
+        : setTimeout(() => {
+            show();
+        }, hoverDelayMilliseconds);
 };
 $: {
-  if (disabled) {
-    hide();
-  }
+    if (disabled) {
+        hide();
+    }
 }
-let cleanupAutoShowUpdate = () => {
-};
+// ----- Event Listeners ----- //
+let cleanupAutoShowUpdate = () => { };
 const autoShowUpdate = () => {
-  cleanupAutoShowUpdate();
-  cleanupAutoShowUpdate = () => {
-  };
-  const element = reference;
-  open = false;
-  if (element) {
-    switch (showOn) {
-      case "click":
-        element.addEventListener("click", toggle);
-        cleanupAutoShowUpdate = () => element.removeEventListener("click", toggle);
-        break;
-      case "hover":
-        element.addEventListener("mouseenter", delayShow);
-        element.addEventListener("mouseleave", hide);
+    cleanupAutoShowUpdate();
+    cleanupAutoShowUpdate = () => { };
+    const element = reference;
+    open = false;
+    if (element) {
+        element.addEventListener('mouseenter', delayShow);
+        element.addEventListener('mouseleave', hide);
         cleanupAutoShowUpdate = () => {
-          element.removeEventListener("mouseenter", delayShow);
-          element.removeEventListener("mouseleave", hide);
+            element.removeEventListener('mouseenter', delayShow);
+            element.removeEventListener('mouseleave', hide);
         };
     }
-  }
-};
-$:
-  reference, showOn, autoShowUpdate();
-const fadeNoOp = (node, params) => {
-  return { delay: 0, duration: 0 };
 };
-$:
-  fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
-let mounted = false;
+$: reference, autoShowUpdate();
+// ----- EventHandlers ----- //
 onMount(() => {
-  mounted = true;
-  portalTarget = portalTarget || document.body;
-  autoUpdateTooltipPosition();
-  computeTooltipPosition();
-  autoShowUpdate();
+    autoShowUpdate();
 });
 </script>
 
-<slot {disabled} {open} />
+<slot {disabled} {hoverDelayMilliseconds} {open} {variant} />
 <div class="sterling-tooltip-origin" bind:this={originRef} />
-
-{#if open}
-  <div
-    class="sterling-tooltip-portal"
-    use:portal={{ target: document.body }}
-    transition:fadeMotion|global={{ duration: 250 }}
-  >
-    <div
-      bind:this={tooltipRef}
-      class="sterling-tooltip"
-      style={tipStyle}
-      on:blur
-      on:click
-      on:dblclick
-      on:dragend
-      on:dragenter
-      on:dragleave
-      on:dragover
-      on:dragstart
-      on:drop
-      on:focus
-      on:focusin
-      on:focusout
-      on:keydown
-      on:keypress
-      on:keyup
-      on:mousedown
-      on:mouseenter
-      on:mouseleave
-      on:mousemove
-      on:mouseover
-      on:mouseout
-      on:mouseup
-      on:pointercancel
-      on:pointerdown
-      on:pointerenter
-      on:pointerleave
-      on:pointermove
-      on:pointerover
-      on:pointerout
-      on:pointerup
-      on:wheel|passive
-      {...$$restProps}
-    >
-      <div class="arrow" bind:this={arrowRef} style={arrowStyle} />
-      <slot name="tip" />
-    </div>
-  </div>
-{/if}
-
-<style>
-  .sterling-tooltip-origin {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
-  .sterling-tooltip-portal {
-    position: relative;
-    overflow: visible;
-  }
-
-  .sterling-tooltip {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    color: var(--stsv-common__color);
-    position: absolute;
-    overflow: visible;
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    z-index: 4;
-  }
-
-  .arrow {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    clip-path: polygon(0% 1%, 100% 1%, 100% 100%, 0% 1%);
-  }
-</style>
+<Callout
+  {conditionalRender}
+  {crossAxisOffset}
+  {mainAxisOffset}
+  {open}
+  {placement}
+  {portalHost}
+  {reference}
+  {variant}
+  on:blur
+  on:click
+  on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}
+>
+  <slot name="tip" {placement} {variant} />
+</Callout>

package/Tooltip.svelte.d.ts

@@ -2,12 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        conditionalRender?: boolean | undefined;
+        crossAxisOffset?: number | undefined;
+        mainAxisOffset?: number | undefined;
+        open?: boolean | undefined;
+        placement?: string | undefined;
+        portalHost?: HTMLElement | undefined;
+        variant?: string | undefined;
         disabled?: boolean | undefined;
-        showOn?: string | undefined;
         hoverDelayMilliseconds?: number | undefined;
-        open?: boolean | undefined;
-        placement?: import("@floating-ui/core").Placement | undefined;
-        portalTarget?: HTMLElement | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -32,14 +35,14 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
+        pointercancel: CustomEvent<any>;
+        pointerdown: CustomEvent<any>;
+        pointerenter: CustomEvent<any>;
+        pointerleave: CustomEvent<any>;
+        pointermove: CustomEvent<any>;
+        pointerover: CustomEvent<any>;
+        pointerout: CustomEvent<any>;
+        pointerup: CustomEvent<any>;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -47,9 +50,14 @@ declare const __propDef: {
     slots: {
         default: {
             disabled: boolean;
+            hoverDelayMilliseconds: number;
             open: boolean;
+            variant: string;
+        };
+        tip: {
+            placement: string;
+            variant: string;
         };
-        tip: {};
     };
 };
 export type TooltipProps = typeof __propDef.props;

package/Tree.constants.d.ts

@@ -1,2 +1 @@
 export declare const TREE_CONTEXT_KEY = "sterlingTree";
-export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/Tree.constants.js

@@ -1,2 +1 @@
 export const TREE_CONTEXT_KEY = 'sterlingTree';
-export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';

package/Tree.svelte

@@ -1,68 +1,70 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { TREE_CONTEXT_KEY } from "./Tree.constants";
-import { usingKeyboard } from "./stores/usingKeyboard";
-export let colorful = false;
-export let composed = false;
+<script>import { createEventDispatcher, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { TREE_CONTEXT_KEY } from './Tree.constants';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- Props ----- //
+/** When true, the tree and its descendants are disabled. */
 export let disabled = false;
-export let selectedValue = void 0;
+/** The value of the currently selected item. */
+export let selectedValue = undefined;
+/** The values of items that are expanded. */
 export let expandedValues = [];
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let treeRef;
-const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const expandedValuesStore = writable(expandedValues);
 const selectedValueStore = writable(selectedValue);
+// ----- Methods ----- //
 export const blur = () => {
-  treeRef?.blur();
+    treeRef?.blur();
 };
 export const focus = (options) => {
-  treeRef?.focus(options);
+    treeRef?.focus(options);
 };
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
-const raiseExpandCollapse = (expandedValues2) => {
-  dispatch("expandCollapse", { expandedValues: expandedValues2 });
+const raiseExpandCollapse = (expandedValues) => {
+    dispatch('expandCollapse', { expandedValues });
 };
-const raiseSelect = (selectedValue2) => {
-  dispatch("select", { selectedValue: selectedValue2 });
+const raiseSelect = (selectedValue) => {
+    dispatch('select', { selectedValue });
 };
+// ----- Reactions ----- //
 $: {
-  selectedValueStore.set(selectedValue);
+    selectedValueStore.set(selectedValue);
 }
 $: {
-  selectedValue = $selectedValueStore;
-  raiseSelect($selectedValueStore);
+    selectedValue = $selectedValueStore;
+    raiseSelect($selectedValueStore);
 }
 $: {
-  expandedValuesStore.set(expandedValues);
+    expandedValuesStore.set(expandedValues);
 }
 $: {
-  expandedValues = $expandedValuesStore;
-  raiseExpandCollapse($expandedValuesStore);
+    expandedValues = $expandedValuesStore;
+    raiseExpandCollapse($expandedValuesStore);
 }
 $: {
-  colorfulStore.set(colorful);
-}
-$: {
-  disabledStore.set(disabled);
+    disabledStore.set(disabled);
 }
+// ----- Set Context ----- //
 setContext(TREE_CONTEXT_KEY, {
-  colorful: colorfulStore,
-  disabled: disabledStore,
-  expandedValues: expandedValuesStore,
-  selectedValue: selectedValueStore
+    disabled: disabledStore,
+    expandedValues: expandedValuesStore,
+    selectedValue: selectedValueStore
 });
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   bind:this={treeRef}
   aria-disabled={disabled}
-  class="sterling-tree"
-  class:colorful
-  class:composed
+  class={`sterling-tree ${variant}`}
   class:disabled
   class:using-keyboard={$usingKeyboard}
   role="tree"
+  tabindex="0"
   on:blur
   on:click
   on:dblclick
@@ -97,92 +99,6 @@ setContext(TREE_CONTEXT_KEY, {
   {...$$restProps}
 >
   <div class="container">
-    <slot {colorful} {composed} {disabled} />
+    <slot {disabled} {expandedValues} {selectedValue} {variant} />
   </div>
 </div>
-
-<style>
-  .sterling-tree {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-common__color);
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 0;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-tree:hover {
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-tree.using-keyboard:focus-within {
-    border-color: var(--stsv-button__border-color--focus);
-    color: var(--stsv-input__color--focus);
-    outline-color: var(--stsv-common__outline-color);
-    outline-offset: var(--stsv-common__outline-offset);
-    outline-style: var(--stsv-common__outline-style);
-    outline-width: var(--stsv-common__outline-width);
-  }
-
-  .sterling-tree.composed,
-  .sterling-tree.composed:hover,
-  .sterling-tree.composed.using-keyboard:focus-visible,
-  .sterling-tree.composed.disabled {
-    background: none;
-    border: none;
-    outline: none;
-  }
-
-  .sterling-tree.disabled * {
-    cursor: not-allowed;
-  }
-
-  /* ----- container - a layout panel that grows with the items ----- */
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    position: relative;
-  }
-
-  .container::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    transition: opacity 250ms;
-  }
-
-  .sterling-tree.disabled .container::after {
-    opacity: 1;
-  }
-
-  /* ----- media queries ----- */
-
-  @media (prefers-reduced-motion) {
-    .sterling-tree,
-    .container::after {
-      transition: none;
-    }
-  }
-</style>

package/Tree.svelte.d.ts

@@ -2,11 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         selectedValue?: string | undefined;
         expandedValues?: string[] | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     };
@@ -49,9 +48,10 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            colorful: boolean;
-            composed: boolean;
             disabled: boolean;
+            expandedValues: string[];
+            selectedValue: string | undefined;
+            variant: string;
         };
     };
 };

package/Tree.types.d.ts

@@ -3,9 +3,7 @@ import type { Readable, Writable } from 'svelte/store';
  * The context for a Tree and its descendants.
  */
 export type TreeContext = {
-    /** When true, applies colorful theme styles. */
-    colorful: Readable<boolean>;
-    /** When true, the tree and its descendants are disabled */
+    /** When true, the tree and its descendants are disabled. */
     disabled: Readable<boolean>;
     /** The values of items that are expanded. */
     expandedValues: Writable<string[]>;