@trackunit/react-components 0.1.66 → 0.1.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +141 -114
- package/index.css +23 -24
- package/index.js +141 -115
- package/package.json +3 -2
- package/src/components/FormGroup/FormGroup.d.ts +2 -1
- package/src/components/Menu/MenuItem/MenuItem.d.ts +1 -1
- package/src/components/Menu/MoreMenu/MoreMenu.d.ts +2 -2
- package/src/components/Popover/Popover.d.ts +69 -34
- package/src/components/Popover/PopoverContent.d.ts +7 -0
- package/src/components/Popover/PopoverTrigger.d.ts +12 -0
- package/src/components/Popover/PopoverTypes.d.ts +33 -0
- package/src/components/Popover/index.d.ts +3 -2
- package/src/components/Popover/usePopover.d.ts +56 -0
- package/src/components/Sidebar/Sidebar.d.ts +2 -0
- package/src/components/Popover/PopoverList.d.ts +0 -12
- package/src/components/Popover/PopoverListItem.d.ts +0 -30
|
@@ -1,37 +1,72 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PopoverProps } from "./PopoverTypes";
|
|
3
|
+
/**
|
|
4
|
+
* A hook to get the popover context.
|
|
5
|
+
* It should only be used by the Popover components.
|
|
6
|
+
*
|
|
7
|
+
* @returns {ContextType} The popover context
|
|
8
|
+
*/
|
|
9
|
+
export declare const usePopoverContext: () => {
|
|
10
|
+
isModal: boolean | undefined;
|
|
11
|
+
labelId: string | undefined;
|
|
12
|
+
descriptionId: string | undefined;
|
|
13
|
+
setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
|
|
14
|
+
setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
|
|
15
|
+
customProps: {
|
|
16
|
+
className?: string | undefined;
|
|
17
|
+
dataTestId?: string | undefined;
|
|
18
|
+
};
|
|
19
|
+
placement: import("@floating-ui/react-dom").Placement;
|
|
20
|
+
strategy: import("@floating-ui/react-dom").Strategy;
|
|
21
|
+
middlewareData: import("@floating-ui/react-dom").MiddlewareData;
|
|
22
|
+
x: number | null;
|
|
23
|
+
y: number | null;
|
|
24
|
+
update: () => void;
|
|
25
|
+
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
26
|
+
floating: (node: HTMLElement | null) => void;
|
|
27
|
+
positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
28
|
+
context: {
|
|
29
|
+
placement: import("@floating-ui/react-dom").Placement;
|
|
30
|
+
strategy: import("@floating-ui/react-dom").Strategy;
|
|
31
|
+
x: number | null;
|
|
32
|
+
y: number | null;
|
|
33
|
+
middlewareData: import("@floating-ui/react-dom").MiddlewareData;
|
|
34
|
+
update: () => void;
|
|
35
|
+
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
36
|
+
floating: (node: HTMLElement | null) => void;
|
|
37
|
+
isPositioned: boolean;
|
|
38
|
+
open: boolean;
|
|
39
|
+
onOpenChange: (open: boolean) => void;
|
|
40
|
+
events: import("@floating-ui/react").FloatingEvents;
|
|
41
|
+
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
42
|
+
nodeId: string | undefined;
|
|
43
|
+
floatingId: string;
|
|
44
|
+
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
45
|
+
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
46
|
+
};
|
|
47
|
+
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
48
|
+
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
49
|
+
isPositioned: boolean;
|
|
50
|
+
getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
|
|
51
|
+
getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
52
|
+
getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
53
|
+
isOpen: boolean;
|
|
54
|
+
setIsOpen: (open: boolean) => void;
|
|
11
55
|
};
|
|
12
|
-
export interface PopoverProps extends CommonProps {
|
|
13
|
-
/**
|
|
14
|
-
* What to render indide the popover with callback to close the popover
|
|
15
|
-
*/
|
|
16
|
-
render: Render;
|
|
17
|
-
/**
|
|
18
|
-
* Where to preferentially render the popover relative to the invoking element.
|
|
19
|
-
* Will not be respected in case of insufficient space.
|
|
20
|
-
*/
|
|
21
|
-
placement?: PopoverPlacement;
|
|
22
|
-
/**
|
|
23
|
-
* Action(s) that activates the tooltip
|
|
24
|
-
*/
|
|
25
|
-
activation?: PopoverActivation;
|
|
26
|
-
/**
|
|
27
|
-
* The element, usually a button, that activates the popover.
|
|
28
|
-
* Event handling is automatic and tied to this element. No manual Event handling is necessary.
|
|
29
|
-
*/
|
|
30
|
-
children: ReactElement;
|
|
31
|
-
}
|
|
32
56
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
57
|
+
* The popover component.
|
|
58
|
+
* - This component should wrap all the popover components.
|
|
59
|
+
* - It returns a context that is used by the popover components.
|
|
60
|
+
* - The context is used to share the state of the popover, such as the open state and the reference element.
|
|
61
|
+
*
|
|
62
|
+
* To open the popover, use the `<PopoverTrigger />` component.
|
|
63
|
+
*
|
|
64
|
+
* To render the content of the popover, use the `<PopoverContent />` component.
|
|
65
|
+
*
|
|
66
|
+
*
|
|
67
|
+
* @param {PopoverProps} props The props for the popover
|
|
68
|
+
* @returns {JSX.Element} A Popover Context Provider contining the children
|
|
35
69
|
*/
|
|
36
|
-
export declare const Popover: ({ children,
|
|
37
|
-
|
|
70
|
+
export declare const Popover: ({ children, isModal, ...restOptions }: {
|
|
71
|
+
children: React.ReactNode;
|
|
72
|
+
} & PopoverProps) => JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CommonProps } from "../../common";
|
|
3
|
+
export type PopoverContentChildren = ((close: () => void) => React.ReactNode) | React.ReactNode;
|
|
4
|
+
export interface PopoverContentProps extends Omit<React.HTMLProps<HTMLDivElement>, "children">, CommonProps {
|
|
5
|
+
children: PopoverContentChildren;
|
|
6
|
+
}
|
|
7
|
+
export declare const PopoverContent: React.ForwardRefExoticComponent<Pick<PopoverContentProps, "children" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "dataTestId"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface PopoverTriggerProps {
|
|
3
|
+
/** Any elements that when clicked should open the popover */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* When enabled the trigger will be rendered as a button
|
|
7
|
+
* note that not all elements are valid children of a button
|
|
8
|
+
*/
|
|
9
|
+
renderButton?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLProps<HTMLElement> & PopoverTriggerProps, "children" | "renderButton" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLElement>>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Placement } from "@floating-ui/react";
|
|
2
|
+
import { CommonProps } from "../../common";
|
|
3
|
+
export type PopoverActivation = {
|
|
4
|
+
click?: boolean;
|
|
5
|
+
hover?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export type PopoverPlacement = Placement;
|
|
8
|
+
export interface PopoverProps extends CommonProps {
|
|
9
|
+
/**
|
|
10
|
+
* Whether the popover should be open on initial render
|
|
11
|
+
*/
|
|
12
|
+
initialOpen?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Where to preferentially render the popover relative to the invoking element.
|
|
15
|
+
*/
|
|
16
|
+
placement?: PopoverPlacement;
|
|
17
|
+
/**
|
|
18
|
+
* Determines if focus is “modal”, meaning focus is fully trapped inside the floating element and outside content cannot be accessed. This includes screen reader virtual cursors.
|
|
19
|
+
*/
|
|
20
|
+
isModal?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Whether the popover IS CURRENTLY open
|
|
23
|
+
*/
|
|
24
|
+
isOpen?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Action(s) that activates the popover
|
|
27
|
+
*/
|
|
28
|
+
activation?: PopoverActivation;
|
|
29
|
+
/**
|
|
30
|
+
* Callback to be called when the popover open state changes
|
|
31
|
+
*/
|
|
32
|
+
onOpenStateChange?: (open: boolean) => void;
|
|
33
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PopoverProps } from "./PopoverTypes";
|
|
3
|
+
/**
|
|
4
|
+
* The hook that powers the Popover component.
|
|
5
|
+
* It should not be used directly, but rather through the Popover component.
|
|
6
|
+
*
|
|
7
|
+
* @param {PopoverProps} options The options for the popover
|
|
8
|
+
* @returns {ReturnType<usePopover>} The data for the popover
|
|
9
|
+
*/
|
|
10
|
+
export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, onOpenStateChange: setControlledIsOpen, ...restOptions }: PopoverProps) => {
|
|
11
|
+
isModal: boolean | undefined;
|
|
12
|
+
labelId: string | undefined;
|
|
13
|
+
descriptionId: string | undefined;
|
|
14
|
+
setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
|
|
15
|
+
setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
|
|
16
|
+
customProps: {
|
|
17
|
+
className?: string | undefined;
|
|
18
|
+
dataTestId?: string | undefined;
|
|
19
|
+
};
|
|
20
|
+
placement: import("@floating-ui/react").Placement;
|
|
21
|
+
strategy: import("@floating-ui/react").Strategy;
|
|
22
|
+
middlewareData: import("@floating-ui/react").MiddlewareData;
|
|
23
|
+
x: number | null;
|
|
24
|
+
y: number | null;
|
|
25
|
+
update: () => void;
|
|
26
|
+
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
27
|
+
floating: (node: HTMLElement | null) => void;
|
|
28
|
+
positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
29
|
+
context: {
|
|
30
|
+
placement: import("@floating-ui/react").Placement;
|
|
31
|
+
strategy: import("@floating-ui/react").Strategy;
|
|
32
|
+
x: number | null;
|
|
33
|
+
y: number | null;
|
|
34
|
+
middlewareData: import("@floating-ui/react").MiddlewareData;
|
|
35
|
+
update: () => void;
|
|
36
|
+
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
37
|
+
floating: (node: HTMLElement | null) => void;
|
|
38
|
+
isPositioned: boolean;
|
|
39
|
+
open: boolean;
|
|
40
|
+
onOpenChange: (open: boolean) => void;
|
|
41
|
+
events: import("@floating-ui/react").FloatingEvents;
|
|
42
|
+
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
43
|
+
nodeId: string | undefined;
|
|
44
|
+
floatingId: string;
|
|
45
|
+
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
46
|
+
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
47
|
+
};
|
|
48
|
+
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
49
|
+
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
50
|
+
isPositioned: boolean;
|
|
51
|
+
getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
|
|
52
|
+
getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
53
|
+
getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
54
|
+
isOpen: boolean;
|
|
55
|
+
setIsOpen: (open: boolean) => void;
|
|
56
|
+
};
|
|
@@ -7,6 +7,8 @@ export interface SidebarItemProps extends CommonProps {
|
|
|
7
7
|
* This is needed as it is used for the intersection observer to determine which items are visible and which are not.
|
|
8
8
|
*/
|
|
9
9
|
id: string;
|
|
10
|
+
/** Optional onClick */
|
|
11
|
+
onClick?: () => void;
|
|
10
12
|
}
|
|
11
13
|
export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
|
|
12
14
|
export interface SidebarProps extends CommonProps {
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
-
export interface PopoverListProps extends CommonProps {
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* The PopoverList component.
|
|
8
|
-
*
|
|
9
|
-
* @param {PopoverListProps} props - The props for the PopoverList component
|
|
10
|
-
* @returns {JSX.Element} PopoverList component
|
|
11
|
-
*/
|
|
12
|
-
export declare const PopoverList: ({ className, children, dataTestId }: PopoverListProps) => JSX.Element;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
-
export interface PopoverListItemProps extends CommonProps {
|
|
4
|
-
selected?: boolean;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
ariaLabel?: string;
|
|
7
|
-
/** Optional event handler for logging etc. Important: Please use the Url prop for navigation. */
|
|
8
|
-
onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
|
|
9
|
-
/** Navigation Url for this item */
|
|
10
|
-
url?: string;
|
|
11
|
-
/**
|
|
12
|
-
* The prefix to be displayed for the list item.
|
|
13
|
-
*/
|
|
14
|
-
prefix?: React.ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* The suffix to be displayed for the list item.
|
|
17
|
-
*/
|
|
18
|
-
suffix?: React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* The child nodes.
|
|
21
|
-
*/
|
|
22
|
-
children: React.ReactNode;
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* The PopoverListItem component.
|
|
26
|
-
*
|
|
27
|
-
* @param {PopoverListItemProps} props - The props for the PopoverListItem component
|
|
28
|
-
* @returns {JSX.Element} PopoverListItem component
|
|
29
|
-
*/
|
|
30
|
-
export declare const PopoverListItem: ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }: PopoverListItemProps) => JSX.Element;
|