@geoffcox/sterling-svelte 0.0.24 → 0.0.25

package/Dropdown.svelte

@@ -1,5 +1,5 @@
-<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { createEventDispatcher } from "svelte";
+import Popup from "./Popover.svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 const popupId = idGenerator.nextId("Dropdown-popup");
@@ -8,11 +8,7 @@ export let disabled = false;
 export let open = false;
 export let stayOpenOnClickAway = false;
 let dropdownRef;
-let popupRef;
-let popupPosition = {
-  x: void 0,
-  y: void 0
-};
+let popupContentRef;
 const dispatch = createEventDispatcher();
 const raiseOpen = (open2) => {
   dispatch("open", { open: open2 });
@@ -29,29 +25,11 @@ export const blur = () => {
 export const focus = (options) => {
   dropdownRef?.focus(options);
 };
-let mounted = false;
-onMount(() => {
-  mounted = true;
-  const cleanup = autoUpdate(dropdownRef, popupRef, async () => {
-    const { x, y } = await computePosition(dropdownRef, popupRef, {
-      placement: "bottom-end",
-      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
-    });
-    if (open) {
-      popupPosition = { x, y };
-    }
-  });
-  return cleanup;
-});
 const onClick = (event) => {
-  if (!disabled && mounted) {
-    const targetNode = event.target;
-    const withinPopup = popupRef?.contains(targetNode);
-    if (!withinPopup) {
-      open = !open;
-      event.preventDefault();
-      event.stopPropagation();
-    }
+  if (!disabled) {
+    open = !open;
+    event.preventDefault();
+    event.stopPropagation();
   }
 };
 const onKeydown = (event) => {
@@ -81,7 +59,7 @@ const onClickOutside = (event) => {
   class:disabled
   role="combobox"
   tabindex="0"
-  use:clickOutside
+  use:clickOutside={{ ignoreOthers: [popupContentRef] }}
   on:blur
   on:click
   on:click={onClick}
@@ -120,15 +98,11 @@ const onClickOutside = (event) => {
     </div>
   </slot>
 
-  <div
-    bind:this={popupRef}
-    class="popup"
-    class:open={open && !disabled}
-    id={popupId}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <slot {composed} {disabled} {open} />
-  </div>
+  <Popup reference={dropdownRef} open={!disabled && open}>
+    <div class="popup-content" bind:this={popupContentRef}>
+      <slot {composed} {disabled} {open} />
+    </div>
+  </Popup>
 </div>
 
 <style>
@@ -266,6 +240,10 @@ const onClickOutside = (event) => {
     grid-template-rows: 1fr;
   }
 
+  .popup-content {
+    padding: 0.25em;
+  }
+
   @media (prefers-reduced-motion) {
     .sterling-dropdown,
     .sterling-dropdown::after {

package/List.svelte

@@ -296,7 +296,6 @@ A list of items where a single item can be selected.
     position: relative;
     flex-direction: column;
     flex-wrap: nowrap;
-    width: fit-content;
   }
 
   .sterling-list.horizontal .container {

package/Popover.svelte

@@ -0,0 +1,135 @@
+<script>import { onMount } from "svelte";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { portal } from "./actions/portal";
+export let placement = "bottom-start";
+export let open = false;
+export let reference;
+export let portalHost = void 0;
+let popupRef;
+let popupPosition = { x: 0, y: 0 };
+const hostId = "SterlingPopoverPortal";
+const ensurePortalHost = () => {
+  if (portalHost) {
+    return portalHost;
+  }
+  let host = document.querySelector(`#${hostId}`);
+  if (!host) {
+    host = document.createElement("div");
+    host.id = hostId;
+    host.style.overflow = "visible";
+    document.body.append(host);
+  }
+  portalHost = host;
+};
+let bodyHeight = 0;
+const resizeObserver = new ResizeObserver((entries) => {
+  bodyHeight = entries[0].target.clientHeight;
+});
+const middleware = [
+  offset({ mainAxis: -2 }),
+  flip(),
+  shift({ padding: 0, mainAxis: true, crossAxis: true })
+];
+const computePopupPosition = async () => {
+  if (reference && popupRef) {
+    popupPosition = await computePosition(reference, popupRef, {
+      placement,
+      middleware
+    });
+  } else {
+    popupPosition = { x: 0, y: 0 };
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateMenuPosition = () => {
+  cleanupAutoUpdate();
+  if (reference && popupRef) {
+    cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopupPosition);
+  }
+};
+$:
+  popupRef, reference, autoUpdateMenuPosition();
+$:
+  open, bodyHeight, placement, computePopupPosition();
+onMount(() => {
+  ensurePortalHost();
+  resizeObserver.observe(document.body);
+  return () => {
+    resizeObserver.unobserve(document.body);
+  };
+});
+</script>
+
+<div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
+  <div
+    bind:this={popupRef}
+    class="sterling-popover"
+    class:open
+    on:blur
+    on:click
+    on:copy
+    on:cut
+    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:scroll
+    on:wheel
+    on:paste
+    {...$$restProps}
+    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+  >
+    <slot />
+  </div>
+</div>
+
+<style>
+  .sterling-popover-portal {
+    position: relative;
+    overflow: visible;
+    background: rgba(255, 0, 0, 0.1);
+  }
+
+  .sterling-popover {
+    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-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    box-sizing: border-box;
+    display: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    height: fit-content;
+    left: 0;
+    max-height: calc(50vh);
+    overflow: auto;
+    overscroll-behavior: contain;
+    position: absolute;
+    top: 0;
+    width: max-content;
+    z-index: 1;
+  }
+
+  .sterling-popover.open {
+    display: grid;
+  }
+</style>

package/Popover.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placement?: Placement | undefined;
+        open?: boolean | undefined;
+        reference: HTMLElement;
+        portalHost?: HTMLElement | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/Progress.svelte

@@ -3,6 +3,7 @@ export let max = 100;
 export let percent = 0;
 export let vertical = false;
 export let colorful = "none";
+export let disabled = false;
 let clientHeight;
 let clientWidth;
 $:
@@ -33,6 +34,7 @@ $:
 
 <div
   class="sterling-progress"
+  class:disabled
   class:vertical
   role="progressbar"
   on:blur
@@ -103,7 +105,6 @@ $:
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    min-width: 100px;
   }
 
   .indicator {
@@ -127,7 +128,6 @@ $:
     flex-direction: column;
     justify-content: flex-end;
     min-width: unset;
-    min-height: 100px;
   }
 
   .sterling-progress.vertical .indicator {
@@ -155,6 +155,17 @@ $:
     background-color: var(--stsv-Error__border-color);
   }
 
+  /* ----- Disabled ----- */
+
+  .sterling-progress.disabled {
+    background: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+  }
+
+  .sterling-progress.disabled .indicator {
+    background-color: var(--stsv-Display__color--disabled);
+  }
+
   @media (prefers-reduced-motion) {
     .sterling-progress,
     .indicator {

package/Progress.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         percent?: number | undefined;
         vertical?: boolean | undefined;
         colorful?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/Radio.svelte

@@ -1,42 +1,58 @@
-<script>import { onMount } from "svelte";
-import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
 export let id = void 0;
-let mounted = false;
-let radioRef;
+if (checked && $$restProps.value !== group) {
+  group = $$restProps.value;
+} else if (!checked && $$restProps.value === group) {
+  checked = true;
+}
+let inputRef;
+let previousChecked = checked;
+let previousGroup = group;
+const reconcile = () => {
+  if (checked !== previousChecked) {
+    if (checked && $$restProps.value) {
+      group = $$restProps.value;
+      previousGroup = $$restProps.value;
+    }
+    previousChecked = checked;
+  } else if (group !== previousGroup) {
+    if ($$restProps.value) {
+      checked = $$restProps.value === group;
+      previousChecked = checked;
+    }
+    previousGroup = group;
+  }
+};
+$:
+  checked, group, $$restProps.value, reconcile();
 $: {
-  if ($$slots.default && id === void 0) {
-    id = idGenerator.nextId("Radio");
+  if (inputRef && checked && !inputRef.checked) {
+    inputRef.click();
   }
 }
 $: {
-  if (mounted) {
-    checked = group === $$restProps.value;
+  if ($$slots.default && id === void 0) {
+    id = idGenerator.nextId("Radio");
   }
 }
-const onChange = (e) => {
-  if (e.currentTarget.checked) {
-    group = $$restProps.value;
-  }
-};
 export const blur = () => {
-  radioRef?.blur();
+  inputRef?.blur();
 };
 export const click = () => {
-  radioRef?.click();
+  inputRef?.click();
 };
 export const focus = (options) => {
-  radioRef?.focus(options);
+  inputRef?.focus(options);
 };
-onMount(() => {
-  if (checked) {
+const onChange = (e) => {
+  if (e.currentTarget.checked) {
     group = $$restProps.value;
   }
-  mounted = true;
-});
+};
 </script>
 
 <!--
@@ -46,9 +62,10 @@ onMount(() => {
 <div class="sterling-radio" class:disabled>
   <div class="container">
     <input
-      bind:this={radioRef}
-      checked={group === $$restProps.value}
+      bind:this={inputRef}
+      {checked}
       {disabled}
+      {group}
       {id}
       type="radio"
       on:blur

package/Select.svelte

@@ -1,8 +1,8 @@
-<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { createEventDispatcher, tick } from "svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
+import Popup from "./Popover.svelte";
 const popupId = idGenerator.nextId("Select-popup");
 export let composed = false;
 export let disabled = false;
@@ -11,12 +11,7 @@ export let selectedValue = void 0;
 let prevOpen = false;
 let pendingSelectedValue = selectedValue;
 let selectRef;
-let popupRef;
 let listRef;
-let popupPosition = {
-  x: void 0,
-  y: void 0
-};
 const dispatch = createEventDispatcher();
 const raiseSelect = (value) => {
   dispatch("select", { value });
@@ -39,8 +34,10 @@ $: {
   if (open && !prevOpen) {
     prevOpen = true;
     tick().then(() => {
-      listRef?.focus();
-      listRef?.scrollToSelectedItem();
+      setTimeout(() => {
+        listRef?.focus();
+        listRef?.scrollToSelectedItem();
+      }, 10);
     });
   } else if (prevOpen) {
     prevOpen = false;
@@ -61,20 +58,6 @@ export const scrollToSelectedItem = () => {
     listRef?.scrollToSelectedItem();
   }
 };
-let mounted = false;
-onMount(() => {
-  mounted = true;
-  const cleanup = autoUpdate(selectRef, popupRef, async () => {
-    const { x, y } = await computePosition(selectRef, popupRef, {
-      placement: "bottom-end",
-      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
-    });
-    if (open) {
-      popupPosition = { x, y };
-    }
-  });
-  return cleanup;
-});
 const onSelectClick = (event) => {
   if (!disabled) {
     open = !open;
@@ -216,27 +199,20 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <div
-    bind:this={popupRef}
-    class="popup"
-    class:open
-    id={popupId}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <div class="popup-content">
-      <List
-        bind:this={listRef}
-        {disabled}
-        selectedValue={pendingSelectedValue}
-        on:click={onListClick}
-        on:keydown={onListKeydown}
-        on:select={onListSelect}
-        tabIndex={open ? 0 : -1}
-      >
-        <slot />
-      </List>
-    </div>
-  </div>
+  <Popup reference={selectRef} bind:open id={popupId}>
+    <List
+      bind:this={listRef}
+      composed
+      {disabled}
+      selectedValue={pendingSelectedValue}
+      on:click={onListClick}
+      on:keydown={onListKeydown}
+      on:select={onListSelect}
+      tabIndex={open ? 0 : -1}
+    >
+      <slot />
+    </List>
+  </Popup>
 </div>
 
 <style>
@@ -350,25 +326,6 @@ const onListSelect = (event) => {
     transform-origin: 50% 50%;
   }
 
-  .popup {
-    background-color: var(--stsv-Common__background-color);
-    box-sizing: border-box;
-    display: none;
-    overflow: visible;
-    outline: none;
-    position: absolute;
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    width: fit-content;
-    height: fit-content;
-    z-index: 1;
-  }
-
-  .popup.open {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
-
   .popup-content {
     max-height: 15em;
   }

package/Switch.svelte

@@ -117,17 +117,21 @@ export const focus = (options) => {
   }
 
   .sterling-switch:not(.vertical) {
+    align-content: center;
     align-items: center;
     column-gap: 0.5em;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto auto auto;
     grid-template-rows: auto;
-    justify-items: stretch;
+    justify-content: flex-start;
+    justify-items: flex-start;
   }
 
   .sterling-switch.vertical {
-    align-items: stretch;
+    align-content: flex-start;
+    align-items: flex-start;
     grid-template-columns: auto;
     grid-template-rows: auto auto auto;
+    justify-content: center;
     justify-items: center;
     row-gap: 0.5em;
   }

package/TextArea.svelte

@@ -2,7 +2,7 @@
 export let autoHeight = false;
 export let disabled = false;
 export let resize = "none";
-export let value;
+export let value = "";
 let textAreaRef;
 const autoSetHeight = () => {
   if (autoHeight && textAreaRef) {
@@ -42,7 +42,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<div class="sterling-text-area2" class:disabled>
+<div class="sterling-text-area" class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
@@ -88,8 +88,10 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 </div>
 
 <style>
-  .sterling-text-area2 {
+  .sterling-text-area {
     position: relative;
+    height: 100%;
+    width: 100%;
   }
 
   textarea {
@@ -130,12 +132,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-text-area2:disabled {
+  .sterling-text-area:disabled {
     cursor: not-allowed;
     outline: none;
   }
 
-  .sterling-text-area2::after {
+  .sterling-text-area::after {
     background: var(--stsv-Disabled__background);
     bottom: 0;
     content: '';
@@ -148,7 +150,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     transition: opacity 250ms;
   }
 
-  .sterling-text-area2.disabled::after {
+  .sterling-text-area.disabled::after {
     opacity: 1;
   }
 
@@ -159,8 +161,8 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 
   @media (prefers-reduced-motion) {
     textarea,
-    .sterling-text-area2,
-    .sterling-text-area2::after {
+    .sterling-text-area,
+    .sterling-text-area::after {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         autoHeight?: boolean | undefined;
         disabled?: boolean | undefined;
         resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
-        value: string;
+        value?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/actions/clickOutside.d.ts

@@ -1,3 +1,14 @@
-export declare const clickOutside: (node: HTMLElement) => {
+type Params = {
+    /** Other elements should not raise the event if clicked. */
+    ignoreOthers?: HTMLElement[];
+};
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export declare const clickOutside: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
     destroy(): void;
 };
+export {};

package/actions/clickOutside.js

@@ -1,7 +1,15 @@
-export const clickOutside = (node) => {
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export const clickOutside = (node, params) => {
+    let ignoreOthers = params?.ignoreOthers;
     const handleClick = (event) => {
         const targetNode = event?.target;
-        if (targetNode && !node.contains(targetNode)) {
+        if (targetNode &&
+            !node.contains(targetNode) &&
+            (!ignoreOthers || ignoreOthers.every((x) => !x.contains(targetNode)))) {
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));
@@ -9,6 +17,9 @@ export const clickOutside = (node) => {
     };
     document.addEventListener('click', handleClick, true);
     return {
+        update(params) {
+            ignoreOthers = params.ignoreOthers;
+        },
         destroy() {
             document.removeEventListener('click', handleClick, true);
         }

package/index.d.ts

@@ -51,6 +51,7 @@ import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
 import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
+import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
 import Select from './Select.svelte';
@@ -64,4 +65,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -43,6 +43,7 @@ import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
 import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
+import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
 import Select from './Select.svelte';
@@ -56,4 +57,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -78,6 +78,7 @@
     "./MenuItem.utils": "./MenuItem.utils.js",
     "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
     "./MenuSeparator.svelte": "./MenuSeparator.svelte",
+    "./Popover.svelte": "./Popover.svelte",
     "./Progress.constants": "./Progress.constants.js",
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",