@nutui/nutui-react-taro 3.0.0-beta.2 → 3.0.0-beta.3

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

@@ -2,11 +2,13 @@
   width: var(--nutui-navbar-width, 100%);
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: var(--nutui-navbar-height, 44px);
   box-sizing: border-box;
   background: var(--nutui-navbar-background, var(--nutui-color-background, #f5f6fa));
-  box-shadow: var(--nutui-navbar-box-shadow, 0px);
+  box-shadow: var(--nutui-navbar-box-shadow, 0 0 transparent);
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a));
   margin-bottom: var(--nutui-navbar-margin-bottom, 20px);
@@ -16,31 +18,38 @@
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
   width: 100%;
 }
 .nut-navbar-placeholder {
   display: inline-block;
   width: 100%;
 }
+.nut-navbar-safe-area-inset-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.nut-navbar-align-left {
+  padding-left: 14px;
+}
 .nut-navbar-title {
-  min-width: 53%;
-  margin: 0 auto;
+  width: 50%;
+  height: 100%;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a));
 }
-.nut-navbar-title .nut-tabs-titles {
-  background: transparent;
-}
-.nut-navbar-title .nut-tabs-titles-item-text {
-  color: var(--nutui-color-title, #1a1a1a);
-}
-.nut-navbar-title .nut-tabpane {
-  display: none;
+.nut-navbar-title-align-left {
+  min-width: 0;
+  flex: 1;
+  justify-content: flex-start;
+  padding: 0 8px;
+  text-align: left;
 }
 .nut-navbar-title ::-webkit-scrollbar {
   display: none;
@@ -51,8 +60,12 @@
   bottom: 0;
   display: flex;
   align-items: center;
+  flex-direction: row;
+  height: 100%;
   cursor: pointer;
   padding: 0 14px;
+  /* #ifndef rn harmony jd h5 weapp*/
+  /* #endif */
 }
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
@@ -64,98 +77,40 @@
 .nut-navbar-left {
   left: 0;
 }
+.nut-navbar-left-rtl {
+  left: auto;
+  right: 0;
+}
+.nut-navbar-left-align-left {
+  position: static;
+  padding: 0;
+}
 .nut-navbar-left-back {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+}
+.nut-navbar-left-back-children {
   margin-right: 10px;
 }
+.nut-navbar-left-back-children-rtl {
+  margin-right: 0;
+  margin-left: 10px;
+}
 .nut-navbar-right {
   right: 0;
 }
-.nut-navbar-right .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-}
-.nut-navbar-title-align-left {
-  padding-left: 14px;
-}
-.nut-navbar-title-align-left .nut-navbar-left {
-  position: static;
-  padding: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child {
-  margin-left: 0;
+.nut-navbar-right-rtl {
+  right: auto;
+  left: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-right {
+.nut-navbar-right-align-left {
   position: static;
   display: inline-flex;
   white-space: nowrap;
   padding-left: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-title {
-  min-width: 0;
-  margin: 0;
-  flex: 1;
-  justify-content: flex-start;
-  padding: 0 8px;
-  text-align: left;
-}
-
-[dir=rtl] .nut-navbar-fixed,
-.nut-rtl .nut-navbar-fixed {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-navbar-left,
-.nut-rtl .nut-navbar-left {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-left .nut-icon-ArrowLeft {
+.nut-navbar-rtl .nut-icon-ArrowLeft {
   transform: rotateY(180deg);
-}
-[dir=rtl] .nut-navbar-left-back,
-.nut-rtl .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 10px;
-}
-[dir=rtl] .nut-navbar-right,
-.nut-rtl .nut-navbar-right {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .nut-navbar-right .nut-icon,
-.nut-rtl .nut-navbar-right .nut-icon {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-right .nut-icon:first-child,
-.nut-rtl .nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left-back,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 0;
 }

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

@@ -2,13 +2,15 @@
   width: 100%;
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 44px;
   box-sizing: border-box;
-  background: #F7F8FC;
-  box-shadow: 0px;
+  background: #f5f6fa;
+  box-shadow: 0 0 transparent;
   font-size: 14px;
-  color: #1A1A1A;
+  color: #1a1a1a;
   margin-bottom: 20px;
   overflow: hidden;
 }
@@ -16,6 +18,7 @@
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
   width: 100%;
 }
 .nut-navbar-placeholder {
@@ -26,25 +29,27 @@
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
 }
+.nut-navbar-align-left {
+  padding-left: 14px;
+}
 .nut-navbar-title {
-  min-width: 53%;
-  margin: 0 auto;
+  width: 50%;
+  height: 100%;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  font-weight: 500;
-  color: #1A1A1A;
-}
-.nut-navbar-title .nut-tabs-titles {
-  background: transparent;
-}
-.nut-navbar-title .nut-tabs-titles-item-text {
-  color: #1A1A1A;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
 }
-.nut-navbar-title .nut-tabpane {
-  display: none;
+.nut-navbar-title-align-left {
+  min-width: 0;
+  flex: 1;
+  justify-content: flex-start;
+  padding: 0 8px;
+  text-align: left;
 }
 .nut-navbar-title ::-webkit-scrollbar {
   display: none;
@@ -55,8 +60,12 @@
   bottom: 0;
   display: flex;
   align-items: center;
+  flex-direction: row;
+  height: 100%;
   cursor: pointer;
   padding: 0 14px;
+  /* #ifndef rn harmony jd h5 weapp*/
+  /* #endif */
 }
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
@@ -68,97 +77,40 @@
 .nut-navbar-left {
   left: 0;
 }
+.nut-navbar-left-rtl {
+  left: auto;
+  right: 0;
+}
+.nut-navbar-left-align-left {
+  position: static;
+  padding: 0;
+}
 .nut-navbar-left-back {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+}
+.nut-navbar-left-back-children {
   margin-right: 10px;
 }
+.nut-navbar-left-back-children-rtl {
+  margin-right: 0;
+  margin-left: 10px;
+}
 .nut-navbar-right {
   right: 0;
 }
-.nut-navbar-right .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-}
-.nut-navbar-title-align-left {
-  padding-left: 14px;
-}
-.nut-navbar-title-align-left .nut-navbar-left {
-  position: static;
-  padding: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon {
-  margin-left: 12px;
-}
-.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child {
-  margin-left: 0;
+.nut-navbar-right-rtl {
+  right: auto;
+  left: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-right {
+.nut-navbar-right-align-left {
   position: static;
   display: inline-flex;
   white-space: nowrap;
   padding-left: 0;
 }
-.nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-}
-.nut-navbar-title-align-left .nut-navbar-title {
-  min-width: 0;
-  margin: 0;
-  flex: 1;
-  justify-content: flex-start;
-  padding: 0 8px;
-}
-
-[dir=rtl] .nut-navbar-fixed,
-.nut-rtl .nut-navbar-fixed {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-navbar-left,
-.nut-rtl .nut-navbar-left {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-left .nut-icon-ArrowLeft {
+.nut-navbar-rtl .nut-icon-ArrowLeft {
   transform: rotateY(180deg);
-}
-[dir=rtl] .nut-navbar-left-back,
-.nut-rtl .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 10px;
-}
-[dir=rtl] .nut-navbar-right,
-.nut-rtl .nut-navbar-right {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .nut-navbar-right .nut-icon,
-.nut-rtl .nut-navbar-right .nut-icon {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-right .nut-icon:first-child,
-.nut-rtl .nut-navbar-right .nut-icon:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left-back,
-.nut-rtl .nut-navbar-title-align-left .nut-navbar-left-back {
-  margin-right: 0;
-  margin-left: 0;
 }

package/dist/es/packages/pagination/pagination.js

@@ -130,6 +130,8 @@ export var Pagination = function(props) {
     }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-lite-active")
     }, currentPage), /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-lite-spliterator")
+    }, "/"), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-lite-default")
     }, pageCount)));
 };

package/dist/es/packages/pagination/style/pagination.scss

@@ -67,10 +67,11 @@
 }
 
 .nut-pagination-lite {
-  width: $pagination-lite-width;
   height: $pagination-lite-height;
+  padding: 0 $spacing-xs;
   display: flex;
   flex-direction: row;
+  align-items: center;
   color: $color-primary-text;
   background-color: $pagination-lite-background-color;
   border-radius: $pagination-lite-radius;
@@ -78,18 +79,11 @@
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: $pagination-lite-height;
-  height: $pagination-lite-height;
-  font-size: $font-size-s;
+  font-size: $font-size-xs;
   color: $pagination-lite-color;
-  font-weight: 400;
 }
 
-.nut-pagination-lite-active {
-  border-radius: $pagination-lite-radius;
-  font-size: $font-size-s;
-  background-color: $pagination-lite-active-background-color;
+.nut-pagination-lite-spliterator {
+  font-size: $font-size-xs;
+  color: $pagination-lite-color;
 }

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

@@ -66,29 +66,23 @@
 }
 
 .nut-pagination-lite {
-  width: var(--nutui-pagination-lite-width, 40px);
   height: var(--nutui-pagination-lite-height, 20px);
+  padding: 0 var(--nutui-spacing-xs, 6px);
   display: flex;
   flex-direction: row;
+  align-items: center;
   color: var(--nutui-color-primary-text, #ffffff);
-  background-color: var(--nutui-pagination-lite-background-color, var(--nutui-black-7));
-  border-radius: var(--nutui-pagination-lite-radius, 6px);
+  background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
+  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4px));
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--nutui-pagination-lite-height, 20px);
-  height: var(--nutui-pagination-lite-height, 20px);
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-xs, 11px);
   color: var(--nutui-pagination-lite-color, #ffffff);
-  font-weight: 400;
 }
 
-.nut-pagination-lite-active {
-  border-radius: var(--nutui-pagination-lite-radius, 6px);
-  font-size: var(--nutui-font-size-s, 12px);
-  background-color: var(--nutui-pagination-lite-active-background-color, var(--nutui-black-5));
+.nut-pagination-lite-spliterator {
+  font-size: var(--nutui-font-size-xs, 11px);
+  color: var(--nutui-pagination-lite-color, #ffffff);
 }

package/dist/es/packages/radio/index.d.ts

@@ -1,4 +1,10 @@
-import { Radio } from "./radio";
+import React from 'react';
+import { RadioProps } from "./radio";
+import { RadioGroup } from "../radiogroup/radiogroup";
 export type { RadioProps } from "./radio";
 export type { RadioShape, RadioPosition } from './types';
-export default Radio;
+type CompoundedComponent = React.FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
+    Group: typeof RadioGroup;
+};
+declare const InnerRadio: CompoundedComponent;
+export default InnerRadio;

package/dist/es/packages/radio/index.js

@@ -1,2 +1,6 @@
+import React from "react";
 import { Radio } from "./radio";
-export default Radio;
+import { RadioGroup } from "../radiogroup/radiogroup";
+var InnerRadio = Radio;
+InnerRadio.Group = RadioGroup;
+export default InnerRadio;

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

@@ -1,54 +1,15 @@
-import React, { FunctionComponent } from 'react';
-import RadioGroup from "../radiogroup/index";
+import React, { FC } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import { RadioPosition, RadioShape } from "./types";
 export interface RadioProps extends BasicComponent {
-    /**
-    * 是否禁用选择
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 指定当前是否选中
-    * @default -
-    */
-    checked: boolean
-    /**
-    * 初始是否选中
-    * @default -
-    */
-    defaultChecked: boolean
-    /**
-    * 形状
-    * @default round
-    */
-    shape: RadioShape
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioPosition
-    /**
-    * <a href="#/icon">图标名称</a>，选中前(建议和activeIcon一起修改)
-    * @default 'CheckNormal'
-    */
-    icon: React.ReactNode
-    /**
-    * <a href="#/icon">图标名称</a>，选中后(建议和icon一起修改)
-    * @default 'CheckChecked'
-    */
-    activeIcon: React.ReactNode
-    /**
-    * 携带的标识值，用于 Group 模式
-    * @default -
-    */
-    value: string | number
-    /**
-    * 选中态变化时触发
-    * @default -
-    */
-    onChange: (checked: boolean) => void
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+    shape: RadioShape;
+    labelPosition: RadioPosition;
+    icon: React.ReactNode;
+    activeIcon: React.ReactNode;
+    value: string | number;
+    onChange: (checked: boolean) => void;
 }
-export declare const Radio: FunctionComponent<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
-    Group: typeof RadioGroup;
-};
+export declare const Radio: FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

package/dist/es/packages/radio/radio.js

@@ -4,11 +4,10 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useContext } from "react";
-import { CheckChecked, CheckNormal, CheckDisabled } from "@nutui/icons-react-taro";
+import { CheckChecked, CheckDisabled, CheckNormal } from "@nutui/icons-react-taro";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import RadioContext from "../radiogroup/context";
-import RadioGroup from "../radiogroup/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -86,14 +85,14 @@ export var Radio = function(props) {
     };
     var renderLabel = function() {
         var labelcls = classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled));
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement(View, {
             className: labelcls
         }, children));
     };
     var renderButton = function() {
         var _obj;
         var buttoncls = classNames("".concat(classPrefix, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-button-active"), checkedStatement), _define_property(_obj, "".concat(classPrefix, "-button-disabled"), disabled), _obj));
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: buttoncls
         }, children);
     };
