@tecsinapse/react-native-kit 1.20.0 → 1.22.0-beta.13

package/esm/components/molecules/LabeledSwitch/LabeledSwitch.js

@@ -0,0 +1,76 @@
+import { Switch } from '@tecsinapse/react-core';
+import React__default from 'react';
+import LabelComponent from './LabelComponent.js';
+import { StyledView } from './styled.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const LabeledSwitch = (_a) => {
+  var _b = _a, {
+    label,
+    labelPosition = "right",
+    labelProps,
+    pressableLabel = false,
+    active,
+    disabled,
+    onChange
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "labelPosition",
+    "labelProps",
+    "pressableLabel",
+    "active",
+    "disabled",
+    "onChange"
+  ]);
+  return /* @__PURE__ */ React__default.createElement(StyledView, null, labelPosition === "left" ? /* @__PURE__ */ React__default.createElement(LabelComponent, {
+    active,
+    label,
+    labelPosition: "left",
+    labelProps,
+    disabled: !pressableLabel || disabled,
+    switchDisabled: disabled,
+    onPress: () => onChange(!active)
+  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(Switch, __spreadValues({
+    active,
+    onChange,
+    disabled
+  }, rest)), labelPosition === "right" ? /* @__PURE__ */ React__default.createElement(LabelComponent, {
+    active,
+    label,
+    labelPosition: "right",
+    labelProps,
+    disabled: !pressableLabel || disabled,
+    switchDisabled: disabled,
+    onPress: () => onChange(!active)
+  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+};
+
+export { LabeledSwitch as default };
+//# sourceMappingURL=LabeledSwitch.js.map

package/esm/components/molecules/LabeledSwitch/LabeledSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledSwitch.js","sources":["../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps, Switch } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextNativeProps } from '../../atoms/Text';\nimport LabelComponent from './LabelComponent';\nimport { StyledView } from './styled';\n\nexport type LabeledSwitchNativeProps = LabeledSwitchProps & {\n  labelProps?: TextNativeProps;\n};\n\nconst LabeledSwitch: FC<LabeledSwitchNativeProps> = ({\n  label,\n  labelPosition = 'right',\n  labelProps,\n  pressableLabel = false,\n  active,\n  disabled,\n  onChange,\n  ...rest\n}) => {\n  return (\n    <StyledView>\n      {labelPosition === 'left' ? (\n        <LabelComponent\n          active={active}\n          label={label}\n          labelPosition={'left'}\n          labelProps={labelProps}\n          disabled={!pressableLabel || disabled}\n          switchDisabled={disabled}\n          onPress={() => onChange(!active)}\n        />\n      ) : (\n        <></>\n      )}\n      <Switch\n        active={active}\n        onChange={onChange}\n        disabled={disabled}\n        {...rest}\n      />\n      {labelPosition === 'right' ? (\n        <LabelComponent\n          active={active}\n          label={label}\n          labelPosition={'right'}\n          labelProps={labelProps}\n          disabled={!pressableLabel || disabled}\n          switchDisabled={disabled}\n          onPress={() => onChange(!active)}\n        />\n      ) : (\n        <></>\n      )}\n    </StyledView>\n  );\n};\n\nexport default LabeledSwitch;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUM,MAAA,aAAA,GAA8C,CAAC,EAS/C,KAAA;AAT+C,EACnD,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,aAAgB,GAAA,OAAA;AAAA,IAChB,UAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GAjBF,GAUqD,EAQhD,EAAA,IAAA,GAAA,SAAA,CARgD,EAQhD,EAAA;AAAA,IAPH,OAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EACE,aAAkB,KAAA,MAAA,mBAChBA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,MAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,mBAEEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,CAAA,kBAEHA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,cAAA,CAAA;AAAA,IACC,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GAAA,EACI,IACN,CAAA,CAAA,EACC,aAAkB,KAAA,OAAA,mBAChBA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,OAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,6EAEE,CAEN,CAAA,CAAA;AAEJ;;;;"}

package/esm/components/molecules/LabeledSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LabeledSwitch } from './LabeledSwitch';
+export type { LabeledSwitchNativeProps } from './LabeledSwitch';

package/esm/components/molecules/LabeledSwitch/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+export declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledLabel: import("@emotion/native").StyledComponent<any, {}, {}>;

package/esm/components/molecules/LabeledSwitch/styled.js

@@ -0,0 +1,24 @@
+import styled, { css } from '@emotion/native';
+import { View } from 'react-native';
+import Text from '../../atoms/Text/Text.js';
+
+const StyledView = styled(View)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const StyledLabel = styled(Text)`
+  ${({ theme, labelPosition }) => {
+  if (labelPosition === "right")
+    return css`
+        margin-left: ${theme == null ? void 0 : theme.spacing.centi};
+      `;
+  else if (labelPosition === "left")
+    return css`
+        margin-right: ${theme == null ? void 0 : theme.spacing.centi};
+      `;
+}}
+`;
+
+export { StyledLabel, StyledView };
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/LabeledSwitch/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/molecules/LabeledSwitch/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { Text } from '../../atoms/Text';\n\nexport const StyledView = styled(View)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const StyledLabel = styled(Text)<\n  Partial<StyleProps> & {\n    labelPosition: LabelPositionOptions;\n  }\n>`\n  ${({ theme, labelPosition }) => {\n    if (labelPosition === 'right')\n      return css`\n        margin-left: ${theme?.spacing.centi};\n      `;\n    else if (labelPosition === 'left')\n      return css`\n        margin-right: ${theme?.spacing.centi};\n      `;\n  }}\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMxB,MAAA,WAAA,GAAc,OAAO,IAAI,CAAA,CAAA;AAAA,EAAA,EAKlC,CAAC,EAAE,KAAO,EAAA,aAAA,EAAoB,KAAA;AAC9B,EAAA,IAAI,aAAkB,KAAA,OAAA;AACpB,IAAO,OAAA,GAAA,CAAA;AAAA,qBAAA,EACU,+BAAO,OAAQ,CAAA,KAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA,OAAA,IAEzB,aAAkB,KAAA,MAAA;AACzB,IAAO,OAAA,GAAA,CAAA;AAAA,sBAAA,EACW,+BAAO,OAAQ,CAAA,KAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAErC,CAAA,CAAA;AAAA;;;;"}

package/esm/components/molecules/Select/Modal.d.ts

@@ -0,0 +1,7 @@
+import { IBaseModal } from '../../atoms/Modal';
+import { SelectNativeProps } from './Select';
+interface LoadingProps {
+    loading?: boolean;
+}
+export declare const Modal: <Data, Type extends "single" | "multi">({ options, keyExtractor, labelExtractor, hideSearchBar, searchBarPlaceholder, focused, type, value, onSelect, onSearch, selectModalTitle, selectModalTitleComponent, confirmButtonText, loading, close, closeOnPick, ...others }: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal) => JSX.Element;
+export {};

package/esm/components/molecules/Select/Modal.js

@@ -0,0 +1,230 @@
+import { useDebouncedState, getStatusBarHeight, RFValue, Checkbox, RadioButton } from '@tecsinapse/react-core';
+import * as React from 'react';
+import { FlatList, View } from 'react-native';
+import { Button } from '../../atoms/Button/Button.js';
+import Text from '../../atoms/Text/Text.js';
+import Header from '../../atoms/Header/Header.js';
+import Input from '../../atoms/Input/Input.js';
+import '../../atoms/Modal/ModalGroupManager.js';
+import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
+import 'uuid';
+import { getStyledModal, TextTitleModal, SearchBarContainer, SelectIcon, FetchIndicator, ModalFooter, ListItem } from './styled.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Component = (_a) => {
+  var _b = _a, {
+    options,
+    keyExtractor,
+    labelExtractor,
+    hideSearchBar,
+    searchBarPlaceholder,
+    focused,
+    type,
+    value,
+    onSelect,
+    onSearch,
+    selectModalTitle,
+    selectModalTitleComponent,
+    confirmButtonText,
+    loading,
+    close,
+    closeOnPick
+  } = _b, others = __objRest(_b, [
+    "options",
+    "keyExtractor",
+    "labelExtractor",
+    "hideSearchBar",
+    "searchBarPlaceholder",
+    "focused",
+    "type",
+    "value",
+    "onSelect",
+    "onSearch",
+    "selectModalTitle",
+    "selectModalTitleComponent",
+    "confirmButtonText",
+    "loading",
+    "close",
+    "closeOnPick"
+  ]);
+  const [selectedValues, setSelectedValues] = React.useState([]);
+  const [searchArg, setSearchArg] = useDebouncedState("", onSearch);
+  const ModalComponent = React.useMemo(
+    () => getStyledModal(getStatusBarHeight(true)),
+    []
+  );
+  const _closeOnPick = closeOnPick && type === "single";
+  React.useEffect(() => {
+    setSelectedValues(
+      value ? type === "multi" ? value : [value] : []
+    );
+  }, [value, focused, setSelectedValues]);
+  const getData = React.useCallback(
+    (options2) => {
+      return options2 == null ? void 0 : options2.map((option, index) => __spreadProps(__spreadValues({}, option), {
+        _checked: type === "multi" ? !!selectedValues.find(
+          (value2) => keyExtractor(option, index) == keyExtractor(value2, index)
+        ) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
+      }));
+    },
+    [keyExtractor, selectedValues, type]
+  );
+  const data = React.useMemo(
+    () => typeof options !== "function" ? getData(options) : [],
+    [options, getData]
+  );
+  const handlePressItem = React.useCallback(
+    (option) => {
+      setSelectedValues((selectedValues2) => {
+        if (type === "multi") {
+          const newArr = [];
+          let found = false;
+          for (const value2 of selectedValues2) {
+            if (keyExtractor(value2) != keyExtractor(option))
+              newArr.push(value2);
+            else
+              found = true;
+          }
+          if (!found)
+            newArr.push(option);
+          return newArr;
+        }
+        return keyExtractor(selectedValues2[0] || {}) === keyExtractor(option) ? [] : [option];
+      });
+    },
+    [selectedValues, setSelectedValues, keyExtractor, type]
+  );
+  React.useEffect(() => {
+    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
+      handleConfirm();
+    }
+  }, [selectedValues[0], value, closeOnPick]);
+  const handleConfirm = React.useCallback(() => {
+    onSelect(
+      type === "single" ? selectedValues[0] : selectedValues
+    );
+    close == null ? void 0 : close();
+  }, [selectedValues]);
+  const optionBuilder = React.useCallback(
+    ({ item }) => /* @__PURE__ */ React.createElement(MemoizedOption, {
+      item,
+      type,
+      handlePressItem,
+      labelExtractor
+    }),
+    []
+  );
+  const anyChecked = data.filter((item) => item._checked).length;
+  const dataLengthChanged = data.length;
+  const memoizedFlatlist = React.useMemo(
+    () => /* @__PURE__ */ React.createElement(FlatList, {
+      data,
+      keyExtractor,
+      fadingEdgeLength: 200,
+      renderItem: optionBuilder
+    }),
+    [selectedValues, anyChecked, dataLengthChanged]
+  );
+  const titleTextModal = selectModalTitle ? /* @__PURE__ */ React.createElement(TextTitleModal, {
+    typography: "h4",
+    fontWeight: "bold",
+    numberOfLines: 3,
+    style: { maxWidth: RFValue(250) }
+  }, selectModalTitle) : null;
+  const headerContent = selectModalTitleComponent ? selectModalTitleComponent : titleTextModal;
+  return /* @__PURE__ */ React.createElement(ModalView, __spreadProps(__spreadValues({}, others), {
+    BoxComponent: ModalComponent,
+    showCloseBar: false
+  }), /* @__PURE__ */ React.createElement(Header, {
+    rightButton: {
+      onPress: close,
+      icon: {
+        name: "close",
+        type: "material-community",
+        fontColor: "light"
+      }
+    }
+  }, headerContent), !hideSearchBar && /* @__PURE__ */ React.createElement(SearchBarContainer, null, /* @__PURE__ */ React.createElement(Input, {
+    placeholder: searchBarPlaceholder,
+    value: searchArg,
+    onChange: setSearchArg,
+    leftComponent: /* @__PURE__ */ React.createElement(SelectIcon, {
+      name: "search",
+      type: "ionicon",
+      size: "centi"
+    })
+  })), loading && /* @__PURE__ */ React.createElement(FetchIndicator, {
+    animating: true,
+    color: "grey",
+    size: "large"
+  }), memoizedFlatlist, !_closeOnPick && /* @__PURE__ */ React.createElement(ModalFooter, null, /* @__PURE__ */ React.createElement(Button, {
+    variant: "filled",
+    color: "primary",
+    onPress: handleConfirm,
+    disabled: loading
+  }, /* @__PURE__ */ React.createElement(Text, {
+    fontColor: "light",
+    fontWeight: "bold"
+  }, confirmButtonText))));
+};
+const MemoizedOption = ({
+  handlePressItem,
+  labelExtractor,
+  item,
+  type
+}) => {
+  return React.useMemo(() => {
+    const label = labelExtractor(item);
+    return /* @__PURE__ */ React.createElement(ListItem, {
+      onPress: () => handlePressItem(item)
+    }, /* @__PURE__ */ React.createElement(View, {
+      pointerEvents: "none"
+    }, type === "multi" ? /* @__PURE__ */ React.createElement(Checkbox, {
+      color: "primary",
+      labelPosition: "right",
+      checked: item._checked
+    }, /* @__PURE__ */ React.createElement(Text, {
+      fontWeight: item._checked ? "bold" : "regular"
+    }, label)) : /* @__PURE__ */ React.createElement(RadioButton, {
+      color: "primary",
+      labelPosition: "right",
+      checked: item._checked
+    }, /* @__PURE__ */ React.createElement(Text, {
+      fontWeight: item._checked ? "bold" : "regular"
+    }, label))));
+  }, [item._checked]);
+};
+const Modal = Component;
+
+export { Modal };
+//# sourceMappingURL=Modal.js.map

package/esm/components/molecules/Select/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/molecules/Select/Modal.tsx"],"sourcesContent":["import {\n  Checkbox,\n  getStatusBarHeight,\n  RadioButton,\n  RFValue,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, ListRenderItemInfo, View } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Header } from '../../atoms/Header';\nimport { Input } from '../../atoms/Input';\nimport { IBaseModal, ModalView } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { SelectNativeProps } from './Select';\nimport {\n  FetchIndicator,\n  getStyledModal,\n  ListItem,\n  ModalFooter,\n  SearchBarContainer,\n  SelectIcon,\n  TextTitleModal,\n} from './styled';\n\ninterface LoadingProps {\n  loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n  options,\n  keyExtractor,\n  labelExtractor,\n  hideSearchBar,\n  searchBarPlaceholder,\n  focused,\n  type,\n  value,\n  onSelect,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  confirmButtonText,\n  loading,\n  close,\n  closeOnPick,\n  ...others\n}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {\n  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const ModalComponent = React.useMemo(\n    () => getStyledModal(getStatusBarHeight(true)),\n    []\n  );\n  const _closeOnPick = closeOnPick && type === 'single';\n\n  // Resets the temporary state to the initial state whenever the\n  // modal is reopened or the value changes\n  React.useEffect(() => {\n    setSelectedValues(\n      (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n    );\n  }, [value, focused, setSelectedValues]);\n\n  const getData = React.useCallback(\n    (options: Data[]) => {\n      return options?.map((option, index) => ({\n        ...option,\n        _checked:\n          type === 'multi'\n            ? !!selectedValues.find(\n                value =>\n                  keyExtractor(option, index) == keyExtractor(value, index)\n              )\n            : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n              keyExtractor(option, index),\n      }));\n    },\n    [keyExtractor, selectedValues, type]\n  );\n\n  const data = React.useMemo(\n    () => (typeof options !== 'function' ? getData(options) : []),\n    [options, getData]\n  );\n\n  const handlePressItem = React.useCallback(\n    (option: Data) => {\n      setSelectedValues(selectedValues => {\n        if (type === 'multi') {\n          const newArr: Data[] = [];\n          let found = false;\n          for (const value of selectedValues) {\n            if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n            else found = true;\n          }\n          if (!found) newArr.push(option);\n          return newArr;\n        }\n        return keyExtractor((selectedValues[0] || {}) as Data) ===\n          keyExtractor(option)\n          ? []\n          : [option];\n      });\n    },\n    [selectedValues, setSelectedValues, keyExtractor, type]\n  );\n\n  React.useEffect(() => {\n    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {\n      handleConfirm();\n    }\n  }, [selectedValues[0], value, closeOnPick]);\n\n  const handleConfirm = React.useCallback(() => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    onSelect(\n      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n    );\n    close?.();\n  }, [selectedValues]);\n\n  const optionBuilder = React.useCallback(\n    ({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (\n      <MemoizedOption\n        item={item}\n        type={type}\n        handlePressItem={handlePressItem}\n        labelExtractor={labelExtractor}\n      />\n    ),\n    []\n  );\n\n  const anyChecked = data.filter(item => item._checked).length;\n  const dataLengthChanged = data.length;\n\n  const memoizedFlatlist = React.useMemo(\n    () => (\n      <FlatList\n        data={data}\n        keyExtractor={keyExtractor}\n        fadingEdgeLength={200}\n        renderItem={optionBuilder}\n      />\n    ),\n    [selectedValues, anyChecked, dataLengthChanged]\n  );\n\n  const titleTextModal = selectModalTitle ? (\n    <TextTitleModal\n      typography=\"h4\"\n      fontWeight=\"bold\"\n      numberOfLines={3}\n      style={{ maxWidth: RFValue(250) }}\n    >\n      {selectModalTitle}\n    </TextTitleModal>\n  ) : null;\n\n  const headerContent = selectModalTitleComponent\n    ? selectModalTitleComponent\n    : titleTextModal;\n\n  return (\n    <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>\n      <Header\n        rightButton={{\n          onPress: close,\n          icon: {\n            name: 'close',\n            type: 'material-community',\n            fontColor: 'light',\n          },\n        }}\n      >\n        {headerContent}\n      </Header>\n\n      {!hideSearchBar && (\n        <SearchBarContainer>\n          <Input\n            placeholder={searchBarPlaceholder}\n            value={searchArg}\n            onChange={setSearchArg}\n            leftComponent={\n              <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n            }\n          />\n        </SearchBarContainer>\n      )}\n\n      {loading && (\n        <FetchIndicator animating={true} color={'grey'} size={'large'} />\n      )}\n\n      {memoizedFlatlist}\n\n      {!_closeOnPick && (\n        <ModalFooter>\n          <Button\n            variant={'filled'}\n            color={'primary'}\n            onPress={handleConfirm}\n            disabled={loading}\n          >\n            <Text fontColor={'light'} fontWeight=\"bold\">\n              {confirmButtonText}\n            </Text>\n          </Button>\n        </ModalFooter>\n      )}\n    </ModalView>\n  );\n};\n\ninterface IOption<T> {\n  item: T & { _checked: boolean };\n  type: 'single' | 'multi';\n  labelExtractor: (option: T) => string;\n  handlePressItem: (option: T) => void;\n}\n\nconst MemoizedOption = <T,>({\n  handlePressItem,\n  labelExtractor,\n  item,\n  type,\n}: IOption<T>): JSX.Element => {\n  return React.useMemo(() => {\n    const label = labelExtractor(item);\n    return (\n      <ListItem onPress={() => handlePressItem(item)}>\n        <View pointerEvents={'none'}>\n          {type === 'multi' ? (\n            <Checkbox\n              color={'primary'}\n              labelPosition={'right'}\n              checked={item._checked}\n            >\n              <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                {label}\n              </Text>\n            </Checkbox>\n          ) : (\n            <RadioButton\n              color={'primary'}\n              labelPosition={'right'}\n              checked={item._checked}\n            >\n              <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                {label}\n              </Text>\n            </RadioButton>\n          )}\n        </View>\n      </ListItem>\n    );\n  }, [item._checked]);\n};\n\nexport const Modal = Component;\n"],"names":["options","value","selectedValues"],"mappings":"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"}

package/esm/components/molecules/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { InputContainerProps } from '@tecsinapse/react-core';
+export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
+    options: ((searchInput?: string) => Promise<Data[]>) | Data[];
+    onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
+    value: Type extends 'single' ? Data | null | undefined : Data[];
+    type: Type;
+    keyExtractor: (t: Data, index?: number) => string;
+    labelExtractor: (t: Data) => string;
+    groupKeyExtractor?: (t: Data) => string;
+    hideSearchBar?: boolean;
+    placeholder?: string;
+    onFocus?: () => void | never;
+    onBlur?: () => void | never;
+    onSearch?: ((searchArg: string) => void) | ((searchInput?: string) => Promise<Data[]>) | never;
+    searchBarPlaceholder?: string;
+    confirmButtonText?: string;
+    selectModalTitle?: string;
+    selectModalTitleComponent?: JSX.Element;
+    closeOnPick?: boolean;
+    controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
+    numberOfLines?: number;
+}
+declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, controlComponent, closeOnPick, label, numberOfLines, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
+export default Select;

package/esm/components/molecules/Select/Select.js

@@ -0,0 +1,240 @@
+import { useInputFocus, HintInputContainer } from '@tecsinapse/react-core';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import '../../atoms/Modal/ModalGroupManager.js';
+import 'react-native';
+import 'react-native-safe-area-context';
+import '../../atoms/Modal/ui/styled.js';
+import 'uuid';
+import { useLazyModalManager } from '../../atoms/Modal/useLazyModalManager.js';
+import Text from '../../atoms/Text/Text.js';
+import { Modal } from './Modal.js';
+import { StyledSelectionText, SelectIcon } from './styled.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function Select(_a) {
+  var _b = _a, {
+    value,
+    options,
+    keyExtractor,
+    groupKeyExtractor,
+    onSelect,
+    type,
+    labelExtractor,
+    placeholder,
+    onFocus,
+    onBlur,
+    disabled,
+    onSearch,
+    selectModalTitle,
+    selectModalTitleComponent,
+    searchBarPlaceholder,
+    hideSearchBar,
+    confirmButtonText,
+    rightComponent,
+    variant = "default",
+    hintComponent,
+    hint,
+    style,
+    controlComponent,
+    closeOnPick = type === "single",
+    label,
+    numberOfLines
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "options",
+    "keyExtractor",
+    "groupKeyExtractor",
+    "onSelect",
+    "type",
+    "labelExtractor",
+    "placeholder",
+    "onFocus",
+    "onBlur",
+    "disabled",
+    "onSearch",
+    "selectModalTitle",
+    "selectModalTitleComponent",
+    "searchBarPlaceholder",
+    "hideSearchBar",
+    "confirmButtonText",
+    "rightComponent",
+    "variant",
+    "hintComponent",
+    "hint",
+    "style",
+    "controlComponent",
+    "closeOnPick",
+    "label",
+    "numberOfLines"
+  ]);
+  const { focused, handleBlur, handleFocus } = useInputFocus(
+    onFocus,
+    onBlur,
+    !disabled
+  );
+  const [selectOptions, setSelectOptions] = useState([]);
+  const modal = useLazyModalManager();
+  const [loading, setLoading] = useState(false);
+  const onlyLabel = label && !placeholder;
+  const hasValue = type === "single" ? !!value : (value || []).length > 0;
+  const _placeholder = onlyLabel ? label : placeholder;
+  const _label = hasValue ? label : void 0;
+  useEffect(() => {
+    if (typeof options !== "function") {
+      setSelectOptions(options);
+    }
+  }, [options]);
+  const handleLazyFocus = React.useCallback(async () => {
+    if (typeof options === "function" && !onSearch) {
+      setLoading(true);
+      try {
+        const result = await options();
+        if (result) {
+          if (value && !result.find((v) => keyExtractor(value) === keyExtractor(v))) {
+            setSelectOptions([value, ...result]);
+          } else
+            setSelectOptions(result);
+        }
+      } catch (e) {
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [options, value, setSelectOptions]);
+  const handleOnSearch = React.useCallback(
+    async (searchInput) => {
+      if (searchInput !== void 0 && onSearch) {
+        setLoading(true);
+        modal.requestUpdate();
+        try {
+          const result = await onSearch(searchInput);
+          if (result) {
+            if (type === "single") {
+              if (value && !result.find(
+                (v) => keyExtractor(value) === keyExtractor(v)
+              )) {
+                setSelectOptions([value, ...result]);
+              } else
+                setSelectOptions(result);
+            } else {
+              if (value == null ? void 0 : value.length) {
+                const selectedValues = value.filter(
+                  (v) => !result.find(
+                    (current) => keyExtractor(v) === keyExtractor(current)
+                  )
+                ) || [];
+                setSelectOptions([...selectedValues, ...result]);
+              } else {
+                setSelectOptions(result);
+              }
+            }
+          }
+        } catch (e) {
+        } finally {
+          modal.requestUpdate();
+          setLoading(false);
+        }
+      }
+    },
+    [options, value, keyExtractor]
+  );
+  const getDisplayValue = React.useCallback(() => {
+    if (Array.isArray(value)) {
+      if (value.length === 0)
+        return _placeholder;
+      else {
+        const options2 = selectOptions.length > 0 ? selectOptions : value;
+        return options2 == null ? void 0 : options2.reduce(
+          (acc, option, index) => value.find(
+            (key) => keyExtractor(option, index) == keyExtractor(key, index)
+          ) ? acc + labelExtractor(option) + ", " : acc,
+          ""
+        ).slice(0, -2);
+      }
+    } else {
+      if (!value)
+        return _placeholder;
+      const selectedOption = selectOptions == null ? void 0 : selectOptions.find(
+        (option, index) => keyExtractor(option, index) == keyExtractor(value, index)
+      );
+      return labelExtractor(selectedOption != null ? selectedOption : value);
+    }
+  }, [_placeholder, value, selectOptions]);
+  modal.sync(
+    /* @__PURE__ */ React.createElement(Modal, {
+      options: selectOptions || [],
+      focused: true,
+      keyExtractor,
+      labelExtractor,
+      groupKeyExtractor,
+      searchBarPlaceholder,
+      type,
+      onSelect,
+      value,
+      hideSearchBar,
+      onSearch: handleOnSearch,
+      selectModalTitle,
+      selectModalTitleComponent,
+      confirmButtonText,
+      loading,
+      onClose: handleBlur,
+      closeOnPick
+    })
+  );
+  const handlePressInput = async () => {
+    modal.show();
+    handleFocus();
+    await handleLazyFocus();
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React.createElement(HintInputContainer, __spreadValues({
+    viewStyle: style,
+    onPress: handlePressInput,
+    focused,
+    disabled,
+    LabelComponent: Text,
+    variant,
+    hint,
+    hintComponent,
+    label: _label,
+    rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectIcon, {
+      name: "chevron-down",
+      type: "ionicon",
+      size: "centi"
+    }), rightComponent)
+  }, rest), /* @__PURE__ */ React.createElement(StyledSelectionText, {
+    numberOfLines,
+    fontWeight: "bold",
+    disabled
+  }, getDisplayValue() || " ")));
+}
+
+export { Select as default };
+//# sourceMappingURL=Select.js.map