pixel-react 1.5.7 → 1.5.9

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -4,6 +4,7 @@ import { LabelEditTextFieldTypes } from './types';
 import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
+import Tooltip from '../Tooltip';
 
 const getErrorMessage = (
   inputValue: string,
@@ -32,10 +33,12 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   variant = 'textField',
   dropdownData = [],
-  width = '300px',
+  width,
   height = '22px',
   isOpen = false,
   confirmAction,
+  onClick,
+  tooltip,
 }) => {
   const [isEditing, setIsEditing] = useState(isOpen ?? false);
   const [inputValue, setInputValue] = useState(text);
@@ -47,12 +50,38 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   const [isDropdownModified, setIsDropdownModified] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
-
+  const [clickTimeout, setClickTimeout] = useState<number | null>(null);
+  useEffect(() => {
+    return () => {
+      if (clickTimeout) {
+        clearTimeout(clickTimeout);
+      }
+    };
+  }, [clickTimeout]);
   const handleDoubleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
     setIsEditing(true);
     setShowError('');
   };
+  const handleSingleClick = () => {
+    if (onClick) onClick();
+  };
+  const handleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
 
+    const timeout = window.setTimeout(() => {
+      handleSingleClick();
+      setClickTimeout(null);
+    }, 1000);
+
+    setClickTimeout(timeout);
+  };
   const handleConfirm = () => {
     const errorMessage = getErrorMessage(
       inputValue,
@@ -116,11 +145,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   }, [inputValue]);
 
   return (
-    <div
-      className="ff-label-edit-text-field"
-      ref={containerRef}
-      style={{ width }}
-    >
+    <div className="ff-label-edit-text-field" ref={containerRef}>
       {isEditing ? (
         <div className="ff-label-text-field">
           {variant === 'textFieldWithDropdown' ? (
@@ -195,13 +220,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
           </div>
         </div>
       ) : (
-        <span
-          className="display-text"
-          onDoubleClick={handleDoubleClick}
-          role="button"
+        <Tooltip
+          title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
+          placement={'bottom'}
         >
-          <HighlightText text={inputValue} highlight={highlightText} />
-        </span>
+          <span
+            className="display-text"
+            onDoubleClick={handleDoubleClick}
+            role="button"
+            onClick={handleClick}
+          >
+            <HighlightText text={inputValue} highlight={highlightText} />
+          </span>
+        </Tooltip>
       )}
       {showError && isEditing && (
         <Typography as="p" fontSize={8} className="error-text">

package/src/components/LabelEditTextField/types.ts

@@ -38,4 +38,9 @@ export interface LabelEditTextFieldTypes {
   isOpen?: boolean;
   /**for conditionally handle custom error */
   customErrorCondition?: boolean;
+  onClick?: () => void;
+  tooltip?: {
+    tooltipTitle?: string;
+    tooltipPlacement?: string;
+  };
 }

package/src/components/MiniModal/MiniModal.scss

@@ -8,6 +8,12 @@
   top: $top;
   left: $left;
 }
+.ff-mini-modal-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+}
 .ff-mini-edit-modal-container {
   width: fit-content;
   padding: 0;
@@ -17,9 +23,7 @@
     visibility: visible;
   }
   &.animatedModal {
-    animation:
-      slideDown 0.5s ease,
-      opacity 0.5s ease;
+    animation: slideDown 0.5s ease, opacity 0.5s ease;
   }
 
   .popover-arrow {
@@ -91,7 +95,7 @@
     position: absolute;
     top: -34px;
     border-radius: 7px 7px 0 0;
-    box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);
+
     &::before,
     &::after {
       position: absolute;
@@ -121,7 +125,7 @@
     width: 100%;
     margin: 0 0 0 -5px;
     height: 100%;
-    box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
+
     &.mini-edit-modal-wrapper-shadow {
       box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
     }

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -51,6 +51,10 @@ const BasicModalComponent = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef="112233"
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+          }}
           modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
@@ -263,7 +267,12 @@ export const CustomModalWithArrow = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef="1a2b"
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+          }}
           modalProperties={{ width: 300, height: 250 }}
+          arrowZIndex={1000}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -287,6 +296,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -326,6 +336,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -368,6 +379,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -408,6 +420,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -451,6 +464,7 @@ export const CustomModalWithArrow = () => {
               <button onClick={handleCancel}>Cancel</button>
             </>
           }
+          outSideClick={handleCancel}
           cancelButtonProps={{
             text: 'Cancel',
             onClick: handleCancel,
@@ -492,6 +506,11 @@ export const CustomModalWithWrapper = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef={btnRef1}
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+            backgroundColorOverlay: 'var(--pop-up-background-blur)',
+          }}
           modalProperties={{ width: 487, height: 180 }}
           headerProps={
             <>
@@ -506,6 +525,7 @@ export const CustomModalWithWrapper = () => {
               </Typography>
             </>
           }
+          outSideClick={handleCancel}
           cancelButtonProps={{
             text: 'Cancel',
             onClick: handleCancel,
@@ -551,6 +571,7 @@ export const CustomModalWithWrapper = () => {
             text: 'Export',
             onClick: () => {},
           }}
+          outSideClick={handleCancel}
           isWrapped={true}
           isAnimated={false}
           firstAnchorRef={btnRef1}
@@ -575,8 +596,9 @@ export const CustomModalWithWrapper = () => {
             height: 210,
             borderRadius: 0,
             zIndex: 3,
+            boxShadow: 'none',
           }}
-          wrapperProperties={{ width: 30, zIndex: 4 }}
+          wrapperProperties={{ width: 30, zIndex: 4, boxShadow: 'none' }}
           headerProps={
             <>
               <Typography as="p">Delete Selected Scripts</Typography>
@@ -600,6 +622,7 @@ export const CustomModalWithWrapper = () => {
           }}
           isWrapped={true}
           isAnimated={true}
+          outSideClick={handleCancel}
           firstAnchorRef={btnRef1}
           anchorRefLeftNum={225}
           anchorLeftDistanceForWrapper={170}
@@ -630,6 +653,10 @@ export const normalModalFollowedByIcon = () => {
         <MiniModal
           anchorRef={iconRef1}
           modalProperties={{ width: 168, height: 108 }}
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+          }}
           childContent={
             <>
               <Typography as="p">

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]);

package/src/components/Typography/Typography.scss

@@ -1,43 +1,8 @@
 @mixin fontPoppins($size: 16px) {
-  font-family: 'Poppins';
+  font-family: 'Poppins', sans-serif;
   font-size: $size;
 }
 
-/* poppins-latin-400-normal */
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) format('woff2'), url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format('woff');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-}
-
-
-// @font-face {
-//   font-family: 'Poppins';
-//   font-weight: 500;
-//   src:
-//     local('Poppins-Medium'),
-//     url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
-// }
-
-// @font-face {
-//   font-family: 'Poppins';
-//   font-weight: 600;
-//   src:
-//     local('Poppins-SemiBold'),
-//     url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
-// }
-
-// @font-face {
-//   font-family: 'Poppins';
-//   font-weight: 700;
-//   src:
-//     local('Poppins-Bold'),
-//     url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
-// }
-
 .ff-text {
   @include fontPoppins();