@react-native-ohos/native-base 3.4.29-rc.1

package/lib/module/components/composites/Fab/FabItem.js

@@ -0,0 +1,76 @@
+// import React from 'react';
+// import { Button, Box } from '../../primitives';
+// import { FabContext } from './context';
+// import type { IFabItemProps } from './props';
+// import { Animated } from 'react-native';
+// import { omitUndefined } from '../../../theme/tools/utils';
+// const FabItem = ({ children, ...props }: IFabItemProps) => {
+//   const slideAnim = React.useRef(new Animated.Value(0)).current;
+//   const { onPress, index = 0, ...newProps } = omitUndefined(props);
+//   const { isOpen, onToggle, slide }: any = React.useContext(FabContext);
+//   const [size, setSize] = React.useState(40);
+//   const slideStyle = {
+//     down: 'top',
+//     up: 'bottom',
+//     right: 'left',
+//     left: 'right',
+//   };
+//   const provideSize = (layoutSize: any) => {
+//     setSize(layoutSize.width + 10);
+//   };
+//   const pressHandler = () => {
+//     onToggle();
+//     onPress && onPress();
+//   };
+//   const slideIn = () => {
+//     Animated.timing(slideAnim, {
+//       toValue: 0,
+//       duration: 500,
+//       useNativeDriver: true,
+//     }).start();
+//   };
+//   let animToValue = index * size;
+//   animToValue =
+//     slide === 'left' || slide === 'up' ? animToValue * -1 : animToValue;
+//   const slideOut = () => {
+//     Animated.timing(slideAnim, {
+//       toValue: animToValue,
+//       duration: 500,
+//       useNativeDriver: true,
+//     }).start();
+//   };
+//   isOpen ? slideOut() : slideIn();
+//   const animatioStyle = {
+//     top: { transform: [{ translateY: slideAnim }] },
+//     right: { transform: [{ translateX: slideAnim }] },
+//     bottom: { transform: [{ translateY: slideAnim }] },
+//     left: { transform: [{ translateX: slideAnim }] },
+//   };
+//   return (
+//     // @ts-ignore
+//     <Animated.View style={animatioStyle[slideStyle[slide]]}>
+//       <Box
+//         position="absolute"
+//         top={0}
+//         right={0}
+//         onLayout={(e) => provideSize(e.nativeEvent.layout)}
+//         zIndex={9999 - index}
+//       >
+//         <Button
+//           variant="unstyled"
+//           bg="default.200"
+//           borderRadius="full"
+//           justifyContent="center"
+//           alignItems="center"
+//           {...newProps}
+//           onPress={pressHandler}
+//           p={1}
+//         >
+//           {children}
+//         </Button>
+//       </Box>
+//     </Animated.View>
+//   );
+// };
+// export default FabItem;
+//# sourceMappingURL=FabItem.js.map

package/lib/module/components/composites/Fab/FabItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FabItem.tsx"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA","sourcesContent":["// import React from 'react';\r\n// import { Button, Box } from '../../primitives';\r\n// import { FabContext } from './context';\r\n// import type { IFabItemProps } from './props';\r\n// import { Animated } from 'react-native';\r\n// import { omitUndefined } from '../../../theme/tools/utils';\r\n\r\n// const FabItem = ({ children, ...props }: IFabItemProps) => {\r\n//   const slideAnim = React.useRef(new Animated.Value(0)).current;\r\n//   const { onPress, index = 0, ...newProps } = omitUndefined(props);\r\n//   const { isOpen, onToggle, slide }: any = React.useContext(FabContext);\r\n//   const [size, setSize] = React.useState(40);\r\n//   const slideStyle = {\r\n//     down: 'top',\r\n//     up: 'bottom',\r\n//     right: 'left',\r\n//     left: 'right',\r\n//   };\r\n\r\n//   const provideSize = (layoutSize: any) => {\r\n//     setSize(layoutSize.width + 10);\r\n//   };\r\n\r\n//   const pressHandler = () => {\r\n//     onToggle();\r\n//     onPress && onPress();\r\n//   };\r\n\r\n//   const slideIn = () => {\r\n//     Animated.timing(slideAnim, {\r\n//       toValue: 0,\r\n//       duration: 500,\r\n//       useNativeDriver: true,\r\n//     }).start();\r\n//   };\r\n\r\n//   let animToValue = index * size;\r\n//   animToValue =\r\n//     slide === 'left' || slide === 'up' ? animToValue * -1 : animToValue;\r\n//   const slideOut = () => {\r\n//     Animated.timing(slideAnim, {\r\n//       toValue: animToValue,\r\n//       duration: 500,\r\n//       useNativeDriver: true,\r\n//     }).start();\r\n//   };\r\n\r\n//   isOpen ? slideOut() : slideIn();\r\n//   const animatioStyle = {\r\n//     top: { transform: [{ translateY: slideAnim }] },\r\n//     right: { transform: [{ translateX: slideAnim }] },\r\n//     bottom: { transform: [{ translateY: slideAnim }] },\r\n//     left: { transform: [{ translateX: slideAnim }] },\r\n//   };\r\n\r\n//   return (\r\n//     // @ts-ignore\r\n//     <Animated.View style={animatioStyle[slideStyle[slide]]}>\r\n//       <Box\r\n//         position=\"absolute\"\r\n//         top={0}\r\n//         right={0}\r\n//         onLayout={(e) => provideSize(e.nativeEvent.layout)}\r\n//         zIndex={9999 - index}\r\n//       >\r\n//         <Button\r\n//           variant=\"unstyled\"\r\n//           bg=\"default.200\"\r\n//           borderRadius=\"full\"\r\n//           justifyContent=\"center\"\r\n//           alignItems=\"center\"\r\n//           {...newProps}\r\n//           onPress={pressHandler}\r\n//           p={1}\r\n//         >\r\n//           {children}\r\n//         </Button>\r\n//       </Box>\r\n//     </Animated.View>\r\n//   );\r\n// };\r\n\r\n// export default FabItem;\r\n"]}

