@coinbase/cds-mobile 8.28.2 → 8.30.0

package/esm/alpha/combobox/Combobox.js

@@ -0,0 +1,194 @@
+const _excluded = ["ComboboxControlComponent"],
+  _excluded2 = ["type", "value", "onChange", "options", "open", "setOpen", "label", "placeholder", "disabled", "variant", "startNode", "endNode", "accessibilityLabel", "defaultOpen", "searchText", "onSearch", "defaultSearchText", "closeButtonLabel", "filterFunction", "SelectControlComponent", "ComboboxControlComponent", "SelectDropdownComponent", "hideSearchInput"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { createContext, forwardRef, memo, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import Fuse from 'fuse.js';
+import { Button } from '../../buttons/Button';
+import { Box } from '../../layout';
+import { StickyFooter } from '../../sticky-footer/StickyFooter';
+import { DefaultSelectControl } from '../select/DefaultSelectControl';
+import { DefaultSelectDropdown } from '../select/DefaultSelectDropdown';
+import { Select } from '../select/Select';
+import { DefaultComboboxControl } from './DefaultComboboxControl';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Context used for Combobox props needed to render to the ComboboxControlComponent.
+ * We use the any type here because the concrete type is not known at this point.
+ * The unknown type does not satisfy the SelectType type.
+ */
+const ComboboxContext = /*#__PURE__*/createContext(null);
+const useComboboxContext = () => {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error('Combobox components must be used within ComboboxContext.Provider');
+  }
+  return context;
+};
+/**
+ * Wraps the ComboboxControlComponent with passed in props and the ComboboxContext values.
+ * This allows the usage of all props when wanting to use a custom SelectControlComponent in Combobox.
+ * Otherwise, a customer using a custom component would need to use props and context to get the
+ * <ComboboxControlComponent> rendering correctly.
+ */
+const ComboboxControlContextAdapter = /*#__PURE__*/memo(_ref => {
+  let {
+      ComboboxControlComponent
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    searchText,
+    onSearch,
+    hideSearchInput,
+    options
+  } = useComboboxContext();
+  return /*#__PURE__*/_jsx(ComboboxControlComponent, _extends({}, props, {
+    hideSearchInput: hideSearchInput,
+    onSearch: onSearch,
+    options: options,
+    searchText: searchText
+  }));
+});
+const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      type = 'single',
+      value,
+      onChange,
+      options,
+      open: openProp,
+      setOpen: setOpenProp,
+      label,
+      placeholder,
+      disabled,
+      variant,
+      startNode,
+      endNode,
+      accessibilityLabel = 'Combobox control',
+      defaultOpen,
+      searchText: searchTextProp,
+      onSearch: onSearchProp,
+      defaultSearchText = '',
+      closeButtonLabel = 'Done',
+      filterFunction,
+      SelectControlComponent = DefaultSelectControl,
+      ComboboxControlComponent = DefaultComboboxControl,
+      SelectDropdownComponent = DefaultSelectDropdown,
+      hideSearchInput
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const [searchTextInternal, setSearchTextInternal] = useState(defaultSearchText);
+  const searchText = searchTextProp != null ? searchTextProp : searchTextInternal;
+  const setSearchText = onSearchProp != null ? onSearchProp : setSearchTextInternal;
+  if (typeof searchTextProp === 'undefined' !== (typeof onSearchProp === 'undefined')) {
+    throw Error('Combobox component must be fully controlled or uncontrolled: "searchText" and "onSearch" props must be provided together or not at all');
+  }
+  const [openInternal, setOpenInternal] = useState(defaultOpen != null ? defaultOpen : false);
+  const open = openProp != null ? openProp : openInternal;
+  const setOpen = setOpenProp != null ? setOpenProp : setOpenInternal;
+  if (typeof openProp === 'undefined' !== (typeof setOpenProp === 'undefined')) throw Error('Combobox component must be fully controlled or uncontrolled: "open" and "setOpen" props must be provided together or not at all');
+  const fuse = useMemo(() => new Fuse(options, {
+    keys: ['label', 'description'],
+    threshold: 0.3
+  }), [options]);
+  const filteredOptions = useMemo(() => {
+    if (searchText.length === 0) return options;
+    if (filterFunction) return filterFunction(options, searchText);
+    return fuse.search(searchText).map(result => result.item);
+  }, [filterFunction, fuse, options, searchText]);
+  const handleChange = useCallback(value => {
+    onChange == null || onChange(value);
+  }, [onChange]);
+  const controlRef = useRef(null);
+  useImperativeHandle(ref, () => Object.assign(controlRef.current, {
+    open,
+    setOpen
+  }));
+  const searchInputRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(visibility => {
+    if (visibility === 'visible') {
+      var _searchInputRef$curre;
+      (_searchInputRef$curre = searchInputRef.current) == null || _searchInputRef$curre.focus();
+    }
+  }, []);
+  const ComboboxControl = useCallback(props => {
+    return /*#__PURE__*/_jsx(ComboboxControlContextAdapter, _extends({}, props, {
+      ComboboxControlComponent: ComboboxControlComponent,
+      SelectControlComponent: SelectControlComponent,
+      controlRef: controlRef,
+      searchInputRef: searchInputRef
+    }));
+  }, [ComboboxControlComponent, SelectControlComponent, searchInputRef]);
+  const ComboboxDropdown = useCallback(props => /*#__PURE__*/_jsx(SelectDropdownComponent, _extends({
+    label: label,
+    minHeight: 500
+  }, props, {
+    footer: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      behavior: "padding",
+      keyboardVerticalOffset: Platform.OS === 'ios' ? 86 : 0,
+      children: /*#__PURE__*/_jsx(View, {
+        style: Platform.OS === 'android' ? {
+          overflow: 'hidden',
+          paddingTop: 4
+        } : undefined,
+        children: /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bg",
+          elevation: 2,
+          style: {
+            shadowOffset: {
+              width: 0,
+              height: -32
+            },
+            shadowOpacity: 0.05
+          },
+          children: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            onPress: () => setOpen(false),
+            children: closeButtonLabel
+          })
+        })
+      })
+    }),
+    header: /*#__PURE__*/_jsx(Box, {
+      paddingX: 3,
+      children: /*#__PURE__*/_jsx(ComboboxControl, _extends({
+        endNode: endNode,
+        placeholder: placeholder,
+        startNode: startNode,
+        variant: variant
+      }, props, {
+        label: null,
+        styles: undefined
+      }))
+    }),
+    onVisibilityChange: handleTrayVisibilityChange
+  })), [ComboboxControl, SelectDropdownComponent, closeButtonLabel, endNode, handleTrayVisibilityChange, label, placeholder, setOpen, startNode, variant]);
+  return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
+    value: {
+      searchText,
+      onSearch: setSearchText,
+      hideSearchInput: hideSearchInput != null ? hideSearchInput : false,
+      options
+    },
+    children: /*#__PURE__*/_jsx(Select, _extends({
+      ref: controlRef,
+      SelectControlComponent: ComboboxControl,
+      SelectDropdownComponent: ComboboxDropdown,
+      accessibilityLabel: accessibilityLabel,
+      defaultOpen: defaultOpen,
+      disabled: disabled,
+      endNode: endNode,
+      label: label,
+      onChange: handleChange,
+      open: open,
+      options: filteredOptions,
+      placeholder: placeholder,
+      setOpen: setOpen,
+      startNode: startNode,
+      type: type,
+      value: value,
+      variant: variant
+    }, props))
+  });
+}));
+export const Combobox = ComboboxBase;

