@neovici/cosmoz-dropdown 5.4.0 → 6.1.0

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export * from './use-focus';
-export * from './use-position';
 export * from './cosmoz-dropdown-menu';
 export * from './cosmoz-dropdown';

package/dist/index.js

@@ -1,4 +1,3 @@
 export * from './use-focus';
-export * from './use-position';
 export * from './cosmoz-dropdown-menu';
 export * from './cosmoz-dropdown';

package/dist/use-floating.d.ts

@@ -7,9 +7,9 @@ export declare const defaultMiddleware: {
 }[];
 export interface UseFloating extends Pick<ComputePositionConfig, 'placement' | 'strategy' | 'middleware'> {
 }
-export declare const useFloating: ({ placement, strategy, middleware, }: UseFloating) => {
-    setReference: (el?: Element) => void;
-    setFloating: (el?: Element) => void;
+export declare const useFloating: ({ placement, strategy, middleware, }?: UseFloating | undefined) => {
+    setReference: import("@pionjs/pion").StateUpdater<Element | undefined>;
+    setFloating: import("@pionjs/pion").StateUpdater<Element | undefined>;
     styles: {
         left: string;
         top: string;

package/dist/use-floating.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from '@pionjs/pion';
+import { useEffect, useMemo, useState } from '@pionjs/pion';
 import { autoUpdate, computePosition, flip, shift, } from '@floating-ui/dom';
 export { flip, shift, size } from '@floating-ui/dom';
 export const defaultMiddleware = [
@@ -8,8 +8,9 @@ export const defaultMiddleware = [
     }),
     shift(),
 ];
-export const useFloating = ({ placement = 'bottom-start', strategy, middleware = defaultMiddleware, }) => {
-    const [[reference, floating], setRefs] = useState([]);
+export const useFloating = ({ placement = 'bottom-start', strategy, middleware = defaultMiddleware, } = {}) => {
+    const [reference, setReference] = useState();
+    const [floating, setFloating] = useState();
     const [position, setPosition] = useState();
     useEffect(() => {
         if (!reference || !(floating instanceof HTMLElement)) {
@@ -23,8 +24,8 @@ export const useFloating = ({ placement = 'bottom-start', strategy, middleware =
         }).then(setPosition));
     }, [reference, floating, placement, strategy, middleware]);
     return {
-        setReference: useCallback((el) => setRefs(([, _]) => [el, _]), []),
-        setFloating: useCallback((el) => setRefs(([_]) => [_, el]), []),
+        setReference,
+        setFloating,
         styles: useMemo(() => position ? { left: `${position.x}px`, top: `${position.y}px` } : {}, [position?.x, position?.y]),
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-dropdown",
-  "version": "5.4.0",
+  "version": "6.1.0",
   "description": "A simple dropdown web component",
   "keywords": [
     "lit-html",
@@ -66,18 +66,15 @@
   "exports": {
     ".": "./dist/index.js",
     "./use-focus": "./dist/use-focus.js",
-    "./use-position": "./dist/use-position.js",
     "./use-floating": "./dist/use-floating.js",
     "./connectable": "./dist/connectable.js",
-    "./src/use-focus.js": "./dist/use-focus.js",
-    "./src/use-position.js": "./dist/use-position.js"
+    "./src/use-focus.js": "./dist/use-focus.js"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
     "@neovici/cosmoz-utils": "^6.8.1",
     "@pionjs/pion": "^2.5.2",
-    "lit-html": "^3.1.2",
-    "position.js": "^1.1.0"
+    "lit-html": "^3.1.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.2.1",
@@ -88,7 +85,6 @@
     "@semantic-release/git": "^10.0.0",
     "@storybook/addon-essentials": "^7.0.0",
     "@storybook/addon-links": "^7.0.0",
-    "@storybook/storybook-deployer": "^2.8.5",
     "@storybook/web-components": "7.6.17",
     "@types/mocha": "^10.0.6",
     "@types/node": "^22.10.2",

package/dist/use-position.d.ts

@@ -1,15 +0,0 @@
-import type { Placement } from 'position.js';
-export declare const defaultPlacement: readonly ["bottom-left", "bottom-right", "bottom", "top-left", "top-right", "top"];
-export { Placement };
-export interface PositionOpts {
-    host: HTMLElement;
-    anchor: HTMLElement;
-    placement?: Placement;
-    confinement?: HTMLElement;
-    limit?: boolean;
-}
-export declare const position: ({ host, anchor, placement, confinement, limit, }: PositionOpts) => void;
-interface UsePositionOpts extends Omit<PositionOpts, 'anchor'> {
-    anchor?: (() => HTMLElement | null) | HTMLElement | null;
-}
-export declare const usePosition: ({ anchor: anchorage, host, ...thru }: UsePositionOpts) => void;

package/dist/use-position.js

@@ -1,54 +0,0 @@
-// eslint-disable-next-line
-/// <reference path="../types/position.d.ts" />
-import { useEffect } from '@pionjs/pion';
-import getPosition from 'position.js';
-import { onScrolled } from './on-scrolled';
-export const defaultPlacement = [
-    'bottom-left',
-    'bottom-right',
-    'bottom',
-    'top-left',
-    'top-right',
-    'top',
-];
-export const position = ({ host, anchor, placement = defaultPlacement, confinement, limit, }) => {
-    const anchorBounds = anchor.getBoundingClientRect(), hostBounds = host.getBoundingClientRect(), { popupOffset: offset } = getPosition(hostBounds, anchorBounds, placement, {
-        fixed: true,
-        adjustXY: 'both',
-        offsetParent: confinement,
-    }), { style } = host;
-    if (offset.left < 0) {
-        style.left = '0px';
-    }
-    else {
-        style.left = offset.left + 'px';
-    }
-    style.top = offset.top + 'px';
-    if (limit) {
-        style.minWidth = Math.max(anchorBounds.width, hostBounds.width) + 'px';
-    }
-};
-export const usePosition = ({ anchor: anchorage, host, ...thru }) => {
-    useEffect(() => {
-        const anchor = typeof anchorage === 'function' ? anchorage() : anchorage;
-        if (anchor == null) {
-            return;
-        }
-        let rid;
-        const reposition = () => position({ host, anchor, ...thru }), ro = new ResizeObserver(reposition);
-        ro.observe(host);
-        ro.observe(anchor);
-        const onReposition = () => {
-            cancelAnimationFrame(rid);
-            rid = requestAnimationFrame(reposition);
-        }, offScroll = onScrolled(anchor, onReposition);
-        window.addEventListener('resize', onReposition, true);
-        return () => {
-            ro.unobserve(host);
-            ro.unobserve(anchor);
-            offScroll();
-            window.removeEventListener('resize', onReposition, true);
-            cancelAnimationFrame(rid);
-        };
-    }, [anchorage, ...Object.values(thru)]);
-};