@react-native-ohos/native-base 3.4.29-rc.1

package/lib/commonjs/components/composites/Transitions/Transition.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Transition = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const transformStylesMap = {
+  translateY: true,
+  translateX: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  rotate: true
+};
+const defaultStyles = {
+  opacity: 1,
+  translateY: 0,
+  translateX: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: '0deg'
+};
+
+const getAnimatedStyles = animateValue => (initial, to) => {
+  const styles = {
+    transform: []
+  };
+
+  for (let key in initial) {
+    if (key === 'transition') {
+      continue;
+    }
+
+    if (key in transformStylesMap) {
+      var _styles$transform;
+
+      (_styles$transform = styles.transform) === null || _styles$transform === void 0 ? void 0 : _styles$transform.push({
+        [key]: animateValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [initial[key], to[key]]
+        })
+      });
+    } else {
+      styles[key] = animateValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [initial[key], to[key]]
+      });
+    }
+  }
+
+  return styles;
+};
+
+const defaultTransitionConfig = {
+  type: 'timing',
+  useNativeDriver: true,
+  duration: 250,
+  delay: 0
+};
+const Transition = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  onTransitionComplete,
+  visible = false,
+  initial,
+  animate,
+  exit,
+  style,
+  as,
+  ...rest
+}, ref) => {
+  const animateValue = _react.default.useRef(new _reactNative.Animated.Value(0)).current;
+
+  const Component = _react.default.useMemo(() => {
+    if (as) {
+      return _reactNative.Animated.createAnimatedComponent(as);
+    }
+
+    return _reactNative.Animated.View;
+  }, [as]);
+
+  const [animationState, setAnimationState] = _react.default.useState('');
+
+  const prevVisible = _react.default.useRef(visible);
+
+  _react.default.useEffect(() => {
+    if (animationState === 'entering' || animationState === 'exiting') {
+      var _transition$type;
+
+      const entryTransition = { ...defaultTransitionConfig,
+        ...(animate === null || animate === void 0 ? void 0 : animate.transition)
+      };
+      const exitTransition = { ...defaultTransitionConfig,
+        ...(exit === null || exit === void 0 ? void 0 : exit.transition)
+      };
+      const startAnimation = animationState === 'entering' ? 1 : 0;
+      const transition = startAnimation ? entryTransition : exitTransition;
+
+      _reactNative.Animated.sequence([// @ts-ignore - delay is present in defaultTransitionConfig
+      _reactNative.Animated.delay(transition.delay), _reactNative.Animated[(_transition$type = transition.type) !== null && _transition$type !== void 0 ? _transition$type : 'timing'](animateValue, {
+        toValue: startAnimation,
+        useNativeDriver: true,
+        ...transition
+      })]).start(() => {
+        if (animationState === 'entering') {
+          setAnimationState('entered');
+        } else if (animationState === 'exiting') {
+          setAnimationState('exited');
+        }
+      }); // });
+
+    }
+
+    if (animationState === 'exited') {
+      onTransitionComplete && onTransitionComplete('exited');
+    } else if (animationState === 'entered') {
+      onTransitionComplete && onTransitionComplete('entered');
+    } // if (animationState === 'entering') {
+    //   //
+    // }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [animationState, onTransitionComplete]);
+
+  _react.default.useEffect(() => {
+    // if (!visible) {
+    if (prevVisible.current !== visible && !visible) {
+      setAnimationState('exiting');
+    }
+
+    if (visible) {
+      setAnimationState('entering');
+    }
+
+    prevVisible.current = visible; // }
+  }, [visible]); // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation
+  //  const initialState = { ...defaultStyles, ...initial };
+
+
+  const initialState = animationState === 'exited' && exit ? { ...defaultStyles,
+    ...exit
+  } : { ...defaultStyles,
+    ...initial
+  }; // const initialState = { ...defaultStyles, ...initial };
+  // initial =
+  //   animationState === 'exited'
+  //     ? { ...defaultStyles, ...exit }
+  //     : { ...defaultStyles, ...initial };
+
+  const animateState = { ...defaultStyles,
+    ...animate
+  }; // const [initialState, setInitialState] = React.useState({
+  //   ...defaultStyles,
+  //   ...initial,
+  // });
+  // console.log('Initial state ', initial);
+  // const [animateState] = React.useState({ ...defaultStyles, ...animate });
+
+  const styles = _react.default.useMemo(() => {
+    // console.log('display state here', initial);
+    return [getAnimatedStyles(animateValue)(initialState, animateState), style];
+  }, [animateValue, initial, animate, style]);
+
+  return /*#__PURE__*/_react.default.createElement(Component // pointerEvents="box-none"
+  , _extends({
+    pointerEvents: !visible ? 'none' : 'box-none' // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743
+    // needsOffscreenAlphaCompositing
+    // style={[styles]}
+    ,
+    style: [styles],
+    ref: ref
+  }, rest), children);
+});
+exports.Transition = Transition;
+//# sourceMappingURL=Transition.js.map

package/lib/commonjs/components/composites/Transitions/Transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Transition.tsx"],"names":["transformStylesMap","translateY","translateX","scale","scaleX","scaleY","rotate","defaultStyles","opacity","getAnimatedStyles","animateValue","initial","to","styles","transform","key","push","interpolate","inputRange","outputRange","defaultTransitionConfig","type","useNativeDriver","duration","delay","Transition","children","onTransitionComplete","visible","animate","exit","style","as","rest","ref","React","useRef","Animated","Value","current","Component","useMemo","createAnimatedComponent","View","animationState","setAnimationState","useState","prevVisible","useEffect","entryTransition","transition","exitTransition","startAnimation","sequence","toValue","start","initialState","animateState"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { forwardRef } from 'react';\r\nimport { Animated } from 'react-native';\r\nimport type {\r\n  ISupportedTransitions,\r\n  ITransitionConfig,\r\n  ITransitionProps,\r\n} from './types';\r\n\r\nconst transformStylesMap = {\r\n  translateY: true,\r\n  translateX: true,\r\n  scale: true,\r\n  scaleX: true,\r\n  scaleY: true,\r\n  rotate: true,\r\n};\r\n\r\nconst defaultStyles = {\r\n  opacity: 1,\r\n  translateY: 0,\r\n  translateX: 0,\r\n  scale: 1,\r\n  scaleX: 1,\r\n  scaleY: 1,\r\n  rotate: '0deg',\r\n};\r\n\r\nconst getAnimatedStyles = (animateValue: any) => (\r\n  initial: ISupportedTransitions,\r\n  to: ISupportedTransitions\r\n) => {\r\n  const styles: any = {\r\n    transform: [],\r\n  };\r\n  for (let key in initial) {\r\n    if (key === 'transition') {\r\n      continue;\r\n    }\r\n\r\n    if (key in transformStylesMap) {\r\n      styles.transform?.push({\r\n        [key]: animateValue.interpolate({\r\n          inputRange: [0, 1],\r\n          outputRange: [(initial as any)[key], (to as any)[key]],\r\n        }),\r\n      } as any);\r\n    } else {\r\n      styles[key] = animateValue.interpolate({\r\n        inputRange: [0, 1],\r\n        outputRange: [(initial as any)[key], (to as any)[key]],\r\n      });\r\n    }\r\n  }\r\n\r\n  return styles;\r\n};\r\n\r\nconst defaultTransitionConfig: ITransitionConfig = {\r\n  type: 'timing',\r\n  useNativeDriver: true,\r\n  duration: 250,\r\n  delay: 0,\r\n};\r\n\r\nexport const Transition = forwardRef(\r\n  (\r\n    {\r\n      children,\r\n      onTransitionComplete,\r\n      visible = false,\r\n      initial,\r\n      animate,\r\n      exit,\r\n      style,\r\n      as,\r\n      ...rest\r\n    }: ITransitionProps,\r\n    ref: any\r\n  ) => {\r\n    const animateValue = React.useRef(new Animated.Value(0)).current;\r\n\r\n    const Component = React.useMemo(() => {\r\n      if (as) {\r\n        return Animated.createAnimatedComponent(as);\r\n      }\r\n      return Animated.View;\r\n    }, [as]);\r\n\r\n    const [animationState, setAnimationState] = React.useState('');\r\n\r\n    const prevVisible = React.useRef(visible);\r\n\r\n    React.useEffect(() => {\r\n      if (animationState === 'entering' || animationState === 'exiting') {\r\n        const entryTransition = {\r\n          ...defaultTransitionConfig,\r\n          ...animate?.transition,\r\n        };\r\n        const exitTransition = {\r\n          ...defaultTransitionConfig,\r\n          ...exit?.transition,\r\n        };\r\n\r\n        const startAnimation = animationState === 'entering' ? 1 : 0;\r\n\r\n        const transition = startAnimation ? entryTransition : exitTransition;\r\n\r\n        Animated.sequence([\r\n          // @ts-ignore - delay is present in defaultTransitionConfig\r\n          Animated.delay(transition.delay),\r\n          Animated[transition.type ?? 'timing'](animateValue, {\r\n            toValue: startAnimation,\r\n            useNativeDriver: true,\r\n            ...transition,\r\n          }),\r\n        ]).start(() => {\r\n          if (animationState === 'entering') {\r\n            setAnimationState('entered');\r\n          } else if (animationState === 'exiting') {\r\n            setAnimationState('exited');\r\n          }\r\n        });\r\n        // });\r\n      }\r\n\r\n      if (animationState === 'exited') {\r\n        onTransitionComplete && onTransitionComplete('exited');\r\n      } else if (animationState === 'entered') {\r\n        onTransitionComplete && onTransitionComplete('entered');\r\n      }\r\n      // if (animationState === 'entering') {\r\n      //   //\r\n      // }\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [animationState, onTransitionComplete]);\r\n\r\n    React.useEffect(() => {\r\n      // if (!visible) {\r\n      if (prevVisible.current !== visible && !visible) {\r\n        setAnimationState('exiting');\r\n      }\r\n\r\n      if (visible) {\r\n        setAnimationState('entering');\r\n      }\r\n      prevVisible.current = visible;\r\n      // }\r\n    }, [visible]);\r\n\r\n    // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation\r\n\r\n    //  const initialState = { ...defaultStyles, ...initial };\r\n    const initialState =\r\n      animationState === 'exited' && exit\r\n        ? { ...defaultStyles, ...exit }\r\n        : { ...defaultStyles, ...initial };\r\n    // const initialState = { ...defaultStyles, ...initial };\r\n\r\n    // initial =\r\n    //   animationState === 'exited'\r\n    //     ? { ...defaultStyles, ...exit }\r\n    //     : { ...defaultStyles, ...initial };\r\n\r\n    const animateState = { ...defaultStyles, ...animate };\r\n\r\n    // const [initialState, setInitialState] = React.useState({\r\n    //   ...defaultStyles,\r\n    //   ...initial,\r\n    // });\r\n    // console.log('Initial state ', initial);\r\n\r\n    // const [animateState] = React.useState({ ...defaultStyles, ...animate });\r\n    const styles = React.useMemo(() => {\r\n      // console.log('display state here', initial);\r\n      return [\r\n        getAnimatedStyles(animateValue)(\r\n          initialState as ISupportedTransitions,\r\n          animateState as ISupportedTransitions\r\n        ),\r\n        style,\r\n      ];\r\n    }, [animateValue, initial, animate, style]);\r\n\r\n    return (\r\n      <Component\r\n        // pointerEvents=\"box-none\"\r\n        pointerEvents={!visible ? 'none' : 'box-none'}\r\n        // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743\r\n        // needsOffscreenAlphaCompositing\r\n        // style={[styles]}\r\n        style={[styles]}\r\n        ref={ref}\r\n        {...rest}\r\n      >\r\n        {children}\r\n      </Component>\r\n    );\r\n  }\r\n);\r\n"]}