package/esm/alpha/combobox/DefaultComboboxControl.js

@@ -0,0 +1,80 @@
+const _excluded = ["SelectControlComponent", "value", "placeholder", "open", "setOpen", "disabled", "options", "searchText", "onSearch", "searchInputRef", "hideSearchInput"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { StyleSheet } from 'react-native';
+import { NativeInput } from '../../controls/NativeInput';
+import { useTheme } from '../../hooks/useTheme';
+import { HStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { DefaultSelectControl } from '../select/DefaultSelectControl';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const hasSelectedValue = currentValue => currentValue !== null && typeof currentValue !== 'undefined' && !(Array.isArray(currentValue) && currentValue.length === 0);
+export const DefaultComboboxControl = _ref => {
+  var _props$styles, _props$styles2;
+  let {
+      SelectControlComponent = DefaultSelectControl,
+      value,
+      placeholder,
+      open,
+      setOpen,
+      disabled,
+      options,
+      searchText,
+      onSearch,
+      searchInputRef,
+      hideSearchInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const hasValue = hasSelectedValue(value);
+  const shouldRenderSearchInput = !hideSearchInput && (!hasValue || open);
+  return /*#__PURE__*/_jsx(SelectControlComponent, _extends({
+    disabled: disabled,
+    open: open,
+    options: options,
+    setOpen: setOpen,
+    value: value
+  }, props, {
+    contentNode: shouldRenderSearchInput ? /*#__PURE__*/_jsx(HStack, {
+      flexWrap: "wrap",
+      children: /*#__PURE__*/_jsx(NativeInput, {
+        ref: searchInputRef,
+        disabled: disabled || !open,
+        onChangeText: onSearch,
+        onPress: () => !disabled && setOpen(true),
+        placeholder: typeof placeholder === 'string' ? placeholder : undefined,
+        style: {
+          flex: 0,
+          flexGrow: 1,
+          flexShrink: 1,
+          minWidth: 0,
+          padding: 0,
+          height: hasValue ? 24 : 48,
+          marginTop: hasValue ? 0 : -24,
+          marginBottom: hasValue ? -12 : -24,
+          paddingTop: hasValue ? 8 : 0,
+          // This is constrained by the parent container's width. The width is large
+          // to ensure it grows to fill the control
+          width: open ? '100%' : undefined
+        },
+        value: searchText
+      })
+    }) : /*#__PURE__*/_jsx(_Fragment, {
+      children: hasValue ? null : /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "body",
+        paddingY: 0,
+        children: typeof placeholder === 'string' ? placeholder : ''
+      })
+    }),
+    placeholder: null,
+    styles: _extends({}, props.styles, {
+      controlEndNode: _extends({}, StyleSheet.flatten((_props$styles = props.styles) == null ? void 0 : _props$styles.controlEndNode), {
+        alignItems: hasValue && shouldRenderSearchInput ? 'flex-end' : 'center'
+      }),
+      controlValueNode: _extends({}, StyleSheet.flatten((_props$styles2 = props.styles) == null ? void 0 : _props$styles2.controlValueNode), {
+        paddingBottom: hasValue && shouldRenderSearchInput ? theme.space[1.5] : 0
+      })
+    })
+  }));
+};