@gooddata/sdk-ui-kit 11.53.0-alpha.1 → 11.53.0-alpha.2
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/UiPagedVirtualList/UiPagedVirtualList.d.ts.map +1 -1
- package/esm/@ui/UiPagedVirtualList/UiPagedVirtualList.js +3 -0
- package/esm/@ui/hooks/useVirtualizerRectObserver.d.ts +12 -0
- package/esm/@ui/hooks/useVirtualizerRectObserver.d.ts.map +1 -0
- package/esm/@ui/hooks/useVirtualizerRectObserver.js +34 -0
- package/esm/Datepicker/Datepicker.d.ts +2 -4
- package/esm/Datepicker/Datepicker.d.ts.map +1 -1
- package/esm/Datepicker/Datepicker.js +4 -6
- package/esm/Dropdown/DropdownList.d.ts +7 -1
- package/esm/Dropdown/DropdownList.d.ts.map +1 -1
- package/esm/Dropdown/DropdownList.js +3 -2
- package/esm/FlexDimensions/FlexDimensions.d.ts +2 -20
- package/esm/FlexDimensions/FlexDimensions.d.ts.map +1 -1
- package/esm/FlexDimensions/FlexDimensions.js +33 -54
- package/esm/FlexDimensions/typings.d.ts +8 -0
- package/esm/FlexDimensions/typings.d.ts.map +1 -1
- package/esm/FlexDimensions/typings.js +1 -1
- package/esm/Form/Input.d.ts +2 -33
- package/esm/Form/Input.d.ts.map +1 -1
- package/esm/Form/Input.js +30 -35
- package/esm/Form/InputPure.d.ts +40 -50
- package/esm/Form/InputPure.d.ts.map +1 -1
- package/esm/Form/InputPure.js +111 -121
- package/esm/Form/InputWithNumberFormat.d.ts.map +1 -1
- package/esm/Header/Header.d.ts +1 -1
- package/esm/Header/Header.d.ts.map +1 -1
- package/esm/Header/Header.js +4 -3
- package/esm/Header/WorkspacePickerHomeFooter.d.ts +1 -3
- package/esm/Header/WorkspacePickerHomeFooter.d.ts.map +1 -1
- package/esm/Header/WorkspacePickerHomeFooter.js +6 -6
- package/esm/Header/typings.d.ts +0 -2
- package/esm/Header/typings.d.ts.map +1 -1
- package/esm/List/LegacyList.d.ts.map +1 -1
- package/esm/List/LegacyList.js +2 -20
- package/esm/List/List.d.ts.map +1 -1
- package/esm/List/List.js +2 -20
- package/esm/List/ListItem.d.ts +2 -0
- package/esm/List/ListItem.d.ts.map +1 -1
- package/esm/List/ListItem.js +2 -2
- package/esm/ParameterControl/AllowedValuesParameterControlDropdown.d.ts +22 -0
- package/esm/ParameterControl/AllowedValuesParameterControlDropdown.d.ts.map +1 -0
- package/esm/ParameterControl/AllowedValuesParameterControlDropdown.js +38 -0
- package/esm/ParameterControl/ParameterControl.d.ts +3 -2
- package/esm/ParameterControl/ParameterControl.d.ts.map +1 -1
- package/esm/ParameterControl/ParameterControl.js +9 -5
- package/esm/ShortenedText/ShortenedText.d.ts +10 -14
- package/esm/ShortenedText/ShortenedText.d.ts.map +1 -1
- package/esm/ShortenedText/ShortenedText.js +85 -96
- package/esm/index.d.ts +3 -3
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -1
- package/esm/sdk-ui-kit.d.ts +60 -134
- package/package.json +11 -11
- package/src/ParameterControl/ParameterControl.scss +10 -0
- package/styles/css/list.css +11 -0
- package/styles/css/list.css.map +1 -1
- package/styles/css/main.css +18 -1
- package/styles/css/main.css.map +1 -1
- package/styles/css/menu.css +11 -0
- package/styles/css/menu.css.map +1 -1
- package/styles/css/syntaxHighlightingInput.css +1 -1
- package/styles/css/syntaxHighlightingInput.css.map +1 -1
- package/styles/scss/list.scss +17 -0
- package/styles/scss/syntaxHighlightingInput.scss +5 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiPagedVirtualList.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPagedVirtualList/UiPagedVirtualList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,SAAS,EAQjB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"UiPagedVirtualList.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPagedVirtualList/UiPagedVirtualList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,SAAS,EAQjB,MAAM,OAAO,CAAC;AAcf;;GAEG;AACH,MAAM,WAAW,oCAAoC;IACjD,UAAU,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+BAA+B,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,KAAK,OAAO,CAAC;IACxG,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,SAAS,CAAC;IACxD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC,oCAAoC,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAEnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,mCAAmC,CAAC,CAAC;IAClD,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC;AAuMD;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAxMO,CAAC,0HAwM+C,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { bem } from "../@utils/bem.js";
|
|
|
7
7
|
import { makeLinearKeyboardNavigationWithConfirm } from "../@utils/keyboardNavigation.js";
|
|
8
8
|
import { SELECT_ITEM_ACTION } from "../hooks/useListWithActionsKeyboardNavigation.js";
|
|
9
9
|
import { ScopedIdStore } from "../hooks/useScopedId.js";
|
|
10
|
+
import { useVirtualizerRectObserver } from "../hooks/useVirtualizerRectObserver.js";
|
|
10
11
|
import { UiSkeleton } from "../UiSkeleton/UiSkeleton.js";
|
|
11
12
|
const { b, e } = bem("gd-ui-kit-paged-virtual-list");
|
|
12
13
|
function UiPagedVirtualListNotWrapped(props, ref) {
|
|
@@ -153,10 +154,12 @@ function useVirtualList({ items, itemHeight, itemHeightGetter, itemsGap, contain
|
|
|
153
154
|
? scrollContainerRef.current?.scrollHeight >
|
|
154
155
|
scrollContainerRef.current?.getBoundingClientRect().height
|
|
155
156
|
: false;
|
|
157
|
+
const observeElementRect = useVirtualizerRectObserver(scrollContainerRef, height);
|
|
156
158
|
const rowVirtualizer = useVirtualizer({
|
|
157
159
|
count: renderItemsCount,
|
|
158
160
|
getScrollElement: () => scrollContainerRef.current,
|
|
159
161
|
estimateSize: (index) => getItemSizeWithGap(index),
|
|
162
|
+
observeElementRect,
|
|
160
163
|
overscan: 5,
|
|
161
164
|
});
|
|
162
165
|
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type RefObject } from "react";
|
|
2
|
+
import { type Rect, type Virtualizer } from "@tanstack/react-virtual";
|
|
3
|
+
/**
|
|
4
|
+
* `observeElementRect` for a vertical `useVirtualizer` that reports the scroll element's real
|
|
5
|
+
* measurement, substituting the caller-provided height when the measurement is zero (jsdom/happy-dom
|
|
6
|
+
* in tests, `display: none` ancestors). The virtualizer subscribes once per scroll element and
|
|
7
|
+
* ignores later option changes, so the fallback is read through a ref to stay current.
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export declare function useVirtualizerRectObserver<TScrollElement extends Element>(scrollElementRef: RefObject<TScrollElement | null>, fallbackHeight: number): (_instance: Virtualizer<TScrollElement, Element>, cb: (rect: Rect) => void) => (() => void) | undefined;
|
|
12
|
+
//# sourceMappingURL=useVirtualizerRectObserver.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVirtualizerRectObserver.d.ts","sourceRoot":"","sources":["../../../src/@ui/hooks/useVirtualizerRectObserver.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItE;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CAAC,cAAc,SAAS,OAAO,EACrE,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAClD,cAAc,EAAE,MAAM,2GA2BzB"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// (C) 2026 GoodData Corporation
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { useAutoupdateRef } from "@gooddata/sdk-ui";
|
|
4
|
+
/**
|
|
5
|
+
* `observeElementRect` for a vertical `useVirtualizer` that reports the scroll element's real
|
|
6
|
+
* measurement, substituting the caller-provided height when the measurement is zero (jsdom/happy-dom
|
|
7
|
+
* in tests, `display: none` ancestors). The virtualizer subscribes once per scroll element and
|
|
8
|
+
* ignores later option changes, so the fallback is read through a ref to stay current.
|
|
9
|
+
*
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
export function useVirtualizerRectObserver(scrollElementRef, fallbackHeight) {
|
|
13
|
+
const fallbackHeightRef = useAutoupdateRef(fallbackHeight);
|
|
14
|
+
return useCallback((_instance, cb) => {
|
|
15
|
+
const el = scrollElementRef.current;
|
|
16
|
+
if (!el) {
|
|
17
|
+
return undefined;
|
|
18
|
+
}
|
|
19
|
+
const report = () => {
|
|
20
|
+
const rect = el.getBoundingClientRect();
|
|
21
|
+
cb({
|
|
22
|
+
width: rect.width,
|
|
23
|
+
height: rect.height || fallbackHeightRef.current,
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
report();
|
|
27
|
+
if (typeof ResizeObserver === "undefined") {
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
const resizeObserver = new ResizeObserver(report);
|
|
31
|
+
resizeObserver.observe(el);
|
|
32
|
+
return () => resizeObserver.disconnect();
|
|
33
|
+
}, [scrollElementRef, fallbackHeightRef]);
|
|
34
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type KeyboardEvent as ReactKeyboardEvent } from "react";
|
|
2
2
|
import { type WeekStart } from "@gooddata/sdk-model";
|
|
3
3
|
import { type IAccessibilityConfigBase } from "../typings/accessibility.js";
|
|
4
4
|
import { type IAlignPoint } from "../typings/positioning.js";
|
|
@@ -29,8 +29,6 @@ export declare const WrappedDatePicker: import("react").MemoExoticComponent<type
|
|
|
29
29
|
/**
|
|
30
30
|
* @internal
|
|
31
31
|
*/
|
|
32
|
-
export declare
|
|
33
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
}
|
|
32
|
+
export declare const Datepicker: import("react").NamedExoticComponent<IDatePickerProps>;
|
|
35
33
|
export {};
|
|
36
34
|
//# sourceMappingURL=Datepicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Datepicker.d.ts","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,
|
|
1
|
+
{"version":3,"file":"Datepicker.d.ts","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,aAAa,IAAI,kBAAkB,EAS3C,MAAM,OAAO,CAAC;AAkCf,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAO7D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1E;AAuCD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAuB3E;AA2BD,iBAAS,qBAAqB,CAAC,EAC3B,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,SAAc,EACd,WAAgB,EAChB,QAAQ,EACR,MAAM,EACN,eAAe,EACf,mBAA2B,EAC3B,IAAS,EACT,QAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,OAAO,EACP,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,aAAa,EACxB,kBAAkB,EACrB,EAAE,gBAAgB,2CAuQlB;AAED,eAAO,MAAM,iBAAiB,mEAA8B,CAAC;AAG7D;;GAEG;AACH,eAAO,MAAM,UAAU,wDAMrB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// (C) 2020-2026 GoodData Corporation
|
|
3
|
-
import {
|
|
3
|
+
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
|
|
4
4
|
import classNames from "classnames";
|
|
5
5
|
import { format, isSameDay, isValid, parse } from "date-fns";
|
|
6
6
|
import { de, enAU, enGB, enUS, es, fi, fr, frCA, id, it, ja, ko, nl, pl, pt, ptBR, ru, sl, th, tr, uk, vi, zhCN, } from "date-fns/locale";
|
|
@@ -253,8 +253,6 @@ WrappedDatePicker.displayName = "WrappedDatePicker";
|
|
|
253
253
|
/**
|
|
254
254
|
* @internal
|
|
255
255
|
*/
|
|
256
|
-
export
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
260
|
-
}
|
|
256
|
+
export const Datepicker = memo(function Datepicker(props) {
|
|
257
|
+
return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(WrappedDatePicker, { ...props }) }));
|
|
258
|
+
});
|
|
@@ -19,6 +19,7 @@ export interface IRenderDropdownListItemProps<T> {
|
|
|
19
19
|
isFirst: boolean;
|
|
20
20
|
isLast: boolean;
|
|
21
21
|
focused?: boolean;
|
|
22
|
+
isSelected?: boolean;
|
|
22
23
|
}
|
|
23
24
|
/**
|
|
24
25
|
* @internal
|
|
@@ -63,6 +64,11 @@ export interface IDropdownListProps<T> {
|
|
|
63
64
|
renderItem: (props: IRenderDropdownListItemProps<T>) => ReactElement;
|
|
64
65
|
itemHeightGetter?: (index: number) => number;
|
|
65
66
|
itemTitleGetter?: (item: T) => string;
|
|
67
|
+
/**
|
|
68
|
+
* Predicate that returns true for the currently selected item. It drives the options'
|
|
69
|
+
* `aria-selected` and the `isSelected` render prop.
|
|
70
|
+
*/
|
|
71
|
+
getIsItemSelected?: (item: T) => boolean;
|
|
66
72
|
accessibilityConfig?: Pick<IAccessibilityConfigBase, "ariaLabel" | "ariaLabelledBy" | "role">;
|
|
67
73
|
body?: ReactNode | ((closeDropdown: () => void) => ReactNode);
|
|
68
74
|
onScroll?: () => void;
|
|
@@ -96,5 +102,5 @@ export declare const DEFAULT_MOBILE_ITEM_HEIGHT = 40;
|
|
|
96
102
|
* @internal
|
|
97
103
|
*
|
|
98
104
|
*/
|
|
99
|
-
export declare function DropdownList<T>({ id, title, className, tabsClassName, width, height, maxHeight, onKeyDownSelect, onKeyDownConfirm, isMobile, isLoading, items, itemsCount, itemHeight, containerPadding, mobileItemHeight, showSearch, disableAutofocus, searchString, searchLabel, searchPlaceholder, searchFieldSize, onSearch, showTabs, tabs, selectedTabId, onTabSelect, renderNoData, footer, closeDropdown, accessibilityConfig, renderItem, body, itemHeightGetter, itemTitleGetter, loadNextPage, hasNextPage, skeletonItemsCount, shouldLoadNextPage, isNextPageLoading, SkeletonItem, onScroll, scrollToItem, scrollToItemKeyExtractor }: IDropdownListProps<T>): ReactElement;
|
|
105
|
+
export declare function DropdownList<T>({ id, title, className, tabsClassName, width, height, maxHeight, onKeyDownSelect, onKeyDownConfirm, isMobile, isLoading, items, itemsCount, itemHeight, containerPadding, mobileItemHeight, showSearch, disableAutofocus, searchString, searchLabel, searchPlaceholder, searchFieldSize, onSearch, showTabs, tabs, selectedTabId, onTabSelect, renderNoData, footer, closeDropdown, accessibilityConfig, renderItem, body, itemHeightGetter, itemTitleGetter, getIsItemSelected, loadNextPage, hasNextPage, skeletonItemsCount, shouldLoadNextPage, isNextPageLoading, SkeletonItem, onScroll, scrollToItem, scrollToItemKeyExtractor }: IDropdownListProps<T>): ReactElement;
|
|
100
106
|
//# sourceMappingURL=DropdownList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownList.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownList.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,aAAa,EAGlB,KAAK,YAAY,EACjB,KAAK,SAAS,EAIjB,MAAM,OAAO,CAAC;AAKf,OAAO,EACH,KAAK,oCAAoC,EAE5C,MAAM,iDAAiD,CAAC;AASzD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAK5E;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC3C,iBAAiB,EAAE,OAAO,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownList.d.ts","sourceRoot":"","sources":["../../src/Dropdown/DropdownList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -35,7 +35,7 @@ const defaultNoData = (props) => {
|
|
|
35
35
|
* @internal
|
|
36
36
|
*
|
|
37
37
|
*/
|
|
38
|
-
export function DropdownList({ id, title, className = "", tabsClassName = "", width, height, maxHeight, onKeyDownSelect, onKeyDownConfirm, isMobile, isLoading, items = [], itemsCount = items.length, itemHeight = DEFAULT_ITEM_HEIGHT, containerPadding = 0, mobileItemHeight = DEFAULT_MOBILE_ITEM_HEIGHT, showSearch, disableAutofocus, searchString, searchLabel, searchPlaceholder, searchFieldSize, onSearch, showTabs, tabs, selectedTabId, onTabSelect, renderNoData = defaultNoData, footer, closeDropdown, accessibilityConfig, renderItem, body, itemHeightGetter, itemTitleGetter, loadNextPage, hasNextPage, skeletonItemsCount = 0, shouldLoadNextPage, isNextPageLoading = false, SkeletonItem, onScroll, scrollToItem, scrollToItemKeyExtractor, }) {
|
|
38
|
+
export function DropdownList({ id, title, className = "", tabsClassName = "", width, height, maxHeight, onKeyDownSelect, onKeyDownConfirm, isMobile, isLoading, items = [], itemsCount = items.length, itemHeight = DEFAULT_ITEM_HEIGHT, containerPadding = 0, mobileItemHeight = DEFAULT_MOBILE_ITEM_HEIGHT, showSearch, disableAutofocus, searchString, searchLabel, searchPlaceholder, searchFieldSize, onSearch, showTabs, tabs, selectedTabId, onTabSelect, renderNoData = defaultNoData, footer, closeDropdown, accessibilityConfig, renderItem, body, itemHeightGetter, itemTitleGetter, getIsItemSelected, loadNextPage, hasNextPage, skeletonItemsCount = 0, shouldLoadNextPage, isNextPageLoading = false, SkeletonItem, onScroll, scrollToItem, scrollToItemKeyExtractor, }) {
|
|
39
39
|
const [currentSearchString, setCurrentSearchString] = useState(searchString);
|
|
40
40
|
const hasNoData = !isLoading && itemsCount === 0;
|
|
41
41
|
const hasNoMatchingData = hasNoData && !!currentSearchString;
|
|
@@ -103,7 +103,7 @@ export function DropdownList({ id, title, className = "", tabsClassName = "", wi
|
|
|
103
103
|
: accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.role === "listbox" ||
|
|
104
104
|
accessibilityConfig?.role === "list"
|
|
105
105
|
? undefined
|
|
106
|
-
: accessibilityConfig?.ariaLabelledBy, children: _jsx(UiPagedVirtualList, { maxHeight: effectiveMaxHeight, items: items, itemHeight: effectiveItemHeight, itemsGap: 0, itemPadding: 0, containerPadding: containerPadding, onKeyDownSelect: onKeyDownSelect, onKeyDownConfirm: onKeyDownConfirm, closeDropdown: closeDropdown, itemHeightGetter: itemHeightGetter, hasNextPage: hasNextPage, loadNextPage: loadNextPage, skeletonItemsCount: skeletonItemsCount, SkeletonItem: SkeletonItem, shouldLoadNextPage: shouldLoadNextPage, isLoading: isNextPageLoading, onScroll: onScroll, scrollToItem: scrollToItem, scrollToItemKeyExtractor: scrollToItemKeyExtractor, representAs: accessibilityConfig?.role === "listbox"
|
|
106
|
+
: accessibilityConfig?.ariaLabelledBy, children: _jsx(UiPagedVirtualList, { maxHeight: effectiveMaxHeight, items: items, itemHeight: effectiveItemHeight, itemsGap: 0, itemPadding: 0, containerPadding: containerPadding, onKeyDownSelect: onKeyDownSelect, onKeyDownConfirm: onKeyDownConfirm, closeDropdown: closeDropdown, itemHeightGetter: itemHeightGetter, getIsItemSelected: getIsItemSelected, hasNextPage: hasNextPage, loadNextPage: loadNextPage, skeletonItemsCount: skeletonItemsCount, SkeletonItem: SkeletonItem, shouldLoadNextPage: shouldLoadNextPage, isLoading: isNextPageLoading, onScroll: onScroll, scrollToItem: scrollToItem, scrollToItemKeyExtractor: scrollToItemKeyExtractor, representAs: accessibilityConfig?.role === "listbox"
|
|
107
107
|
? "listbox"
|
|
108
108
|
: accessibilityConfig?.role === "list"
|
|
109
109
|
? "list"
|
|
@@ -126,6 +126,7 @@ export function DropdownList({ id, title, className = "", tabsClassName = "", wi
|
|
|
126
126
|
height: rowHeight,
|
|
127
127
|
isFirst: rowIndex === 0,
|
|
128
128
|
isLast: rowIndex === itemsCount - 1,
|
|
129
|
+
isSelected: getIsItemSelected?.(item),
|
|
129
130
|
});
|
|
130
131
|
} }) }));
|
|
131
132
|
} })) : null, renderFooter()] }));
|
|
@@ -1,24 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { type IFlexDimensionsProps, type IFlexDimensionsState } from "./typings.js";
|
|
1
|
+
import { type IFlexDimensionsHandle, type IFlexDimensionsProps } from "./typings.js";
|
|
3
2
|
/**
|
|
4
3
|
* @internal
|
|
5
4
|
*/
|
|
6
|
-
export declare
|
|
7
|
-
static defaultProps: {
|
|
8
|
-
children: boolean;
|
|
9
|
-
className: string;
|
|
10
|
-
measureWidth: boolean;
|
|
11
|
-
measureHeight: boolean;
|
|
12
|
-
};
|
|
13
|
-
private wrapperRef;
|
|
14
|
-
private readonly throttledUpdateSize;
|
|
15
|
-
private readonly resizeObserver;
|
|
16
|
-
constructor(props: IFlexDimensionsProps);
|
|
17
|
-
componentDidMount(): void;
|
|
18
|
-
componentWillUnmount(): void;
|
|
19
|
-
getChildrenDimensions(): Partial<IFlexDimensionsState>;
|
|
20
|
-
updateSize: () => void;
|
|
21
|
-
renderChildren(): ReactNode;
|
|
22
|
-
render(): ReactNode;
|
|
23
|
-
}
|
|
5
|
+
export declare const FlexDimensions: import("react").ForwardRefExoticComponent<IFlexDimensionsProps & import("react").RefAttributes<IFlexDimensionsHandle>>;
|
|
24
6
|
//# sourceMappingURL=FlexDimensions.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexDimensions.d.ts","sourceRoot":"","sources":["../../src/FlexDimensions/FlexDimensions.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FlexDimensions.d.ts","sourceRoot":"","sources":["../../src/FlexDimensions/FlexDimensions.tsx"],"names":[],"mappings":"AAoBA,OAAO,EACH,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAE5B,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,cAAc,wHAoDzB,CAAC"}
|
|
@@ -1,64 +1,43 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// (C) 2007-2026 GoodData Corporation
|
|
3
|
-
import { Children,
|
|
3
|
+
import { Children, cloneElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
|
|
4
4
|
import cx from "classnames";
|
|
5
5
|
import { pickBy, throttle } from "lodash-es";
|
|
6
6
|
import { elementRegion } from "../utils/domUtilities.js";
|
|
7
7
|
/**
|
|
8
8
|
* @internal
|
|
9
9
|
*/
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
measureHeight: true,
|
|
16
|
-
};
|
|
17
|
-
wrapperRef = createRef();
|
|
18
|
-
throttledUpdateSize;
|
|
19
|
-
resizeObserver;
|
|
20
|
-
constructor(props) {
|
|
21
|
-
super(props);
|
|
22
|
-
this.state = {
|
|
23
|
-
width: 0,
|
|
24
|
-
height: 0,
|
|
25
|
-
};
|
|
26
|
-
this.throttledUpdateSize = throttle(this.updateSize, 250, { leading: false });
|
|
27
|
-
this.resizeObserver = new ResizeObserver(this.throttledUpdateSize);
|
|
28
|
-
}
|
|
29
|
-
componentDidMount() {
|
|
30
|
-
if (this.wrapperRef.current) {
|
|
31
|
-
this.resizeObserver.observe(this.wrapperRef.current);
|
|
32
|
-
}
|
|
33
|
-
this.throttledUpdateSize();
|
|
34
|
-
}
|
|
35
|
-
componentWillUnmount() {
|
|
36
|
-
this.throttledUpdateSize.cancel();
|
|
37
|
-
this.resizeObserver.disconnect();
|
|
38
|
-
}
|
|
39
|
-
getChildrenDimensions() {
|
|
40
|
-
return pickBy(this.state, (_, key) => {
|
|
41
|
-
const setWidth = this.props.measureWidth && key === "width";
|
|
42
|
-
const setHeight = this.props.measureHeight && key === "height";
|
|
43
|
-
return setWidth || setHeight;
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
updateSize = () => {
|
|
47
|
-
if (!this.wrapperRef.current) {
|
|
10
|
+
export const FlexDimensions = forwardRef(function FlexDimensions({ children = false, className = "", measureWidth = true, measureHeight = true }, ref) {
|
|
11
|
+
const wrapperRef = useRef(null);
|
|
12
|
+
const [{ width, height }, setDimensions] = useState({ width: 0, height: 0 });
|
|
13
|
+
const updateSize = useCallback(() => {
|
|
14
|
+
if (!wrapperRef.current) {
|
|
48
15
|
return;
|
|
49
16
|
}
|
|
50
|
-
const { width, height } = elementRegion(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
17
|
+
const { width, height } = elementRegion(wrapperRef.current);
|
|
18
|
+
setDimensions({ width, height });
|
|
19
|
+
}, []);
|
|
20
|
+
useImperativeHandle(ref, () => ({ updateSize }), [updateSize]);
|
|
21
|
+
const throttledUpdateSize = useMemo(() => throttle(updateSize, 250, { leading: false }), [updateSize]);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
// constructed here rather than during render so that this component can be rendered in
|
|
24
|
+
// environments without a ResizeObserver (server-side rendering and the like)
|
|
25
|
+
let resizeObserver;
|
|
26
|
+
if (wrapperRef.current && typeof ResizeObserver !== "undefined") {
|
|
27
|
+
resizeObserver = new ResizeObserver(throttledUpdateSize);
|
|
28
|
+
resizeObserver.observe(wrapperRef.current);
|
|
29
|
+
}
|
|
30
|
+
throttledUpdateSize();
|
|
31
|
+
return () => {
|
|
32
|
+
throttledUpdateSize.cancel();
|
|
33
|
+
resizeObserver?.disconnect();
|
|
34
|
+
};
|
|
35
|
+
}, [throttledUpdateSize]);
|
|
36
|
+
const childrenDimensions = pickBy({ width, height }, (_, key) => {
|
|
37
|
+
const setWidth = measureWidth && key === "width";
|
|
38
|
+
const setHeight = measureHeight && key === "height";
|
|
39
|
+
return setWidth || setHeight;
|
|
40
|
+
});
|
|
41
|
+
const child = Children.only(children);
|
|
42
|
+
return (_jsx("div", { ref: wrapperRef, className: cx(className), children: cloneElement(child, childrenDimensions) }));
|
|
43
|
+
});
|
|
@@ -15,4 +15,12 @@ export interface IFlexDimensionsState {
|
|
|
15
15
|
width: number;
|
|
16
16
|
height: number;
|
|
17
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* Imperative API exposed by the FlexDimensions component through its ref.
|
|
20
|
+
*
|
|
21
|
+
* @internal
|
|
22
|
+
*/
|
|
23
|
+
export interface IFlexDimensionsHandle {
|
|
24
|
+
updateSize: () => void;
|
|
25
|
+
}
|
|
18
26
|
//# sourceMappingURL=typings.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../src/FlexDimensions/typings.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB"}
|
|
1
|
+
{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../src/FlexDimensions/typings.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
// (C) 2021-
|
|
1
|
+
// (C) 2021-2026 GoodData Corporation
|
|
2
2
|
export {};
|
package/esm/Form/Input.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type IInputPureProps, InputPure } from "./InputPure.js";
|
|
1
|
+
import { type IInputPureHandle, type IInputPureProps } from "./InputPure.js";
|
|
3
2
|
/**
|
|
4
3
|
* @internal
|
|
5
4
|
*/
|
|
@@ -9,35 +8,5 @@ export interface IInputState {
|
|
|
9
8
|
/**
|
|
10
9
|
* @internal
|
|
11
10
|
*/
|
|
12
|
-
export declare
|
|
13
|
-
static defaultProps: {
|
|
14
|
-
autofocus: boolean;
|
|
15
|
-
className: string;
|
|
16
|
-
clearOnEsc: boolean;
|
|
17
|
-
disabled: boolean;
|
|
18
|
-
hasError: boolean;
|
|
19
|
-
hasWarning: boolean;
|
|
20
|
-
isSearch: boolean;
|
|
21
|
-
isSmall: boolean;
|
|
22
|
-
maxlength: number;
|
|
23
|
-
onChange: (..._args: unknown[]) => void;
|
|
24
|
-
onEscKeyPress: (..._args: unknown[]) => void;
|
|
25
|
-
onEnterKeyPress: (..._args: unknown[]) => void;
|
|
26
|
-
onBlur: (..._args: unknown[]) => void;
|
|
27
|
-
onFocus: (..._args: unknown[]) => void;
|
|
28
|
-
placeholder: string;
|
|
29
|
-
prefix: string;
|
|
30
|
-
readonly: boolean;
|
|
31
|
-
suffix: string;
|
|
32
|
-
label: string;
|
|
33
|
-
labelPositionTop: boolean;
|
|
34
|
-
value: string;
|
|
35
|
-
};
|
|
36
|
-
inputNodeRef: InputPure | null;
|
|
37
|
-
constructor(props: IInputPureProps);
|
|
38
|
-
UNSAFE_componentWillReceiveProps(nextProps: IInputPureProps): void;
|
|
39
|
-
onChange: (value: string | number, e?: ChangeEvent<HTMLInputElement> | undefined) => void;
|
|
40
|
-
valueChanged(value: string | number, e?: ChangeEvent<HTMLInputElement>): void;
|
|
41
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
42
|
-
}
|
|
11
|
+
export declare const Input: import("react").ForwardRefExoticComponent<IInputPureProps & import("react").RefAttributes<IInputPureHandle>>;
|
|
43
12
|
//# sourceMappingURL=Input.d.ts.map
|
package/esm/Form/Input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAGvB,MAAM,gBAAgB,CAAC;AAOxB;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,8GAmChB,CAAC"}
|
package/esm/Form/Input.js
CHANGED
|
@@ -1,45 +1,40 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// (C) 2020-2026 GoodData Corporation
|
|
3
|
-
import {
|
|
4
|
-
import { InputPure } from "./InputPure.js";
|
|
3
|
+
import { forwardRef, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
+
import { InputPure, inputPureDefaultProps, } from "./InputPure.js";
|
|
5
5
|
const isValidNumber = (value) => typeof value === "number" && !Number.isNaN(value);
|
|
6
6
|
const isNumberOrString = (value) => isValidNumber(value) || (typeof value === "string" && value.length);
|
|
7
7
|
const toValidValue = (value) => (isNumberOrString(value) ? value : "");
|
|
8
8
|
/**
|
|
9
9
|
* @internal
|
|
10
10
|
*/
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (this.props.value !== validValue) {
|
|
26
|
-
this.valueChanged(validValue);
|
|
11
|
+
export const Input = forwardRef(function Input(props, ref) {
|
|
12
|
+
const { value: propValue = inputPureDefaultProps.value, onChange } = props;
|
|
13
|
+
const [value, setValue] = useState(() => toValidValue(propValue));
|
|
14
|
+
const lastPropValueRef = useRef(propValue);
|
|
15
|
+
// Keeps the derived state in sync with the value prop and notifies the consumer about the
|
|
16
|
+
// normalization, the same way the former UNSAFE_componentWillReceiveProps did. A layout effect
|
|
17
|
+
// is what keeps the parity: the class synced the state before rendering, so a changed value
|
|
18
|
+
// prop was part of the very same commit. Here the re-render is flushed before the browser
|
|
19
|
+
// paints instead, so the stale value can never be shown.
|
|
20
|
+
useLayoutEffect(() => {
|
|
21
|
+
// Object.is, not ===, so that a NaN value prop counts as unchanged; === would make every
|
|
22
|
+
// re-render look like a new external update and reset the value the user just typed.
|
|
23
|
+
if (Object.is(lastPropValueRef.current, propValue)) {
|
|
24
|
+
return;
|
|
27
25
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (this.state.value !== value) {
|
|
34
|
-
this.setState({
|
|
35
|
-
value,
|
|
36
|
-
});
|
|
37
|
-
this.props.onChange?.(value, e);
|
|
26
|
+
lastPropValueRef.current = propValue;
|
|
27
|
+
const validValue = toValidValue(propValue);
|
|
28
|
+
if (value !== validValue) {
|
|
29
|
+
setValue(validValue);
|
|
30
|
+
onChange?.(validValue);
|
|
38
31
|
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
32
|
+
}, [propValue, value, onChange]);
|
|
33
|
+
const handleChange = (newValue, e) => {
|
|
34
|
+
if (value !== newValue) {
|
|
35
|
+
setValue(newValue);
|
|
36
|
+
onChange?.(newValue, e);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
return _jsx(InputPure, { ...props, ref: ref, onChange: handleChange, value: value });
|
|
40
|
+
});
|
package/esm/Form/InputPure.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type AriaAttributes, type ChangeEvent, type FocusEvent, type KeyboardEvent, type MouseEvent,
|
|
1
|
+
import { type AriaAttributes, type ChangeEvent, type FocusEvent, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
|
|
2
2
|
import { type IconType } from "../@ui/@types/icon.js";
|
|
3
3
|
import { type IAccessibilityConfigBase } from "../typings/accessibility.js";
|
|
4
4
|
import { type IDomNative, type IDomNativeProps } from "../typings/domNative.js";
|
|
@@ -48,57 +48,47 @@ export interface IInputPureProps extends IDomNativeProps {
|
|
|
48
48
|
dataTestId?: string;
|
|
49
49
|
}
|
|
50
50
|
/**
|
|
51
|
+
* Imperative handle exposed by {@link InputPure}.
|
|
52
|
+
*
|
|
53
|
+
* `inputNodeRef` is the native `<input>` element - consumers chain `Input.inputNodeRef.inputNodeRef`
|
|
54
|
+
* down to it, so it has to stay the DOM node and not the component instance.
|
|
55
|
+
*
|
|
51
56
|
* @internal
|
|
52
57
|
*/
|
|
53
|
-
export
|
|
58
|
+
export interface IInputPureHandle extends IDomNative {
|
|
54
59
|
inputNodeRef: HTMLInputElement | null;
|
|
55
|
-
private autofocusDispatcher;
|
|
56
|
-
private readonly a11yIdBase;
|
|
57
|
-
static defaultProps: {
|
|
58
|
-
autofocus: boolean;
|
|
59
|
-
className: string;
|
|
60
|
-
clearOnEsc: boolean;
|
|
61
|
-
disabled: boolean;
|
|
62
|
-
hasError: boolean;
|
|
63
|
-
hasWarning: boolean;
|
|
64
|
-
isSearch: boolean;
|
|
65
|
-
isSmall: boolean;
|
|
66
|
-
maxlength: number;
|
|
67
|
-
onChange: (..._args: unknown[]) => void;
|
|
68
|
-
onEscKeyPress: (..._args: unknown[]) => void;
|
|
69
|
-
onEnterKeyPress: (..._args: unknown[]) => void;
|
|
70
|
-
onBlur: (..._args: unknown[]) => void;
|
|
71
|
-
onFocus: (..._args: unknown[]) => void;
|
|
72
|
-
placeholder: string;
|
|
73
|
-
prefix: string;
|
|
74
|
-
readonly: boolean;
|
|
75
|
-
suffix: string;
|
|
76
|
-
label: string;
|
|
77
|
-
labelPositionTop: boolean;
|
|
78
|
-
value: string;
|
|
79
|
-
};
|
|
80
|
-
componentDidMount(): void;
|
|
81
|
-
componentWillUnmount(): void;
|
|
82
|
-
componentDidUpdate(prevProps: Readonly<IInputPureProps>): void;
|
|
83
|
-
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
84
|
-
onKeyPress: (e: KeyboardEvent<Element>) => void;
|
|
85
|
-
onClear: (e?: ChangeEvent<HTMLInputElement> | undefined) => void;
|
|
86
|
-
getLabelClassNames(className: string): string;
|
|
87
|
-
getInputClassNames(): string;
|
|
88
|
-
private getA11yIdBase;
|
|
89
|
-
private getPrefixA11yId;
|
|
90
|
-
private getSuffixA11yId;
|
|
91
|
-
renderPrefix(prefix: string, ariaLabel?: string): ReactNode;
|
|
92
|
-
renderSuffix(suffix: string, ariaLabel?: string): ReactNode;
|
|
93
|
-
renderLabel(label: ReactNode, htmlFor?: string): ReactNode;
|
|
94
|
-
renderSearch(isSearch: boolean): ReactNode;
|
|
95
|
-
renderClearIcon(clearOnEsc: boolean): ReactNode;
|
|
96
|
-
renderIconButton(iconButton: IconType, iconButtonLabel: string, onIconButtonClick: (e: MouseEvent<HTMLButtonElement>) => void): ReactNode;
|
|
97
|
-
getAriaDescribedBy(): string | undefined;
|
|
98
|
-
renderInput(): import("react/jsx-runtime").JSX.Element;
|
|
99
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
100
|
-
focus(options?: {
|
|
101
|
-
preventScroll?: boolean;
|
|
102
|
-
}): void;
|
|
103
60
|
}
|
|
61
|
+
/**
|
|
62
|
+
* Defaults shared with the `Input` wrapper, which re-exposes them as its own `defaultProps`.
|
|
63
|
+
* Keep in sync with the destructuring defaults in {@link InputPure}.
|
|
64
|
+
*
|
|
65
|
+
* @internal
|
|
66
|
+
*/
|
|
67
|
+
export declare const inputPureDefaultProps: {
|
|
68
|
+
autofocus: boolean;
|
|
69
|
+
className: string;
|
|
70
|
+
clearOnEsc: boolean;
|
|
71
|
+
disabled: boolean;
|
|
72
|
+
hasError: boolean;
|
|
73
|
+
hasWarning: boolean;
|
|
74
|
+
isSearch: boolean;
|
|
75
|
+
isSmall: boolean;
|
|
76
|
+
maxlength: number;
|
|
77
|
+
onChange: (..._args: unknown[]) => void;
|
|
78
|
+
onEscKeyPress: (..._args: unknown[]) => void;
|
|
79
|
+
onEnterKeyPress: (..._args: unknown[]) => void;
|
|
80
|
+
onBlur: (..._args: unknown[]) => void;
|
|
81
|
+
onFocus: (..._args: unknown[]) => void;
|
|
82
|
+
placeholder: string;
|
|
83
|
+
prefix: string;
|
|
84
|
+
readonly: boolean;
|
|
85
|
+
suffix: string;
|
|
86
|
+
label: string;
|
|
87
|
+
labelPositionTop: boolean;
|
|
88
|
+
value: string;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* @internal
|
|
92
|
+
*/
|
|
93
|
+
export declare const InputPure: import("react").ForwardRefExoticComponent<IInputPureProps & import("react").RefAttributes<IInputPureHandle>>;
|
|
104
94
|
//# sourceMappingURL=InputPure.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputPure.d.ts","sourceRoot":"","sources":["../../src/Form/InputPure.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,
|
|
1
|
+
{"version":3,"file":"InputPure.d.ts","sourceRoot":"","sources":["../../src/Form/InputPure.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,SAAS,EAKjB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAKhF;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,wBAAwB;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAChD;AAED;;GAEG;AAEH,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,6BAA6B,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACzC;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAsBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,8GA+QpB,CAAC"}
|