@xqmsg/ui-core 0.23.3 → 0.24.1

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/theme/components/button.d.ts

@@ -120,6 +120,34 @@ declare const _default: {
             bgGradient: string;
             shadow: string;
         };
+        danger: {
+            fontWeight: string;
+            color: string;
+            bg: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+            };
+            _focus: {
+                color: string;
+                bg: string;
+            };
+            _disabled: {
+                backgroundColor: string;
+                color: string;
+            };
+            borderRadius: string;
+            fontSize: string;
+            h: string;
+            border: string;
+            px: string;
+            py: string;
+            bgGradient: string;
+            shadow: string;
+        };
         'flat-primary': {
             bg: string;
             bgGradient: null;
@@ -233,6 +261,42 @@ declare const _default: {
             py: string;
             shadow: string;
         };
+        'flat-danger': {
+            fontWeight: string;
+            color: string;
+            bg: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                color: string;
+                bg: string;
+            };
+            _focus: {
+                color: string;
+                bg: string;
+            };
+            _disabled: {
+                backgroundColor: string;
+                color: string;
+            };
+            bgGradient: null;
+            minWidth: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            gap: string;
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textAlign: string;
+            boxShadow: string;
+            h: string;
+            px: string;
+            py: string;
+            shadow: string;
+        };
     };
     defaultProps: {
         variant: string;

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

@@ -1168,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
   }));
@@ -1901,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, {
@@ -2045,7 +2043,7 @@ function Input(_ref) {
       default:
         return null;
     }
-  };
+  }
   var nonLabeledInputs = ['checkbox'];
   return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
@@ -3023,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,
@@ -3052,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,
@@ -3093,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", {
@@ -3105,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
@@ -3783,6 +3775,28 @@ var variantTertiary = function variantTertiary() {
     }
   });
 };
+var variantDanger = function variantDanger() {
+  return _extends$6({}, baseStyle$2, {
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.label.error,
+    _hover: {
+      bg: colors.label.error
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _disabled: {
+      backgroundColor: colors.label.error,
+      color: colors.label.secondary.light
+    }
+  });
+};
 var variantPrimaryFlat = function variantPrimaryFlat() {
   return _extends$6({}, baseStyle$2, {
     bg: colors.fill.action,
@@ -3842,13 +3856,37 @@ var variantTertiaryFlat = function variantTertiaryFlat() {
     }
   });
 };
+var variantDangerFlat = function variantDangerFlat() {
+  return _extends$6({}, variantPrimaryFlat(), {
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.label.error,
+    _hover: {
+      bg: colors.label.error
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error
+    },
+    _disabled: {
+      backgroundColor: colors.label.error,
+      color: colors.label.secondary.light
+    }
+  });
+};
 var variants$2 = {
   primary: /*#__PURE__*/variantPrimary(),
   secondary: /*#__PURE__*/variantSecondary(),
   tertiary: /*#__PURE__*/variantTertiary(),
+  danger: /*#__PURE__*/variantDanger(),
   'flat-primary': /*#__PURE__*/variantPrimaryFlat(),
   'flat-secondary': /*#__PURE__*/variantSecondaryFlat(),
-  'flat-tertiary': /*#__PURE__*/variantTertiaryFlat()
+  'flat-tertiary': /*#__PURE__*/variantTertiaryFlat(),
+  'flat-danger': /*#__PURE__*/variantDangerFlat()
 };
 var defaultProps$2 = {
   variant: 'primary'