fixed multitoggle behavior to only toggle submenu closed. switched to hard-light for masking ink. fixed to make menu toggle take effect immediately.

4 files changed, 113 insertions, 138 deletions

diff --git a/packages/components/src/components/Group/Group.tsx b/packages/components/src/components/Group/Group.tsx
index 7abe4a1c7..6275a09dd 100644
--- a/packages/components/src/components/Group/Group.tsx
+++ b/packages/components/src/components/Group/Group.tsx
@@ -1,49 +1,33 @@
-import React from 'react'
-import './Group.scss'
-import { Colors, IGlobalProps, getFontSize, isDark , getFormLabelSize } from '../../global';
+import React from 'react';
+import './Group.scss';
+import { Colors, IGlobalProps, getFontSize, isDark, getFormLabelSize } from '../../global';
 
 export interface IGroupProps extends IGlobalProps {
-  children: any
-  rowGap?: number;
-  columnGap?: number;
-  padding?: number | string;
+    children: any;
+    rowGap?: number;
+    columnGap?: number;
+    padding?: number | string;
 }
 
 export const Group = (props: IGroupProps) => {
-  const { 
-    children, 
-    width = '100%',
-    rowGap = 5,
-    columnGap = 5,
-    padding = 0,
-    formLabel,
-    formLabelPlacement,
-    size,
-    style,
-    color,
-    fillWidth
-  } = props
+    const { children, width = '100%', rowGap = 5, columnGap = 5, padding = 0, formLabel, formLabelPlacement, size, style, fillWidth } = props;
 
-  const group: JSX.Element = 
-  (
-    <div
-      className="group-wrapper"
-      style={{ width, padding: padding, ...style }}
-    >
-      <div className={`group-container`}
-        style={{ rowGap, columnGap }}
-      >{children}</div>
-    </div>
-  )
+    const group: JSX.Element = (
+        <div className="group-wrapper" style={{ width, padding: padding, ...style }}>
+            <div className={`group-container`} style={{ rowGap, columnGap }}>
+                {children}
+            </div>
+        </div>
+    );
 
-  return (
-    formLabel ? 
-      <div className={`form-wrapper ${formLabelPlacement}`}
-          style={{ width: fillWidth ? '100%' : undefined}}>
-        <div className={'formLabel'} style={{fontSize: getFormLabelSize(size)}}>{formLabel}</div>
-        {group}
-      </div>
-    :
-      group
-  )
-}
+    return formLabel ? (
+        <div className={`form-wrapper ${formLabelPlacement}`} style={{ width: fillWidth ? '100%' : undefined }}>
+            <div className={'formLabel'} style={{ fontSize: getFormLabelSize(size) }}>
+                {formLabel}
+            </div>
+            {group}
+        </div>
+    ) : (
+        group
+    );
+};
diff --git a/packages/components/src/components/MultiToggle/MultiToggle.stories.tsx b/packages/components/src/components/MultiToggle/MultiToggle.stories.tsx
index e71423d7a..b9ba45f72 100644
--- a/packages/components/src/components/MultiToggle/MultiToggle.stories.tsx
+++ b/packages/components/src/components/MultiToggle/MultiToggle.stories.tsx
@@ -1,69 +1,68 @@
-import { Meta, Story } from '@storybook/react'
-import React from 'react'
-import { IMultiToggleProps, MultiToggle } from './MultiToggle'
-import { FaAlignLeft, FaAlignCenter, FaAlignJustify, FaAlignRight } from 'react-icons/fa'
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { IMultiToggleProps, MultiToggle } from './MultiToggle';
+import { FaAlignLeft, FaAlignCenter, FaAlignJustify, FaAlignRight } from 'react-icons/fa';
 
 export default {
-  title: 'Dash/MultiToggle',
-  component: MultiToggle,
-  argTypes: {},
-} as Meta<typeof MultiToggle>
+    title: 'Dash/MultiToggle',
+    component: MultiToggle,
+    argTypes: {},
+} as Meta<typeof MultiToggle>;
 
