@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -1,168 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.KeyboardAwareScrollView = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _index = require("../../theme/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * A ScrollView that keeps the focused input visible above the keyboard — no
- * native dependency. On keyboard show it pads the content by the keyboard
- * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
- * above the keyboard, but only when it would otherwise be covered (so already-
- * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
- */
-const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    children,
-    extraScrollHeight = 24,
-    disabled = false,
-    safeAreaEdges = ['bottom'],
-    refreshing = false,
-    onRefresh,
-    keyboardOpeningTime = 250,
-    viewIsInsideTabBar = false,
-    resetScrollToCoords,
-    contentContainerStyle,
-    refreshControl,
-    onScroll,
-    onLayout,
-    ...rest
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const scrollRef = (0, _react.useRef)(null);
-  const scrollYRef = (0, _react.useRef)(0);
-  const viewportHeightRef = (0, _react.useRef)(0);
-  const [keyboardHeight, setKeyboardHeight] = (0, _react.useState)(0);
-  const setRefs = (0, _react.useCallback)(node => {
-    scrollRef.current = node;
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  }, [ref]);
-  const scrollFocusedIntoView = (0, _react.useCallback)(kbHeight => {
-    const scroll = scrollRef.current;
-    const stateApi = _reactNative.TextInput?.State;
-    const focused = stateApi?.currentlyFocusedInput?.();
-    if (!scroll || !focused?.measureLayout) {
-      return;
-    }
-    focused.measureLayout(scroll, (_left, top, _width, height) => {
-      const scrollY = scrollYRef.current;
-      const viewportH = viewportHeightRef.current;
-      if (viewportH <= 0) {
-        return;
-      }
-      const keyboardTop = viewportH - kbHeight - extraScrollHeight;
-      const fieldBottomInViewport = top - scrollY + height;
-      if (fieldBottomInViewport > keyboardTop) {
-        const delta = fieldBottomInViewport - keyboardTop;
-        scroll.scrollTo({
-          y: scrollY + delta,
-          animated: true
-        });
-      }
-    }, () => undefined);
-  }, [extraScrollHeight]);
-  (0, _react.useEffect)(() => {
-    if (disabled) {
-      return undefined;
-    }
-    // iOS exposes the will* events (smoother); Android only fires did*.
-    const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    let timeoutId;
-    const showSub = _reactNative.Keyboard.addListener(showEvent, e => {
-      const height = e.endCoordinates?.height ?? 0;
-      setKeyboardHeight(height);
-      // Wait for the keyboard's own animation to (roughly) finish before
-      // scrolling, so we measure against the settled viewport. Tracked so
-      // it can be cancelled on unmount or a second show before it fires.
-      if (timeoutId != null) {
-        clearTimeout(timeoutId);
-      }
-      timeoutId = setTimeout(() => scrollFocusedIntoView(height), keyboardOpeningTime);
-    });
-    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => {
-      setKeyboardHeight(0);
-      if (resetScrollToCoords) {
-        scrollRef.current?.scrollTo({
-          ...resetScrollToCoords,
-          animated: true
-        });
-      }
-    });
-    return () => {
-      if (timeoutId != null) {
-        clearTimeout(timeoutId);
-      }
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [disabled, scrollFocusedIntoView, keyboardOpeningTime, resetScrollToCoords]);
-  const handleLayout = (0, _react.useCallback)(e => {
-    viewportHeightRef.current = e.nativeEvent.layout.height;
-    onLayout?.(e);
-  }, [onLayout]);
-  const handleScroll = (0, _react.useCallback)(e => {
-    scrollYRef.current = e.nativeEvent.contentOffset.y;
-    onScroll?.(e);
-  }, [onScroll]);
-
-  // Borrowed from the spacing scale because the theme has no tab-bar height
-  // token, and 3xl (48) is the closest honest value: a react-navigation bottom
-  // tab bar is 49pt on iOS and 56dp on Android before safe-area padding. If a
-  // dedicated token is ever added, this should use it rather than a scale step
-  // that happens to be about right.
-  const tabBarInset = viewIsInsideTabBar ? theme.spacing['3xl'] : 0;
-  const includesBottomSafeArea = safeAreaEdges.includes('bottom');
-  // Once the keyboard is up it already extends to the physical bottom of the
-  // screen (past the home-indicator safe area), so adding the bottom inset
-  // on top of the keyboard height would double-count that strip of space.
-  const bottomInset = keyboardHeight > 0 ? keyboardHeight : includesBottomSafeArea ? insets.bottom : 0;
-  const safeAreaPadding = {
-    paddingBottom: bottomInset + tabBarInset,
-    ...(safeAreaEdges.includes('top') ? {
-      paddingTop: insets.top
-    } : null),
-    ...(safeAreaEdges.includes('left') ? {
-      paddingLeft: insets.left
-    } : null),
-    ...(safeAreaEdges.includes('right') ? {
-      paddingRight: insets.right
-    } : null)
-  };
-  const resolvedRefreshControl = refreshControl ?? (onRefresh ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
-    refreshing: refreshing,
-    onRefresh: onRefresh,
-    tintColor: theme.colors.primary,
-    colors: [theme.colors.primary]
-  }) : undefined);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-    ref: setRefs,
-    onScroll: handleScroll,
-    onLayout: handleLayout,
-    scrollEventThrottle: 16,
-    keyboardShouldPersistTaps: "handled"
-    // Scrolling must not close the keyboard: a user filling a long form
-    // scrolls to check or reach the next field while typing. Pass
-    // keyboardDismissMode through the spread props to opt back in.
-    ,
-    keyboardDismissMode: "none",
-    contentContainerStyle: [contentContainerStyle, safeAreaPadding],
-    refreshControl: resolvedRefreshControl,
-    ...rest,
-    children: children
-  });
-});
-KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
-var _default = exports.default = KeyboardAwareScrollView;
-//# sourceMappingURL=KeyboardAwareScrollView.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.KeyboardAwareScrollView=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_jsxRuntime=require("react/jsx-runtime");const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=exports.KeyboardAwareScrollView=(0,_react.forwardRef)((e,r)=>{const{children:t,bottomOffset:a=24,extraKeyboardSpace:o=0,safeAreaEdges:i=["bottom"],refreshing:s=!1,onRefresh:l,dismissOnTapOutside:n=!1,contentContainerStyle:d,refreshControl:c,...u}=e,f=(0,_index.useTheme)(),b=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),y=i.includes("bottom"),p={paddingBottom:y?b.bottom:0,...i.includes("top")?{paddingTop:b.top}:null,...i.includes("left")?{paddingLeft:b.left}:null,...i.includes("right")?{paddingRight:b.right}:null},x=c??(l?(0,_jsxRuntime.jsx)(_reactNative.RefreshControl,{refreshing:s,onRefresh:l,tintColor:f.colors.primary,colors:[f.colors.primary]}):void 0);return(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardAwareScrollView,{ref:r,bottomOffset:a,extraKeyboardSpace:o-(y?b.bottom:0),keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,p],refreshControl:x,...u,children:n?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessible:!1,onPress:_reactNative.Keyboard.dismiss,style:tapAreaStyle,children:t}):t})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";var _default=exports.default=KeyboardAwareScrollView;

