@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.11

package/src/Paper/Paper.tsx

@@ -1,16 +1,23 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
 import { rem } from 'polished';
-import { alpha, getBackgroundOverlay } from '../color';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import {
+  alpha,
+  getBackgroundOverlay,
+  getDarkThemeBackgroundOverlay,
+} from '../color';
 
 export interface PaperProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   elevation?: number;
   outlined?: boolean;
   backgroundOverlay?: number | string;
-  children?: React.ReactNode;
+  darkThemeBackgroundOverlay?: number | string;
+  children?: ReactNode;
 }
 
 export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
@@ -21,6 +28,7 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
     outlined,
     elevation = 0,
     backgroundOverlay,
+    darkThemeBackgroundOverlay,
     __css = {},
     children,
     ...otherProps
@@ -43,11 +51,16 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
               borderColor: alpha('on.surface', 0.12),
             }
           : {}),
-        ...getBackgroundOverlay(
-          theme,
-          backgroundOverlay ?? elevation,
-          'primary'
-        ),
+        ...(backgroundOverlay
+          ? getBackgroundOverlay(theme, backgroundOverlay, 'primary')
+          : {}),
+        ...(darkThemeBackgroundOverlay
+          ? getDarkThemeBackgroundOverlay(
+              theme,
+              darkThemeBackgroundOverlay,
+              'primary'
+            )
+          : {}),
         ...__css,
       }}
       {...otherProps}

package/src/ProgressSpinner/ProgressSpinner.story.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { ProgressSpinner } from './';
 import { Box } from '../Box';
 

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -1,8 +1,12 @@
-import { forwardRef, SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
+import { forwardRef } from 'react';
 import { keyframes } from '@emotion/react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
 
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
 export type ProgressSpinnerProps = BoxProps & {
   progress?: number;
   thickness?: number;
@@ -11,10 +15,10 @@ export type ProgressSpinnerProps = BoxProps & {
 
 const innerDivRotate = keyframes({
   '0%': {
-    transformOrigin: '50% 50%',
+    transform: 'rotate(-90deg)',
   },
   '100%': {
-    transform: 'rotate(360deg)',
+    transform: 'rotate(270deg)',
   },
 });
 
@@ -66,9 +70,11 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
             display: 'inline-block',
             width: '100%',
             height: '100%',
-            ...(indeterminate
-              ? { animation: `${innerDivRotate} 1.4s linear infinite` }
-              : { transform: 'rotate(-90deg)' }),
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            ...(indeterminate && {
+              animation: `${innerDivRotate} 1.4s linear infinite`,
+            }),
           }}
         >
           <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
@@ -98,12 +104,9 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
                 indeterminate
                   ? {
                       animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
-                      strokeDasharray: '80px, 200px',
-                      strokeDashoffset: '0px',
                     }
                   : {
-                      transition:
-                        'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
                       strokeDasharray: circumference.toFixed(3),
                     }
               }

package/src/RadioButton/RadioButton.story.tsx

@@ -1,5 +1,6 @@
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
-import type * as React from 'react';
+
 import { RadioButton, RadioGroup, Box } from '../';
 // import './styles.css';
 
