@nutui/nutui-react-taro 3.0.0-beta.8 → 3.0.0

package/dist/es/packages/lottie/mp.js

@@ -0,0 +1,75 @@
+import React, { useImperativeHandle, useRef } from "react";
+import { createSelectorQuery, getEnv, useReady, useUnload } from "@tarojs/taro";
+import lottie from "lottie-miniprogram";
+import { getWindowInfo } from "../../utils/get-system-info";
+import useUuid from "../../hooks/use-uuid";
+export var Lottie = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var uuid = useUuid();
+    var id = "nutLottie-".concat(uuid);
+    var animation = useRef();
+    var inited = useRef(false);
+    var source = props.source, _props_loop = props.loop, loop = _props_loop === void 0 ? true : _props_loop, _props_autoPlay = props.autoPlay, autoPlay = _props_autoPlay === void 0 ? true : _props_autoPlay, onComplete = props.onComplete, style = props.style, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed;
+    var setSpeed = function() {
+        if (animation.current) {
+            animation.current.setSpeed(Math.abs(speed));
+            animation.current.setDirection(speed > 0 ? 1 : -1);
+        }
+    };
+    useImperativeHandle(ref, function() {
+        return animation.current || {};
+    });
+    var dpr = useRef(getWindowInfo().pixelRatio);
+    useReady(function() {
+        createSelectorQuery().select("#".concat(id)).fields({
+            node: true,
+            size: true
+        }, function(res) {
+            try {
+                var canvas = res.node;
+                var context = canvas.getContext('2d');
+                // scale canvas to adapt dpr
+                if (style && style.width !== undefined && style.height !== undefined) {
+                    canvas.width = parseFloat(style.width.toString()) * dpr.current;
+                    canvas.height = parseFloat(style.height.toString()) * dpr.current;
+                    context.scale(dpr.current, dpr.current);
+                }
+                lottie.setup(canvas);
+                animation.current = lottie.loadAnimation({
+                    animationData: source,
+                    loop: loop,
+                    autoplay: autoPlay,
+                    rendererSettings: {
+                        context: context
+                    }
+                });
+                onComplete && animation.current.addEventListener('complete', onComplete);
+                setSpeed();
+                inited.current = true;
+            } catch (error) {
+                console.error(error);
+            }
+        }).exec();
+    });
+    useUnload(function() {
+        onComplete && animation.current && animation.current.removeEventListener('complete', onComplete);
+        animation.current && animation.current.destroy();
+    });
+    return getEnv() === 'WEAPP' || getEnv() === 'JD' ? /*#__PURE__*/ React.createElement("canvas", {
+        id: id,
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
+        canvasId: id,
+        // eslint-disable-next-line react/no-unknown-property
+        disalbeScroll: true,
+        type: "2d",
+        style: style
+    }) : /*#__PURE__*/ React.createElement("canvas", {
+        id: id,
+        // eslint-disable-next-line react/no-unknown-property
+        "canvas-id": id,
+        // eslint-disable-next-line react/no-unknown-property
+        "disalbe-scroll": true,
+        style: style
+    });
+});
+Lottie.displayName = 'NutLottie';

package/dist/es/packages/lottie/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/lottie/style/index.js

@@ -0,0 +1 @@
+import './lottie.scss';

package/dist/es/packages/lottie/style/style.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/es/packages/lottie/style/style.harmony.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/es/packages/lottie/types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LottieOptions } from 'lottie-react';
+import { BasicComponent } from "../../utils/typings";
+export interface LottieProps extends Omit<LottieOptions, 'animationData'>, BasicComponent {
+    style: React.CSSProperties;
+    source: NonNullable<unknown>;
+    loop: boolean | number;
+    autoPlay: boolean;
+    initialSegment: [number, number];
+    speed: number;
+}

package/dist/es/packages/lottie/types.js

@@ -0,0 +1 @@
+import React from "react";

package/dist/es/packages/lottie/web.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LottieProps } from './types';
+export declare const Lottie: React.ForwardRefExoticComponent<Omit<Partial<LottieProps>, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/lottie/web.js

@@ -0,0 +1,22 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import LottieReact from "lottie-react";
+import React, { useImperativeHandle, useRef } from "react";
+export var Lottie = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var loadingLottieRef = useRef(null);
+    var style = props.style, source = props.source, autoPlay = props.autoPlay, rest = _object_without_properties(props, [
+        "style",
+        "source",
+        "autoPlay"
+    ]);
+    useImperativeHandle(ref, function() {
+        return loadingLottieRef.current;
+    });
+    return /*#__PURE__*/ React.createElement(LottieReact, _object_spread_props(_object_spread({}, rest), {
+        lottieRef: loadingLottieRef,
+        animationData: source,
+        style: style
+    }));
+});
+Lottie.displayName = 'NutLottie';

package/dist/es/packages/menu/style/style.css

@@ -3,12 +3,7 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
@@ -19,12 +14,6 @@
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -62,6 +51,12 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);

