@webority-technologies/mobile 0.0.10 → 0.0.12

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -38,7 +38,7 @@ const sizeMap = {
 const CANCEL_WIDTH = 72;
 const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
-    value,
+    value: rawValue,
     onChangeText,
     onSubmit,
     placeholder = 'Search…',
@@ -64,6 +64,11 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   };
   const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+
+  // Coerce nullable inputs to '' once at the top so every downstream read is
+  // a guaranteed string. Required when consumers pass `value={state}` where
+  // `state` may be `undefined` / `null` before being initialised.
+  const value = typeof rawValue === 'string' ? rawValue : '';
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [internalValue, setInternalValue] = (0, _react.useState)(value);
   const debouncedValue = (0, _useDebounce.useDebounce)(internalValue, debounceMs ?? 0);

package/lib/commonjs/components/Select/Select.js

@@ -44,9 +44,17 @@ const sizeMap = {
     iconSize: 20
   }
 };
+
+// `unknown` here keeps the forwardRef signature non-generic — consumers who
+// pass non-`SelectOption` shapes use the accessor props; type inference is
+// preserved at the call site via the `SelectProps<T>` union.
 const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
     placeholder,
     searchable = false,
     label,
@@ -60,6 +68,13 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     testID
   } = props;
   const multi = props.multi === true;
+
+  // Accessors — fall back to SelectOption-shaped reads when unset so the
+  // default/typed call site keeps zero boilerplate.
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = (0, _react.useCallback)(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const sizeStyles = sizeMap[size];
@@ -111,18 +126,18 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const selectedOptions = (0, _react.useMemo)(() => {
     if (multi) {
       const arr = props.value ?? [];
-      return options.filter(o => arr.includes(o.value));
+      return options.filter(o => arr.includes(valueOf(o)));
     }
     const v = props.value;
     if (v === undefined || v === null) return [];
-    const found = options.find(o => o.value === v);
+    const found = options.find(o => valueOf(o) === v);
     return found ? [found] : [];
-  }, [multi, options, props.value]);
+  }, [multi, options, props.value, valueOf]);
   const filteredOptions = (0, _react.useMemo)(() => {
-    if (!searchable || query.trim().length === 0) return options;
+    if (!searchable || query.trim().length === 0) return [...options];
     const q = query.trim().toLowerCase();
-    return options.filter(o => o.label.toLowerCase().includes(q) || (o.description ?? '').toLowerCase().includes(q));
-  }, [searchable, query, options]);
+    return options.filter(o => labelOf(o).toLowerCase().includes(q) || (descriptionOf(o) ?? '').toLowerCase().includes(q));
+  }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = (0, _react.useCallback)(() => {
     if (disabled) return;
     (0, _index2.triggerHaptic)('selection');
@@ -133,30 +148,35 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     setQuery('');
   }, []);
   const handleSelect = (0, _react.useCallback)(option => {
-    if (option.disabled) return;
+    if (disabledOf(option)) return;
+    const optValue = valueOf(option);
     (0, _index2.triggerHaptic)('selection');
     if (multi) {
       const current = props.value ?? [];
-      const next = current.includes(option.value) ? current.filter(v => v !== option.value) : [...current, option.value];
+      const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
       props.onChange(next);
       return;
     }
-    props.onChange(option.value);
+    props.onChange(optValue);
     handleClose();
-  }, [multi, props, handleClose]);
+  }, [multi, props, handleClose, disabledOf, valueOf]);
 
   // Trigger label / placeholder text.
-  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => o.label).join(', ');
+  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
   const showingPlaceholder = selectedOptions.length === 0;
   const hasError = typeof error === 'string' && error.length > 0;
   const borderColor = hasError ? theme.colors.border.error : theme.colors.border.primary;