package/lib/module/components/composites/Fab/FabList.js

@@ -0,0 +1,15 @@
+// import React from 'react';
+// import { Box } from '../../primitives';
+// import getIndexedChildren from '../../../utils/getIndexedChildren';
+// import type { IFabListProps } from './props';
+// import { omitUndefined } from '../../../theme/tools/utils';
+// const FabList = ({ children, ...props }: IFabListProps) => {
+//   const newProps = omitUndefined(props);
+//   return (
+//     <Box position="absolute" {...newProps}>
+//       {getIndexedChildren(children, 'FabItem', 0)}
+//     </Box>
+//   );
+// };
+// export default FabList;
+//# sourceMappingURL=FabList.js.map

package/lib/module/components/composites/Fab/FabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FabList.tsx"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA","sourcesContent":["// import React from 'react';\r\n// import { Box } from '../../primitives';\r\n// import getIndexedChildren from '../../../utils/getIndexedChildren';\r\n// import type { IFabListProps } from './props';\r\n\r\n// import { omitUndefined } from '../../../theme/tools/utils';\r\n\r\n// const FabList = ({ children, ...props }: IFabListProps) => {\r\n//   const newProps = omitUndefined(props);\r\n//   return (\r\n//     <Box position=\"absolute\" {...newProps}>\r\n//       {getIndexedChildren(children, 'FabItem', 0)}\r\n//     </Box>\r\n//   );\r\n// };\r\n\r\n// export default FabList;\r\n"]}

package/lib/module/components/composites/Fab/context.js

@@ -0,0 +1,3 @@
+// import { createContext } from 'react';
+// export const FabContext = createContext({});
+//# sourceMappingURL=context.js.map

package/lib/module/components/composites/Fab/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["context.ts"],"names":[],"mappings":"AAAA;AAEA","sourcesContent":["// import { createContext } from 'react';\r\n\r\n// export const FabContext = createContext({});\r\n"]}

package/lib/module/components/composites/Fab/index.js

@@ -0,0 +1,2 @@
+export { default as Fab } from './Fab';
+//# sourceMappingURL=index.js.map

package/lib/module/components/composites/Fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["default","Fab"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B","sourcesContent":["export { default as Fab } from './Fab';\r\nexport type { IFabProps } from './types';\r\n"]}

package/lib/module/components/composites/Fab/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/module/components/composites/Fab/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/module/components/composites/FormControl/FormControl.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { memo, forwardRef } from 'react';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import Box from '../../primitives/Box';
+import { useFormControlProvider, FormControlContext } from './useFormControl';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const FormControl = (props, ref) => {
+  const {
+    htmlProps,
+    ...context
+  } = useFormControlProvider(props);
+  const resolvedProps = usePropsResolution('FormControl', props, {
+    isDisabled: context.isDisabled,
+    isReadOnly: context.isReadOnly,
+    isInvalid: context.isInvalid // isRequired: context.isRequired,
+
+  }); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(Box, _extends({}, resolvedProps, htmlProps, {
+    ref: ref
+  })));
+};
+
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(FormControl));
+//# sourceMappingURL=FormControl.js.map

package/lib/module/components/composites/FormControl/FormControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormControl.tsx"],"names":["React","memo","forwardRef","usePropsResolution","Box","useFormControlProvider","FormControlContext","useHasResponsiveProps","FormControl","props","ref","htmlProps","context","resolvedProps","isDisabled","isReadOnly","isInvalid"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,UAAtB,QAAwC,OAAxC;AACA,SAASC,kBAAT,QAAmC,8BAAnC;AACA,OAAOC,GAAP,MAAgB,sBAAhB;AAEA,SAASC,sBAAT,EAAiCC,kBAAjC,QAA2D,kBAA3D;AACA,SAASC,qBAAT,QAAsC,sCAAtC;;AAEA,MAAMC,WAAW,GAAG,CAACC,KAAD,EAA2BC,GAA3B,KAAwC;AAC1D,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA4BP,sBAAsB,CAACI,KAAD,CAAxD;AACA,QAAMI,aAAa,GAAGV,kBAAkB,CAAC,aAAD,EAAgBM,KAAhB,EAAuB;AAC7DK,IAAAA,UAAU,EAAEF,OAAO,CAACE,UADyC;AAE7DC,IAAAA,UAAU,EAAEH,OAAO,CAACG,UAFyC;AAG7DC,IAAAA,SAAS,EAAEJ,OAAO,CAACI,SAH0C,CAI7D;;AAJ6D,GAAvB,CAAxC,CAF0D,CAQ1D;;AACA,MAAIT,qBAAqB,CAACE,KAAD,CAAzB,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBACE,oBAAC,kBAAD,CAAoB,QAApB;AAA6B,IAAA,KAAK,EAAEG;AAApC,kBACE,oBAAC,GAAD,eAASC,aAAT,EAA4BF,SAA5B;AAAuC,IAAA,GAAG,EAAED;AAA5C,KADF,CADF;AAKD,CAjBD;;AAmBA,4BAAeT,IAAI,eAACC,UAAU,CAACM,WAAD,CAAX,CAAnB","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport Box from '../../primitives/Box';\r\nimport type { IFormControlProps } from './types';\r\nimport { useFormControlProvider, FormControlContext } from './useFormControl';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst FormControl = (props: IFormControlProps, ref: any) => {\r\n  const { htmlProps, ...context } = useFormControlProvider(props);\r\n  const resolvedProps = usePropsResolution('FormControl', props, {\r\n    isDisabled: context.isDisabled,\r\n    isReadOnly: context.isReadOnly,\r\n    isInvalid: context.isInvalid,\r\n    // isRequired: context.isRequired,\r\n  });\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  return (\r\n    <FormControlContext.Provider value={context}>\r\n      <Box {...resolvedProps} {...htmlProps} ref={ref} />\r\n    </FormControlContext.Provider>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(FormControl));\r\n"]}

