@impulse-ui-native/select 2.0.0

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import { ReactElement } from 'react';
+import { FlyoutProps } from '@impulse-ui-native/flyout';
+import { ControlComponentProps, ControlComponentCommonProps, PressableCoreProps } from '@impulse-ui-native/primitives';
+
+type PrimitiveValue = string | number | null | undefined;
+type SelectFn<Value extends PrimitiveValue> = (option: SelectOption<Value>) => void;
+type SelectOption<Value> = {
+    label: string;
+    value: Value;
+    disabled?: boolean;
+};
+interface CommonSelectProps<Value> extends Partial<ControlComponentProps>, ControlComponentCommonProps {
+    loading?: boolean;
+    onChange?: (value: Value | undefined) => void;
+}
+interface SelectControlProps<Value> extends CommonSelectProps<Value> {
+    onPress: PressableCoreProps["onPress"];
+}
+interface SelectProps<Value extends PrimitiveValue> extends CommonSelectProps<Value> {
+    options: SelectOption<Value>[];
+    value?: Value;
+    defaultValue?: Value;
+}
+interface MultiSelectProps<Value extends PrimitiveValue> extends Partial<ControlComponentProps>, CommonSelectProps<Value[]> {
+    options: SelectOption<Value>[];
+    value?: Value[];
+    defaultValue?: Value[];
+}
+interface SelectFlyoutProps<Value extends PrimitiveValue> extends FlyoutProps {
+    options: SelectOption<Value>[];
+    isSelected: (value: Value) => boolean;
+    onSelect: (value: Value) => void;
+}
+interface OptionProps extends PressableCoreProps {
+    label: string;
+    selected: boolean;
+}
+interface UseSelectProps<Value> {
+    options: SelectOption<PrimitiveValue>[];
+    value?: Value;
+    defaultValue?: Value;
+    onChange?: (value: Value | undefined) => void;
+}
+
+declare const Select: <Value extends PrimitiveValue>(props: SelectProps<Value>) => ReactElement | null;
+
+declare const MultiSelect: <Value extends PrimitiveValue>(props: MultiSelectProps<Value>) => ReactElement | null;
+
+export { type CommonSelectProps, MultiSelect, type MultiSelectProps, type OptionProps, type PrimitiveValue, Select, type SelectControlProps, type SelectFlyoutProps, type SelectFn, type SelectOption, type SelectProps, type UseSelectProps };

package/dist/index.js