package/lib/commonjs/components/composites/Transitions/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Fade", {
+  enumerable: true,
+  get: function () {
+    return _Fade.default;
+  }
+});
+Object.defineProperty(exports, "ScaleFade", {
+  enumerable: true,
+  get: function () {
+    return _ScaleFade.default;
+  }
+});
+Object.defineProperty(exports, "Slide", {
+  enumerable: true,
+  get: function () {
+    return _Slide.default;
+  }
+});
+Object.defineProperty(exports, "SlideFade", {
+  enumerable: true,
+  get: function () {
+    return _SlideFade.default;
+  }
+});
+Object.defineProperty(exports, "Stagger", {
+  enumerable: true,
+  get: function () {
+    return _Stagger.default;
+  }
+});
+Object.defineProperty(exports, "PresenceTransition", {
+  enumerable: true,
+  get: function () {
+    return _PresenceTransition.default;
+  }
+});
+
+var _Fade = _interopRequireDefault(require("./Fade"));
+
+var _ScaleFade = _interopRequireDefault(require("./ScaleFade"));
+
+var _Slide = _interopRequireDefault(require("./Slide"));
+
+var _SlideFade = _interopRequireDefault(require("./SlideFade"));
+
+var _Stagger = _interopRequireDefault(require("./Stagger"));
+
+var _PresenceTransition = _interopRequireDefault(require("./PresenceTransition"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/composites/Transitions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as Fade } from './Fade';\r\nexport { default as ScaleFade } from './ScaleFade';\r\nexport { default as Slide } from './Slide';\r\nexport { default as SlideFade } from './SlideFade';\r\nexport { default as Stagger } from './Stagger';\r\nexport { default as PresenceTransition } from './PresenceTransition';\r\nexport type {\r\n  IFadeProps,\r\n  IScaleFadeProps,\r\n  ISlideProps,\r\n  ISlideFadeProps,\r\n} from './types';\r\n"]}

package/lib/commonjs/components/composites/Transitions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/composites/Transitions/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/commonjs/components/composites/Typeahead/Typeahead.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Typeahead = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("@react-native-aria/button");
+
+var _combobox = require("@react-stately/combobox");
+
+var _combobox2 = require("@react-native-aria/combobox");
+
+var _listbox = require("@react-native-aria/listbox");
+
+var _reactNative = require("react-native");
+
+var _collections = require("@react-stately/collections");
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _Pressable = require("../../primitives/Pressable");
+
+var _Text = _interopRequireDefault(require("../../primitives/Text"));
+
+var _tools = require("../../../theme/tools");
+
+var _types = require("./types");
+
+var _Input = require("../../primitives/Input");
+
+var _hooks = require("../../../hooks");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Typeahead = /*#__PURE__*/_react.default.forwardRef(({
+  onSelectedItemChange,
+  options,
+  renderItem,
+  getOptionLabel,
+  getOptionKey,
+  onChange,
+  numberOfItems,
+  ...rest
+}, ref) => {
+  //TODO: refactor for responsive prop
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(rest)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ComboBoxImplementation, _extends({}, rest, {
+    onSelectionChange: onSelectedItemChange,
+    items: numberOfItems !== undefined ? options.slice(0, numberOfItems) : options,
+    onInputChange: onChange,
+    ref: ref
+  }), item => {
+    if (typeof item !== 'string' && getOptionLabel === undefined) {
+      throw new Error('Please use getOptionLabel prop');
+    }
+
+    if (item.id === undefined && getOptionKey === undefined) {
+      throw new Error('Please use getOptionKey prop');
+    }
+
+    const optionLabel = getOptionLabel ? getOptionLabel(item) : item;
+    const optionKey = getOptionKey ? getOptionKey(item) : item.id !== undefined ? item.id : optionLabel;
+    return /*#__PURE__*/_react.default.createElement(_collections.Item, {
+      textValue: optionLabel,
+      key: optionKey
+    }, renderItem ? renderItem(item) : /*#__PURE__*/_react.default.createElement(_Box.default, {
+      p: 2,
+      justifyContent: "center"
+    }, /*#__PURE__*/_react.default.createElement(_Text.default, null, optionLabel)));
+  });
+});
+
+exports.Typeahead = Typeahead;
+
+const ComboBoxImplementation = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [layoutProps] = (0, _tools.extractInObject)(props, _types.layoutPropsList);
+  let state = (0, _combobox.useComboBoxState)(props);
+
+  let triggerRef = _react.default.useRef(null);
+
+  let inputRef = _react.default.useRef(null);
+
+  let listBoxRef = _react.default.useRef(null);
+
+  let popoverRef = _react.default.useRef(null);
+
+  let {
+    buttonProps: triggerProps,
+    inputProps,
+    listBoxProps,
+    labelProps
+  } = (0, _combobox2.useComboBox)({ ...props,
+    inputRef,
+    buttonRef: triggerRef,
+    listBoxRef,
+    popoverRef,
+    menuTrigger: 'input'
+  }, state);
+
+  const toggleIconSetter = () => {
+    if (typeof props.toggleIcon === 'function') return props.toggleIcon({
+      isOpen: state.isOpen
+    });
+    return props.toggleIcon;
+  };
+
+  let {
+    buttonProps
+  } = (0, _button.useButton)(triggerProps);
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    flexDirection: "row"
+  }, layoutProps, {
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flex: 1
+  }, props.label && /*#__PURE__*/_react.default.createElement(_Text.default, _extends({}, labelProps, {
+    pb: 1
+  }), props.label), /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({}, inputProps, {
+    ref: inputRef,
+    InputRightElement:
+    /*#__PURE__*/
+    // @ts-ignore - RN has hitSlop type inconsistent for View and Pressable!
+    _react.default.createElement(_Pressable.Pressable, _extends({}, buttonProps, {
+      ref: triggerRef
+    }), toggleIconSetter())
+  })), state.isOpen && /*#__PURE__*/_react.default.createElement(ListBoxPopup, _extends({}, listBoxProps, {
+    listBoxRef: listBoxRef,
+    popoverRef: popoverRef,
+    state: state,
+    label: props.label
+  }))));
+});
+
+function ListBoxPopup(props) {
+  let {
+    popoverRef,
+    listBoxRef,
+    state,
+    dropdownHeight,
+    label
+  } = props;
+  let {
+    listBoxProps
+  } = (0, _listbox.useListBox)({
+    label,
+    autoFocus: state.focusStrategy,
+    disallowEmptySelection: true
+  }, state, listBoxRef);
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    ref: popoverRef
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    position: "absolute",
+    width: "100%",
+    maxHeight: dropdownHeight !== null && dropdownHeight !== void 0 ? dropdownHeight : 200
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, _extends({}, listBoxProps, {
+    keyboardShouldPersistTaps: "handled",
+    ref: node => {
+      if (_reactNative.Platform.OS === 'web') {
+        listBoxRef.current = (0, _reactNative.findNodeHandle)(node);
+      } else {
+        listBoxRef.current = node;
+      }
+    }
+  }), [...state.collection].map(item => /*#__PURE__*/_react.default.createElement(Option, {
+    key: item.key,
+    item: item,
+    state: state
+  })))));
+}
+
+function Option({
+  item,
+  state
+}) {
+  const searchItemStyle = (0, _hooks.useThemeProps)('TypeAheadSearchItem', {});
+
+  let ref = _react.default.useRef(null);
+
+  let isDisabled = state.disabledKeys.has(item.key);
+  let isSelected = state.selectionManager.isSelected(item.key);
+  let isFocused = state.selectionManager.focusedKey === item.key;
+  let {
+    optionProps
+  } = (0, _listbox.useOption)({
+    key: item.key,
+    isDisabled,
+    isSelected,
+    shouldFocusOnHover: true,
+    shouldUseVirtualFocus: true
+  }, state, ref);
+  let backgroundColor = searchItemStyle.backgroundColor;
+  let opacity = 1;
+
+  if (isSelected) {
+    backgroundColor = searchItemStyle._focus.backgroundColor;
+  } else if (isFocused) {
+    backgroundColor = searchItemStyle._focus.backgroundColor;
+  } else if (isDisabled) {
+    opacity = 0.6;
+    backgroundColor = searchItemStyle._disabled.backgroundColor;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Pressable.Pressable, _extends({}, optionProps, {
+    opacity: opacity,
+    cursor: isDisabled ? _reactNative.Platform.OS === 'web' ? 'not-allowed' : null : null,
+    backgroundColor: backgroundColor,
+    ref: ref
+  }), item.rendered);
+}
+//# sourceMappingURL=Typeahead.js.map

