@trackunit/react-components 0.1.117 → 0.1.119
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 +38905 -2435
- package/index.js +38914 -2444
- package/package.json +7 -7
- package/src/common/CommonProps.d.ts +12 -12
- package/src/common/StorybookProps.d.ts +6 -6
- package/src/common/index.d.ts +3 -3
- package/src/common/useContainerProps.d.ts +16 -16
- package/src/components/Alert/Alert.d.ts +53 -53
- package/src/components/Alert/Alert.variants.d.ts +18 -18
- package/src/components/Alert/index.d.ts +1 -1
- package/src/components/Badge/Badge.d.ts +38 -38
- package/src/components/Badge/Badge.variants.d.ts +3 -3
- package/src/components/Badge/index.d.ts +1 -1
- package/src/components/Card/Card.d.ts +39 -39
- package/src/components/Card/Card.variants.d.ts +13 -13
- package/src/components/Card/CardBody.d.ts +25 -25
- package/src/components/Card/CardFooter.d.ts +25 -25
- package/src/components/Card/CardHeader.d.ts +47 -47
- package/src/components/Card/DensityContainer.d.ts +30 -30
- package/src/components/Card/index.d.ts +5 -5
- package/src/components/Clickable/Clickable.variants.d.ts +3 -3
- package/src/components/Collapse/Collapse.d.ts +28 -28
- package/src/components/Collapse/Collapse.variants.d.ts +8 -8
- package/src/components/Collapse/index.d.ts +1 -1
- package/src/components/CopyableText/CopyableText.d.ts +21 -21
- package/src/components/CopyableText/CopyableText.variants.d.ts +3 -3
- package/src/components/CopyableText/index.d.ts +1 -1
- package/src/components/DayPicker/DayPicker.d.ts +32 -32
- package/src/components/DayPicker/DayPickerPopover.d.ts +22 -22
- package/src/components/DayPicker/DayRangePicker.d.ts +33 -33
- package/src/components/DayPicker/index.d.ts +21 -21
- package/src/components/DayPicker/useLocale.d.ts +8 -8
- package/src/components/Drawer/Drawer.d.ts +32 -32
- package/src/components/Drawer/Drawer.variants.d.ts +4 -4
- package/src/components/ExternalLink/ExternalLink.d.ts +31 -31
- package/src/components/Heading/Heading.d.ts +28 -28
- package/src/components/Heading/Heading.variants.d.ts +5 -5
- package/src/components/Heading/index.d.ts +1 -1
- package/src/components/Icon/Icon.d.ts +52 -52
- package/src/components/Icon/Icon.variants.d.ts +8 -8
- package/src/components/Indicator/Indicator.d.ts +42 -42
- package/src/components/Indicator/Indicator.variants.d.ts +10 -10
- package/src/components/Indicator/index.d.ts +1 -1
- package/src/components/Menu/MenuItem/MenuItem.d.ts +65 -65
- package/src/components/Menu/MenuList/MenuList.d.ts +36 -36
- package/src/components/Menu/MoreMenu/MoreMenu.d.ts +24 -24
- package/src/components/Menu/index.d.ts +3 -3
- package/src/components/Modal/Modal.d.ts +30 -30
- package/src/components/Modal/ModalBackdrop.d.ts +13 -13
- package/src/components/Modal/index.d.ts +3 -3
- package/src/components/Modal/useModal.d.ts +21 -21
- package/src/components/PageHeader/PageHeader.d.ts +47 -47
- package/src/components/PageHeader/PageHeader.variants.d.ts +5 -5
- package/src/components/PageHeader/index.d.ts +1 -1
- package/src/components/Pagination/Pagination.d.ts +62 -62
- package/src/components/Pagination/Pagination.variants.d.ts +2 -2
- package/src/components/Popover/Popover.d.ts +72 -72
- package/src/components/Popover/Popover.variants.d.ts +5 -5
- package/src/components/Popover/PopoverContent.d.ts +7 -7
- package/src/components/Popover/PopoverTitle.d.ts +20 -20
- package/src/components/Popover/PopoverTrigger.d.ts +12 -12
- package/src/components/Popover/PopoverTypes.d.ts +33 -33
- package/src/components/Popover/index.d.ts +5 -5
- package/src/components/Popover/usePopover.d.ts +56 -56
- package/src/components/Prompt/Prompt.d.ts +20 -20
- package/src/components/Prompt/index.d.ts +1 -1
- package/src/components/SectionHeader/SectionHeader.d.ts +23 -23
- package/src/components/SectionHeader/index.d.ts +1 -1
- package/src/components/Sidebar/Sidebar.d.ts +57 -57
- package/src/components/Sidebar/Sidebar.variants.d.ts +4 -4
- package/src/components/Sidebar/useOverflowItems.d.ts +39 -39
- package/src/components/SkeletonLines/SkeletonLines.d.ts +25 -25
- package/src/components/SkeletonLines/SkeletonLines.variants.d.ts +1 -1
- package/src/components/SkeletonLines/index.d.ts +1 -1
- package/src/components/Spacer/Spacer.d.ts +20 -20
- package/src/components/Spacer/Spacer.variants.d.ts +4 -4
- package/src/components/Spacer/index.d.ts +1 -1
- package/src/components/Spinner/Spinner.d.ts +39 -39
- package/src/components/Spinner/Spinner.variants.d.ts +7 -7
- package/src/components/Spinner/index.d.ts +1 -1
- package/src/components/Tag/Tag.d.ts +40 -40
- package/src/components/Tag/Tag.variants.d.ts +7 -7
- package/src/components/Tag/index.d.ts +1 -1
- package/src/components/Text/Text.d.ts +58 -58
- package/src/components/Text/index.d.ts +1 -1
- package/src/components/Timeline/Timeline.d.ts +33 -33
- package/src/components/Timeline/Timeline.variants.d.ts +3 -3
- package/src/components/Tip/Tip.d.ts +26 -26
- package/src/components/Tip/Tip.variants.d.ts +4 -4
- package/src/components/Tip/index.d.ts +1 -1
- package/src/components/Tooltip/Tooltip.d.ts +37 -37
- package/src/components/Tooltip/Tooltip.variants.d.ts +6 -6
- package/src/components/Tooltip/index.d.ts +1 -1
- package/src/components/ValueBar/ValueBar.d.ts +44 -44
- package/src/components/ValueBar/ValueBar.variants.d.ts +9 -9
- package/src/components/ValueBar/ValueBarHelper.d.ts +35 -35
- package/src/components/ValueBar/ValueBarTypes.d.ts +9 -9
- package/src/components/ValueBar/index.d.ts +3 -3
- package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts +14 -14
- package/src/components/buttons/BackToTopButton/BackToTopButton.variants.d.ts +3 -3
- package/src/components/buttons/Button/Button.d.ts +44 -44
- package/src/components/buttons/IconButton/IconButton.d.ts +20 -20
- package/src/components/buttons/StarButton/StarButton.d.ts +13 -13
- package/src/components/buttons/index.d.ts +4 -4
- package/src/components/buttons/shared/Button.variants.d.ts +13 -13
- package/src/components/buttons/shared/ButtonProps.d.ts +48 -48
- package/src/components/index.d.ts +30 -30
- package/src/hooks/index.d.ts +9 -9
- package/src/hooks/useClickOutside.d.ts +12 -12
- package/src/hooks/useDebounce.d.ts +13 -13
- package/src/hooks/useDevicePixelRatio.d.ts +37 -37
- package/src/hooks/useHover.d.ts +24 -24
- package/src/hooks/useIsFirstRender.d.ts +6 -6
- package/src/hooks/useLocalStorage.d.ts +9 -9
- package/src/hooks/useLocalStorageReducer.d.ts +7 -7
- package/src/hooks/useResize.d.ts +10 -10
- package/src/hooks/useTimeout.d.ts +11 -11
- package/src/index.d.ts +7 -7
- package/src/layout/helper/MinTopFullContentLayout.d.ts +18 -18
- package/src/layout/index.d.ts +6 -6
- package/src/layout/responsive/FilterListMapLayout.d.ts +15 -22
- package/src/layout/responsive/FullWidthRepeatingLayout.d.ts +19 -19
- package/src/layout/responsive/GridArea.d.ts +13 -13
- package/src/layout/responsive/IntrinsicallyResponsiveGrid.d.ts +32 -32
- package/src/layout/responsive/TitleNavContentLayout.d.ts +28 -28
- package/src/test-utils/hooks.d.ts +4 -4
- package/src/test-utils/test-utils.d.ts +5 -5
|
@@ -1,12 +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 {};
|
|
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 {};
|
|
@@ -1,33 +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
|
-
}
|
|
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
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from "./Popover";
|
|
2
|
-
export * from "./PopoverContent";
|
|
3
|
-
export * from "./PopoverTitle";
|
|
4
|
-
export * from "./PopoverTrigger";
|
|
5
|
-
export * from "./PopoverTypes";
|
|
1
|
+
export * from "./Popover";
|
|
2
|
+
export * from "./PopoverContent";
|
|
3
|
+
export * from "./PopoverTitle";
|
|
4
|
+
export * from "./PopoverTrigger";
|
|
5
|
+
export * from "./PopoverTypes";
|
|
@@ -1,56 +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
|
-
};
|
|
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
|
+
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
interface PromptProps {
|
|
2
|
-
when: boolean;
|
|
3
|
-
message: string;
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* The usePrompt hook.
|
|
7
|
-
*
|
|
8
|
-
* @param {string} message -
|
|
9
|
-
* @param {boolean} when -
|
|
10
|
-
* @returns {void} void
|
|
11
|
-
*/
|
|
12
|
-
export declare const usePrompt: (message: string, when?: boolean) => void;
|
|
13
|
-
/**
|
|
14
|
-
* The Prompt function.
|
|
15
|
-
*
|
|
16
|
-
* @param {PromptProps} Props -
|
|
17
|
-
* @returns {void} void
|
|
18
|
-
*/
|
|
19
|
-
export declare const Prompt: ({ when, message }: PromptProps) => null;
|
|
20
|
-
export {};
|
|
1
|
+
interface PromptProps {
|
|
2
|
+
when: boolean;
|
|
3
|
+
message: string;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* The usePrompt hook.
|
|
7
|
+
*
|
|
8
|
+
* @param {string} message -
|
|
9
|
+
* @param {boolean} when -
|
|
10
|
+
* @returns {void} void
|
|
11
|
+
*/
|
|
12
|
+
export declare const usePrompt: (message: string, when?: boolean) => void;
|
|
13
|
+
/**
|
|
14
|
+
* The Prompt function.
|
|
15
|
+
*
|
|
16
|
+
* @param {PromptProps} Props -
|
|
17
|
+
* @returns {void} void
|
|
18
|
+
*/
|
|
19
|
+
export declare const Prompt: ({ when, message }: PromptProps) => null;
|
|
20
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "./Prompt";
|
|
1
|
+
export * from "./Prompt";
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
-
export interface SectionHeaderProps extends CommonProps {
|
|
4
|
-
/**
|
|
5
|
-
* The title of the section.
|
|
6
|
-
*/
|
|
7
|
-
title: string;
|
|
8
|
-
/**
|
|
9
|
-
* Subtitle of the section.
|
|
10
|
-
*/
|
|
11
|
-
subtitle?: string;
|
|
12
|
-
/**
|
|
13
|
-
* The addon could be used to tell the state of a section header.
|
|
14
|
-
*/
|
|
15
|
-
addons?: ReactNode;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* The SectionHeader component is used on sections to set the section title.
|
|
19
|
-
*
|
|
20
|
-
* @param {SectionHeaderProps} props - The props for the section header component
|
|
21
|
-
* @returns {JSX.Element} SectionHeader component
|
|
22
|
-
*/
|
|
23
|
-
export declare const SectionHeader: ({ title, subtitle, dataTestId, addons }: SectionHeaderProps) => JSX.Element;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
export interface SectionHeaderProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* The title of the section.
|
|
6
|
+
*/
|
|
7
|
+
title: string;
|
|
8
|
+
/**
|
|
9
|
+
* Subtitle of the section.
|
|
10
|
+
*/
|
|
11
|
+
subtitle?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The addon could be used to tell the state of a section header.
|
|
14
|
+
*/
|
|
15
|
+
addons?: ReactNode;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* The SectionHeader component is used on sections to set the section title.
|
|
19
|
+
*
|
|
20
|
+
* @param {SectionHeaderProps} props - The props for the section header component
|
|
21
|
+
* @returns {JSX.Element} SectionHeader component
|
|
22
|
+
*/
|
|
23
|
+
export declare const SectionHeader: ({ title, subtitle, dataTestId, addons }: SectionHeaderProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "./SectionHeader";
|
|
1
|
+
export * from "./SectionHeader";
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
-
import { MenuList, MoreMenu } from "../Menu";
|
|
4
|
-
export interface SidebarItemProps extends CommonProps {
|
|
5
|
-
/**
|
|
6
|
-
* The id prop is used to identify the sidebar item in the dom.
|
|
7
|
-
* This is needed as it is used for the intersection observer to determine which items are visible and which are not.
|
|
8
|
-
*/
|
|
9
|
-
id: string;
|
|
10
|
-
/** Optional onClick */
|
|
11
|
-
onClick?: () => void;
|
|
12
|
-
}
|
|
13
|
-
export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
|
|
14
|
-
export interface SidebarProps extends CommonProps {
|
|
15
|
-
/**
|
|
16
|
-
* The breakpoint at which the menu will go from Horizontal to vertical stacked
|
|
17
|
-
*
|
|
18
|
-
* @default "lg"
|
|
19
|
-
*/
|
|
20
|
-
breakpoint?: Breakpoints;
|
|
21
|
-
/**
|
|
22
|
-
* The overflowThreshold is used to determine when an item is considered to be overflowing.
|
|
23
|
-
*/
|
|
24
|
-
overflowThreshold?: number;
|
|
25
|
-
/**
|
|
26
|
-
* The child elements of the sidebar.
|
|
27
|
-
* Usually this will be a list of SidebarItems, bottons or links.
|
|
28
|
-
*
|
|
29
|
-
* **For the overflow functionality to take effect use _"min-w-[*]"_ or _"flex-shrink-0"_ on the elements.**
|
|
30
|
-
*/
|
|
31
|
-
children: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
|
|
32
|
-
/**
|
|
33
|
-
* The childContainerClassName is applied to the element that contains the children.
|
|
34
|
-
* This can be used to change gap or similar styling.
|
|
35
|
-
*/
|
|
36
|
-
childContainerClassName?: string;
|
|
37
|
-
/**
|
|
38
|
-
* Pass custom props to the MoreMenu component used to render overflow items
|
|
39
|
-
*/
|
|
40
|
-
moreMenuProps?: Omit<React.ComponentProps<typeof MoreMenu>, "children">;
|
|
41
|
-
/**
|
|
42
|
-
* Pass custom props to the MenuList component used to render overflow items
|
|
43
|
-
*/
|
|
44
|
-
menuListProps?: Omit<React.ComponentProps<typeof MenuList>, "children">;
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* The sidebar components is used to render a responsive sidebar.
|
|
48
|
-
* - The sidebar will be rendered horizontally until a given breakpoint where it will be stacked vertically.
|
|
49
|
-
* - The sidebar hides items that does not fit in the sidebar and show them in a more menu.
|
|
50
|
-
* - **_The sidebar is just a wrapper. You are responsible for styling the children._**
|
|
51
|
-
*
|
|
52
|
-
* When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
|
|
53
|
-
*
|
|
54
|
-
* @param {SidebarProps} props - The props for the Sidebar component
|
|
55
|
-
* @returns {JSX.Element} Sidebar component
|
|
56
|
-
*/
|
|
57
|
-
export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => JSX.Element;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
import { MenuList, MoreMenu } from "../Menu";
|
|
4
|
+
export interface SidebarItemProps extends CommonProps {
|
|
5
|
+
/**
|
|
6
|
+
* The id prop is used to identify the sidebar item in the dom.
|
|
7
|
+
* This is needed as it is used for the intersection observer to determine which items are visible and which are not.
|
|
8
|
+
*/
|
|
9
|
+
id: string;
|
|
10
|
+
/** Optional onClick */
|
|
11
|
+
onClick?: () => void;
|
|
12
|
+
}
|
|
13
|
+
export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
|
|
14
|
+
export interface SidebarProps extends CommonProps {
|
|
15
|
+
/**
|
|
16
|
+
* The breakpoint at which the menu will go from Horizontal to vertical stacked
|
|
17
|
+
*
|
|
18
|
+
* @default "lg"
|
|
19
|
+
*/
|
|
20
|
+
breakpoint?: Breakpoints;
|
|
21
|
+
/**
|
|
22
|
+
* The overflowThreshold is used to determine when an item is considered to be overflowing.
|
|
23
|
+
*/
|
|
24
|
+
overflowThreshold?: number;
|
|
25
|
+
/**
|
|
26
|
+
* The child elements of the sidebar.
|
|
27
|
+
* Usually this will be a list of SidebarItems, bottons or links.
|
|
28
|
+
*
|
|
29
|
+
* **For the overflow functionality to take effect use _"min-w-[*]"_ or _"flex-shrink-0"_ on the elements.**
|
|
30
|
+
*/
|
|
31
|
+
children: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
|
|
32
|
+
/**
|
|
33
|
+
* The childContainerClassName is applied to the element that contains the children.
|
|
34
|
+
* This can be used to change gap or similar styling.
|
|
35
|
+
*/
|
|
36
|
+
childContainerClassName?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Pass custom props to the MoreMenu component used to render overflow items
|
|
39
|
+
*/
|
|
40
|
+
moreMenuProps?: Omit<React.ComponentProps<typeof MoreMenu>, "children">;
|
|
41
|
+
/**
|
|
42
|
+
* Pass custom props to the MenuList component used to render overflow items
|
|
43
|
+
*/
|
|
44
|
+
menuListProps?: Omit<React.ComponentProps<typeof MenuList>, "children">;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* The sidebar components is used to render a responsive sidebar.
|
|
48
|
+
* - The sidebar will be rendered horizontally until a given breakpoint where it will be stacked vertically.
|
|
49
|
+
* - The sidebar hides items that does not fit in the sidebar and show them in a more menu.
|
|
50
|
+
* - **_The sidebar is just a wrapper. You are responsible for styling the children._**
|
|
51
|
+
*
|
|
52
|
+
* When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
|
|
53
|
+
*
|
|
54
|
+
* @param {SidebarProps} props - The props for the Sidebar component
|
|
55
|
+
* @returns {JSX.Element} Sidebar component
|
|
56
|
+
*/
|
|
57
|
+
export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const cvaSidebar: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
2
|
-
export declare const cvaSidebarChildContainer: (props?: ({
|
|
3
|
-
breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
|
|
4
|
-
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
1
|
+
export declare const cvaSidebar: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
2
|
+
export declare const cvaSidebarChildContainer: (props?: ({
|
|
3
|
+
breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
|
|
4
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
2
|
-
import { SidebarItemProps } from "./Sidebar";
|
|
3
|
-
export interface OverflowItemsOptions {
|
|
4
|
-
/**
|
|
5
|
-
* If the child elements of the container are not available at the time of the hook initialization,
|
|
6
|
-
* you can pass the children as a prop, and the hook will initialize the observer when the children are available.
|
|
7
|
-
*/
|
|
8
|
-
children?: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
|
|
9
|
-
/**
|
|
10
|
-
* The threshold for the intersection observer.
|
|
11
|
-
* Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
|
|
12
|
-
*
|
|
13
|
-
* @default 1
|
|
14
|
-
*/
|
|
15
|
-
threshold?: number | number[];
|
|
16
|
-
/**
|
|
17
|
-
* The unique identifier attribute for the child elements.
|
|
18
|
-
* The identifier is the value that will be returned in the visibleItemsIds array.
|
|
19
|
-
*
|
|
20
|
-
* **ATTENTION: The identifier must be a HTMLAttribute that is available in the DOM, you cannot use react key.**
|
|
21
|
-
*
|
|
22
|
-
* @default "id"
|
|
23
|
-
*/
|
|
24
|
-
childUniqueIdentifierAttribute?: keyof HTMLAttributes<HTMLElement> | `data-${string}`;
|
|
25
|
-
}
|
|
26
|
-
export type OverflowMap = {
|
|
27
|
-
[key: string]: boolean;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* A hook used to detect what children are overflowing a container.
|
|
31
|
-
*
|
|
32
|
-
* @param {OverflowItemsOptions} root0 The options for the hook.
|
|
33
|
-
* @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
|
|
34
|
-
* @returns {object} The overflow items and the ref to the container.
|
|
35
|
-
*/
|
|
36
|
-
export declare const useOverflowItems: ({ threshold, childUniqueIdentifierAttribute, children, }: OverflowItemsOptions) => {
|
|
37
|
-
overflowContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
|
|
38
|
-
itemOverflowMap: OverflowMap;
|
|
39
|
-
};
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
import { SidebarItemProps } from "./Sidebar";
|
|
3
|
+
export interface OverflowItemsOptions {
|
|
4
|
+
/**
|
|
5
|
+
* If the child elements of the container are not available at the time of the hook initialization,
|
|
6
|
+
* you can pass the children as a prop, and the hook will initialize the observer when the children are available.
|
|
7
|
+
*/
|
|
8
|
+
children?: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
|
|
9
|
+
/**
|
|
10
|
+
* The threshold for the intersection observer.
|
|
11
|
+
* Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
|
|
12
|
+
*
|
|
13
|
+
* @default 1
|
|
14
|
+
*/
|
|
15
|
+
threshold?: number | number[];
|
|
16
|
+
/**
|
|
17
|
+
* The unique identifier attribute for the child elements.
|
|
18
|
+
* The identifier is the value that will be returned in the visibleItemsIds array.
|
|
19
|
+
*
|
|
20
|
+
* **ATTENTION: The identifier must be a HTMLAttribute that is available in the DOM, you cannot use react key.**
|
|
21
|
+
*
|
|
22
|
+
* @default "id"
|
|
23
|
+
*/
|
|
24
|
+
childUniqueIdentifierAttribute?: keyof HTMLAttributes<HTMLElement> | `data-${string}`;
|
|
25
|
+
}
|
|
26
|
+
export type OverflowMap = {
|
|
27
|
+
[key: string]: boolean;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* A hook used to detect what children are overflowing a container.
|
|
31
|
+
*
|
|
32
|
+
* @param {OverflowItemsOptions} root0 The options for the hook.
|
|
33
|
+
* @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
|
|
34
|
+
* @returns {object} The overflow items and the ref to the container.
|
|
35
|
+
*/
|
|
36
|
+
export declare const useOverflowItems: ({ threshold, childUniqueIdentifierAttribute, children, }: OverflowItemsOptions) => {
|
|
37
|
+
overflowContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
|
|
38
|
+
itemOverflowMap: OverflowMap;
|
|
39
|
+
};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
-
export interface SkeletonLinesProps extends CommonProps {
|
|
4
|
-
/**
|
|
5
|
-
* The number of lines to display.
|
|
6
|
-
*/
|
|
7
|
-
lines?: number;
|
|
8
|
-
/**
|
|
9
|
-
* The height of lines. Can be a number or an array of numbers or string.
|
|
10
|
-
*/
|
|
11
|
-
height?: number | number[] | string;
|
|
12
|
-
/**
|
|
13
|
-
* The width of each line. Can be a number or an array of numbers or string.
|
|
14
|
-
*/
|
|
15
|
-
width?: number | number[] | string;
|
|
16
|
-
/**
|
|
17
|
-
* Margin of lines.
|
|
18
|
-
*/
|
|
19
|
-
margin?: string;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Display placeholder lines before the data gets loaded to reduce load-time frustration.
|
|
23
|
-
*/
|
|
24
|
-
export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
|
|
25
|
-
export default SkeletonLines;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
export interface SkeletonLinesProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* The number of lines to display.
|
|
6
|
+
*/
|
|
7
|
+
lines?: number;
|
|
8
|
+
/**
|
|
9
|
+
* The height of lines. Can be a number or an array of numbers or string.
|
|
10
|
+
*/
|
|
11
|
+
height?: number | number[] | string;
|
|
12
|
+
/**
|
|
13
|
+
* The width of each line. Can be a number or an array of numbers or string.
|
|
14
|
+
*/
|
|
15
|
+
width?: number | number[] | string;
|
|
16
|
+
/**
|
|
17
|
+
* Margin of lines.
|
|
18
|
+
*/
|
|
19
|
+
margin?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Display placeholder lines before the data gets loaded to reduce load-time frustration.
|
|
23
|
+
*/
|
|
24
|
+
export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
|
|
25
|
+
export default SkeletonLines;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const cvaSkeletonLine: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
1
|
+
export declare const cvaSkeletonLine: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "./SkeletonLines";
|
|
1
|
+
export * from "./SkeletonLines";
|