@@ -0,0 +1,337 @@
+// src/components/select.tsx
+import { memo as memo4, useCallback as useCallback3, useId } from "react";
+import { useIsOpen } from "@impulse-ui-native/core";
+import { Control as Control2 } from "@impulse-ui-native/primitives";
+
+// src/hooks/use-select.hook.ts
+import { useCallback, useMemo } from "react";
+import { useControllableState } from "@impulse-ui-native/core";
+
+// src/utils/option.utils.ts
+function buildLabelMap(options) {
+  return options.reduce((acc, current) => {
+    if (current.value !== null && current.value !== void 0) {
+      acc[String(current.value)] = current.label;
+      return acc;
+    }
+    return acc;
+  }, {});
+}
+
+// src/hooks/use-select.hook.ts
+function useSelect(props) {
+  const { value, defaultValue, onChange } = props;
+  const [selected, setSelected] = useControllableState({
+    prop: value,
+    defaultProp: defaultValue,
+    onChange
+  });
+  const labelsMap = useMemo(
+    () => buildLabelMap(props.options),
+    [props.options]
+  );
+  const getLabel = useCallback(
+    (value2) => labelsMap[String(value2)],
+    [labelsMap]
+  );
+  const select = useCallback(
+    (value2) => {
+      setSelected((prev) => {
+        if (prev === value2) {
+          return null;
+        }
+        return value2;
+      });
+    },
+    [setSelected]
+  );
+  const isSelected = useCallback(
+    (value2) => value2 === selected,
+    [selected]
+  );
+  return {
+    selected,
+    hasSelected: selected !== null && selected !== void 0,
+    select,
+    getLabel,
+    isSelected
+  };
+}
+
+// src/components/select-control.tsx
+import { memo } from "react";
+import { Control, Pressable } from "@impulse-ui-native/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectControlComponent(props) {
+  const {
+    size = "medium",
+    variant = "outlined",
+    label,
+    error,
+    disabled,
+    loading,
+    PrefixIcon,
+    Prefix,
+    onPressPrefix,
+    SuffixIcon,
+    Suffix,
+    onPressSuffix,
+    onPress,
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Control.Provider,
+    {
+      size,
+      variant,
+      error,
+      disabled,
+      children: /* @__PURE__ */ jsxs(Control.Root, { children: [
+        /* @__PURE__ */ jsx(Control.Label, { children: label }),
+        /* @__PURE__ */ jsx(Pressable, { onPress, children: /* @__PURE__ */ jsxs(Control.Container, { children: [
+          /* @__PURE__ */ jsx(
+            Control.Addon,
+            {
+              icon: PrefixIcon,
+              Content: Prefix,
+              onPress: onPressPrefix
+            }
+          ),
+          children,
+          /* @__PURE__ */ jsx(
+            Control.Addon,
+            {
+              icon: SuffixIcon,
+              Content: loading ? Control.Loader : Suffix,
+              onPress: onPressSuffix
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Control.Error, {})
+      ] })
+    }
+  );
+}
+var SelectControl = memo(SelectControlComponent);
+
+// src/components/select.flyout.tsx
+import { memo as memo3, useCallback as useCallback2 } from "react";
+import { FlatList } from "react-native";
+import { Flyout } from "@impulse-ui-native/flyout";
+import { Portal } from "@impulse-ui-native/portal";
+import { View as View2 } from "@impulse-ui-native/primitives";
+
+// src/components/option.tsx
+import { memo as memo2 } from "react";
+import { CheckIcon, Icon } from "@impulse-ui-native/icon";
+import { Pressable as Pressable2, Typography, View } from "@impulse-ui-native/primitives";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Option = memo2(function Option2(props) {
+  const { label, selected, ...rest } = props;
+  const tokens = useComponentsTokens();
+  const optionTokens = tokens.select.option;
+  return /* @__PURE__ */ jsx2(Pressable2, { ...rest, children: /* @__PURE__ */ jsxs2(
+    View,
+    {
+      padding: optionTokens.padding,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsx2(Typography.Body, { children: label }),
+        /* @__PURE__ */ jsx2(
+          Icon,
+          {
+            icon: CheckIcon,
+            color: optionTokens.selectedIconColor,
+            opacity: selected ? optionTokens.selectedIconVisibleOpacity : optionTokens.selectedIconHiddenOpacity
+          }
+        )
+      ]
+    }
+  ) });
+});
+
+// src/components/select.flyout.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SelectFlyoutComponent = function SelectFlyoutContent(props) {
+  const { options, isSelected, onSelect, ...rest } = props;
+  const renderItem = useCallback2(
+    ({ item }) => {
+      return /* @__PURE__ */ jsx3(
+        Option,
+        {
+          label: item.label,
+          onPress: () => onSelect(item.value),
+          disabled: item.disabled,
+          selected: isSelected(item.value)
+        }
+      );
+    },
+    [isSelected, onSelect]
+  );
+  return /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Flyout, { ...rest, children: /* @__PURE__ */ jsx3(View2, { height: 300, children: /* @__PURE__ */ jsx3(
+    FlatList,
+    {
+      data: options,
+      renderItem,
+      keyExtractor: getOptionId2,
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      removeClippedSubviews: true,
+      windowSize: 5,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 12,
+      updateCellsBatchingPeriod: 32
+    }
+  ) }) }) });
+};
+var SelectFlyout = memo3(SelectFlyoutComponent);
+
+// src/components/select.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SelectComponent(props) {
+  const { options, value, defaultValue, onChange, placeholder, ...rest } = props;
+  const { isOpen, open, close } = useIsOpen();
+  const id = useId();
+  const { selected, hasSelected, select, isSelected, getLabel } = useSelect({
+    options,
+    value,
+    defaultValue,
+    onChange
+  });
+  const handleOnSelect = useCallback3(
+    (value2) => {
+      select(value2);
+      close();
+    },
+    [select, close]
+  );
+  return /* @__PURE__ */ jsxs3(SelectControl, { ...rest, onPress: open, children: [
+    !hasSelected ? /* @__PURE__ */ jsx4(Control2.Placeholder, { children: placeholder }) : null,
+    selected !== null && selected !== void 0 ? /* @__PURE__ */ jsx4(Control2.Value, { children: getLabel(selected) }) : null,
+    /* @__PURE__ */ jsx4(
+      SelectFlyout,
+      {
+        id,
+        title: "Options",
+        open: isOpen,
+        options,
+        isSelected,
+        onCloseFinished: close,
+        onSelect: handleOnSelect
+      }
+    )
+  ] });
+}
+var Select = memo4(SelectComponent);
+
+// src/components/multi-select.tsx
+import { memo as memo5, useId as useId2 } from "react";
+import { useIsOpen as useIsOpen2 } from "@impulse-ui-native/core";
+import { Control as Control3, Tag, View as View3 } from "@impulse-ui-native/primitives";
+
+// src/hooks/use-multi-select.hook.ts
+import { useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import { useControllableState as useControllableState2 } from "@impulse-ui-native/core";
+function useMultiSelect(props) {
+  const { value, defaultValue, onChange } = props;
+  const [selected, setSelected] = useControllableState2({
+    prop: value,
+    defaultProp: defaultValue,
+    onChange
+  });
+  const selectedValuesSet = useMemo2(() => new Set(selected), [selected]);
+  const labelsMap = useMemo2(
+    () => buildLabelMap(props.options),
+    [props.options]
+  );
+  const getLabel = useCallback4(
+    (value2) => labelsMap[String(value2)],
+    [labelsMap]
+  );
+  const select = useCallback4(
+    (value2) => {
+      setSelected((prev) => {
+        if (!prev) {
+          return [value2];
+        }
+        const exists = prev.includes(value2);
+        if (exists) {
+          return prev.filter((prevValue) => prevValue !== value2);
+        }
+        return [...prev, value2];
+      });
+    },
+    [setSelected]
+  );
+  const isSelected = useCallback4(
+    (value2) => selectedValuesSet.has(value2),
+    [selectedValuesSet]
+  );
+  return {
+    selected,
+    hasSelected: selected && selected.length > 0,
+    select,
+    isSelected,
+    getLabel
+  };
+}
+
+// src/components/multi-select.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function MultiSelectComponent(props) {
+  const { options, value, defaultValue, onChange, placeholder, ...rest } = props;
+  const { isOpen, open, close } = useIsOpen2();
+  const id = useId2();
+  const { selected, hasSelected, select, isSelected, getLabel } = useMultiSelect({
+    options,
+    value,
+    defaultValue,
+    onChange
+  });
+  return /* @__PURE__ */ jsxs4(SelectControl, { ...rest, onPress: open, children: [
+    !hasSelected ? /* @__PURE__ */ jsx5(Control3.Placeholder, { children: placeholder }) : null,
+    hasSelected ? /* @__PURE__ */ jsx5(
+      View3,
+      {
+        flex: 1,
+        flexDirection: "row",
+        gap: 4,
+        marginHorizontal: 4,
+        overflow: "hidden",
+        children: selected ? selected.map((value2) => /* @__PURE__ */ jsx5(
+          Tag,
+          {
+            variant: "filled",
+            size: props.size,
+            closable: true,
+            onClose: () => select(value2),
+            label: String(getLabel(value2))
+          },
+          value2
+        )) : null
+      }
+    ) : null,
+    /* @__PURE__ */ jsx5(
+      SelectFlyout,
+      {
+        id,
+        title: "Options",
+        open: isOpen,
+        options,
+        isSelected,
+        onCloseFinished: close,
+        onSelect: select
+      }
+    )
+  ] });
+}
+var MultiSelect = memo5(MultiSelectComponent);
+export {
+  MultiSelect,
+  Select
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/select.tsx","../src/hooks/use-select.hook.ts","../src/utils/option.utils.ts","../src/components/select-control.tsx","../src/components/select.flyout.tsx","../src/components/option.tsx","../src/components/multi-select.tsx","../src/hooks/use-multi-select.hook.ts"],"sourcesContent":["import { memo, ReactElement, useCallback, useId } from \"react\";\r\n\r\nimport { useIsOpen } from \"@impulse-ui-native/core\";\r\nimport { Control } from \"@impulse-ui-native/primitives\";\r\n\r\nimport { useSelect } from \"../hooks/use-select.hook\";\r\nimport { PrimitiveValue, SelectProps } from \"../types\";\r\nimport { SelectControl } from \"./select-control\";\r\nimport { SelectFlyout } from \"./select.flyout\";\r\n\r\nfunction SelectComponent<Value extends PrimitiveValue>(\r\n  props: SelectProps<Value>,\r\n) {\r\n  const { options, value, defaultValue, onChange, placeholder, ...rest } =\r\n    props;\r\n  const { isOpen, open, close } = useIsOpen();\r\n\r\n  const id = useId();\r\n\r\n  const { selected, hasSelected, select, isSelected, getLabel } = useSelect({\r\n    options,\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n  });\r\n\r\n  const handleOnSelect = useCallback(\r\n    (value: Value) => {\r\n      select(value);\r\n      close();\r\n    },\r\n    [select, close],\r\n  );\r\n\r\n  return (\r\n    <SelectControl {...rest} onPress={open}>\r\n      {!hasSelected ? (\r\n        <Control.Placeholder>{placeholder}</Control.Placeholder>\r\n      ) : null}\r\n      {selected !== null && selected !== undefined ? (\r\n        <Control.Value>{getLabel(selected)}</Control.Value>\r\n      ) : null}\r\n      <SelectFlyout\r\n        id={id}\r\n        title=\"Options\"\r\n        open={isOpen}\r\n        options={options}\r\n        isSelected={isSelected}\r\n        onCloseFinished={close}\r\n        onSelect={handleOnSelect}\r\n      />\r\n    </SelectControl>\r\n  );\r\n}\r\n\r\nexport const Select = memo(SelectComponent) as <Value extends PrimitiveValue>(\r\n  props: SelectProps<Value>,\r\n) => ReactElement | null;\r\n","import { useCallback, useMemo } from \"react\";\r\n\r\nimport { useControllableState } from \"@impulse-ui-native/core\";\r\n\r\nimport { PrimitiveValue, UseSelectProps } from \"../types\";\r\nimport { buildLabelMap } from \"../utils/option.utils\";\r\n\r\nexport function useSelect<Value extends PrimitiveValue>(\r\n  props: UseSelectProps<Value>,\r\n) {\r\n  const { value, defaultValue, onChange } = props;\r\n\r\n  const [selected, setSelected] = useControllableState({\r\n    prop: value,\r\n    defaultProp: defaultValue,\r\n    onChange,\r\n  });\r\n\r\n  const labelsMap = useMemo(\r\n    () => buildLabelMap(props.options),\r\n    [props.options],\r\n  );\r\n\r\n  const getLabel = useCallback(\r\n    (value: Value) => labelsMap[String(value)],\r\n    [labelsMap],\r\n  );\r\n\r\n  const select = useCallback(\r\n    (value: Value) => {\r\n      setSelected((prev) => {\r\n        if (prev === value) {\r\n          return null as Value;\r\n        }\r\n\r\n        return value;\r\n      });\r\n    },\r\n    [setSelected],\r\n  );\r\n\r\n  const isSelected = useCallback(\r\n    (value: Value) => value === selected,\r\n    [selected],\r\n  );\r\n\r\n  return {\r\n    selected,\r\n    hasSelected: selected !== null && selected !== undefined,\r\n    select,\r\n    getLabel,\r\n    isSelected,\r\n  };\r\n}\r\n","import { PrimitiveValue, SelectOption } from \"../../dist/index.mjs\";\r\n\r\nexport function buildLabelMap<Value extends PrimitiveValue>(\r\n  options: SelectOption<Value>[],\r\n) {\r\n  return options.reduce<Record<string, string>>((acc, current) => {\r\n    if (current.value !== null && current.value !== undefined) {\r\n      acc[String(current.value)] = current.label;\r\n\r\n      return acc;\r\n    }\r\n\r\n    return acc;\r\n  }, {});\r\n}\r\n","import { memo, PropsWithChildren, ReactElement } from \"react\";\r\n\r\nimport { Control, Pressable } from \"@impulse-ui-native/primitives\";\r\n\r\nimport { PrimitiveValue, SelectControlProps } from \"../types\";\r\n\r\nfunction SelectControlComponent<Value extends PrimitiveValue>(\r\n  props: PropsWithChildren<SelectControlProps<Value>>,\r\n) {\r\n  const {\r\n    size = \"medium\",\r\n    variant = \"outlined\",\r\n    label,\r\n    error,\r\n    disabled,\r\n    loading,\r\n    PrefixIcon,\r\n    Prefix,\r\n    onPressPrefix,\r\n    SuffixIcon,\r\n    Suffix,\r\n    onPressSuffix,\r\n    onPress,\r\n    children,\r\n  } = props;\r\n\r\n  return (\r\n    <Control.Provider\r\n      size={size}\r\n      variant={variant}\r\n      error={error}\r\n      disabled={disabled}\r\n    >\r\n      <Control.Root>\r\n        <Control.Label>{label}</Control.Label>\r\n        <Pressable onPress={onPress}>\r\n          <Control.Container>\r\n            <Control.Addon\r\n              icon={PrefixIcon}\r\n              Content={Prefix}\r\n              onPress={onPressPrefix}\r\n            />\r\n            {children}\r\n            <Control.Addon\r\n              icon={SuffixIcon}\r\n              Content={loading ? Control.Loader : Suffix}\r\n              onPress={onPressSuffix}\r\n            />\r\n          </Control.Container>\r\n        </Pressable>\r\n        <Control.Error />\r\n      </Control.Root>\r\n    </Control.Provider>\r\n  );\r\n}\r\n\r\nexport const SelectControl = memo(SelectControlComponent) as <\r\n  Value extends PrimitiveValue,\r\n>(\r\n  props: PropsWithChildren<SelectControlProps<Value>>,\r\n) => ReactElement | null;\r\n","import { memo, ReactElement, useCallback } from \"react\";\r\nimport { FlatList, ListRenderItemInfo } from \"react-native\";\r\n\r\nimport { Flyout } from \"@impulse-ui-native/flyout\";\r\nimport { Portal } from \"@impulse-ui-native/portal\";\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\n\r\nimport { PrimitiveValue, SelectFlyoutProps, SelectOption } from \"../types\";\r\nimport { getOptionId } from \"../utils\";\r\nimport { Option } from \"./option\";\r\n\r\nconst SelectFlyoutComponent = function SelectFlyoutContent<\r\n  Value extends PrimitiveValue,\r\n>(props: SelectFlyoutProps<Value>) {\r\n  const { options, isSelected, onSelect, ...rest } = props;\r\n\r\n  const renderItem = useCallback(\r\n    ({ item }: ListRenderItemInfo<SelectOption<Value>>) => {\r\n      return (\r\n        <Option\r\n          label={item.label}\r\n          onPress={() => onSelect(item.value)}\r\n          disabled={item.disabled}\r\n          selected={isSelected(item.value)}\r\n        />\r\n      );\r\n    },\r\n    [isSelected, onSelect],\r\n  );\r\n\r\n  return (\r\n    <Portal>\r\n      <Flyout {...rest}>\r\n        <View height={300}>\r\n          <FlatList\r\n            data={options}\r\n            renderItem={renderItem}\r\n            keyExtractor={getOptionId}\r\n            showsHorizontalScrollIndicator={false}\r\n            showsVerticalScrollIndicator={false}\r\n            keyboardShouldPersistTaps=\"handled\"\r\n            removeClippedSubviews\r\n            windowSize={5}\r\n            initialNumToRender={12}\r\n            maxToRenderPerBatch={12}\r\n            updateCellsBatchingPeriod={32}\r\n          />\r\n        </View>\r\n      </Flyout>\r\n    </Portal>\r\n  );\r\n};\r\n\r\nexport const SelectFlyout = memo(SelectFlyoutComponent) as <\r\n  Value extends PrimitiveValue,\r\n>(\r\n  props: SelectFlyoutProps<Value>,\r\n) => ReactElement | null;\r\n","import { memo } from \"react\";\r\n\r\nimport { CheckIcon, Icon } from \"@impulse-ui-native/icon\";\r\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport { OptionProps } from \"../types\";\r\n\r\nexport const Option = memo(function Option(props: OptionProps) {\r\n  const { label, selected, ...rest } = props;\r\n\r\n  const tokens = useComponentsTokens();\r\n  const optionTokens = tokens.select.option;\r\n\r\n  return (\r\n    <Pressable {...rest}>\r\n      <View\r\n        padding={optionTokens.padding}\r\n        flexDirection=\"row\"\r\n        alignItems=\"center\"\r\n        justifyContent=\"space-between\"\r\n      >\r\n        <Typography.Body>{label}</Typography.Body>\r\n\r\n        <Icon\r\n          icon={CheckIcon}\r\n          color={optionTokens.selectedIconColor}\r\n          opacity={\r\n            selected\r\n              ? optionTokens.selectedIconVisibleOpacity\r\n              : optionTokens.selectedIconHiddenOpacity\r\n          }\r\n        />\r\n      </View>\r\n    </Pressable>\r\n  );\r\n});\r\n","import { memo, ReactElement, useId } from \"react\";\r\n\r\nimport { useIsOpen } from \"@impulse-ui-native/core\";\r\nimport { Control, Tag, View } from \"@impulse-ui-native/primitives\";\r\n\r\nimport { useMultiSelect } from \"../hooks/use-multi-select.hook\";\r\nimport { MultiSelectProps, PrimitiveValue } from \"../types\";\r\nimport { SelectControl } from \"./select-control\";\r\nimport { SelectFlyout } from \"./select.flyout\";\r\n\r\nfunction MultiSelectComponent<Value extends PrimitiveValue>(\r\n  props: MultiSelectProps<Value>,\r\n) {\r\n  const { options, value, defaultValue, onChange, placeholder, ...rest } =\r\n    props;\r\n  const { isOpen, open, close } = useIsOpen();\r\n\r\n  const id = useId();\r\n\r\n  const { selected, hasSelected, select, isSelected, getLabel } =\r\n    useMultiSelect({\r\n      options,\r\n      value,\r\n      defaultValue,\r\n      onChange,\r\n    });\r\n\r\n  return (\r\n    <SelectControl {...rest} onPress={open}>\r\n      {!hasSelected ? (\r\n        <Control.Placeholder>{placeholder}</Control.Placeholder>\r\n      ) : null}\r\n      {hasSelected ? (\r\n        <View\r\n          flex={1}\r\n          flexDirection=\"row\"\r\n          gap={4}\r\n          marginHorizontal={4}\r\n          overflow=\"hidden\"\r\n        >\r\n          {selected\r\n            ? selected.map((value) => (\r\n                <Tag\r\n                  variant=\"filled\"\r\n                  size={props.size}\r\n                  key={value}\r\n                  closable\r\n                  onClose={() => select(value)}\r\n                  label={String(getLabel(value))}\r\n                />\r\n              ))\r\n            : null}\r\n        </View>\r\n      ) : null}\r\n      <SelectFlyout\r\n        id={id}\r\n        title=\"Options\"\r\n        open={isOpen}\r\n        options={options}\r\n        isSelected={isSelected}\r\n        onCloseFinished={close}\r\n        onSelect={select}\r\n      />\r\n    </SelectControl>\r\n  );\r\n}\r\n\r\nexport const MultiSelect = memo(MultiSelectComponent) as <\r\n  Value extends PrimitiveValue,\r\n>(\r\n  props: MultiSelectProps<Value>,\r\n) => ReactElement | null;\r\n","import { useCallback, useMemo } from \"react\";\r\n\r\nimport { useControllableState } from \"@impulse-ui-native/core\";\r\n\r\nimport { PrimitiveValue, UseSelectProps } from \"../types\";\r\nimport { buildLabelMap } from \"../utils/option.utils\";\r\n\r\nexport function useMultiSelect<Value extends PrimitiveValue>(\r\n  props: UseSelectProps<Value[]>,\r\n) {\r\n  const { value, defaultValue, onChange } = props;\r\n\r\n  const [selected, setSelected] = useControllableState({\r\n    prop: value,\r\n    defaultProp: defaultValue,\r\n    onChange,\r\n  });\r\n\r\n  const selectedValuesSet = useMemo(() => new Set(selected), [selected]);\r\n\r\n  const labelsMap = useMemo(\r\n    () => buildLabelMap(props.options),\r\n    [props.options],\r\n  );\r\n\r\n  const getLabel = useCallback(\r\n    (value: Value) => labelsMap[String(value)],\r\n    [labelsMap],\r\n  );\r\n\r\n  const select = useCallback(\r\n    (value: Value) => {\r\n      setSelected((prev) => {\r\n        if (!prev) {\r\n          return [value];\r\n        }\r\n\r\n        const exists = prev.includes(value);\r\n\r\n        if (exists) {\r\n          return prev.filter((prevValue) => prevValue !== value);\r\n        }\r\n\r\n        return [...prev, value];\r\n      });\r\n    },\r\n    [setSelected],\r\n  );\r\n\r\n  const isSelected = useCallback(\r\n    (value: Value) => selectedValuesSet.has(value),\r\n    [selectedValuesSet],\r\n  );\r\n\r\n  return {\r\n    selected,\r\n    hasSelected: selected && selected.length > 0,\r\n    select,\r\n    isSelected,\r\n    getLabel,\r\n  };\r\n}\r\n"],"mappings":"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","names":["memo","useCallback","Control","value","memo","useCallback","View","memo","Pressable","jsx","jsxs","Option","jsx","useCallback","View","getOptionId","memo","jsx","jsxs","useCallback","value","Control","memo","memo","useId","useIsOpen","Control","View","useCallback","useMemo","useControllableState","useControllableState","useMemo","useCallback","value","jsx","jsxs","useIsOpen","useId","Control","View","value","memo"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@impulse-ui-native/select",
+  "version": "2.0.0",
+  "source": "src/index.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.mts",
+  "react-native": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@impulse-ui-native/theme": "2.0.0",
+    "@impulse-ui-native/input": "2.0.0",
+    "@impulse-ui-native/core": "2.0.0",
+    "@impulse-ui-native/icon": "2.0.0",
+    "@impulse-ui-native/flyout": "2.0.0",
+    "@impulse-ui-native/types": "2.0.0",
+    "@impulse-ui-native/layers": "2.0.0",
+    "@impulse-ui-native/portal": "2.0.0",
+    "@impulse-ui-native/primitives": "2.0.0"
+  },
+  "devDependencies": {
+    "@shopify/flash-list": "2.0.2",
+    "@types/react": "~19.2.14",
+    "eslint": "^9.38.0",
+    "prettier": "^3.6.2",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "typescript": "~5.9.2",
+    "@impulse-ui-native/eslint-config": "1.0.0",
+    "@impulse-ui-native/prettier-config": "1.0.0",
+    "@impulse-ui-native/tsconfig": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "@shopify/flash-list": ">=2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "prettier": "@impulse-ui-native/prettier-config",
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "pnpm exec eslint . --fix",
+    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore"
+  }
+}