@xqmsg/ui-core 0.16.7 → 0.16.8

package/package.json

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

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

@@ -99,7 +99,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
 
   return (
     <Form formHandler={formHandler}>
-      {/* <Input
+      <Input
         {...args}
         inputType="multi-select"
         setValue={form.setValue}
@@ -142,57 +142,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop6"
         inputType="switch"
         setValue={form.setValue}
-      /> */}
-      <Flex
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Grid templateColumns="repeat(8, 1fr)">
-          <GridItem colSpan={1} pr="10px">
-            <Input
-              label="Long example label"
-              inputType="text"
-              isRequired
-              name={`actions`}
-              ariaLabel="{actionInput.ariaLabel}"
-              control={form.control}
-              setValue={form.setValue}
-              defaultValue="{actionInput.defaultValue}"
-              setError={form.setError}
-              clearErrors={form.clearErrors}
-            />
-          </GridItem>
-          <GridItem colSpan={1} pr="10px">
-            <Input
-              label="hi"
-              inputType="text"
-              isRequired
-              setValue={form.setValue}
-              name={`actions.`}
-              ariaLabel="{adminInput.ariaLabel}"
-              control={form.control}
-              defaultValue="{adminInput.defaultValue}"
-              setError={form.setError}
-              clearErrors={form.clearErrors}
-            />
-          </GridItem>
-          <GridItem colSpan={6} pr="10px">
-            <Input
-              inputType="text"
-              isRequired
-              setValue={form.setValue}
-              name={`action`}
-              ariaLabel="{messageInput.ariaLabel}"
-              control={form.control}
-              defaultValue="{messageInput.defaultValue}"
-              setError={form.setError}
-              clearErrors={form.clearErrors}
-              maxLength={140}
-            />
-          </GridItem>
-        </Grid>
-      </Flex>
+      />
     </Form>
   );
 };
@@ -201,9 +151,6 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'Input Label',
   inputType: 'text',
-  helperText:
-    '         M1 4.33325H15.1667M11 7.66659H16M11 10.9999H16M8.08333 7.66659H8.5M8.08333 10.9999H8.5',
-
   options: [
     { value: 'section_header', label: 'Section 1', sortValue: 0 },
     {

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

@@ -58,8 +58,6 @@ const StackedMultiSelect = React.forwardRef<
   const [searchValue, setSearchValue] = useState('');
   const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
 
-  console.log({ searchValue, debouncedSearchValue });
-
   const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
   useEffect(() => {
@@ -74,12 +72,12 @@ const StackedMultiSelect = React.forwardRef<
 
   // gets latest watched form value (common delimited) from RHF state and creates a list
   useEffect(() => {
-    if (watchedValue !== undefined && !watchedValue.length) {
+    if (watchedValue !== undefined && !watchedValue.length && !isInit) {
       setLocalValues([]);
       setIsInit(true);
     }
 
-    if (watchedValue !== undefined && watchedValue?.length) {
+    if (watchedValue !== undefined && watchedValue?.length && !isInit) {
       if (shouldSideScroll) {
         (scrollRef.current as HTMLDivElement).scrollTo({
           left: scrollRef.current?.scrollWidth,

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

@@ -64,11 +64,10 @@ const StackedPilledInput = React.forwardRef<
 
   const onHandleKeyDown = (e: React.KeyboardEvent) => {
     if (
-      (e.key === ' ' ||
-        e.key === 'Enter' ||
-        e.key === ',' ||
-        e.key === 'Tab') &&
-      localValue.length
+      e.key === ' ' ||
+      e.key === 'Enter' ||
+      e.key === ',' ||
+      e.key === 'Tab'
     ) {
       if (
         e.key === 'Enter' &&
@@ -221,7 +220,13 @@ const StackedPilledInput = React.forwardRef<
     setIsFocussed(false);
   };
 
-  useOutsideClick({ ref: inputWrapperRef, handler: onBlur });
+  useOutsideClick({
+    ref: inputWrapperRef,
+    handler: () => {
+      onBlur();
+      console.log('hi');
+    },
+  });
 
   return (
     <Box position="relative">
@@ -234,6 +239,10 @@ const StackedPilledInput = React.forwardRef<
         alignItems="center"
         justifyContent="space-between"
         onClick={() => {
+          if (isFocussed && tokenIndex !== null) {
+            setTokenIndex(null);
+          }
+
           if (!disabled) {
             inputRef.current?.focus();
           }
@@ -270,7 +279,7 @@ const StackedPilledInput = React.forwardRef<
                       : 'none'
                   }
                   borderRadius="full"
-                  onClick={() => isFocussed && setTokenIndex(index)}
+                  onClick={() => setTokenIndex(index)}
                   width="100%"
                   id={`${name}_token_${index}`}
                 >
@@ -313,7 +322,10 @@ const StackedPilledInput = React.forwardRef<
             }
             ref={inputRef}
             onFocus={() => setIsFocussed(true)}
-            onBlur={() => setIsFocussed(false)}
+            onBlur={() => {
+              setIsFocussed(false);
+              return setTokenIndex(null);
+            }}
           />
         </Flex>
       </Flex>