@impulse-ui-native/select 11.0.0 → 11.0.1
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/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
|
@@ -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.0.
|
|
3
|
+
"version": "11.0.1",
|
|
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.0.
|
|
32
|
-
"@impulse-ui-native/input": "11.0.
|
|
33
|
-
"@impulse-ui-native/icon": "11.0.
|
|
34
|
-
"@impulse-ui-native/core": "11.0.
|
|
35
|
-
"@impulse-ui-native/primitives": "11.0.
|
|
36
|
-
"@impulse-ui-native/flyout": "11.0.
|
|
37
|
-
"@impulse-ui-native/portal": "11.0.
|
|
38
|
-
"@impulse-ui-native/flat-list": "11.0.
|
|
31
|
+
"@impulse-ui-native/theme": "11.0.1",
|
|
32
|
+
"@impulse-ui-native/input": "11.0.1",
|
|
33
|
+
"@impulse-ui-native/icon": "11.0.1",
|
|
34
|
+
"@impulse-ui-native/core": "11.0.1",
|
|
35
|
+
"@impulse-ui-native/primitives": "11.0.1",
|
|
36
|
+
"@impulse-ui-native/flyout": "11.0.1",
|
|
37
|
+
"@impulse-ui-native/portal": "11.0.1",
|
|
38
|
+
"@impulse-ui-native/flat-list": "11.0.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@impulse-ui-native/eslint-config": "1.0.0",
|