@sveltia/ui 0.8.3 → 0.10.0

package/package/components/util/popup.svelte.d.ts

@@ -4,12 +4,14 @@
 /** Generic popup helper. */
 export default class Popup extends SvelteComponent<{
     [x: string]: any;
-    anchor: HTMLElement;
-    class?: string;
-    position?: PopupPosition;
-    open?: import("svelte/store").Writable<boolean>;
-    content?: HTMLElement;
-    touchOptimized?: boolean;
+    anchor: HTMLElement | undefined;
+    class?: string | undefined;
+    position?: PopupPosition | undefined;
+    open?: import("svelte/store").Writable<boolean> | undefined;
+    showBackdrop?: boolean | undefined;
+    content?: HTMLElement | undefined;
+    positionBaseElement?: HTMLElement | undefined;
+    touchOptimized?: boolean | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -23,23 +25,29 @@ export default class Popup extends SvelteComponent<{
     default: {};
 }> {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set open(arg: import("svelte/store").Writable<boolean>);
-    get open(): import("svelte/store").Writable<boolean>;
+    set open(arg: import("svelte/store").Writable<boolean> | undefined);
+    get open(): import("svelte/store").Writable<boolean> | undefined;
     /**accessor*/
-    set anchor(arg: HTMLElement);
-    get anchor(): HTMLElement;
+    set showBackdrop(arg: boolean | undefined);
+    get showBackdrop(): boolean | undefined;
     /**accessor*/
-    set content(arg: HTMLElement);
-    get content(): HTMLElement;
+    set anchor(arg: HTMLElement | undefined);
+    get anchor(): HTMLElement | undefined;
     /**accessor*/
-    set position(arg: PopupPosition);
-    get position(): PopupPosition;
+    set content(arg: HTMLElement | undefined);
+    get content(): HTMLElement | undefined;
     /**accessor*/
-    set touchOptimized(arg: boolean);
-    get touchOptimized(): boolean;
+    set position(arg: PopupPosition | undefined);
+    get position(): PopupPosition | undefined;
+    /**accessor*/
+    set positionBaseElement(arg: HTMLElement | undefined);
+    get positionBaseElement(): HTMLElement | undefined;
+    /**accessor*/
+    set touchOptimized(arg: boolean | undefined);
+    get touchOptimized(): boolean | undefined;
 }
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
@@ -48,12 +56,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        anchor: HTMLElement;
-        class?: string;
-        position?: PopupPosition;
-        open?: import('svelte/store').Writable<boolean>;
-        content?: HTMLElement;
-        touchOptimized?: boolean;
+        anchor: HTMLElement | undefined;
+        class?: string | undefined;
+        position?: PopupPosition | undefined;
+        open?: import("svelte/store").Writable<boolean> | undefined;
+        showBackdrop?: boolean | undefined;
+        content?: HTMLElement | undefined;
+        positionBaseElement?: HTMLElement | undefined;
+        touchOptimized?: boolean | undefined;
     };
     events: {
         opening: CustomEvent<any>;

package/package/components/util/portal.svelte

@@ -13,15 +13,17 @@
 
   export { className as class };
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLElement | undefined} */
   let ref;
 
   onMount(() => {
-    document.body.appendChild(ref);
+    if (ref) {
+      document.body.appendChild(ref);
+    }
   });
 
   onDestroy(() => {
-    ref.remove();
+    ref?.remove();
   });
 </script>
 

package/package/components/util/portal.svelte.d.ts

@@ -4,7 +4,7 @@
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
 export default class Portal extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -18,7 +18,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/index.d.ts

@@ -1,11 +1,12 @@
 export function initLocales({ fallbackLocale, initialLocale }?: {
-    fallbackLocale?: string;
-    initialLocale?: string;
-}): void;
+    fallbackLocale?: string | undefined;
+    initialLocale?: string | undefined;
+} | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
 export { default as SelectButton } from "./components/button/select-button.svelte";
+export { default as SplitButton } from "./components/button/split-button.svelte";
 export { default as Calendar } from "./components/calendar/calendar.svelte";
 export { default as CheckboxGroup } from "./components/checkbox/checkbox-group.svelte";
 export { default as Checkbox } from "./components/checkbox/checkbox.svelte";
@@ -49,8 +50,10 @@ export { default as TableHead } from "./components/table/table-head.svelte";
 export { default as TableRowHeader } from "./components/table/table-row-header.svelte";
 export { default as TableRow } from "./components/table/table-row.svelte";
 export { default as Table } from "./components/table/table.svelte";
