Merge pull request #5333 from GeekyAnts/release/3.4.14

Release/3.4.14

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.13",
+  "version": "3.4.14",
   "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/FormControl/useFormControl.tsx

@@ -3,6 +3,8 @@ import { useId } from '@react-native-aria/utils';
 import omit from 'lodash.omit';
 import type { IFormControlProps } from './types';
 import { ariaAttr } from '../../../utils';
+import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
+import { uniqueId } from 'lodash';
 
 export type IFormControlContext = Omit<
   ReturnType<typeof useFormControlProvider>,
@@ -21,7 +23,18 @@ export function useFormControlProvider(props: IFormControlProps) {
     ...htmlProps
   } = props;
 
-  const id = useId();
+  let id = uniqueId();
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  if (!disableCSSMediaQueries) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    id = useId();
+  }
+
+  // const id = '';
   // Generate all the required ids
   const nativeID = idProp || `field-${id}`;
 
@@ -85,7 +98,7 @@ export function useFormControl(props: IFormControlProps) {
 
   return {
     ...cleanProps,
-    nativeID: props.nativeID ?? field?.nativeID,
+    nativeID: props.nativeID ?? field?.nativeID + '-input',
     disabled: props.isDisabled || field?.isDisabled,
     readOnly: props.isReadOnly || field?.isReadOnly,
     required: props.isRequired || field?.isRequired,

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/Menu/useMenu.tsx

@@ -1,14 +1,28 @@
+import React from 'react';
 import { useFocusManager } from '@react-aria/focus';
-import { useId } from '@react-aria/utils';
+import { useId } from '@react-native-aria/utils';
 import { AccessibilityRole, Platform } from 'react-native';
+import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
+import { uniqueId } from 'lodash';
 
 type IMenuTriggerProps = {
   handleOpen: () => void;
   isOpen: boolean;
 };
 
 export const useMenuTrigger = ({ handleOpen, isOpen }: IMenuTriggerProps) => {
-  const menuTriggerId = useId();
+  let menuTriggerId = uniqueId();
+
+  // let id = uniqueId();
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  if (!disableCSSMediaQueries) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    menuTriggerId = useId();
+  }
   return {
     'onKeyDownCapture': (event: KeyboardEvent) => {
       if ([' ', 'Enter', 'ArrowUp', 'ArrowDown'].includes(event.key)) {

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/Popover/Popover.tsx

@@ -9,9 +9,11 @@ import Backdrop from '../Backdrop';
 import { FocusScope } from '@react-native-aria/focus';
 import { PresenceTransition } from '../Transitions';
 import { StyleSheet } from 'react-native';
-import { useId } from '@react-aria/utils';
+import { useId } from '@react-native-aria/utils';
 import { Overlay } from '../../primitives/Overlay';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { uniqueId } from 'lodash';
+import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
 
 const Popover = (
   {
@@ -41,8 +43,18 @@ const Popover = (
 
   const [bodyMounted, setBodyMounted] = React.useState(false);
   const [headerMounted, setHeaderMounted] = React.useState(false);
+  let id = uniqueId();
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
 
-  const popoverContentId = `${useId()}-content`;
+  if (!disableCSSMediaQueries) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    id = useId();
+  }
+
+  const popoverContentId = `${id}-content`;
   const headerId = `${popoverContentId}-header`;
   const bodyId = `${popoverContentId}-body`;
 

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/Tooltip/Tooltip.tsx

@@ -8,8 +8,10 @@ import { Platform, StyleSheet } from 'react-native';
 import { usePropsResolution } from '../../../hooks';
 import Box from '../../primitives/Box';
 import type { ITooltipProps } from './types';
-import { useId } from '@react-aria/utils';
+import { useId } from '@react-native-aria/utils';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { uniqueId } from 'lodash';
+import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
 
 export const Tooltip = ({
   label,
@@ -50,7 +52,21 @@ export const Tooltip = ({
 
   const enterTimeout = React.useRef<any>();
   const exitTimeout = React.useRef<any>();
-  const tooltipID = useId();
+  // const tooltipID = '';
+  // const tooltipID = useId();
+
+  let tooltipID = uniqueId();
+
+  // let id = uniqueId();
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  if (!disableCSSMediaQueries) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    tooltipID = useId();
+  }
 
   const openWithDelay = React.useCallback(() => {
     if (!isDisabled) {

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