package/lib/commonjs/components/composites/Typeahead/Typeahead.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Typeahead.tsx"],"names":["Typeahead","React","forwardRef","onSelectedItemChange","options","renderItem","getOptionLabel","getOptionKey","onChange","numberOfItems","rest","ref","undefined","slice","item","Error","id","optionLabel","optionKey","ComboBoxImplementation","props","layoutProps","layoutPropsList","state","triggerRef","useRef","inputRef","listBoxRef","popoverRef","buttonProps","triggerProps","inputProps","listBoxProps","labelProps","buttonRef","menuTrigger","toggleIconSetter","toggleIcon","isOpen","label","ListBoxPopup","dropdownHeight","autoFocus","focusStrategy","disallowEmptySelection","node","Platform","OS","current","collection","map","key","Option","searchItemStyle","isDisabled","disabledKeys","has","isSelected","selectionManager","isFocused","focusedKey","optionProps","shouldFocusOnHover","shouldUseVirtualFocus","backgroundColor","opacity","_focus","_disabled","rendered"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { useButton } from '@react-native-aria/button';\r\nimport { ComboBoxState, useComboBoxState } from '@react-stately/combobox';\r\nimport { useComboBox } from '@react-native-aria/combobox';\r\nimport { useListBox, useOption } from '@react-native-aria/listbox';\r\nimport { ScrollView, findNodeHandle, Platform } from 'react-native';\r\nimport { Item } from '@react-stately/collections';\r\nimport Box from '../../primitives/Box';\r\nimport { Pressable } from '../../primitives/Pressable';\r\nimport Text from '../../primitives/Text';\r\nimport { extractInObject } from '../../../theme/tools';\r\nimport { ITypeaheadProps, IComboBoxProps, layoutPropsList } from './types';\r\nimport { Input } from '../../primitives/Input';\r\nimport { useThemeProps } from '../../../hooks';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nexport const Typeahead = React.forwardRef(\r\n  (\r\n    {\r\n      onSelectedItemChange,\r\n      options,\r\n      renderItem,\r\n      getOptionLabel,\r\n      getOptionKey,\r\n      onChange,\r\n      numberOfItems,\r\n      ...rest\r\n    }: ITypeaheadProps,\r\n    ref?: any\r\n  ) => {\r\n    //TODO: refactor for responsive prop\r\n    if (useHasResponsiveProps(rest)) {\r\n      return null;\r\n    }\r\n    return (\r\n      <ComboBoxImplementation\r\n        {...rest}\r\n        onSelectionChange={onSelectedItemChange}\r\n        items={\r\n          numberOfItems !== undefined\r\n            ? options.slice(0, numberOfItems)\r\n            : options\r\n        }\r\n        onInputChange={onChange}\r\n        ref={ref}\r\n      >\r\n        {(item: any) => {\r\n          if (typeof item !== 'string' && getOptionLabel === undefined) {\r\n            throw new Error('Please use getOptionLabel prop');\r\n          }\r\n\r\n          if (item.id === undefined && getOptionKey === undefined) {\r\n            throw new Error('Please use getOptionKey prop');\r\n          }\r\n\r\n          const optionLabel = getOptionLabel ? getOptionLabel(item) : item;\r\n          const optionKey = getOptionKey\r\n            ? getOptionKey(item)\r\n            : item.id !== undefined\r\n            ? item.id\r\n            : optionLabel;\r\n\r\n          return (\r\n            <Item textValue={optionLabel} key={optionKey}>\r\n              {renderItem ? (\r\n                renderItem(item)\r\n              ) : (\r\n                <Box p={2} justifyContent=\"center\">\r\n                  <Text>{optionLabel}</Text>\r\n                </Box>\r\n              )}\r\n            </Item>\r\n          );\r\n        }}\r\n      </ComboBoxImplementation>\r\n    );\r\n  }\r\n);\r\n\r\nconst ComboBoxImplementation = React.forwardRef(\r\n  (props: IComboBoxProps, ref?: any) => {\r\n    const [layoutProps] = extractInObject(props, layoutPropsList);\r\n    let state = useComboBoxState(props);\r\n\r\n    let triggerRef = React.useRef(null);\r\n    let inputRef = React.useRef(null);\r\n    let listBoxRef = React.useRef(null);\r\n    let popoverRef = React.useRef(null);\r\n\r\n    let {\r\n      buttonProps: triggerProps,\r\n      inputProps,\r\n      listBoxProps,\r\n      labelProps,\r\n    } = useComboBox(\r\n      {\r\n        ...props,\r\n        inputRef,\r\n        buttonRef: triggerRef,\r\n        listBoxRef,\r\n        popoverRef,\r\n        menuTrigger: 'input',\r\n      },\r\n      state\r\n    );\r\n\r\n    const toggleIconSetter = () => {\r\n      if (typeof props.toggleIcon === 'function')\r\n        return props.toggleIcon({\r\n          isOpen: state.isOpen,\r\n        });\r\n      return props.toggleIcon;\r\n    };\r\n\r\n    let { buttonProps } = useButton(triggerProps);\r\n\r\n    return (\r\n      <Box flexDirection=\"row\" {...layoutProps} ref={ref}>\r\n        <Box flex={1}>\r\n          {props.label && (\r\n            <Text {...labelProps} pb={1}>\r\n              {props.label}\r\n            </Text>\r\n          )}\r\n          <Input\r\n            {...inputProps}\r\n            ref={inputRef}\r\n            InputRightElement={\r\n              // @ts-ignore - RN has hitSlop type inconsistent for View and Pressable!\r\n              <Pressable {...buttonProps} ref={triggerRef}>\r\n                {toggleIconSetter()}\r\n              </Pressable>\r\n            }\r\n          />\r\n\r\n          {state.isOpen && (\r\n            <ListBoxPopup\r\n              {...listBoxProps}\r\n              listBoxRef={listBoxRef}\r\n              popoverRef={popoverRef}\r\n              state={state}\r\n              label={props.label}\r\n            />\r\n          )}\r\n        </Box>\r\n      </Box>\r\n    );\r\n  }\r\n);\r\n\r\ntype IListBoxProps = {\r\n  popoverRef: any;\r\n  listBoxRef: any;\r\n  state: ComboBoxState<any>;\r\n  dropdownHeight: number;\r\n  label: string;\r\n};\r\n\r\nfunction ListBoxPopup(props: IListBoxProps) {\r\n  let { popoverRef, listBoxRef, state, dropdownHeight, label } = props;\r\n\r\n  let { listBoxProps } = useListBox(\r\n    {\r\n      label,\r\n      autoFocus: state.focusStrategy,\r\n      disallowEmptySelection: true,\r\n    },\r\n    state,\r\n    listBoxRef\r\n  );\r\n\r\n  return (\r\n    <Box ref={popoverRef}>\r\n      <Box position=\"absolute\" width=\"100%\" maxHeight={dropdownHeight ?? 200}>\r\n        <ScrollView\r\n          {...listBoxProps}\r\n          keyboardShouldPersistTaps=\"handled\"\r\n          ref={(node) => {\r\n            if (Platform.OS === 'web') {\r\n              listBoxRef.current = findNodeHandle(node);\r\n            } else {\r\n              listBoxRef.current = node;\r\n            }\r\n          }}\r\n        >\r\n          {[...state.collection].map((item) => (\r\n            <Option key={item.key} item={item} state={state} />\r\n          ))}\r\n        </ScrollView>\r\n      </Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nfunction Option({ item, state }: { item: any; state: ComboBoxState<any> }) {\r\n  const searchItemStyle = useThemeProps('TypeAheadSearchItem', {});\r\n\r\n  let ref = React.useRef(null);\r\n  let isDisabled = state.disabledKeys.has(item.key);\r\n  let isSelected = state.selectionManager.isSelected(item.key);\r\n  let isFocused = state.selectionManager.focusedKey === item.key;\r\n\r\n  let { optionProps } = useOption(\r\n    {\r\n      key: item.key,\r\n      isDisabled,\r\n      isSelected,\r\n      shouldFocusOnHover: true,\r\n      shouldUseVirtualFocus: true,\r\n    },\r\n    state,\r\n    ref\r\n  );\r\n\r\n  let backgroundColor = searchItemStyle.backgroundColor;\r\n  let opacity = 1;\r\n\r\n  if (isSelected) {\r\n    backgroundColor = searchItemStyle._focus.backgroundColor;\r\n  } else if (isFocused) {\r\n    backgroundColor = searchItemStyle._focus.backgroundColor;\r\n  } else if (isDisabled) {\r\n    opacity = 0.6;\r\n    backgroundColor = searchItemStyle._disabled.backgroundColor;\r\n  }\r\n\r\n  return (\r\n    <Pressable\r\n      {...optionProps}\r\n      opacity={opacity}\r\n      cursor={\r\n        isDisabled ? (Platform.OS === 'web' ? 'not-allowed' : null) : null\r\n      }\r\n      backgroundColor={backgroundColor}\r\n      ref={ref}\r\n    >\r\n      {item.rendered}\r\n    </Pressable>\r\n  );\r\n}\r\n"]}

