Merge pull request #5333 from GeekyAnts/release/3.4.14

Release/3.4.14

Author: surajahmed

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`;