@xqmsg/ui-core 0.21.6 → 0.21.7

package/package.json

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

package/src/components/icons/dropdown/dropdown.svg

@@ -1,3 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z" fill="current"/>
 </svg>

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

@@ -3,11 +3,14 @@ import { ReactComponent as DropdownIcon } from './dropdown.svg';
 
 export interface DropdownProps {
   boxSize: number | string;
+  disabled?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `Dropdown` icon component
  */
-export const Dropdown: React.FC<DropdownProps> = ({ boxSize }) => {
-  return <DropdownIcon boxSize={boxSize} />;
+export const Dropdown: React.FC<DropdownProps> = ({ boxSize, disabled }) => {
+  return (
+    <DropdownIcon boxSize={boxSize} fill={disabled ? '#3C3C4399' : '#0082FF'} />
+  );
 };

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

@@ -330,7 +330,7 @@ const StackedMultiSelect = React.forwardRef<
           _focus={{ boxShadow: 'none !important' }}
         />
         <Flex mr="4px" justifyContent="center" alignItems="center">
-          <DropdownIcon boxSize="16px" />
+          <DropdownIcon boxSize="16px" disabled={disabled} />
         </Flex>
       </Flex>
       {isFocussed && (

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

@@ -288,34 +288,36 @@ const StackedPilledInput = React.forwardRef<
             </Text>
           ) : null}
         </Flex>
-        <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
-          <Input
-            onKeyDown={onHandleKeyDown}
-            type="text"
-            padding={0}
-            alignContent="flex-start"
-            float="right"
-            border="none"
-            height="auto"
-            color={tokenIndex !== null ? 'transparent' : colors.label.primary}
-            _focus={{ boxShadow: 'none !important' }}
-            value={localValue}
-            onChange={e =>
-              tokenIndex === null &&
-              setLocalValue(
-                e.target.value.trim().replace(',', '').length
-                  ? e.target.value
-                  : ''
-              )
-            }
-            ref={inputRef}
-            onFocus={() => setIsFocussed(true)}
-            onBlur={() => {
-              setIsFocussed(false);
-              return setTokenIndex(null);
-            }}
-          />
-        </Flex>
+        {!disabled && (
+          <Flex flex={1} minWidth={isFocussed && !tokenIndex ? '20%' : 0}>
+            <Input
+              onKeyDown={onHandleKeyDown}
+              type="text"
+              padding={0}
+              alignContent="flex-start"
+              float="right"
+              border="none"
+              height="auto"
+              color={tokenIndex !== null ? 'transparent' : colors.label.primary}
+              _focus={{ boxShadow: 'none !important' }}
+              value={localValue}
+              onChange={e =>
+                tokenIndex === null &&
+                setLocalValue(
+                  e.target.value.trim().replace(',', '').length
+                    ? e.target.value
+                    : ''
+                )
+              }
+              ref={inputRef}
+              onFocus={() => setIsFocussed(true)}
+              onBlur={() => {
+                setIsFocussed(false);
+                return setTokenIndex(null);
+              }}
+            />
+          </Flex>
+        )}
       </Flex>
     </Box>
   );

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

@@ -212,7 +212,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             cursor={disabled ? 'not-allowed' : 'pointer'}
             onClick={() => !disabled && setIsFocussed(!isFocussed)}
           >
-            <DropdownIcon boxSize="16px" />
+            <DropdownIcon boxSize="16px" disabled={disabled} />
           </InputRightElement>
         </InputGroup>
         {isFocussed && (