package/lib/module/components/composites/FormControl/FormControlErrorMessage.js

@@ -0,0 +1,80 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { memo, forwardRef } from 'react';
+import Box from '../../primitives/Box';
+import { HStack } from '../../primitives/Stack';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useFormControlContext } from './useFormControl';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { combineContextAndProps } from '../../../utils';
+import Text from '../../primitives/Text';
+
+const FormControlErrorMessage = (props, ref) => {
+  const formControlContext = useFormControlContext();
+  const combinedProps = combineContextAndProps(formControlContext, props);
+  const {
+    leftIcon,
+    rightIcon,
+    children,
+    _text,
+    _stack,
+    ...resolvedProps
+  } = usePropsResolution('FormControlErrorMessage', combinedProps, {
+    isDisabled: combinedProps.isDisabled,
+    isReadOnly: combinedProps.isReadOnly,
+    isInvalid: combinedProps.isInvalid // isRequired: combinedProps.isRequired,
+
+  });
+  let {
+    startIcon,
+    endIcon
+  } = resolvedProps;
+
+  if (rightIcon) {
+    endIcon = rightIcon;
+  }
+
+  if (leftIcon) {
+    startIcon = leftIcon;
+  }
+
+  if (endIcon && /*#__PURE__*/React.isValidElement(endIcon)) {
+    endIcon = React.Children.map(endIcon, (child, index) => {
+      return /*#__PURE__*/React.cloneElement(child, {
+        key: "button-end-icon-".concat(index),
+        ..._text,
+        ...child.props
+      });
+    });
+  }
+
+  if (startIcon && /*#__PURE__*/React.isValidElement(startIcon)) {
+    startIcon = React.Children.map(startIcon, (child, index) => {
+      return /*#__PURE__*/React.cloneElement(child, {
+        key: "button-start-icon-".concat(index),
+        ..._text,
+        ...child.props
+      });
+    });
+  }
+
+  React.useEffect(() => {
+    resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.setHasFeedbackText(true);
+    return () => {
+      resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.setHasFeedbackText(false);
+    };
+  }); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return resolvedProps !== null && resolvedProps !== void 0 && resolvedProps.isInvalid && children ? /*#__PURE__*/React.createElement(Box, _extends({
+    nativeID: resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.helpTextId
+  }, resolvedProps, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(HStack, _stack, startIcon, /*#__PURE__*/React.createElement(Text, _text, children), endIcon)) : null;
+};
+
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(FormControlErrorMessage));
+//# sourceMappingURL=FormControlErrorMessage.js.map

