pixel-react 1.10.15 → 1.10.16

package/src/components/Modal/Modal.stories.tsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import Modal from './Modal';
-import Button from '../Button';
-import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
-
-const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
-  component: Modal,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Modal>;
-
-export const DefaultModalStory: Story = {
-  args: {
-    isOpen: true,
-    contentLabel: 'modal',
-    ariaHideApp: true,
-    isHeaderDisplayed: true,
-    headerContent: <h2>title</h2>,
-    children: <h2>Hello</h2>,
-    isFooterDisplayed: true,
-    footerContent: <Button variant="primary" label="continue" />,
-    customWidth: '660px',
-    customHeight: 'auto',
-    border: '1px solid #E79B0866',
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [openModal, setModal] = useState(false);
-    useKeyboardActions([
-      {
-        key: 'Enter',
-        action: () => alert('Enter key was pressed.'),
-      },
-    ]);
-    return (
-      <>
-        <Button
-          variant="primary"
-          onClick={() => {
-            setModal(true);
-          }}
-        >
-          Show Modal
-        </Button>
-        {openModal && (
-          <Modal
-            overlayClassName="custom-overlay"
-            isOpen={openModal}
-            onClose={() => {
-              setModal(false);
-            }}
-            headerContent={<div>title</div>}
-            isHeaderDisplayed={true}
-            children={<div>Hello</div>}
-            ariaHideApp={true}
-            isFooterDisplayed={true}
-            footerContent={<Button variant="primary" label="continue" />}
-            customWidth="660px"
-            customHeight="auto"
-            border="1px solid var(--warning-modal-border-color)"
-          />
-        )}
-      </>
-    );
-  },
-};
-
-export default meta;

package/src/components/Modal/Modal.tsx

