@xqmsg/ui-core 0.19.2 → 0.19.4

package/package.json

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

package/src/components/icons/index.tsx

@@ -28,6 +28,7 @@ import { TableFill } from './table/fill';
 import { TableOutline } from './table/outline';
 import { Trash } from './trash';
 import { Warning } from './warning';
+import { Services } from './services';
 
 export {
   Checkmark,
@@ -55,6 +56,7 @@ export {
   Neutral,
   Positive,
   Search,
+  Services,
   Settings,
   TableFill,
   TableOutline,

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as ServicesIcon } from './services.svg';
+
+export interface ServicesProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Services` icon component
+ */
+export const Services: React.FC<ServicesProps> = ({ boxSize }) => {
+  return <ServicesIcon boxSize={boxSize} />;
+};

package/src/components/icons/services/services.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 3.05796C8.5 2.82119 8.62403 2.60718 8.76747 2.4188C8.91473 2.2254 9 1.996 9 1.75C9 1.05964 8.32843 0.5 7.5 0.5C6.67157 0.5 6 1.05964 6 1.75C6 1.996 6.08527 2.2254 6.23253 2.4188C6.37597 2.60718 6.5 2.82119 6.5 3.05796V3.05796C6.5 3.29881 6.30277 3.49331 6.06202 3.48638C5.12626 3.45942 4.20056 3.3923 3.2866 3.28666C3.41084 4.36184 3.48179 5.45325 3.49674 6.55818C3.50004 6.80215 3.30195 6.99997 3.05796 7V7C2.82119 7 2.60718 6.87597 2.4188 6.73253C2.2254 6.58527 1.996 6.5 1.75 6.5C1.05964 6.5 0.5 7.17157 0.5 8C0.5 8.82843 1.05964 9.5 1.75 9.5C1.996 9.5 2.2254 9.41473 2.4188 9.26747C2.60718 9.12403 2.82119 9 3.05796 9V9C3.26409 9 3.42771 9.17385 3.4126 9.37942C3.32871 10.5208 3.18495 11.6455 2.98445 12.7504C3.99638 12.8771 5.02301 12.9566 6.06204 12.9865C6.30283 12.9934 6.50008 12.7989 6.50008 12.558V12.558C6.50008 12.3212 6.37604 12.1072 6.23261 11.9188C6.08535 11.7254 6.00008 11.496 6.00008 11.25C6.00008 10.5597 6.67165 10 7.50008 10C8.3285 10 9.00008 10.5597 9.00008 11.25C9.00008 11.496 8.9148 11.7254 8.76755 11.9188C8.62411 12.1072 8.50008 12.3212 8.50008 12.558V12.558C8.50008 12.7799 8.68543 12.9571 8.90697 12.9441C10.1328 12.8721 11.3401 12.731 12.5251 12.5248C12.7047 11.4926 12.8349 10.4435 12.9131 9.37989C12.9282 9.17408 12.7644 9.00003 12.558 9.00003V9.00003C12.3213 9.00003 12.1073 9.12406 11.9189 9.2675C11.7255 9.41476 11.4961 9.50003 11.2501 9.50003C10.5597 9.50003 10.0001 8.82846 10.0001 8.00003C10.0001 7.1716 10.5597 6.50003 11.2501 6.50003C11.4961 6.50003 11.7255 6.5853 11.9189 6.73256C12.1073 6.876 12.3213 7.00003 12.558 7.00003V7.00003C12.8023 7.00003 13.0006 6.80203 12.9972 6.55783C12.9809 5.34942 12.8975 4.15715 12.7508 2.98465C11.4935 3.21277 10.2107 3.36743 8.90685 3.44404C8.68533 3.45705 8.5 3.27986 8.5 3.05796V3.05796Z" stroke="#0082FF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -11,13 +11,13 @@ import { StackedInputProps } from '../StackedInput/StackedInput';
 import colors from '../../../theme/foundations/colors';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import { Dropdown } from '../components/dropdown';
-import useDidMountEffect from '../../../hooks/useDidMountEffect';
 import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 import { Dropdown as DropdownIcon } from '../../icons/dropdown';
 import { debounce } from 'lodash';
 
 export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
+  fullOptions?: FieldOptions;
   setValue: UseFormSetValue<FieldValues>;
   control: Control<FieldValues, any>;
   handleOnChange: (value?: string) => void;
@@ -36,6 +36,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       handleOnChange,
       disabled,
       value,
+      fullOptions,
       ...props
     },
     _ref
@@ -64,11 +65,12 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       }
     }, [boundingClientRect]);
 
-    useDidMountEffect(() => {
+    useEffect(() => {
       setSelectedOption(
-        options.find(option => option.value === value)?.label ?? ''
+        (fullOptions || options).find(option => option.value === value)
+          ?.label ?? ''
       );
-    }, [value]);
+    }, [fullOptions, value]);
 
     useOnClickOutside(dropdownRef, () => setIsFocussed(false));
 

package/src/components/input/index.tsx

@@ -35,6 +35,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   label?: string;
   className?: string;
   options?: FieldOptions;
+  fullOptions?: FieldOptions;
   maxLength?: number;
   helperText?: React.ReactNode;
   control: Control<T, any>;
@@ -67,6 +68,7 @@ export function Input<T extends FieldValues>({
   isRequired,
   maxLength,
   defaultValue,
+  fullOptions,
   control,
   disabled,
   rightElement,
@@ -136,6 +138,7 @@ export function Input<T extends FieldValues>({
             value={value}
             defaultValue={defaultValue}
             placeholder={placeholder}
+            fullOptions={fullOptions}
           />
         );
       case 'textarea':

package/src/components/navigation/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { Box } from '@chakra-ui/react';
 import { NavigationMenuHeader } from './components/header';
 import { NavigationMenuItem } from './components/items';
@@ -20,7 +20,7 @@ export type GroupedMenuItem = {
 
 export interface NavigationMenuProps {
   groupedMenuItems: GroupedMenuItem[];
-  defaultSelectedMenuItem?: string;
+  selectedMenuItem?: string;
 }
 
 /**
@@ -28,16 +28,18 @@ export interface NavigationMenuProps {
  */
 export const NavigationMenu: React.FC<NavigationMenuProps> = ({
   groupedMenuItems,
-  defaultSelectedMenuItem = '',
+  selectedMenuItem,
 }) => {
   const sortedGroupedMenuItems = useMemo(
     () => groupedMenuItems?.sort((a, b) => a.groupSortValue - b.groupSortValue),
     [groupedMenuItems]
   );
 
-  const [selectedMenuItem, setSelectedMenuItem] = useState<string>(
-    defaultSelectedMenuItem
-  );
+  const [_selectedMenuItem, setSelectedMenuItem] = useState<string>('');
+
+  useEffect(() => {
+    if (selectedMenuItem) setSelectedMenuItem(selectedMenuItem);
+  }, [selectedMenuItem]);
 
   return (
     <Box
@@ -57,7 +59,7 @@ export const NavigationMenu: React.FC<NavigationMenuProps> = ({
             <NavigationMenuItem
               {...item}
               key={idx}
-              isSelected={selectedMenuItem === item.label}
+              isSelected={_selectedMenuItem === item.label}
               onClick={() => setSelectedMenuItem(item.label)}
             />
           ))}