package/lib/module/components/composites/FormControl/FormControlErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormControlErrorMessage.tsx"],"names":["React","memo","forwardRef","Box","HStack","usePropsResolution","useFormControlContext","useHasResponsiveProps","combineContextAndProps","Text","FormControlErrorMessage","props","ref","formControlContext","combinedProps","leftIcon","rightIcon","children","_text","_stack","resolvedProps","isDisabled","isReadOnly","isInvalid","startIcon","endIcon","isValidElement","Children","map","child","index","cloneElement","key","useEffect","setHasFeedbackText","helpTextId"],"mappings":"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","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport Box from '../../primitives/Box';\r\nimport { HStack } from '../../primitives/Stack';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { useFormControlContext } from './useFormControl';\r\nimport type { IFormControlErrorMessageProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { combineContextAndProps } from '../../../utils';\r\nimport Text from '../../primitives/Text';\r\n\r\nconst FormControlErrorMessage = (\r\n  props: IFormControlErrorMessageProps,\r\n  ref: any\r\n) => {\r\n  const formControlContext = useFormControlContext();\r\n  const combinedProps = combineContextAndProps(formControlContext, props);\r\n  const {\r\n    leftIcon,\r\n    rightIcon,\r\n    children,\r\n    _text,\r\n    _stack,\r\n    ...resolvedProps\r\n  } = usePropsResolution('FormControlErrorMessage', combinedProps, {\r\n    isDisabled: combinedProps.isDisabled,\r\n    isReadOnly: combinedProps.isReadOnly,\r\n    isInvalid: combinedProps.isInvalid,\r\n    // isRequired: combinedProps.isRequired,\r\n  });\r\n  let { startIcon, endIcon } = resolvedProps;\r\n\r\n  if (rightIcon) {\r\n    endIcon = rightIcon;\r\n  }\r\n  if (leftIcon) {\r\n    startIcon = leftIcon;\r\n  }\r\n  if (endIcon && React.isValidElement(endIcon)) {\r\n    endIcon = React.Children.map(\r\n      endIcon,\r\n      (child: JSX.Element, index: number) => {\r\n        return React.cloneElement(child, {\r\n          key: `button-end-icon-${index}`,\r\n          ..._text,\r\n          ...child.props,\r\n        });\r\n      }\r\n    );\r\n  }\r\n  if (startIcon && React.isValidElement(startIcon)) {\r\n    startIcon = React.Children.map(\r\n      startIcon,\r\n      (child: JSX.Element, index: number) => {\r\n        return React.cloneElement(child, {\r\n          key: `button-start-icon-${index}`,\r\n          ..._text,\r\n          ...child.props,\r\n        });\r\n      }\r\n    );\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    resolvedProps?.setHasFeedbackText(true);\r\n    return () => {\r\n      resolvedProps?.setHasFeedbackText(false);\r\n    };\r\n  });\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  return resolvedProps?.isInvalid && children ? (\r\n    <Box nativeID={resolvedProps?.helpTextId} {...resolvedProps} ref={ref}>\r\n      <HStack {..._stack}>\r\n        {startIcon}\r\n        <Text {..._text}>{children}</Text>\r\n        {endIcon}\r\n      </HStack>\r\n    </Box>\r\n  ) : null;\r\n};\r\n\r\nexport default memo(forwardRef(FormControlErrorMessage));\r\n"]}

package/lib/module/components/composites/FormControl/FormControlHelperText.js

@@ -0,0 +1,37 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { memo, forwardRef } from 'react';
+import Box from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useFormControlContext } from './useFormControl';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { combineContextAndProps } from '../../../utils';
+
+const FormControlHelperText = (props, ref) => {
+  const formControlContext = useFormControlContext();
+  const combinedProps = combineContextAndProps(formControlContext, props);
+  const resolvedProps = usePropsResolution('FormControlHelperText', combinedProps, {
+    isDisabled: combinedProps.isDisabled,
+    isReadOnly: combinedProps.isReadOnly,
+    isInvalid: combinedProps.isInvalid // isRequired: combinedProps.isRequired,
+
+  });
+  React.useEffect(() => {
+    resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.setHasHelpText(true);
+    return () => {
+      resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.setHasHelpText(false);
+    };
+  }); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Box, _extends({}, resolvedProps, {
+    nativeID: resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.feedbackId,
+    ref: ref
+  }));
+};
+
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(FormControlHelperText));
+//# sourceMappingURL=FormControlHelperText.js.map

package/lib/module/components/composites/FormControl/FormControlHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormControlHelperText.tsx"],"names":["React","memo","forwardRef","Box","usePropsResolution","useFormControlContext","useHasResponsiveProps","combineContextAndProps","FormControlHelperText","props","ref","formControlContext","combinedProps","resolvedProps","isDisabled","isReadOnly","isInvalid","useEffect","setHasHelpText","feedbackId"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,UAAtB,QAAwC,OAAxC;AACA,OAAOC,GAAP,MAAgB,sBAAhB;AACA,SAASC,kBAAT,QAAmC,8BAAnC;AACA,SAASC,qBAAT,QAAsC,kBAAtC;AAEA,SAASC,qBAAT,QAAsC,sCAAtC;AACA,SAASC,sBAAT,QAAuC,gBAAvC;;AAEA,MAAMC,qBAAqB,GAAG,CAC5BC,KAD4B,EAE5BC,GAF4B,KAGzB;AACH,QAAMC,kBAAkB,GAAGN,qBAAqB,EAAhD;AACA,QAAMO,aAAa,GAAGL,sBAAsB,CAACI,kBAAD,EAAqBF,KAArB,CAA5C;AACA,QAAMI,aAAa,GAAGT,kBAAkB,CACtC,uBADsC,EAEtCQ,aAFsC,EAGtC;AACEE,IAAAA,UAAU,EAAEF,aAAa,CAACE,UAD5B;AAEEC,IAAAA,UAAU,EAAEH,aAAa,CAACG,UAF5B;AAGEC,IAAAA,SAAS,EAAEJ,aAAa,CAACI,SAH3B,CAIE;;AAJF,GAHsC,CAAxC;AAWAhB,EAAAA,KAAK,CAACiB,SAAN,CAAgB,MAAM;AACpBJ,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEK,cAAf,CAA8B,IAA9B;AACA,WAAO,MAAM;AACXL,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEK,cAAf,CAA8B,KAA9B;AACD,KAFD;AAGD,GALD,EAdG,CAoBH;;AACA,MAAIZ,qBAAqB,CAACG,KAAD,CAAzB,EAAkC;AAChC,WAAO,IAAP;AACD;;AAED,sBACE,oBAAC,GAAD,eAASI,aAAT;AAAwB,IAAA,QAAQ,EAAEA,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEM,UAAjD;AAA6D,IAAA,GAAG,EAAET;AAAlE,KADF;AAGD,CA/BD;;AAiCA,4BAAeT,IAAI,eAACC,UAAU,CAACM,qBAAD,CAAX,CAAnB","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport Box from '../../primitives/Box';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { useFormControlContext } from './useFormControl';\r\nimport type { IFormControlHelperTextProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { combineContextAndProps } from '../../../utils';\r\n\r\nconst FormControlHelperText = (\r\n  props: IFormControlHelperTextProps,\r\n  ref: any\r\n) => {\r\n  const formControlContext = useFormControlContext();\r\n  const combinedProps = combineContextAndProps(formControlContext, props);\r\n  const resolvedProps = usePropsResolution(\r\n    'FormControlHelperText',\r\n    combinedProps,\r\n    {\r\n      isDisabled: combinedProps.isDisabled,\r\n      isReadOnly: combinedProps.isReadOnly,\r\n      isInvalid: combinedProps.isInvalid,\r\n      // isRequired: combinedProps.isRequired,\r\n    }\r\n  );\r\n\r\n  React.useEffect(() => {\r\n    resolvedProps?.setHasHelpText(true);\r\n    return () => {\r\n      resolvedProps?.setHasHelpText(false);\r\n    };\r\n  });\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Box {...resolvedProps} nativeID={resolvedProps?.feedbackId} ref={ref} />\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(FormControlHelperText));\r\n"]}