-const MultiToggleStory: Story<IMultiToggleProps> = (args) => <MultiToggle {...args} />
-export const MultiToggleOne = MultiToggleStory.bind({})
+const MultiToggleStory: Story<IMultiToggleProps> = args => <MultiToggle {...args} />;
+export const MultiToggleOne = MultiToggleStory.bind({});
 MultiToggleOne.args = {
-  tooltip: "Text alignment",
-  label: "Alignment",
-  defaultSelectedItems: "center",
-  toggleStatus: true,
-  isToggle: false,
-  items: [
-    {
-      icon: <FaAlignLeft/>,
-      tooltip: 'Align left',
-      val: "left"
-    },
-    {
-      icon: <FaAlignCenter/>,
-      tooltip: 'Align center',
-      val: "center"
-    },
-    {
-      icon: <FaAlignRight/>,
-      tooltip: 'Align right',
-      val: "right"
-    },
-    {
-      icon: <FaAlignJustify/>,
-      tooltip: 'Justify',
-      val: "justify"
-    },
-  ]
-}
+    tooltip: 'Text alignment',
+    label: 'Alignment',
+    defaultSelectedItems: 'center',
+    toggleStatus: true,
+    items: [
+        {
+            icon: <FaAlignLeft />,
+            tooltip: 'Align left',
+            val: 'left',
+        },
+        {
+            icon: <FaAlignCenter />,
+            tooltip: 'Align center',
+            val: 'center',
+        },
+        {
+            icon: <FaAlignRight />,
+            tooltip: 'Align right',
+            val: 'right',
+        },
+        {
+            icon: <FaAlignJustify />,
+            tooltip: 'Justify',
+            val: 'justify',
+        },
+    ],
+};
 
-export const MultiToggleTwo = MultiToggleStory.bind({})
+export const MultiToggleTwo = MultiToggleStory.bind({});
 MultiToggleTwo.args = {
-  tooltip: "Text Tags",
-  label: "Tags",
-  defaultSelectedItems : ["left"],
-  background: "green",
-  color: 'white',
-  multiSelect: true,
-  items: [
-    {
-      icon: <FaAlignLeft/>,
-      tooltip: 'Like',
-      val: "left"
-    },
-    {
-      icon: <FaAlignCenter/>,
-      tooltip: 'Todo',
-      val: "center"
-    },
-    {
-      icon: <FaAlignRight/>,
-      tooltip: 'Idea',
-      val: "right"
-    },
-  ]
-}
+    tooltip: 'Text Tags',
+    label: 'Tags',
+    defaultSelectedItems: ['left'],
+    background: 'green',
+    color: 'white',
+    multiSelect: true,
+    items: [
+        {
+            icon: <FaAlignLeft />,
+            tooltip: 'Like',
+            val: 'left',
+        },
+        {
+            icon: <FaAlignCenter />,
+            tooltip: 'Todo',
+            val: 'center',
+        },
+        {
+            icon: <FaAlignRight />,
+            tooltip: 'Idea',
+            val: 'right',
+        },
+    ],
+};
diff --git a/packages/components/src/components/MultiToggle/MultiToggle.tsx b/packages/components/src/components/MultiToggle/MultiToggle.tsx
index 0f659c5ca..0a6fb81c9 100644
--- a/packages/components/src/components/MultiToggle/MultiToggle.tsx
+++ b/packages/components/src/components/MultiToggle/MultiToggle.tsx
@@ -16,7 +16,6 @@ export interface IMultiToggleProps extends IGlobalProps {
     defaultSelectedItems?: (string | number) | (string | number)[];
     selectedItems?: (string | number) | (string | number)[];
     onSelectionChange?: (val: (string | number) | (string | number)[], added: boolean) => unknown;
-    isToggle?: boolean;
     toggleStatus?: boolean;
 }
 
