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

package/dist/components/floating/floating_component_base.js

@@ -0,0 +1,134 @@
+import { theme } from "../../design_system/theme.js";
+import styled from "styled-components";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "clsx";
+import { FloatingPortal, autoPlacement, autoUpdate, flip, hide, offset, shift, useFloating, useTransitionStyles } from "@floating-ui/react";
+//#region src/components/floating/floating_component_base.tsx
+var FLOATING_PLACEMENT = {
+	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"
+};
+/**
+* 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.
+*/
+var useFloatingPopup = ({ open, onOpenChange, placement = FLOATING_PLACEMENT.TOP, strategy = "fixed", autoPlacements, offsetPx = 10 }) => {
+	const floating = useFloating({
+		open,
+		onOpenChange,
+		placement,
+		strategy,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(offsetPx),
+			autoPlacements?.length ? autoPlacement({ allowedPlacements: autoPlacements }) : flip(),
+			shift({ padding: 5 }),
+			hide({ strategy: "referenceHidden" })
+		]
+	});
+	const { isMounted, styles: transitionStyles } = useTransitionStyles(floating.context, { initial: ({ side }) => {
+		switch (side) {
+			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 {
+		...floating,
+		isMounted,
+		transitionStyles
+	};
+};
+/**
+* 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.
+*/
+var getFloatingPopupStyle = (floating) => ({
+	position: floating.strategy,
+	top: floating.y ?? 0,
+	left: floating.x ?? 0,
+	width: "max-content",
+	visibility: floating.middlewareData.hide?.referenceHidden ? "hidden" : "visible",
+	...floating.transitionStyles
+});
+/**
+* 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.
+*/
+var FloatingComponentWrapper = styled.span`
+    padding: ${theme.space.space16};
+    ${theme.typography.shared.mobile.bodyM};
+    border-radius: 0.8rem;
+    z-index: 999;
+    white-space: normal;
+    word-break: break-word;
+    cursor: default;
+
+    @media ${theme.device.tablet} {
+        ${theme.typography.shared.tablet.bodyM};
+    }
+
+    @media ${theme.device.desktop} {
+        ${theme.typography.shared.desktop.bodyM};
+    }
+`;
+styled.div`
+    width: fit-content;
+`;
+styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space4};
+    button {
+        color: inherit;
+    }
+`;
+var FloatingComponentWrap = forwardRef((props, ref) => {
+	const { showInPortal, ...rest } = props;
+	const component = /* @__PURE__ */ jsx(FloatingComponentWrapper, {
+		...rest,
+		ref
+	});
+	if (showInPortal) return /* @__PURE__ */ jsx(FloatingPortal, { children: component });
+	return component;
+});
+FloatingComponentWrap.displayName = "FloatingComponentWrap";
+//#endregion
+export { FLOATING_PLACEMENT, FloatingComponentWrapper, getFloatingPopupStyle, 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,131 @@
+import { Box } from "../box/box.js";
+import { TextShared } from "../text/text_shared.js";
+import { useFloatingMenu } from "./menu_common.js";
+import { DropdownMenuBaseComponent, ListMenuComponent, ListMenuItemComponent } from "./menu_components.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead } from "@floating-ui/react";
+//#region src/components/floating/menu.tsx
+var menuClassNames = {
+	WRAPPER: "menu-wrapper",
+	BASE: "menu-base",
+	LIST: "menu-list",
+	ITEM: "menu-item"
+};
+var defaultRenderOption = ({ label }, _isSelected) => /* @__PURE__ */ jsx(TextShared, {
+	as: "span",
+	children: label
+});
+/**
+* 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
+*/
+var Menu = ({ ariaLabel, options, value, onSelect, onMenuOpen, closeOnSelect = true, label, defaultLabel, components, renderOption, className, placement, ...rest }) => {
+	const [isOpen, setIsOpenState] = useState(false);
+	const setIsOpen = useCallback((newIsOpen) => {
+		setIsOpenState(newIsOpen);
+		if (onMenuOpen) onMenuOpen(newIsOpen);
+	}, [onMenuOpen]);
+	const { refs, floatingStyles, context } = useFloatingMenu({
+		isOpen,
+		setIsOpen,
+		placement
+	});
+	const selectedIndex = useMemo(() => {
+		if (Array.isArray(value)) return null;
+		const foundIndex = options.findIndex((option) => option.value === value);
+		return foundIndex < 0 ? null : foundIndex;
+	}, [options, value]);
+	const selectedValuesSet = useMemo(() => new Set(Array.isArray(value) ? value : []), [value]);
+	const isItemSelected = (index) => Array.isArray(value) ? selectedValuesSet.has(options[index].value) : index === selectedIndex;
+	const [activeIndex, setActiveIndex] = useState(null);
+	const handleSelect = (newIndex, selectedBy) => {
+		onSelect(options[newIndex].value, selectedBy);
+		if (closeOnSelect) setIsOpen(false);
+	};
+	const listRef = useRef([]);
+	const isTypingRef = useRef(false);
+	const listContentRef = useRef(options.map((option) => option.label));
+	const click = useClick(context, { event: "mousedown" });
+	const dismiss = useDismiss(context);
+	const typeahead = useTypeahead(context, {
+		listRef: listContentRef,
+		activeIndex,
+		selectedIndex,
+		onMatch: isOpen ? setActiveIndex : (newIndex) => onSelect(options[newIndex].value, "type"),
+		onTypingChange(isTyping) {
+			isTypingRef.current = isTyping;
+		}
+	});
+	const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+		click,
+		dismiss,
+		useRole(context, { role: "listbox" }),
+		useListNavigation(context, {
+			listRef,
+			activeIndex,
+			selectedIndex,
+			onNavigate: setActiveIndex,
+			loop: true
+		}),
+		typeahead
+	]);
+	const MenuBaseComponent = components?.MenuBase || DropdownMenuBaseComponent;
+	const MenuComponent = components?.Menu || ListMenuComponent;
+	const MenuItemComponent = components?.MenuItem || ListMenuItemComponent;
+	const effectiveRenderOption = renderOption || defaultRenderOption;
+	return /* @__PURE__ */ jsxs(Box, {
+		className: clsx$1(className, menuClassNames.WRAPPER),
+		...rest,
+		children: [/* @__PURE__ */ jsx(MenuBaseComponent, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabel ? void 0 : "select-label",
+			"aria-autocomplete": "none",
+			ref: refs.setReference,
+			...getReferenceProps(),
+			className: menuClassNames.BASE,
+			tabindex: "0",
+			children: label ?? (selectedIndex !== null ? options[selectedIndex].label : defaultLabel)
+		}), isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+			context,
+			modal: false,
+			children: /* @__PURE__ */ jsx(MenuComponent, {
+				ref: refs.setFloating,
+				style: floatingStyles,
+				...getFloatingProps(),
+				className: menuClassNames.LIST,
+				children: options.map((option, i) => {
+					const isSelected = isItemSelected(i);
+					return /* @__PURE__ */ jsx(MenuItemComponent, {
+						$isSelected: isSelected,
+						$isActive: i === activeIndex,
+						ref: (node) => {
+							listRef.current[i] = node;
+						},
+						role: "option",
+						tabIndex: i === activeIndex ? 0 : -1,
+						className: menuClassNames.ITEM,
+						"aria-selected": isSelected && i === activeIndex,
+						...getItemProps({
+							onClick: () => handleSelect(i, "click"),
+							onKeyDown: (event) => {
+								if (event.key === "Enter") {
+									event.preventDefault();
+									handleSelect(i, "enter");
+								}
+								if (event.key === " " && !isTypingRef.current) {
+									event.preventDefault();
+									handleSelect(i, "space");
+								}
+							}
+						}),
+						children: effectiveRenderOption(option, isSelected)
+					}, option.value);
+				})
+			})
+		}) })]
+	});
+};
+//#endregion
+export { Menu, 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, offset, size, useFloating } from "@floating-ui/react";
+//#region src/components/floating/menu_common.tsx
+var useFloatingMenu = ({ isOpen, setIsOpen, placement = "bottom-start" }) => useFloating({
+	placement,
+	open: isOpen,
+	onOpenChange: setIsOpen,
+	whileElementsMounted: autoUpdate,
+	middleware: [offset(5), size({
+		apply({ elements, availableHeight }) {
+			Object.assign(elements.floating.style, {
+				maxHeight: `${availableHeight}px`,
+				minHeight: "50px"
+			});
+		},
+		padding: 10
+	})]
+});
+//#endregion
+export { 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,116 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { Badge } from "../badge/badge.js";
+import styled, { css } from "styled-components";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, CrossIcon } from "@apify/ui-icons";
+import "@floating-ui/react";
+//#region src/components/floating/menu_components.tsx
+/**
+* Menu wrapper component
+*/
+var ListMenuComponent = styled(Box).attrs({ p: "space8" })`
+    display: flex;
+    flex-direction: column;
+    max-height: 300px;
+    min-width: 160px;
+    box-shadow: ${theme.shadow.shadow2};
+    background: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius8};
+    scrollbar-color: ${theme.color.neutral.separatorSubtle} ${theme.color.neutral.background};
+    outline: none;
+    overflow-y: auto;
+    z-index: 10;
+`;
+/**
+* Menu item component
+*/
+var ListMenuItemComponent = styled(Box).attrs({ px: "space8" })`
+    border-radius: ${theme.radius.radius8};
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
+
+    ${({ $isActive }) => $isActive && css`
+            background-color: ${theme.color.neutral.hover};
+        `}
+
+    ${({ $isSelected }) => $isSelected && css`
+            background-color: ${theme.color.neutral.backgroundSubtle};
+            color: ${theme.color.primary.text};
+        `}
+`;
+/**
+* Menu base component WITHOUT dropdown icon
+*/
+var PlainMenuBaseComponent = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space4};
+    padding: ${theme.space.space8};
+    border-radius: ${theme.radius.radius8};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    background-color: ${theme.color.neutral.backgroundMuted};
+
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+        background-color: ${theme.color.neutral.backgroundSubtle};
+    }
+`;
+/**
+* Menu base component WITH dropdown icon
+*/
+var DropdownMenuBaseComponent = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(PlainMenuBaseComponent, {
+		...props,
+		ref,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+			size: "16",
+			color: theme.color.neutral.icon
+		})]
+	});
+});
+var VerticalDivider = styled.div`
+    width: 1px;
+    align-self: stretch;
+    background: ${theme.color.neutral.separatorSubtle};
+`;
+/**
+* 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.
+*/
+var DropdownMenuBaseComponentWithCount = forwardRef(({ children, onClear, selectedCount, ...props }, ref) => {
+	const showCount = onClear && selectedCount !== void 0;
+	return /* @__PURE__ */ jsxs(PlainMenuBaseComponent, {
+		...props,
+		ref,
+		children: [
+			children,
+			showCount && /* @__PURE__ */ jsx(Badge, {
+				variant: "primary_black",
+				size: "extra_small",
+				children: selectedCount
+			}),
+			showCount && /* @__PURE__ */ jsx(VerticalDivider, {}),
+			onClear ? /* @__PURE__ */ jsx(CrossIcon, {
+				size: "16",
+				color: theme.color.neutral.icon,
+				onMouseDown: (e) => e.stopPropagation(),
+				onClick: (e) => {
+					e.stopPropagation();
+					onClear();
+				}
+			}) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+				size: "16",
+				color: theme.color.neutral.icon
+			})
+		]
+	});
+});
+//#endregion
+export { DropdownMenuBaseComponent, DropdownMenuBaseComponentWithCount, ListMenuComponent, ListMenuItemComponent, PlainMenuBaseComponent };

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