package/lib/module/components/composites/FormControl/FormControlLabel.js

@@ -0,0 +1,61 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { memo, forwardRef } from 'react';
+import Box from '../../primitives/Box';
+import Text from '../../primitives/Text';
+import { useFormControlContext } from './useFormControl';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { mergeRefs } from '../../../utils';
+import { combineContextAndProps } from '../../../utils';
+
+const FormControlLabel = ({
+  children,
+  ...props
+}, ref) => {
+  const formControlContext = useFormControlContext();
+  const combinedProps = combineContextAndProps(formControlContext, props);
+
+  const _ref = React.useRef(null);
+
+  const {
+    _astrick,
+    ...resolvedProps
+  } = usePropsResolution('FormControlLabel', combinedProps, {
+    isDisabled: combinedProps.isDisabled,
+    isReadOnly: combinedProps.isReadOnly,
+    isInvalid: combinedProps.isInvalid // isRequired: combinedProps.isRequired,
+
+  });
+
+  const requiredAsterisk = () => /*#__PURE__*/React.createElement(Text, _extends({
+    _web: {
+      accessibilityHidden: true,
+      //@ts-ignore
+      accessibilityRole: 'presentation'
+    }
+  }, _astrick), "*");
+
+  const mergedRef = mergeRefs([_ref, ref]);
+  React.useEffect(() => {
+    if (_ref.current) {
+      // RN web doesn't support htmlFor for Label element yet
+      if (props.htmlFor) {
+        _ref.current.htmlFor = props.htmlFor;
+      } else if (resolvedProps !== null && resolvedProps !== void 0 && resolvedProps.nativeID) {
+        _ref.current.htmlFor = resolvedProps.nativeID;
+      }
+    }
+  }, [resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.nativeID, props.htmlFor]);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    _web: {
+      //@ts-ignore
+      accessibilityRole: 'label'
+    }
+  }, resolvedProps, {
+    nativeID: resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.labelId,
+    ref: mergedRef
+  }), children, (resolvedProps === null || resolvedProps === void 0 ? void 0 : resolvedProps.isRequired) && requiredAsterisk());
+};
+
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(FormControlLabel));
+//# sourceMappingURL=FormControlLabel.js.map

