@monolith-forensics/monolith-ui 1.3.112-dev.2 → 1.3.113

package/dist/Popover/Popover.context.d.ts

@@ -0,0 +1,23 @@
+import { useFloating, useInteractions } from "@floating-ui/react";
+import { PopoverTransitionProps } from "./Popover.types";
+export interface PopoverContextValue {
+    opened: boolean;
+    refs: ReturnType<typeof useFloating>["refs"];
+    context: ReturnType<typeof useFloating>["context"];
+    floatingStyles: ReturnType<typeof useFloating>["floatingStyles"];
+    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    withArrow: boolean;
+    arrowSize: number;
+    arrowRadius: number;
+    arrowRef: React.MutableRefObject<HTMLDivElement | null>;
+    withinPortal: boolean;
+    trapFocus: boolean;
+    returnFocus: boolean;
+    keepMounted: boolean;
+    zIndex: number;
+    dropdownId: string;
+    transitionProps: PopoverTransitionProps;
+}
+export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
+export declare const usePopoverContext: () => PopoverContextValue;

package/dist/Popover/Popover.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const PopoverContext = createContext(null);
+export const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
+    if (!context) {
+        throw new Error("Popover components must be used within Popover");
+    }
+    return context;
+};

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,7 @@
+import { PopoverDropdownProps, PopoverProps, PopoverTargetProps } from "./Popover.types";
+type PopoverCompound = React.FC<PopoverProps> & {
+    Target: React.FC<PopoverTargetProps>;
+    Dropdown: React.FC<PopoverDropdownProps>;
+};
+export declare const Popover: PopoverCompound;
+export {};

package/dist/Popover/Popover.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUncontrolled } from "@mantine/hooks";
+import { arrow, autoUpdate, flip, FloatingDelayGroup, offset, shift, size, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import { useId, useMemo, useRef } from "react";
+import { PopoverContext } from "./Popover.context";
+import { PopoverTarget } from "./PopoverTarget";
+import { PopoverDropdown } from "./PopoverDropdown";
+const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigger = "click", disabled = false, position = "bottom", offset: offsetValue = 8, openDelay = 75, closeDelay = 100, closeOnClickOutside = true, closeOnEscape = true, withinPortal = true, trapFocus = false, returnFocus = true, keepMounted = false, withArrow = false, arrowSize = 8, arrowRadius = 2, zIndex = 1500, role = "dialog", width, matchTargetWidth = false, shiftPadding = 8, flipPadding = 8, withDelayGroup = false, delayGroupTimeoutMs = 250, transitionProps = {}, }) => {
+    const [_opened, setOpened] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange,
+    });
+    const arrowRef = useRef(null);
+    const dropdownId = useId();
+    const resolvedArrowSize = Math.max(arrowSize, 6);
+    const { refs, floatingStyles, context } = useFloating({
+        open: _opened,
+        onOpenChange: (nextOpen) => {
+            if (!disabled) {
+                setOpened(nextOpen);
+            }
+        },
+        placement: position,
+        middleware: [
+            offset(offsetValue + (withArrow ? resolvedArrowSize / 2 : 0)),
+            flip({ padding: flipPadding }),
+            shift({ padding: shiftPadding }),
+            size({
+                apply({ rects, elements }) {
+                    if (matchTargetWidth) {
+                        elements.floating.style.width = `${rects.reference.width}px`;
+                    }
+                    if (width !== undefined) {
+                        elements.floating.style.width =
+                            typeof width === "number" ? `${width}px` : width;
+                    }
+                },
+            }),
+            ...(withArrow
+                ? [
+                    arrow({
+                        element: arrowRef,
+                        padding: 8,
+                    }),
+                ]
+                : []),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    const click = useClick(context, {
+        enabled: !disabled && trigger === "click",
+        event: "click",
+        toggle: true,
+    });
+    const hover = useHover(context, {
+        enabled: !disabled && trigger === "hover",
+        delay: { open: openDelay, close: closeDelay },
+        move: false,
+    });
+    const focus = useFocus(context, {
+        enabled: !disabled && trigger === "hover",
+        visibleOnly: true,
+    });
+    const dismiss = useDismiss(context, {
+        enabled: !disabled,
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape,
+    });
+    const roleInteraction = useRole(context, { role });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        hover,
+        focus,
+        dismiss,
+        roleInteraction,
+    ]);
+    const contextValue = useMemo(() => ({
+        opened: _opened,
+        refs,
+        context,
+        floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        withArrow,
+        arrowSize,
+        arrowRadius,
+        arrowRef,
+        withinPortal,
+        trapFocus,
+        returnFocus,
+        keepMounted,
+        zIndex,
+        dropdownId,
+        transitionProps,
+    }), [
+        _opened,
+        refs,
+        context,
+        floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        withArrow,
+        arrowSize,
+        arrowRadius,
+        withinPortal,
+        trapFocus,
+        returnFocus,
+        keepMounted,
+        zIndex,
+        dropdownId,
+        transitionProps,
+    ]);
+    const body = _jsx(PopoverContext.Provider, { value: contextValue, children: children });
+    if (!withDelayGroup) {
+        return body;
+    }
+    return (_jsx(FloatingDelayGroup, { delay: { open: openDelay, close: closeDelay }, timeoutMs: delayGroupTimeoutMs, children: body }));
+};
+export const Popover = Object.assign(PopoverRoot, {
+    Target: PopoverTarget,
+    Dropdown: PopoverDropdown,
+});