@@ -115,4 +114,3 @@ export var Radio = function(props) {
     }, renderRadioItem());
 };
 Radio.displayName = 'NutRadio';
-Radio.Group = RadioGroup;

package/dist/es/packages/radio/style/radio.scss

@@ -77,6 +77,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

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

@@ -1,41 +1,14 @@
 import React from 'react';
+import { ViewProps } from '@tarojs/components/types/View';
 import { RadioGroupDirection, RadioGroupOption, RadioGroupPosition, RadioGroupShape } from './types';
 export interface RadioGroupProps {
-    /**
-    * 当前选中项的标识符
-    * @default -
-    */
-    value?: string | number
+    value?: string | number;
     defaultValue?: string | number;
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioGroupPosition
-    /**
-    * 使用横纵方向
-    * @default vertical
-    */
-    direction: RadioGroupDirection
-    /**
-    * 形状
-    * @default -
-    */
-    shape?: RadioGroupShape
-    /**
-    * 是否禁用
-    * @default false
-    */
-    disabled?: boolean
-    /**
-    * 配置 options 渲染单选按钮
-    * @default -
-    */
-    options: RadioGroupOption[]
-    /**
-    * 值变化时触发
-    * @default -
-    */
-    onChange: (value: string | number) => void
+    labelPosition: RadioGroupPosition;
+    direction: RadioGroupDirection;
+    shape?: RadioGroupShape;
+    disabled?: boolean;
+    options: RadioGroupOption[];
+    onChange: (value: string | number) => void;
 }
-export declare const RadioGroup: React.ForwardRefExoticComponent<Partial<RadioGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Partial<RadioGroupProps> & Omit<ViewProps, "onChange">, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/radiogroup/radiogroup.js

@@ -5,6 +5,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useCallback } from "react";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 import RadioContext from "./context";
 import Radio from "../radio/index";
 import { usePropsValue } from "../../utils/use-props-value";
@@ -28,7 +29,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "options",
         "disabled"
     ]);
-    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(direction), direction), className);
     var _usePropsValue = _sliced_to_array(usePropsValue({
         defaultValue: props.defaultValue,
         value: props.value,
@@ -71,7 +72,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                 setVal2State('');
             }
         }
-    }, /*#__PURE__*/ React.createElement("div", _object_spread({
+    }, /*#__PURE__*/ React.createElement(View, _object_spread({
         className: cls
     }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children));
 });