package/lib/module/components/composites/FormControl/FormControlLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormControlLabel.tsx"],"names":["React","memo","forwardRef","Box","Text","useFormControlContext","usePropsResolution","mergeRefs","combineContextAndProps","FormControlLabel","children","props","ref","formControlContext","combinedProps","_ref","useRef","_astrick","resolvedProps","isDisabled","isReadOnly","isInvalid","requiredAsterisk","accessibilityHidden","accessibilityRole","mergedRef","useEffect","current","htmlFor","nativeID","labelId","isRequired"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,UAAtB,QAAwC,OAAxC;AACA,OAAOC,GAAP,MAAgB,sBAAhB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,SAASC,qBAAT,QAAsC,kBAAtC;AACA,SAASC,kBAAT,QAAmC,8BAAnC;AAEA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,sBAAT,QAAuC,gBAAvC;;AAEA,MAAMC,gBAAgB,GAAG,CACvB;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CADuB,EAEvBC,GAFuB,KAGpB;AACH,QAAMC,kBAAkB,GAAGR,qBAAqB,EAAhD;AACA,QAAMS,aAAa,GAAGN,sBAAsB,CAACK,kBAAD,EAAqBF,KAArB,CAA5C;;AACA,QAAMI,IAAI,GAAGf,KAAK,CAACgB,MAAN,CAA+B,IAA/B,CAAb;;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAY,OAAGC;AAAf,MAAiCZ,kBAAkB,CACvD,kBADuD,EAEvDQ,aAFuD,EAGvD;AACEK,IAAAA,UAAU,EAAEL,aAAa,CAACK,UAD5B;AAEEC,IAAAA,UAAU,EAAEN,aAAa,CAACM,UAF5B;AAGEC,IAAAA,SAAS,EAAEP,aAAa,CAACO,SAH3B,CAIE;;AAJF,GAHuD,CAAzD;;AAWA,QAAMC,gBAAgB,GAAG,mBACvB,oBAAC,IAAD;AACE,IAAA,IAAI,EAAE;AACJC,MAAAA,mBAAmB,EAAE,IADjB;AAEJ;AACAC,MAAAA,iBAAiB,EAAE;AAHf;AADR,KAMMP,QANN,OADF;;AAYA,QAAMQ,SAAS,GAAGlB,SAAS,CAAC,CAACQ,IAAD,EAAOH,GAAP,CAAD,CAA3B;AACAZ,EAAAA,KAAK,CAAC0B,SAAN,CAAgB,MAAM;AACpB,QAAIX,IAAI,CAACY,OAAT,EAAkB;AAChB;AACA,UAAIhB,KAAK,CAACiB,OAAV,EAAmB;AACjBb,QAAAA,IAAI,CAACY,OAAL,CAAaC,OAAb,GAAuBjB,KAAK,CAACiB,OAA7B;AACD,OAFD,MAEO,IAAIV,aAAJ,aAAIA,aAAJ,eAAIA,aAAa,CAAEW,QAAnB,EAA6B;AAClCd,QAAAA,IAAI,CAACY,OAAL,CAAaC,OAAb,GAAuBV,aAAa,CAACW,QAArC;AACD;AACF;AACF,GATD,EASG,CAACX,aAAD,aAACA,aAAD,uBAACA,aAAa,CAAEW,QAAhB,EAA0BlB,KAAK,CAACiB,OAAhC,CATH;AAWA,sBACE,oBAAC,GAAD;AACE,IAAA,IAAI,EAAE;AACJ;AACAJ,MAAAA,iBAAiB,EAAE;AAFf;AADR,KAKMN,aALN;AAME,IAAA,QAAQ,EAAEA,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEY,OAN3B;AAOE,IAAA,GAAG,EAAEL;AAPP,MASGf,QATH,EAUG,CAAAQ,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEa,UAAf,KAA6BT,gBAAgB,EAVhD,CADF;AAcD,CAxDD;;AAyDA,4BAAerB,IAAI,eAACC,UAAU,CAACO,gBAAD,CAAX,CAAnB","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport Box from '../../primitives/Box';\r\nimport Text from '../../primitives/Text';\r\nimport { useFormControlContext } from './useFormControl';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport type { IFormControlLabelProps } from './types';\r\nimport { mergeRefs } from '../../../utils';\r\nimport { combineContextAndProps } from '../../../utils';\r\n\r\nconst FormControlLabel = (\r\n  { children, ...props }: IFormControlLabelProps,\r\n  ref: any\r\n) => {\r\n  const formControlContext = useFormControlContext();\r\n  const combinedProps = combineContextAndProps(formControlContext, props);\r\n  const _ref = React.useRef<HTMLLabelElement>(null);\r\n  const { _astrick, ...resolvedProps } = usePropsResolution(\r\n    'FormControlLabel',\r\n    combinedProps,\r\n    {\r\n      isDisabled: combinedProps.isDisabled,\r\n      isReadOnly: combinedProps.isReadOnly,\r\n      isInvalid: combinedProps.isInvalid,\r\n      // isRequired: combinedProps.isRequired,\r\n    }\r\n  );\r\n\r\n  const requiredAsterisk = () => (\r\n    <Text\r\n      _web={{\r\n        accessibilityHidden: true,\r\n        //@ts-ignore\r\n        accessibilityRole: 'presentation',\r\n      }}\r\n      {..._astrick}\r\n    >\r\n      *\r\n    </Text>\r\n  );\r\n  const mergedRef = mergeRefs([_ref, ref]);\r\n  React.useEffect(() => {\r\n    if (_ref.current) {\r\n      // RN web doesn't support htmlFor for Label element yet\r\n      if (props.htmlFor) {\r\n        _ref.current.htmlFor = props.htmlFor;\r\n      } else if (resolvedProps?.nativeID) {\r\n        _ref.current.htmlFor = resolvedProps.nativeID;\r\n      }\r\n    }\r\n  }, [resolvedProps?.nativeID, props.htmlFor]);\r\n\r\n  return (\r\n    <Box\r\n      _web={{\r\n        //@ts-ignore\r\n        accessibilityRole: 'label',\r\n      }}\r\n      {...resolvedProps}\r\n      nativeID={resolvedProps?.labelId}\r\n      ref={mergedRef}\r\n    >\r\n      {children}\r\n      {resolvedProps?.isRequired && requiredAsterisk()}\r\n    </Box>\r\n  );\r\n};\r\nexport default memo(forwardRef(FormControlLabel));\r\n"]}

package/lib/module/components/composites/FormControl/index.js

@@ -0,0 +1,13 @@
+import { default as FormControlBase } from './FormControl';
+import { default as FormControlLabel } from './FormControlLabel';
+import { default as FormControlErrorMessage } from './FormControlErrorMessage';
+import { default as FormControlHelperText } from './FormControlHelperText';
+let FormControlTemp = FormControlBase;
+FormControlTemp.Label = FormControlLabel;
+FormControlTemp.ErrorMessage = FormControlErrorMessage;
+FormControlTemp.HelperText = FormControlHelperText; // To add typings
+
+const FormControl = FormControlTemp;
+export { FormControl };
+export { FormControlContext, useFormControl, useFormControlProvider, useFormControlContext } from './useFormControl';
+//# sourceMappingURL=index.js.map

package/lib/module/components/composites/FormControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["default","FormControlBase","FormControlLabel","FormControlErrorMessage","FormControlHelperText","FormControlTemp","Label","ErrorMessage","HelperText","FormControl","FormControlContext","useFormControl","useFormControlProvider","useFormControlContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,eAA3C;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,oBAA5C;AACA,SAASF,OAAO,IAAIG,uBAApB,QAAmD,2BAAnD;AACA,SAASH,OAAO,IAAII,qBAApB,QAAiD,yBAAjD;AAGA,IAAIC,eAAoB,GAAGJ,eAA3B;AACAI,eAAe,CAACC,KAAhB,GAAwBJ,gBAAxB;AACAG,eAAe,CAACE,YAAhB,GAA+BJ,uBAA/B;AACAE,eAAe,CAACG,UAAhB,GAA6BJ,qBAA7B,C,CAEA;;AACA,MAAMK,WAAW,GAAGJ,eAApB;AAEA,SAASI,WAAT;AACA,SACEC,kBADF,EAEEC,cAFF,EAGEC,sBAHF,EAIEC,qBAJF,QAKO,kBALP","sourcesContent":["import { default as FormControlBase } from './FormControl';\r\nimport { default as FormControlLabel } from './FormControlLabel';\r\nimport { default as FormControlErrorMessage } from './FormControlErrorMessage';\r\nimport { default as FormControlHelperText } from './FormControlHelperText';\r\nimport type { FormControlComponentType } from './types';\r\n\r\nlet FormControlTemp: any = FormControlBase;\r\nFormControlTemp.Label = FormControlLabel;\r\nFormControlTemp.ErrorMessage = FormControlErrorMessage;\r\nFormControlTemp.HelperText = FormControlHelperText;\r\n\r\n// To add typings\r\nconst FormControl = FormControlTemp as FormControlComponentType;\r\n\r\nexport { FormControl };\r\nexport {\r\n  FormControlContext,\r\n  useFormControl,\r\n  useFormControlProvider,\r\n  useFormControlContext,\r\n} from './useFormControl';\r\n\r\nexport type { IFormControlContext } from './useFormControl';\r\n\r\nexport type {\r\n  IFormControlProps,\r\n  IFormControlLabelProps,\r\n  IFormControlErrorMessageProps,\r\n  IFormControlHelperTextProps,\r\n} from './types';\r\n"]}