package/dist/es/packages/menu/style/style.harmony.css

@@ -0,0 +1,56 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-menu {
+  position: relative;
+}
+.nut-menu.scroll-fixed {
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+}
+
+.nut-menu-bar {
+  position: relative;
+  display: flex;
+  line-height: 48px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12);
+}
+.nut-menu-bar.opened {
+  z-index: 1000;
+}
+
+.nut-menu-title {
+  flex: 1;
+  text-align: center;
+  font-size: 14px;
+  color: #1a1a1a;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+}
+.nut-menu-title-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  padding: 0 8px;
+}
+.nut-menu-title-icon {
+  flex-shrink: 0;
+  transition: all 0.2s linear;
+}
+.nut-menu-title.active {
+  color: #ff0f23;
+}
+.nut-menu-title.disabled {
+  color: #c2c4cc;
+}
+.nut-menu-title.active .nut-menu-title-icon {
+  transform: rotate(180deg);
+}

package/dist/es/packages/menuitem/menuitem.js

@@ -6,14 +6,15 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, useRef } from "react";
 import classNames from "classnames";
-import { getSystemInfoSync, usePageScroll } from "@tarojs/taro";
+import { usePageScroll } from "@tarojs/taro";
 import { View } from "@tarojs/components";
 import { CSSTransition } from "react-transition-group";
 import { Check } from "@nutui/icons-react-taro";
+import { getWindowInfo } from "../../utils/get-system-info";
 import { Overlay } from "../overlay/overlay";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
 import { ComponentDefaults } from "../../utils/typings";
-import { usePropsValue } from "../../utils/use-props-value";
+import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     titleIcon: null,
     columns: 1,
@@ -79,7 +80,7 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
         getParentOffset
     ]);
     var windowHeight = useMemo(function() {
-        return getSystemInfoSync().windowHeight;
+        return getWindowInfo().windowHeight;
     }, []);
     var updateItemOffset = useCallback(function() {
         if (!parent.lockScroll) return;
@@ -137,7 +138,7 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
             bottom: '0',
             height: 'initial'
         } : {
-            bottom: "".concat(getSystemInfoSync().windowHeight - position.top, "px"),
+            bottom: "".concat(getWindowInfo().windowHeight - position.top, "px"),
             top: '0',
             height: 'initial'
         };
@@ -149,7 +150,7 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
             }, isShow());
         }
         return _object_spread({
-            height: "".concat(getSystemInfoSync().windowHeight - position.top, "px"),
+            height: "".concat(getWindowInfo().windowHeight - position.top, "px"),
             top: 'auto'
         }, isShow());
     };

package/dist/es/packages/menuitem/style/style.css

@@ -3,12 +3,7 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
@@ -19,12 +14,6 @@
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -62,6 +51,12 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);

package/dist/es/packages/menuitem/style/style.harmony.css

@@ -0,0 +1,122 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-menu-container-content {
+  padding: 12px 24px;
+  max-height: 214px;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  background: #ffffff;
+}
+.nut-menu-container-content_fixed {
+  width: 100%;
+  opacity: 0;
+  position: fixed;
+}
+.nut-menu-container-item {
+  display: flex;
+  align-items: center;
+  color: #1a1a1a;
+  font-size: 14px;
+  padding: 12px 0;
+}
+.nut-menu-container-item.active {
+  font-weight: 600;
+  color: #ff0f23;
+}
+.nut-menu-container-item .nut-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+.nut-menu-container-wrap {
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+  overflow: hidden;
+}
+.nut-menu-container-wrap-up {
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+  overflow: hidden;
+}
+.nut-menu-container-wrap-up {
+  bottom: 48px;
+}
+
+.overlay-fade-enter-active.nut-menu-container-overlay {
+  top: auto;
+  z-index: 1000;
+}
+
+.nut-menu-placeholder-element {
+  position: fixed;
+  top: -var(--nutui-menu-bar-line-height, 48px);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: transparent;
+}
+.nut-menu-placeholder-element.up {
+  bottom: -var(--nutui-menu-bar-line-height, 48px);
+}
+
+.nut-menu-container-down-enter {
+  opacity: 0;
+  transform: translate(0, -30px);
+}
+
+.nut-menu-container-down-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-down-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-enter {
+  opacity: 0;
+  transform: translate(0, 30px);
+}
+
+.nut-menu-container-up-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.nut-menu-container-up-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}
+
+[dir=rtl] .nut-menu-container-item .nut-icon {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+.nut-rtl .nut-menu-container-item .nut-icon {
+  margin-right: 0;
+  margin-left: 8px;
+}
+[dir=rtl] .nut-menu-container .nut-icon,
+.nut-rtl .nut-menu-container .nut-icon {
+  transform: rotateY(180deg);
+}

package/dist/es/packages/navbar/navbar.d.ts

@@ -5,7 +5,7 @@ export interface NavBarProps extends BasicComponent {
     left: React.ReactNode;
     back: React.ReactNode;
     right: React.ReactNode;
-    titleAlign: 'center' | 'left';
+    title: React.ReactNode;
     fixed: boolean;
     safeAreaInsetTop: boolean;
     placeholder: boolean;

package/dist/es/packages/navbar/navbar.js

@@ -1,22 +1,15 @@
-import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
-import { getRectByTaro } from "../../utils/get-rect-by-taro";
-import { harmonyAndRn } from "../../utils/platform-taro";
-import pxTransform from "../../utils/px-transform";
-import { SafeArea } from "../safearea/safearea";
+import SafeArea from "../safearea/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
-    titleAlign: 'center',
     back: '',
     fixed: false,
     safeAreaInsetTop: false,
@@ -24,7 +17,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     zIndex: 10
 });
 export var NavBar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, title = _$_object_spread.title, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
     var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
