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

package/dist/components/dropdown/dropdown.styled.js

@@ -0,0 +1,243 @@
+import { theme } from "../../design_system/theme.js";
+import styled from "styled-components";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown.styled.ts
+var DROPDOWN_ELEMENT_CLASSES = {
+	WRAPPER: "dropdown-wrapper",
+	ITEM: "dropdown-item",
+	TRIGGER_OVERLAY: "dropdown-trigger-overlay",
+	RADIO_OPTION: "dropdown-radio-option",
+	RADIO_OPTION_DISABLED: "dropdown-radio-option-disabled",
+	RADIO_OPTION_SELECTED: "dropdown-radio-option-selected",
+	RADIO_OPTION_ICON: "dropdown-radio-option-icon",
+	RADIO_OPTION_CONTENT: "dropdown-radio-option-content"
+};
+var StyledContent = styled(DropdownMenu.Content).attrs((props) => ({
+	"data-test": "dropdown-wrapper",
+	className: [DROPDOWN_ELEMENT_CLASSES.WRAPPER, props.className].filter(Boolean).join(" ")
+}))`
+    background: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    padding: ${theme.space.space6} 0;
+    min-width: 80px;
+    width: ${(props) => props.$width || "auto"};
+    height: ${(props) => props.$height || "auto"};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: ${(props) => props.$zIndex ?? 100} !important;
+    position: relative;
+`;
+var ScrollableContent = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    gap: ${theme.space.space4};
+    display: flex;
+    flex-direction: column;
+    scrollbar-width: thin;
+    scrollbar-color: ${theme.color.neutral.separatorSubtle} transparent;
+
+    .${DROPDOWN_ELEMENT_CLASSES.TRIGGER_OVERLAY} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        z-index: 1;
+        pointer-events: none;
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION} {
+        cursor: pointer;
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius4};
+        gap: ${theme.space.space8};
+        min-height: 28px;
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_DISABLED} {
+        cursor: not-allowed;
+        color: ${theme.color.neutral.textDisabled};
+
+        * {
+            color: ${theme.color.neutral.textDisabled} !important;
+        }
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_SELECTED} {
+        background: none;
+        color: ${theme.color.neutral.text};
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_ICON} {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: ${theme.space.space2} 0;
+        min-width: 16px;
+        min-height: 20px;
+        margin-right: ${theme.space.space4};
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_CONTENT} {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        max-width: 100%;
+    }
+`;
+var StyledItemRow = styled.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    gap: ${theme.space.space4};
+    min-height: 28px;
+    padding: ${theme.space.space4} 0;
+`;
+var StyledItemWrapper = styled.div`
+    margin: 0 ${theme.space.space6};
+`;
+var StyledItem = styled(DropdownMenu.Item)`
+    min-width: 100%;
+    display: block;
+    padding: 0 ${theme.space.space8};
+    color: ${theme.color.neutral.text};
+    border-radius: ${theme.radius.radius6};
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background 0.15s;
+    outline: none;
+    box-shadow: none;
+
+    &[data-highlighted],
+    &.dropdown-item-selected {
+        background: ${theme.color.neutral.hover};
+    }
+
+    &[data-disabled] {
+        color: ${theme.color.neutral.textDisabled};
+        cursor: not-allowed;
+    }
+    &.no-hover {
+        cursor: default;
+        &[data-highlighted],
+        &.dropdown-item-selected,
+        &:hover {
+            background: none !important;
+        }
+    }
+`;
+var StyledCheckboxItem = styled(DropdownMenu.CheckboxItem)`
+    min-width: 100%;
+    display: block;
+    padding: 0 ${theme.space.space8};
+    color: ${theme.color.neutral.text};
+    border-radius: ${theme.radius.radius4};
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background 0.15s;
+    outline: none;
+    box-shadow: none;
+
+    &[data-highlighted],
+    &:hover {
+        background: ${theme.color.neutral.hover};
+    }
+
+    &[data-disabled] {
+        color: ${theme.color.neutral.textDisabled};
+        cursor: not-allowed;
+    }
+
+    &[data-state='checked'] {
+        background: none;
+    }
+
+    &.no-hover {
+        cursor: default;
+
+        &[data-highlighted],
+        &:hover {
+            background: none !important;
+        }
+    }
+`;
+var StyledLabel = styled(DropdownMenu.Label)`
+    padding: ${theme.space.space8};
+    padding-bottom: ${theme.space.space2};
+    color: ${theme.color.neutral.textSubtle};
+    ${theme.typography.shared.desktop.bodyS}
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space4};
+`;
+var StyledDescription = styled.div`
+    color: ${theme.color.neutral.textSubtle};
+    ${theme.typography.shared.desktop.bodyS}
+    display: block;
+    width: 100%;
+    margin-top: ${theme.space.space2};
+
+    [data-disabled] & {
+        color: ${theme.color.neutral.textDisabled};
+    }
+`;
+var StyledItemTitle = styled.span`
+    ${theme.typography.shared.desktop.bodyM}
+    color: ${theme.color.neutral.textMuted};
+    display: block;
+    width: 100%;
+    margin-right: ${theme.space.space32};
+
+    [data-disabled] & {
+        color: ${theme.color.neutral.textDisabled};
+    }
+`;
+var StyledIconWrapper = styled.span`
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+    width: 20px;
+    padding-top: ${theme.space.space2};
+    color: ${theme.color.neutral.textMuted};
+`;
+var StyledCheckboxIconWrapper = styled(StyledIconWrapper)`
+    margin-right: ${theme.space.space4};
+`;
+var StyledContentWrapper = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    width: max-content;
+    overflow: hidden;
+`;
+var StyledTagWrapper = styled.div`
+    display: flex;
+    gap: ${theme.space.space4};
+`;
+var StyledControls = styled.div`
+    padding-top: ${theme.space.space6};
+    border-top: 1px solid ${theme.color.neutral.separatorSubtle};
+    gap: ${theme.space.space4};
+    display: flex;
+    flex-direction: column;
+`;
+var StyledSeparator = styled(DropdownMenu.Separator)`
+    height: 1px;
+    min-height: 1px;
+    margin: ${theme.space.space4} ${theme.space.space8};
+    background-color: ${theme.color.neutral.separatorSubtle};
+`;
+//#endregion
+export { DROPDOWN_ELEMENT_CLASSES, ScrollableContent, StyledCheckboxIconWrapper, StyledCheckboxItem, StyledContent, StyledContentWrapper, StyledControls, StyledDescription, StyledIconWrapper, StyledItem, StyledItemRow, StyledItemTitle, StyledItemWrapper, StyledLabel, StyledSeparator, StyledTagWrapper };

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

@@ -0,0 +1,17 @@
+import { PopperContentProps } from '@radix-ui/react-popper';
+import type * as React from 'react';
+export type BaseDropdownItemProps = {
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+export type BaseDropdownContentProps = {
+    width?: string;
+    height?: string;
+    closeOnSelect?: boolean;
+    zIndex?: number;
+    contentProps?: PopperContentProps;
+};
+//# sourceMappingURL=dropdown.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,qBAAqB,GAAG;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACrC,CAAC"}

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

@@ -0,0 +1,10 @@
+import { Button } from '../button/button';
+import { BaseDropdownContentProps } from './dropdown.types';
+type DropdownButtonProps = BaseDropdownContentProps & {
+    buttonProps?: Partial<React.ComponentPropsWithoutRef<typeof Button>>;
+    buttonLabel: React.ReactNode;
+    children: React.ReactNode;
+};
+export declare const DropdownButton: ({ buttonProps, buttonLabel, children, closeOnSelect, contentProps, width, height, zIndex, }: DropdownButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dropdown_button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown_button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAGjE,KAAK,mBAAmB,GAAG,wBAAwB,GAAG;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC;IACrE,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6FAS5B,mBAAmB,4CAqBrB,CAAC"}

package/dist/components/dropdown/dropdown_button.js

@@ -0,0 +1,35 @@
+import { Button } from "../button/button.js";
+import { ScrollableContent, StyledContent } from "./dropdown.styled.js";
+import { DropdownRoot } from "./dropdown_root.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown_button.tsx
+var DropdownButton = ({ buttonProps, buttonLabel, children, closeOnSelect = true, contentProps, width, height, zIndex }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const defaultButtonProps = {
+		onClick: () => void 0,
+		trackingId: "dropdown-button",
+		...buttonProps
+	};
+	return /* @__PURE__ */ jsxs(DropdownRoot, {
+		isOpen,
+		onIsOpenChange: setIsOpen,
+		closeOnSelect,
+		children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				...defaultButtonProps,
+				children: buttonLabel
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(StyledContent, {
+			$width: width,
+			$height: height,
+			$zIndex: zIndex,
+			...contentProps,
+			children: /* @__PURE__ */ jsx(ScrollableContent, { children })
+		}) })]
+	});
+};
+//#endregion
+export { DropdownButton };

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

@@ -0,0 +1,11 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+type DropdownRootProps = React.ComponentPropsWithRef<typeof DropdownMenu.Root> & {
+    closeOnSelect?: boolean;
+    children: React.ReactNode;
+    onIsOpenChange?: (isOpen: boolean) => void;
+    isOpen?: boolean;
+    contentProps?: React.ComponentPropsWithRef<typeof DropdownMenu.Content>;
+};
+export declare const DropdownRoot: ({ closeOnSelect, children, isOpen, onIsOpenChange, ...props }: DropdownRootProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dropdown_root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_root.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown_root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAK9D,KAAK,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3E,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,+DAM1B,iBAAiB,4CAqBnB,CAAC"}

package/dist/components/dropdown/dropdown_root.js

@@ -0,0 +1,28 @@
+import { DropdownContext } from "./dropdown.context.js";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown_root.tsx
+var DropdownRoot = ({ closeOnSelect = true, children, isOpen, onIsOpenChange, ...props }) => {
+	const [internalIsOpen, setInternalIsOpen] = useState(false);
+	const isControlled = isOpen !== void 0 && onIsOpenChange !== void 0;
+	const effectiveIsOpen = isControlled ? isOpen : internalIsOpen;
+	const effectiveSetIsOpen = isControlled ? onIsOpenChange : setInternalIsOpen;
+	const closeDropdown = useCallback(() => effectiveSetIsOpen(false), [effectiveSetIsOpen]);
+	const handleSelectAndClose = useCallback((event) => {
+		if (closeOnSelect) closeDropdown();
+		if (event) event.preventDefault();
+	}, [closeOnSelect, closeDropdown]);
+	return /* @__PURE__ */ jsx(DropdownContext.Provider, {
+		value: { handleSelectAndClose },
+		children: /* @__PURE__ */ jsx(DropdownMenu.Root, {
+			open: effectiveIsOpen,
+			onOpenChange: effectiveSetIsOpen,
+			modal: false,
+			...props,
+			children
+		})
+	});
+};
+//#endregion
+export { DropdownRoot };

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

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseDropdownContentProps } from './dropdown.types';
+export type DropdownShellProps = BaseDropdownContentProps & {
+    children: ReactNode;
+    isOpen: boolean;
+    onIsOpenChange: (open: boolean) => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    strategy?: 'absolute' | 'fixed';
+};
+/**
+ * DropdownShell positions the dropdown relative to a custom trigger element via Floating UI.
+ * Use it when you have a custom trigger (not a Button) and need explicit ref-based positioning.
+ */
+export declare const DropdownShell: ({ isOpen, onIsOpenChange, children, closeOnSelect, contentProps, width, height, triggerRef, strategy, zIndex, }: DropdownShellProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=dropdown_shell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_shell.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown_shell.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAKrF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,iHAW3B,kBAAkB,mDAkGpB,CAAC"}

package/dist/components/dropdown/dropdown_shell.js

@@ -0,0 +1,80 @@
+import { theme } from "../../design_system/theme.js";
+import { DropdownContext } from "./dropdown.context.js";
+import { ScrollableContent, StyledContent } from "./dropdown.styled.js";
+import { useCallback, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown_shell.tsx
+/**
+* DropdownShell positions the dropdown relative to a custom trigger element via Floating UI.
+* Use it when you have a custom trigger (not a Button) and need explicit ref-based positioning.
+*/
+var DropdownShell = ({ isOpen, onIsOpenChange, children, closeOnSelect = true, contentProps, width, height, triggerRef, strategy = "absolute", zIndex }) => {
+	const handleSelectAndClose = useCallback((event) => {
+		if (closeOnSelect) onIsOpenChange(false);
+		if (event) event.preventDefault();
+	}, [closeOnSelect, onIsOpenChange]);
+	const side = contentProps?.side || "bottom";
+	const align = contentProps?.align || "start";
+	const sideOffset = contentProps?.sideOffset || 0;
+	const alignOffset = contentProps?.alignOffset || 0;
+	const placement = align === "center" ? side : `${side}-${align}`;
+	const floatingMiddleware = [
+		shift(),
+		flip(),
+		size({ apply({ availableHeight, elements }) {
+			Object.assign(elements.floating.style, { maxHeight: `calc(${availableHeight}px - ${theme.space.space8})` });
+		} })
+	];
+	if (sideOffset || alignOffset) floatingMiddleware.push(offset({
+		mainAxis: sideOffset,
+		crossAxis: alignOffset
+	}));
+	const { x, y, refs: { setReference, setFloating }, strategy: floatingStrategy } = useFloating({
+		placement,
+		strategy,
+		middleware: floatingMiddleware,
+		whileElementsMounted: autoUpdate
+	});
+	useLayoutEffect(() => {
+		if (triggerRef?.current) setReference(triggerRef.current);
+	}, [triggerRef, setReference]);
+	const handlePointerDownOutside = useCallback((event) => {
+		if (!triggerRef?.current?.contains(event.detail.originalEvent.target)) onIsOpenChange(false);
+	}, [triggerRef, onIsOpenChange]);
+	const shouldShowDropdown = isOpen && x !== null && y !== null;
+	const setFloatingRef = useCallback((element) => {
+		setFloating(element);
+	}, [setFloating]);
+	if (!shouldShowDropdown) return null;
+	const fullscreenContainer = document.fullscreenElement;
+	return /* @__PURE__ */ jsx(DropdownContext.Provider, {
+		value: { handleSelectAndClose },
+		children: /* @__PURE__ */ jsx(DropdownMenu.Root, {
+			open: true,
+			modal: false,
+			children: /* @__PURE__ */ jsx(DropdownMenu.Portal, {
+				container: fullscreenContainer ?? void 0,
+				children: /* @__PURE__ */ jsx(StyledContent, {
+					ref: setFloatingRef,
+					$width: width,
+					$height: height,
+					$zIndex: zIndex,
+					"data-radix-dropdown-content": true,
+					onPointerDownOutside: handlePointerDownOutside,
+					style: {
+						position: floatingStrategy,
+						top: y ?? "",
+						left: x ?? "",
+						zIndex: zIndex ?? 100
+					},
+					...contentProps,
+					children: /* @__PURE__ */ jsx(ScrollableContent, { children })
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { 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"}