@neovici/cosmoz-dropdown 5.3.0 → 6.0.0

package/dist/cosmoz-dropdown.d.ts

@@ -1,9 +1,7 @@
 import { UseFocusOpts } from './use-focus';
 import { Content } from './cosmoz-dropdown-content';
-import { Placement, Strategy } from './use-floating';
-export interface Props extends UseFocusOpts {
-    placement?: Placement;
-    strategy?: Strategy;
+import { UseFloating } from './use-floating';
+export interface Props extends UseFocusOpts, UseFloating {
     render: () => unknown;
 }
 declare const Dropdown: (host: HTMLElement & Props) => import("lit-html").TemplateResult<1>;

package/dist/cosmoz-dropdown.js

@@ -54,11 +54,12 @@ const style = css `
 	}
 `;
 const Dropdown = (host) => {
-    const { placement, strategy, render } = host;
+    const { placement, strategy, middleware, render } = host;
     const { active, onToggle } = useHostFocus(host);
     const { styles, setReference, setFloating } = useFloating({
         placement,
         strategy,
+        middleware,
     });
     return html ` <div class="anchor" part="anchor" ${ref(setReference)}>
 			<button

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

@@ -5,7 +5,7 @@ export declare const defaultMiddleware: {
     options?: any;
     fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
 }[];
-interface UseFloating extends Pick<ComputePositionConfig, 'placement' | 'strategy' | 'middleware'> {
+export interface UseFloating extends Pick<ComputePositionConfig, 'placement' | 'strategy' | 'middleware'> {
 }
 export declare const useFloating: ({ placement, strategy, middleware, }: UseFloating) => {
     setReference: (el?: Element) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-dropdown",
-  "version": "5.3.0",
+  "version": "6.0.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)]);
-};