package/lib/commonjs/components/KeyboardAwareScrollView/index.js

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

package/lib/commonjs/components/KeyboardToolbar/KeyboardToolbar.js

@@ -1,135 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.KeyboardToolbar = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _FormContext = require("../../form/FormContext.js");
-var _index = require("../../theme/index.js");
-var _index2 = require("../Text/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const NavButton = ({
-  label,
-  accessibilityLabel,
-  onPress,
-  theme
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-  onPress: onPress,
-  disabled: !onPress,
-  accessibilityRole: "button",
-  accessibilityLabel: accessibilityLabel,
-  accessibilityState: {
-    disabled: !onPress
-  },
-  hitSlop: 8,
-  style: {
-    paddingHorizontal: theme.spacing.sm,
-    opacity: onPress ? 1 : 0.4
-  },
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
-    variant: "h2",
-    color: onPress ? 'link' : 'disabled',
-    children: label
-  })
-});
-
-/**
- * An accessory bar pinned just above the keyboard — pure RN, no native
- * dependency. Shows a Done (dismiss) button and optional prev/next chevrons
- * that, inside a `<Form>`, walk the registered field order. Render it at the
- * screen root (a `flex: 1` ancestor) so its `bottom: keyboardHeight` offset
- * lands it on top of the keyboard. Renders nothing while the keyboard is hidden.
- */
-const KeyboardToolbar = props => {
-  const {
-    doneLabel = 'Done',
-    showNavigation,
-    onDone,
-    onNext,
-    onPrev,
-    leading,
-    style,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const form = (0, _FormContext.useOptionalFormContext)();
-  const [keyboardHeight, setKeyboardHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    const showSub = _reactNative.Keyboard.addListener(showEvent, e => setKeyboardHeight(e.endCoordinates?.height ?? 0));
-    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, []);
-  if (keyboardHeight <= 0) {
-    return null;
-  }
-  const handleDone = onDone ?? (() => _reactNative.Keyboard.dismiss());
-  const handlePrev = onPrev ?? form?.focusPrev;
-  const handleNext = onNext ?? form?.focusNext;
-  const navEnabled = showNavigation ?? Boolean(handlePrev || handleNext);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    testID: testID,
-    accessibilityRole: "toolbar",
-    style: [styles.bar, {
-      bottom: keyboardHeight,
-      backgroundColor: theme.colors.background.elevated,
-      borderTopColor: theme.colors.border.primary,
-      paddingHorizontal: theme.spacing.md
-    }, style],
-    children: [navEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.nav,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NavButton, {
-        label: "\u2039",
-        accessibilityLabel: "Previous field",
-        onPress: handlePrev,
-        theme: theme
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NavButton, {
-        label: "\u203A",
-        accessibilityLabel: "Next field",
-        onPress: handleNext,
-        theme: theme
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {}), leading, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.spacer
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: handleDone,
-      accessibilityRole: "button",
-      accessibilityLabel: doneLabel,
-      hitSlop: 8,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
-        variant: "body",
-        weight: "semibold",
-        color: "link",
-        children: doneLabel
-      })
-    })]
-  });
-};
-exports.KeyboardToolbar = KeyboardToolbar;
-const styles = _reactNative.StyleSheet.create({
-  bar: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    height: 44,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderTopWidth: _reactNative.StyleSheet.hairlineWidth
-  },
-  nav: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  spacer: {
-    flex: 1
-  }
-});
-var _default = exports.default = KeyboardToolbar;
-//# sourceMappingURL=KeyboardToolbar.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.KeyboardToolbar=void 0;var _reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_FormContext=require("../../form/FormContext.js"),_index=require("../../theme/index.js"),_index2=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");const NavButton=({label:e,accessibilityLabel:t,onPress:r,theme:o})=>(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:r,accessibilityRole:"button",accessibilityLabel:t,hitSlop:8,style:{paddingHorizontal:o.spacing.sm},children:(0,_jsxRuntime.jsx)(_index2.Text,{variant:"h2",color:"link",children:e})}),KeyboardToolbar=e=>{const{doneLabel:t="Done",showNavigation:r=!0,onDone:o,onNext:i,onPrev:a,leading:s,style:l,testID:n}=e,c=(0,_index.useTheme)(),b=(0,_FormContext.useOptionalFormContext)();if(!(0,_reactNativeKeyboardController.useKeyboardState)(e=>e.isVisible))return null;const d=o??(()=>{_reactNativeKeyboardController.KeyboardController.dismiss()}),x=a??b?.focusPrev??(()=>_reactNativeKeyboardController.KeyboardController.setFocusTo("prev")),u=i??b?.focusNext??(()=>_reactNativeKeyboardController.KeyboardController.setFocusTo("next"));return(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardStickyView,{style:styles.anchor,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:n,accessibilityRole:"toolbar",style:[styles.bar,{backgroundColor:c.colors.background.elevated,borderTopColor:c.colors.border.primary,paddingHorizontal:c.spacing.md},l],children:[r?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.nav,children:[(0,_jsxRuntime.jsx)(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:x,theme:c}),(0,_jsxRuntime.jsx)(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:u,theme:c})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{}),s,(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.spacer}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:d,accessibilityRole:"button",accessibilityLabel:t,hitSlop:8,children:(0,_jsxRuntime.jsx)(_index2.Text,{variant:"body",weight:"semibold",color:"link",children:t})})]})})};exports.KeyboardToolbar=KeyboardToolbar;const styles=_reactNative.StyleSheet.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:_reactNative.StyleSheet.hairlineWidth},nav:{flexDirection:"row",alignItems:"center"},spacer:{flex:1}});var _default=exports.default=KeyboardToolbar;

package/lib/commonjs/components/KeyboardToolbar/index.js

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