+export { default as TabBox } from "./components/tabs/tab-box.svelte";
 export { default as TabList } from "./components/tabs/tab-list.svelte";
 export { default as TabPanel } from "./components/tabs/tab-panel.svelte";
+export { default as TabPanels } from "./components/tabs/tab-panels.svelte";
 export { default as Tab } from "./components/tabs/tab.svelte";
 export { default as MarkdownEditor } from "./components/text-field/markdown-editor.svelte";
 export { default as NumberInput } from "./components/text-field/number-input.svelte";

package/package/index.js

@@ -2,9 +2,9 @@ import { addMessages, init } from 'svelte-i18n';
 
 /**
  * Load strings and initialize the locales.
- * @param {object} [init] Initialize options.
- * @param {string} [init.fallbackLocale] Fallback locale.
- * @param {string} [init.initialLocale] Initial locale.
+ * @param {object} [init] - Initialize options.
+ * @param {string} [init.fallbackLocale] - Fallback locale.
+ * @param {string} [init.initialLocale] - Initial locale.
  * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
@@ -13,7 +13,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
   const modules = import.meta.glob('./locales/*.js', { eager: true });
 
   Object.entries(modules).forEach(([path, { strings }]) => {
-    const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
+    const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
 
     // Add `_sui` suffix to avoid collision with app localization
     addMessages(locale, /** @type {any} */ ({ _sui: strings }));
@@ -31,6 +31,7 @@ export { default as Alert } from './components/alert/alert.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
 export { default as SelectButton } from './components/button/select-button.svelte';
+export { default as SplitButton } from './components/button/split-button.svelte';
 export { default as Calendar } from './components/calendar/calendar.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
@@ -74,8 +75,10 @@ export { default as TableHead } from './components/table/table-head.svelte';
 export { default as TableRowHeader } from './components/table/table-row-header.svelte';
 export { default as TableRow } from './components/table/table-row.svelte';
 export { default as Table } from './components/table/table.svelte';
+export { default as TabBox } from './components/tabs/tab-box.svelte';
 export { default as TabList } from './components/tabs/tab-list.svelte';
 export { default as TabPanel } from './components/tabs/tab-panel.svelte';
+export { default as TabPanels } from './components/tabs/tab-panels.svelte';
 export { default as Tab } from './components/tabs/tab.svelte';
 export { default as MarkdownEditor } from './components/text-field/markdown-editor.svelte';
 export { default as NumberInput } from './components/text-field/number-input.svelte';

package/package/locales/en.d.ts

@@ -15,6 +15,10 @@ export namespace strings {
         const next_month: string;
         const today: string;
     }
+    namespace split_button {
+        const x_options: string;
+        const more_options: string;
+    }
     namespace combobox {
         const select_an_option: string;
     }

package/package/locales/en.js

@@ -15,6 +15,10 @@ export const strings = {
     next_month: 'Next Month',
     today: 'Today',
   },
+  split_button: {
+    x_options: '{name} Options',
+    more_options: 'More Options',
+  },
   combobox: {
     select_an_option: 'Select an option…',
   },

package/package/locales/ja.d.ts

@@ -15,6 +15,10 @@ export namespace strings {
         const next_month: string;
         const today: string;
     }
+    namespace split_button {
+        const x_options: string;
+        const more_options: string;
+    }
     namespace combobox {
         const select_an_option: string;
     }

package/package/locales/ja.js

@@ -15,6 +15,10 @@ export const strings = {
     next_month: '翌月',
     today: '今日',
   },
+  split_button: {
+    x_options: '{name} オプション',
+    more_options: 'その他のオプション',
+  },
   combobox: {
     select_an_option: 'オプションを選択…',
   },

package/package/services/events.d.ts

@@ -1,3 +1,3 @@
 export function isMac(): boolean;
 export function matchShortcuts(event: KeyboardEvent, shortcuts: string): boolean;
-export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts?: string): import('svelte/action').ActionReturn;
+export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts?: string | undefined): import('svelte/action').ActionReturn;

package/package/services/events.js