-  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => o.label).join(', ')}`;
+  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
   const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
   const renderOption = ({
     item
   }) => {
-    const selected = isSelected(item.value);
-    const optDisabled = item.disabled === true;
+    const itemLabel = labelOf(item);
+    const itemValue = valueOf(item);
+    const itemDescription = descriptionOf(item);
+    const itemIcon = props.getOptionIcon ? props.getOptionIcon(item) : item.icon;
+    const selected = isSelected(itemValue);
+    const optDisabled = disabledOf(item);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       onPress: () => handleSelect(item),
       disabled: optDisabled,
@@ -165,7 +185,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         borderless: false
       },
       accessibilityRole: "button",
-      accessibilityLabel: item.label,
+      accessibilityLabel: itemLabel,
       accessibilityState: {
         selected,
         disabled: optDisabled
@@ -178,9 +198,9 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         paddingHorizontal: theme.spacing.lg,
         paddingVertical: theme.spacing.md
       }],
-      children: [item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [itemIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.optionIcon,
-        children: item.icon
+        children: itemIcon
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.optionTextWrap,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -190,14 +210,14 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             fontWeight: selected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
           }],
           numberOfLines: 1,
-          children: item.label
-        }), item.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          children: itemLabel
+        }), itemDescription ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.optionDescription, {
             color: theme.colors.text.tertiary,
             fontSize: theme.typography.fontSize.sm
           }],
           numberOfLines: 2,
-          children: item.description
+          children: itemDescription
         }) : null]
       }), multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.checkbox, {
@@ -344,7 +364,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             })
           }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
             data: filteredOptions,
-            keyExtractor: item => String(item.value),
+            keyExtractor: item => String(valueOf(item)),
             renderItem: renderOption,
             keyboardShouldPersistTaps: "handled",
             showsVerticalScrollIndicator: true,

package/lib/module/components/SearchBar/SearchBar.js

@@ -33,7 +33,7 @@ const sizeMap = {
 const CANCEL_WIDTH = 72;
 const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    value,
+    value: rawValue,
     onChangeText,
     onSubmit,
     placeholder = 'Search…',
@@ -59,6 +59,11 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = useMemo(() => buildStyles(theme), [theme]);
+
+  // Coerce nullable inputs to '' once at the top so every downstream read is
+  // a guaranteed string. Required when consumers pass `value={state}` where
+  // `state` may be `undefined` / `null` before being initialised.
+  const value = typeof rawValue === 'string' ? rawValue : '';
   const [isFocused, setIsFocused] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
   const debouncedValue = useDebounce(internalValue, debounceMs ?? 0);

package/lib/module/components/Select/Select.js

@@ -39,9 +39,17 @@ const sizeMap = {
     iconSize: 20
   }
 };
+
+// `unknown` here keeps the forwardRef signature non-generic — consumers who
+// pass non-`SelectOption` shapes use the accessor props; type inference is
+// preserved at the call site via the `SelectProps<T>` union.
 const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
     placeholder,
     searchable = false,
     label,
@@ -55,6 +63,13 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     testID
   } = props;
   const multi = props.multi === true;
+
+  // Accessors — fall back to SelectOption-shaped reads when unset so the
+  // default/typed call site keeps zero boilerplate.
+  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const sizeStyles = sizeMap[size];
@@ -106,18 +121,18 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const selectedOptions = useMemo(() => {
     if (multi) {
       const arr = props.value ?? [];
-      return options.filter(o => arr.includes(o.value));
+      return options.filter(o => arr.includes(valueOf(o)));
     }
     const v = props.value;
     if (v === undefined || v === null) return [];
-    const found = options.find(o => o.value === v);
+    const found = options.find(o => valueOf(o) === v);
     return found ? [found] : [];
-  }, [multi, options, props.value]);
+  }, [multi, options, props.value, valueOf]);
   const filteredOptions = useMemo(() => {
-    if (!searchable || query.trim().length === 0) return options;
+    if (!searchable || query.trim().length === 0) return [...options];
     const q = query.trim().toLowerCase();
-    return options.filter(o => o.label.toLowerCase().includes(q) || (o.description ?? '').toLowerCase().includes(q));
-  }, [searchable, query, options]);
+    return options.filter(o => labelOf(o).toLowerCase().includes(q) || (descriptionOf(o) ?? '').toLowerCase().includes(q));
+  }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = useCallback(() => {
     if (disabled) return;
     triggerHaptic('selection');
@@ -128,30 +143,35 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     setQuery('');
   }, []);
   const handleSelect = useCallback(option => {
-    if (option.disabled) return;
+    if (disabledOf(option)) return;
+    const optValue = valueOf(option);
     triggerHaptic('selection');
     if (multi) {
       const current = props.value ?? [];
-      const next = current.includes(option.value) ? current.filter(v => v !== option.value) : [...current, option.value];
+      const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
       props.onChange(next);
       return;
     }
-    props.onChange(option.value);
+    props.onChange(optValue);
     handleClose();
-  }, [multi, props, handleClose]);
+  }, [multi, props, handleClose, disabledOf, valueOf]);
 
   // Trigger label / placeholder text.
-  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => o.label).join(', ');
+  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
   const showingPlaceholder = selectedOptions.length === 0;
   const hasError = typeof error === 'string' && error.length > 0;
   const borderColor = hasError ? theme.colors.border.error : theme.colors.border.primary;
-  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => o.label).join(', ')}`;
+  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
   const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
   const renderOption = ({
     item
   }) => {
-    const selected = isSelected(item.value);
-    const optDisabled = item.disabled === true;
+    const itemLabel = labelOf(item);
+    const itemValue = valueOf(item);
+    const itemDescription = descriptionOf(item);
+    const itemIcon = props.getOptionIcon ? props.getOptionIcon(item) : item.icon;
+    const selected = isSelected(itemValue);
+    const optDisabled = disabledOf(item);
     return /*#__PURE__*/_jsxs(Pressable, {
       onPress: () => handleSelect(item),
       disabled: optDisabled,
@@ -160,7 +180,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         borderless: false
       },
       accessibilityRole: "button",
-      accessibilityLabel: item.label,
+      accessibilityLabel: itemLabel,
       accessibilityState: {
         selected,
         disabled: optDisabled
@@ -173,9 +193,9 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         paddingHorizontal: theme.spacing.lg,
         paddingVertical: theme.spacing.md
       }],
-      children: [item.icon ? /*#__PURE__*/_jsx(View, {
+      children: [itemIcon ? /*#__PURE__*/_jsx(View, {
         style: styles.optionIcon,
-        children: item.icon
+        children: itemIcon
       }) : null, /*#__PURE__*/_jsxs(View, {
         style: styles.optionTextWrap,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -185,14 +205,14 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
             fontWeight: selected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
           }],
           numberOfLines: 1,
-          children: item.label
-        }), item.description ? /*#__PURE__*/_jsx(Text, {
+          children: itemLabel
+        }), itemDescription ? /*#__PURE__*/_jsx(Text, {
           style: [styles.optionDescription, {
             color: theme.colors.text.tertiary,
             fontSize: theme.typography.fontSize.sm
           }],
           numberOfLines: 2,
-          children: item.description
+          children: itemDescription
         }) : null]
       }), multi ? /*#__PURE__*/_jsx(View, {
         style: [styles.checkbox, {
@@ -339,7 +359,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
             })
           }) : null, /*#__PURE__*/_jsx(FlatList, {
             data: filteredOptions,
-            keyExtractor: item => String(item.value),
+            keyExtractor: item => String(valueOf(item)),
             renderItem: renderOption,
             keyboardShouldPersistTaps: "handled",
             showsVerticalScrollIndicator: true,

package/lib/typescript/commonjs/components/SearchBar/SearchBar.d.ts

@@ -4,7 +4,8 @@ import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
 export type SearchBarSize = 'sm' | 'md' | 'lg';
 export type SearchBarVariant = 'filled' | 'outlined';
 export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' | 'onChangeText'> {
-    value: string;
+    /** Current value. Optional / nullable — treated as empty string when undefined or null. */
+    value?: string | null;
     onChangeText: (text: string) => void;
     onSubmit?: (text: string) => void;
     placeholder?: string;

package/lib/typescript/commonjs/components/Select/Select.d.ts

@@ -17,8 +17,25 @@ export interface SelectOption {
     disabled?: boolean;
     icon?: React.ReactNode;
 }
-interface BaseSelectProps {
-    options: SelectOption[];
+interface BaseSelectProps<T = SelectOption> {
+    /**
+     * Options to render. Default shape is `SelectOption` (`{ label, value, ... }`)
+     * — for that shape no accessors are needed. To use a different option shape
+     * (e.g. `{ id, name }` from a domain model), pass `getOptionLabel` /
+     * `getOptionValue` (and optionally `getOptionDisabled`/`getOptionDescription`/
+     * `getOptionIcon`) so Select can read it without per-call-site mapping.
+     */
+    options: ReadonlyArray<T>;
+    /** Defaults to `(o) => (o as SelectOption).label`. */
+    getOptionLabel?: (option: T) => string;
+    /** Defaults to `(o) => (o as SelectOption).value`. */
+    getOptionValue?: (option: T) => SelectValue;
+    /** Defaults to `(o) => (o as SelectOption).disabled === true`. */
+    getOptionDisabled?: (option: T) => boolean;
+    /** Defaults to `(o) => (o as SelectOption).description`. */
+    getOptionDescription?: (option: T) => string | undefined;
+    /** Defaults to `(o) => (o as SelectOption).icon`. */
+    getOptionIcon?: (option: T) => React.ReactNode;
     placeholder?: string;
     searchable?: boolean;
     label?: string;
@@ -31,18 +48,18 @@ interface BaseSelectProps {
     textStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-interface SingleSelectProps extends BaseSelectProps {
+interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi?: false;
     value?: SelectValue;
     onChange: (value: SelectValue) => void;
 }
-interface MultiSelectProps extends BaseSelectProps {
+interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi: true;
     value?: SelectValue[];
     onChange: (value: SelectValue[]) => void;
 }
-export type SelectProps = SingleSelectProps | MultiSelectProps;
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<View>>;
+export type SelectProps<T = SelectOption> = SingleSelectProps<T> | MultiSelectProps<T>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<View>>;
 export { Select };
 export default Select;
 //# sourceMappingURL=Select.d.ts.map

package/lib/typescript/module/components/SearchBar/SearchBar.d.ts

@@ -4,7 +4,8 @@ import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
 export type SearchBarSize = 'sm' | 'md' | 'lg';
 export type SearchBarVariant = 'filled' | 'outlined';
 export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' | 'onChangeText'> {
-    value: string;
+    /** Current value. Optional / nullable — treated as empty string when undefined or null. */
+    value?: string | null;
     onChangeText: (text: string) => void;
     onSubmit?: (text: string) => void;
     placeholder?: string;

package/lib/typescript/module/components/Select/Select.d.ts

@@ -17,8 +17,25 @@ export interface SelectOption {
     disabled?: boolean;
     icon?: React.ReactNode;
 }
-interface BaseSelectProps {
-    options: SelectOption[];
+interface BaseSelectProps<T = SelectOption> {
+    /**
+     * Options to render. Default shape is `SelectOption` (`{ label, value, ... }`)
+     * — for that shape no accessors are needed. To use a different option shape
+     * (e.g. `{ id, name }` from a domain model), pass `getOptionLabel` /
+     * `getOptionValue` (and optionally `getOptionDisabled`/`getOptionDescription`/
+     * `getOptionIcon`) so Select can read it without per-call-site mapping.
+     */
+    options: ReadonlyArray<T>;
+    /** Defaults to `(o) => (o as SelectOption).label`. */
+    getOptionLabel?: (option: T) => string;
+    /** Defaults to `(o) => (o as SelectOption).value`. */
+    getOptionValue?: (option: T) => SelectValue;
+    /** Defaults to `(o) => (o as SelectOption).disabled === true`. */
+    getOptionDisabled?: (option: T) => boolean;
+    /** Defaults to `(o) => (o as SelectOption).description`. */
+    getOptionDescription?: (option: T) => string | undefined;
+    /** Defaults to `(o) => (o as SelectOption).icon`. */
+    getOptionIcon?: (option: T) => React.ReactNode;
     placeholder?: string;
     searchable?: boolean;
     label?: string;
@@ -31,18 +48,18 @@ interface BaseSelectProps {
     textStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-interface SingleSelectProps extends BaseSelectProps {
+interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi?: false;
     value?: SelectValue;
     onChange: (value: SelectValue) => void;
 }
-interface MultiSelectProps extends BaseSelectProps {
+interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
     multi: true;
     value?: SelectValue[];
     onChange: (value: SelectValue[]) => void;
 }
-export type SelectProps = SingleSelectProps | MultiSelectProps;
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<View>>;
+export type SelectProps<T = SelectOption> = SingleSelectProps<T> | MultiSelectProps<T>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<View>>;
 export { Select };
 export default Select;
 //# sourceMappingURL=Select.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",