@xqmsg/ui-core 0.19.0 → 0.19.2

package/package.json

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

package/src/components/breadcrumbs/index.tsx

@@ -34,6 +34,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
     <Flex flexDir={orientation === 'horizontal' ? 'row' : 'column'}>
       {steps.map((step, idx) => (
         <Flex
+          key={idx}
           alignItems="center"
           pr={orientation === 'horizontal' ? '16px' : 0}
           py="4px"

package/src/components/form/section/index.tsx

@@ -62,6 +62,7 @@ export function FormSection<
           defaultValue,
         }: FormInput) => (
           <Input<U>
+            key={name}
             control={form.control}
             label={label}
             inputType={inputType}

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

@@ -298,8 +298,14 @@ const StackedMultiSelect = React.forwardRef<
           ref={scrollRef}
         >
           {localValues.length ? (
-            localValues.map(option => (
-              <Box mr="4px" width="fit-content" h="16px" borderRadius="full">
+            localValues.map((option, idx) => (
+              <Box
+                key={idx}
+                mr="4px"
+                width="fit-content"
+                h="16px"
+                borderRadius="full"
+              >
                 <Token
                   label={option.label}
                   onDelete={() => handleDelete(option)}

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

@@ -230,7 +230,6 @@ const StackedPilledInput = React.forwardRef<
     ref: inputWrapperRef,
     handler: () => {
       onBlur();
-      console.log('hi');
     },
   });
 
@@ -278,6 +277,7 @@ const StackedPilledInput = React.forwardRef<
           {lastestFormValueToArray.length
             ? lastestFormValueToArray.map((label, index) => (
                 <Box
+                  key={index}
                   mr="4px"
                   border={
                     tokenIndex === index

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

@@ -23,14 +23,14 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
-      <>
+      <Box key={idx} width="100%">
         {option.value === 'section_header' &&
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (
             <Box
               color={colors.label.secondary.light}
               fontSize="13px"
-              width="fit-content"
+              width="100%"
               fontWeight="bold"
               px="8px"
               bg="inherit"
@@ -75,7 +75,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             {option.label}
           </Box>
         )}
-      </>
+      </Box>
     ));
   }, [onSelectItem, optionIndex, options]);
 

package/src/components/navigation/index.tsx

@@ -48,14 +48,15 @@ export const NavigationMenu: React.FC<NavigationMenuProps> = ({
       overflowY="auto"
       width="220px"
     >
-      {sortedGroupedMenuItems?.map(menuItemGroup => (
-        <Box _notLast={{ paddingBottom: '8px' }}>
+      {sortedGroupedMenuItems?.map((menuItemGroup, idx) => (
+        <Box key={idx} _notLast={{ paddingBottom: '8px' }}>
           {menuItemGroup.groupHeader && (
             <NavigationMenuHeader label={menuItemGroup.groupHeader} />
           )}
-          {menuItemGroup.groupMenuItems.map(item => (
+          {menuItemGroup.groupMenuItems.map((item, idx) => (
             <NavigationMenuItem
               {...item}
+              key={idx}
               isSelected={selectedMenuItem === item.label}
               onClick={() => setSelectedMenuItem(item.label)}
             />

package/src/components/table/empty/index.tsx

@@ -37,7 +37,7 @@ export const EmptyTable: React.FC = () => {
     >
       <Tbody>
         {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
-          <Tr>
+          <Tr key={i}>
             <Td height="26px" opacity={getOpacity(i)}></Td>
           </Tr>
         ))}

package/src/components/table/index.tsx

@@ -55,19 +55,19 @@ export function Table<T extends ReadonlyTableColumns>({
           {headers && (
             <Thead>
               <Tr _odd={{ bg: colors.label.primary.dark }}>
-                {columnsAsConst.map(column => (
+                {columnsAsConst.map((column, idx) => (
                   // @ts-ignore
-                  <Th>{headers[column]}</Th>
+                  <Th key={idx}>{headers[column]}</Th>
                 ))}
               </Tr>
             </Thead>
           )}
           <Tbody>
-            {body.map(row => (
-              <Tr>
-                {columnsAsConst.map(column => (
+            {body.map((row, idx) => (
+              <Tr key={idx}>
+                {columnsAsConst.map((column, idx) => (
                   // @ts-ignore
-                  <Td>{row[column]}</Td>
+                  <Td key={idx}>{row[column]}</Td>
                 ))}
               </Tr>
             ))}

package/src/components/tabs/index.tsx

@@ -29,8 +29,8 @@ export const TabsWrapper: React.FC<TabsWrapperProps> = ({
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
       >
-        {navItems.map(navItem => (
-          <Tab>{navItem}</Tab>
+        {navItems.map((navItem, idx) => (
+          <Tab key={idx}>{navItem}</Tab>
         ))}
       </TabList>
       {children}

package/src/components/toolbar/components/breadcrumbs/index.tsx

@@ -45,7 +45,7 @@ export const ToolbarBreadcrumbs: React.FC<ToolbarBreadcrumbsProps> = ({
   return (
     <Flex height="26px">
       {filteredPageList.map((page, i) => (
-        <Flex alignItems="center">
+        <Flex alignItems="center" key={i}>
           <ToolbarBreadcrumbItem
             page={getPageType(i)}
             pageLabel={page.label}

package/src/components/toolbar/components/breadcrumbs/item/index.tsx

@@ -24,7 +24,6 @@ export const ToolbarBreadcrumbItem: React.FC<ToolbarBreadcrumbItemProps> = ({
   const getPageLabel = useMemo(() => {
     if (breakpoint400) {
       if (page === 'current') {
-        console.log('hi');
         return pageLabel;
       }
     }

package/src/components/toolbar/components/dropdown/index.tsx

@@ -26,7 +26,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
-      <>
+      <Box key={idx}>
         {option.value === 'section_header' &&
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (
@@ -74,7 +74,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             {option.label}
           </Flex>
         )}
-      </>
+      </Box>
     ));
   }, [onSelectItem, optionIndex, options, setOptionIndex]);
 

package/src/hooks/useToast.tsx

@@ -1,13 +1,16 @@
 import { ToastPosition, useToast as useChakraToast } from '@chakra-ui/react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Toast, ToastProps } from '../components/toast';
 
-export const useToast = (props: ToastProps & { position: ToastPosition }) => {
+export const useToast = () => {
   const toast = useChakraToast();
 
-  return () =>
-    toast({
-      position: props.position,
-      render: () => <Toast {...props} />,
-    });
+  return useCallback(
+    (props: ToastProps & { position: ToastPosition }) =>
+      toast({
+        position: props.position,
+        render: () => <Toast {...props} />,
+      }),
+    [toast]
+  );
 };