@xqmsg/ui-core 0.14.3 → 0.14.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.3",
+  "version": "0.14.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/Input.stories.tsx

@@ -144,6 +144,12 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         inputType="switch"
         setValue={form.setValue}
       />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="checkbox"
+        setValue={form.setValue}
+      />
     </Form>
   );
 };

package/src/components/input/StackedCheckbox/StackedCheckbox.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Checkbox } from '@chakra-ui/react';
+import { SelectFieldProps } from '../InputTypes';
+
+export interface StackedCheckboxProps extends SelectFieldProps {
+  label: string;
+}
+
+/**
+ * A functional React component utilized to render the `StackedCheckbox` component.
+ */
+const StackedCheckbox = React.forwardRef<
+  HTMLInputElement,
+  StackedCheckboxProps
+>(({ value, label, defaultValue }, _ref) => {
+  return (
+    <Checkbox
+      ref={_ref}
+      value={String(value)}
+      defaultChecked={Boolean(defaultValue)}
+    >
+      {label}
+    </Checkbox>
+  );
+});
+
+export default StackedCheckbox;

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -70,6 +70,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             fontSize="13px"
             textShadow={`0 0 0 ${colors.label.primary.light}`}
             value={selectedOption}
+            autoComplete="off"
           />
           <InputRightElement
             cursor="pointer"

package/src/components/input/StackedSwitch/index.tsx

@@ -8,6 +8,8 @@ export interface StackedSwitchProps extends SwitchProps {}
  */
 const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
   ({ isRequired, onChange, value }, _ref) => {
+    if (value === null) return null;
+
     return (
       <Switch
         size="lg"

package/src/components/input/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import StackedCheckBoxGroup from './StackedCheckbox/StackedCheckboxGroup';
+import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
 import StackedInput from './StackedInput/StackedInput';
 import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
 import StackedSelect from './StackedSelect/StackedSelect';
@@ -147,17 +147,18 @@ export function Input<T extends FieldValues>({
         );
       case 'checkbox':
         return (
-          <StackedCheckBoxGroup
+          <StackedCheckBox
             className={`input-${inputType} ${className ?? ''}`}
             name={name}
             id={name}
             isInvalid={isInvalid}
-            options={options as FieldOptions}
             onChange={onChange}
             onBlur={onBlur}
             ref={ref}
             disabled={disabled}
             value={value}
+            defaultValue={defaultValue}
+            label={label as string}
           />
         );
       case 'multi-select':
@@ -212,6 +213,7 @@ export function Input<T extends FieldValues>({
             onBlur={onBlur}
             ref={ref}
             value={value}
+            defaultValue={defaultValue}
           />
         );
       default:

package/src/components/table/index.tsx

@@ -44,15 +44,10 @@ export function Table<T extends ReadonlyTableColumns>({
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (
-    <TableContainer
-      border="none"
-      overflowX="auto"
-      bg="white"
-      width="fit-content"
-    >
+    <TableContainer border="none" overflowX="auto" bg="white" width="100%">
       <ChakraTable
         variant="unstyled"
-        width="fit-content"
+        width="100%"
         style={{
           borderCollapse: 'separate',
           borderSpacing: '0px',

package/src/theme/provider/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/provider';
 import customXQChakraTheme from '../customXQChakraTheme';
 
 /**

package/dist/components/input/StackedCheckbox/StackedCheckboxGroup.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
-export interface StackedCheckboxGroupProps extends SelectFieldProps {
-    options: FieldOptions;
-}
-/**
- * A functional React component utilized to render the `StackedCheckbox` component.
- */
-declare const StackedCheckboxGroup: React.ForwardRefExoticComponent<StackedCheckboxGroupProps & React.RefAttributes<HTMLInputElement>>;
-export default StackedCheckboxGroup;

package/src/components/input/StackedCheckbox/StackedCheckboxGroup.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Flex, InputGroup, Checkbox } from '@chakra-ui/react';
-import { FieldOptions, SelectFieldProps } from '../InputTypes';
-
-export interface StackedCheckboxGroupProps extends SelectFieldProps {
-  options: FieldOptions;
-}
-
-/**
- * A functional React component utilized to render the `StackedCheckbox` component.
- */
-const StackedCheckboxGroup = React.forwardRef<
-  HTMLInputElement,
-  StackedCheckboxGroupProps
->(({ options }, _ref) => {
-  return (
-    <InputGroup>
-      {options.map(option => (
-        <Flex mr="30px" alignItems="center" key={option.value}>
-          <Checkbox ref={_ref} value={option.value}>
-            {option.label}
-          </Checkbox>
-        </Flex>
-      ))}
-    </InputGroup>
-  );
-});
-
-export default StackedCheckboxGroup;