@@ -35,142 +28,38 @@ export var NavBar = function(props) {
             zIndex: zIndex
         });
     };
-    var leftRef = useRef(null);
-    var rightRef = useRef(null);
-    var wrapperRef = useRef(null);
-    var _useState = _sliced_to_array(useState('50%'), 2), contentWidth = _useState[0], setContentWidth = _useState[1];
-    var getNodeWidth = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(node) {
-            var refe;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!node) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            getRectByTaro(node)
-                        ];
-                    case 1:
-                        refe = _state.sent();
-                        return [
-                            2,
-                            refe.width
-                        ];
-                    case 2:
-                        return [
-                            2,
-                            0
-                        ];
-                }
-            });
-        });
-        return function getNodeWidth(node) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    useEffect(function() {
-        if (titleAlign === 'left') {
-            return;
-        }
-        if (!(back || left || right)) {
-            setContentWidth('100%');
-        }
-        var init = /*#__PURE__*/ function() {
-            var _ref = _async_to_generator(function() {
-                var leftRectWidth, rightRectWidth, wrapperWidth, centerWidth;
-                return _ts_generator(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            return [
-                                4,
-                                getNodeWidth(leftRef === null || leftRef === void 0 ? void 0 : leftRef.current)
-                            ];
-                        case 1:
-                            leftRectWidth = _state.sent();
-                            return [
-                                4,
-                                getNodeWidth(rightRef === null || rightRef === void 0 ? void 0 : rightRef.current)
-                            ];
-                        case 2:
-                            rightRectWidth = _state.sent();
-                            return [
-                                4,
-                                getNodeWidth(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)
-                            ];
-                        case 3:
-                            wrapperWidth = _state.sent();
-                            centerWidth = wrapperWidth / 2;
-                            if (leftRectWidth && rightRectWidth) {
-                                centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
-                            } else {
-                                centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
-                            }
-                            setContentWidth(centerWidth.toFixed(2));
-                            return [
-                                2
-                            ];
-                    }
-                });
-            });
-            return function init() {
-                return _ref.apply(this, arguments);
-            };
-        }();
-        setTimeout(function() {
-            init();
-        }, 0);
-    }, [
-        left,
-        right,
-        back
-    ]);
     var renderLeft = function() {
         var _obj, _obj1;
-        return back || left ? /*#__PURE__*/ React.createElement(View, {
-            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
-            ref: leftRef
-        }, back && /*#__PURE__*/ React.createElement(View, {
-            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
+        return /*#__PURE__*/ React.createElement(View, {
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-maxwidth"), title), _define_property(_obj, "".concat(classPrefix, "-left-hidden"), !left && !back), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj))
+        }, back ? /*#__PURE__*/ React.createElement(View, {
+            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function(e) {
                 return onBackClick(e);
             }
-        }, back), left) : null;
+        }, back) : null, left);
     };
     var renderContent = function() {
-        var titleStyle = {};
-        if (titleAlign === 'center') {
-            var width = harmonyAndRn() ? pxTransform(Number(contentWidth)) : "".concat(contentWidth, "px");
-            var contentRealWidth = /%$/i.test(contentWidth) ? contentWidth : width;
-            titleStyle = {
-                width: contentRealWidth
-            };
-        }
         var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
-            style: titleStyle
-        }, children);
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-center"), title), _obj))
+        }, title || children);
     };
     var renderRight = function() {
         var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
-            ref: rightRef
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-maxwidth"), title), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj))
         }, right);
     };
     var renderWrapper = function() {
         return /*#__PURE__*/ React.createElement(View, {
             className: cls,
-            style: styles(),
-            ref: wrapperRef
+            style: styles()
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
-    var cls = classNames(classPrefix, classes, className);
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
+    var cls = classNames(classPrefix, classes, className, _define_property({}, "".concat(classPrefix, "-title-wrapper"), title));
     return /*#__PURE__*/ React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ React.createElement(SafeArea, {
         position: "top"
     }), fixed && placeholder ? /*#__PURE__*/ React.createElement(View, {