package/lib/module/components/composites/FormControl/test/FormControl.test.js

@@ -0,0 +1,101 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { FormControl, useFormControl } from '../index';
+import { TextInput } from 'react-native';
+import { render } from '@testing-library/react-native';
+import { Wrapper } from '../../../../utils/test-utils';
+const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const inputProps = useFormControl(props);
+  return (
+    /*#__PURE__*/
+    //@ts-ignore
+    React.createElement(TextInput, _extends({
+      ref: ref
+    }, inputProps))
+  );
+});
+it('a11y test in when required', async () => {
+  let {
+    getByPlaceholderText
+  } = render( /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormControl, {
+    nativeID: "name",
+    isRequired: true
+  }, /*#__PURE__*/React.createElement(FormControl.Label, null, "Name"), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Name"
+  }), /*#__PURE__*/React.createElement(FormControl.HelperText, null, "Enter your name please!"), /*#__PURE__*/React.createElement(FormControl.ErrorMessage, null, "Your name is invalid"))));
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityRequired).toBe(true);
+  expect(textInput.props.required).toBe(true);
+});
+it('a11y test in when invalid', async () => {
+  let {
+    getByPlaceholderText
+  } = render( /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormControl, {
+    nativeID: "name",
+    isInvalid: true
+  }, /*#__PURE__*/React.createElement(FormControl.Label, null, "Name"), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Name"
+  }), /*#__PURE__*/React.createElement(FormControl.HelperText, null, "Enter your name please!"), /*#__PURE__*/React.createElement(FormControl.ErrorMessage, null, "Your name is invalid"))));
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityInvalid).toBe(true);
+});
+it('a11y test in when readOnly', async () => {
+  let {
+    getByPlaceholderText
+  } = render( /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormControl, {
+    nativeID: "name",
+    isReadOnly: true
+  }, /*#__PURE__*/React.createElement(FormControl.Label, null, "Name"), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Name"
+  }), /*#__PURE__*/React.createElement(FormControl.HelperText, null, "Enter your name please!"), /*#__PURE__*/React.createElement(FormControl.ErrorMessage, null, "Your name is invalid"))));
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityReadOnly).toBe(true);
+  expect(textInput.props.readOnly).toBe(true);
+});
+it('a11y test in when disabled', async () => {
+  let {
+    getByPlaceholderText
+  } = render( /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormControl, {
+    nativeID: "name",
+    isDisabled: true
+  }, /*#__PURE__*/React.createElement(FormControl.Label, null, "Name"), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Name"
+  }), /*#__PURE__*/React.createElement(FormControl.HelperText, null, "Enter your name please!"), /*#__PURE__*/React.createElement(FormControl.ErrorMessage, null, "Your name is invalid"))));
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.disabled).toBe(true);
+});
+it('a11y test when helper text is present', async () => {
+  let {
+    getByPlaceholderText
+  } = render( /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormControl, {
+    nativeID: "name",
+    isDisabled: true
+  }, /*#__PURE__*/React.createElement(FormControl.Label, null, "Name"), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Name"
+  }), /*#__PURE__*/React.createElement(FormControl.HelperText, null, "Enter your name please!"))));
+  const textInput = getByPlaceholderText('Name');
+  expect(textInput.props.accessibilityDescribedBy).toBe('name-helptext');
+  expect(textInput.props.accessibilityReadOnly).toBeUndefined();
+  expect(textInput.props.accessibilityInvalid).toBeUndefined();
+  expect(textInput.props.accessibilityRequired).toBeUndefined();
+});
+it('sets htmlFor of FormLabel ref to nativeID of Input', async () => {
+  let ref;
+  const inputID = 'name';
+  let {
+    getByPlaceholderText
+  } = render( /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormControl, {
+    nativeID: inputID,
+    isInvalid: true
+  }, /*#__PURE__*/React.createElement(FormControl.Label, {
+    //@ts-ignore
+    ref: _ref => ref = _ref
+  }, "Name"), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Name"
+  }), /*#__PURE__*/React.createElement(FormControl.HelperText, null, "Enter your name please!"), /*#__PURE__*/React.createElement(FormControl.ErrorMessage, null, "Your name is invalid"))));
+  const textInput = getByPlaceholderText('Name'); //@ts-ignore
+
+  expect(textInput.props.nativeID).toBe(ref.htmlFor);
+});
+//# sourceMappingURL=FormControl.test.js.map