@@ -8,8 +8,8 @@ export const isMac = () =>
 
 /**
  * Whether the event matches the given keyboard shortcuts.
- * @param {KeyboardEvent} event `keydown` or `keypress` event.
- * @param {string} shortcuts Keyboard shortcuts like `A` or `Ctrl+S`.
+ * @param {KeyboardEvent} event - `keydown` or `keypress` event.
+ * @param {string} shortcuts - Keyboard shortcuts like `A` or `Ctrl+S`.
  * @returns {boolean} Result.
  * @see https://w3c.github.io/aria/#aria-keyshortcuts
  */
@@ -47,10 +47,10 @@ export const matchShortcuts = (event, shortcuts) => {
 
 /**
  * Activate keyboard shortcuts.
- * @param {(HTMLInputElement | HTMLButtonElement)} element Element.
- * @param {string} [shortcuts] Keyboard shortcuts like `A` or `Accel+S` to focus and click the text
- * field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier will be
- * replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
+ * @param {(HTMLInputElement | HTMLButtonElement)} element - Element.
+ * @param {string} [shortcuts] - Keyboard shortcuts like `A` or `Accel+S` to focus and click the
+ * text field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier
+ * will be replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
  * @returns {import('svelte/action').ActionReturn} Actions.
  */
 export const activateKeyShortcuts = (element, shortcuts = '') => {
@@ -59,10 +59,13 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
 
   /**
    * Handle the event.
-   * @param {KeyboardEvent} event `keydown` event.
+   * @param {KeyboardEvent} event - `keydown` event.
    */
   const handler = (event) => {
-    if (!!element.offsetParent && matchShortcuts(event, platformKeyShortcuts)) {
+    if (
+      !!element.offsetParent &&
+      matchShortcuts(event, /** @type {string} */ (platformKeyShortcuts))
+    ) {
       event.preventDefault();
 
       if (!element.disabled) {

package/package/services/group.js

@@ -2,10 +2,10 @@ import { getRandomId, sleep } from './util';
 
 /**
  * @type {{ [role: string]: {
- *   orientation: 'vertical' | 'horizontal',
- *   childRoles: string[],
- *   childSelectedAttr: 'aria-selected' | 'aria-checked',
- *   focusChild: boolean
+ * orientation: 'vertical' | 'horizontal',
+ * childRoles: string[],
+ * childSelectedAttr: 'aria-selected' | 'aria-checked',
+ * focusChild: boolean
  * } }}
  */
 const config = {
@@ -53,12 +53,14 @@ const config = {
 class Group {
   /**
    * Initialize a new `Group` instance.
-   * @param {HTMLElement} parent Parent element.
+   * @param {HTMLElement} parent - Parent element.
    * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent) {
+    parent.dispatchEvent(new CustomEvent('initializing'));
+
     this.parent = parent;
-    this.role = parent.getAttribute('role');
+    this.role = /** @type {string} */ (parent.getAttribute('role'));
     this.grid = this.role === 'listbox' && parent.matches('.grid');
     this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
     this.id = getRandomId(this.role);
@@ -74,21 +76,29 @@ class Group {
     this.childSelectedProp = childSelectedAttr.replace('aria-', '');
     this.focusChild = focusChild;
 
-    const { allMembers } = this;
-
-    const hasSelected = allMembers.some((element) =>
-      element.matches(`[${childSelectedAttr}="true"]`),
-    );
+    const { allMembers, selected: defaultSelected } = this;
 
     allMembers.forEach((element, index) => {
-      const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
-      const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
+      // Select the first one if no member has the `selected` attribute
+      const isSelected = defaultSelected ? element === defaultSelected : index === 0;
+
+      const controlTarget = /** @type {HTMLElement | null} */ (
+        document.querySelector(`#${element.getAttribute('aria-controls')}`)
+      );
 
       element.id ||= `${this.id}-item-${index + 1}`;
-      element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
+      element.tabIndex ||= isSelected ? 0 : -1;
       element.setAttribute(this.childSelectedAttr, String(isSelected));
-      controls?.setAttribute('aria-labelledby', element.id);
-      controls?.setAttribute('aria-hidden', String(!isSelected));
+
+      if (controlTarget) {
+        controlTarget.inert = !isSelected;
+        controlTarget.setAttribute('aria-labelledby', element.id);
+        controlTarget.setAttribute('aria-hidden', String(!isSelected));
+
+        if (isSelected) {
+          controlTarget.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+        }
+      }
     });
 
     parent.addEventListener('click', (event) => {
@@ -100,39 +110,66 @@ class Group {
     parent.addEventListener('keydown', (event) => {
       this.onKeyDown(event);
     });
+
+    parent.dispatchEvent(new CustomEvent('initialized'));
   }
 
-  /** @type {string} */
+  /**
+   * CSS selector to retrieve the members.
+   * @type {string}
+   */
   get selector() {
     return this.childRoles.map((role) => `[role="${role}"]`).join(',');
   }
 
-  /** @type {HTMLElement[]} */
+  /**
+   * List of all the members.
+   * @type {HTMLElement[]}
+   */
   get allMembers() {
     return /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
   }
 
-  /** @type {HTMLElement[]} */
+  /**
+   * List of the enabled and visible members.
+   * @type {HTMLElement[]}
+   */
   get activeMembers() {
     return this.allMembers.filter(
       (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
     );
   }
 
-  /** @type {boolean} */
+  /**
+   * Get the currently selected member.
+   * @type {HTMLElement | undefined}
+   */
+  get selected() {
+    return this.activeMembers.find((element) =>
+      element.matches(`[${this.childSelectedAttr}="true"]`),
+    );
+  }
+
+  /**
+   * Whether the parent is disabled.
+   * @type {boolean}
+   */
   get isDisabled() {
     return this.parent.matches('[aria-disabled="true"]');
   }
 
-  /** @type {boolean} */
+  /**
+   * Whether the parent is read-only.
+   * @type {boolean}
+   */
   get isReadOnly() {
     return this.parent.matches('[aria-readonly="true"]');
   }
 
   /**
    * Select (and move focus to) the given target.
-   * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
-   * @param {HTMLElement} newTarget Target element.
+   * @param {(MouseEvent | KeyboardEvent)} event - Triggered event.
+   * @param {HTMLElement} newTarget - Target element.
    */
   selectTarget(event, newTarget) {
     if (this.isDisabled || this.isReadOnly) {
@@ -164,7 +201,8 @@ class Group {
       const singleSelect = isMenuItemRadio || !multiSelect;
       const isTarget = element === newTarget;
       const isSelected = element.matches(`[${this.childSelectedAttr}="true"]`);
-      const controls = element.getAttribute('aria-controls');
+      const controlTargetId = element.getAttribute('aria-controls');
+      const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
 
       if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
         element.setAttribute(this.childSelectedAttr, String(!isSelected));
@@ -202,13 +240,18 @@ class Group {
         element.classList.toggle('focused', isTarget);
       }
 
-      if (controls) {
-        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
+      if (controlTarget) {
+        controlTarget.inert = !isTarget;
+        controlTarget.setAttribute('aria-hidden', String(!isTarget));
+
+        if (isTarget) {
+          controlTarget.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+        }
       }
 
       if (isTarget) {
         this.parent.setAttribute('aria-activedescendant', element.id);
-        element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+        element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
       }
     });
 
@@ -224,7 +267,7 @@ class Group {
 
   /**
    * Handle the `click` event on the widget.
-   * @param {MouseEvent} event `click` event.
+   * @param {MouseEvent} event - `click` event.
    */
   onClick(event) {
     // eslint-disable-next-line prefer-destructuring
@@ -240,7 +283,7 @@ class Group {
 
   /**
    * Handle the `keydown` event on the widget.
-   * @param {KeyboardEvent} event `keydown` event.
+   * @param {KeyboardEvent} event - `keydown` event.
    */
   onKeyDown(event) {
     const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
@@ -349,7 +392,7 @@ class Group {
 
 /**
  * Activate a new group.
- * @param {HTMLElement} parent Parent element.
+ * @param {HTMLElement} parent - Parent element.
  */
 export const activateGroup = (parent) => {
   (async () => {

package/package/services/popup.d.ts

@@ -6,26 +6,43 @@ export function activatePopup(...args: any[]): Popup;
 declare class Popup {
     /**
      * Initialize a new `Popup` instance.
-     * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
-     * @param {HTMLDialogElement} popupElement `<dialog>` element to be used for the popup.
-     * @param {PopupPosition} position Where to show the popup content.
+     * @param {HTMLButtonElement} anchorElement - `<button>` element that triggers the popup.
+     * @param {HTMLDialogElement} popupElement - `<dialog>` element to be used for the popup.
+     * @param {PopupPosition} position - Where to show the popup content.
+     * @param {HTMLElement} [positionBaseElement] - The base element of the `position`. If omitted,
+     * this will be the `anchorElement`.
      */
-    constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition);
+    constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition, positionBaseElement?: HTMLElement | undefined);
     open: import("svelte/store").Writable<boolean>;
-    style: import("svelte/store").Writable<{
-        inset: any;
-        zIndex: any;
-        width: any;
-        height: any;
+    /**
+     * @type {import('svelte/store').Writable<{
+     * inset: string | undefined,
+     * zIndex: number | undefined,
+     * width: string | undefined,
+     * height: string | undefined,
+     * }>}
+     */
+    style: import('svelte/store').Writable<{
+        inset: string | undefined;
+        zIndex: number | undefined;
+        width: string | undefined;
+        height: string | undefined;
     }>;
     observer: IntersectionObserver;
     anchorElement: HTMLButtonElement;
     popupElement: HTMLDialogElement;
     position: PopupPosition;
+    positionBaseElement: HTMLElement;
     id: string;
-    /** @type {boolean} */
+    /**
+     * Whether the anchor element is disabled.
+     * @type {boolean}
+     */
     get isDisabled(): boolean;
-    /** @type {boolean} */
+    /**
+     * Whether the anchor element is read-only.
+     * @type {boolean}
+     */
     get isReadOnly(): boolean;
     /**
      * Check the position of the anchor element.

package/package/services/popup.js

@@ -9,6 +9,14 @@ import { getRandomId } from './util';
 class Popup {
   open = writable(false);
 
+  /**
+   * @type {import('svelte/store').Writable<{
+   * inset: string | undefined,
+   * zIndex: number | undefined,
+   * width: string | undefined,
+   * height: string | undefined,
+   * }>}
+   */
   style = writable({ inset: undefined, zIndex: undefined, width: undefined, height: undefined });
 
   observer = new IntersectionObserver((entries) => {
@@ -18,7 +26,7 @@ class Popup {
       }
 
       const { scrollHeight: contentHeight, scrollWidth: contentWidth } =
-        this.popupElement.querySelector('.content');
+        /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
 
       const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
@@ -86,14 +94,17 @@ class Popup {
 
   /**
    * Initialize a new `Popup` instance.
-   * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
-   * @param {HTMLDialogElement} popupElement `<dialog>` element to be used for the popup.
-   * @param {PopupPosition} position Where to show the popup content.
+   * @param {HTMLButtonElement} anchorElement - `<button>` element that triggers the popup.
+   * @param {HTMLDialogElement} popupElement - `<dialog>` element to be used for the popup.
+   * @param {PopupPosition} position - Where to show the popup content.
+   * @param {HTMLElement} [positionBaseElement] - The base element of the `position`. If omitted,
+   * this will be the `anchorElement`.
    */
-  constructor(anchorElement, popupElement, position) {
+  constructor(anchorElement, popupElement, position, positionBaseElement) {
     this.anchorElement = anchorElement;
     this.popupElement = popupElement; // = backdrop
     this.position = position;
+    this.positionBaseElement = positionBaseElement ?? anchorElement;
     this.id = getRandomId('popup');
 
     this.anchorElement.setAttribute('aria-controls', this.id);
@@ -154,12 +165,18 @@ class Popup {
     });
   }
 
-  /** @type {boolean} */
+  /**
+   * Whether the anchor element is disabled.
+   * @type {boolean}
+   */
   get isDisabled() {
     return this.anchorElement.matches('[aria-disabled="true"]');
   }
 
-  /** @type {boolean} */
+  /**
+   * Whether the anchor element is read-only.
+   * @type {boolean}
+   */
   get isReadOnly() {
     return this.anchorElement.matches('[aria-readonly="true"]');
   }
@@ -168,14 +185,14 @@ class Popup {
    * Check the position of the anchor element.
    */
   checkPosition() {
-    this.observer.unobserve(this.anchorElement);
-    this.observer.observe(this.anchorElement);
+    this.observer.unobserve(this.positionBaseElement);
+    this.observer.observe(this.positionBaseElement);
   }
 }
 
 /**
  * Activate a new popup.
- * @param {...any} args Arguments.
+ * @param {...any} args - Arguments.
  * @returns {Popup} New popup.
  */
 // @ts-ignore

package/package/services/util.d.ts

@@ -1,3 +1,3 @@
-export function getRandomId(prefix?: string, length?: number): string;
+export function getRandomId(prefix?: string | undefined, length?: number | undefined): string;
 export function isObject(input: any): boolean;
-export function sleep(ms?: number): Promise<void>;
+export function sleep(ms?: number | undefined): Promise<void>;