@gooddata/sdk-ui-kit 11.12.0-alpha.2 → 11.12.0-alpha.4
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/UiAsyncTable/UiAsyncTable/UiAsyncTableBulkActions.d.ts.map +1 -1
- package/esm/@ui/UiAsyncTable/UiAsyncTable/UiAsyncTableBulkActions.js +1 -1
- package/esm/@ui/UiAsyncTable/UiAsyncTable/UiAsyncTableBulkActions.js.map +1 -1
- package/esm/@ui/UiAsyncTable/UiAsyncTable/UiAsyncTableToolbar.d.ts.map +1 -1
- package/esm/@ui/UiAsyncTable/UiAsyncTable/UiAsyncTableToolbar.js +21 -20
- package/esm/@ui/UiAsyncTable/UiAsyncTable/UiAsyncTableToolbar.js.map +1 -1
- package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
- package/esm/@ui/UiButton/UiButton.js +1 -1
- package/esm/@ui/UiButton/UiButton.js.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.d.ts.map +1 -1
- package/esm/@ui/UiMenu/UiMenu.js +3 -2
- package/esm/@ui/UiMenu/UiMenu.js.map +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.d.ts +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.d.ts.map +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.js +1 -2
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuContentItem.js.map +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.d.ts +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.d.ts.map +1 -1
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.js +1 -2
- package/esm/@ui/UiMenu/components/defaults/DefaultUiMenuInteractiveItem.js.map +1 -1
- package/esm/@ui/UiMenu/hooks.d.ts.map +1 -1
- package/esm/@ui/UiMenu/hooks.js +2 -1
- package/esm/@ui/UiMenu/hooks.js.map +1 -1
- package/esm/@ui/UiMenu/types.d.ts +3 -2
- package/esm/@ui/UiMenu/types.d.ts.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsAllTabs.d.ts.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsAllTabs.js +22 -7
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsAllTabs.js.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsContainer.d.ts.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsContainer.js +8 -12
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsContainer.js.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.d.ts +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.d.ts.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.js +7 -5
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.js.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.d.ts.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.js +11 -3
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.js.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.d.ts.map +1 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.js +2 -1
- package/esm/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.js.map +1 -1
- package/esm/@ui/UiTabs/types.d.ts +6 -3
- package/esm/@ui/UiTabs/types.d.ts.map +1 -1
- package/esm/@ui/UiTabs/useTabsKeyboardNavigation.d.ts +20 -0
- package/esm/@ui/UiTabs/useTabsKeyboardNavigation.d.ts.map +1 -0
- package/esm/@ui/UiTabs/useTabsKeyboardNavigation.js +64 -0
- package/esm/@ui/UiTabs/useTabsKeyboardNavigation.js.map +1 -0
- package/esm/Dropdown/DropdownInvertableSelect.d.ts +17 -1
- package/esm/Dropdown/DropdownInvertableSelect.d.ts.map +1 -1
- package/esm/Dropdown/DropdownInvertableSelect.js +8 -4
- package/esm/Dropdown/DropdownInvertableSelect.js.map +1 -1
- package/esm/List/InvertableSelect/InvertableSelectItem.d.ts +2 -1
- package/esm/List/InvertableSelect/InvertableSelectItem.d.ts.map +1 -1
- package/esm/List/InvertableSelect/InvertableSelectItem.js +2 -2
- package/esm/List/InvertableSelect/InvertableSelectItem.js.map +1 -1
- package/esm/Overlay/Overlay.d.ts.map +1 -1
- package/esm/Overlay/Overlay.js +12 -10
- package/esm/Overlay/Overlay.js.map +1 -1
- package/esm/sdk-ui-kit.d.ts +30 -8
- package/package.json +9 -9
- package/src/@ui/UiAsyncTable/asyncTable.scss +32 -24
- package/src/@ui/UiButton/UiButton.scss +3 -0
- package/src/@ui/UiMenu/UiMenu.scss +40 -28
- package/src/@ui/UiTabs/UiTabs.scss +15 -5
- package/styles/css/main.css +75 -54
- package/styles/css/main.css.map +1 -1
|
@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useCallback, useEffect } from "react";
|
|
4
4
|
import { useCombineRefs } from "@gooddata/sdk-ui";
|
|
5
5
|
import { useFocusWithinContainer } from "../../hooks/useFocusWithinContainer.js";
|
|
6
|
-
import { useListWithActionsKeyboardNavigation } from "../../hooks/useListWithActionsKeyboardNavigation.js";
|
|
7
6
|
import { ScopedIdStore, useScopedIdStoreValue } from "../../hooks/useScopedId.js";
|
|
8
7
|
import { UiTabsBem } from "../bem.js";
|
|
9
8
|
import { getTypedUiTabsContextStore } from "../context.js";
|
|
9
|
+
import { useTabsKeyboardNavigation } from "../useTabsKeyboardNavigation.js";
|
|
10
10
|
/**
|
|
11
11
|
* @internal
|
|
12
12
|
*/
|
|
@@ -24,21 +24,16 @@ export function DefaultUiTabsContainer(_props) {
|
|
|
24
24
|
"disableBottomBorder",
|
|
25
25
|
"isOverflowing",
|
|
26
26
|
]);
|
|
27
|
-
const handleSelectTab = useCallback((tab) =>
|
|
27
|
+
const handleSelectTab = useCallback((tab) => {
|
|
28
28
|
onTabSelect(tab);
|
|
29
29
|
}, [onTabSelect]);
|
|
30
|
-
const {
|
|
30
|
+
const { onKeyDown, focusedItem } = useTabsKeyboardNavigation({
|
|
31
31
|
items: tabs,
|
|
32
|
-
|
|
33
|
-
actionHandlers: {
|
|
34
|
-
selectItem: handleSelectTab,
|
|
35
|
-
selectTabActions: () => undefined,
|
|
36
|
-
},
|
|
37
|
-
isSimple: true,
|
|
32
|
+
onSelect: handleSelectTab,
|
|
38
33
|
focusedIndex: tabs.findIndex((t) => t.id === selectedTabId) ?? 0,
|
|
39
34
|
});
|
|
40
35
|
const scopedIdStoreValue = useScopedIdStoreValue((item) => item?.id);
|
|
41
|
-
const { containerRef: focusContainerRef } = useFocusWithinContainer(scopedIdStoreValue.makeId({ item: focusedItem, specifier:
|
|
36
|
+
const { containerRef: focusContainerRef } = useFocusWithinContainer(scopedIdStoreValue.makeId({ item: focusedItem, specifier: "tab" }) ?? "");
|
|
42
37
|
const focusedItemContainerId = scopedIdStoreValue.makeId({
|
|
43
38
|
item: focusedItem,
|
|
44
39
|
specifier: "tab-scroll-target",
|
|
@@ -48,10 +43,11 @@ export function DefaultUiTabsContainer(_props) {
|
|
|
48
43
|
.getElementById(focusedItemContainerId)
|
|
49
44
|
?.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
|
|
50
45
|
}, [focusedItemContainerId, selectedTabId, isOverflowing]);
|
|
51
|
-
return (_jsxs("div", { className: UiTabsBem.b({ size, overflow: true, "disable-border": disableBottomBorder }), children: [_jsx("div", { className: UiTabsBem.e("container"), ref: useCombineRefs(resizeContainerRef, focusContainerRef), onKeyDown:
|
|
46
|
+
return (_jsxs("div", { className: UiTabsBem.b({ size, overflow: true, "disable-border": disableBottomBorder }), children: [_jsx("div", { className: UiTabsBem.e("container"), ref: useCombineRefs(resizeContainerRef, focusContainerRef), onKeyDown: onKeyDown, id: scopedIdStoreValue.containerId, tabIndex: -1, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, role: accessibilityConfig?.role, children: _jsx(ScopedIdStore, { value: scopedIdStoreValue, children: tabs.map((tab) => {
|
|
52
47
|
const isSelected = selectedTabId === tab.id;
|
|
53
48
|
const onSelect = () => onTabSelect(tab);
|
|
54
|
-
|
|
49
|
+
const isFocused = focusedItem === tab;
|
|
50
|
+
return (_jsx(Tab, { tab: tab, isSelected: isSelected, isFocused: isFocused, onSelect: onSelect }, tab.id));
|
|
55
51
|
}) }) }), _jsx(AllTabs, {})] }));
|
|
56
52
|
}
|
|
57
53
|
//# sourceMappingURL=DefaultUiTabsContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsContainer.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsContainer.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAEhC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsContainer.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsContainer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,5 +3,5 @@ import { IUiTabComponentProps } from "../types.js";
|
|
|
3
3
|
/**
|
|
4
4
|
* @internal
|
|
5
5
|
*/
|
|
6
|
-
export declare function DefaultUiTabsTab<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject>({ tab, isSelected, onSelect,
|
|
6
|
+
export declare function DefaultUiTabsTab<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject>({ tab, isSelected, onSelect, isFocused }: IUiTabComponentProps<"Tab", TTabProps, TTabActionProps>): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
//# sourceMappingURL=DefaultUiTabsTab.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsTab.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsTab.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAM1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,wBAAgB,gBAAgB,CAC5B,SAAS,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EAChD,eAAe,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EACxD,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,CAAC,KAAK,EAAE,SAAS,EAAE,eAAe,CAAC,2CA4ElG"}
|
|
@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
// (C) 2025 GoodData Corporation
|
|
3
3
|
import { useCallback, useState } from "react";
|
|
4
4
|
import { stringUtils } from "@gooddata/util";
|
|
5
|
-
import { SELECT_ITEM_ACTION } from "../../hooks/useListWithActionsKeyboardNavigation.js";
|
|
6
5
|
import { ScopedIdStore } from "../../hooks/useScopedId.js";
|
|
7
6
|
import { UiTooltip } from "../../UiTooltip/UiTooltip.js";
|
|
8
7
|
import { UiTabsBem } from "../bem.js";
|
|
@@ -10,7 +9,7 @@ import { getTypedUiTabsContextStore } from "../context.js";
|
|
|
10
9
|
/**
|
|
11
10
|
* @internal
|
|
12
11
|
*/
|
|
13
|
-
export function DefaultUiTabsTab({ tab, isSelected, onSelect,
|
|
12
|
+
export function DefaultUiTabsTab({ tab, isSelected, onSelect, isFocused }) {
|
|
14
13
|
const store = getTypedUiTabsContextStore();
|
|
15
14
|
const { accessibilityConfig, TabValue, TabActions, maxLabelLength } = store.useContextStoreValues([
|
|
16
15
|
"accessibilityConfig",
|
|
@@ -22,12 +21,15 @@ export function DefaultUiTabsTab({ tab, isSelected, onSelect, focusedAction }) {
|
|
|
22
21
|
const isOverflowing = tab.label.length > maxLabelLength;
|
|
23
22
|
const [isActionsOpen, setIsActionsOpen] = useState(false);
|
|
24
23
|
const handleToggleActionsOpen = useCallback((desiredState) => setIsActionsOpen((wasOpen) => desiredState ?? !wasOpen), [setIsActionsOpen]);
|
|
25
|
-
|
|
24
|
+
// When this tab is focused, both tab button and actions are tabbable (tabIndex=0)
|
|
25
|
+
// This allows natural Tab key navigation from tab button to actions button
|
|
26
|
+
const tabIndex = isFocused ? 0 : -1;
|
|
27
|
+
const tabButton = (_jsx("button", { className: UiTabsBem.e("item", { selected: isSelected }), onClick: onSelect, role: accessibilityConfig?.tabRole, "aria-selected": isSelected, "aria-label": tab.label, tabIndex: tabIndex, id: makeId?.({ item: tab, specifier: "tab" }), "data-testid": `s-tab-${stringUtils.simplifyText(tab.label)}`, children: _jsx(TabValue, { tab: tab, isSelected: isSelected, location: "tabs" }) }));
|
|
26
28
|
return (_jsxs("div", { className: UiTabsBem.e("tab-wrapper", {
|
|
27
29
|
selected: isSelected,
|
|
28
30
|
variant: tab.variant ?? "default",
|
|
29
|
-
focused:
|
|
31
|
+
focused: isFocused,
|
|
30
32
|
"actions-open": isActionsOpen,
|
|
31
|
-
}), children: [_jsx("div", { className: UiTabsBem.e("tab-scroll-target"), id: makeId?.({ item: tab, specifier: "tab-scroll-target" }) }), isOverflowing ? (_jsx(UiTooltip, { anchor: tabButton, content: tab.label, triggerBy: ["hover", "focus"], arrowPlacement: "top", optimalPlacement: true }, tab.id)) : (tabButton), _jsx("div", { className: UiTabsBem.e("tabs-actions"), children: _jsx(TabActions, { tab: tab, location: "tabs", id: makeId?.({ item: tab, specifier: "selectTabActions" }), tabIndex:
|
|
33
|
+
}), children: [_jsx("div", { className: UiTabsBem.e("tab-scroll-target"), id: makeId?.({ item: tab, specifier: "tab-scroll-target" }) }), isOverflowing ? (_jsx(UiTooltip, { anchor: tabButton, content: tab.label, triggerBy: ["hover", "focus"], arrowPlacement: "top", optimalPlacement: true }, tab.id)) : (tabButton), _jsx("div", { className: UiTabsBem.e("tabs-actions"), id: makeId?.({ item: tab, specifier: "actions" }), children: _jsx(TabActions, { tab: tab, location: "tabs", id: makeId?.({ item: tab, specifier: "selectTabActions" }), tabIndex: tabIndex, isOpen: isActionsOpen, onToggleOpen: handleToggleActionsOpen }) })] }));
|
|
32
34
|
}
|
|
33
35
|
//# sourceMappingURL=DefaultUiTabsTab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsTab.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAEhC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsTab.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTab.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAEhC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAG9B,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAA2D;IAC/F,MAAM,KAAK,GAAG,0BAA0B,EAA8B,CAAC;IACvE,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,qBAAqB,CAAC;QAC9F,qBAAqB;QACrB,UAAU;QACV,YAAY;QACZ,gBAAgB;KACnB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1E,MAAM,aAAa,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC;IAExD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,uBAAuB,GAAG,WAAW,CACvC,CAAC,YAAsB,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,YAAY,IAAI,CAAC,OAAO,CAAC,EACnF,CAAC,gBAAgB,CAAC,CACrB,CAAC;IAEF,kFAAkF;IAClF,2EAA2E;IAC3E,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,SAAS,GAAG,CACd,iBACI,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EACxD,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,mBAAmB,EAAE,OAAO,mBACnB,UAAU,gBACb,GAAG,CAAC,KAAK,EACrB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,iBAChC,SAAS,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,YAE3D,KAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,GAAI,GAC3D,CACZ,CAAC;IAEF,OAAO,CACH,eACI,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE;YAClC,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,SAAS;YACjC,OAAO,EAAE,SAAS;YAClB,cAAc,EAAE,aAAa;SAChC,CAAC,aAEF,cACI,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAC3C,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,GAC7D,EACD,aAAa,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IAEN,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,GAAG,CAAC,KAAK,EAClB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAC7B,cAAc,EAAC,KAAK,EACpB,gBAAgB,UALX,GAAG,CAAC,EAAE,CAMb,CACL,CAAC,CAAC,CAAC,CACA,SAAS,CACZ,EAED,cAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,YAC1F,KAAC,UAAU,IACP,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,EAC1D,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,aAAa,EACrB,YAAY,EAAE,uBAAuB,GACvC,GACA,IACJ,CACT,CAAC;AACN,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsTabActions.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAS7C,OAAO,EAAgB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AASjE;;GAEG;AACH,wBAAgB,uBAAuB,CACnC,SAAS,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EAChD,eAAe,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EACxD,EACE,GAAG,EACH,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,MAAM,EACN,YAAY,GACf,EAAE,oBAAoB,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsTabActions.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAS7C,OAAO,EAAgB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AASjE;;GAEG;AACH,wBAAgB,uBAAuB,CACnC,SAAS,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EAChD,eAAe,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EACxD,EACE,GAAG,EACH,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,MAAM,EACN,YAAY,GACf,EAAE,oBAAoB,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,CAAC,2CA+GhE"}
|
|
@@ -16,7 +16,8 @@ export function DefaultUiTabsTabActions({ tab, location, id, tabIndex, isOpen, o
|
|
|
16
16
|
"TabActionsButton",
|
|
17
17
|
"onActionTriggered",
|
|
18
18
|
]);
|
|
19
|
-
const tabElementId = useScopedId(tab, "
|
|
19
|
+
const tabElementId = useScopedId(tab, "tab-scroll-target");
|
|
20
|
+
const tabActionsId = useScopedId(tab, "actions");
|
|
20
21
|
const menuItems = useMemo(() => tab.actions?.map((action) => {
|
|
21
22
|
return isSeparator(action)
|
|
22
23
|
? action
|
|
@@ -44,11 +45,18 @@ export function DefaultUiTabsTabActions({ tab, location, id, tabIndex, isOpen, o
|
|
|
44
45
|
block: "nearest",
|
|
45
46
|
behavior: "instant",
|
|
46
47
|
});
|
|
48
|
+
// The second scrollIntoView is needed to make sure the actions end up visible
|
|
49
|
+
// if the tab is larger than the tablist element. This can happen for very long names.
|
|
50
|
+
document.getElementById(tabActionsId)?.scrollIntoView({
|
|
51
|
+
inline: "nearest",
|
|
52
|
+
block: "nearest",
|
|
53
|
+
behavior: "instant",
|
|
54
|
+
});
|
|
47
55
|
}, 50);
|
|
48
56
|
}),
|
|
49
57
|
},
|
|
50
58
|
};
|
|
51
|
-
}) ?? [], [tab, onActionTriggered, location, tabElementId,
|
|
59
|
+
}) ?? [], [tab, onActionTriggered, location, onToggleOpen, tabElementId, tabActionsId]);
|
|
52
60
|
const handleItemSelected = useCallback((item) => {
|
|
53
61
|
if (item.type !== "interactive") {
|
|
54
62
|
return;
|
|
@@ -58,7 +66,7 @@ export function DefaultUiTabsTabActions({ tab, location, id, tabIndex, isOpen, o
|
|
|
58
66
|
if (menuItems.length === 0) {
|
|
59
67
|
return null;
|
|
60
68
|
}
|
|
61
|
-
return (_jsx(Dropdown, { className: UiTabsBem.e("actions-wrapper", { location }), renderButton: ({ toggleDropdown, isOpen, ariaAttributes }) => (_jsx(TabActionsButton, { tab: tab, isOpen: isOpen, location: location, onClick: toggleDropdown, ariaAttributes: ariaAttributes, id: id, tabIndex: tabIndex })), renderBody: ({ ariaAttributes, closeDropdown }) => (_jsx(UiMenu, { items: menuItems, onSelect: handleItemSelected, onClose: closeDropdown, shouldCloseOnSelect: false, ariaAttributes: ariaAttributes, maxWidth: 160, maxHeight: 400 })), autofocusOnOpen: true, shouldTrapFocus: true, alignPoints: [{ align: "bl tl" }, { align: "br tr" }], closeOnEscape: true, closeOnOutsideClick: true, accessibilityConfig: {
|
|
69
|
+
return (_jsx(Dropdown, { className: UiTabsBem.e("actions-wrapper", { location }), renderButton: ({ toggleDropdown, isOpen, ariaAttributes }) => (_jsx(TabActionsButton, { tab: tab, isOpen: isOpen, location: location, onClick: toggleDropdown, ariaAttributes: ariaAttributes, id: id, tabIndex: tabIndex })), renderBody: ({ ariaAttributes, closeDropdown }) => (_jsx(UiMenu, { items: menuItems, onSelect: handleItemSelected, onClose: closeDropdown, shouldCloseOnSelect: false, ariaAttributes: ariaAttributes, maxWidth: 160, maxHeight: 400, size: "small", containerBottomPadding: "small", containerTopPadding: "small" })), autofocusOnOpen: true, shouldTrapFocus: true, alignPoints: [{ align: "bl tl" }, { align: "br tr" }], closeOnEscape: true, closeOnOutsideClick: true, accessibilityConfig: {
|
|
62
70
|
triggerRole: "button",
|
|
63
71
|
popupRole: "listbox",
|
|
64
72
|
}, isOpen: isOpen, onToggle: onToggleOpen }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsTabActions.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAEhC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,iEAAiE,CAAC;AAE9F,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAU3D;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAGrC,EACE,GAAG,EACH,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,MAAM,EACN,YAAY,GACiD;IAC7D,MAAM,KAAK,GAAG,0BAA0B,EAA8B,CAAC;IACvE,MAAM,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC,qBAAqB,CAAC;QACxE,kBAAkB;QAClB,mBAAmB;KACtB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsTabActions.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabActions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsTabValue.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsTabValue.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,wBAAgB,qBAAqB,CACjC,SAAS,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EAChD,eAAe,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,WAAW,EACxD,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,oBAAoB,CAAC,UAAU,EAAE,SAAS,EAAE,eAAe,CAAC,2CAgBlF"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ShortenedText } from "../../../ShortenedText/index.js";
|
|
2
3
|
import { UiTabsBem } from "../bem.js";
|
|
3
4
|
import { getTypedUiTabsContextStore } from "../context.js";
|
|
4
5
|
/**
|
|
@@ -8,6 +9,6 @@ export function DefaultUiTabsTabValue({ tab, isSelected }) {
|
|
|
8
9
|
const store = getTypedUiTabsContextStore();
|
|
9
10
|
const { maxLabelLength } = store.useContextStoreValues(["maxLabelLength"]);
|
|
10
11
|
const isOverflowing = tab.label.length > maxLabelLength;
|
|
11
|
-
return (_jsx(
|
|
12
|
+
return (_jsx(ShortenedText, { className: UiTabsBem.e("label", { selected: isSelected, variant: tab.variant ?? "default" }), ellipsisPosition: "end", tagName: "div", tooltipAlignPoints: [{ align: "cl cr" }], children: isOverflowing ? tab.label.substring(0, maxLabelLength) + "…" : tab.label }));
|
|
12
13
|
}
|
|
13
14
|
//# sourceMappingURL=DefaultUiTabsTabValue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultUiTabsTabValue.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAGnC,EAAE,GAAG,EAAE,UAAU,EAAgE;IAC/E,MAAM,KAAK,GAAG,0BAA0B,EAA8B,CAAC;IACvE,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE3E,MAAM,aAAa,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC;IAExD,OAAO,CACH,
|
|
1
|
+
{"version":3,"file":"DefaultUiTabsTabValue.js","sourceRoot":"","sources":["../../../../src/@ui/UiTabs/defaultComponents/DefaultUiTabsTabValue.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAGnC,EAAE,GAAG,EAAE,UAAU,EAAgE;IAC/E,MAAM,KAAK,GAAG,0BAA0B,EAA8B,CAAC;IACvE,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE3E,MAAM,aAAa,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC;IAExD,OAAO,CACH,KAAC,aAAa,IACV,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,EAC5F,gBAAgB,EAAE,KAAK,EACvB,OAAO,EAAE,KAAK,EACd,kBAAkB,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,YAEvC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,GAC7D,CACnB,CAAC;AACN,CAAC"}
|
|
@@ -3,7 +3,6 @@ import { EmptyObject } from "@gooddata/util";
|
|
|
3
3
|
import { IDropdownButtonRenderProps } from "../../Dropdown/index.js";
|
|
4
4
|
import { IAccessibilityConfigBase } from "../../typings/accessibility.js";
|
|
5
5
|
import { SizeLarge, SizeMedium, SizeSmall } from "../@types/size.js";
|
|
6
|
-
import { SELECT_ITEM_ACTION } from "../hooks/useListWithActionsKeyboardNavigation.js";
|
|
7
6
|
import { separatorStaticItem } from "../UiListbox/defaults/DefaultUiListboxStaticItemComponent.js";
|
|
8
7
|
/**
|
|
9
8
|
* @internal
|
|
@@ -51,7 +50,11 @@ export type IUiTabComponents<TTabProps extends Record<any, any> = EmptyObject, T
|
|
|
51
50
|
tab: IUiTab<TTabProps, TTabActionProps>;
|
|
52
51
|
isSelected: boolean;
|
|
53
52
|
onSelect: () => void;
|
|
54
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Whether this tab is the currently focused tab in keyboard navigation.
|
|
55
|
+
* When true, the tab button and its actions button become tabbable (tabIndex=0).
|
|
56
|
+
*/
|
|
57
|
+
isFocused?: boolean;
|
|
55
58
|
}>;
|
|
56
59
|
TabValue: ComponentType<{
|
|
57
60
|
tab: IUiTab<TTabProps, TTabActionProps>;
|
|
@@ -102,7 +105,7 @@ export type IUiTabContext<TTabProps extends Record<any, any> = EmptyObject, TTab
|
|
|
102
105
|
isOverflowing: boolean;
|
|
103
106
|
containerRef: RefCallback<Element>;
|
|
104
107
|
onActionTriggered: (context: IUiTabActionEventContext<TTabProps, TTabActionProps>) => void;
|
|
105
|
-
useActionListener: (callback: (context: IUiTabActionEventContext) => void) => void;
|
|
108
|
+
useActionListener: (callback: (context: IUiTabActionEventContext<TTabProps, TTabActionProps>) => void) => void;
|
|
106
109
|
} & IUiTabComponents<TTabProps, TTabActionProps>;
|
|
107
110
|
/**
|
|
108
111
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTabs/types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTabs/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Simple keyboard navigation hook for horizontal tabs.
|
|
3
|
+
* - ArrowLeft/ArrowRight (or ArrowUp/ArrowDown): Navigate between tabs
|
|
4
|
+
* - Home/End: Jump to first/last tab
|
|
5
|
+
* - Enter/Space: Select the focused tab
|
|
6
|
+
* - Tab key works naturally to move to actions button when focused
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
export declare function useTabsKeyboardNavigation<Item>({ items, onSelect, focusedIndex: focusedIndexProp, }: {
|
|
11
|
+
items: Item[];
|
|
12
|
+
onSelect: (item: Item) => void;
|
|
13
|
+
focusedIndex?: number;
|
|
14
|
+
}): {
|
|
15
|
+
onKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
|
|
16
|
+
focusedItem: Item;
|
|
17
|
+
focusedIndex: number;
|
|
18
|
+
setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=useTabsKeyboardNavigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTabsKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTabs/useTabsKeyboardNavigation.ts"],"names":[],"mappings":"AAQA;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,EAC5C,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,gBAAgB,GACjC,EAAE;IACC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;;;;;EA+DA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// (C) 2025 GoodData Corporation
|
|
2
|
+
import { useEffect, useMemo, useState } from "react";
|
|
3
|
+
import { useAutoupdateRef } from "@gooddata/sdk-ui";
|
|
4
|
+
import { makeTabsKeyboardNavigation } from "../@utils/keyboardNavigation.js";
|
|
5
|
+
/**
|
|
6
|
+
* Simple keyboard navigation hook for horizontal tabs.
|
|
7
|
+
* - ArrowLeft/ArrowRight (or ArrowUp/ArrowDown): Navigate between tabs
|
|
8
|
+
* - Home/End: Jump to first/last tab
|
|
9
|
+
* - Enter/Space: Select the focused tab
|
|
10
|
+
* - Tab key works naturally to move to actions button when focused
|
|
11
|
+
*
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
export function useTabsKeyboardNavigation({ items, onSelect, focusedIndex: focusedIndexProp, }) {
|
|
15
|
+
const [focusedIndex, setFocusedIndex] = useState(focusedIndexProp ?? 0);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (focusedIndexProp !== undefined) {
|
|
18
|
+
setFocusedIndex(focusedIndexProp);
|
|
19
|
+
}
|
|
20
|
+
}, [focusedIndexProp]);
|
|
21
|
+
// If the items change and we're suddenly focusing on a nonexistent item
|
|
22
|
+
if (focusedIndex > items.length - 1) {
|
|
23
|
+
setFocusedIndex(Math.max(0, items.length - 1));
|
|
24
|
+
}
|
|
25
|
+
const focusedItem = items[focusedIndex];
|
|
26
|
+
const depsRef = useAutoupdateRef({
|
|
27
|
+
items,
|
|
28
|
+
focusedIndex,
|
|
29
|
+
focusedItem,
|
|
30
|
+
onSelect,
|
|
31
|
+
setFocusedIndex,
|
|
32
|
+
});
|
|
33
|
+
const onKeyDown = useMemo(() => makeTabsKeyboardNavigation({
|
|
34
|
+
onFocusPrevious: () => {
|
|
35
|
+
const { setFocusedIndex, items } = depsRef.current;
|
|
36
|
+
setFocusedIndex((currentIndex) => currentIndex === 0 ? items.length - 1 : currentIndex - 1);
|
|
37
|
+
},
|
|
38
|
+
onFocusNext: () => {
|
|
39
|
+
const { setFocusedIndex, items } = depsRef.current;
|
|
40
|
+
setFocusedIndex((currentIndex) => currentIndex === items.length - 1 ? 0 : currentIndex + 1);
|
|
41
|
+
},
|
|
42
|
+
onFocusFirst: () => {
|
|
43
|
+
const { setFocusedIndex } = depsRef.current;
|
|
44
|
+
setFocusedIndex(0);
|
|
45
|
+
},
|
|
46
|
+
onFocusLast: () => {
|
|
47
|
+
const { setFocusedIndex, items } = depsRef.current;
|
|
48
|
+
setFocusedIndex(items.length - 1);
|
|
49
|
+
},
|
|
50
|
+
onSelect: () => {
|
|
51
|
+
const { focusedItem, onSelect } = depsRef.current;
|
|
52
|
+
if (focusedItem) {
|
|
53
|
+
onSelect(focusedItem);
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
}), [depsRef]);
|
|
57
|
+
return {
|
|
58
|
+
onKeyDown,
|
|
59
|
+
focusedItem,
|
|
60
|
+
focusedIndex,
|
|
61
|
+
setFocusedIndex,
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
//# sourceMappingURL=useTabsKeyboardNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTabsKeyboardNavigation.js","sourceRoot":"","sources":["../../../src/@ui/UiTabs/useTabsKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE7E;;;;;;;;GAQG;AACH,MAAM,UAAU,yBAAyB,CAAO,EAC5C,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,gBAAgB,GAKjC;IACG,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,gBAAgB,IAAI,CAAC,CAAC,CAAC;IAEhF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACjC,eAAe,CAAC,gBAAgB,CAAC,CAAC;QACtC,CAAC;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,wEAAwE;IACxE,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAClC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAExC,MAAM,OAAO,GAAG,gBAAgB,CAAC;QAC7B,KAAK;QACL,YAAY;QACZ,WAAW;QACX,QAAQ;QACR,eAAe;KAClB,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,OAAO,CACrB,GAAG,EAAE,CACD,0BAA0B,CAAC;QACvB,eAAe,EAAE,GAAG,EAAE;YAClB,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;YACnD,eAAe,CAAC,CAAC,YAAY,EAAE,EAAE,CAC7B,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAC3D,CAAC;QACN,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YACd,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;YACnD,eAAe,CAAC,CAAC,YAAY,EAAE,EAAE,CAC7B,YAAY,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAC3D,CAAC;QACN,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACf,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;YAC5C,eAAe,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YACd,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;YACnD,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtC,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE;YACX,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;YAClD,IAAI,WAAW,EAAE,CAAC;gBACd,QAAQ,CAAC,WAAW,CAAC,CAAC;YAC1B,CAAC;QACL,CAAC;KACJ,CAAC,EACN,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,OAAO;QACH,SAAS;QACT,WAAW;QACX,YAAY;QACZ,eAAe;KAClB,CAAC;AACN,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from "react";
|
|
2
2
|
import { type IDropdownBodyRenderProps, type IDropdownButtonRenderProps } from "../Dropdown/Dropdown.js";
|
|
3
|
-
import { type IInvertableSelectRenderNoDataProps, type IInvertableSelectRenderSearchBarProps, type IInvertableSelectRenderStatusBarProps } from "../List/InvertableSelect/InvertableSelect.js";
|
|
3
|
+
import { IInvertableSelectRenderItemProps, type IInvertableSelectRenderNoDataProps, type IInvertableSelectRenderSearchBarProps, type IInvertableSelectRenderStatusBarProps } from "../List/InvertableSelect/InvertableSelect.js";
|
|
4
4
|
import { OverlayPositionType } from "../typings/overlay.js";
|
|
5
5
|
import type { IAlignPoint } from "../typings/positioning.js";
|
|
6
6
|
/**
|
|
@@ -79,10 +79,26 @@ export interface IDropdownInvertableSelectProps<T> {
|
|
|
79
79
|
* Render function for the actions.
|
|
80
80
|
*/
|
|
81
81
|
renderActions?: (props: IDropdownBodyRenderProps) => ReactElement;
|
|
82
|
+
/**
|
|
83
|
+
* Render function for the item.
|
|
84
|
+
*/
|
|
85
|
+
renderItem?: (props: IInvertableSelectRenderItemProps<T>) => ReactElement;
|
|
82
86
|
/**
|
|
83
87
|
* Overlay position type.
|
|
84
88
|
*/
|
|
85
89
|
overlayPositionType?: OverlayPositionType;
|
|
90
|
+
/**
|
|
91
|
+
* On open handler
|
|
92
|
+
*/
|
|
93
|
+
onOpen?: () => void;
|
|
94
|
+
/**
|
|
95
|
+
* On close handler
|
|
96
|
+
*/
|
|
97
|
+
onClose?: () => void;
|
|
98
|
+
/**
|
|
99
|
+
* Close on escape
|
|
100
|
+
*/
|
|
101
|
+
closeOnEscape?: boolean;
|
|
86
102
|
}
|
|
87
103
|
/**
|
|
88
104
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownInvertableSelect.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownInvertableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAMnE,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACH,KAAK,kCAAkC,EACvC,KAAK,qCAAqC,EAC1C,KAAK,qCAAqC,EAE7C,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,8BAA8B,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAElC;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAE5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,qCAAqC,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IAEpF;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,qCAAqC,KAAK,YAAY,CAAC;IAEjF;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,kCAAkC,KAAK,YAAY,CAAC;IAE3E;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;IAEhE;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,YAAY,CAAC;IAElE;;OAEG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownInvertableSelect.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownInvertableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAMnE,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACH,gCAAgC,EAChC,KAAK,kCAAkC,EACvC,KAAK,qCAAqC,EAC1C,KAAK,qCAAqC,EAE7C,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,8BAA8B,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAElC;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAE5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,qCAAqC,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IAEpF;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,qCAAqC,KAAK,YAAY,CAAC;IAEjF;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,kCAAkC,KAAK,YAAY,CAAC;IAE3E;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;IAEhE;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,YAAY,CAAC;IAElE;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IAE1E;;OAEG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAE1C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAWD;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,2CA0InF;AAED,MAAM,WAAW,qCAAqC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}
|
|
@@ -20,7 +20,7 @@ const messages = defineMessages({
|
|
|
20
20
|
* @internal
|
|
21
21
|
*/
|
|
22
22
|
export function DropdownInvertableSelect(props) {
|
|
23
|
-
const { title, options, onChange, className, bodyClassName, width = 240, alignPoints, getItemTitle, getItemKey, initialValue, initialIsInverted, initialSearchString, overlayPositionType, header, renderStatusBar, renderSearchBar, renderNoData, renderActions, } = props;
|
|
23
|
+
const { title, options, onChange, onOpen, onClose, closeOnEscape, className, bodyClassName, width = 240, alignPoints, getItemTitle, getItemKey, initialValue, initialIsInverted, initialSearchString, overlayPositionType, header, renderStatusBar, renderSearchBar, renderNoData, renderActions, renderItem, } = props;
|
|
24
24
|
const [searchString, setSearchString] = useState(initialSearchString ?? "");
|
|
25
25
|
const [committedSelection, setCommitedSelection] = useState(initialValue ?? []);
|
|
26
26
|
const [committedIsInverted, setCommitedIsInverted] = useState(initialIsInverted ?? true);
|
|
@@ -53,14 +53,18 @@ export function DropdownInvertableSelect(props) {
|
|
|
53
53
|
(({ toggleDropdown }) => (_jsx(UiButton, { label: buttonText, badgeAfter: count, onClick: toggleDropdown, size: "small", variant: "secondary", iconAfter: "navigateDown" }))));
|
|
54
54
|
}, [buttonText, count, props.renderButton]);
|
|
55
55
|
return (_jsx(Dropdown, { className: className, alignPoints: alignPoints, overlayPositionType: overlayPositionType, onOpenStateChanged: (isOpen) => {
|
|
56
|
-
if (
|
|
56
|
+
if (isOpen) {
|
|
57
|
+
onOpen?.();
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
57
60
|
resetTemporarySelection();
|
|
61
|
+
onClose?.();
|
|
58
62
|
}
|
|
59
|
-
}, renderButton: renderButton, renderBody: (bodyProps) => {
|
|
63
|
+
}, closeOnEscape: closeOnEscape, renderButton: renderButton, renderBody: (bodyProps) => {
|
|
60
64
|
const { closeDropdown } = bodyProps;
|
|
61
65
|
const isEmptySelection = !isInverted && selection.length === 0;
|
|
62
66
|
const isSelectionEqual = isEqual(selection, committedSelection) && isInverted === committedIsInverted;
|
|
63
|
-
return (_jsxs(_Fragment, { children: [header, _jsx(InvertableSelect, { width: width, className: bodyClassName, items: filteredOptions, getItemTitle: getItemTitle, getItemKey: getItemKey, isInverted: isInverted, searchString: searchString, onSearch: onSearch, selectedItems: selection, onSelect: onSelect, renderStatusBar: renderStatusBar, renderSearchBar: renderSearchBar, renderNoData: renderNoData, totalItemsCount: filteredOptions.length }), renderActions?.(bodyProps) ?? (_jsx(DropdownInvertableSelectActions, { onApply: () => {
|
|
67
|
+
return (_jsxs(_Fragment, { children: [header, _jsx(InvertableSelect, { width: width, className: bodyClassName, items: filteredOptions, getItemTitle: getItemTitle, getItemKey: getItemKey, isInverted: isInverted, searchString: searchString, onSearch: onSearch, selectedItems: selection, onSelect: onSelect, renderStatusBar: renderStatusBar, renderSearchBar: renderSearchBar, renderNoData: renderNoData, renderItem: renderItem, totalItemsCount: filteredOptions.length }), renderActions?.(bodyProps) ?? (_jsx(DropdownInvertableSelectActions, { onApply: () => {
|
|
64
68
|
onApply();
|
|
65
69
|
closeDropdown();
|
|
66
70
|
}, onCancel: () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownInvertableSelect.js","sourceRoot":"","sources":["../../src/Dropdown/DropdownInvertableSelect.tsx"],"names":[],"mappings":";AAAA,qCAAqC;AAErC,OAAO,EAA2B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EACH,QAAQ,GAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,
|
|
1
|
+
{"version":3,"file":"DropdownInvertableSelect.js","sourceRoot":"","sources":["../../src/Dropdown/DropdownInvertableSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,11 +17,12 @@ export interface IInvertableSelectItem {
|
|
|
17
17
|
onOnly?: () => void;
|
|
18
18
|
onClick?: () => void;
|
|
19
19
|
renderOnly?: (props: IInvertableSelectItemRenderOnlyProps) => ReactElement;
|
|
20
|
+
renderRight?: () => ReactElement | null;
|
|
20
21
|
isDisabled?: boolean;
|
|
21
22
|
listRef?: RefObject<HTMLElement>;
|
|
22
23
|
}
|
|
23
24
|
/**
|
|
24
25
|
* @internal
|
|
25
26
|
*/
|
|
26
|
-
export declare function InvertableSelectItem({ title, onClick, onMouseOver, onMouseOut, isSelected, onOnly, renderOnly, icon, isDisabled, }: IInvertableSelectItem): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function InvertableSelectItem({ title, onClick, onMouseOver, onMouseOut, isSelected, onOnly, renderOnly, renderRight, icon, isDisabled, }: IInvertableSelectItem): import("react/jsx-runtime").JSX.Element;
|
|
27
28
|
//# sourceMappingURL=InvertableSelectItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InvertableSelectItem.d.ts","sourceRoot":"","sources":["../../../src/List/InvertableSelect/InvertableSelectItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,YAAY,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAOzE;;GAEG;AACH,MAAM,WAAW,oCAAoC;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,oCAAoC,KAAK,YAAY,CAAC;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,UAAU,EACV,MAAM,EACN,UAAU,EACV,IAAI,EACJ,UAAU,GACb,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"InvertableSelectItem.d.ts","sourceRoot":"","sources":["../../../src/List/InvertableSelect/InvertableSelectItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,YAAY,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAOzE;;GAEG;AACH,MAAM,WAAW,oCAAoC;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,oCAAoC,KAAK,YAAY,CAAC;IAC3E,WAAW,CAAC,EAAE,MAAM,YAAY,GAAG,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,UAAU,EACV,MAAM,EACN,UAAU,EACV,WAAW,EACX,IAAI,EACJ,UAAU,GACb,EAAE,qBAAqB,2CA4CvB"}
|
|
@@ -7,7 +7,7 @@ import { stringUtils } from "@gooddata/util";
|
|
|
7
7
|
/**
|
|
8
8
|
* @internal
|
|
9
9
|
*/
|
|
10
|
-
export function InvertableSelectItem({ title, onClick, onMouseOver, onMouseOut, isSelected, onOnly, renderOnly, icon, isDisabled, }) {
|
|
10
|
+
export function InvertableSelectItem({ title, onClick, onMouseOver, onMouseOut, isSelected, onOnly, renderOnly, renderRight, icon, isDisabled, }) {
|
|
11
11
|
const handleOnly = useCallback((e) => {
|
|
12
12
|
if (isDisabled) {
|
|
13
13
|
return;
|
|
@@ -21,6 +21,6 @@ export function InvertableSelectItem({ title, onClick, onMouseOver, onMouseOut,
|
|
|
21
21
|
"has-only-visible": true,
|
|
22
22
|
"is-selected": isSelected,
|
|
23
23
|
"is-disabled": isDisabled,
|
|
24
|
-
}), onClick: isDisabled ? () => { } : onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, children: [_jsxs("label", { className: "input-checkbox-label", children: [_jsx("input", { type: "checkbox", className: "input-checkbox", readOnly: true, checked: isSelected, disabled: isDisabled }), icon ?? null, _jsx("span", { className: "input-label-text", children: title })] }), renderOnly?.({ onOnly: onOnly }) ?? (_jsx("span", { className: "gd-list-item-only", onClick: handleOnly, children: _jsx(FormattedMessage, { id: "gs.list.only" }) }))] }));
|
|
24
|
+
}), onClick: isDisabled ? () => { } : onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, children: [_jsxs("label", { className: "input-checkbox-label", children: [_jsx("input", { type: "checkbox", className: "input-checkbox", readOnly: true, checked: isSelected, disabled: isDisabled }), icon ?? null, _jsx("span", { className: "input-label-text", children: title })] }), renderOnly?.({ onOnly: onOnly }) ?? (_jsx("span", { className: "gd-list-item-only", onClick: handleOnly, children: _jsx(FormattedMessage, { id: "gs.list.only" }) })), renderRight?.()] }));
|
|
25
25
|
}
|
|
26
26
|
//# sourceMappingURL=InvertableSelectItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InvertableSelectItem.js","sourceRoot":"","sources":["../../../src/List/InvertableSelect/InvertableSelectItem.tsx"],"names":[],"mappings":";AAAA,qCAAqC;AAErC,OAAO,EAAuC,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"InvertableSelectItem.js","sourceRoot":"","sources":["../../../src/List/InvertableSelect/InvertableSelectItem.tsx"],"names":[],"mappings":";AAAA,qCAAqC;AAErC,OAAO,EAAuC,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA0B7C;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,UAAU,EACV,MAAM,EACN,UAAU,EACV,WAAW,EACX,IAAI,EACJ,UAAU,GACU;IACpB,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,CAA8B,EAAE,EAAE;QAC/B,IAAI,UAAU,EAAE,CAAC;YACb,OAAO;QACX,CAAC;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,EAAE,EAAE,CAAC;IACf,CAAC,EACD,CAAC,MAAM,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,OAAO,CACH,eACI,SAAS,EAAE,EAAE,CAAC;YACV,cAAc,EAAE,IAAI;YACpB,CAAC,KAAK,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,IAAI;YAC9C,kBAAkB,EAAE,IAAI;YACxB,aAAa,EAAE,UAAU;YACzB,aAAa,EAAE,UAAU;SAC5B,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EACxC,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,aAEtB,iBAAO,SAAS,EAAC,sBAAsB,aACnC,gBACI,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,QACR,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,GACtB,EACD,IAAI,IAAI,IAAI,EACb,eAAM,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAQ,IAC7C,EACP,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,IAAI,CACjC,eAAM,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,UAAU,YACnD,KAAC,gBAAgB,IAAC,EAAE,EAAC,cAAc,GAAG,GACnC,CACV,EACA,WAAW,EAAE,EAAE,IACd,CACT,CAAC;AACN,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,aAAa,EACb,SAAS,EACT,WAAW,
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,aAAa,EACb,SAAS,EACT,WAAW,EAId,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AA2B5D,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAqCtD;;GAEG;AACH,qBAAa,OAAO,CAAC,CAAC,GAAG,WAAW,CAAE,SAAQ,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC;IACpF,OAAc,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAsBrD;IAEF,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAS;IAC5B,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,aAAa,CAEb;IACR,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAAU;IACpC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAgB,WAAW,8EAAkB;IACrC,OAAO,EAAE,WAAW,CAAC,OAAO,cAAc,CAAC,CAAC;IACpD,OAAO,CAAC,QAAQ,CAA6B;gBAEjC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IA+BnB,yBAAyB,IAAI,IAAI;IAKjC,iBAAiB,IAAI,IAAI;IAazB,gCAAgC,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI;IAOnE,qBAAqB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,GAAG,OAAO;IASrF,kBAAkB,IAAI,IAAI;IAI1B,oBAAoB,IAAI,IAAI;IAkB5B,MAAM;IAgCf,KAAK,QAAO,IAAI,CAyCrB;IAEF,OAAO,CAAC,6BAA6B,CAyDnC;IAEF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,SAAS,CAAC,SAAS,IAAI,MAAM,GAAG,SAAS;IAIlC,gBAAgB,QAAO,aAAa,CA4BzC;IAEF,OAAO,CAAC,iBAAiB,CAIvB;IAEF;;;OAGG;IACH,OAAO,CAAC,eAAe,CAOrB;IAEF,OAAO,CAAC,kBAAkB,CAMxB;IAEF,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,mCAAmC;IAS3C,OAAO,CAAC,sBAAsB,CAI5B;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,kBAAkB,CAiBxB;IAEF,OAAO,CAAC,uBAAuB,CAqB7B;IAEF,OAAO,CAAC,SAAS,CAEf;IAGF,OAAO,CAAC,uBAAuB,CAK7B;IAEK,mBAAmB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAOxC,mBAAmB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAUxC,gBAAgB,QAAO,IAAI,CAMhC;IAEK,mBAAmB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAMnC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAU5C,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,UAAU,CAahB;IAEF,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,qBAAqB;CAOhC"}
|
package/esm/Overlay/Overlay.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// (C) 2020-2025 GoodData Corporation
|
|
3
|
-
import { Component, createRef,
|
|
3
|
+
import { Component, createRef, } from "react";
|
|
4
4
|
import cx from "classnames";
|
|
5
5
|
import { bindAll, debounce, isEqual, pick } from "lodash-es";
|
|
6
6
|
import isReactEqual from "react-fast-compare";
|
|
@@ -44,17 +44,19 @@ function alignExceedsThreshold(firstAlignment, secondAlignment) {
|
|
|
44
44
|
exceedsThreshold(firstAlignment.width, secondAlignment.width) ||
|
|
45
45
|
exceedsThreshold(firstAlignment.height, secondAlignment.height));
|
|
46
46
|
}
|
|
47
|
+
/**
|
|
48
|
+
* Stops React synthetic event propagation but re-dispatches native events
|
|
49
|
+
* to document and documentElement so that:
|
|
50
|
+
* - Other Overlays can detect outside clicks and close themselves
|
|
51
|
+
* - Libraries listening on document.documentElement (like fixed-data-table-2's
|
|
52
|
+
* DOMMouseMoveTracker for scrollbar drag release) receive the events
|
|
53
|
+
*/
|
|
47
54
|
const stopPropagation = (e) => {
|
|
48
55
|
e.stopPropagation();
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if (reactMajorVersion >= 17) {
|
|
54
|
-
const evt = new MouseEvent(e.nativeEvent.type, e.nativeEvent);
|
|
55
|
-
Object.defineProperty(evt, "target", { value: e.nativeEvent.target, enumerable: true });
|
|
56
|
-
document.dispatchEvent(evt);
|
|
57
|
-
}
|
|
56
|
+
const evt = new MouseEvent(e.nativeEvent.type, e.nativeEvent);
|
|
57
|
+
Object.defineProperty(evt, "target", { value: e.nativeEvent.target, enumerable: true });
|
|
58
|
+
document.dispatchEvent(evt);
|
|
59
|
+
document.documentElement.dispatchEvent(evt);
|
|
58
60
|
};
|
|
59
61
|
/**
|
|
60
62
|
* @internal
|