@@ -1,97 +0,0 @@
-import React, { useContext } from 'react';
-import { createPortal } from 'react-dom';
-import './modal.scss';
-import { ModalProps } from './types';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
-
-const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  contentLabel,
-  isHeaderDisplayed,
-  headerContent,
-  footerContent,
-  contentClassName,
-  isFooterDisplayed,
-  overlayClassName,
-  shouldCloseOnEsc = true,
-  ariaHideApp = true,
-  shouldCloseOnOverlayClick = true,
-  customWidth = '660px',
-  customHeight = 'auto',
-  children,
-  zIndex = 999,
-  boxShadow = '',
-  border = '',
-  background='',
-}) => {
-
- useKeyboardActions(
-   shouldCloseOnEsc && isOpen
-     ? [
-         {
-           key: 'Escape',
-           action: onClose,
-         },
-       ]
-     : []
- );
-
- if (!isOpen) return null;
-
- if (ariaHideApp) {
-   document.body.style.overflow = isOpen ? 'hidden' : '';
- }
-  if (!isOpen) return null;
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-
-  return createPortal(
-    <div
-      className={`ff-modal-overlay ${overlayClassName || ''}`}
-      style={{ zIndex: zIndex }}
-      onClick={shouldCloseOnOverlayClick ? onClose : undefined}
-    >
-      <div
-        style={{
-          boxShadow: boxShadow,
-          border: border,
-          borderRadius: '8px',
-          background: background,
-        }}
-        className="ff-modal-container"
-      >
-        <div
-          className={classNames(
-            `ff-modal-content ${currentTheme} ${contentClassName}`,
-            {
-              'modal-bottom-border': !isFooterDisplayed,
-              'modal-top-border': !isHeaderDisplayed,
-            }
-          )}
-          style={{
-            width: customWidth,
-            height: customHeight,
-          }}
-          onClick={(e) => e.stopPropagation()}
-          aria-label={contentLabel}
-        >
-          {isHeaderDisplayed && (
-            <div className="ff-modal-header">{headerContent}</div>
-          )}
-          {children}
-        </div>
-        {isFooterDisplayed && (
-          <div className="ff-modal-footer" style={{ width: customWidth }}>
-            {footerContent}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-};
-
-export default Modal;

package/src/components/Modal/index.tsx

@@ -1 +0,0 @@
-export { default } from './Modal';

package/src/components/Modal/types.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-
-  /*** label value for aria-label  */
-  contentLabel?: string;
-
-  /*** default header will be provided with title and close icon. */
-  isHeaderDisplayed: boolean;
-
-  /*** Title to be displayed in the header when defaultHeader is true*/
-  headerTitle?: string;
-
-  /*** Custom class names for the modal content */
-  contentClassName?: string;
-
-  /*** Custom class name for the overlay */
-  overlayClassName?: string;
-
-  /*** Whether the modal should close when the 'Escape' key is pressed */
-  shouldCloseOnEsc?: boolean;
-
-  /*** Whether to hide the app from screen readers when the modal is open */
-  ariaHideApp?: boolean; //for screen readers
-
-  /*** Whether the modal should close when clicking outside of it (on the overlay) */
-  shouldCloseOnOverlayClick?: boolean;
-  //   shouldFocusAfterRender?: boolean;
-  //   shouldReturnFocusAfterClose?: boolean;
-  headerContent?: string | ReactNode;
-  footerContent?: ReactNode;
-  /***Content to be displayed inside the modal */
-  children: ReactNode;
-  isFooterDisplayed: boolean;
-  customWidth?: string;
-  customHeight?: string;
-  zIndex?: number;
-  boxShadow?: string;
-  border?: string;
-  background?: string;
-}

package/src/components/ModulesChip/ModuleChip.stories.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import ModuleChip from './ModuleChip';
-import { useState } from 'react';
-
-const meta: Meta<typeof ModuleChip> = {
-  title: 'Components/ModuleChip',
-  component: ModuleChip,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    isActive: Boolean,
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof ModuleChip>;
-
-const defaultArgs = {
-  label: 'Modules',
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [selectedMenu, setSelectedMenu] = useState<boolean>(true);
-    const handleChipClick = () => {
-      setSelectedMenu(!selectedMenu);
-    };
-
-    return (
-      <ModuleChip
-        {...defaultArgs}
-        isActive={selectedMenu}
-        onClick={handleChipClick}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/ModulesChip/ModuleChip.tsx

@@ -1,28 +0,0 @@
-import './ModuleChip.scss';
-import classNames from 'classnames';
-import { ModuleChipProps } from './types';
-import Typography from '../Typography';
-
-const ModuleChip: React.FC<ModuleChipProps> = ({
-  label = '',
-  isActive = true,
-  onClick = () => {},
-}) => {
-  return (
-    <div
-      className={classNames('ff-Module-chip', {
-        'ff-Module-chip--active': isActive,
-        'ff-Module-chip--hover': !isActive,
-      })}
-      onClick={onClick}
-    >
-      <Typography
-        lineHeight="18px"
-        className="module-typography"
-        children={label}
-      />
-    </div>
-  );
-};
-
-export default ModuleChip;

package/src/components/ModulesChip/index.ts

@@ -1 +0,0 @@
-export { default } from './ModuleChip';

package/src/components/ModulesChip/types.ts

@@ -1,14 +0,0 @@
-export interface ModuleChipProps {
-  /**
-   * mandatory | label for the ModuleChip component
-   */
-  label: string;
-  /**
-   * mandatory | isActive for the ModuleChip component
-   */
-  isActive: boolean;
-  /**
-   * mandatory | onClick for the ModuleChip component
-   */
-  onClick: () => void;
-}

package/src/components/MultiSelect/Dropdown.scss

@@ -1,77 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-multiselect-dropdown-container {
-  position: absolute;
-  background: var(--drawer-footer-bg);
-  z-index: 1000;
-  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-  border: 0.5px solid var(--ff-select-option-border-color);
-  border-radius: 4px;
-  box-sizing: border-box;
-  margin-block: 4px;
-  max-height: 160px;
-  .ff-multiselect-options-wrapper {
-    max-height: 128px;
-    overflow-y: auto;
-    border-radius: 2px;
-    overflow-x: hidden;
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 40px;
-      border-radius: 12px 0px 0px 0px;
-      background: var(--description-text);
-
-      &-track {
-        background: var(--ff-select-scroll-track-bg);
-      }
-
-      &-thumb {
-        background: var(--ff-select-scroll-thumb-color);
-        border-radius: 10px;
-
-        &:hover {
-          background: var(--ff-select-scroll-thumb-hover);
-        }
-      }
-    }
-  }
-
-  .no-options {
-    color: var(--ff-select-text-color);
-    text-align: center;
-    margin: 0;
-    padding: 7px;
-    line-height: 12px;
-  }
-  .dropdown-option-container {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    height: 32px;
-    padding: 4px 8px;
-    gap: 4px;
-    border-radius: 4px 0px 0px 0px;
-    background-color: white;
-
-    .dropdown-option-label {
-      @extend .fontMd;
-      color: var(--ff-select-text-color);
-    }
-    &:hover {
-      background-color: var(--hover-color);
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-  .select-button-container {
-    box-sizing: border-box;
-    width: 100%;
-    border-top: 1px solid var(--slider-table-color);
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}

package/src/components/MultiSelect/Dropdown.tsx

@@ -1,169 +0,0 @@
-import { forwardRef, useContext, useMemo } from 'react';
-import { dropdownDefaultCSSData, DropdownProps } from './dropdownTypes';
-
-import './Dropdown.scss';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import Button from '../Button';
-import Typography from '../Typography';
-import Checkbox from '../Checkbox';
-import Tooltip from '../Tooltip';
-import { truncateText } from '../../utils/truncateText/truncateText';
-import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-
-const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  (
-    {
-      options,
-      handleOptionChange,
-      searchedKeyword = '',
-      dropdownPosition = {},
-      zIndex,
-      withSelectButton,
-      labelAccessor='label',
-      valueAccessor='value',
-      loadMoreOptions,
-    },
-    ref
-  ) => {
-      const filteredOptions = options
-      ? options.filter((option) =>
-          getValue(option, valueAccessor)
-            ?.toLowerCase()
-            .includes(searchedKeyword.toLowerCase())
-        )
-      : [];
-    const { verticalMargin, optionHeight, maxDropdownHeight } =
-      dropdownDefaultCSSData;
-
-    const onSelectClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      handleOptionChange({}, false);
-    };
-    const renderOption=(info:any, labelAccessor:string)=>{
-      if(typeof info[labelAccessor] ==='string'){
-        return truncateText(getLabel(info, labelAccessor), 25)
-      }
-      return info[labelAccessor]
-    }
-    const topPosition = useMemo(() => {
-      let calculatedDropdownHeight = Math.min(
-        filteredOptions.length * optionHeight,
-        maxDropdownHeight
-      );
-
-      if (filteredOptions.length < 5 && withSelectButton) {
-        calculatedDropdownHeight += 32;
-      }
-
-      const isEnoughSpaceAvailable =
-        dropdownPosition.fromBottom >=
-        calculatedDropdownHeight + verticalMargin;
-      const topPosition = isEnoughSpaceAvailable
-        ? dropdownPosition.top
-        : dropdownPosition.top -
-          calculatedDropdownHeight -
-          dropdownPosition.selectHeight -
-          2 * verticalMargin;
-
-      return topPosition;
-    }, [filteredOptions.length, withSelectButton, dropdownPosition]);
-
-    const themeContext = useContext(ThemeContext);
-    const currentTheme = themeContext?.currentTheme;
-
-    useIntersectionObserver(['ff-multiselect-pagination'], {
-      root: document.getElementById('ff-multiselect-options-wrapper'),
-      rootMargin: '0px',
-      threshold: 0.1,  
-      onIntersect: (entry, _observer) => {
-        if (entry.isIntersecting) {
-          if (loadMoreOptions) {
-            loadMoreOptions();
-          }
-
-    
-        }
-      },
-    });
-
-    return (
-      <div
-        role="listbox"
-        ref={ref}
-        className={classNames('ff-multiselect-dropdown-container', {
-          [currentTheme || '']: true,
-        })}
-        style={{
-          left: dropdownPosition.left,
-          top: topPosition,
-          width: dropdownPosition.width,
-          zIndex,
-        }}
-      >
-        <div
-          className="ff-multiselect-options-wrapper"
-          style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
-
-          id="ff-multiselect-options-wrapper"
-        >
-          {filteredOptions.length === 0 ? (
-              <Typography textAlign='center' as='p' className='no-options'>
-                No Result Found
-              </Typography>
-           
-          ) : (
-            <>
-           { filteredOptions.map((info) => (
-              <div
-                role="option"
-                className={`dropdown-option-container`}
-                key={getLabel(info, labelAccessor)}
-                onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
-                  const target = e.target as HTMLInputElement;
-                  if(target.type==='checkbox'){
-                    return
-                  }
-                  !info?.isDisabled && handleOptionChange(info, !info.isChecked);
-                }
-                }
-              >
-                <Checkbox
-                  checked={info.isChecked}
-                  disabled={info?.isDisabled}
-                />
-                <Tooltip
-                  zIndex={zIndex + 1}
-                  title={
-                   typeof info[labelAccessor]==='string' && getLabel(info, labelAccessor)?.length > 25
-                      ? getLabel(info, labelAccessor)
-                      : ''
-                  }
-                  children={
-                    <Typography
-                      className="dropdown-option-label"
-                      children={renderOption(info,labelAccessor)}
-                    />
-                  }
-                />
-              </div>
-            ))}
-
-            <div id="ff-multiselect-pagination" >
-              </div>
-            </>
-
-          )}
-        </div>
-        {withSelectButton && filteredOptions.length > 0 && (
-          <div className="select-button-container">
-            <Button label="Select" variant="tertiary" onClick={onSelectClick} />
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-export default Dropdown;