@xqmsg/ui-core 0.23.2 → 0.24.0

package/dist/components/input/InputTypes.d.ts

@@ -19,7 +19,7 @@ export interface ValidationProps {
     isInvalid?: boolean;
     errorText?: string;
 }
-export interface InputFieldProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'color' | 'height' | 'width' | 'size' | 'ref'>, FieldProps, Partial<InputProps> {
+export interface InputFieldProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'color' | 'height' | 'width' | 'size' | 'ref' | 'onChange' | 'defaultValue'>, FieldProps, Partial<InputProps> {
 }
 export interface TextareaFieldProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'color' | 'height' | 'width' | 'size' | 'ref'>, FieldProps, Partial<TextareaProps> {
 }

package/dist/components/input/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { FieldOptions, ValidationProps, InputType } from './InputTypes';
 import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
-export interface InputProps<T extends FieldValues> extends ValidationProps {
+export interface InputProps<T extends FieldValues = FieldValues> extends ValidationProps {
     inputType: InputType;
     name: string;
     ariaLabel: string;
@@ -14,7 +14,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
     maxLength?: number;
     helperText?: React.ReactNode;
     control: Control<T, any>;
-    onChange?: (value?: string) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     tooltipText?: string;
     setValue: UseFormSetValue<T>;

package/dist/components/select/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Control, FieldValues, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
+import { SelectProps } from '@chakra-ui/react';
+import { Control, FieldValues, Path, UseFormClearErrors, UseFormSetError, UseFormSetValue } from 'react-hook-form';
 import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
-export interface SelectNativeProps<T extends FieldValues> extends ValidationProps {
+export interface SelectNativeProps<T extends FieldValues> extends ValidationProps, SelectProps {
     isRequired: boolean;
-    name: string;
+    name: Path<T>;
     ariaLabel: string;
     placeholder?: string;
     defaultValue?: string;
@@ -13,7 +14,7 @@ export interface SelectNativeProps<T extends FieldValues> extends ValidationProp
     fullOptions?: FieldOptions;
     helperText?: React.ReactNode;
     control: Control<T, unknown>;
-    onChange?: (value?: string) => void;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     disabled?: boolean;
     tooltipText?: string;
     setValue: UseFormSetValue<T>;
@@ -24,4 +25,4 @@ export interface SelectNativeProps<T extends FieldValues> extends ValidationProp
 /**
  * A functional React component utilized to render the `SelectNative` component.
  */
-export declare const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>>;
+export declare function SelectNative<T extends FieldValues = FieldValues>({ label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, defaultValue, fullOptions, control, disabled, onChange, setValue, setError, clearErrors, ...props }: SelectNativeProps<T>): React.ReactElement;

package/dist/components/text/index.d.ts

@@ -1,8 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 import textTheme from '../../theme/components/text';
-export interface TextProps extends PropsWithChildren {
+export declare type TextProps = PropsWithChildren & {
     variant: keyof typeof textTheme.variants;
-}
+};
 /**
  * A functional React component utilized to render the `Text` component. The component is mainly
  * controlled by by the `variant` prop which determines `fontSize`, `fontWeight`, etc.

package/dist/ui-core.cjs.development.js

@@ -231,8 +231,9 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React__default.createElement(react.Box, {
     pr: "8px"
   }, Icon), /*#__PURE__*/React__default.createElement(react.Box, {
+    flexGrow: "1",
     pt: type === 'condensed' ? 0 : '8px'
-  }, " ", message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
+  }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
     ml: type === 'condensed' ? 'auto' : '',
     pt: type === 'condensed' ? 0 : '8px',
     justifyContent: type === 'condensed' ? 'flex-end' : 'flex-end'
@@ -1167,9 +1168,7 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
     position: position,
     dropdownRef: dropdownMenuRef,
-    onSelectItem: function onSelectItem(option) {
-      return handleOnSelectItem(option);
-    },
+    onSelectItem: handleOnSelectItem,
     options: options,
     optionIndex: optionIndex
   }));
@@ -1900,7 +1899,7 @@ function Input(_ref) {
     setError = _ref.setError,
     clearErrors = _ref.clearErrors,
     separators = _ref.separators;
-  var selectedInputField = function selectedInputField(onChange, onBlur, ref, value) {
+  function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
         return /*#__PURE__*/React__default.createElement(StackedInput, {
@@ -2044,7 +2043,7 @@ function Input(_ref) {
       default:
         return null;
     }
-  };
+  }
   var nonLabeledInputs = ['checkbox'];
   return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
@@ -3022,7 +3021,7 @@ var _excluded$4 = ["label", "ariaLabel", "className", "placeholder", "name", "he
 /**
  * A functional React component utilized to render the `SelectNative` component.
  */
-var SelectNative = function SelectNative(_ref) {
+function SelectNative(_ref) {
   var name = _ref.name,
     helperText = _ref.helperText,
     options = _ref.options,
@@ -3051,26 +3050,21 @@ var SelectNative = function SelectNative(_ref) {
     borderLeft: 'none',
     borderRight: 'none'
   };
-  var handleOnSelectItem = function handleOnSelectItem(selectedValue) {
+  var handleOnSelectItem = function handleOnSelectItem(e) {
+    var selectedValue = e.target.value;
     var selectedOption = options == null ? void 0 : options.find(function (_ref2) {
       var val = _ref2.value;
       return selectedValue === val;
     });
     if (selectedOption) {
       if (onChange) {
-        onChange(selectedOption.value);
+        onChange(e);
       }
       setValue(name, selectedOption.value);
     } else {
       setValue(name, selectedValue);
     }
   };
-  React.useEffect(function () {
-    if (defaultValue) {
-      handleOnSelectItem(defaultValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
   return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
@@ -3092,9 +3086,8 @@ var SelectNative = function SelectNative(_ref) {
         ref: ref,
         value: value,
         disabled: disabled != null ? disabled : false,
-        onChange: function onChange(e) {
-          return handleOnSelectItem(e.target.value);
-        },
+        onChange: handleOnSelectItem,
+        defaultValue: defaultValue,
         style: style
       }), options && options.map(function (i) {
         return /*#__PURE__*/React__default.createElement("option", {
@@ -3104,7 +3097,7 @@ var SelectNative = function SelectNative(_ref) {
       })), isInvalid ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
     }
   });
-};
+}
 
 /**
  * A functional React component utilized to render the `BorderedBox` component