package/lib/module/components/composites/FormControl/test/FormControl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormControl.test.tsx"],"names":["React","FormControl","useFormControl","TextInput","render","Wrapper","Input","forwardRef","props","ref","inputProps","it","getByPlaceholderText","textInput","expect","accessibilityRequired","toBe","required","accessibilityInvalid","accessibilityReadOnly","readOnly","disabled","accessibilityDescribedBy","toBeUndefined","inputID","_ref","nativeID","htmlFor"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { FormControl, useFormControl } from '../index';\r\nimport { TextInput } from 'react-native';\r\nimport { render } from '@testing-library/react-native';\r\nimport { Wrapper } from '../../../../utils/test-utils';\r\n\r\nconst Input = React.forwardRef((props: any, ref: any) => {\r\n  const inputProps = useFormControl(props);\r\n  return (\r\n    //@ts-ignore\r\n    <TextInput ref={ref} {...inputProps} />\r\n  );\r\n});\r\n\r\nit('a11y test in when required', async () => {\r\n  let { getByPlaceholderText } = render(\r\n    <Wrapper>\r\n      <FormControl nativeID=\"name\" isRequired>\r\n        <FormControl.Label>Name</FormControl.Label>\r\n        <Input placeholder=\"Name\" />\r\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\r\n        <FormControl.ErrorMessage>\r\n          Your name is invalid\r\n        </FormControl.ErrorMessage>\r\n      </FormControl>\r\n    </Wrapper>\r\n  );\r\n  const textInput = getByPlaceholderText('Name');\r\n  expect(textInput.props.accessibilityRequired).toBe(true);\r\n  expect(textInput.props.required).toBe(true);\r\n});\r\n\r\nit('a11y test in when invalid', async () => {\r\n  let { getByPlaceholderText } = render(\r\n    <Wrapper>\r\n      <FormControl nativeID=\"name\" isInvalid>\r\n        <FormControl.Label>Name</FormControl.Label>\r\n        <Input placeholder=\"Name\" />\r\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\r\n        <FormControl.ErrorMessage>\r\n          Your name is invalid\r\n        </FormControl.ErrorMessage>\r\n      </FormControl>\r\n    </Wrapper>\r\n  );\r\n  const textInput = getByPlaceholderText('Name');\r\n  expect(textInput.props.accessibilityInvalid).toBe(true);\r\n});\r\n\r\nit('a11y test in when readOnly', async () => {\r\n  let { getByPlaceholderText } = render(\r\n    <Wrapper>\r\n      <FormControl nativeID=\"name\" isReadOnly>\r\n        <FormControl.Label>Name</FormControl.Label>\r\n        <Input placeholder=\"Name\" />\r\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\r\n        <FormControl.ErrorMessage>\r\n          Your name is invalid\r\n        </FormControl.ErrorMessage>\r\n      </FormControl>\r\n    </Wrapper>\r\n  );\r\n  const textInput = getByPlaceholderText('Name');\r\n  expect(textInput.props.accessibilityReadOnly).toBe(true);\r\n  expect(textInput.props.readOnly).toBe(true);\r\n});\r\n\r\nit('a11y test in when disabled', async () => {\r\n  let { getByPlaceholderText } = render(\r\n    <Wrapper>\r\n      <FormControl nativeID=\"name\" isDisabled>\r\n        <FormControl.Label>Name</FormControl.Label>\r\n        <Input placeholder=\"Name\" />\r\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\r\n        <FormControl.ErrorMessage>\r\n          Your name is invalid\r\n        </FormControl.ErrorMessage>\r\n      </FormControl>\r\n    </Wrapper>\r\n  );\r\n  const textInput = getByPlaceholderText('Name');\r\n  expect(textInput.props.disabled).toBe(true);\r\n});\r\n\r\nit('a11y test when helper text is present', async () => {\r\n  let { getByPlaceholderText } = render(\r\n    <Wrapper>\r\n      <FormControl nativeID=\"name\" isDisabled>\r\n        <FormControl.Label>Name</FormControl.Label>\r\n        <Input placeholder=\"Name\" />\r\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\r\n      </FormControl>\r\n    </Wrapper>\r\n  );\r\n  const textInput = getByPlaceholderText('Name');\r\n  expect(textInput.props.accessibilityDescribedBy).toBe('name-helptext');\r\n  expect(textInput.props.accessibilityReadOnly).toBeUndefined();\r\n  expect(textInput.props.accessibilityInvalid).toBeUndefined();\r\n  expect(textInput.props.accessibilityRequired).toBeUndefined();\r\n});\r\n\r\nit('sets htmlFor of FormLabel ref to nativeID of Input', async () => {\r\n  let ref: HTMLLabelElement;\r\n  const inputID = 'name';\r\n  let { getByPlaceholderText } = render(\r\n    <Wrapper>\r\n      <FormControl nativeID={inputID} isInvalid>\r\n        <FormControl.Label\r\n          //@ts-ignore\r\n          ref={(_ref) => (ref = _ref)}\r\n        >\r\n          Name\r\n        </FormControl.Label>\r\n        <Input placeholder=\"Name\" />\r\n        <FormControl.HelperText>Enter your name please!</FormControl.HelperText>\r\n        <FormControl.ErrorMessage>\r\n          Your name is invalid\r\n        </FormControl.ErrorMessage>\r\n      </FormControl>\r\n    </Wrapper>\r\n  );\r\n  const textInput = getByPlaceholderText('Name');\r\n  //@ts-ignore\r\n  expect(textInput.props.nativeID).toBe(ref.htmlFor);\r\n});\r\n"]}

package/lib/module/components/composites/FormControl/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/module/components/composites/FormControl/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}