package/dist/Popover/Popover.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ARROW_STYLES: Record<"top" | "right" | "bottom" | "left", {
+    clipPath: string;
+    borderTransparent: string[];
+    radiusCorner: string;
+    staticProp: string;
+}>;

package/dist/Popover/Popover.styles.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+export const StyledDropdown = styled.div `
+  position: relative;
+  min-width: 180px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  background-color: ${({ theme }) => theme.palette.background.default};
+  color: ${({ theme }) => theme.palette.text.primary};
+  box-shadow:
+    rgba(15, 23, 42, 0.1) 0px 10px 15px -3px,
+    rgba(15, 23, 42, 0.05) 0px 4px 6px -2px;
+  padding: 10px 12px;
+  outline: none;
+`;
+export const ARROW_STYLES = {
+    bottom: {
+        clipPath: "polygon(0 100%, 0 0, 100% 0)",
+        borderTransparent: ["borderBottomColor", "borderRightColor"],
+        radiusCorner: "borderTopLeftRadius",
+        staticProp: "top",
+    },
+    top: {
+        clipPath: "polygon(0 100%, 100% 100%, 100% 0)",
+        borderTransparent: ["borderTopColor", "borderLeftColor"],
+        radiusCorner: "borderBottomRightRadius",
+        staticProp: "bottom",
+    },
+    left: {
+        clipPath: "polygon(100% 0, 0 0, 100% 100%)",
+        borderTransparent: ["borderLeftColor", "borderBottomColor"],
+        radiusCorner: "borderTopRightRadius",
+        staticProp: "right",
+    },
+    right: {
+        clipPath: "polygon(0 100%, 0 0, 100% 100%)",
+        borderTransparent: ["borderRightColor", "borderTopColor"],
+        radiusCorner: "borderBottomLeftRadius",
+        staticProp: "left",
+    },
+};

package/dist/Popover/Popover.transitions.d.ts

@@ -0,0 +1,5 @@
+import { PopoverTransitionProps } from "./Popover.types";
+export declare function usePopoverTransition(opened: boolean, { transition, duration, timingFunction }: PopoverTransitionProps): {
+    mounted: boolean;
+    styles: React.CSSProperties;
+};

