Merge pull request #5325 from GeekyAnts/release/3.4.14-rc.1

Release/3.4.14 rc.1

example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx

@@ -42,7 +42,10 @@ export const Example = () => {
               Fax
             </Checkbox>
           </Checkbox.Group>
-          <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
+          <FormControl.ErrorMessage
+            _stack={{ alignItems: 'flex-start' }}
+            leftIcon={<WarningOutlineIcon size="xs" mt={1} />}
+          >
             You must select at least three methods
           </FormControl.ErrorMessage>
         </FormControl>

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.14-rc.0",
+  "version": "3.4.14-rc.1",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
@@ -196,6 +196,7 @@
     "@react-stately/tabs": "3.0.0-alpha.1",
     "@react-stately/toggle": "3.2.1",
     "@types/lodash.has": "^4.5.6",
+    "@types/use-subscription": "^1.0.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.has": "^4.5.2",

src/components/composites/Avatar/Group.tsx

@@ -29,7 +29,12 @@ const getAvatarGroupChildren = (
   };
   return [
     plusAvatars > 0 ? (
-      <Avatar {...spacingProps} {..._avatar} {..._hiddenAvatarPlaceholder}>
+      <Avatar
+        key="avatar-group-wrapper"
+        {...spacingProps}
+        {..._avatar}
+        {..._hiddenAvatarPlaceholder}
+      >
         {'+ ' + plusAvatars}
       </Avatar>
     ) : null,

src/components/composites/Collapse/index.tsx

@@ -4,6 +4,7 @@ import { ViewStyle, LayoutAnimation, UIManager, Platform } from 'react-native';
 import { Box } from '../../primitives';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { CustomProps } from '../../../components/types';
 export type InterfaceCollapseProps = InterfaceBoxProps<ICollapseProps> & {
   style?: ViewStyle;
   endingHeight?: number;
@@ -15,7 +16,7 @@ export type InterfaceCollapseProps = InterfaceBoxProps<ICollapseProps> & {
   onAnimationStart?: Function;
 };
 
-export type ICollapseProps = InterfaceCollapseProps;
+export type ICollapseProps = InterfaceCollapseProps & CustomProps<'Box'>;
 
 function usePrevious(value: any) {
   const ref = useRef();

src/components/composites/IconButton/types.ts

@@ -6,7 +6,7 @@ import type { CustomProps, VariantType } from '../../types';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceIconButtonProps
   extends Omit<
-      InterfacePressableProps,
+      InterfacePressableProps<InterfaceIconButtonProps>,
       | 'children'
       | 'color'
       | '_light'

src/components/composites/Modal/ModalContent.tsx

@@ -44,6 +44,7 @@ const ModalContent = (props: IBoxProps, ref?: any) => {
       //@ts-ignore - web only
       accessibilityRole={Platform.OS === 'web' ? 'dialog' : undefined}
       accessibilityViewIsModal
+      _web={{ focusable: false }}
     />
   );
 };

src/components/composites/NumberInput/NumberInputStepper.tsx

@@ -64,6 +64,7 @@ const NumberInputStepper = (
   ref?: any
 ) => {
   const {
+    //@ts-ignore
     numberInputStepper,
     setNumberInputStepper,
   }: INumberInputContext = React.useContext(NumberInputContext);

src/components/composites/Tabs/types.tsx

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { ViewProps } from 'react-native';
-import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box';
 import type { InterfaceIconProps } from '../../primitives/Icon/types';
 import type { ColorSchemeType } from '../../../components/types';
 
@@ -35,8 +35,8 @@ export type ITabProps = InterfaceBoxProps<ITabProps> & {
   item?: any;
 };
 
-export type ITabViewsProps = InterfaceBoxProps<ITabViewsProps>;
-export type ITabViewProps = InterfaceBoxProps<ITabViewProps> & {
+export type ITabViewsProps = IBoxProps;
+export type ITabViewProps = IBoxProps & {
   index?: number;
 };
 

src/components/composites/Transitions/types.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
+import type { CustomProps } from '../../../components/types';
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { IOverlayProps } from '../../primitives/Overlay';
 export type IFadeProps = InterfaceBoxProps<IFadeProps> & {
@@ -37,7 +38,7 @@ export type ISlideFadeProps = InterfaceBoxProps<ISlideFadeProps> & {
   duration?: number;
   offsetX?: number;
   offsetY?: number;
-};
+} & CustomProps<'Slide'>;
 
 export interface ISupportedTransitions {
   opacity?: number;

src/components/primitives/Heading/types.ts

@@ -1,8 +1,9 @@
-import type { ITextProps } from '../Text';
+import type { InterfaceTextProps } from '../Text/types';
 
 import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
 
-export interface IterfaceHeadingProps extends ITextProps {
+export interface IterfaceHeadingProps
+  extends InterfaceTextProps<IHeadingProps> {
   /**
    * The size of the heading.
    * @default xl

src/components/primitives/Icon/Icons/Arrow.tsx

@@ -31,7 +31,7 @@ export const ArrowForwardIcon = createIcon({
   path: (
     <G>
       <Path
-        d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 24.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
+        d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 20.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
         stroke="currentColor"
       />
     </G>

src/components/primitives/Input/Input.tsx

@@ -7,7 +7,7 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { useHover } from '@react-native-aria/interactions';
 import { extractInObject, stylingProps } from '../../../theme/tools/utils';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
-import { mergeRefs } from '../../../utils';
+import { mergeRefs, resolveStackStyleInput } from '../../../utils';
 import { Stack } from '../Stack';
 import { makeStyledComponent } from '../../../utils/styled';
 import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';
@@ -36,12 +36,6 @@ const Input = (
     callback();
   };
 
-  /**Converting into Hash Color Code */
-  //@ts-ignore
-  props.focusOutlineColor = useToken('colors', props.focusOutlineColor);
-  //@ts-ignore
-  props.invalidOutlineColor = useToken('colors', props.invalidOutlineColor);
-
   const _ref = React.useRef(null);
   const { isHovered } = useHover({}, _ref);
 
@@ -113,11 +107,39 @@ const Input = (
     'colors',
     underlineColorAndroid
   );
+
+  /**Converting into Hash Color Code */
+  //@ts-ignore
+  resolvedProps.focusOutlineColor = useToken(
+    'colors',
+    resolvedProps.focusOutlineColor
+  );
+  //@ts-ignore
+  resolvedProps.invalidOutlineColor = useToken(
+    'colors',
+    resolvedProps.invalidOutlineColor
+  );
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
 
+  if (resolvedProps.focusOutlineColor && isFocused) {
+    layoutProps.borderColor = resolvedProps.focusOutlineColor;
+    _stack.style = resolveStackStyleInput(
+      props.variant,
+      resolvedProps.focusOutlineColor
+    );
+  }
+
+  if (resolvedProps.invalidOutlineColor && props.isInvalid) {
+    layoutProps.borderColor = resolvedProps.invalidOutlineColor;
+    _stack.style = resolveStackStyleInput(
+      props.variant,
+      resolvedProps.invalidOutlineColor
+    );
+  }
+
   return (
     <Stack
       {..._stack}

src/components/primitives/Input/types.ts

@@ -109,7 +109,7 @@ export interface InterfaceInputProps
   _stack?: Partial<IStackProps>;
   /** This prop allow you to change outlineColor when input is in focused state*/
   focusOutlineColor?: ColorType;
-  /** This prop allow you to change outlineColor when input is in focused state*/
+  /** This prop allow you to change outlineColor when input is in invalid state*/
   invalidOutlineColor?: ColorType;
   ref?: MutableRefObject<any> | RefCallback<any>;
 }

src/components/primitives/Pressable/types.ts

@@ -24,20 +24,20 @@ export interface InterfacePressableProps<T = IPressableProps>
   /**
    * Style props to be applied when hovered
    */
-  _hover?: Omit<Partial<IPressableProps>, '_hover'>;
+  _hover?: Omit<Partial<T>, '_hover'>;
   /**
    * Style props to be applied when pressed
    */
-  _pressed?: Omit<Partial<IPressableProps>, '_pressed'>;
+  _pressed?: Omit<Partial<T>, '_pressed'>;
   /**
    * Style props to be applied when focus
    */
-  _focus?: Omit<Partial<IPressableProps>, '_focus'>;
+  _focus?: Omit<Partial<T>, '_focus'>;
 
   /**
    * Style props to be applied when disabled
    */
-  _disabled?: Omit<Partial<IPressableProps>, '_disabled'>;
+  _disabled?: Omit<Partial<T>, '_disabled'>;
 
   /**
    * 	If true, the p will be disabled.
@@ -62,7 +62,7 @@ export interface InterfacePressableProps<T = IPressableProps>
   /**
    * Style props to be applied when focus visible. These styles will be only applied when user is interacting the app using a keyboard. (Web only)
    */
-  _focusVisible?: Omit<Partial<IPressableProps>, '_focusVisible'>;
+  _focusVisible?: Omit<Partial<T>, '_focusVisible'>;
 
   children?:
     | React.ReactNode

src/components/primitives/Select/Select.tsx

@@ -175,41 +175,7 @@ const Select = (
     />
   );
 
-  return Platform.OS === 'web' ? (
-    <Box {...layoutProps}>
-      {/* <Box w="100%" h="100%" position="absolute" opacity="0" zIndex={1}> */}
-      <select
-        aria-readonly={selectProps.readOnly}
-        required={selectProps.required}
-        disabled={isDisabled}
-        {...focusProps}
-        {...hoverProps}
-        ref={mergeRefs([ref, _ref])}
-        //@ts-ignore
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-        value={selectedItem === null ? tempFix : value}
-        aria-label={placeholder}
-        onFocus={() => {
-          setIsFocused(true);
-          onOpen && onOpen();
-        }}
-        onBlur={() => {
-          setIsFocused(false);
-          onClose && onClose();
-        }}
-        {..._webSelect}
-      >
-        <option disabled value={tempFix}>
-          {placeholder}
-        </option>
-        {children}
-      </select>
-      {/* </Box> */}
-      {commonInput}
-    </Box>
-  ) : (
+  return Platform.OS === 'android' || Platform.OS === 'ios' ? (
     <>
       <Pressable
         onPress={() => {
@@ -263,6 +229,40 @@ const Select = (
         </Actionsheet.Content>
       </Actionsheet>
     </>
+  ) : (
+    <Box {...layoutProps}>
+      {/* <Box w="100%" h="100%" position="absolute" opacity="0" zIndex={1}> */}
+      <select
+        aria-readonly={selectProps.readOnly}
+        required={selectProps.required}
+        disabled={isDisabled}
+        {...focusProps}
+        {...hoverProps}
+        ref={mergeRefs([ref, _ref])}
+        //@ts-ignore
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+        value={selectedItem === null ? tempFix : value}
+        aria-label={placeholder}
+        onFocus={() => {
+          setIsFocused(true);
+          onOpen && onOpen();
+        }}
+        onBlur={() => {
+          setIsFocused(false);
+          onClose && onClose();
+        }}
+        {..._webSelect}
+      >
+        <option disabled value={tempFix}>
+          {placeholder}
+        </option>
+        {children}
+      </select>
+      {/* </Box> */}
+      {commonInput}
+    </Box>
   );
 };
 

src/components/primitives/Stack/HStack.tsx

@@ -1,7 +1,11 @@
 import React, { memo, forwardRef } from 'react';
 import StackMain, { InterfaceStackProps } from './Stack';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
-import type { CustomProps, ResponsiveValue } from '../../types';
+import type {
+  CustomProps,
+  ResponsiveValue,
+  // ThemeComponentSizeType,
+} from '../../types';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 export interface InterfaceHStackProps extends InterfaceStackProps {
   /**
@@ -14,6 +18,7 @@ export interface InterfaceHStackProps extends InterfaceStackProps {
 }
 
 export type IHStackProps = InterfaceHStackProps & CustomProps<'HStack'>;
+
 const HStack = (props: IHStackProps, ref?: any) => {
   const resolvedProps = usePropsResolution('HStack', props);
   //TODO: refactor for responsive prop

src/components/primitives/Text/types.tsx

@@ -10,8 +10,8 @@ import type {
 import type { CustomProps, PlatformProps, ResponsiveValue } from '../../types';
 import type { VariantType } from '../../../components/types';
 
-export interface InterfaceTextProps
-  extends PlatformProps<ITextProps>,
+export interface InterfaceTextProps<T = ITextProps>
+  extends PlatformProps<T>,
     StyledProps,
     TextProps {
   /**

src/components/types/utils.ts

@@ -84,7 +84,7 @@ export type CustomComponentProps<
     undefined
   >
 >;
-export type CustomProps<
+export type CustomPropsTemp<
   T extends keyof ITheme['components']
 > = CustomComponentProps<T> extends never
   ? {}
@@ -97,3 +97,28 @@ export type UnionToIntersection<U> = (
 ) extends (k: infer I) => void
   ? I
   : never;
+
+type VariantSizeColorScheme<T extends keyof ITheme['components']> = {
+  variant?: VariantType<T>;
+  size?: ThemeComponentSizeType<T>;
+  colorScheme?: ColorSchemeType;
+};
+// export type CustomProps<
+//   T extends keyof ITheme['components']
+// > = CustomComponentProps<T> extends never
+//   ? {} | VariantSizeColorScheme<T>
+//   : // : CustomComponentProps<T> extends Record<string, any>
+//     // ? {}
+//     | (UnionToIntersection<CustomComponentProps<T>> & {})
+//       | VariantSizeColorScheme<T>;
+
+export type CustomProps<
+  T extends keyof ITheme['components']
+> = UnionToIntersection<CustomPropsTemp<T> | VariantSizeColorScheme<T>>;
+
+// export type CustomProps<
+//   T extends keyof ITheme['components']
+// > = CustomPropsTemp<T>;
+// | CustomPropsTemp<T>
+// | { a: string };
+// | { size?: ThemeComponentSizeType<T> };