@apify/ui-library 1.148.0 → 1.148.1-featuremigrateapifyuilibrary-48563e.13

package/dist/components/dropdown/dropdown_shell.js

@@ -0,0 +1,67 @@
+import { theme as e } from "../../design_system/theme.js";
+import { DropdownContext as t } from "./dropdown.context.js";
+import { ScrollableContent as n, StyledContent as r } from "./dropdown.styled.js";
+import { useCallback as i, useLayoutEffect as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { autoUpdate as s, flip as c, offset as l, shift as u, size as d, useFloating as f } from "@floating-ui/react";
+import * as p from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown_shell.tsx
+var m = ({ isOpen: m, onIsOpenChange: h, children: g, closeOnSelect: _ = !0, contentProps: v, width: y, height: b, triggerRef: x, strategy: S = "absolute", zIndex: C }) => {
+	let w = i((e) => {
+		_ && h(!1), e && e.preventDefault();
+	}, [_, h]), T = v?.side || "bottom", E = v?.align || "start", D = v?.sideOffset || 0, O = v?.alignOffset || 0, k = E === "center" ? T : `${T}-${E}`, A = [
+		u(),
+		c(),
+		d({ apply({ availableHeight: t, elements: n }) {
+			Object.assign(n.floating.style, { maxHeight: `calc(${t}px - ${e.space.space8})` });
+		} })
+	];
+	(D || O) && A.push(l({
+		mainAxis: D,
+		crossAxis: O
+	}));
+	let { x: j, y: M, refs: { setReference: N, setFloating: P }, strategy: F } = f({
+		placement: k,
+		strategy: S,
+		middleware: A,
+		whileElementsMounted: s
+	});
+	a(() => {
+		x?.current && N(x.current);
+	}, [x, N]);
+	let I = i((e) => {
+		x?.current?.contains(e.detail.originalEvent.target) || h(!1);
+	}, [x, h]), L = m && j !== null && M !== null, R = i((e) => {
+		P(e);
+	}, [P]);
+	if (!L) return null;
+	let z = document.fullscreenElement;
+	return /* @__PURE__ */ o(t.Provider, {
+		value: { handleSelectAndClose: w },
+		children: /* @__PURE__ */ o(p.Root, {
+			open: !0,
+			modal: !1,
+			children: /* @__PURE__ */ o(p.Portal, {
+				container: z ?? void 0,
+				children: /* @__PURE__ */ o(r, {
+					ref: R,
+					$width: y,
+					$height: b,
+					$zIndex: C,
+					"data-radix-dropdown-content": !0,
+					onPointerDownOutside: I,
+					style: {
+						position: F,
+						top: M ?? "",
+						left: j ?? "",
+						zIndex: C ?? 100
+					},
+					...v,
+					children: /* @__PURE__ */ o(n, { children: g })
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { m as DropdownShell };

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,7 @@
+export { Dropdown } from './dropdown';
+export { DropdownButton } from './dropdown_button';
+export { DropdownShell } from './dropdown_shell';
+export type { DropdownShellProps } from './dropdown_shell';
+export { DROPDOWN_ELEMENT_CLASSES } from './dropdown.styled';
+export type { BaseDropdownItemProps, BaseDropdownContentProps } from './dropdown.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/floating/floating_component_base.d.ts

@@ -0,0 +1,111 @@
+import { Strategy } from '@floating-ui/react';
+import { ComponentType, CSSProperties, ReactNode, RefObject } from 'react';
+export declare const classNames: {
+    CHILDREN: string;
+};
+export declare const FLOATING_PLACEMENT: {
+    readonly TOP: "top";
+    readonly TOP_START: "top-start";
+    readonly TOP_END: "top-end";
+    readonly RIGHT: "right";
+    readonly RIGHT_START: "right-start";
+    readonly RIGHT_END: "right-end";
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_START: "bottom-start";
+    readonly BOTTOM_END: "bottom-end";
+    readonly LEFT: "left";
+    readonly LEFT_START: "left-start";
+    readonly LEFT_END: "left-end";
+};
+export type FloatingPlacement = (typeof FLOATING_PLACEMENT)[keyof typeof FLOATING_PLACEMENT];
+type UseFloatingPopupOptions = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: FloatingPlacement;
+    strategy?: Strategy;
+    autoPlacements?: FloatingPlacement[];
+    offsetPx?: number;
+};
+/**
+ * Shared `useFloating` + `useTransitionStyles` setup for popup-style components (`Tooltip`,
+ * `Popover`, the inner positioning of `FloatingComponentBase`). Owns the middleware stack
+ * (`offset` / `flip` | `autoPlacement` / `shift` / `hide`) and the side-aware in/out animation,
+ * so individual consumers don't duplicate these.
+ *
+ * Returns the full `useFloating` result plus `isMounted` and `transitionStyles` from
+ * `useTransitionStyles` — destructure what each consumer needs.
+ */
+export declare const useFloatingPopup: ({ open, onOpenChange, placement, strategy, autoPlacements, offsetPx, }: UseFloatingPopupOptions) => {
+    isMounted: boolean;
+    transitionStyles: CSSProperties;
+    placement: import('@floating-ui/react-dom').Placement;
+    strategy: Strategy;
+    middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/react-dom').Placement;
+        strategy: Strategy;
+        middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+};
+/**
+ * Builds the inline `style` object floating-ui consumers spread onto their popup wrapper:
+ * positioning (`position`/`top`/`left`), `width: 'max-content'`, the `referenceHidden`
+ * visibility toggle, and the in/out transition styles. Centralized so Tooltip / Popover /
+ * `FloatingComponentBase` don't redeclare it.
+ */
+export declare const getFloatingPopupStyle: (floating: ReturnType<typeof useFloatingPopup>) => CSSProperties;
+export interface FloatingComponentBaseProps {
+    placement?: FloatingPlacement;
+    autoPlacements?: FloatingPlacement[];
+    strategy?: Strategy;
+    content?: ReactNode;
+    children?: ReactNode;
+    isOpen?: boolean;
+    triggerRef?: RefObject<HTMLDivElement>;
+    className?: string;
+    offsetPx?: number;
+    contentWrapClassName?: string;
+    CloseButtonComponent?: ComponentType;
+    showInPortal?: boolean;
+}
+/**
+ * Base styling for any popup that renders via floating-ui (Tooltip, Popover, …). Tooltip extends
+ * this via `styled(...)` to layer on its dark theme + tighter padding without re-declaring the
+ * shared rules.
+ */
+export declare const FloatingComponentWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+/**
+ * This is just the base component for Tooltips and Popovers.
+ * Don't use this - use Tooltip/HelpPopover instead.
+ */
+export declare const FloatingComponentBase: ({ placement, autoPlacements, strategy, content, children, isOpen, triggerRef, className, offsetPx, contentWrapClassName, CloseButtonComponent, showInPortal, }: FloatingComponentBaseProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=floating_component_base.d.ts.map

package/dist/components/floating/floating_component_base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating_component_base.d.ts","sourceRoot":"","sources":["../../../src/components/floating/floating_component_base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQH,KAAK,QAAQ,EAGhB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,aAAa,EAGlB,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;CAarB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE7F,KAAK,uBAAuB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,wEAO9B,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,UAAU,UAAU,CAAC,OAAO,gBAAgB,CAAC,KAAG,aAOpF,CAAC;AAUH,MAAM,WAAW,0BAA0B;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,+NAgBpC,CAAC;AA0BF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,gKAanC,0BAA0B,4CAuC5B,CAAC"}

package/dist/components/floating/floating_component_base.js

@@ -0,0 +1,107 @@
+import { theme as e } from "../../design_system/theme.js";
+import t from "styled-components";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import "clsx";
+import { FloatingPortal as i, autoPlacement as a, autoUpdate as o, flip as s, hide as c, offset as l, shift as u, useFloating as d, useTransitionStyles as f } from "@floating-ui/react";
+//#region src/components/floating/floating_component_base.tsx
+var p = {
+	TOP: "top",
+	TOP_START: "top-start",
+	TOP_END: "top-end",
+	RIGHT: "right",
+	RIGHT_START: "right-start",
+	RIGHT_END: "right-end",
+	BOTTOM: "bottom",
+	BOTTOM_START: "bottom-start",
+	BOTTOM_END: "bottom-end",
+	LEFT: "left",
+	LEFT_START: "left-start",
+	LEFT_END: "left-end"
+}, m = ({ open: e, onOpenChange: t, placement: n = p.TOP, strategy: r = "fixed", autoPlacements: i, offsetPx: m = 10 }) => {
+	let h = d({
+		open: e,
+		onOpenChange: t,
+		placement: n,
+		strategy: r,
+		whileElementsMounted: o,
+		middleware: [
+			l(m),
+			i?.length ? a({ allowedPlacements: i }) : s(),
+			u({ padding: 5 }),
+			c({ strategy: "referenceHidden" })
+		]
+	}), { isMounted: g, styles: _ } = f(h.context, { initial: ({ side: e }) => {
+		switch (e) {
+			case "top": return {
+				opacity: 0,
+				scale: "0.9",
+				transform: "translateY(10px)"
+			};
+			case "bottom": return {
+				opacity: 0,
+				scale: "0.9",
+				transform: "translateY(-10px)"
+			};
+			case "left": return {
+				opacity: 0,
+				scale: "0.9",
+				transform: "translateX(10px)"
+			};
+			case "right": return {
+				opacity: 0,
+				scale: "0.9",
+				transform: "translateX(-10px)"
+			};
+			default: return {};
+		}
+	} });
+	return {
+		...h,
+		isMounted: g,
+		transitionStyles: _
+	};
+}, h = (e) => ({
+	position: e.strategy,
+	top: e.y ?? 0,
+	left: e.x ?? 0,
+	width: "max-content",
+	visibility: e.middlewareData.hide?.referenceHidden ? "hidden" : "visible",
+	...e.transitionStyles
+}), g = t.span`
+    padding: ${e.space.space16};
+    ${e.typography.shared.mobile.bodyM};
+    border-radius: 0.8rem;
+    z-index: 999;
+    white-space: normal;
+    word-break: break-word;
+    cursor: default;
+
+    @media ${e.device.tablet} {
+        ${e.typography.shared.tablet.bodyM};
+    }
+
+    @media ${e.device.desktop} {
+        ${e.typography.shared.desktop.bodyM};
+    }
+`;
+t.div`
+    width: fit-content;
+`, t.div`
+    display: flex;
+    align-items: center;
+    gap: ${e.space.space4};
+    button {
+        color: inherit;
+    }
+`;
+var _ = n((e, t) => {
+	let { showInPortal: n, ...a } = e, o = /* @__PURE__ */ r(g, {
+		...a,
+		ref: t
+	});
+	return n ? /* @__PURE__ */ r(i, { children: o }) : o;
+});
+_.displayName = "FloatingComponentWrap";
+//#endregion
+export { p as FLOATING_PLACEMENT, g as FloatingComponentWrapper, h as getFloatingPopupStyle, m as useFloatingPopup };

package/dist/components/floating/index.d.ts

@@ -0,0 +1,6 @@
+export * from './menu';
+export * from './menu_components';
+export * from './menu_common';
+export * from './tooltip';
+export { FLOATING_PLACEMENT, type FloatingPlacement } from './floating_component_base';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/floating/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/floating/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/floating/menu.d.ts

@@ -0,0 +1,41 @@
+import { Placement } from '@floating-ui/react';
+import { default as React } from 'react';
+import { BoxProps } from '../box';
+export declare const menuClassNames: {
+    WRAPPER: string;
+    BASE: string;
+    LIST: string;
+    ITEM: string;
+};
+type SelectActionType = 'click' | 'enter' | 'space' | 'type';
+export interface MenuOption {
+    label: string;
+    value: string;
+}
+export interface MenuProps<T = MenuOption> {
+    ariaLabel?: string;
+    options: T[];
+    value?: string | string[];
+    onSelect: (newValue: string, selectedBy: SelectActionType) => void;
+    onMenuOpen?: (isOpen: boolean) => void;
+    /**
+     * Overrides default label, which is selected value || defaultLabel
+     */
+    label?: string;
+    defaultLabel?: React.ReactNode;
+    closeOnSelect?: boolean;
+    renderOption?: (option: T, isSelected: boolean) => React.ReactNode;
+    placement?: Placement;
+    components?: {
+        MenuBase?: React.ElementType;
+        Menu?: React.ElementType;
+        MenuItem?: React.ElementType;
+    };
+}
+/**
+ * This example is a Select taken from https://floating-ui.com/docs/react-examples
+ * It tries to mimic API of react-select as closely as possible
+ */
+export declare const Menu: <T extends MenuOption>({ ariaLabel, options, value, onSelect, onMenuOpen, closeOnSelect, label, defaultLabel, components, renderOption, className, placement, ...rest }: MenuProps<T> & BoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/floating/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,KAAK,SAAS,EAOjB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAK5C,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAI7D,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,UAAU;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE;QACT,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;QAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;QACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;KAChC,CAAC;CACL;AAID;;;GAGG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,EAAE,kJAcxC,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,4CAqIzB,CAAC"}

package/dist/components/floating/menu.js

@@ -0,0 +1,98 @@
+import { Box as e } from "../box/box.js";
+import { TextShared as t } from "../text/text_shared.js";
+import { useFloatingMenu as n } from "./menu_common.js";
+import { DropdownMenuBaseComponent as r, ListMenuComponent as i, ListMenuItemComponent as a } from "./menu_components.js";
+import { useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "clsx";
+import { FloatingFocusManager as p, FloatingPortal as m, useClick as h, useDismiss as ee, useInteractions as g, useListNavigation as _, useRole as v, useTypeahead as y } from "@floating-ui/react";
+//#region src/components/floating/menu.tsx
+var b = {
+	WRAPPER: "menu-wrapper",
+	BASE: "menu-base",
+	LIST: "menu-list",
+	ITEM: "menu-item"
+}, x = ({ label: e }, n) => /* @__PURE__ */ u(t, {
+	as: "span",
+	children: e
+}), S = ({ ariaLabel: t, options: S, value: C, onSelect: w, onMenuOpen: T, closeOnSelect: E = !0, label: D, defaultLabel: O, components: k, renderOption: A, className: j, placement: M, ...N }) => {
+	let [P, F] = l(!1), I = o((e) => {
+		F(e), T && T(e);
+	}, [T]), { refs: L, floatingStyles: R, context: z } = n({
+		isOpen: P,
+		setIsOpen: I,
+		placement: M
+	}), B = s(() => {
+		if (Array.isArray(C)) return null;
+		let e = S.findIndex((e) => e.value === C);
+		return e < 0 ? null : e;
+	}, [S, C]), V = s(() => new Set(Array.isArray(C) ? C : []), [C]), H = (e) => Array.isArray(C) ? V.has(S[e].value) : e === B, [U, W] = l(null), G = (e, t) => {
+		w(S[e].value, t), E && I(!1);
+	}, K = c([]), q = c(!1), J = c(S.map((e) => e.label)), Y = h(z, { event: "mousedown" }), X = ee(z), Z = y(z, {
+		listRef: J,
+		activeIndex: U,
+		selectedIndex: B,
+		onMatch: P ? W : (e) => w(S[e].value, "type"),
+		onTypingChange(e) {
+			q.current = e;
+		}
+	}), { getFloatingProps: Q, getItemProps: $, getReferenceProps: te } = g([
+		Y,
+		X,
+		v(z, { role: "listbox" }),
+		_(z, {
+			listRef: K,
+			activeIndex: U,
+			selectedIndex: B,
+			onNavigate: W,
+			loop: !0
+		}),
+		Z
+	]), ne = k?.MenuBase || r, re = k?.Menu || i, ie = k?.MenuItem || a, ae = A || x;
+	return /* @__PURE__ */ d(e, {
+		className: f(j, b.WRAPPER),
+		...N,
+		children: [/* @__PURE__ */ u(ne, {
+			"aria-label": t,
+			"aria-labelledby": t ? void 0 : "select-label",
+			"aria-autocomplete": "none",
+			ref: L.setReference,
+			...te(),
+			className: b.BASE,
+			tabindex: "0",
+			children: D ?? (B === null ? O : S[B].label)
+		}), P && /* @__PURE__ */ u(m, { children: /* @__PURE__ */ u(p, {
+			context: z,
+			modal: !1,
+			children: /* @__PURE__ */ u(re, {
+				ref: L.setFloating,
+				style: R,
+				...Q(),
+				className: b.LIST,
+				children: S.map((e, t) => {
+					let n = H(t);
+					return /* @__PURE__ */ u(ie, {
+						$isSelected: n,
+						$isActive: t === U,
+						ref: (e) => {
+							K.current[t] = e;
+						},
+						role: "option",
+						tabIndex: t === U ? 0 : -1,
+						className: b.ITEM,
+						"aria-selected": n && t === U,
+						...$({
+							onClick: () => G(t, "click"),
+							onKeyDown: (e) => {
+								e.key === "Enter" && (e.preventDefault(), G(t, "enter")), e.key === " " && !q.current && (e.preventDefault(), G(t, "space"));
+							}
+						}),
+						children: ae(e, n)
+					}, e.value);
+				})
+			})
+		}) })]
+	});
+};
+//#endregion
+export { S as Menu, b as menuClassNames };

package/dist/components/floating/menu_common.d.ts

@@ -0,0 +1,44 @@
+import { Placement } from '@floating-ui/react';
+export declare const useFloatingMenu: ({ isOpen, setIsOpen, placement, }: {
+    isOpen: boolean;
+    setIsOpen: (newIsOpen: boolean) => void;
+    placement?: Placement;
+}) => {
+    placement: Placement;
+    strategy: import('@floating-ui/react-dom').Strategy;
+    middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<Element>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<Element>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import('@floating-ui/react-dom').Strategy;
+        middlewareData: import('@floating-ui/react-dom').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<Element>;
+        elements: import('@floating-ui/react').ExtendedElements<Element>;
+    };
+};
+//# sourceMappingURL=menu_common.d.ts.map

package/dist/components/floating/menu_common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu_common.d.ts","sourceRoot":"","sources":["../../../src/components/floating/menu_common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,eAAO,MAAM,eAAe,GAAI,mCAI7B;IACC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBK,CAAC"}

package/dist/components/floating/menu_common.js

@@ -0,0 +1,19 @@
+import { autoUpdate as e, offset as t, size as n, useFloating as r } from "@floating-ui/react";
+//#region src/components/floating/menu_common.tsx
+var i = ({ isOpen: i, setIsOpen: a, placement: o = "bottom-start" }) => r({
+	placement: o,
+	open: i,
+	onOpenChange: a,
+	whileElementsMounted: e,
+	middleware: [t(5), n({
+		apply({ elements: e, availableHeight: t }) {
+			Object.assign(e.floating.style, {
+				maxHeight: `${t}px`,
+				minHeight: "50px"
+			});
+		},
+		padding: 10
+	})]
+});
+//#endregion
+export { i as useFloatingMenu };

package/dist/components/floating/menu_components.d.ts

@@ -0,0 +1,40 @@
+import { ReferenceType, UseFloatingReturn } from '@floating-ui/react';
+import { default as React } from 'react';
+import { BoxProps } from '../box';
+export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
+/**
+ * Menu wrapper component
+ */
+export declare const ListMenuComponent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<(BoxProps & React.RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, BoxProps & React.RefAttributes<HTMLElement>>, import('styled-components/dist/types').BaseObject>, import('styled-components/dist/types').BaseObject>> & string & Omit<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+interface SelectableListMenuItemProps {
+    $isActive?: boolean;
+    $isSelected?: boolean;
+}
+/**
+ * Menu item component
+ */
+export declare const ListMenuItemComponent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<(BoxProps & React.RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, BoxProps & React.RefAttributes<HTMLElement>>, import('styled-components/dist/types').BaseObject>, SelectableListMenuItemProps>> & string & Omit<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+/**
+ * Menu base component WITHOUT dropdown icon
+ */
+export declare const PlainMenuBaseComponent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(BoxProps & React.RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, import('styled-components/dist/types').BaseObject>> & string & Omit<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+type DropdownMenuBaseComponentProps = {
+    children: React.ReactNode;
+} & BoxProps;
+/**
+ * Menu base component WITH dropdown icon
+ */
+export declare const DropdownMenuBaseComponent: React.ForwardRefExoticComponent<DropdownMenuBaseComponentProps & React.RefAttributes<HTMLElement>>;
+type DropdownMenuBaseComponentWithCountProps = {
+    children: React.ReactNode;
+    onClear?: () => void;
+    selectedCount?: number;
+} & BoxProps;
+/**
+ * Menu base component WITH dropdown icon and a selected-count badge.
+ * Use this variant when the menu supports multi-select and you want to
+ * display how many items are selected.
+ */
+export declare const DropdownMenuBaseComponentWithCount: React.ForwardRefExoticComponent<DropdownMenuBaseComponentWithCountProps & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=menu_components.d.ts.map

package/dist/components/floating/menu_components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu_components.d.ts","sourceRoot":"","sources":["../../../src/components/floating/menu_components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;AAE3F;;GAEG;AACH,eAAO,MAAM,iBAAiB,slBAe7B,CAAC;AAEF,UAAU,2BAA2B;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,gkBAoBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,gZAelC,CAAC;AAEF,KAAK,8BAA8B,GAAG;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,QAAQ,CAAC;AAEb;;GAEG;AACH,eAAO,MAAM,yBAAyB,oGASrC,CAAC;AAQF,KAAK,uCAAuC,GAAG;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,QAAQ,CAAC;AAEb;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,6GA6B9C,CAAC"}

package/dist/components/floating/menu_components.js

@@ -0,0 +1,91 @@
+import { theme as e } from "../../design_system/theme.js";
+import { Box as t } from "../box/box.js";
+import { Badge as n } from "../badge/badge.js";
+import r, { css as i } from "styled-components";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ChevronDownIcon as c, CrossIcon as l } from "@apify/ui-icons";
+import "@floating-ui/react";
+//#region src/components/floating/menu_components.tsx
+var u = r(t).attrs({ p: "space8" })`
+    display: flex;
+    flex-direction: column;
+    max-height: 300px;
+    min-width: 160px;
+    box-shadow: ${e.shadow.shadow2};
+    background: ${e.color.neutral.background};
+    border: 1px solid ${e.color.neutral.separatorSubtle};
+    border-radius: ${e.radius.radius8};
+    scrollbar-color: ${e.color.neutral.separatorSubtle} ${e.color.neutral.background};
+    outline: none;
+    overflow-y: auto;
+    z-index: 10;
+`, d = r(t).attrs({ px: "space8" })`
+    border-radius: ${e.radius.radius8};
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
+
+    ${({ $isActive: t }) => t && i`
+            background-color: ${e.color.neutral.hover};
+        `}
+
+    ${({ $isSelected: t }) => t && i`
+            background-color: ${e.color.neutral.backgroundSubtle};
+            color: ${e.color.primary.text};
+        `}
+`, f = r(t)`
+    display: flex;
+    align-items: center;
+    gap: ${e.space.space4};
+    padding: ${e.space.space8};
+    border-radius: ${e.radius.radius8};
+    border: 1px solid ${e.color.neutral.separatorSubtle};
+    background-color: ${e.color.neutral.backgroundMuted};
+
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+        background-color: ${e.color.neutral.backgroundSubtle};
+    }
+`, p = a(({ children: t, ...n }, r) => /* @__PURE__ */ s(f, {
+	...n,
+	ref: r,
+	children: [t, /* @__PURE__ */ o(c, {
+		size: "16",
+		color: e.color.neutral.icon
+	})]
+})), m = r.div`
+    width: 1px;
+    align-self: stretch;
+    background: ${e.color.neutral.separatorSubtle};
+`, h = a(({ children: t, onClear: r, selectedCount: i, ...a }, u) => {
+	let d = r && i !== void 0;
+	return /* @__PURE__ */ s(f, {
+		...a,
+		ref: u,
+		children: [
+			t,
+			d && /* @__PURE__ */ o(n, {
+				variant: "primary_black",
+				size: "extra_small",
+				children: i
+			}),
+			d && /* @__PURE__ */ o(m, {}),
+			r ? /* @__PURE__ */ o(l, {
+				size: "16",
+				color: e.color.neutral.icon,
+				onMouseDown: (e) => e.stopPropagation(),
+				onClick: (e) => {
+					e.stopPropagation(), r();
+				}
+			}) : /* @__PURE__ */ o(c, {
+				size: "16",
+				color: e.color.neutral.icon
+			})
+		]
+	});
+});
+//#endregion
+export { p as DropdownMenuBaseComponent, h as DropdownMenuBaseComponentWithCount, u as ListMenuComponent, d as ListMenuItemComponent, f as PlainMenuBaseComponent };