package/lib/commonjs/components/composites/Typeahead/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTypeahead", {
+  enumerable: true,
+  get: function () {
+    return _useTypeahead.useTypeahead;
+  }
+});
+Object.defineProperty(exports, "Typeahead", {
+  enumerable: true,
+  get: function () {
+    return _Typeahead.Typeahead;
+  }
+});
+
+var _useTypeahead = require("./useTypeahead");
+
+var _Typeahead = require("./Typeahead");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/composites/Typeahead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { useTypeahead } from './useTypeahead';\r\nexport { Typeahead } from './Typeahead';\r\n"]}

package/lib/commonjs/components/composites/Typeahead/types.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutPropsList = void 0;
+const layoutPropsList = ['m', 'mt', 'mb', 'ml', 'mr', 'position', 'flex', 'zIndex', 'top', 'right', 'bottom', 'left', 'h', 'w', 'minW', 'maxW', 'minH', 'maxH', 'height', 'width', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'direction', 'justify', 'justifyContent', 'align', 'alignContent', 'alignItems', 'alignSelf'];
+exports.layoutPropsList = layoutPropsList;
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/composites/Typeahead/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["types.ts"],"names":["layoutPropsList"],"mappings":";;;;;;AA8BO,MAAMA,eAAe,GAAG,CAC7B,GAD6B,EAE7B,IAF6B,EAG7B,IAH6B,EAI7B,IAJ6B,EAK7B,IAL6B,EAM7B,UAN6B,EAO7B,MAP6B,EAQ7B,QAR6B,EAS7B,KAT6B,EAU7B,OAV6B,EAW7B,QAX6B,EAY7B,MAZ6B,EAa7B,GAb6B,EAc7B,GAd6B,EAe7B,MAf6B,EAgB7B,MAhB6B,EAiB7B,MAjB6B,EAkB7B,MAlB6B,EAmB7B,QAnB6B,EAoB7B,OApB6B,EAqB7B,UArB6B,EAsB7B,UAtB6B,EAuB7B,WAvB6B,EAwB7B,WAxB6B,EAyB7B,WAzB6B,EA0B7B,eA1B6B,EA2B7B,UA3B6B,EA4B7B,YA5B6B,EA6B7B,UA7B6B,EA8B7B,WA9B6B,EA+B7B,SA/B6B,EAgC7B,gBAhC6B,EAiC7B,OAjC6B,EAkC7B,cAlC6B,EAmC7B,YAnC6B,EAoC7B,WApC6B,CAAxB","sourcesContent":["import type { InterfaceBoxProps } from '../../primitives/Box/types';\r\n\r\nexport type ITypeaheadProps = InterfaceBoxProps<ITypeaheadProps> & {\r\n  options: any[];\r\n  renderItem?: (item: any) => any;\r\n  onChange?: (value: string) => void;\r\n  toggleIcon?: any;\r\n  dropdownHeight?: number | string;\r\n  inputValue?: string;\r\n  onSelectedItemChange?: (value: any) => void;\r\n  numberOfItems?: number;\r\n  getOptionLabel?: (item: any) => string;\r\n  getOptionKey?: (item: any) => any;\r\n  disabledKeys?: Array<any>;\r\n  label?: string;\r\n};\r\n\r\nexport type IComboBoxProps = {\r\n  items: any[];\r\n  renderItem?: (item: any) => any;\r\n  onInputChange?: (value: string) => void;\r\n  toggleIcon?: any;\r\n  dropdownHeight?: number | string;\r\n  inputValue?: string;\r\n  onSelectionChange?: (value: any) => void;\r\n  children: any;\r\n  disabledKeys?: Array<any>;\r\n  label?: string;\r\n};\r\n\r\nexport const layoutPropsList = [\r\n  'm',\r\n  'mt',\r\n  'mb',\r\n  'ml',\r\n  'mr',\r\n  'position',\r\n  'flex',\r\n  'zIndex',\r\n  'top',\r\n  'right',\r\n  'bottom',\r\n  'left',\r\n  'h',\r\n  'w',\r\n  'minW',\r\n  'maxW',\r\n  'minH',\r\n  'maxH',\r\n  'height',\r\n  'width',\r\n  'minWidth',\r\n  'maxWidth',\r\n  'minHeight',\r\n  'maxHeight',\r\n  'flexBasis',\r\n  'flexDirection',\r\n  'flexGrow',\r\n  'flexShrink',\r\n  'flexWrap',\r\n  'direction',\r\n  'justify',\r\n  'justifyContent',\r\n  'align',\r\n  'alignContent',\r\n  'alignItems',\r\n  'alignSelf',\r\n];\r\n"]}

package/lib/commonjs/components/composites/Typeahead/useTypeahead/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTypeahead", {
+  enumerable: true,
+  get: function () {
+    return _useTypeahead.useTypeahead;
+  }
+});
+
+var _useTypeahead = require("./useTypeahead");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/composites/Typeahead/useTypeahead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { useTypeahead } from './useTypeahead';\r\n"]}