@@ -0,0 +1,43 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+import { FloatingComponentBaseProps } from './floating_component_base';
+export declare const TOOLTIP_TEXT_ALIGNS: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+export type TooltipTextAlign = (typeof TOOLTIP_TEXT_ALIGNS)[keyof typeof TOOLTIP_TEXT_ALIGNS];
+export declare const TOOLTIP_SIZES: {
+    readonly XSMALL: "xsmall";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+    readonly XLARGE: "xlarge";
+};
+export type TooltipSize = (typeof TOOLTIP_SIZES)[keyof typeof TOOLTIP_SIZES];
+export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size' | 'triggerRef' | 'CloseButtonComponent'> {
+    as?: ElementType;
+    className?: string;
+    delayShow?: number;
+    delayHide?: number;
+    shortcuts?: string[];
+    imageUrl?: string;
+    subtleText?: string;
+    size?: TooltipSize;
+    textAlign?: TooltipTextAlign;
+}
+interface WithTooltipProps {
+    tooltipProps?: TooltipProps;
+}
+/**
+ * Tooltip appears on hover, for onclick use Popover.
+ *
+ * Reference (the trigger wrapper) and floating (the popup) are rendered as separate DOM subtrees
+ * — the popup is portaled (or rendered as a sibling fragment when `showInPortal={false}`), never
+ * nested inside the trigger. floating-ui's `useHover` resolves open/close state by tracking the
+ * cursor across distinct reference and floating elements; nesting them causes their bounding
+ * rects to overlap and the state machine flips unpredictably (see floating-ui docs on the
+ * reference/floating element separation requirement).
+ */
+export declare const Tooltip: ({ as, className, delayShow, delayHide, shortcuts, imageUrl, subtleText, size, textAlign, placement, autoPlacements, strategy, offsetPx, contentWrapClassName, showInPortal, content, children, }: TooltipProps) => ReactNode;
+export declare function withTooltip<TProps extends Record<string, unknown> = Record<string, unknown>>(Component: ComponentType<TProps>): import('react').ForwardRefExoticComponent<import('react').PropsWithoutRef<TProps & WithTooltipProps> & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAc,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAKnG,OAAO,EACH,KAAK,0BAA0B,EAIlC,MAAM,2BAA2B,CAAC;AAGnC,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,0BAA0B,EAC1B,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CAC5D;IACG,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED,UAAU,gBAAgB;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AA0BD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,kMAkBrB,YAAY,KAAG,SAgDjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACxF,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,sJAcnC"}