@korsolutions/ui 0.0.92 → 0.0.94
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/dist/module/components/combobox/components/combobox-list.js +8 -15
- package/dist/module/components/combobox/components/combobox-list.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-option.js +5 -1
- package/dist/module/components/combobox/components/combobox-option.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-root.js +18 -71
- package/dist/module/components/combobox/components/combobox-root.js.map +1 -1
- package/dist/module/components/combobox/components/combobox-trigger.js +11 -31
- package/dist/module/components/combobox/components/combobox-trigger.js.map +1 -1
- package/dist/module/components/combobox/context.js.map +1 -1
- package/dist/module/components/select/components/select-content.js +2 -3
- package/dist/module/components/select/components/select-content.js.map +1 -1
- package/dist/module/components/select/components/select-option.js +2 -2
- package/dist/module/components/select/components/select-option.js.map +1 -1
- package/dist/module/components/select/components/select-overlay.js +2 -3
- package/dist/module/components/select/components/select-overlay.js.map +1 -1
- package/dist/module/components/select/components/select-root.js +3 -3
- package/dist/module/components/select/components/select-root.js.map +1 -1
- package/dist/module/components/select/components/select-trigger.js +3 -4
- package/dist/module/components/select/components/select-trigger.js.map +1 -1
- package/dist/module/components/select/variants/default.js +0 -5
- package/dist/module/components/select/variants/default.js.map +1 -1
- package/dist/module/components/table/variants/default.js +3 -1
- package/dist/module/components/table/variants/default.js.map +1 -1
- package/dist/module/utils/calculate-styles.js +6 -0
- package/dist/module/utils/calculate-styles.js.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-list.d.ts +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-list.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-option.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-root.d.ts +8 -25
- package/dist/typescript/src/components/combobox/components/combobox-root.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts +2 -1
- package/dist/typescript/src/components/combobox/components/combobox-trigger.d.ts.map +1 -1
- package/dist/typescript/src/components/combobox/context.d.ts +9 -8
- package/dist/typescript/src/components/combobox/context.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-content.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-option.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-overlay.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-root.d.ts.map +1 -1
- package/dist/typescript/src/components/select/components/select-trigger.d.ts +2 -2
- package/dist/typescript/src/components/select/components/select-trigger.d.ts.map +1 -1
- package/dist/typescript/src/components/select/types.d.ts +2 -2
- package/dist/typescript/src/components/select/types.d.ts.map +1 -1
- package/dist/typescript/src/components/select/variants/default.d.ts.map +1 -1
- package/dist/typescript/src/components/table/variants/default.d.ts.map +1 -1
- package/dist/typescript/src/utils/calculate-styles.d.ts +2 -0
- package/dist/typescript/src/utils/calculate-styles.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/combobox/components/combobox-list.tsx +9 -17
- package/src/components/combobox/components/combobox-option.tsx +5 -1
- package/src/components/combobox/components/combobox-root.tsx +33 -117
- package/src/components/combobox/components/combobox-trigger.tsx +13 -36
- package/src/components/combobox/context.ts +12 -9
- package/src/components/select/components/select-content.tsx +6 -7
- package/src/components/select/components/select-option.tsx +5 -4
- package/src/components/select/components/select-overlay.tsx +6 -7
- package/src/components/select/components/select-root.tsx +14 -3
- package/src/components/select/components/select-trigger.tsx +12 -12
- package/src/components/select/types.ts +2 -2
- package/src/components/select/variants/default.tsx +0 -5
- package/src/components/table/variants/default.tsx +2 -0
- package/src/utils/calculate-styles.ts +16 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","calculateComposedStyles","styles","state","component","style","result","componentStyles","push","mergeProps","variantProps","globalProps","mergedProps","isPropsObject","props","mergeStyles","variantStyles","globalStyles","returnStyles","key","flatten"],"sourceRoot":"../../../src","sources":["utils/calculate-styles.ts"],"mappings":";;AAAA,
|
|
1
|
+
{"version":3,"names":["StyleSheet","calculateComposedStyles","styles","state","component","style","result","componentStyles","push","mergeProps","variantProps","globalProps","mergedProps","isPropsObject","props","mergeStyles","variantStyles","globalStyles","returnStyles","key","flatten","extractPressableStyles"],"sourceRoot":"../../../src","sources":["utils/calculate-styles.ts"],"mappings":";;AAAA,SACEA,UAAU,QAIL,cAAc;AAErB,OAAO,MAAMC,uBAAuB,GAAGA,CAKrCC,MAAyE,GAAG,CAAC,CAAC,EAC9EC,KAAY,EACZC,SAAoB,EACpBC,KAAc,KACD;EACb,MAAMC,MAAgB,GAAG,EAAE;EAC3B,MAAMC,eAAe,GAAGL,MAAM,GAAGE,SAAS,CAAC;EAC3C,IAAIG,eAAe,IAAI,SAAS,IAAIA,eAAe,IAAIA,eAAe,CAAC,SAAS,CAAC,EAAE;IACjFD,MAAM,CAACE,IAAI,CAACD,eAAe,CAAC,SAAS,CAAW,CAAC;EACnD;EACA,IAAIA,eAAe,GAAGJ,KAAK,CAAC,EAAE;IAC5BG,MAAM,CAACE,IAAI,CAACD,eAAe,CAACJ,KAAK,CAAC,CAAC;EACrC;EACA,IAAIE,KAAK,EAAE;IACTC,MAAM,CAACE,IAAI,CAACH,KAAK,CAAC;EACpB;EACA,OAAOC,MAAM;AACf,CAAC;AAED,MAAMG,UAAU,GAAGA,CACjBC,YAAoB,EACpBC,WAA+B,KACpB;EACX,IAAI,CAACA,WAAW,EAAE,OAAOD,YAAY;EACrC,MAAME,WAAW,GAAG;IAClB,GAAGD,WAAW;IACd,GAAGD,YAAY;IACfL,KAAK,EAAE,CAACM,WAAW,CAACN,KAAK,EAAEK,YAAY,CAACL,KAAK;EAC/C,CAAC;EACD,OAAOO,WAAW;AACpB,CAAC;AAED,MAAMC,aAAa,GAAIC,KAAc,IAA+B;EAClE,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,IAAI,IAAI,OAAO,IAAIA,KAAK;AACxE,CAAC;AAED,OAAO,MAAMC,WAAW,GAAGA,CACzBC,aAAqB,EACrBC,YAAgC,KACrB;EACX,IAAI,CAACA,YAAY,EAAE,OAAOD,aAAa;EACvC,MAAME,YAAY,GAAG,CAAC,CAAW;EACjC,KAAK,MAAMC,GAAG,IAAIH,aAAa,EAAE;IAC/B,IAAIH,aAAa,CAACG,aAAa,CAACG,GAAG,CAAC,CAAC,IAAIN,aAAa,CAACI,YAAY,CAACE,GAAG,CAAC,CAAC,EAAE;MACzED,YAAY,CAACC,GAAG,CAAC,GAAGV,UAAU,CAACO,aAAa,CAACG,GAAG,CAAC,EAAEF,YAAY,CAACE,GAAG,CAAC,CAAC;IACvE,CAAC,MAAM;MACL;MACAD,YAAY,CAACC,GAAG,CAAC,GAAGnB,UAAU,CAACoB,OAAO,CAAC,CAACJ,aAAa,CAACG,GAAG,CAAC,EAAEF,YAAY,CAACE,GAAG,CAAC,CAAC,CAAC;IACjF;EACF;EACA,OAAOD,YAAY;AACrB,CAAC;AAED,OAAO,MAAMG,sBAAsB,GAAGA,CACpChB,KAA8B,EAC9BS,KAAiC,KACnB;EACd,IAAI,OAAOT,KAAK,KAAK,UAAU,EAAE;IAC/B,OAAOA,KAAK,CAACS,KAAK,CAAC;EACrB;EACA,OAAOT,KAAK;AACd,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-list.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"combobox-list.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,UAAU,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,qBAY1D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKpE,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,CAAC;AAaF,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBA8B9D"}
|
|
@@ -3,35 +3,18 @@ import { type StyleProp, type ViewStyle } from "react-native";
|
|
|
3
3
|
import type { Size } from "../../../utils/size-scale";
|
|
4
4
|
import { ComboboxVariants } from "../variants";
|
|
5
5
|
export interface ComboboxRootProps<T> {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* Extracts a unique string identifier from an item.
|
|
14
|
-
* Defaults to reading `item.value` or `String(item)`.
|
|
15
|
-
*/
|
|
16
|
-
getItemValue?: (item: T) => string;
|
|
17
|
-
/**
|
|
18
|
-
* Extracts a display label from an item (shown in the trigger when selected).
|
|
19
|
-
* Defaults to reading `item.label` or falling back to `getItemValue`.
|
|
20
|
-
*/
|
|
21
|
-
getItemLabel?: (item: T) => string;
|
|
22
|
-
/**
|
|
23
|
-
* Custom filter function. Return `true` to include the item.
|
|
24
|
-
* Defaults to case-insensitive label includes query.
|
|
25
|
-
* Pass `null` to disable built-in filtering (useful for async search).
|
|
26
|
-
*/
|
|
27
|
-
filter?: ((item: T, query: string) => boolean) | null;
|
|
28
|
-
/** Called when the text input value changes. Useful for async search. */
|
|
29
|
-
onInputChange?: (text: string) => void;
|
|
6
|
+
items: T[];
|
|
7
|
+
value: T | null;
|
|
8
|
+
onChange: (item: T) => void;
|
|
9
|
+
inputValue: string;
|
|
10
|
+
onInputChange: (text: string) => void;
|
|
11
|
+
getItemValue: (item: T) => string;
|
|
12
|
+
getItemLabel: (item: T) => string;
|
|
30
13
|
variant?: keyof typeof ComboboxVariants;
|
|
31
14
|
size?: Size;
|
|
32
15
|
isDisabled?: boolean;
|
|
33
16
|
children?: React.ReactNode;
|
|
34
17
|
style?: StyleProp<ViewStyle>;
|
|
35
18
|
}
|
|
36
|
-
export declare function ComboboxRoot<T>(props: ComboboxRootProps<T>): React.JSX.Element;
|
|
19
|
+
export declare function ComboboxRoot<T>({ variant, size, isDisabled, ...props }: ComboboxRootProps<T>): React.JSX.Element;
|
|
37
20
|
//# sourceMappingURL=combobox-root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,CAAC,EAAE,CAAC;IAEX,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAE5B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAElC,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAOD,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,OAAmB,EACnB,IAAW,EACX,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,qBA4DtB"}
|
|
@@ -5,7 +5,8 @@ type ExtendableProps = Omit<TextInputProps, "value" | "onChange" | "onChangeText
|
|
|
5
5
|
type RenderProps = {
|
|
6
6
|
inputRef: React.RefObject<TextInputRef | null>;
|
|
7
7
|
open: () => void;
|
|
8
|
-
|
|
8
|
+
value: string;
|
|
9
|
+
onChange: (value: string) => void;
|
|
9
10
|
};
|
|
10
11
|
export type ComboboxTriggerProps = ExtendableProps & {
|
|
11
12
|
render?: (props: RenderProps) => React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"combobox-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/combobox/components/combobox-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAKjE,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC,CAAC;AAEnF,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC/C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;CAClD,CAAC;AAQF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,mSA2DzE"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { type Dispatch } from "react";
|
|
2
2
|
import type { LayoutRectangle } from "react-native";
|
|
3
3
|
import type { LayoutPosition } from "../../hooks";
|
|
4
|
+
import type { TextInputRef } from "../../types/element.types";
|
|
4
5
|
import type { ComboboxState, ComboboxStyles } from "./types";
|
|
5
6
|
export interface ComboboxContext {
|
|
6
|
-
items: readonly
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
items: readonly any[];
|
|
8
|
+
value: any | undefined;
|
|
9
|
+
onChange: (item: any) => void;
|
|
10
|
+
inputValue: string;
|
|
11
|
+
onInputChange: (text: string) => void;
|
|
12
|
+
getItemValue: (item: any) => string;
|
|
13
|
+
getItemLabel: (item: any) => string;
|
|
14
|
+
inputRef: React.RefObject<TextInputRef | null>;
|
|
12
15
|
isOpen: boolean;
|
|
13
16
|
setIsOpen: Dispatch<React.SetStateAction<boolean>>;
|
|
14
17
|
triggerPosition: LayoutPosition;
|
|
15
18
|
setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
|
|
16
19
|
contentLayout: LayoutRectangle;
|
|
17
20
|
setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
|
|
18
|
-
inputValue: string;
|
|
19
|
-
setInputValue: Dispatch<React.SetStateAction<string>>;
|
|
20
21
|
isDisabled: boolean;
|
|
21
22
|
state: ComboboxState;
|
|
22
23
|
styles: ComboboxStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAc,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/combobox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAc,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,GAAG,EAAE,CAAC;IAEtB,KAAK,EAAE,GAAG,GAAG,SAAS,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE9B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;IAEpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAE/C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,eAAe,EAAE,cAAc,CAAC;IAChC,kBAAkB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,eAAe,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAElE,UAAU,EAAE,OAAO,CAAC;IAEpB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,sDAAwD,CAAC;AAErF,eAAO,MAAM,WAAW,uBAMvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;IAE3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA8BtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"select-option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAKpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAmBF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAuCzE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-overlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-overlay.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select-overlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,KAAK,SAAS,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,KAAK,CAAC,YAAY,CAAC;CAC5D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAsBtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,
|
|
1
|
+
{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,YAAY,CAAC;IAEhE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AASD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAwChD"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { type
|
|
2
|
+
import { type PressableProps, type StyleProp, type TextStyle } from "react-native";
|
|
3
3
|
export interface SelectTriggerProps {
|
|
4
4
|
placeholder?: string;
|
|
5
|
-
style?:
|
|
5
|
+
style?: PressableProps["style"];
|
|
6
6
|
}
|
|
7
7
|
export declare function SelectTrigger(props: SelectTriggerProps): React.JSX.Element;
|
|
8
8
|
export interface SelectValueProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,
|
|
1
|
+
{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA+BtD;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAelD"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { TextStyle } from "react-native";
|
|
2
1
|
import type { SelectContentProps } from "./components/select-content";
|
|
2
|
+
import type { SelectOptionProps } from "./components/select-option";
|
|
3
3
|
import type { SelectOverlayProps } from "./components/select-overlay";
|
|
4
4
|
import type { SelectRootProps } from "./components/select-root";
|
|
5
5
|
import type { SelectTriggerProps, SelectValueProps } from "./components/select-trigger";
|
|
@@ -12,7 +12,7 @@ export interface SelectStyles {
|
|
|
12
12
|
placeholder?: Partial<Record<SelectState, SelectValueProps["style"]>>;
|
|
13
13
|
overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
|
|
14
14
|
content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
|
|
15
|
-
option?: Partial<Record<SelectOptionState,
|
|
15
|
+
option?: Partial<Record<SelectOptionState, SelectOptionProps["style"]>>;
|
|
16
16
|
}
|
|
17
17
|
export interface SelectOption {
|
|
18
18
|
value: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAExF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AACjD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,YAAY,CAmFhE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/table/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,sBAAsB,IAAI,WAAW,
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/table/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,sBAAsB,IAAI,WAAW,CA4CpD"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { type PressableProps, type PressableStateCallbackType, type ViewStyle } from "react-native";
|
|
1
2
|
export declare const calculateComposedStyles: <TStyle, State extends string | "default", Component extends string>(styles: (Partial<Record<Component, Partial<Record<State, TStyle>>>> | null) | undefined, state: State, component: Component, style?: TStyle) => TStyle[];
|
|
2
3
|
export declare const mergeStyles: <TStyle extends Record<string, any>>(variantStyles: TStyle, globalStyles: TStyle | undefined) => TStyle;
|
|
4
|
+
export declare const extractPressableStyles: (style: PressableProps["style"], props: PressableStateCallbackType) => ViewStyle;
|
|
3
5
|
//# sourceMappingURL=calculate-styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calculate-styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/calculate-styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"calculate-styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/calculate-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,0BAA0B,EAC/B,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,uBAAuB,GAClC,MAAM,EACN,KAAK,SAAS,MAAM,GAAG,SAAS,EAChC,SAAS,SAAS,MAAM,EAExB,SAAQ,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,aAAK,EAC9E,OAAO,KAAK,EACZ,WAAW,SAAS,EACpB,QAAQ,MAAM,KACb,MAAM,EAaR,CAAC;AAmBF,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5D,eAAe,MAAM,EACrB,cAAc,MAAM,GAAG,SAAS,KAC/B,MAYF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,cAAc,CAAC,OAAO,CAAC,EAC9B,OAAO,0BAA0B,KAChC,SAKF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { List } from "../../list";
|
|
2
3
|
import { useCombobox } from "../context";
|
|
3
4
|
|
|
4
5
|
export interface ComboboxListProps<T> {
|
|
5
|
-
keyExtractor
|
|
6
|
+
keyExtractor: (item: T, index: number) => string;
|
|
6
7
|
renderItem: (info: { item: T; index: number }) => React.ReactElement;
|
|
7
8
|
renderEmpty?: () => React.ReactElement;
|
|
8
9
|
renderSeparator?: () => React.ReactElement;
|
|
@@ -10,23 +11,14 @@ export interface ComboboxListProps<T> {
|
|
|
10
11
|
|
|
11
12
|
export function ComboboxList<T>(props: ComboboxListProps<T>) {
|
|
12
13
|
const combobox = useCombobox();
|
|
13
|
-
const items = combobox.filteredItems as T[];
|
|
14
|
-
|
|
15
|
-
const keyExtractor =
|
|
16
|
-
props.keyExtractor ?? ((item: T, index: number) => combobox.getItemValue(item) ?? String(index));
|
|
17
|
-
|
|
18
|
-
if (items.length === 0) {
|
|
19
|
-
return <>{props.renderEmpty?.()}</>;
|
|
20
|
-
}
|
|
21
14
|
|
|
22
15
|
return (
|
|
23
|
-
|
|
24
|
-
{items
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</>
|
|
16
|
+
<List
|
|
17
|
+
data={combobox.items as T[]}
|
|
18
|
+
keyExtractor={props.keyExtractor}
|
|
19
|
+
renderItem={props.renderItem}
|
|
20
|
+
renderEmpty={props.renderEmpty}
|
|
21
|
+
renderSeparator={props.renderSeparator}
|
|
22
|
+
/>
|
|
31
23
|
);
|
|
32
24
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
|
|
3
3
|
import type { ElementChildren } from "../../../types/element.types";
|
|
4
|
+
import { setInnerInputValue } from "../../../utils/input-utils";
|
|
4
5
|
import { useCombobox } from "../context";
|
|
5
6
|
import type { ComboboxOptionState, ComboboxState } from "../types";
|
|
6
7
|
|
|
@@ -33,8 +34,11 @@ export function ComboboxOption<T>(props: ComboboxOptionProps<T>) {
|
|
|
33
34
|
const composedStyles = StyleSheet.flatten([optionStyles?.default, optionStyles?.[optionState]]);
|
|
34
35
|
|
|
35
36
|
const handlePress = () => {
|
|
36
|
-
combobox.onChange
|
|
37
|
+
combobox.onChange(props.item);
|
|
37
38
|
combobox.setIsOpen(false);
|
|
39
|
+
if (!combobox.inputRef.current) return;
|
|
40
|
+
const itemLabel = combobox.getItemLabel(props.item);
|
|
41
|
+
setInnerInputValue(combobox.inputRef.current, itemLabel);
|
|
38
42
|
};
|
|
39
43
|
|
|
40
44
|
return (
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo, useRef, useState } from "react";
|
|
2
2
|
import {
|
|
3
3
|
type LayoutRectangle,
|
|
4
4
|
type StyleProp,
|
|
@@ -8,59 +8,24 @@ import {
|
|
|
8
8
|
} from "react-native";
|
|
9
9
|
import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
|
|
10
10
|
import { useComponentConfig } from "../../../themes/provider";
|
|
11
|
+
import type { TextInputRef } from "../../../types/element.types";
|
|
11
12
|
import { mergeStyles } from "../../../utils/calculate-styles";
|
|
12
13
|
import type { Size } from "../../../utils/size-scale";
|
|
13
14
|
import { ComboboxContext } from "../context";
|
|
14
15
|
import type { ComboboxState } from "../types";
|
|
15
16
|
import { ComboboxVariants } from "../variants";
|
|
16
17
|
|
|
17
|
-
const defaultGetItemValue = (item: unknown): string => {
|
|
18
|
-
if (typeof item === "string") return item;
|
|
19
|
-
if (typeof item === "object" && item !== null && "value" in item) {
|
|
20
|
-
return String((item as Record<string, unknown>).value);
|
|
21
|
-
}
|
|
22
|
-
return String(item);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
const defaultGetItemLabel = (item: unknown): string => {
|
|
26
|
-
if (typeof item === "string") return item;
|
|
27
|
-
if (typeof item === "object" && item !== null && "label" in item) {
|
|
28
|
-
return String((item as Record<string, unknown>).label);
|
|
29
|
-
}
|
|
30
|
-
return defaultGetItemValue(item);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
18
|
export interface ComboboxRootProps<T> {
|
|
34
|
-
|
|
35
|
-
items: readonly T[];
|
|
19
|
+
items: T[];
|
|
36
20
|
|
|
37
|
-
|
|
38
|
-
|
|
21
|
+
value: T | null;
|
|
22
|
+
onChange: (item: T) => void;
|
|
39
23
|
|
|
40
|
-
|
|
41
|
-
|
|
24
|
+
inputValue: string;
|
|
25
|
+
onInputChange: (text: string) => void;
|
|
42
26
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
* Defaults to reading `item.value` or `String(item)`.
|
|
46
|
-
*/
|
|
47
|
-
getItemValue?: (item: T) => string;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Extracts a display label from an item (shown in the trigger when selected).
|
|
51
|
-
* Defaults to reading `item.label` or falling back to `getItemValue`.
|
|
52
|
-
*/
|
|
53
|
-
getItemLabel?: (item: T) => string;
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Custom filter function. Return `true` to include the item.
|
|
57
|
-
* Defaults to case-insensitive label includes query.
|
|
58
|
-
* Pass `null` to disable built-in filtering (useful for async search).
|
|
59
|
-
*/
|
|
60
|
-
filter?: ((item: T, query: string) => boolean) | null;
|
|
61
|
-
|
|
62
|
-
/** Called when the text input value changes. Useful for async search. */
|
|
63
|
-
onInputChange?: (text: string) => void;
|
|
27
|
+
getItemValue: (item: T) => string;
|
|
28
|
+
getItemLabel: (item: T) => string;
|
|
64
29
|
|
|
65
30
|
variant?: keyof typeof ComboboxVariants;
|
|
66
31
|
size?: Size;
|
|
@@ -74,20 +39,12 @@ const calculateState = <T,>(props: ComboboxRootProps<T>): ComboboxState => {
|
|
|
74
39
|
return "default";
|
|
75
40
|
};
|
|
76
41
|
|
|
77
|
-
export function ComboboxRoot<T>(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
getItemLabel = defaultGetItemLabel as (item: T) => string,
|
|
84
|
-
filter,
|
|
85
|
-
onInputChange,
|
|
86
|
-
variant = "default",
|
|
87
|
-
size = "md",
|
|
88
|
-
isDisabled = false,
|
|
89
|
-
} = props;
|
|
90
|
-
|
|
42
|
+
export function ComboboxRoot<T>({
|
|
43
|
+
variant = "default",
|
|
44
|
+
size = "md",
|
|
45
|
+
isDisabled = false,
|
|
46
|
+
...props
|
|
47
|
+
}: ComboboxRootProps<T>) {
|
|
91
48
|
const variantStyles = ComboboxVariants[variant](size);
|
|
92
49
|
const globalStyles = useComponentConfig("combobox");
|
|
93
50
|
const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
|
|
@@ -95,42 +52,7 @@ export function ComboboxRoot<T>(props: ComboboxRootProps<T>) {
|
|
|
95
52
|
const [isOpen, setIsOpen] = useState(false);
|
|
96
53
|
const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
|
|
97
54
|
const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
|
|
98
|
-
const
|
|
99
|
-
|
|
100
|
-
// Reset input value when closing
|
|
101
|
-
const prevOpen = useRef(isOpen);
|
|
102
|
-
useEffect(() => {
|
|
103
|
-
if (prevOpen.current && !isOpen) {
|
|
104
|
-
setInputValue("");
|
|
105
|
-
}
|
|
106
|
-
prevOpen.current = isOpen;
|
|
107
|
-
}, [isOpen]);
|
|
108
|
-
|
|
109
|
-
// Notify consumer when input value changes
|
|
110
|
-
const onInputChangeRef = useRef(onInputChange);
|
|
111
|
-
onInputChangeRef.current = onInputChange;
|
|
112
|
-
const isFirstRender = useRef(true);
|
|
113
|
-
useEffect(() => {
|
|
114
|
-
if (isFirstRender.current) {
|
|
115
|
-
isFirstRender.current = false;
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
onInputChangeRef.current?.(inputValue);
|
|
119
|
-
}, [inputValue]);
|
|
120
|
-
|
|
121
|
-
const filteredItems = useMemo(() => {
|
|
122
|
-
if (filter === null) return items;
|
|
123
|
-
if (!inputValue) return items;
|
|
124
|
-
|
|
125
|
-
const filterFn =
|
|
126
|
-
filter ??
|
|
127
|
-
((item: T, query: string) => {
|
|
128
|
-
const label = getItemLabel(item);
|
|
129
|
-
return label.toLowerCase().includes(query.toLowerCase());
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
return items.filter((item) => filterFn(item, inputValue));
|
|
133
|
-
}, [items, inputValue, filter, getItemLabel]);
|
|
55
|
+
const inputRef = useRef<TextInputRef>(null);
|
|
134
56
|
|
|
135
57
|
const state = calculateState(props);
|
|
136
58
|
const composedStyles = StyleSheet.flatten([
|
|
@@ -139,44 +61,38 @@ export function ComboboxRoot<T>(props: ComboboxRootProps<T>) {
|
|
|
139
61
|
props.style,
|
|
140
62
|
]);
|
|
141
63
|
|
|
142
|
-
const
|
|
143
|
-
(item: unknown) => {
|
|
144
|
-
onChange?.(item as T);
|
|
145
|
-
},
|
|
146
|
-
[onChange],
|
|
147
|
-
);
|
|
148
|
-
|
|
149
|
-
const contextValue: ComboboxContext = useMemo(
|
|
64
|
+
const contextValue = useMemo<ComboboxContext>(
|
|
150
65
|
() => ({
|
|
151
|
-
items,
|
|
152
|
-
filteredItems,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
66
|
+
items: props.items,
|
|
67
|
+
filteredItems: props.items,
|
|
68
|
+
value: props.value,
|
|
69
|
+
onChange: props.onChange,
|
|
70
|
+
inputValue: props.inputValue,
|
|
71
|
+
onInputChange: props.onInputChange,
|
|
72
|
+
inputRef,
|
|
73
|
+
getItemValue: props.getItemValue,
|
|
74
|
+
getItemLabel: props.getItemLabel,
|
|
157
75
|
isOpen,
|
|
158
76
|
setIsOpen,
|
|
159
77
|
triggerPosition,
|
|
160
78
|
setTriggerPosition,
|
|
161
79
|
contentLayout,
|
|
162
80
|
setContentLayout,
|
|
163
|
-
inputValue,
|
|
164
|
-
setInputValue,
|
|
165
81
|
state,
|
|
166
82
|
isDisabled,
|
|
167
83
|
styles: mergedStyles,
|
|
168
84
|
}),
|
|
169
85
|
[
|
|
170
|
-
items,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
86
|
+
props.items,
|
|
87
|
+
props.value,
|
|
88
|
+
props.onChange,
|
|
89
|
+
props.inputValue,
|
|
90
|
+
props.onInputChange,
|
|
91
|
+
props.getItemValue,
|
|
92
|
+
props.getItemLabel,
|
|
176
93
|
isOpen,
|
|
177
94
|
triggerPosition,
|
|
178
95
|
contentLayout,
|
|
179
|
-
inputValue,
|
|
180
96
|
state,
|
|
181
97
|
isDisabled,
|
|
182
98
|
mergedStyles,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { StyleSheet, TextInput, type TextInputProps } from "react-native";
|
|
3
3
|
import type { TextInputRef } from "../../../types/element.types";
|
|
4
|
-
import { setInnerInputValue } from "../../../utils/input-utils";
|
|
5
4
|
import { measureLayoutPosition } from "../../../utils/normalize-layout";
|
|
6
5
|
import { useCombobox } from "../context";
|
|
7
6
|
import type { ComboboxTriggerState } from "../types";
|
|
@@ -11,7 +10,8 @@ type ExtendableProps = Omit<TextInputProps, "value" | "onChange" | "onChangeText
|
|
|
11
10
|
type RenderProps = {
|
|
12
11
|
inputRef: React.RefObject<TextInputRef | null>;
|
|
13
12
|
open: () => void;
|
|
14
|
-
|
|
13
|
+
value: string;
|
|
14
|
+
onChange: (value: string) => void;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export type ComboboxTriggerProps = ExtendableProps & {
|
|
@@ -26,50 +26,26 @@ const calculateState = (isDisabled: boolean, isOpen: boolean): ComboboxTriggerSt
|
|
|
26
26
|
|
|
27
27
|
export function ComboboxTrigger({ render, ...props }: ComboboxTriggerProps) {
|
|
28
28
|
const combobox = useCombobox();
|
|
29
|
-
const triggerRef = useRef<TextInputRef>(null);
|
|
30
29
|
|
|
31
30
|
const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
|
|
32
31
|
const selectedLabel = combobox.value != null ? combobox.getItemLabel(combobox.value) : "";
|
|
33
|
-
const displayValue = combobox.isOpen ? combobox.inputValue : selectedLabel;
|
|
34
32
|
|
|
35
33
|
const open = () => {
|
|
36
34
|
if (combobox.isDisabled) return;
|
|
37
|
-
combobox.
|
|
35
|
+
combobox.onInputChange(selectedLabel);
|
|
38
36
|
requestAnimationFrame(() => {
|
|
39
|
-
measureLayoutPosition(
|
|
37
|
+
measureLayoutPosition(combobox.inputRef.current, (layout) => {
|
|
40
38
|
combobox.setTriggerPosition(layout);
|
|
41
39
|
combobox.setIsOpen(true);
|
|
42
40
|
});
|
|
43
41
|
});
|
|
44
42
|
};
|
|
45
43
|
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (!combobox.isOpen) open();
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const onFocus = () => {
|
|
53
|
-
if (!combobox.isOpen) open();
|
|
44
|
+
const onFocus: TextInputProps["onFocus"] = (e) => {
|
|
45
|
+
props.onFocus?.(e);
|
|
46
|
+
open();
|
|
54
47
|
};
|
|
55
48
|
|
|
56
|
-
const setInputValue = (value: string) => {
|
|
57
|
-
combobox.setInputValue(value);
|
|
58
|
-
if (triggerRef.current) {
|
|
59
|
-
setInnerInputValue(triggerRef.current, value);
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
setInputValue(displayValue);
|
|
65
|
-
}, [displayValue]);
|
|
66
|
-
|
|
67
|
-
useEffect(() => {
|
|
68
|
-
if (!combobox.isOpen) {
|
|
69
|
-
triggerRef.current?.blur();
|
|
70
|
-
}
|
|
71
|
-
}, [combobox.isOpen]);
|
|
72
|
-
|
|
73
49
|
const triggerStyles = combobox.styles?.trigger;
|
|
74
50
|
const composedProps: TextInputProps = {
|
|
75
51
|
...triggerStyles?.default,
|
|
@@ -89,19 +65,20 @@ export function ComboboxTrigger({ render, ...props }: ComboboxTriggerProps) {
|
|
|
89
65
|
|
|
90
66
|
if (render) {
|
|
91
67
|
return render({
|
|
92
|
-
inputRef:
|
|
68
|
+
inputRef: combobox.inputRef,
|
|
93
69
|
open,
|
|
94
|
-
|
|
70
|
+
value: combobox.inputValue,
|
|
71
|
+
onChange: combobox.onInputChange,
|
|
95
72
|
});
|
|
96
73
|
}
|
|
97
74
|
|
|
98
75
|
return (
|
|
99
76
|
<TextInput
|
|
100
77
|
{...composedProps}
|
|
101
|
-
ref={
|
|
78
|
+
ref={combobox.inputRef}
|
|
102
79
|
value={undefined}
|
|
103
80
|
onChange={undefined}
|
|
104
|
-
onChangeText={
|
|
81
|
+
onChangeText={combobox.onInputChange}
|
|
105
82
|
onFocus={onFocus}
|
|
106
83
|
style={composedStyle}
|
|
107
84
|
/>
|