@impulse-ui-native/select 11.0.0 → 11.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -0
- package/dist/components/multi-select.d.mts +2 -2
- package/dist/components/multi-select.js +6 -8
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/select-control.d.mts +3 -2
- package/dist/components/select-control.js +10 -13
- package/dist/components/select-control.js.map +1 -1
- package/dist/components/select-flyout-option.d.mts +2 -2
- package/dist/components/select-flyout-option.js +4 -6
- package/dist/components/select-flyout-option.js.map +1 -1
- package/dist/components/select-options.d.mts +2 -2
- package/dist/components/select-options.js +5 -5
- package/dist/components/select-options.js.map +1 -1
- package/dist/components/select.d.mts +2 -2
- package/dist/components/select.flyout.d.mts +2 -2
- package/dist/components/select.flyout.js +4 -5
- package/dist/components/select.flyout.js.map +1 -1
- package/dist/components/select.js +4 -5
- package/dist/components/select.js.map +1 -1
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -56,3 +56,19 @@ export function DepartmentField() {
|
|
|
56
56
|
Both controls support controlled `value` and uncontrolled `defaultValue` usage. Values are limited to strings, numbers, `null`, and `undefined`; multi-select stores an array of those values.
|
|
57
57
|
|
|
58
58
|
On each opening, Select reveals its selected option. MultiSelect reveals the first selected option in list order. Lists that fit within the flyout stay at the top so all rows remain visible. Longer lists use native initial scrolling to reveal the opening selection. Options are single-line rows with a fixed `theme.components.select.option.height` (56 by default), also supplied to native `getItemLayout`. Long labels truncate at the end. Selection changes while open do not change the opening target. Set `initialScrollToSelected={false}` to retain the normal starting position.
|
|
59
|
+
|
|
60
|
+
## Field layout
|
|
61
|
+
|
|
62
|
+
Select and MultiSelect accept flex, dimension, and spacing props on the outer
|
|
63
|
+
field, including its label and error. No extra field wrappers are needed:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
<View flexDirection="row" gap={space.xs}>
|
|
67
|
+
<Select flex={1} options={options} />
|
|
68
|
+
<Select flex={1} options={options} />
|
|
69
|
+
</View>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
In a column, fields stretch horizontally by default without vertical growth.
|
|
73
|
+
For a parent with `alignItems="center"`, use `alignSelf="stretch"` on the field
|
|
74
|
+
or set an explicit `width`. No default `flex` is applied.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { PrimitiveValue, MultiSelectProps } from '../types/select.types.mjs';
|
|
3
3
|
import '@impulse-ui-native/flyout';
|
|
4
4
|
import '@impulse-ui-native/primitives';
|
|
5
5
|
|
|
6
|
-
declare const MultiSelect: <Value extends PrimitiveValue>(props: MultiSelectProps<Value>) =>
|
|
6
|
+
declare const MultiSelect: <Value extends PrimitiveValue>(props: MultiSelectProps<Value>) => react.JSX.Element;
|
|
7
7
|
|
|
8
8
|
export { MultiSelect };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { useEventCallback, useIsOpen } from "@impulse-ui-native/core";
|
|
2
|
+
import { useId } from "react";
|
|
3
|
+
import { memo, useEventCallback, useIsOpen } from "@impulse-ui-native/core";
|
|
4
4
|
import { Control, Tag, View } from "@impulse-ui-native/primitives";
|
|
5
5
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
6
6
|
import { useMultiSelect } from "../hooks/use-multi-select.hook";
|
|
7
7
|
import { SelectControl } from "./select-control";
|
|
8
8
|
import { SelectFlyout } from "./select.flyout";
|
|
9
|
-
function SelectedTagComponent(props) {
|
|
9
|
+
const SelectedTag = memo(function SelectedTagComponent(props) {
|
|
10
10
|
const handleClose = useEventCallback(() => props.onSelect(props.value));
|
|
11
11
|
return /* @__PURE__ */ jsx(
|
|
12
12
|
Tag,
|
|
@@ -18,9 +18,8 @@ function SelectedTagComponent(props) {
|
|
|
18
18
|
label: props.label
|
|
19
19
|
}
|
|
20
20
|
);
|
|
21
|
-
}
|
|
22
|
-
const
|
|
23
|
-
function MultiSelectComponent(props) {
|
|
21
|
+
});
|
|
22
|
+
const MultiSelect = memo(function MultiSelectComponent(props) {
|
|
24
23
|
const {
|
|
25
24
|
options,
|
|
26
25
|
value,
|
|
@@ -76,8 +75,7 @@ function MultiSelectComponent(props) {
|
|
|
76
75
|
}
|
|
77
76
|
)
|
|
78
77
|
] });
|
|
79
|
-
}
|
|
80
|
-
const MultiSelect = memo(MultiSelectComponent);
|
|
78
|
+
});
|
|
81
79
|
export {
|
|
82
80
|
MultiSelect
|
|
83
81
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useId } from \"react\";\n\nimport { memo, useEventCallback, useIsOpen } from \"@impulse-ui-native/core\";\nimport { Control, Tag, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { useMultiSelect } from \"../hooks/use-multi-select.hook\";\nimport { MultiSelectProps, PrimitiveValue } from \"../types\";\nimport { SelectControl } from \"./select-control\";\nimport { SelectFlyout } from \"./select.flyout\";\n\ninterface SelectedTagProps<Value extends PrimitiveValue> {\n value: Value;\n label: string;\n size: MultiSelectProps<Value>[\"size\"];\n onSelect: (value: Value) => void;\n}\n\nconst SelectedTag = memo(function SelectedTagComponent<\n Value extends PrimitiveValue,\n>(props: SelectedTagProps<Value>) {\n const handleClose = useEventCallback(() => props.onSelect(props.value));\n\n return (\n <Tag\n variant=\"filled\"\n size={props.size}\n closable\n onClose={handleClose}\n label={props.label}\n />\n );\n});\n\nexport const MultiSelect = memo(function MultiSelectComponent<\n Value extends PrimitiveValue,\n>(props: MultiSelectProps<Value>) {\n const {\n options,\n value,\n defaultValue,\n onChange,\n placeholder,\n initialScrollToSelected,\n ...rest\n } = props;\n\n const tokens = useComponentsTokens();\n\n const selectTokens = tokens.select;\n\n const id = useId();\n\n const { isOpen, open, close } = useIsOpen();\n\n const { selected, hasSelected, select, isSelected, getLabel } =\n useMultiSelect({\n options,\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <SelectControl {...rest} onPress={open}>\n {!hasSelected ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n {hasSelected ? (\n <View\n flex={1}\n flexDirection=\"row\"\n gap={selectTokens.multiValueGap}\n marginHorizontal={selectTokens.multiValueMarginHorizontal}\n overflow=\"hidden\"\n >\n {selected\n ? selected.map((value) => (\n <SelectedTag\n size={props.size}\n key={value}\n label={String(getLabel(value))}\n value={value}\n onSelect={select}\n />\n ))\n : null}\n </View>\n ) : null}\n <SelectFlyout\n id={id}\n title=\"Options\"\n open={isOpen}\n options={options}\n initialScrollToSelected={initialScrollToSelected}\n isSelected={isSelected}\n onCloseFinished={close}\n onSelect={select}\n />\n </SelectControl>\n );\n});\n"],"mappings":"AAwBI,cAwCA,YAxCA;AAxBJ,SAAS,aAAa;AAEtB,SAAS,MAAM,kBAAkB,iBAAiB;AAClD,SAAS,SAAS,KAAK,YAAY;AACnC,SAAS,2BAA2B;AAEpC,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAS7B,MAAM,cAAc,KAAK,SAAS,qBAEhC,OAAgC;AAChC,QAAM,cAAc,iBAAiB,MAAM,MAAM,SAAS,MAAM,KAAK,CAAC;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAM,MAAM;AAAA,MACZ,UAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO,MAAM;AAAA;AAAA,EACf;AAEJ,CAAC;AAEM,MAAM,cAAc,KAAK,SAAS,qBAEvC,OAAgC;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AAEnC,QAAM,eAAe,OAAO;AAE5B,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,QAAQ,MAAM,MAAM,IAAI,UAAU;AAE1C,QAAM,EAAE,UAAU,aAAa,QAAQ,YAAY,SAAS,IAC1D,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,SACE,qBAAC,iBAAe,GAAG,MAAM,SAAS,MAC/B;AAAA,KAAC,cACA,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IACH,cACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,eAAc;AAAA,QACd,KAAK,aAAa;AAAA,QAClB,kBAAkB,aAAa;AAAA,QAC/B,UAAS;AAAA,QAER,qBACG,SAAS,IAAI,CAACA,WACZ;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,MAAM;AAAA,YAEZ,OAAO,OAAO,SAASA,MAAK,CAAC;AAAA,YAC7B,OAAOA;AAAA,YACP,UAAU;AAAA;AAAA,UAHLA;AAAA,QAIP,CACD,IACD;AAAA;AAAA,IACN,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ,CAAC;","names":["value"]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
2
3
|
import { PrimitiveValue, SelectControlProps } from '../types/select.types.mjs';
|
|
3
4
|
import '@impulse-ui-native/flyout';
|
|
4
5
|
import '@impulse-ui-native/primitives';
|
|
5
6
|
|
|
6
|
-
declare const SelectControl: <Value extends PrimitiveValue>(props: PropsWithChildren<SelectControlProps<Value>>) =>
|
|
7
|
+
declare const SelectControl: <Value extends PrimitiveValue>({ loading, PrefixIcon, Prefix, SuffixIcon, Suffix, children, ...props }: PropsWithChildren<SelectControlProps<Value>>) => react.JSX.Element;
|
|
7
8
|
|
|
8
9
|
export { SelectControl };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { memo } from "@impulse-ui-native/core";
|
|
3
4
|
import { Control } from "@impulse-ui-native/primitives";
|
|
4
|
-
function SelectControlComponent({
|
|
5
|
+
const SelectControl = memo(function SelectControlComponent({
|
|
5
6
|
loading,
|
|
6
7
|
PrefixIcon,
|
|
7
8
|
Prefix,
|
|
@@ -10,15 +11,12 @@ function SelectControlComponent({
|
|
|
10
11
|
children,
|
|
11
12
|
...props
|
|
12
13
|
}) {
|
|
13
|
-
const prefix = useMemo(
|
|
14
|
-
()
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
[Prefix, PrefixIcon]
|
|
21
|
-
);
|
|
14
|
+
const prefix = useMemo(() => {
|
|
15
|
+
if (Prefix) {
|
|
16
|
+
return /* @__PURE__ */ jsx(Prefix, {});
|
|
17
|
+
}
|
|
18
|
+
return PrefixIcon ? /* @__PURE__ */ jsx(Control.Icon, { icon: PrefixIcon }) : null;
|
|
19
|
+
}, [Prefix, PrefixIcon]);
|
|
22
20
|
const suffix = useMemo(() => {
|
|
23
21
|
if (loading) {
|
|
24
22
|
return /* @__PURE__ */ jsx(Control.Loader, {});
|
|
@@ -29,8 +27,7 @@ function SelectControlComponent({
|
|
|
29
27
|
return SuffixIcon ? /* @__PURE__ */ jsx(Control.Icon, { icon: SuffixIcon }) : null;
|
|
30
28
|
}, [loading, Suffix, SuffixIcon]);
|
|
31
29
|
return /* @__PURE__ */ jsx(Control.Field, { ...props, prefix, suffix, children });
|
|
32
|
-
}
|
|
33
|
-
const SelectControl = memo(SelectControlComponent);
|
|
30
|
+
});
|
|
34
31
|
export {
|
|
35
32
|
SelectControl
|
|
36
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select-control.tsx"],"sourcesContent":["import type { PropsWithChildren
|
|
1
|
+
{"version":3,"sources":["../../src/components/select-control.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { Control } from \"@impulse-ui-native/primitives\";\n\nimport type { PrimitiveValue, SelectControlProps } from \"../types\";\n\nexport const SelectControl = memo(function SelectControlComponent<\n Value extends PrimitiveValue,\n>({\n loading,\n PrefixIcon,\n Prefix,\n SuffixIcon,\n Suffix,\n children,\n ...props\n}: PropsWithChildren<SelectControlProps<Value>>) {\n const prefix = useMemo(() => {\n if (Prefix) {\n return <Prefix />;\n }\n\n return PrefixIcon ? <Control.Icon icon={PrefixIcon} /> : null;\n }, [Prefix, PrefixIcon]);\n const suffix = useMemo(() => {\n if (loading) {\n return <Control.Loader />;\n }\n\n if (Suffix) {\n return <Suffix />;\n }\n\n return SuffixIcon ? <Control.Icon icon={SuffixIcon} /> : null;\n }, [loading, Suffix, SuffixIcon]);\n\n return (\n <Control.Field {...props} prefix={prefix} suffix={suffix}>\n {children}\n </Control.Field>\n );\n});\n"],"mappings":"AAqBa;AApBb,SAAS,eAAe;AAExB,SAAS,YAAY;AACrB,SAAS,eAAe;AAIjB,MAAM,gBAAgB,KAAK,SAAS,uBAEzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,QAAQ;AACV,aAAO,oBAAC,UAAO;AAAA,IACjB;AAEA,WAAO,aAAa,oBAAC,QAAQ,MAAR,EAAa,MAAM,YAAY,IAAK;AAAA,EAC3D,GAAG,CAAC,QAAQ,UAAU,CAAC;AACvB,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,SAAS;AACX,aAAO,oBAAC,QAAQ,QAAR,EAAe;AAAA,IACzB;AAEA,QAAI,QAAQ;AACV,aAAO,oBAAC,UAAO;AAAA,IACjB;AAEA,WAAO,aAAa,oBAAC,QAAQ,MAAR,EAAa,MAAM,YAAY,IAAK;AAAA,EAC3D,GAAG,CAAC,SAAS,QAAQ,UAAU,CAAC;AAEhC,SACE,oBAAC,QAAQ,OAAR,EAAe,GAAG,OAAO,QAAgB,QACvC,UACH;AAEJ,CAAC;","names":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { SelectFlyoutOptionProps } from '../types/select-options.types.mjs';
|
|
3
3
|
import { PrimitiveValue } from '../types/select.types.mjs';
|
|
4
4
|
import '@impulse-ui-native/flyout';
|
|
5
5
|
import '@impulse-ui-native/primitives';
|
|
6
6
|
|
|
7
|
-
declare const SelectFlyoutOption: <Value extends PrimitiveValue>(props: SelectFlyoutOptionProps<Value>) =>
|
|
7
|
+
declare const SelectFlyoutOption: <Value extends PrimitiveValue>(props: SelectFlyoutOptionProps<Value>) => react.JSX.Element;
|
|
8
8
|
|
|
9
9
|
export { SelectFlyoutOption };
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from "
|
|
3
|
-
import { useEventCallback } from "@impulse-ui-native/core";
|
|
2
|
+
import { memo, useEventCallback } from "@impulse-ui-native/core";
|
|
4
3
|
import { Option } from "./option";
|
|
5
|
-
const
|
|
4
|
+
const SelectFlyoutOption = memo(function SelectFlyoutOption2(props) {
|
|
6
5
|
const handlePress = useEventCallback(
|
|
7
6
|
() => props.onSelect(props.option.value)
|
|
8
7
|
);
|
|
@@ -15,9 +14,8 @@ const SelectFlyoutOptionComponent = function SelectFlyoutOption(props) {
|
|
|
15
14
|
selected: props.selected
|
|
16
15
|
}
|
|
17
16
|
);
|
|
18
|
-
};
|
|
19
|
-
const SelectFlyoutOption2 = memo(SelectFlyoutOptionComponent);
|
|
17
|
+
});
|
|
20
18
|
export {
|
|
21
|
-
|
|
19
|
+
SelectFlyoutOption
|
|
22
20
|
};
|
|
23
21
|
//# sourceMappingURL=select-flyout-option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select-flyout-option.tsx"],"sourcesContent":["import { memo,
|
|
1
|
+
{"version":3,"sources":["../../src/components/select-flyout-option.tsx"],"sourcesContent":["import { memo, useEventCallback } from \"@impulse-ui-native/core\";\n\nimport type { SelectFlyoutOptionProps } from \"../types/select-options.types\";\nimport { PrimitiveValue } from \"../types\";\nimport { Option } from \"./option\";\n\nexport const SelectFlyoutOption = memo(function SelectFlyoutOption<\n Value extends PrimitiveValue,\n>(props: SelectFlyoutOptionProps<Value>) {\n const handlePress = useEventCallback(() =>\n props.onSelect(props.option.value),\n );\n\n return (\n <Option\n label={props.option.label}\n onPress={handlePress}\n disabled={props.option.disabled}\n selected={props.selected}\n />\n );\n});\n"],"mappings":"AAcI;AAdJ,SAAS,MAAM,wBAAwB;AAIvC,SAAS,cAAc;AAEhB,MAAM,qBAAqB,KAAK,SAASA,oBAE9C,OAAuC;AACvC,QAAM,cAAc;AAAA,IAAiB,MACnC,MAAM,SAAS,MAAM,OAAO,KAAK;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,MACT,UAAU,MAAM,OAAO;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,EAClB;AAEJ,CAAC;","names":["SelectFlyoutOption"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { SelectOptionsProps } from '../types/select-options.types.mjs';
|
|
3
3
|
import { PrimitiveValue } from '../types/select.types.mjs';
|
|
4
4
|
import '@impulse-ui-native/flyout';
|
|
5
5
|
import '@impulse-ui-native/primitives';
|
|
6
6
|
|
|
7
|
-
declare const SelectOptions: <Value extends PrimitiveValue>(props: SelectOptionsProps<Value>) =>
|
|
7
|
+
declare const SelectOptions: <Value extends PrimitiveValue>(props: SelectOptionsProps<Value>) => react.JSX.Element;
|
|
8
8
|
|
|
9
9
|
export { SelectOptions };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useCallback, useMemo, useRef } from "react";
|
|
3
|
+
import { memo } from "@impulse-ui-native/core";
|
|
3
4
|
import {
|
|
4
5
|
FlatList,
|
|
5
6
|
useFlatListInitialScroll
|
|
@@ -7,7 +8,7 @@ import {
|
|
|
7
8
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
8
9
|
import { getOptionId } from "../utils";
|
|
9
10
|
import { SelectFlyoutOption } from "./select-flyout-option";
|
|
10
|
-
const
|
|
11
|
+
const SelectOptions = memo(function SelectOptions2(props) {
|
|
11
12
|
const { options, isSelected, onSelect, initialScrollToSelected } = props;
|
|
12
13
|
const initialSelection = useRef(isSelected);
|
|
13
14
|
const { select: tokens } = useComponentsTokens();
|
|
@@ -57,9 +58,8 @@ const SelectOptionsComponent = function SelectOptions(props) {
|
|
|
57
58
|
updateCellsBatchingPeriod: 32
|
|
58
59
|
}
|
|
59
60
|
);
|
|
60
|
-
};
|
|
61
|
-
const SelectOptions2 = memo(SelectOptionsComponent);
|
|
61
|
+
});
|
|
62
62
|
export {
|
|
63
|
-
|
|
63
|
+
SelectOptions
|
|
64
64
|
};
|
|
65
65
|
//# sourceMappingURL=select-options.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select-options.tsx"],"sourcesContent":["import type { ListRenderItemInfo } from \"react-native\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/select-options.tsx"],"sourcesContent":["import type { ListRenderItemInfo } from \"react-native\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport {\n FlatList,\n useFlatListInitialScroll,\n} from \"@impulse-ui-native/flat-list\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { SelectOptionsProps } from \"../types/select-options.types\";\nimport { PrimitiveValue, SelectOption } from \"../types\";\nimport { getOptionId } from \"../utils\";\nimport { SelectFlyoutOption } from \"./select-flyout-option\";\n\nexport const SelectOptions = memo(function SelectOptions<\n Value extends PrimitiveValue,\n>(props: SelectOptionsProps<Value>) {\n const { options, isSelected, onSelect, initialScrollToSelected } = props;\n\n const initialSelection = useRef(isSelected);\n\n const { select: tokens } = useComponentsTokens();\n\n const optionHeight = tokens.option.height;\n const optionsHeight = options.length * optionHeight;\n const canScroll = optionsHeight > tokens.flyoutHeight;\n\n const selectedIndex = useMemo(\n () =>\n options.findIndex(\n (option) =>\n option.value !== null &&\n option.value !== undefined &&\n initialSelection.current(option.value),\n ),\n [options],\n );\n\n const shouldScrollToSelected =\n initialScrollToSelected && canScroll && selectedIndex >= 0;\n const initialScrollIndex = shouldScrollToSelected ? selectedIndex : undefined;\n\n const initialScroll = useFlatListInitialScroll<SelectOption<Value>>({\n itemSize: optionHeight,\n initialScrollIndex,\n });\n\n const renderItem = useCallback(\n ({ item }: ListRenderItemInfo<SelectOption<Value>>) => {\n const selected = isSelected(item.value);\n\n return (\n <SelectFlyoutOption\n option={item}\n selected={selected}\n onSelect={onSelect}\n />\n );\n },\n [isSelected, onSelect],\n );\n\n return (\n <FlatList\n {...initialScroll}\n data={options}\n renderItem={renderItem}\n keyExtractor={getOptionId}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardShouldPersistTaps=\"handled\"\n removeClippedSubviews\n windowSize={5}\n initialNumToRender={12}\n maxToRenderPerBatch={12}\n updateCellsBatchingPeriod={32}\n />\n );\n});\n"],"mappings":"AAqDQ;AApDR,SAAS,aAAa,SAAS,cAAc;AAE7C,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AAIpC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAE5B,MAAM,gBAAgB,KAAK,SAASA,eAEzC,OAAkC;AAClC,QAAM,EAAE,SAAS,YAAY,UAAU,wBAAwB,IAAI;AAEnE,QAAM,mBAAmB,OAAO,UAAU;AAE1C,QAAM,EAAE,QAAQ,OAAO,IAAI,oBAAoB;AAE/C,QAAM,eAAe,OAAO,OAAO;AACnC,QAAM,gBAAgB,QAAQ,SAAS;AACvC,QAAM,YAAY,gBAAgB,OAAO;AAEzC,QAAM,gBAAgB;AAAA,IACpB,MACE,QAAQ;AAAA,MACN,CAAC,WACC,OAAO,UAAU,QACjB,OAAO,UAAU,UACjB,iBAAiB,QAAQ,OAAO,KAAK;AAAA,IACzC;AAAA,IACF,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,yBACJ,2BAA2B,aAAa,iBAAiB;AAC3D,QAAM,qBAAqB,yBAAyB,gBAAgB;AAEpE,QAAM,gBAAgB,yBAA8C;AAAA,IAClE,UAAU;AAAA,IACV;AAAA,EACF,CAAC;AAED,QAAM,aAAa;AAAA,IACjB,CAAC,EAAE,KAAK,MAA+C;AACrD,YAAM,WAAW,WAAW,KAAK,KAAK;AAEtC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR;AAAA,UACA;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA,cAAc;AAAA,MACd,gCAAgC;AAAA,MAChC,8BAA8B;AAAA,MAC9B,2BAA0B;AAAA,MAC1B,uBAAqB;AAAA,MACrB,YAAY;AAAA,MACZ,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB,2BAA2B;AAAA;AAAA,EAC7B;AAEJ,CAAC;","names":["SelectOptions"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { PrimitiveValue, SelectProps } from '../types/select.types.mjs';
|
|
3
3
|
import '@impulse-ui-native/flyout';
|
|
4
4
|
import '@impulse-ui-native/primitives';
|
|
5
5
|
|
|
6
|
-
declare const Select: <Value extends PrimitiveValue>(props: SelectProps<Value>) =>
|
|
6
|
+
declare const Select: <Value extends PrimitiveValue>(props: SelectProps<Value>) => react.JSX.Element;
|
|
7
7
|
|
|
8
8
|
export { Select };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { PrimitiveValue, SelectFlyoutProps } from '../types/select.types.mjs';
|
|
3
3
|
import '@impulse-ui-native/flyout';
|
|
4
4
|
import '@impulse-ui-native/primitives';
|
|
5
5
|
|
|
6
|
-
declare const SelectFlyout: <Value extends PrimitiveValue>(props: SelectFlyoutProps<Value>) =>
|
|
6
|
+
declare const SelectFlyout: <Value extends PrimitiveValue>(props: SelectFlyoutProps<Value>) => react.JSX.Element;
|
|
7
7
|
|
|
8
8
|
export { SelectFlyout };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { useEventCallback } from "@impulse-ui-native/core";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { memo, useEventCallback } from "@impulse-ui-native/core";
|
|
4
4
|
import { Flyout } from "@impulse-ui-native/flyout";
|
|
5
5
|
import { Portal } from "@impulse-ui-native/portal";
|
|
6
6
|
import { View } from "@impulse-ui-native/primitives";
|
|
7
7
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
8
8
|
import { SelectOptions } from "./select-options";
|
|
9
|
-
const
|
|
9
|
+
const SelectFlyout = memo(function SelectFlyoutContent(props) {
|
|
10
10
|
const {
|
|
11
11
|
options,
|
|
12
12
|
isSelected,
|
|
@@ -31,8 +31,7 @@ const SelectFlyoutComponent = function SelectFlyoutContent(props) {
|
|
|
31
31
|
},
|
|
32
32
|
openingKey
|
|
33
33
|
) }) }) });
|
|
34
|
-
};
|
|
35
|
-
const SelectFlyout = memo(SelectFlyoutComponent);
|
|
34
|
+
});
|
|
36
35
|
export {
|
|
37
36
|
SelectFlyout
|
|
38
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.flyout.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.flyout.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { memo, useEventCallback } from \"@impulse-ui-native/core\";\nimport { Flyout } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { PrimitiveValue, SelectFlyoutProps } from \"../types\";\nimport { SelectOptions } from \"./select-options\";\n\nexport const SelectFlyout = memo(function SelectFlyoutContent<\n Value extends PrimitiveValue,\n>(props: SelectFlyoutProps<Value>) {\n const {\n options,\n isSelected,\n onSelect,\n initialScrollToSelected = true,\n ...rest\n } = props;\n\n const [openingKey, setOpeningKey] = useState(0);\n\n const tokens = useComponentsTokens();\n\n const handleOpen = useEventCallback((id: string) => {\n setOpeningKey((key) => key + 1);\n rest.onOpen?.(id);\n });\n\n const shouldScrollToSelected = Boolean(rest.open) && initialScrollToSelected;\n\n return (\n <Portal>\n <Flyout {...rest} onOpen={handleOpen}>\n <View height={tokens.select.flyoutHeight}>\n <SelectOptions\n key={openingKey}\n options={options}\n isSelected={isSelected}\n onSelect={onSelect}\n initialScrollToSelected={shouldScrollToSelected}\n />\n </View>\n </Flyout>\n </Portal>\n );\n});\n"],"mappings":"AAqCU;AArCV,SAAS,gBAAgB;AAEzB,SAAS,MAAM,wBAAwB;AACvC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,qBAAqB;AAEvB,MAAM,eAAe,KAAK,SAAS,oBAExC,OAAiC;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,0BAA0B;AAAA,IAC1B,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,QAAM,SAAS,oBAAoB;AAEnC,QAAM,aAAa,iBAAiB,CAAC,OAAe;AAClD,kBAAc,CAAC,QAAQ,MAAM,CAAC;AAC9B,SAAK,SAAS,EAAE;AAAA,EAClB,CAAC;AAED,QAAM,yBAAyB,QAAQ,KAAK,IAAI,KAAK;AAErD,SACE,oBAAC,UACC,8BAAC,UAAQ,GAAG,MAAM,QAAQ,YACxB,8BAAC,QAAK,QAAQ,OAAO,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA,yBAAyB;AAAA;AAAA,IAJpB;AAAA,EAKP,GACF,GACF,GACF;AAEJ,CAAC;","names":[]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { useIsOpen } from "@impulse-ui-native/core";
|
|
2
|
+
import { useCallback, useId } from "react";
|
|
3
|
+
import { memo, useIsOpen } from "@impulse-ui-native/core";
|
|
4
4
|
import { Control } from "@impulse-ui-native/primitives";
|
|
5
5
|
import { useSelect } from "../hooks/use-select.hook";
|
|
6
6
|
import { SelectControl } from "./select-control";
|
|
7
7
|
import { SelectFlyout } from "./select.flyout";
|
|
8
|
-
function SelectComponent(props) {
|
|
8
|
+
const Select = memo(function SelectComponent(props) {
|
|
9
9
|
const {
|
|
10
10
|
options,
|
|
11
11
|
value,
|
|
@@ -48,8 +48,7 @@ function SelectComponent(props) {
|
|
|
48
48
|
}
|
|
49
49
|
)
|
|
50
50
|
] });
|
|
51
|
-
}
|
|
52
|
-
const Select = memo(SelectComponent);
|
|
51
|
+
});
|
|
53
52
|
export {
|
|
54
53
|
Select
|
|
55
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\n\nimport { memo, useIsOpen } from \"@impulse-ui-native/core\";\nimport { Control } from \"@impulse-ui-native/primitives\";\n\nimport { useSelect } from \"../hooks/use-select.hook\";\nimport { PrimitiveValue, SelectProps } from \"../types\";\nimport { SelectControl } from \"./select-control\";\nimport { SelectFlyout } from \"./select.flyout\";\n\nexport const Select = memo(function SelectComponent<\n Value extends PrimitiveValue,\n>(props: SelectProps<Value>) {\n const {\n options,\n value,\n defaultValue,\n onChange,\n placeholder,\n initialScrollToSelected,\n ...rest\n } = props;\n\n const id = useId();\n\n const { isOpen, open, close } = useIsOpen();\n\n const { selected, hasSelected, select, isSelected, getLabel } = useSelect({\n options,\n value,\n defaultValue,\n onChange,\n });\n\n const handleOnSelect = useCallback(\n (value: Value) => {\n select(value);\n close();\n },\n [select, close],\n );\n\n const hasSelectedValue = selected !== null && selected !== undefined;\n\n return (\n <SelectControl {...rest} onPress={open}>\n {!hasSelected ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n {hasSelectedValue ? (\n <Control.Value>{getLabel(selected)}</Control.Value>\n ) : null}\n <SelectFlyout\n id={id}\n title=\"Options\"\n open={isOpen}\n options={options}\n initialScrollToSelected={initialScrollToSelected}\n isSelected={isSelected}\n onCloseFinished={close}\n onSelect={handleOnSelect}\n />\n </SelectControl>\n );\n});\n"],"mappings":"AA6CI,SAEI,KAFJ;AA7CJ,SAAS,aAAa,aAAa;AAEnC,SAAS,MAAM,iBAAiB;AAChC,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAEtB,MAAM,SAAS,KAAK,SAAS,gBAElC,OAA2B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,QAAQ,MAAM,MAAM,IAAI,UAAU;AAE1C,QAAM,EAAE,UAAU,aAAa,QAAQ,YAAY,SAAS,IAAI,UAAU;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,CAACA,WAAiB;AAChB,aAAOA,MAAK;AACZ,YAAM;AAAA,IACR;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,mBAAmB,aAAa,QAAQ,aAAa;AAE3D,SACE,qBAAC,iBAAe,GAAG,MAAM,SAAS,MAC/B;AAAA,KAAC,cACA,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IACH,mBACC,oBAAC,QAAQ,OAAR,EAAe,mBAAS,QAAQ,GAAE,IACjC;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ,CAAC;","names":["value"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/select",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.1.0",
|
|
4
4
|
"description": "Select and option picker components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/theme": "11.
|
|
32
|
-
"@impulse-ui-native/input": "11.
|
|
33
|
-
"@impulse-ui-native/icon": "11.
|
|
34
|
-
"@impulse-ui-native/core": "11.
|
|
35
|
-
"@impulse-ui-native/primitives": "11.
|
|
36
|
-
"@impulse-ui-native/flyout": "11.
|
|
37
|
-
"@impulse-ui-native/portal": "11.
|
|
38
|
-
"@impulse-ui-native/flat-list": "11.
|
|
31
|
+
"@impulse-ui-native/theme": "11.1.0",
|
|
32
|
+
"@impulse-ui-native/input": "11.1.0",
|
|
33
|
+
"@impulse-ui-native/icon": "11.1.0",
|
|
34
|
+
"@impulse-ui-native/core": "11.1.0",
|
|
35
|
+
"@impulse-ui-native/primitives": "11.1.0",
|
|
36
|
+
"@impulse-ui-native/flyout": "11.1.0",
|
|
37
|
+
"@impulse-ui-native/portal": "11.1.0",
|
|
38
|
+
"@impulse-ui-native/flat-list": "11.1.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@impulse-ui-native/eslint-config": "1.0.0",
|