@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/input/index.tsx

@@ -1,298 +1,299 @@
-import React from 'react';
-import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
-import StackedInput from './StackedInput/StackedInput';
-import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
-import StackedSelect from './StackedSelect';
-import StackedTextarea from './StackedTextarea/StackedTextarea';
-import { FieldOptions, ValidationProps, InputType } from './InputTypes';
-import {
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-} from '@chakra-ui/react';
-import {
-  Control,
-  Controller,
-  FieldValues,
-  Path,
-  PathValue,
-  RefCallBack,
-  UseFormClearErrors,
-  UseFormSetError,
-  UseFormSetValue,
-} from 'react-hook-form';
-import StackedMultiSelect from './StackedMultiSelect';
-import StackedPilledInput from './StackedPilledInput';
-import StackedSwitch from './StackedSwitch';
-import { Label } from './components/label';
-
-export interface InputProps<T extends FieldValues> extends ValidationProps {
-  inputType: InputType;
-  name: string;
-  ariaLabel: string;
-  placeholder?: string;
-  defaultValue?: string;
-  label?: string;
-  className?: string;
-  options?: FieldOptions;
-  fullOptions?: FieldOptions;
-  maxLength?: number;
-  helperText?: React.ReactNode;
-  control: Control<T, any>;
-  onChange?: (value?: string) => void;
-  disabled?: boolean;
-  tooltipText?: string;
-  setValue: UseFormSetValue<T>;
-  setError: UseFormSetError<T>;
-  clearErrors: UseFormClearErrors<T>;
-  leftElement?: React.ReactNode;
-  allowDefault?: boolean;
-  rightElement?: React.ReactNode;
-  variant?: string;
-  separators?: string[];
-}
-
-/**
- * A functional React component utilized to render the `Input` component. Utilizes a switch statement
- * to render the correct input based on the `inputType`.
- */
-export function Input<T extends FieldValues>({
-  inputType,
-  label,
-  ariaLabel,
-  className,
-  placeholder,
-  name,
-  helperText,
-  options,
-  tooltipText,
-  isInvalid,
-  errorText,
-  isRequired,
-  maxLength,
-  defaultValue,
-  fullOptions,
-  control,
-  disabled,
-  rightElement,
-  leftElement,
-  allowDefault,
-  variant = 'default',
-  onChange,
-  setValue,
-  setError,
-  clearErrors,
-  separators,
-}: InputProps<T>) {
-  const selectedInputField = (
-    onChange: () => void,
-    onBlur: () => void,
-    ref: RefCallBack,
-    value: string
-  ) => {
-    switch (inputType) {
-      case 'text':
-        return (
-          <StackedInput
-            className={`input-${inputType} ${className ?? ''}`}
-            aria-label={ariaLabel}
-            name={name}
-            id={name}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            isRequired={isRequired}
-            isInvalid={isInvalid}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            rightElement={rightElement}
-            leftElement={leftElement}
-            disabled={disabled}
-            defaultValue={defaultValue}
-            value={value}
-            allowDefault={allowDefault}
-            variant={variant}
-            label={label as string}
-          />
-        );
-      case 'radio':
-        return (
-          <StackedRadioGroup
-            className={`input-${inputType} ${className ?? ''}`}
-            name={name}
-            id={name}
-            isInvalid={isInvalid}
-            options={options as FieldOptions}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            disabled={disabled}
-            value={value}
-          />
-        );
-      case 'select':
-        return (
-          <StackedSelect
-            className={`input-${inputType} ${className ?? ''}`}
-            name={name}
-            id={name}
-            isRequired={isRequired}
-            isInvalid={isInvalid}
-            options={options as FieldOptions}
-            handleOnChange={onChange}
-            onBlur={onBlur}
-            setValue={setValue as UseFormSetValue<FieldValues>}
-            control={control as Control<FieldValues, any>}
-            ref={ref}
-            disabled={disabled}
-            value={value}
-            defaultValue={defaultValue}
-            placeholder={placeholder}
-            fullOptions={fullOptions}
-          />
-        );
-      case 'textarea':
-        return (
-          <StackedTextarea
-            className={`input-${inputType} ${className ?? ''}`}
-            aria-label={ariaLabel}
-            name={name}
-            id={name}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            isRequired={isRequired}
-            isInvalid={isInvalid}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            disabled={disabled}
-            value={value}
-            variant={variant}
-            label={label as string}
-          />
-        );
-      case 'checkbox':
-        return (
-          <StackedCheckBox
-            className={`input-${inputType} ${className ?? ''}`}
-            name={name}
-            id={name}
-            isInvalid={isInvalid}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            value={value}
-            defaultValue={defaultValue}
-            label={label as string}
-            disabled={disabled}
-            variant={variant}
-          />
-        );
-      case 'multi-select':
-        return (
-          <StackedMultiSelect
-            className={`input-${inputType} ${className ?? ''}`}
-            name={name}
-            id={name}
-            isInvalid={isInvalid}
-            options={options as FieldOptions}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            disabled={disabled}
-            value={value}
-            setValue={setValue as UseFormSetValue<FieldValues>}
-            control={control as Control<FieldValues, any>}
-            setError={setError as UseFormSetError<FieldValues>}
-            clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
-            placeholder={placeholder}
-          />
-        );
-      case 'pilled-text':
-        return (
-          <StackedPilledInput
-            className={`input-${inputType} ${className ?? ''}`}
-            aria-label={ariaLabel}
-            name={name}
-            id={name}
-            isInvalid={isInvalid}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            disabled={disabled}
-            value={value}
-            placeholder={placeholder}
-            setValue={setValue as UseFormSetValue<FieldValues>}
-            setError={setError as UseFormSetError<FieldValues>}
-            clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
-            control={control as Control<FieldValues, any>}
-            maxLength={maxLength}
-            variant={variant}
-            label={label}
-            separators={separators}
-          />
-        );
-      case 'switch':
-        return (
-          <StackedSwitch
-            className={`input-${inputType} ${className ?? ''}`}
-            name={name}
-            id={name}
-            isInvalid={isInvalid}
-            onChange={onChange}
-            onBlur={onBlur}
-            ref={ref}
-            value={value}
-            defaultValue={defaultValue}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-  const nonLabeledInputs = ['checkbox'];
-
-  return (
-    <Controller
-      control={control}
-      name={name as Path<T>}
-      defaultValue={defaultValue as PathValue<T, Path<T>>}
-      rules={{ required: isRequired }}
-      /** @ts-ignore: issues with implicit */
-      render={({ field: { onBlur, onChange: fieldOnChange, ref, value } }) => (
-        <FormControl
-          id={name}
-          isInvalid={isInvalid}
-          position="relative"
-          py={
-            (!nonLabeledInputs.includes(inputType) &&
-              variant !== 'mobile' &&
-              label) ||
-            helperText ||
-            isInvalid
-              ? 5
-              : 0
-          }
-        >
-          {label &&
-            !nonLabeledInputs.includes(inputType) &&
-            variant !== 'mobile' && (
-              <Label
-                tooltipText={tooltipText}
-                label={label}
-                isRequired={isRequired}
-              />
-            )}
-          {selectedInputField(
-            onChange ? onChange : fieldOnChange,
-            onBlur,
-            ref,
-            value
-          )}
-          {isInvalid && <FormErrorMessage>{errorText}</FormErrorMessage>}
-          {helperText && <FormHelperText>{helperText}</FormHelperText>}
-        </FormControl>
-      )}
-    />
-  );
-}
+import React, { ChangeEvent } from 'react';
+import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
+import StackedInput from './StackedInput/StackedInput';
+import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
+import StackedSelect from './StackedSelect';
+import StackedTextarea from './StackedTextarea/StackedTextarea';
+import { FieldOptions, ValidationProps, InputType } from './InputTypes';
+import {
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+} from '@chakra-ui/react';
+import {
+  Control,
+  Controller,
+  FieldValues,
+  Path,
+  PathValue,
+  RefCallBack,
+  UseFormClearErrors,
+  UseFormSetError,
+  UseFormSetValue,
+} from 'react-hook-form';
+import StackedMultiSelect from './StackedMultiSelect';
+import StackedPilledInput from './StackedPilledInput';
+import StackedSwitch from './StackedSwitch';
+import { Label } from './components/label';
+
+export interface InputProps<T extends FieldValues = FieldValues>
+  extends ValidationProps {
+  inputType: InputType;
+  name: string;
+  ariaLabel: string;
+  placeholder?: string;
+  defaultValue?: string;
+  label?: string;
+  className?: string;
+  options?: FieldOptions;
+  fullOptions?: FieldOptions;
+  maxLength?: number;
+  helperText?: React.ReactNode;
+  control: Control<T, any>;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  tooltipText?: string;
+  setValue: UseFormSetValue<T>;
+  setError: UseFormSetError<T>;
+  clearErrors: UseFormClearErrors<T>;
+  leftElement?: React.ReactNode;
+  allowDefault?: boolean;
+  rightElement?: React.ReactNode;
+  variant?: string;
+  separators?: string[];
+}
+
+/**
+ * A functional React component utilized to render the `Input` component. Utilizes a switch statement
+ * to render the correct input based on the `inputType`.
+ */
+export function Input<T extends FieldValues>({
+  inputType,
+  label,
+  ariaLabel,
+  className,
+  placeholder,
+  name,
+  helperText,
+  options,
+  tooltipText,
+  isInvalid,
+  errorText,
+  isRequired,
+  maxLength,
+  defaultValue,
+  fullOptions,
+  control,
+  disabled,
+  rightElement,
+  leftElement,
+  allowDefault,
+  variant = 'default',
+  onChange,
+  setValue,
+  setError,
+  clearErrors,
+  separators,
+}: InputProps<T>) {
+  function selectedInputField<T extends Element = Element>(
+    onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
+    onBlur: () => void,
+    ref: RefCallBack,
+    value: string
+  ) {
+    switch (inputType) {
+      case 'text':
+        return (
+          <StackedInput
+            className={`input-${inputType} ${className ?? ''}`}
+            aria-label={ariaLabel}
+            name={name}
+            id={name}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            isRequired={isRequired}
+            isInvalid={isInvalid}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            rightElement={rightElement}
+            leftElement={leftElement}
+            disabled={disabled}
+            defaultValue={defaultValue}
+            value={value}
+            allowDefault={allowDefault}
+            variant={variant}
+            label={label as string}
+          />
+        );
+      case 'radio':
+        return (
+          <StackedRadioGroup
+            className={`input-${inputType} ${className ?? ''}`}
+            name={name}
+            id={name}
+            isInvalid={isInvalid}
+            options={options as FieldOptions}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            disabled={disabled}
+            value={value}
+          />
+        );
+      case 'select':
+        return (
+          <StackedSelect
+            className={`input-${inputType} ${className ?? ''}`}
+            name={name}
+            id={name}
+            isRequired={isRequired}
+            isInvalid={isInvalid}
+            options={options as FieldOptions}
+            handleOnChange={onChange as (v?: string) => void}
+            onBlur={onBlur}
+            setValue={setValue as UseFormSetValue<FieldValues>}
+            control={control as Control<FieldValues, any>}
+            ref={ref}
+            disabled={disabled}
+            value={value}
+            defaultValue={defaultValue}
+            placeholder={placeholder}
+            fullOptions={fullOptions}
+          />
+        );
+      case 'textarea':
+        return (
+          <StackedTextarea
+            className={`input-${inputType} ${className ?? ''}`}
+            aria-label={ariaLabel}
+            name={name}
+            id={name}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            isRequired={isRequired}
+            isInvalid={isInvalid}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            disabled={disabled}
+            value={value}
+            variant={variant}
+            label={label as string}
+          />
+        );
+      case 'checkbox':
+        return (
+          <StackedCheckBox
+            className={`input-${inputType} ${className ?? ''}`}
+            name={name}
+            id={name}
+            isInvalid={isInvalid}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            value={value}
+            defaultValue={defaultValue}
+            label={label as string}
+            disabled={disabled}
+            variant={variant}
+          />
+        );
+      case 'multi-select':
+        return (
+          <StackedMultiSelect
+            className={`input-${inputType} ${className ?? ''}`}
+            name={name}
+            id={name}
+            isInvalid={isInvalid}
+            options={options as FieldOptions}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            disabled={disabled}
+            value={value}
+            setValue={setValue as UseFormSetValue<FieldValues>}
+            control={control as Control<FieldValues, any>}
+            setError={setError as UseFormSetError<FieldValues>}
+            clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
+            placeholder={placeholder}
+          />
+        );
+      case 'pilled-text':
+        return (
+          <StackedPilledInput
+            className={`input-${inputType} ${className ?? ''}`}
+            aria-label={ariaLabel}
+            name={name}
+            id={name}
+            isInvalid={isInvalid}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            disabled={disabled}
+            value={value}
+            placeholder={placeholder}
+            setValue={setValue as UseFormSetValue<FieldValues>}
+            setError={setError as UseFormSetError<FieldValues>}
+            clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
+            control={control as Control<FieldValues, any>}
+            maxLength={maxLength}
+            variant={variant}
+            label={label}
+            separators={separators}
+          />
+        );
+      case 'switch':
+        return (
+          <StackedSwitch
+            className={`input-${inputType} ${className ?? ''}`}
+            name={name}
+            id={name}
+            isInvalid={isInvalid}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            value={value}
+            defaultValue={defaultValue}
+          />
+        );
+      default:
+        return null;
+    }
+  }
+  const nonLabeledInputs = ['checkbox'];
+
+  return (
+    <Controller
+      control={control}
+      name={name as Path<T>}
+      defaultValue={defaultValue as PathValue<T, Path<T>>}
+      rules={{ required: isRequired }}
+      /** @ts-ignore: issues with implicit */
+      render={({ field: { onBlur, onChange: fieldOnChange, ref, value } }) => (
+        <FormControl
+          id={name}
+          isInvalid={isInvalid}
+          position="relative"
+          py={
+            (!nonLabeledInputs.includes(inputType) &&
+              variant !== 'mobile' &&
+              label) ||
+            helperText ||
+            isInvalid
+              ? 5
+              : 0
+          }
+        >
+          {label &&
+            !nonLabeledInputs.includes(inputType) &&
+            variant !== 'mobile' && (
+              <Label
+                tooltipText={tooltipText}
+                label={label}
+                isRequired={isRequired}
+              />
+            )}
+          {selectedInputField(
+            onChange ? onChange : (fieldOnChange as (e: ChangeEvent) => void),
+            onBlur,
+            ref,
+            value
+          )}
+          {isInvalid && <FormErrorMessage>{errorText}</FormErrorMessage>}
+          {helperText && <FormHelperText>{helperText}</FormHelperText>}
+        </FormControl>
+      )}
+    />
+  );
+}

package/src/components/layout/BorderedBox/index.tsx

@@ -1,30 +1,30 @@
-import React, { PropsWithChildren } from 'react';
-import { Box } from '@chakra-ui/react';
-
-export interface BorderBox extends PropsWithChildren {
-  boxShadow: string;
-  borderRadius?: string;
-}
-
-/**
- * A functional React component utilized to render the `BorderedBox` component
- */
-export const BorderedBox: React.FC<BorderBox> = ({
-  children,
-  boxShadow,
-  borderRadius = 'none',
-}) => {
-  return (
-    <Box
-      boxShadow={boxShadow}
-      borderRadius={borderRadius}
-      bg="white"
-      mx="auto"
-      width="100%"
-      height="100%"
-      display="flex"
-    >
-      {children}
-    </Box>
-  );
-};
+import React, { PropsWithChildren } from 'react';
+import { Box } from '@chakra-ui/react';
+
+export interface BorderBox extends PropsWithChildren {
+  boxShadow: string;
+  borderRadius?: string;
+}
+
+/**
+ * A functional React component utilized to render the `BorderedBox` component
+ */
+export const BorderedBox: React.FC<BorderBox> = ({
+  children,
+  boxShadow,
+  borderRadius = 'none',
+}) => {
+  return (
+    <Box
+      boxShadow={boxShadow}
+      borderRadius={borderRadius}
+      bg="white"
+      mx="auto"
+      width="100%"
+      height="100%"
+      display="flex"
+    >
+      {children}
+    </Box>
+  );
+};