@@ -37,33 +36,30 @@ export const MultiToggle = (props: IMultiToggleProps) => {
     const itemsMap = new Map();
     items.forEach(item => itemsMap.set(item.val, item));
     return (
-        <div className={`multiToggle-container`}>
+        <div className="multiToggle-container">
             <Popup
                 toggle={
-                    props.isToggle ? undefined : (
-                        <div style={{ position: 'relative' }}>
-                            <IconButton
-                                color={color}
-                                borderColor={background ? color : undefined}
-                                label={props.label}
-                                active={props.toggleStatus}
-                                background={color}
-                                {...(itemsMap.get(promoteToArray(selectedItems)[0]) ?? {})}
-                                tooltip={tooltip}
-                                tooltipPlacement={tooltipPlacement}
-                            />
-                            {promoteToArray(selectedItems).length < 2 ? null : <div style={{ position: 'absolute', top: '0', left: '0', color: color ?? Colors.MEDIUM_BLUE }}>+</div>}
-                        </div>
-                    )
+                    <div style={{ position: 'relative' }}>
+                        <IconButton
+                            color={color}
+                            borderColor={background ? color : undefined}
+                            label={props.label}
+                            active={props.toggleStatus}
+                            background={color}
+                            {...(itemsMap.get(promoteToArray(selectedItems)[0]) ?? {})}
+                            tooltip={tooltip}
+                            tooltipPlacement={tooltipPlacement}
+                        />
+                        {promoteToArray(selectedItems).length < 2 ? null : <div style={{ position: 'absolute', top: '0', left: '0', color: color ?? Colors.MEDIUM_BLUE }}>+</div>}
+                    </div>
                 }
-                isToggle={props.isToggle}
+                isToggle={true}
                 toggleFunc={() => {
                     const selItem = items.find(item => promoteToArray(selectedItems).includes(item.val));
                     selItem && setSelectedItemsLocal([selItem.val]);
                 }}
                 type={props.type}
-                label={props.isToggle ? props.label : undefined}
-                toggleStatus={props.isToggle ? props.toggleStatus : undefined}
+                label={undefined}
                 color={color}
                 background={background}
                 popup={
diff --git a/packages/components/src/components/Popup/Popup.tsx b/packages/components/src/components/Popup/Popup.tsx
index 82e60f343..9e72ece87 100644
--- a/packages/components/src/components/Popup/Popup.tsx
+++ b/packages/components/src/components/Popup/Popup.tsx
@@ -20,11 +20,10 @@ export interface IPopupProps extends IGlobalProps {
     toggle?: JSX.Element;
     popup: JSX.Element | string | (() => JSX.Element);
     trigger?: PopupTrigger;
-    toggleStatus?: boolean;
     isOpen?: boolean;
     setOpen?: (b: boolean) => void;
     background?: string;
-    isToggle?: boolean;
+    isToggle?: boolean; // whether popup stays open when background is clicked.  muyst click toggle button tp close it.
     toggleFunc?: () => void;
     popupContainsPt?: (x: number, y: number) => boolean;
 }
@@ -71,6 +70,7 @@ export const Popup = (props: IPopupProps) => {
         const rect = popperRef.current?.getBoundingClientRect();
         const rect2 = toggleRef.current?.getBoundingClientRect();
         if (
+            !props.isToggle &&
             (!rect2 || !(rect2.left < e.clientX && rect2.top < e.clientY && rect2.right > e.clientX && rect2.bottom > e.clientY)) &&
             rect &&
             !(rect.left < e.clientX && rect.top < e.clientY && rect.right > e.clientX && rect.bottom > e.clientY) &&
@@ -109,8 +109,8 @@ export const Popup = (props: IPopupProps) => {
                         timeout = setTimeout(() => setOpen(false), 1000);
                     }
                 }}>
-                {toggle ?? (
-                    <div ref={toggleRef}>
+                <div ref={toggleRef}>
+                    {toggle ?? (
                         <Toggle
                             tooltip={tooltip}
                             size={size}
@@ -122,19 +122,17 @@ export const Popup = (props: IPopupProps) => {
                             iconPlacement={iconPlacement}
                             text={text}
                             label={props.label}
-                            toggleStatus={isOpen || props.toggleStatus}
+                            toggleStatus={isOpen}
                             onClick={() => {
                                 if (trigger === PopupTrigger.CLICK) {
-                                    if (!props.isToggle || props.toggleStatus) {
-                                        setOpen(!isOpen);
-                                    }
+                                    setOpen(!isOpen);
                                     props.toggleFunc?.();
                                 }
                             }}
                             fillWidth={fillWidth}
                         />
-                    </div>
-                )}
+                    )}
+                </div>
             </div>
             <Popper open={isOpen} style={{ zIndex: 20000 }} anchorEl={triggerRef.current} placement={placement} modifiers={[]}>
                 <div
@@ -142,9 +140,7 @@ export const Popup = (props: IPopupProps) => {
                     ref={popperRef}
                     style={{ width, height, background }}
                     tabIndex={-1}
-                    onPointerDown={e => {
-                        e.stopPropagation();
-                    }}
+                    onPointerDown={e => e.stopPropagation()}
                     onPointerEnter={() => {
                         if (trigger === PopupTrigger.HOVER || trigger === PopupTrigger.HOVER_DELAY) {
                             clearTimeout(timeout);