package/dist/Popover/Popover.transitions.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from "react";
+const TRANSITION_PRESETS = {
+    fade: {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+    },
+    scale: {
+        from: { opacity: 0, scale: "0.85" },
+        to: { opacity: 1, scale: "1" },
+    },
+    "scale-y": {
+        from: { opacity: 0, scale: "1 0.7" },
+        to: { opacity: 1, scale: "1 1" },
+    },
+    pop: {
+        from: { opacity: 0, scale: "0.6" },
+        to: { opacity: 1, scale: "1" },
+    },
+};
+export function usePopoverTransition(opened, { transition = "fade", duration = 150, timingFunction = "ease" }) {
+    const [mounted, setMounted] = useState(opened);
+    const [transitionEnabled, setTransitionEnabled] = useState(false);
+    const [phase, setPhase] = useState(opened ? "enter" : "exit");
+    const frameRef = useRef(0);
+    useEffect(() => {
+        cancelAnimationFrame(frameRef.current);
+        if (opened) {
+            setMounted(true);
+            setTransitionEnabled(false);
+            setPhase("exit");
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = requestAnimationFrame(() => {
+                    setTransitionEnabled(true);
+                    setPhase("enter");
+                });
+            });
+        }
+        else {
+            setTransitionEnabled(true);
+            setPhase("exit");
+            const timer = setTimeout(() => {
+                setMounted(false);
+                setTransitionEnabled(false);
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [opened, duration]);
+    useEffect(() => {
+        return () => cancelAnimationFrame(frameRef.current);
+    }, []);
+    const preset = TRANSITION_PRESETS[transition];
+    const transitionStyles = phase === "enter" ? preset.to : preset.from;
+    const properties = [
+        ...new Set([...Object.keys(preset.from), ...Object.keys(preset.to)]),
+    ];
+    const transitionValue = properties
+        .map((prop) => `${prop} ${duration}ms ${timingFunction}`)
+        .join(", ");
+    return {
+        mounted: mounted || opened,
+        styles: Object.assign(Object.assign({}, transitionStyles), (transitionEnabled ? { transition: transitionValue } : {})),
+    };
+}

package/dist/Popover/Popover.types.d.ts

@@ -0,0 +1,45 @@
+import { Placement } from "@floating-ui/react";
+import { ReactElement, ReactNode } from "react";
+export type PopoverTransition = "fade" | "scale" | "scale-y" | "pop";
+export type PopoverTrigger = "click" | "hover";
+export interface PopoverTransitionProps {
+    transition?: PopoverTransition;
+    duration?: number;
+    timingFunction?: string;
+}
+export interface PopoverProps {
+    children: ReactNode;
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onChange?: (opened: boolean) => void;
+    trigger?: PopoverTrigger;
+    disabled?: boolean;
+    position?: Placement;
+    offset?: number;
+    openDelay?: number;
+    closeDelay?: number;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    withinPortal?: boolean;
+    trapFocus?: boolean;
+    returnFocus?: boolean;
+    keepMounted?: boolean;
+    withArrow?: boolean;
+    arrowSize?: number;
+    arrowRadius?: number;
+    zIndex?: number;
+    role?: "dialog" | "menu" | "tooltip";
+    width?: number | string;
+    matchTargetWidth?: boolean;
+    shiftPadding?: number;
+    flipPadding?: number;
+    withDelayGroup?: boolean;
+    delayGroupTimeoutMs?: number;
+    transitionProps?: PopoverTransitionProps;
+}
+export interface PopoverTargetProps {
+    children: ReactElement;
+}
+export interface PopoverDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

package/dist/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Popover/PopoverDropdown.d.ts

@@ -0,0 +1,2 @@
+import { PopoverDropdownProps } from "./Popover.types";
+export declare const PopoverDropdown: React.FC<PopoverDropdownProps>;

package/dist/Popover/PopoverDropdown.js

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
+import { usePopoverContext } from "./Popover.context";
+import { ARROW_STYLES, StyledDropdown } from "./Popover.styles";
+import { usePopoverTransition } from "./Popover.transitions";
+export const PopoverDropdown = (_a) => {
+    var _b, _c;
+    var { children, className, style } = _a, props = __rest(_a, ["children", "className", "style"]);
+    const { opened, refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
+    const { mounted, styles: transitionStyles } = usePopoverTransition(opened, ctxTransitionProps);
+    const arrowX = (_b = context.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
+    const arrowY = (_c = context.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
+    const [placementSide, placementAlignment] = context.placement.split("-");
+    const arrowConfig = ARROW_STYLES[placementSide];
+    const originSide = {
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left",
+    }[placementSide];
+    const originAlignment = placementAlignment === "start"
+        ? placementSide === "top" || placementSide === "bottom"
+            ? "left"
+            : "top"
+        : placementAlignment === "end"
+            ? placementSide === "top" || placementSide === "bottom"
+                ? "right"
+                : "bottom"
+            : "center";
+    const transformOrigin = `${originSide} ${originAlignment}`;
+    if (!mounted && !keepMounted) {
+        return null;
+    }
+    const dropdown = (_jsx(FloatingFocusManager, { context: context, modal: trapFocus, returnFocus: returnFocus, children: _jsxs(StyledDropdown, Object.assign({}, getFloatingProps(props), { id: dropdownId, ref: refs.setFloating, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), { transformOrigin }), style), { zIndex }), (keepMounted && !mounted
+                ? { visibility: "hidden", pointerEvents: "none" }
+                : {})), children: [children, withArrow && (_jsx("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({ position: "absolute", width: Math.max(arrowSize, 6), height: Math.max(arrowSize, 6), transform: "rotate(45deg)", background: "inherit", border: "1px solid", borderColor: "inherit", pointerEvents: "none", zIndex: 1 }, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), { [arrowConfig.staticProp]: -Math.max(arrowSize, 6) / 2, [arrowConfig.radiusCorner]: arrowRadius, [arrowConfig.borderTransparent[0]]: "transparent", [arrowConfig.borderTransparent[1]]: "transparent", clipPath: arrowConfig.clipPath }) }))] })) }));
+    if (!withinPortal) {
+        return dropdown;
+    }
+    return _jsx(FloatingPortal, { children: dropdown });
+};

package/dist/Popover/PopoverTarget.d.ts

@@ -0,0 +1,2 @@
+import { PopoverTargetProps } from "./Popover.types";
+export declare const PopoverTarget: React.FC<PopoverTargetProps>;

package/dist/Popover/PopoverTarget.js

@@ -0,0 +1,11 @@
+import { useMergeRefs } from "@floating-ui/react";
+import { cloneElement, isValidElement } from "react";
+import { usePopoverContext } from "./Popover.context";
+export const PopoverTarget = ({ children }) => {
+    const { refs, getReferenceProps, opened, dropdownId } = usePopoverContext();
+    if (!isValidElement(children)) {
+        return null;
+    }
+    const mergedRef = useMergeRefs([refs.setReference, children.ref]);
+    return cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef, "aria-expanded": opened, "aria-controls": dropdownId, "aria-haspopup": "dialog" }, children.props)));
+};

package/dist/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from "./Popover";
+export type { PopoverProps, PopoverTargetProps, PopoverDropdownProps, PopoverTransition, PopoverTrigger, PopoverTransitionProps, } from "./Popover.types";

package/dist/Popover/index.js

@@ -0,0 +1 @@
+export { Popover } from "./Popover";

package/dist/index.d.ts

@@ -42,3 +42,4 @@ export type { ColumnProps, TableProps } from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
 export * from "./SegmentedControl";
+export * from "./Popover";

package/dist/index.js

@@ -34,3 +34,4 @@ export * from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
 export * from "./SegmentedControl";
+export * from "./Popover";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.112-dev.2",
+  "version": "1.3.113",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",