pixel-react 1.5.6 → 1.5.8

package/src/components/MiniModal/MiniModal.tsx

@@ -31,6 +31,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraLeftSpace,
       isIconModel,
       wrapperProperties,
+      arrowZIndex,
+      overlay,
+      outSideClick,
     },
     ref
   ) => {
@@ -127,9 +130,13 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       } else if (modalPosition === 'right') {
         return leftTopArrow
           ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
-          : modalPositionState?.top - safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+          : modalPositionState?.top -
+              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
       } else if (modalPosition === 'top') {
-        return modalPositionState.top - (safeHeight + (extraTopSpace?.normalModal ?? 10));
+        return (
+          modalPositionState.top -
+          (safeHeight + (extraTopSpace?.normalModal ?? 10))
+        );
       }
       return modalPositionState.top - safeHeight / 1.5;
     };
@@ -138,7 +145,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     // Specifying the modal left
     const calculateModalLeft = () => {
       if (modalPosition === 'right') {
-        return modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40);
+        return (
+          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
+        );
       } else if (firstAnchorRef) {
         return firstAnchor;
       } else if (modalPosition === 'left') {
@@ -152,9 +161,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     // Handle escape and enter functionality
     const handleEsc = useEscapeKey('Escape');
     const handleEnter = useEscapeKey('Enter');
-    handleEsc(cancelButtonProps?.onClick);
+    handleEsc(outSideClick);
     handleEnter(proceedButtonProps?.onClick);
-    useClickOutside(modalRef, cancelButtonProps.onClick);
+    useClickOutside(modalRef, outSideClick);
 
     // Calculate the modal position
     const calculatePosition = useCallback(() => {
@@ -192,96 +201,123 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       height: modalHeight,
       borderRadius: modalBorderRadius = 4,
       zIndex: modalZIndex = 99,
+      boxShadow: modalBoxShadow,
     } = modalProperties || {};
 
-    const { width: wrapperWidth = 35, zIndex: wrapperZIndex = 101 } =
-      wrapperProperties || {};
+    const {
+      width: wrapperWidth = 35,
+      zIndex: wrapperZIndex = 101,
+      boxShadow: wrapperBoxShadow,
+    } = wrapperProperties || {};
+    const { isOverlay, backgroundColorOverlay, zIndexOverlay } = overlay || {};
 
     if (isWrapped && isPopOver) {
       return null;
     }
 
     return createPortal(
-      <div
-        ref={ref || modalRef}
-        className={classNames('ff-mini-edit-modal-container', {
-          modalVisible: isVisible,
-          animatedModal: isAnimated,
-        })}
-        style={{
-          top: `${calculatedModalTop}px`,
-          left: `${calculatedModalLeft}px`,
-        }}
-      >
-        {isPopOver && (
-          <div
-            className={`popover-arrow popover-arrow-${
-              modalPosition === 'right'
-                ? 'left'
-                : modalPosition === 'top'
-                ? 'bottom'
-                : modalPosition === 'left'
-                ? 'right'
-                : 'top'
-            } ${getArrowClassName()}`}
-          />
-        )}
-        {isWrapped && (
+      <>
+        {isOverlay && (
           <div
-            className={'wrapped-div'}
+            className={classNames('ff-mini-modal-overlay')}
             style={{
-              left: `${calculatedAnchorRefLeft}px`,
-              width: `${wrapperWidth}px`,
-              zIndex: `${wrapperZIndex}`,
+              zIndex: zIndexOverlay ?? 98,
+              backgroundColor: backgroundColorOverlay ?? 'transparent',
             }}
+            onClick={cancelButtonProps?.onClick}
           ></div>
         )}
         <div
-          className={classNames('mini-edit-modal', {
-            'mini-edit-modal-wrapper-shadow': !!isWrapped,
-            'mini-edit-modal-arrow-shadow': !!isPopOver,
+          ref={ref || modalRef}
+          className={classNames('ff-mini-edit-modal-container', {
+            modalVisible: isVisible,
+            animatedModal: isAnimated,
           })}
           style={{
-            minWidth: isWrapped ? '358px' : '',
-            width: `${modalWidth}px`,
-            height: `${modalHeight}px`,
-            borderRadius: `${modalBorderRadius}px`,
-            zIndex: `${modalZIndex}`,
+            top: `${calculatedModalTop}px`,
+            left: `${calculatedModalLeft}px`,
           }}
         >
-          {headerProps ? (
-            <Typography as="div">{headerProps}</Typography>
-          ) : isIconModel ? (
-            <></>
-          ) : (
-            <Typography as="header">
-              <Typography as="h2">Header text</Typography>
-              <hr />
-            </Typography>
+          {isPopOver && (
+            <div
+              className={`popover-arrow popover-arrow-${
+                modalPosition === 'right'
+                  ? 'left'
+                  : modalPosition === 'top'
+                  ? 'bottom'
+                  : modalPosition === 'left'
+                  ? 'right'
+                  : 'top'
+              } ${getArrowClassName()}`}
+              style={{
+                zIndex: `${arrowZIndex}`,
+              }}
+            />
           )}
-          <div>{childContent}</div>
-          {footerContent ? (
-            <Typography as="footer">{footerContent}</Typography>
-          ) : isIconModel ? (
-            <></>
-          ) : (
-            <footer className="modal-footer">
-              <Button
-                variant="primary"
-                className="btn-cancel"
-                onClick={cancelButtonProps?.onClick}
-                label={cancelButtonProps?.text}
-              />
-              <Button
-                variant="secondary"
-                className="btn-proceed"
-                label={proceedButtonProps?.text}
-                onClick={proceedButtonProps?.onClick}
-              />
-            </footer>
+          {isWrapped && (
+            <div
+              className={'wrapped-div'}
+              style={{
+                left: `${calculatedAnchorRefLeft}px`,
+                width: `${wrapperWidth}px`,
+                zIndex: `${wrapperZIndex}`,
+                boxShadow:
+                  wrapperBoxShadow ??
+                  `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`,
+              }}
+            ></div>
           )}
+          <div
+            className={classNames('mini-edit-modal', {
+              'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
+              'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow,
+            })}
+            style={{
+              minWidth: isWrapped ? '358px' : '',
+              width: `${modalWidth}px`,
+              height: `${modalHeight}px`,
+              borderRadius: `${modalBorderRadius}px`,
+              zIndex: `${modalZIndex}`,
+              boxShadow: `${
+                modalBoxShadow ??
+                '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
+              }`,
+            }}
+          >
+            {headerProps ? (
+              <Typography as="div">{headerProps}</Typography>
+            ) : isIconModel ? (
+              <></>
+            ) : (
+              <Typography as="header">
+                <Typography as="h2">Header text</Typography>
+                <hr />
+              </Typography>
+            )}
+            <div>{childContent}</div>
+            {footerContent ? (
+              <Typography as="footer">{footerContent}</Typography>
+            ) : isIconModel ? (
+              <></>
+            ) : (
+              <footer className="modal-footer">
+                <Button
+                  variant="primary"
+                  className="btn-cancel"
+                  onClick={cancelButtonProps?.onClick}
+                  label={cancelButtonProps?.text}
+                />
+                <Button
+                  variant="secondary"
+                  className="btn-proceed"
+                  label={proceedButtonProps?.text}
+                  onClick={proceedButtonProps?.onClick}
+                />
+              </footer>
+            )}
+          </div>
         </div>
-      </div>,
+      </>,
       document.body
     );
   }

package/src/components/MiniModal/types.ts

@@ -4,6 +4,7 @@ interface ModalDimensions {
   height?: number;
   borderRadius?: number;
   zIndex?: number;
+  boxShadow?: string;
 }
 export interface MiniEditModalProps {
   /**
@@ -90,7 +91,15 @@ export interface MiniEditModalProps {
   wrapperProperties?: {
     width?: number;
     zIndex?: number;
+    boxShadow?: string;
   };
+  arrowZIndex?: number;
+  overlay?: {
+    isOverlay?: boolean;
+    zIndexOverlay?: number;
+    backgroundColorOverlay?: string;
+  };
+  outSideClick?: any;
 }
 export interface Rect {
   top: number;

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -130,7 +130,7 @@ export const Controlled: Story = {
     const [options, setOptions] = useState<Option[]>([]);
     const [selectedOptions, setSelectedOptions] = useState<
       { label?: string; value?: string }[]
-    >([{ label: 'Apple', value: 'apple' }]);
+    >([]);
     const onChange = (options: { label?: string; value?: string }[]) => {
       setSelectedOptions(options);
     };

package/src/components/MultiSelect/MultiSelect.tsx

@@ -265,15 +265,18 @@ const MultiSelect = ({
     };
   }, [isOpen]);
   useEffect(() => {
-    if (options?.length > 0 && selectedOptions?.length) {
-      const initializeOptions = options.map((option) => ({
-        ...option,
-        isChecked: selectedOptions.some(
-          (selectedOption) =>
-            getValue(selectedOption, valueAccessor) ===
+    if (!checkEmpty(options?.length)) {
+      let initializeOptions=options;
+      if(!checkEmpty(selectedOptions?.length)){
+         initializeOptions = options.map((option) => ({
+          ...option,
+          isChecked: selectedOptions.some(
+            (selectedOption) =>
+              getValue(selectedOption, valueAccessor) ===
             getValue(option, valueAccessor)
-        ),
-      }));
+          ),
+        }));
+      }
       setAllOptions(initializeOptions);
     }
   }, [options, selectedOptions]);