@@ -34,7 +35,7 @@ const Example = (props) => {
 
 const StandaloneExample = (props) => {
   const [selectedValue, setSelectedValue] = useState('a');
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSelectedValue(e.target.value);
   };
 

package/src/RadioButton/RadioButton.tsx

@@ -1,11 +1,13 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-import {
-  RadioButton as RadioButtonCore,
-  RadioButtonProps as RadioButtonCoreProps,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import type { RadioButtonProps as RadioButtonCoreProps } from '@basic-ui/core';
+import { RadioButton as RadioButtonCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
 import { RadioButtonIcon } from './RadioButtonIcon';
 import { useTheme } from '../theme';
@@ -19,7 +21,7 @@ export type RadioButtonProps = RadioButtonCoreProps;
 const RadioButtonInner = forwardRef<
   HTMLInputElement,
   RadioButtonProps &
-    BoxProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
+    BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>
 >(function RadioButtonInner(props, forwardedRef) {
   const { innerAs: as, checked, disabled, __css, ...otherProps } = props;
   const color = 'primary';

package/src/RadioButton/RadioButtonIcon.tsx

@@ -1,10 +1,11 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { rem } from 'polished';
+
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
-export interface RadioButtonIconProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface RadioButtonIconProps extends HTMLAttributes<HTMLDivElement> {
   checked?: boolean;
   disabled?: boolean;
 }
@@ -33,8 +34,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
             borderRadius: 'full',
             width: '100%',
             height: '100%',
-            transition:
-              'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+            transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
             transform: checked ? 'scale(1)' : 'scale(0)',
           }}
         />

package/src/RadioButton/RadioGroup.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
-import {
-  RadioGroup as RadioGroupCore,
-  RadioGroupProps as RadioGroupCoreProps,
-} from '@basic-ui/core';
+import type { RadioGroupProps as RadioGroupCoreProps } from '@basic-ui/core';
+import { RadioGroup as RadioGroupCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type RadioGroupProps = Omit<
   BoxProps,

package/src/Ripple/Ripple.story.tsx

@@ -1,10 +1,11 @@
 import { useRef, useState } from 'react';
+import { get } from '@styled-system/css';
+
 import { Ripple, useRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Button } from '../Button';
 import { useTheme } from '../theme';
-import { get } from '@styled-system/css';
 
 export default {
   title: 'helper components/Ripple',
@@ -14,7 +15,12 @@ const Example = () => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>();
   const [textColor, setTextColor] = useState<string>(undefined);
-  const { activate, deactivate, animation, style: rippleStyle } = useRipple({
+  const {
+    activate,
+    deactivate,
+    animation,
+    style: rippleStyle,
+  } = useRipple({
     opacity: 1,
     backgroundColor: get(theme, 'colors.primary'),
   });
@@ -40,7 +46,7 @@ const Example = () => {
         }}
       >
         <Ripple animation={animation} style={rippleStyle} />
-        <Text variant="h3" style={{ zIndex: 1, color: textColor }}>
+        <Text variant="headline-medium" style={{ zIndex: 1, color: textColor }}>
           Hello
         </Text>
       </Box>

package/src/Ripple/Ripple.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { CSSObject } from '@emotion/react';
+import type { CSSObject } from '@emotion/react';
+
 import {
   RIPPLE_BACKGROUND_COLOR,
   RIPPLE_SIZE,

package/src/Ripple/RippleBox.tsx

@@ -1,11 +1,14 @@
-import { forwardRef, HTMLAttributes } from 'react';
-import type * as React from 'react';
-import { UseRippleSurfaceOptions, useRippleSurface } from './useRippleSurface';
-import { Box, BoxProps } from '../Box';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { UseRippleSurfaceOptions } from './useRippleSurface';
+import { useRippleSurface } from './useRippleSurface';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type RippleBoxProps<
   H extends HTMLElement = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
+  Attr = HTMLAttributes<H>
 > = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
 
 export const RippleBox: <

package/src/Ripple/keyframes.ts

@@ -1,5 +1,6 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
 import {
   RIPPLE_TRANSLATE_START,
   RIPPLE_TRANSLATE_END,

package/src/Ripple/useRipple.ts

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+
 import { radiusIn, opacityIn, opacityOut } from './keyframes';
 import {
   RIPPLE_TRANSLATE_START,

package/src/Ripple/useRippleHandlers.ts

@@ -1,6 +1,8 @@
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
-import { RippleOptions, useRipple } from './useRipple';
+
+import type { RippleOptions } from './useRipple';
+import { useRipple } from './useRipple';
 
 const disabledHandler = () => {
   /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */
@@ -16,7 +18,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handlePointerDown = (e: React.PointerEvent<T>) => {
+  const handlePointerDown = (e: PointerEvent<T>) => {
     const rect = e.currentTarget.getBoundingClientRect();
     activate(rect, e.clientX, e.clientY, opts.center);
     window.addEventListener('pointerup', handlePointerUp);
@@ -34,7 +36,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<T>) => {
+  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {
     if (e.key !== ' ' || !keyReleased.current) {
       return;
     }

package/src/Ripple/useRippleSurface.ts

@@ -1,10 +1,16 @@
-import { CSSProperties } from 'react';
-import { useTheme } from '../theme';
+import type {
+  CSSProperties,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from 'react';
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
+import { wrapEvent } from '@basic-ui/core';
+
+import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
-import { wrapEvent } from '@basic-ui/core';
-import { SxStyleProp } from '../Box';
+import type { SxStyleProp } from '../Box';
 
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   baseOpacity?: number;
@@ -16,12 +22,12 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   center?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
-  onPointerDown?: React.PointerEventHandler<T>;
-  onKeyDown?: React.KeyboardEventHandler<T>;
+  onPointerDown?: PointerEventHandler<T>;
+  onKeyDown?: KeyboardEventHandler<T>;
 }
 
 export function useRippleSurface<T extends HTMLElement>(
-  opts: UseRippleSurfaceOptions<T>
+  opts: UseRippleSurfaceOptions<T> = {}
 ) {
   let {
     // eslint-disable-next-line prefer-const
@@ -61,66 +67,78 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
-  const css: SxStyleProp = {
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear',
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity,
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&:active::before': {
-        opacity: pressedOpacity,
+  const css: SxStyleProp = useMemo(
+    () => ({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear',
       },
-    }),
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity,
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity,
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&[aria-pressed="true"]:active::before': {
-        opacity: pressedOpacity + pressedOpacity,
+      '&:hover::before': {
+        opacity: hoverOpacity,
       },
+      '&:focus-visible::before': {
+        opacity: focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&:active::before': {
+          opacity: pressedOpacity,
+        },
+      }),
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity,
+      },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity,
+      },
+      '&[aria-pressed="true"]:focus-visible::before': {
+        opacity: pressedOpacity + focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&[aria-pressed="true"]:active::before': {
+          opacity: pressedOpacity + pressedOpacity,
+        },
+      }),
+      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
+      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+      '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
+        {
+          opacity: 0,
+        },
+      '&:disabled,&[data-disabled]': {
+        cursor: 'default',
+      },
+      // ripple
+      ...(rippleEnabled && {
+        '&::after': { ...rippleStyle({ animation }) },
+      }),
     }),
-    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
-    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']: {
-      opacity: 0,
-    },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default',
-    },
-    // ripple
-    ...(rippleEnabled && {
-      '&::after': { ...rippleStyle({ animation }) },
-    }),
-  };
+    [
+      animation,
+      baseOpacity,
+      focusOpacity,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
 
   return {
     style: { ...animationStyle, ...style },

package/src/Select/PaymentMethodSelect.story.tsx

@@ -1,7 +1,9 @@
-import { Box, Select, SelectItem, SelectProps } from '../';
 import { forwardRef, useState } from 'react';
 import type { ReactElement, ComponentType } from 'react';
 
+import type { SelectProps } from '../';
+import { Box, Select, SelectItem } from '../';
+
 export default {
   title: 'components/Select/Complex',
 };

package/src/Select/Select.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Select } from './';
 import { SelectItem } from '../SelectItem';
 import { Box } from '../Box';

package/src/Select/Select.tsx

@@ -1,12 +1,18 @@
+import type {
+  SelectHTMLAttributes,
+  ReactNode,
+  ChangeEvent,
+  ComponentType,
+} from 'react';
 import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-
-import type * as React from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';
-import { useTheme, Theme } from '../theme';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 import { Select as SelectComp, SelectButton } from './styledComponents';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
@@ -15,7 +21,8 @@ import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
 import { makeDefaultRender } from './defaultRender';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
 
 const componentMap = {
@@ -25,21 +32,21 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
+    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   defaultValue?: string;
   value?: string;
   native?: boolean;
   theme?: Theme;
   error?: boolean | string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
   renderValue?: (value?: string) => string | undefined;
-  leadingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
 }
 
 export const Select = forwardRef<
@@ -113,7 +120,7 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: React.ComponentType<any> = native
+  const Comp: ComponentType<any> = native
     ? (SelectComp as any)
     : (SelectButton as any);
 

package/src/Select/SelectIcon.tsx

@@ -1,13 +1,16 @@
-import { forwardRef, SVGAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { SVGAttributes } from 'react';
+import { forwardRef } from 'react';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
+import { EASING_STANDARD } from '../motion';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
-  React.SVGAttributes<SVGElement>
+  SVGAttributes<SVGElement>
 > & { open?: boolean };
 
 export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
@@ -29,8 +32,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
           color: open ? 'primary' : alpha('on.surface', 0.54),
           pointerEvents: 'none',
           transform: open ? 'rotate(180deg)' : undefined,
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         }}
         {...otherProps}
       >

package/src/Select/context.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
 import { useContext, createContext } from 'react';
 
 // Select Component
@@ -5,7 +6,7 @@ export interface SelectContextProps {
   native: boolean;
   value?: string;
   onSelect: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
 }
 

package/src/Select/defaultRender.ts

@@ -1,18 +1,19 @@
+import type { ReactNode } from 'react';
 import { Children, isValidElement } from 'react';
 
-export const makeDefaultRender = (children?: React.ReactNode) => (
-  val?: string
-): string | undefined => {
-  if (children && val !== undefined) {
-    const allChildren = Children.toArray(children);
-    for (let i = 0; i < allChildren.length; i++) {
-      const child = allChildren[i];
-      if (isValidElement(child)) {
-        if (String(child.props.value) === val) {
-          return child.props.children;
+export const makeDefaultRender =
+  (children?: ReactNode) =>
+  (val?: string): string | undefined => {
+    if (children && val !== undefined) {
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child)) {
+          if (String(child.props.value) === val) {
+            return child.props.children;
+          }
         }
       }
     }
-  }
-  return val || undefined;
-};
+    return val || undefined;
+  };