@vuu-ui/vuu-popups 0.8.8-debug → 0.8.9-debug

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuu-ui/vuu-popups",
-  "version": "0.8.8-debug",
+  "version": "0.8.9-debug",
   "description": "VUU popup components - Context Menu, Dialog etc",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -8,8 +8,8 @@
     "@salt-ds/core": "1.8.0",
     "@salt-ds/icons": "1.5.1",
     "@salt-ds/lab": "1.0.0-alpha.15",
-    "@vuu-ui/vuu-data-types": "0.8.8-debug",
-    "@vuu-ui/vuu-utils": "0.8.8-debug"
+    "@vuu-ui/vuu-data-types": "0.8.9-debug",
+    "@vuu-ui/vuu-utils": "0.8.9-debug"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",

package/types/dialog/Dialog.d.ts

@@ -3,5 +3,6 @@ import "./Dialog.css";
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     isOpen?: boolean;
     onClose?: () => void;
+    hideCloseButton?: boolean;
 }
-export declare const Dialog: ({ children, className, isOpen, onClose, title, ...props }: DialogProps) => JSX.Element | null;
+export declare const Dialog: ({ children, className, isOpen, onClose, title, hideCloseButton, ...props }: DialogProps) => JSX.Element | null;

package/types/index.d.ts

@@ -3,3 +3,6 @@ export * from "./menu";
 export * from "./popup";
 export * from "./popup-menu";
 export * from "./portal";
+export * from "./portal-deprecated";
+export * from "./prompt";
+export * from "./tooltip";

package/types/menu/ContextMenu.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { MenuListProps } from "./MenuList";
 import { PopupCloseCallback } from "../popup";
+import "./ContextMenu.css";
 export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
     onClose?: PopupCloseCallback;
     position?: {

package/types/menu/MenuList.d.ts

@@ -28,6 +28,7 @@ export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
     activatedByKeyboard?: boolean;
     children: ReactElement[];
     childMenuShowing?: string;
+    defaultHighlightedIdx?: number;
     highlightedIdx?: number;
     isRoot?: boolean;
     listItemProps?: Partial<MenuItemProps>;
@@ -36,8 +37,7 @@ export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
     onOpenMenu?: (menuItemEl: HTMLElement) => void;
     onHighlightMenuItem?: (idx: number) => void;
 }
