@gooddata/sdk-ui-kit 10.32.0-alpha.9 → 10.32.0
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/esm/@ui/@dev/ComponentTable.d.ts +12 -9
- package/esm/@ui/@dev/ComponentTable.d.ts.map +1 -1
- package/esm/@ui/@dev/ComponentTable.js +6 -6
- package/esm/@ui/@dev/ComponentTable.js.map +1 -1
- package/esm/@ui/@types/variant.d.ts +4 -0
- package/esm/@ui/@types/variant.d.ts.map +1 -1
- package/esm/@ui/@utils/useKeyboardNavigationTarget.d.ts +16 -0
- package/esm/@ui/@utils/useKeyboardNavigationTarget.d.ts.map +1 -0
- package/esm/@ui/@utils/useKeyboardNavigationTarget.js +34 -0
- package/esm/@ui/@utils/useKeyboardNavigationTarget.js.map +1 -0
- package/esm/@ui/UiButton/UiButton.d.ts +2 -2
- package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
- package/esm/@ui/UiButton/UiButton.js.map +1 -1
- package/esm/@ui/UiFocusManager/UiAutofocus.d.ts +24 -0
- package/esm/@ui/UiFocusManager/UiAutofocus.d.ts.map +1 -0
- package/esm/{utils/useAutofocusOnMount.js → @ui/UiFocusManager/UiAutofocus.js} +18 -23
- package/esm/@ui/UiFocusManager/UiAutofocus.js.map +1 -0
- package/esm/@ui/UiFocusManager/UiFocusManager.d.ts +23 -0
- package/esm/@ui/UiFocusManager/UiFocusManager.d.ts.map +1 -0
- package/esm/@ui/UiFocusManager/UiFocusManager.js +49 -0
- package/esm/@ui/UiFocusManager/UiFocusManager.js.map +1 -0
- package/esm/@ui/UiFocusManager/UiFocusTrap.d.ts +13 -0
- package/esm/@ui/UiFocusManager/UiFocusTrap.d.ts.map +1 -0
- package/esm/@ui/UiFocusManager/UiFocusTrap.js +31 -0
- package/esm/@ui/UiFocusManager/UiFocusTrap.js.map +1 -0
- package/esm/@ui/UiFocusManager/UiReturnFocusOnUnmount.d.ts +19 -0
- package/esm/@ui/UiFocusManager/UiReturnFocusOnUnmount.d.ts.map +1 -0
- package/esm/@ui/UiFocusManager/UiReturnFocusOnUnmount.js +34 -0
- package/esm/@ui/UiFocusManager/UiReturnFocusOnUnmount.js.map +1 -0
- package/esm/@ui/UiFocusManager/UiTabOutHandler.d.ts +14 -0
- package/esm/@ui/UiFocusManager/UiTabOutHandler.d.ts.map +1 -0
- package/esm/@ui/UiFocusManager/UiTabOutHandler.js +35 -0
- package/esm/@ui/UiFocusManager/UiTabOutHandler.js.map +1 -0
- package/esm/@ui/UiFocusManager/types.d.ts +13 -0
- package/esm/@ui/UiFocusManager/types.d.ts.map +1 -0
- package/esm/@ui/UiFocusManager/types.js +3 -0
- package/esm/@ui/UiFocusManager/types.js.map +1 -0
- package/esm/@ui/UiFocusManager/utils.d.ts +18 -0
- package/esm/@ui/UiFocusManager/utils.d.ts.map +1 -0
- package/esm/@ui/UiFocusManager/utils.js +40 -0
- package/esm/@ui/UiFocusManager/utils.js.map +1 -0
- package/esm/@ui/UiLink/UiLink.d.ts +13 -0
- package/esm/@ui/UiLink/UiLink.d.ts.map +1 -0
- package/esm/@ui/UiLink/UiLink.js +11 -0
- package/esm/@ui/UiLink/UiLink.js.map +1 -0
- package/esm/@ui/UiMenu/UiMenu.js +2 -2
- package/esm/@ui/UiMenu/UiMenu.js.map +1 -1
- package/esm/@ui/UiNavigationBypass/UiNavigationBypass.d.ts +23 -0
- package/esm/@ui/UiNavigationBypass/UiNavigationBypass.d.ts.map +1 -0
- package/esm/@ui/UiNavigationBypass/UiNavigationBypass.js +86 -0
- package/esm/@ui/UiNavigationBypass/UiNavigationBypass.js.map +1 -0
- package/esm/@ui/UiTooltip/UiTooltip.d.ts +7 -0
- package/esm/@ui/UiTooltip/UiTooltip.d.ts.map +1 -0
- package/esm/@ui/UiTooltip/UiTooltip.js +92 -0
- package/esm/@ui/UiTooltip/UiTooltip.js.map +1 -0
- package/esm/@ui/UiTooltip/constants.d.ts +9 -0
- package/esm/@ui/UiTooltip/constants.d.ts.map +1 -0
- package/esm/@ui/UiTooltip/constants.js +14 -0
- package/esm/@ui/UiTooltip/constants.js.map +1 -0
- package/esm/@ui/UiTooltip/types.d.ts +44 -0
- package/esm/@ui/UiTooltip/types.d.ts.map +1 -0
- package/esm/@ui/UiTooltip/types.js +3 -0
- package/esm/@ui/UiTooltip/types.js.map +1 -0
- package/esm/@ui/UiTooltip/utils.d.ts +19 -0
- package/esm/@ui/UiTooltip/utils.d.ts.map +1 -0
- package/esm/@ui/UiTooltip/utils.js +74 -0
- package/esm/@ui/UiTooltip/utils.js.map +1 -0
- package/esm/Bubble/Bubble.d.ts +2 -0
- package/esm/Bubble/Bubble.d.ts.map +1 -1
- package/esm/Bubble/Bubble.js +2 -1
- package/esm/Bubble/Bubble.js.map +1 -1
- package/esm/Bubble/withBubble.js.map +1 -1
- package/esm/Dialog/ConfirmDialogBase.d.ts.map +1 -1
- package/esm/Dialog/ConfirmDialogBase.js +2 -2
- package/esm/Dialog/ConfirmDialogBase.js.map +1 -1
- package/esm/Dialog/DialogBase.d.ts.map +1 -1
- package/esm/Dialog/DialogBase.js +2 -8
- package/esm/Dialog/DialogBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialog.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialog.js +5 -5
- package/esm/Dialog/ShareDialog/ShareDialog.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeBase.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeBase.js +2 -2
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeContent.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeContent.js +3 -3
- package/esm/Dialog/ShareDialog/ShareDialogBase/AddGranteeContent.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeItem.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeItem.js +3 -3
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeItem.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeList.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeList.js +3 -3
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranteeList.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeGroupItem.d.ts +1 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeGroupItem.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeGroupItem.js +2 -2
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeGroupItem.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeUserItem.d.ts +1 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeUserItem.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeUserItem.js +2 -2
- package/esm/Dialog/ShareDialog/ShareDialogBase/GranularPermissions/GranularGranteeUserItem.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareDialogBase.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareDialogBase.js +2 -2
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareDialogBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeBase.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeBase.js +16 -6
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeContent.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeContent.js +5 -7
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareGranteeContent.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareLink.d.ts +7 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareLink.d.ts.map +1 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareLink.js +28 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/ShareLink.js.map +1 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/backend/useGetAccessList.d.ts +1 -0
- package/esm/Dialog/ShareDialog/ShareDialogBase/backend/useGetAccessList.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/backend/useGetAccessList.js +3 -8
- package/esm/Dialog/ShareDialog/ShareDialogBase/backend/useGetAccessList.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/types.d.ts +31 -2
- package/esm/Dialog/ShareDialog/ShareDialogBase/types.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/types.js.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/useShareDialogBase.d.ts.map +1 -1
- package/esm/Dialog/ShareDialog/ShareDialogBase/useShareDialogBase.js +35 -9
- package/esm/Dialog/ShareDialog/ShareDialogBase/useShareDialogBase.js.map +1 -1
- package/esm/Dialog/ShareDialog/types.d.ts +8 -2
- package/esm/Dialog/ShareDialog/types.d.ts.map +1 -1
- package/esm/Dialog/typings.d.ts +1 -0
- package/esm/Dialog/typings.d.ts.map +1 -1
- package/esm/Dropdown/Dropdown.d.ts +1 -1
- package/esm/Dropdown/Dropdown.d.ts.map +1 -1
- package/esm/Dropdown/Dropdown.js +10 -7
- package/esm/Dropdown/Dropdown.js.map +1 -1
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.d.ts +1 -0
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.d.ts.map +1 -1
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.js +7 -3
- package/esm/Dropdown/DropdownButtonKeyboardWrapper.js.map +1 -1
- package/esm/Form/InputPure.d.ts +5 -0
- package/esm/Form/InputPure.d.ts.map +1 -1
- package/esm/Form/InputPure.js +9 -2
- package/esm/Form/InputPure.js.map +1 -1
- package/esm/Header/HeaderAccount.d.ts.map +1 -1
- package/esm/Header/HeaderAccount.js +2 -2
- package/esm/Header/HeaderAccount.js.map +1 -1
- package/esm/Header/HeaderHelp.d.ts.map +1 -1
- package/esm/Header/HeaderHelp.js +2 -2
- package/esm/Header/HeaderHelp.js.map +1 -1
- package/esm/Header/HeaderSearchButton.d.ts.map +1 -1
- package/esm/Header/HeaderSearchButton.js +2 -2
- package/esm/Header/HeaderSearchButton.js.map +1 -1
- package/esm/Icon/Icon.js +2 -2
- package/esm/Icon/Icon.js.map +1 -1
- package/esm/Icon/icons/ColumnContainer.d.ts +7 -0
- package/esm/Icon/icons/ColumnContainer.d.ts.map +1 -0
- package/esm/Icon/icons/ColumnContainer.js +19 -0
- package/esm/Icon/icons/ColumnContainer.js.map +1 -0
- package/esm/Overlay/OverlayContext.d.ts +10 -2
- package/esm/Overlay/OverlayContext.d.ts.map +1 -1
- package/esm/Overlay/OverlayContext.js +24 -3
- package/esm/Overlay/OverlayContext.js.map +1 -1
- package/esm/Overlay/index.d.ts +1 -1
- package/esm/Overlay/index.d.ts.map +1 -1
- package/esm/Overlay/index.js +1 -1
- package/esm/Overlay/index.js.map +1 -1
- package/esm/RecurrenceForm/RecurrenceForm.d.ts +2 -0
- package/esm/RecurrenceForm/RecurrenceForm.d.ts.map +1 -1
- package/esm/RecurrenceForm/RecurrenceForm.js +5 -4
- package/esm/RecurrenceForm/RecurrenceForm.js.map +1 -1
- package/esm/RecurrenceForm/RepeatTypeDescription.js +1 -1
- package/esm/RecurrenceForm/RepeatTypeDescription.js.map +1 -1
- package/esm/RecurrenceForm/RepeatTypeSelect.js +1 -1
- package/esm/RecurrenceForm/RepeatTypeSelect.js.map +1 -1
- package/esm/RecurrenceForm/index.d.ts +2 -1
- package/esm/RecurrenceForm/index.d.ts.map +1 -1
- package/esm/RecurrenceForm/index.js +3 -2
- package/esm/RecurrenceForm/index.js.map +1 -1
- package/esm/RecurrenceForm/useCronValidation.js +1 -1
- package/esm/RecurrenceForm/useCronValidation.js.map +1 -1
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.d.ts +14 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.d.ts.map +1 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.js +65 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.js.map +1 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.test.d.ts +2 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.test.d.ts.map +1 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.test.js +80 -0
- package/esm/RecurrenceForm/utils/simpleRecurrenceTypeMappingFn.test.js.map +1 -0
- package/esm/RecurrenceForm/{utils.d.ts → utils/utils.d.ts} +1 -1
- package/esm/RecurrenceForm/utils/utils.d.ts.map +1 -0
- package/esm/RecurrenceForm/{utils.js → utils/utils.js} +2 -2
- package/esm/RecurrenceForm/utils/utils.js.map +1 -0
- package/esm/RecurrenceForm/utils/utils.test.d.ts.map +1 -0
- package/esm/RecurrenceForm/{utils.test.js → utils/utils.test.js} +1 -1
- package/esm/RecurrenceForm/utils/utils.test.js.map +1 -0
- package/esm/index.d.ts +19 -4
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +10 -2
- package/esm/index.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +271 -68
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.d.ts.map +1 -1
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.js +11 -1
- package/esm/syntaxHighlightingInput/hooks/useCodemirrorOptions.js.map +1 -1
- package/package.json +19 -16
- package/src/@ui/UiButton/UiButton.scss +28 -0
- package/src/@ui/UiLink/UiLink.scss +44 -0
- package/src/@ui/UiNavigationBypass/UiNavigationBypass.scss +52 -0
- package/src/@ui/UiTooltip/UiTooltip.scss +23 -0
- package/src/@ui/index.scss +3 -0
- package/styles/css/form.css +13 -0
- package/styles/css/form.css.map +1 -1
- package/styles/css/main.css +155 -20
- package/styles/css/main.css.map +1 -1
- package/styles/css/overlay.css +0 -4
- package/styles/css/overlay.css.map +1 -1
- package/styles/css/shareDialog.css +22 -11
- package/styles/css/shareDialog.css.map +1 -1
- package/styles/css/syntaxHighlightingInput.css +16 -5
- package/styles/css/syntaxHighlightingInput.css.map +1 -1
- package/styles/scss/form.scss +15 -0
- package/styles/scss/overlay.scss +0 -6
- package/styles/scss/shareDialog.scss +23 -11
- package/styles/scss/syntaxHighlightingInput.scss +12 -2
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts +0 -39
- package/esm/@ui/UiFocusTrap/UiFocusTrap.d.ts.map +0 -1
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js +0 -134
- package/esm/@ui/UiFocusTrap/UiFocusTrap.js.map +0 -1
- package/esm/Icon/icons/Container.d.ts +0 -7
- package/esm/Icon/icons/Container.d.ts.map +0 -1
- package/esm/Icon/icons/Container.js +0 -37
- package/esm/Icon/icons/Container.js.map +0 -1
- package/esm/RecurrenceForm/utils.d.ts.map +0 -1
- package/esm/RecurrenceForm/utils.js.map +0 -1
- package/esm/RecurrenceForm/utils.test.d.ts.map +0 -1
- package/esm/RecurrenceForm/utils.test.js.map +0 -1
- package/esm/utils/useAutofocusOnMount.d.ts +0 -29
- package/esm/utils/useAutofocusOnMount.d.ts.map +0 -1
- package/esm/utils/useAutofocusOnMount.js.map +0 -1
- /package/esm/RecurrenceForm/{utils.test.d.ts → utils/utils.test.d.ts} +0 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useAutoupdateRef } from "@gooddata/sdk-ui";
|
|
4
|
+
import { getFocusableElements } from "../../utils/domUtilities.js";
|
|
5
|
+
import { makeKeyboardNavigation } from "../@utils/keyboardNavigation.js";
|
|
6
|
+
/**
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
export const UiTabOutHandler = ({ onTabOut, children, }) => {
|
|
10
|
+
const connectors = useUiTabOutHandlerConnectors(onTabOut);
|
|
11
|
+
return (React.createElement("div", { style: { display: "contents" }, ...connectors }, children));
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
export const useUiTabOutHandlerConnectors = (handler) => {
|
|
17
|
+
const [element, setElement] = React.useState(null);
|
|
18
|
+
const handlerRef = useAutoupdateRef(handler);
|
|
19
|
+
const handleMoveFocus = React.useCallback((direction) => (event) => {
|
|
20
|
+
const { firstElement, lastElement } = getFocusableElements(element);
|
|
21
|
+
if ((direction === "forward" && document.activeElement === lastElement) ||
|
|
22
|
+
(direction === "backward" && document.activeElement === firstElement)) {
|
|
23
|
+
handlerRef.current?.(event);
|
|
24
|
+
}
|
|
25
|
+
}, [element, handlerRef]);
|
|
26
|
+
const handleKeyDown = React.useMemo(() => makeKeyboardNavigation({
|
|
27
|
+
onFocusNext: [{ code: "Tab", modifiers: ["!Shift"] }],
|
|
28
|
+
onFocusPrevious: [{ code: "Tab", modifiers: ["Shift"] }],
|
|
29
|
+
})({
|
|
30
|
+
onFocusNext: handleMoveFocus("forward"),
|
|
31
|
+
onFocusPrevious: handleMoveFocus("backward"),
|
|
32
|
+
}, { shouldPreventDefault: false, shouldStopPropagation: false }), [handleMoveFocus]);
|
|
33
|
+
return React.useMemo(() => ({ ref: setElement, onKeyDown: handleKeyDown }), [handleKeyDown]);
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=UiTabOutHandler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiTabOutHandler.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusManager/UiTabOutHandler.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAGzE;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAkE,CAAC,EAC3F,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,4BAA4B,CAAiB,QAAQ,CAAC,CAAC;IAE1E,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAAM,UAAU,IAC9C,QAAQ,CACP,CACT,CAAC;AACN,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CACxC,OAA8C,EACnB,EAAE;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEvE,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,SAA8B,EAAE,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;QAC/D,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAEpE,IACI,CAAC,SAAS,KAAK,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,CAAC;YACnE,CAAC,SAAS,KAAK,UAAU,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,CAAC,EACvE,CAAC;YACC,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,CAAC,CACxB,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CACD,sBAAsB,CAAC;QACnB,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrD,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;KAC3D,CAAC,CACE;QACI,WAAW,EAAE,eAAe,CAAC,SAAS,CAAC;QACvC,eAAe,EAAE,eAAe,CAAC,UAAU,CAAC;KAC/C,EACD,EAAE,oBAAoB,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAChE,EACL,CAAC,eAAe,CAAC,CACpB,CAAC;IAEF,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACjG,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export interface IUiFocusHelperConnectors<T extends HTMLElement = HTMLElement> {
|
|
6
|
+
ref?: React.Ref<T>;
|
|
7
|
+
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
export type NavigationDirection = "forward" | "backward";
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusManager/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAChD;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusManager/types.ts"],"names":[],"mappings":"AAAA,gCAAgC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NavigationDirection } from "./types.js";
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
export declare const resolveRef: (ref: string | React.RefObject<HTMLElement> | undefined | null) => HTMLElement;
|
|
7
|
+
/**
|
|
8
|
+
* Attempts to find a truly focusable element by trying subsequent elements in the focusable elements collection
|
|
9
|
+
* This is useful when some elements are focusable but not reachable (e.g., out of viewport or disabled)
|
|
10
|
+
*
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
export declare const focusAndEnsureReachableElement: (initialElement: HTMLElement | undefined, focusableElements: HTMLElement[], direction: NavigationDirection) => void;
|
|
14
|
+
/**
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
|
+
export declare const getNextFocusableElement: (initialElement: HTMLElement | undefined, focusableElements: HTMLElement[], direction: NavigationDirection) => HTMLElement;
|
|
18
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFocusManager/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,IAAI,gBAEvF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,8BAA8B,mBACvB,WAAW,GAAG,SAAS,qBACpB,WAAW,EAAE,aACrB,mBAAmB,KAC/B,IAiBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,mBAChB,WAAW,GAAG,SAAS,qBACpB,WAAW,EAAE,aACrB,mBAAmB,gBAcjC,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @internal
|
|
3
|
+
*/
|
|
4
|
+
export const resolveRef = (ref) => {
|
|
5
|
+
return typeof ref === "string" ? document.getElementById(ref) : ref?.current;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Attempts to find a truly focusable element by trying subsequent elements in the focusable elements collection
|
|
9
|
+
* This is useful when some elements are focusable but not reachable (e.g., out of viewport or disabled)
|
|
10
|
+
*
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
export const focusAndEnsureReachableElement = (initialElement, focusableElements, direction) => {
|
|
14
|
+
const initialElementIndex = initialElement ? focusableElements.indexOf(initialElement) : -1;
|
|
15
|
+
let currentElement = initialElement;
|
|
16
|
+
if (initialElementIndex === -1) {
|
|
17
|
+
currentElement = focusableElements.at(direction === "forward" ? 0 : -1);
|
|
18
|
+
}
|
|
19
|
+
for (let attempt = 0; attempt < focusableElements.length && currentElement !== undefined; attempt++) {
|
|
20
|
+
currentElement.focus();
|
|
21
|
+
if (currentElement === document.activeElement) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
currentElement = getNextFocusableElement(currentElement, focusableElements, direction);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
30
|
+
export const getNextFocusableElement = (initialElement, focusableElements, direction) => {
|
|
31
|
+
const currentIndex = initialElement ? focusableElements.indexOf(initialElement) : -1;
|
|
32
|
+
if (currentIndex === -1) {
|
|
33
|
+
return focusableElements.at(direction === "forward" ? 0 : -1);
|
|
34
|
+
}
|
|
35
|
+
const nextIndex = direction === "backward"
|
|
36
|
+
? (currentIndex - 1 + focusableElements.length) % focusableElements.length
|
|
37
|
+
: (currentIndex + 1) % focusableElements.length;
|
|
38
|
+
return focusableElements[nextIndex];
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/@ui/UiFocusManager/utils.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAA6D,EAAE,EAAE;IACxF,OAAO,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;AACjF,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAC1C,cAAuC,EACvC,iBAAgC,EAChC,SAA8B,EAC1B,EAAE;IACN,MAAM,mBAAmB,GAAG,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,IAAI,cAAc,GAA4B,cAAc,CAAC;IAE7D,IAAI,mBAAmB,KAAK,CAAC,CAAC,EAAE,CAAC;QAC7B,cAAc,GAAG,iBAAiB,CAAC,EAAE,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAED,KAAK,IAAI,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,MAAM,IAAI,cAAc,KAAK,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC;QAClG,cAAc,CAAC,KAAK,EAAE,CAAC;QAEvB,IAAI,cAAc,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC5C,OAAO;QACX,CAAC;QAED,cAAc,GAAG,uBAAuB,CAAC,cAAc,EAAE,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAC3F,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,cAAuC,EACvC,iBAAgC,EAChC,SAA8B,EAChC,EAAE;IACA,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErF,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE,CAAC;QACtB,OAAO,iBAAiB,CAAC,EAAE,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,SAAS,GACX,SAAS,KAAK,UAAU;QACpB,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC,MAAM;QAC1E,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC;IAExD,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACxC,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export interface IUiLinkProps extends Omit<React.HTMLProps<HTMLAnchorElement>, "className"> {
|
|
6
|
+
variant: "primary" | "secondary" | "inverse";
|
|
7
|
+
flipUnderline?: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
export declare const UiLink: React.FC<IUiLinkProps>;
|
|
13
|
+
//# sourceMappingURL=UiLink.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiLink.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiLink/UiLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IACvF,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMzC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { bem } from "../@utils/bem.js";
|
|
4
|
+
const { b } = bem("gd-ui-kit-link");
|
|
5
|
+
/**
|
|
6
|
+
* @internal
|
|
7
|
+
*/
|
|
8
|
+
export const UiLink = ({ variant = "secondary", flipUnderline = false, ...anchorProps }) => {
|
|
9
|
+
return React.createElement("a", { className: b({ variant, flipUnderline }), ...anchorProps });
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=UiLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiLink.js","sourceRoot":"","sources":["../../../src/@ui/UiLink/UiLink.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,MAAM,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAUpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAA2B,CAAC,EAC3C,OAAO,GAAG,WAAW,EACrB,aAAa,GAAG,KAAK,EACrB,GAAG,WAAW,EACjB,EAAE,EAAE;IACD,OAAO,2BAAG,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,KAAM,WAAW,GAAI,CAAC;AAC5E,CAAC,CAAC"}
|
package/esm/@ui/UiMenu/UiMenu.js
CHANGED
|
@@ -5,11 +5,11 @@ import { b, e } from "./menuBem.js";
|
|
|
5
5
|
import { getContentItem, getSiblingItems } from "./itemUtils.js";
|
|
6
6
|
import { useCustomContentKeyNavigation, useKeyNavigation, useUiMenuContextValue } from "./hooks.js";
|
|
7
7
|
import { typedUiMenuContextStore } from "./context.js";
|
|
8
|
-
import {
|
|
8
|
+
import { UiAutofocus } from "../UiFocusManager/UiAutofocus.js";
|
|
9
9
|
const ContentWrapper = (props) => {
|
|
10
10
|
return (
|
|
11
11
|
// autofocus always first element in the custom content for now
|
|
12
|
-
React.createElement(
|
|
12
|
+
React.createElement(UiAutofocus, null,
|
|
13
13
|
React.createElement("div", { onKeyDown: props.keyboardNavigationHandler }, props.children)));
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiMenu.js","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,6BAA6B,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"UiMenu.js","sourceRoot":"","sources":["../../../src/@ui/UiMenu/UiMenu.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,6BAA6B,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACpG,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAE/D,MAAM,cAAc,GAGf,CAAC,KAAK,EAAE,EAAE;IACX,OAAO;IACH,+DAA+D;IAC/D,oBAAC,WAAW;QACR,6BAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC7D,CACjB,CAAC;AACN,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,MAAM,CAClB,KAAwB;IAExB,MAAM,EACF,SAAS,EACT,UAAU,EACV,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,kCAAkC,EAClC,mCAAmC,GACtC,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC7D,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7D,MAAM,kBAAkB,GAAG,uBAAuB,EAAQ,CAAC;IAC3D,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAE5F,MAAM,aAAa,GAAG,gBAAgB,CAAO;QACzC,gBAAgB,EAAE,iBAAiB;QACnC,kBAAkB;QAClB,kCAAkC;QAClC,mCAAmC;KACtC,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,6BAA6B,CAAO;QACrE,gBAAgB,EAAE,iBAAiB;QACnC,kBAAkB;QAClB,kCAAkC;QAClC,mCAAmC;KACtC,CAAC,CAAC;IAEH,MAAM,EACF,WAAW,EACX,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,wBAAwB,GAC3B,GAAG,iBAAiB,CAAC;IACtB,MAAM,SAAS,GAAG,WAAW,EAAE,EAAE,CAAC;IAElC,MAAM,qBAAqB,GAAG,KAAK,CAAC,OAAO,CACvC,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,EAC9E,CAAC,KAAK,EAAE,SAAS,CAAC,CACrB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,kFAAkF;QAClF,IAAI,wBAAwB,KAAK,SAAS,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;YACrE,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrC,CAAC;IACL,CAAC,EAAE,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjD,MAAM,aAAa,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjG,MAAM,cAAc,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAErG,OAAO,CACH,oBAAC,kBAAkB,IAAC,KAAK,EAAE,iBAAiB;QACxC,6BACI,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,aAAa,CAAC,EACrD,KAAK,EAAE,EAAE,QAAQ,EAAE,EACnB,gBAAgB,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,EAClD,kBAAkB,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,iBACpC,cAAc,IAE1B,wBAAwB,CAAC,CAAC,CAAC,CACxB,oBAAC,cAAc,IAAC,yBAAyB,EAAE,4BAA4B;YACnE,oBAAC,OAAO,IAAC,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,wBAAwB,CAAC,GAAI,CACrD,CACpB,CAAC,CAAC,CAAC,CACA;YACI,oBAAC,UAAU,OAAG;YACd,6BACI,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,GAAG,EAAE,iBAA2D;gBAEhE,8BACI,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,aAAa,2BACD,UAAU,CAAC,WAAW,CAAC,KAC1C,cAAc,EAClB,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,gBAAgB,IAEpB,qBAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,oBAAC,aAAa,IAAC,GAAG,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CACrE,CAAC,CACC,CACL,CACP,CACN,CACC,CACW,CACxB,CAAC;AACN,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export interface IUiNavigationItem {
|
|
6
|
+
id: string;
|
|
7
|
+
name: string;
|
|
8
|
+
targetId: string;
|
|
9
|
+
tabIndex?: number;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
export interface IUiNavigationBypassProps {
|
|
15
|
+
items: IUiNavigationItem[];
|
|
16
|
+
label: string;
|
|
17
|
+
onItemClick?: (item: IUiNavigationItem) => void;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* @internal
|
|
21
|
+
*/
|
|
22
|
+
export declare const UiNavigationBypass: React.FC<IUiNavigationBypassProps>;
|
|
23
|
+
//# sourceMappingURL=UiNavigationBypass.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiNavigationBypass.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiNavigationBypass/UiNavigationBypass.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACnD;AAWD;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6FjE,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
|
2
|
+
import React, { useCallback, useRef, useState } from "react";
|
|
3
|
+
import { v4 as uuid } from "uuid";
|
|
4
|
+
import { bem } from "../@utils/bem.js";
|
|
5
|
+
const { b, e } = bem("gd-ui-kit-navigation-bypass");
|
|
6
|
+
/**
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
export const UiNavigationBypass = ({ label, items, onItemClick }) => {
|
|
10
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
11
|
+
const containerRef = useRef(null);
|
|
12
|
+
const contentRef = useRef(null);
|
|
13
|
+
const focusedRef = useRef(null);
|
|
14
|
+
const handleFocus = useCallback(() => {
|
|
15
|
+
setIsFocused(true);
|
|
16
|
+
}, []);
|
|
17
|
+
const handleBlur = useCallback((event) => {
|
|
18
|
+
if (containerRef.current && !containerRef.current.contains(event.relatedTarget)) {
|
|
19
|
+
setIsFocused(false);
|
|
20
|
+
}
|
|
21
|
+
}, []);
|
|
22
|
+
const handleKeyDown = useCallback((event) => {
|
|
23
|
+
if (!isFocused) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const current = focusedRef.current;
|
|
27
|
+
const children = contentRef.current?.children;
|
|
28
|
+
if (children && current && event.key === "ArrowDown") {
|
|
29
|
+
const i = Array.prototype.indexOf.call(children, current) + 1;
|
|
30
|
+
const next = (i >= children.length ? children[0] : children[i]);
|
|
31
|
+
if (next) {
|
|
32
|
+
next.focus();
|
|
33
|
+
}
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
}
|
|
36
|
+
if (children && current && event.key === "ArrowUp") {
|
|
37
|
+
const i = Array.prototype.indexOf.call(children, current) - 1;
|
|
38
|
+
const next = (i < 0 ? children[children.length - 1] : children[i]);
|
|
39
|
+
if (next) {
|
|
40
|
+
next.focus();
|
|
41
|
+
}
|
|
42
|
+
event.preventDefault();
|
|
43
|
+
}
|
|
44
|
+
}, [isFocused]);
|
|
45
|
+
const handleItemClick = useCallback((item) => {
|
|
46
|
+
// Handle click on item callback if provided
|
|
47
|
+
if (onItemClick) {
|
|
48
|
+
onItemClick(item);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
//By default, focus the target element by id
|
|
52
|
+
const targetElement = document.getElementById(item.targetId);
|
|
53
|
+
if (targetElement) {
|
|
54
|
+
targetElement.focus();
|
|
55
|
+
}
|
|
56
|
+
}, [onItemClick]);
|
|
57
|
+
const handleItemFocus = useCallback((el) => {
|
|
58
|
+
focusedRef.current = el;
|
|
59
|
+
}, []);
|
|
60
|
+
const labelId = React.useMemo(() => {
|
|
61
|
+
const hash = uuid().substring(0, 5);
|
|
62
|
+
return `nb-${hash}`;
|
|
63
|
+
}, []);
|
|
64
|
+
return (React.createElement(React.Fragment, null,
|
|
65
|
+
React.createElement("div", { role: "menu", className: b(), ref: containerRef, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-labelledby": labelId },
|
|
66
|
+
React.createElement("div", { className: e("dropdown", { isFocused }), ref: contentRef }, items.map((item) => (React.createElement(UiNavigationItem, { key: item.id, item: item, onItemClick: handleItemClick, onItemFocus: handleItemFocus }))))),
|
|
67
|
+
React.createElement("span", { style: { display: "none" }, id: labelId }, label)));
|
|
68
|
+
};
|
|
69
|
+
const UiNavigationItem = ({ item, onItemClick, onItemFocus }) => {
|
|
70
|
+
const { id, name, tabIndex } = item;
|
|
71
|
+
const handleClick = useCallback((event) => {
|
|
72
|
+
event.preventDefault();
|
|
73
|
+
onItemClick(item);
|
|
74
|
+
}, [onItemClick, item]);
|
|
75
|
+
const handleKeyDown = useCallback((event) => {
|
|
76
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
onItemClick(item);
|
|
79
|
+
}
|
|
80
|
+
}, [onItemClick, item]);
|
|
81
|
+
const handleFocus = useCallback((e) => {
|
|
82
|
+
onItemFocus(e.target);
|
|
83
|
+
}, [onItemFocus]);
|
|
84
|
+
return (React.createElement("div", { key: id, role: "menuitem", tabIndex: tabIndex ?? 0, className: e("dropdown-item"), onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: handleClick }, name));
|
|
85
|
+
};
|
|
86
|
+
//# sourceMappingURL=UiNavigationBypass.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiNavigationBypass.js","sourceRoot":"","sources":["../../../src/@ui/UiNavigationBypass/UiNavigationBypass.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiTooltip.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/UiTooltip.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAe5C;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyI9C,CAAC"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
|
2
|
+
import { useFloating, autoUpdate, flip, offset, arrow, useHover, useFocus, useClick, useDismiss, useInteractions, FloatingPortal, FloatingArrow, safePolygon, } from "@floating-ui/react";
|
|
3
|
+
import React, { useRef, useMemo, useState } from "react";
|
|
4
|
+
import { bem } from "../@utils/bem.js";
|
|
5
|
+
import { computeArrowOffset, computeTooltipShift, getDimensionsFromRect, getDimensionsFromRef, getFlipFallbackOrder, getOppositeBasicPlacement, } from "./utils.js";
|
|
6
|
+
import { ARROW_HEIGHT, ARROW_WIDTH, HIDE_DELAY, SHOW_DELAY } from "./constants.js";
|
|
7
|
+
import { useTheme, useIsScopeThemed, ConditionalScopedThemeProvider } from "@gooddata/sdk-ui-theme-provider";
|
|
8
|
+
import { useOverlayZIndexWithRegister } from "../../Overlay/index.js";
|
|
9
|
+
const { b, e } = bem("gd-ui-kit-tooltip");
|
|
10
|
+
/**
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
export const UiTooltip = ({ anchor, content, arrowPlacement = "top", triggerBy = [], hoverOpenDelay = SHOW_DELAY, hoverCloseDelay = HIDE_DELAY, showArrow = true, width, offset: offsetProp, optimalPlacement = false, accessibilityConfig, }) => {
|
|
14
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
15
|
+
const arrowRef = useRef(null);
|
|
16
|
+
const themeFromContext = useTheme();
|
|
17
|
+
const isScopeThemed = useIsScopeThemed();
|
|
18
|
+
const theme = isScopeThemed ? themeFromContext : undefined;
|
|
19
|
+
const zIndex = useOverlayZIndexWithRegister();
|
|
20
|
+
const customShiftMiddleware = {
|
|
21
|
+
name: "customShift",
|
|
22
|
+
fn(args) {
|
|
23
|
+
const { x, y, rects, middlewareData } = args;
|
|
24
|
+
const currentFloatingDimensions = getDimensionsFromRect(rects?.floating);
|
|
25
|
+
const enable = !middlewareData?.flip?.index;
|
|
26
|
+
const shift = computeTooltipShift(arrowPlacement, currentFloatingDimensions, enable, theme);
|
|
27
|
+
return {
|
|
28
|
+
x: shift.x ? x + shift.x : x,
|
|
29
|
+
y: shift.y ? y + shift.y : y,
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
const { refs, floatingStyles, context, middlewareData } = useFloating({
|
|
34
|
+
open: isOpen,
|
|
35
|
+
onOpenChange: setIsOpen,
|
|
36
|
+
placement: getOppositeBasicPlacement(arrowPlacement),
|
|
37
|
+
whileElementsMounted: autoUpdate,
|
|
38
|
+
middleware: [
|
|
39
|
+
offset(offsetProp ?? ARROW_HEIGHT),
|
|
40
|
+
customShiftMiddleware,
|
|
41
|
+
...(optimalPlacement
|
|
42
|
+
? [
|
|
43
|
+
flip({
|
|
44
|
+
fallbackPlacements: getFlipFallbackOrder(arrowPlacement),
|
|
45
|
+
fallbackStrategy: "initialPlacement",
|
|
46
|
+
}),
|
|
47
|
+
]
|
|
48
|
+
: []),
|
|
49
|
+
arrow({
|
|
50
|
+
element: arrowRef,
|
|
51
|
+
}),
|
|
52
|
+
],
|
|
53
|
+
});
|
|
54
|
+
const triggerDimensions = getDimensionsFromRef(refs.reference);
|
|
55
|
+
const floatingDimensions = getDimensionsFromRef(refs.floating);
|
|
56
|
+
const hasNoTriggers = triggerBy.length === 0;
|
|
57
|
+
const isTooltipVisible = useMemo(() => isOpen || hasNoTriggers, [hasNoTriggers, isOpen]);
|
|
58
|
+
// trigger events
|
|
59
|
+
const hover = useHover(context, {
|
|
60
|
+
enabled: triggerBy.includes("hover"),
|
|
61
|
+
move: false,
|
|
62
|
+
handleClose: safePolygon({ requireIntent: true }),
|
|
63
|
+
delay: {
|
|
64
|
+
open: hoverOpenDelay,
|
|
65
|
+
close: hoverCloseDelay,
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
const focus = useFocus(context, {
|
|
69
|
+
enabled: triggerBy.includes("focus"),
|
|
70
|
+
});
|
|
71
|
+
const click = useClick(context, {
|
|
72
|
+
enabled: triggerBy.includes("click"),
|
|
73
|
+
});
|
|
74
|
+
const handleClose = React.useCallback(() => {
|
|
75
|
+
setIsOpen(false);
|
|
76
|
+
}, []);
|
|
77
|
+
//close on escape
|
|
78
|
+
const dismiss = useDismiss(context);
|
|
79
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, hover, focus, click]);
|
|
80
|
+
return (React.createElement(React.Fragment, null,
|
|
81
|
+
React.createElement("div", { className: e("anchor"), ref: refs.setReference, ...getReferenceProps() }, anchor),
|
|
82
|
+
isTooltipVisible ? (React.createElement(FloatingPortal, null,
|
|
83
|
+
React.createElement(ConditionalScopedThemeProvider, null,
|
|
84
|
+
React.createElement("div", { className: b({ width: width === "auto" ? "auto" : false }), ref: refs.setFloating, style: {
|
|
85
|
+
zIndex,
|
|
86
|
+
...floatingStyles,
|
|
87
|
+
width: width === "auto" ? triggerDimensions.width : width,
|
|
88
|
+
}, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, role: accessibilityConfig?.role ?? "tooltip", ...getFloatingProps() },
|
|
89
|
+
typeof content === "function" ? content({ onClose: handleClose }) : content,
|
|
90
|
+
showArrow ? (React.createElement(FloatingArrow, { staticOffset: computeArrowOffset(arrowPlacement, floatingDimensions, !middlewareData?.flip?.index, theme), className: e("arrow"), ref: arrowRef, tipRadius: 1, context: context, height: ARROW_HEIGHT, width: ARROW_WIDTH })) : null)))) : null));
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=UiTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UiTooltip.js","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/UiTooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Placement } from "@floating-ui/react";
|
|
2
|
+
export declare const ARROW_HEIGHT = 6;
|
|
3
|
+
export declare const ARROW_WIDTH = 12;
|
|
4
|
+
export declare const DEFAULT_BORDER_RADIUS = 3;
|
|
5
|
+
export declare const ADDITIONAL_ARROW_EDGE_OFFSET = 2;
|
|
6
|
+
export declare const SHOW_DELAY = 425;
|
|
7
|
+
export declare const HIDE_DELAY = 200;
|
|
8
|
+
export declare const oppositeSides: Partial<Record<Placement, Placement>>;
|
|
9
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAE9C,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,eAAO,MAAM,UAAU,MAAM,CAAC;AAE9B,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAK/D,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
|
2
|
+
export const ARROW_HEIGHT = 6;
|
|
3
|
+
export const ARROW_WIDTH = 12;
|
|
4
|
+
export const DEFAULT_BORDER_RADIUS = 3;
|
|
5
|
+
export const ADDITIONAL_ARROW_EDGE_OFFSET = 2;
|
|
6
|
+
export const SHOW_DELAY = 425;
|
|
7
|
+
export const HIDE_DELAY = 200;
|
|
8
|
+
export const oppositeSides = {
|
|
9
|
+
top: "bottom",
|
|
10
|
+
bottom: "top",
|
|
11
|
+
left: "right",
|
|
12
|
+
right: "left",
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/constants.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAIhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAC;AAC9B,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;AAC9B,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC;AAC9B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC;AAE9B,MAAM,CAAC,MAAM,aAAa,GAA0C;IAChE,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;CAChB,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { IAccessibilityConfigBase } from "../../typings/accessibility.js";
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
export type TooltipArrowPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
|
|
7
|
+
/**
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
export interface UiTooltipProps {
|
|
11
|
+
/** Position of the tooltip arrow relative to the tooltip, controls also the position of the tooltip */
|
|
12
|
+
arrowPlacement?: TooltipArrowPlacement;
|
|
13
|
+
/** Anchor element to be used as reference for the tooltip */
|
|
14
|
+
anchor: React.ReactNode;
|
|
15
|
+
/** Content to be rendered inside the tooltip */
|
|
16
|
+
content: React.ReactNode | ((args: {
|
|
17
|
+
onClose: () => void;
|
|
18
|
+
}) => React.ReactNode);
|
|
19
|
+
/** Whether tooltip should show on hover, focus or click */
|
|
20
|
+
triggerBy?: Array<"hover" | "focus" | "click">;
|
|
21
|
+
/** Delay in milliseconds before showing tooltip on hover */
|
|
22
|
+
hoverOpenDelay?: number;
|
|
23
|
+
/** Delay in milliseconds before hiding tooltip after hover out */
|
|
24
|
+
hoverCloseDelay?: number;
|
|
25
|
+
/** Whether to show the arrow pointer */
|
|
26
|
+
showArrow?: boolean;
|
|
27
|
+
/** Width of the tooltip in pixels, or 'auto' to match anchor width */
|
|
28
|
+
width?: number | "auto";
|
|
29
|
+
/** Distance in pixels between tooltip and anchor element, default is arrow height */
|
|
30
|
+
offset?: number;
|
|
31
|
+
/** Whether tooltip should automatically adjust position if it would render outside viewport */
|
|
32
|
+
optimalPlacement?: boolean;
|
|
33
|
+
/** ARIA attributes configuration for accessibility */
|
|
34
|
+
accessibilityConfig?: IAccessibilityConfigBase;
|
|
35
|
+
}
|
|
36
|
+
export type Dimensions = {
|
|
37
|
+
width: number;
|
|
38
|
+
height: number;
|
|
39
|
+
};
|
|
40
|
+
export type PlacementShift = {
|
|
41
|
+
x?: number;
|
|
42
|
+
y?: number;
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAC3B,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,CAAC;AAElB;;GAEG;AACH,MAAM,WAAW,cAAc;IAC3B,uGAAuG;IACvG,cAAc,CAAC,EAAE,qBAAqB,CAAC;IAEvC,6DAA6D;IAC7D,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEhF,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;IAE/C,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;CAClD;AAED,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/types.ts"],"names":[],"mappings":"AAAA,gCAAgC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Placement, ReferenceType } from "@floating-ui/react";
|
|
2
|
+
import { Dimensions, PlacementShift, TooltipArrowPlacement } from "./types.js";
|
|
3
|
+
import { ITheme } from "@gooddata/sdk-model";
|
|
4
|
+
export declare const getOppositeBasicPlacement: (arrowPlacement: TooltipArrowPlacement) => Placement;
|
|
5
|
+
export declare const getFlipFallbackOrder: (arrowPlacement: TooltipArrowPlacement) => Placement[];
|
|
6
|
+
export declare const getDimensionsFromRect: (rect: DOMRect | {
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
} | null) => {
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const getDimensionsFromRef: (ref: React.MutableRefObject<ReferenceType | null>) => {
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
};
|
|
17
|
+
export declare const computeTooltipShift: (arrowPlacement: TooltipArrowPlacement, floatingDimensions: Dimensions, isEnabled: boolean, theme?: ITheme) => PlacementShift;
|
|
18
|
+
export declare const computeArrowOffset: (arrowPlacement: TooltipArrowPlacement, floatingDimensions: Dimensions, isEnabled: boolean, theme?: ITheme) => number;
|
|
19
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTooltip/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAO9D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAO7C,eAAO,MAAM,yBAAyB,mBAAoB,qBAAqB,cAG9E,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAAoB,qBAAqB,gBAQzE,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI;;;CAE7F,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAS,MAAM,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC;;;CAGrF,CAAC;AAgBF,eAAO,MAAM,mBAAmB,mBACZ,qBAAqB,sBACjB,UAAU,aACnB,OAAO,UACV,MAAM,KACf,cAsBF,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBACX,qBAAqB,sBACjB,UAAU,aACnB,OAAO,UACV,MAAM,WAejB,CAAC"}
|