@impulse-ui-native/select 6.0.0 → 6.2.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { memo, ReactElement, useId } from \"react\";\n\nimport { 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\nfunction SelectedTagComponent<Value extends PrimitiveValue>(\n props: SelectedTagProps<Value>,\n) {\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\nconst SelectedTag = memo(SelectedTagComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectedTagProps<Value>,\n) => ReactElement | null;\n\nfunction MultiSelectComponent<Value extends PrimitiveValue>(\n props: MultiSelectProps<Value>,\n) {\n const { options, value, defaultValue, onChange, placeholder, ...rest } =\n props;\n const tokens = useComponentsTokens();\n const selectTokens = tokens.select;\n const id = useId();\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 isSelected={isSelected}\n onCloseFinished={close}\n onSelect={select}\n />\n </SelectControl>\n );\n}\n\nexport const MultiSelect = memo(MultiSelectComponent) as <\n Value extends PrimitiveValue,\n>(\n props: MultiSelectProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AAwBI,
|
|
1
|
+
{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { memo, ReactElement, useId } from \"react\";\n\nimport { 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\nfunction SelectedTagComponent<Value extends PrimitiveValue>(\n props: SelectedTagProps<Value>,\n) {\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\nconst SelectedTag = memo(SelectedTagComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectedTagProps<Value>,\n) => ReactElement | null;\n\nfunction MultiSelectComponent<Value extends PrimitiveValue>(\n props: MultiSelectProps<Value>,\n) {\n const { options, value, defaultValue, onChange, placeholder, ...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 isSelected={isSelected}\n onCloseFinished={close}\n onSelect={select}\n />\n </SelectControl>\n );\n}\n\nexport const MultiSelect = memo(MultiSelectComponent) as <\n Value extends PrimitiveValue,\n>(\n props: MultiSelectProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AAwBI,cAuCA,YAvCA;AAxBJ,SAAS,MAAoB,aAAa;AAE1C,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,SAAS,KAAK,YAAY;AACnC,SAAS,2BAA2B;AAEpC,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAS7B,SAAS,qBACP,OACA;AACA,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;AAEA,MAAM,cAAc,KAAK,oBAAoB;AAM7C,SAAS,qBACP,OACA;AACA,QAAM,EAAE,SAAS,OAAO,cAAc,UAAU,aAAa,GAAG,KAAK,IACnE;AAEF,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,iBAAiB;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEO,MAAM,cAAc,KAAK,oBAAoB;","names":["value"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/option.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { CheckIcon } from \"@impulse-ui-native/icon/icons/check\";\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport {\n getSelectionItemStateTokens,\n useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport { OptionProps } from \"../types\";\n\nexport const Option = memo(function Option(props: OptionProps) {\n const { label, selected, ...rest } = props;\n\n const tokens = useComponentsTokens();\n const optionTokens = tokens.select.option;\n const appearanceTokens = getSelectionItemStateTokens(optionTokens.states, {\n selected,\n });\n\n return (\n <Pressable {...rest}>\n <View\n padding={optionTokens.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Typography.Body>{label}</Typography.Body>\n\n <Icon\n icon={CheckIcon}\n color={appearanceTokens.iconColor}\n opacity={appearanceTokens.iconOpacity}\n />\n </View>\n </Pressable>\n );\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/components/option.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { CheckIcon } from \"@impulse-ui-native/icon/icons/check\";\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport {\n getSelectionItemStateTokens,\n useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport { OptionProps } from \"../types\";\n\nexport const Option = memo(function Option(props: OptionProps) {\n const { label, selected, ...rest } = props;\n\n const tokens = useComponentsTokens();\n\n const optionTokens = tokens.select.option;\n const appearanceTokens = getSelectionItemStateTokens(optionTokens.states, {\n selected,\n });\n\n return (\n <Pressable {...rest}>\n <View\n padding={optionTokens.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Typography.Body>{label}</Typography.Body>\n\n <Icon\n icon={CheckIcon}\n color={appearanceTokens.iconColor}\n opacity={appearanceTokens.iconOpacity}\n />\n </View>\n </Pressable>\n );\n});\n"],"mappings":"AAwBM,SAME,KANF;AAxBN,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,WAAW,YAAY,YAAY;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAIA,MAAM,SAAS,KAAK,SAASA,QAAO,OAAoB;AAC7D,QAAM,EAAE,OAAO,UAAU,GAAG,KAAK,IAAI;AAErC,QAAM,SAAS,oBAAoB;AAEnC,QAAM,eAAe,OAAO,OAAO;AACnC,QAAM,mBAAmB,4BAA4B,aAAa,QAAQ;AAAA,IACxE;AAAA,EACF,CAAC;AAED,SACE,oBAAC,aAAW,GAAG,MACb;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,aAAa;AAAA,MACtB,eAAc;AAAA,MACd,YAAW;AAAA,MACX,gBAAe;AAAA,MAEf;AAAA,4BAAC,WAAW,MAAX,EAAiB,iBAAM;AAAA,QAExB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,iBAAiB;AAAA,YACxB,SAAS,iBAAiB;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;","names":["Option"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.flyout.tsx"],"sourcesContent":["import { memo, ReactElement, useCallback } from \"react\";\nimport { FlatList, ListRenderItemInfo } from \"react-native\";\n\nimport { 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, SelectOption } from \"../types\";\nimport { getOptionId } from \"../utils\";\nimport { Option } from \"./option\";\n\ninterface SelectFlyoutOptionProps<Value extends PrimitiveValue> {\n option: SelectOption<Value>;\n selected: boolean;\n onSelect: (value: Value) => void;\n}\n\nfunction SelectFlyoutOptionComponent<Value extends PrimitiveValue>(\n props: SelectFlyoutOptionProps<Value>,\n) {\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\nconst SelectFlyoutOption = memo(SelectFlyoutOptionComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectFlyoutOptionProps<Value>,\n) => ReactElement | null;\n\nconst SelectFlyoutComponent = function SelectFlyoutContent<\n Value extends PrimitiveValue,\n>(props: SelectFlyoutProps<Value>) {\n const { options, isSelected, onSelect, ...rest } = props;\n const tokens = useComponentsTokens();\n const selectTokens = tokens.select;\n\n const renderItem = useCallback(\n ({ item }: ListRenderItemInfo<SelectOption<Value>>) => {\n return (\n <SelectFlyoutOption\n option={item}\n selected={isSelected(item.value)}\n onSelect={onSelect}\n />\n );\n },\n [isSelected, onSelect],\n );\n\n return (\n <Portal>\n <Flyout {...rest}>\n <View height={selectTokens.flyoutHeight}>\n <FlatList\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 </View>\n </Flyout>\n </Portal>\n );\n};\n\nexport const SelectFlyout = memo(SelectFlyoutComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectFlyoutProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AA2BI;AA3BJ,SAAS,MAAoB,mBAAmB;AAChD,SAAS,gBAAoC;AAE7C,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAQvB,SAAS,4BACP,OACA;AACA,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;AAEA,MAAM,qBAAqB,KAAK,2BAA2B;AAM3D,MAAM,wBAAwB,SAAS,oBAErC,OAAiC;AACjC,QAAM,EAAE,SAAS,YAAY,UAAU,GAAG,KAAK,IAAI;
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.flyout.tsx"],"sourcesContent":["import { memo, ReactElement, useCallback } from \"react\";\nimport { FlatList, ListRenderItemInfo } from \"react-native\";\n\nimport { 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, SelectOption } from \"../types\";\nimport { getOptionId } from \"../utils\";\nimport { Option } from \"./option\";\n\ninterface SelectFlyoutOptionProps<Value extends PrimitiveValue> {\n option: SelectOption<Value>;\n selected: boolean;\n onSelect: (value: Value) => void;\n}\n\nfunction SelectFlyoutOptionComponent<Value extends PrimitiveValue>(\n props: SelectFlyoutOptionProps<Value>,\n) {\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\nconst SelectFlyoutOption = memo(SelectFlyoutOptionComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectFlyoutOptionProps<Value>,\n) => ReactElement | null;\n\nconst SelectFlyoutComponent = function SelectFlyoutContent<\n Value extends PrimitiveValue,\n>(props: SelectFlyoutProps<Value>) {\n const { options, isSelected, onSelect, ...rest } = props;\n\n const tokens = useComponentsTokens();\n\n const selectTokens = tokens.select;\n\n const renderItem = useCallback(\n ({ item }: ListRenderItemInfo<SelectOption<Value>>) => {\n return (\n <SelectFlyoutOption\n option={item}\n selected={isSelected(item.value)}\n onSelect={onSelect}\n />\n );\n },\n [isSelected, onSelect],\n );\n\n return (\n <Portal>\n <Flyout {...rest}>\n <View height={selectTokens.flyoutHeight}>\n <FlatList\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 </View>\n </Flyout>\n </Portal>\n );\n};\n\nexport const SelectFlyout = memo(SelectFlyoutComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectFlyoutProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AA2BI;AA3BJ,SAAS,MAAoB,mBAAmB;AAChD,SAAS,gBAAoC;AAE7C,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAQvB,SAAS,4BACP,OACA;AACA,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;AAEA,MAAM,qBAAqB,KAAK,2BAA2B;AAM3D,MAAM,wBAAwB,SAAS,oBAErC,OAAiC;AACjC,QAAM,EAAE,SAAS,YAAY,UAAU,GAAG,KAAK,IAAI;AAEnD,QAAM,SAAS,oBAAoB;AAEnC,QAAM,eAAe,OAAO;AAE5B,QAAM,aAAa;AAAA,IACjB,CAAC,EAAE,KAAK,MAA+C;AACrD,aACE;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU,WAAW,KAAK,KAAK;AAAA,UAC/B;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACvB;AAEA,SACE,oBAAC,UACC,8BAAC,UAAQ,GAAG,MACV,8BAAC,QAAK,QAAQ,aAAa,cACzB;AAAA,IAAC;AAAA;AAAA,MACC,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,GACF,GACF,GACF;AAEJ;AAEO,MAAM,eAAe,KAAK,qBAAqB;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import { memo, ReactElement, useCallback, useId } from \"react\";\n\nimport { 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\nfunction SelectComponent<Value extends PrimitiveValue>(\n props: SelectProps<Value>,\n) {\n const { options, value, defaultValue, onChange, placeholder, ...rest } =\n props;\n const id = useId();\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 return (\n <SelectControl {...rest} onPress={open}>\n {!hasSelected ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n {selected !== null && selected !== undefined ? (\n <Control.Value>{getLabel(selected)}</Control.Value>\n ) : null}\n <SelectFlyout\n id={id}\n title=\"Options\"\n open={isOpen}\n options={options}\n isSelected={isSelected}\n onCloseFinished={close}\n onSelect={handleOnSelect}\n />\n </SelectControl>\n );\n}\n\nexport const Select = memo(SelectComponent) as <Value extends PrimitiveValue>(\n props: SelectProps<Value>,\n) => ReactElement | null;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import { memo, ReactElement, useCallback, useId } from \"react\";\n\nimport { 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\nfunction SelectComponent<Value extends PrimitiveValue>(\n props: SelectProps<Value>,\n) {\n const { options, value, defaultValue, onChange, placeholder, ...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 return (\n <SelectControl {...rest} onPress={open}>\n {!hasSelected ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n {selected !== null && selected !== undefined ? (\n <Control.Value>{getLabel(selected)}</Control.Value>\n ) : null}\n <SelectFlyout\n id={id}\n title=\"Options\"\n open={isOpen}\n options={options}\n isSelected={isSelected}\n onCloseFinished={close}\n onSelect={handleOnSelect}\n />\n </SelectControl>\n );\n}\n\nexport const Select = memo(SelectComponent) as <Value extends PrimitiveValue>(\n props: SelectProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AAoCI,SAEI,KAFJ;AApCJ,SAAS,MAAoB,aAAa,aAAa;AAEvD,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,gBACP,OACA;AACA,QAAM,EAAE,SAAS,OAAO,cAAc,UAAU,aAAa,GAAG,KAAK,IACnE;AAEF,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,SACE,qBAAC,iBAAe,GAAG,MAAM,SAAS,MAC/B;AAAA,KAAC,cACA,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IACH,aAAa,QAAQ,aAAa,SACjC,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,iBAAiB;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEO,MAAM,SAAS,KAAK,eAAe;","names":["value"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/select",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.2.0",
|
|
4
4
|
"description": "Select and option picker components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
35
|
-
"@impulse-ui-native/
|
|
36
|
-
"@impulse-ui-native/flyout": "6.
|
|
37
|
-
"@impulse-ui-native/portal": "6.
|
|
31
|
+
"@impulse-ui-native/theme": "6.2.0",
|
|
32
|
+
"@impulse-ui-native/input": "6.2.0",
|
|
33
|
+
"@impulse-ui-native/icon": "6.2.0",
|
|
34
|
+
"@impulse-ui-native/core": "6.2.0",
|
|
35
|
+
"@impulse-ui-native/primitives": "6.2.0",
|
|
36
|
+
"@impulse-ui-native/flyout": "6.2.0",
|
|
37
|
+
"@impulse-ui-native/portal": "6.2.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@shopify/flash-list": "2.0.2",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"react": "19.2.3",
|
|
45
45
|
"react-native": "0.86.2",
|
|
46
46
|
"typescript": "~6.0.3",
|
|
47
|
-
"@impulse-ui-native/
|
|
47
|
+
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
48
48
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
49
|
-
"@impulse-ui-native/
|
|
49
|
+
"@impulse-ui-native/prettier-config": "1.0.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": ">=18",
|