-declare const MenuList: {
-    ({ activatedByKeyboard, childMenuShowing, children, className, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
+export declare const MenuList: {
+    ({ activatedByKeyboard, childMenuShowing, children, className, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
     displayName: string;
 };
-export default MenuList;

package/types/menu/use-keyboard-navigation.d.ts

@@ -2,6 +2,7 @@ import { FocusEvent, KeyboardEvent } from "react";
 export interface KeyboardNavigationProps {
     autoHighlightFirstItem?: boolean;
     count: number;
+    defaultHighlightedIdx?: number;
     highlightedIndex?: number;
     onActivate: (idx: number) => void;
     onHighlight?: (idx: number) => void;
@@ -23,4 +24,4 @@ export interface NavigationHookResult {
     listProps: KeyboardHookListProps;
     setIgnoreFocus: (ignoreFocus: boolean) => void;
 }
-export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;
+export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, defaultHighlightedIdx, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;

package/types/menu/useContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+/// <reference types="react" />
 import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
 import { ContextMenuProps } from "./ContextMenu";
 export type ContextMenuOptions = {
@@ -8,6 +8,13 @@ export type ContextMenuOptions = {
         className?: string;
         "data-mode"?: string;
     };
+    controlledComponentId?: string;
 };
-export type ShowContextMenu = (e: MouseEvent<HTMLElement>, location: string, options: ContextMenuOptions) => void;
+export type EventLike = {
+    clientX: number;
+    clientY: number;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+};
+export type ShowContextMenu = (e: EventLike, location: string, options: ContextMenuOptions) => void;
 export declare const useContextMenu: (menuBuilder?: MenuBuilder, menuActionHandler?: MenuActionHandler) => [ShowContextMenu, () => void];

package/types/popup/Popup.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, RefObject } from "react";
+import "./Popup.css";
+export type PopupPlacement = "below" | "below-center" | "below-full-width" | "center" | "right";
+export interface PopupComponentProps extends HTMLAttributes<HTMLDivElement> {
+    placement: PopupPlacement;
+    anchorElement: RefObject<HTMLElement>;
+    offsetLeft?: number;
+    offsetTop?: number;
+}
+export declare const PopupComponent: ({ children, className, anchorElement, placement, }: PopupComponentProps) => JSX.Element | null;

package/types/popup/index.d.ts

@@ -1 +1,3 @@
 export * from "./popup-service";
+export * from "./Popup";
+export * from "./useAnchoredPosition";

package/types/popup/popup-service.d.ts

@@ -6,12 +6,16 @@ export type ClickAwayClosePopup = {
     type: "click-away";
     mouseEvt: MouseEvent;
 };
+export type EscapeClosePopup = {
+    type: "escape";
+    event: KeyboardEvent;
+};
 export type MenuActionClosePopup = {
     menuId: string;
     options: ContextMenuOptions;
     type: "menu-action";
 };
-export type PopupCloseReason = ClickAwayClosePopup | MenuActionClosePopup;
+export type PopupCloseReason = ClickAwayClosePopup | EscapeClosePopup | MenuActionClosePopup;
 export declare const reasonIsMenuAction: (reason?: PopupCloseReason) => reason is MenuActionClosePopup;
 export declare const reasonIsClickAway: (reason?: PopupCloseReason) => reason is ClickAwayClosePopup;
 export interface ShowPopupProps {

package/types/popup/useAnchoredPosition.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+import { PopupPlacement } from "./Popup";
+export interface AnchoredPositionHookProps {
+    anchorElement: RefObject<HTMLElement>;
+    offsetLeft?: number;
+    offsetTop?: number;
+    placement: PopupPlacement;
+}
+export declare const useAnchoredPosition: ({ anchorElement, offsetLeft, offsetTop, placement, }: AnchoredPositionHookProps) => {
+    left: number;
+    top: number;
+} | undefined;

package/types/popup-menu/PopupMenu.d.ts

@@ -1,14 +1,16 @@
 import { HTMLAttributes } from "react";
+import { PopupCloseReason } from "@vuu-ui/vuu-popups";
 import "./PopupMenu.css";
 import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
 export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
     icon?: string;
+    label?: string;
     menuActionHandler?: MenuActionHandler;
     menuBuilder?: MenuBuilder;
     menuLocation?: string;
     menuOptions?: {
         [key: string]: unknown;
     };
-    onMenuClose?: () => void;
+    onMenuClose?: (reason?: PopupCloseReason) => void;
 }
-export declare const PopupMenu: ({ className, icon, id: idProp, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, tabIndex, ...htmlAttributes }: PopupMenuProps) => JSX.Element;
+export declare const PopupMenu: ({ className, label, icon, id: idProp, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, tabIndex, ...htmlAttributes }: PopupMenuProps) => JSX.Element;

package/types/portal/Portal.d.ts

@@ -1,8 +1,30 @@
-import { ReactElement } from "react";
+import { ReactNode } from "react";
+import "./Portal.css";
 export interface PortalProps {
-    children: ReactElement;
-    onRender?: () => void;
-    x?: number;
-    y?: number;
+    /**
+     * The children to render into the `container`.
+     */
+    children?: ReactNode;
+    /**
+     * An HTML element, component instance, or function that returns either.
+     * The `container` will have the portal children appended to it.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
+     */
+    container?: Element | (() => Element | null) | null;
+    /**
+     * If this node does not exist on the document, it will be created for you.
+     */
+    id?: string;
+    /**
+     * Allow conditional rendering of this Portal, if false, will render nothing.
+     * Defaults to true
+     */
+    open?: boolean;
 }
-export declare const Portal: ({ children, x, y, onRender, }: PortalProps) => null;
+/**
+ * Portals provide a first-class way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ */
+export declare const Portal: ({ children, container: containerProp, id, open, }: PortalProps) => import("react").ReactPortal | null;

package/types/portal/index.d.ts

@@ -1,3 +1 @@
 export * from "./Portal";
-export * from "./render-portal";
-export * from "./portal-utils";

package/types/portal-deprecated/PortalDeprecated.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+export interface PortalDeprecatedProps {
+    children: ReactElement;
+    onRender?: () => void;
+    x?: number;
+    y?: number;
+}
+export declare const PortalDeprecated: ({ children, x, y, onRender, }: PortalDeprecatedProps) => null;

package/types/portal-deprecated/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./PortalDeprecated";
+export * from "./render-portal";
+export * from "./portal-utils";

package/types/prompt/Prompt.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+import { PopupComponentProps } from "../popup";
+import "./Prompt.css";
+export interface PromptProps extends HTMLAttributes<HTMLDialogElement> {
+    PopupProps?: Partial<PopupComponentProps>;
+    cancelButtonLabel?: string;
+    confirmButtonLabel?: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+    icon?: string;
+    text: string;
+    variant?: "warn" | "error" | "info";
+}
+export declare const Prompt: ({ PopupProps, cancelButtonLabel, confirmButtonLabel, icon, onCancel, onConfirm, style, text, title, variant, ...htmlAttributes }: PromptProps) => JSX.Element;

package/types/prompt/index.d.ts

@@ -0,0 +1 @@
+export * from "./Prompt";

package/types/tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler, ReactNode, RefObject } from "react";
+import { TooltipPlacement } from "./useAnchoredPosition";
+import "./Tooltip.css";
+export interface TooltipProps {
+    anchorElement: RefObject<HTMLElement>;
+    children: ReactNode;
+    id?: string;
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    placement: TooltipPlacement;
+}
+export declare const Tooltip: ({ anchorElement, children, id, onMouseEnter, onMouseLeave, placement, }: TooltipProps) => JSX.Element | null;

package/types/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export * from "./useTooltip";

package/types/tooltip/useAnchoredPosition.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+export type TooltipPlacement = "above" | "right" | "below" | "left";
+export interface AnchoredPositionHookProps {
+    anchorElement: RefObject<HTMLElement>;
+    offsetLeft?: number;
+    offsetTop?: number;
+    placement: TooltipPlacement;
+}
+export declare const useAnchoredPosition: ({ anchorElement, offsetLeft, offsetTop, placement, }: AnchoredPositionHookProps) => {
+    left: number;
+    top: number;
+} | undefined;

package/types/tooltip/useTooltip.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent, ReactNode } from "react";
+import { TooltipProps } from "./Tooltip";
+import { TooltipPlacement } from "./useAnchoredPosition";
+export interface TooltipHookProps {
+    id: string;
+    placement?: TooltipPlacement;
+    tooltipContent: ReactNode;
+}
+export declare const useTooltip: ({ id: idProp, placement, tooltipContent, }: TooltipHookProps) => {
+    anchorProps: {
+        "aria-describedby": string;
+        onMouseEnter: (evt: MouseEvent) => void;
+        onMouseLeave: () => void;
+    };
+    tooltipProps: TooltipProps | undefined;
+};