@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/DatePicker/OverlayComponent/index.ts

@@ -1,2 +0,0 @@
-export { default } from './OverlayComponent';
-export * from './OverlayComponent';

package/src/components/DatePicker/OverlayComponent/utils.ts

@@ -1,15 +0,0 @@
-import type { Dayjs } from 'dayjs';
-
-import type { Range } from './OverlayComponent';
-import { currentDay } from '../utils';
-
-export const getLeftCalendarDate = (selectedDays: Range): Dayjs => {
-  return selectedDays.from ?? currentDay;
-};
-
-export const getRightCalendarDate = (selectedDays: Range): Dayjs => {
-  return (
-    selectedDays.from?.month(selectedDays.from?.month() + 1) ??
-    currentDay.month(currentDay.month() + 1)
-  );
-};

package/src/components/DatePicker/constants.ts

@@ -1,28 +0,0 @@
-import type { ExtraOption } from './DatePicker.types';
-import { currentDay } from './utils';
-
-export const APPLY = 'Apply';
-export const CLEAR_ALL = 'Clear All';
-
-export const DATE_PICKER_LABEL = 'Select Date';
-export const DATE_RANGE_PICKER_LABEL = 'Enter Date Range';
-
-export const EMPTY_STATE = { from: undefined, to: undefined };
-
-export const CALENDAR_DEFAULT_OPTIONS: ExtraOption[] = [
-  {
-    value: 'last-7-days',
-    label: 'Last 7 days',
-    dates: [currentDay.subtract(7, 'day'), currentDay],
-  },
-  {
-    value: 'last-30-days',
-    label: 'Last 30 days',
-    dates: [currentDay.subtract(30, 'day'), currentDay],
-  },
-  {
-    value: 'custom',
-    label: 'Custom',
-    dates: [currentDay],
-  },
-];

package/src/components/DatePicker/index.ts

@@ -1,4 +0,0 @@
-export { default } from './DatePicker';
-export * from './DatePicker';
-export * from './DatePicker.types';
-export { CALENDAR_DEFAULT_OPTIONS } from './constants';

package/src/components/DatePicker/utils.ts

@@ -1,17 +0,0 @@
-import type { Dayjs } from 'utils/date';
-import dayjs from 'utils/date';
-import type { Range } from './OverlayComponent/OverlayComponent';
-
-const fakeDate = dayjs('11-03-2020 12:00:00');
-const getDefaultDate = (date?: undefined | Dayjs) =>
-  import.meta.env.NODE_ENV !== 'test' ? date : fakeDate;
-
-export const currentDay: Dayjs =
-  import.meta.env.STORYBOOK_ENV === 'true' ? fakeDate : (getDefaultDate(dayjs()) as Dayjs);
-
-export const initDates = (value: { from?: Date; to?: Date }): Range => {
-  return {
-    from: value.from ? dayjs(value.from) : undefined,
-    to: value.to ? dayjs(value.to) : undefined,
-  };
-};

package/src/components/Drawer/Drawer.style.ts

@@ -1,204 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, transparentize } from 'polished';
-import { flex, transition } from 'theme/functions';
-
-import { vars } from '@orfium/tokens';
-import type { Theme } from '~/theme';
-import type { AnchorType, DrawerProps } from './Drawer.types';
-
-const getStyleBasedOnAnchor = (anchor: AnchorType) => {
-  switch (anchor) {
-    case 'top':
-      return css`
-        flex-direction: column;
-      `;
-    case 'right':
-      return css`
-        justify-content: flex-end;
-      `;
-    case 'bottom':
-      return css`
-        justify-content: flex-end;
-        flex-direction: column;
-      `;
-    default:
-      return css``;
-  }
-};
-
-const transformBasedOnProps = (isOpen: boolean, anchor: AnchorType) => {
-  switch (anchor) {
-    case 'top':
-      return isOpen ? 'translateY(0)' : 'translateY(-100%)';
-    case 'right':
-      return isOpen ? 'translateX(0)' : 'translateX(100%)';
-    case 'bottom':
-      return isOpen ? 'translateY(0)' : 'translateY(100%)';
-    default:
-      return isOpen ? 'translateX(0)' : 'translateX(-100%)';
-  }
-};
-
-export const backdropStyle =
-  ({
-    isOpen,
-    anchor,
-    size,
-    isBackgroundActive,
-  }: Pick<DrawerProps, 'isOpen' | 'anchor' | 'size' | 'isBackgroundActive'>) =>
-  (theme: Theme) =>
-  (): SerializedStyles => {
-    const getWidth = () => {
-      if (anchor === 'left' || anchor === 'right') {
-        if (isBackgroundActive) {
-          return css`
-            width: ${size};
-          `;
-        }
-      }
-
-      return css`
-        width: 100vw;
-      `;
-    };
-
-    const getHeight = () => {
-      if (anchor === 'top' || anchor === 'bottom') {
-        if (isBackgroundActive) {
-          return css`
-            height: ${size};
-          `;
-        }
-      }
-
-      return css`
-        height: 100vh;
-      `;
-    };
-
-    const getPositioning = () => {
-      if (isBackgroundActive) {
-        return css`
-          top: ${anchor === 'bottom' ? undefined : 0};
-          bottom: ${anchor === 'top' ? undefined : 0};
-          right: ${anchor === 'left' ? undefined : 0};
-          left: ${anchor === 'right' ? undefined : 0};
-        `;
-      }
-
-      return css`
-        right: 0;
-        bottom: 0;
-        top: 0;
-        left: 0;
-      `;
-    };
-
-    return css`
-      ${flex};
-      position: fixed;
-      ${getWidth()};
-      ${getHeight()};
-      z-index: 2500;
-      ${getPositioning()};
-      background: ${isBackgroundActive
-        ? undefined
-        : transparentize(0.3, theme.tokens.colors.get('backgroundColor.invertedAlt'))};
-      visibility: ${isOpen ? 'visible' : 'hidden'};
-      opacity: ${isOpen ? 1 : 0};
-      ${transition(0.2)}
-      ${getStyleBasedOnAnchor(anchor)}
-    `;
-  };
-
-export const anchorStyle = ({
-  anchor,
-  size,
-  isBackgroundActive,
-}: Pick<DrawerProps, 'anchor' | 'size' | 'isBackgroundActive'>) => {
-  return anchor === 'top' || anchor === 'bottom'
-    ? { display: 'flex', height: isBackgroundActive ? '100%' : size, width: '100%' }
-    : { display: 'flex', height: '100%', width: isBackgroundActive ? '100%' : size };
-};
-
-export const overlayStyle = ({
-  isOpen,
-  anchor,
-  hasFixedLayout,
-}: Pick<DrawerProps, 'isOpen' | 'anchor' | 'hasFixedLayout'>): SerializedStyles => {
-  return css`
-    ${flex};
-    flex-direction: column;
-    overflow-y: ${hasFixedLayout ? undefined : 'auto'};
-    background-color: ${vars.color.background.default};
-    box-shadow: ${vars['box-shadow']['3']};
-    border: ${vars['border-width']['1']} solid ${vars.color['border-color'].decorative.default};
-    width: 100%;
-    height: 100%;
-    transform: ${transformBasedOnProps(isOpen, anchor)};
-    ${transition(0.3)}
-  `;
-};
-
-export const closeIconContainer = (): SerializedStyles => {
-  return css`
-    position: absolute;
-    top: ${vars.spacing['8']};
-    right: ${vars.spacing['8']};
-  `;
-};
-
-export const headerStyle = ({
-  isFixed,
-  hasBoxShadow,
-}: {
-  isFixed?: boolean;
-  hasBoxShadow?: boolean;
-}): SerializedStyles => {
-  return isFixed
-    ? css`
-        padding: ${vars.spacing['8']};
-        position: sticky;
-        top: 0;
-        box-shadow: ${hasBoxShadow ? vars['box-shadow']['2'] : undefined};
-        transition: box-shadow 0.2s ease-in-out;
-      `
-    : css`
-        padding: ${vars.spacing['8']};
-        flex: 0;
-      `;
-};
-
-export const contentStyle = ({
-  hasFixedHeader,
-}: {
-  hasFixedHeader?: boolean;
-}): SerializedStyles => {
-  return css`
-    flex: 1;
-    overflow-y: ${hasFixedHeader ? 'auto' : undefined};
-    /** Padding-top and Padding-bottom are -1px because of extra 1px-height elements added for scrollbar observation */
-    padding: calc(${vars.spacing['8']} - ${rem(1)}) ${vars.spacing['8']};
-  `;
-};
-
-export const footerStyle = ({
-  isFixed,
-  hasBoxShadow,
-}: {
-  isFixed?: boolean;
-  hasBoxShadow?: boolean;
-}): SerializedStyles => {
-  return isFixed
-    ? css`
-        position: sticky;
-        bottom: 0;
-        padding: ${vars.spacing['8']};
-        box-shadow: ${hasBoxShadow ? vars['box-shadow']['5'] : undefined};
-        transition: box-shadow 0.2s ease-in-out;
-      `
-    : css`
-        padding: ${vars.spacing['8']};
-      `;
-};

package/src/components/Drawer/Drawer.test.tsx

@@ -1,127 +0,0 @@
-import { vi } from 'vitest';
-import { fireEvent, render } from '../../test';
-import Drawer from './Drawer';
-import { DrawerContent, DrawerFooter, DrawerHeader } from './components';
-
-describe('Drawer', () => {
-  const content = 'content';
-
-  test('Drawer renders correctly', async () => {
-    const closeCTA = vi.fn();
-
-    const { findByText, findByTestId } = render(
-      <Drawer isOpen={true} size="33%" onClose={closeCTA}>
-        <DrawerHeader>
-          <div>{content}</div>
-        </DrawerHeader>
-      </Drawer>
-    );
-
-    const drawerContainer = await findByTestId('ictinus_drawer_drawer_container');
-    expect(drawerContainer).toBeTruthy();
-
-    const drawerContent = await findByText(content);
-    expect(drawerContent).toBeTruthy();
-  });
-
-  test('Drawer closeCTA works properly when clicked', async () => {
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <Drawer isOpen={true} size="33%" onClose={closeCTA}>
-        <DrawerHeader>
-          <div>{content}</div>
-        </DrawerHeader>
-      </Drawer>
-    );
-
-    const closeButton = await findByTestId('ictinus_drawer_close_button');
-    fireEvent.click(closeButton);
-
-    expect(closeCTA).toHaveBeenCalledTimes(1);
-  });
-
-  test('Drawer closeCTA will get triggered when Esc button is clicked', async () => {
-    const closeCTA = vi.fn();
-
-    render(
-      <Drawer isOpen={true} size="33%" onClose={closeCTA}>
-        <DrawerHeader>
-          <div>{content}</div>
-        </DrawerHeader>
-      </Drawer>
-    );
-
-    fireEvent.keyDown(document.body, {
-      key: 'Escape',
-      keyCode: 27,
-      which: 27,
-    });
-
-    expect(closeCTA).toHaveBeenCalledTimes(1);
-  });
-
-  test('Drawer with no fixed header/footer has the whole container scrollable', async () => {
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <Drawer isOpen={true} size="33%" onClose={closeCTA}>
-        <DrawerHeader>
-          <div>{content}</div>
-        </DrawerHeader>
-        <DrawerContent>
-          <div>{content}</div>
-        </DrawerContent>
-        <DrawerFooter>
-          <div>{content}</div>
-        </DrawerFooter>
-      </Drawer>
-    );
-
-    const drawerContainer = await findByTestId('ictinus_drawer_drawer_container');
-    expect(drawerContainer).toBeTruthy();
-
-    const containerComputedStyle = getComputedStyle(drawerContainer);
-
-    expect('auto').toContain(containerComputedStyle.overflowY);
-
-    const drawerContent = await findByTestId('ictinus_drawer_content');
-    expect(drawerContent).toBeTruthy();
-
-    const contentComputedStyle = getComputedStyle(drawerContent);
-
-    expect('').toContain(contentComputedStyle.overflowY);
-  });
-
-  test('Drawer with fixed header/footer has the content scrollable', async () => {
-    const closeCTA = vi.fn();
-
-    const { findByTestId } = render(
-      <Drawer isOpen={true} size="33%" onClose={closeCTA} hasFixedLayout>
-        <DrawerHeader>
-          <div>{content}</div>
-        </DrawerHeader>
-        <DrawerContent>
-          <div>{content}</div>
-        </DrawerContent>
-        <DrawerFooter>
-          <div>{content}</div>
-        </DrawerFooter>
-      </Drawer>
-    );
-
-    const drawerContainer = await findByTestId('ictinus_drawer_drawer_container');
-    expect(drawerContainer).toBeTruthy();
-
-    const containerComputedStyle = getComputedStyle(drawerContainer);
-
-    expect('').toContain(containerComputedStyle.overflowY);
-
-    const drawerContent = await findByTestId('ictinus_drawer_content');
-    expect(drawerContent).toBeTruthy();
-
-    const contentComputedStyle = getComputedStyle(drawerContent);
-
-    expect('auto').toContain(contentComputedStyle.overflowY);
-  });
-});

package/src/components/Drawer/Drawer.tsx

@@ -1,80 +0,0 @@
-import type { RefObject } from 'react';
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { useDOMRef } from '~/components/utils/useDOMRef';
-import useEscape from '~/hooks/useEscape';
-import { useOverlayStack } from '~/hooks/useOverlayStack';
-import { anchorStyle, backdropStyle, overlayStyle } from './Drawer.style';
-import type { DrawerProps } from './Drawer.types';
-import { DrawerContextProvider } from './DrawerContext';
-
-const Drawer = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DrawerProps>>(
-  (
-    {
-      isOpen,
-      onClose,
-      anchor,
-      size = 'auto',
-      isBackgroundActive = false,
-      dataTestPrefixId = 'ictinus_drawer',
-      hasFixedLayout = false,
-      parent = document.body,
-      children,
-    },
-    ref: RefObject<HTMLDivElement>
-  ) => {
-    const overlayRef = useDOMRef(ref);
-
-    const { overlayProps } = useOverlayStack({
-      isVisible: isOpen,
-      isNonModal: false,
-      overlayRef,
-      onClose: () => {
-        if (!isBackgroundActive) {
-          onClose();
-        }
-      },
-    });
-
-    useEscape(() => {
-      if (!isBackgroundActive) {
-        onClose();
-      }
-    });
-
-    useEffect(() => {
-      if (isOpen) {
-        parent.style.overflow = 'hidden';
-      } else {
-        parent.style.overflow = '';
-      }
-    }, [isOpen, parent.style]);
-
-    if (parent === null) {
-      return null;
-    }
-
-    return ReactDOM.createPortal(
-      <DrawerContextProvider hasFixedLayout={hasFixedLayout} onClose={onClose}>
-        <div css={backdropStyle({ isOpen, anchor, size, isBackgroundActive })}>
-          <div css={anchorStyle({ anchor, size, isBackgroundActive })}>
-            <div
-              {...overlayProps}
-              ref={overlayRef}
-              css={overlayStyle({ isOpen, anchor, hasFixedLayout })}
-              data-testid={`${dataTestPrefixId}_drawer_container`}
-              tabIndex={-1}
-            >
-              {children}
-            </div>
-          </div>
-        </div>
-      </DrawerContextProvider>,
-      parent
-    );
-  }
-);
-
-Drawer.displayName = 'Drawer';
-
-export default Drawer;

package/src/components/Drawer/Drawer.types.ts

@@ -1,20 +0,0 @@
-import type { TestProps } from 'utils/types';
-
-export type AnchorType = 'bottom' | 'left' | 'right' | 'top';
-
-export type DrawerProps = {
-  /**  If true, the drawer is open.*/
-  isOpen: boolean;
-  /** Callback fired when the component requests to be closed. */
-  onClose: () => void;
-  /** Side from which the overlay will appear. */
-  anchor?: AnchorType;
-  /** Drawer size is directly assigned to width or height css properties */
-  size?: string;
-  /** Whether the background behind the Drawer is interactive. Defaults to false */
-  isBackgroundActive?: boolean;
-  /** If true, then the header and footer are fixed positioned */
-  hasFixedLayout?: boolean;
-  /** The parent element, in which the drawer will be rendered. Defaults to document.body */
-  parent?: HTMLElement | null;
-} & TestProps;

package/src/components/Drawer/DrawerContext.tsx

@@ -1,103 +0,0 @@
-import type { Dispatch, FCC } from 'react';
-import React, { createContext, useContext } from 'react';
-
-const SET_HAS_FIXED_LAYOUT = 'SET_HAS_FIXED_LAYOUT';
-const SET_ON_CLOSE = 'SET_ON_CLOSE';
-const TOGGLE_IS_SCROLLBAR_ON_TOP = 'TOGGLE_IS_SCROLLBAR_ON_TOP';
-const TOGGLE_IS_SCROLLBAR_ON_BOTTOM = 'TOGGLE_IS_SCROLLBAR_ON_BOTTOM';
-
-export type DrawerContextState = {
-  hasFixedLayout?: boolean;
-  onClose?: () => void;
-  isScrollbarOnTop?: boolean;
-  isScrollbarOnBottom?: boolean;
-};
-
-export type DrawerContextAction = {
-  type:
-    | typeof SET_HAS_FIXED_LAYOUT
-    | typeof SET_ON_CLOSE
-    | typeof TOGGLE_IS_SCROLLBAR_ON_BOTTOM
-    | typeof TOGGLE_IS_SCROLLBAR_ON_TOP;
-  payload: any;
-};
-
-export const setHasFixedLayout = (payload): DrawerContextAction => {
-  return {
-    type: SET_HAS_FIXED_LAYOUT,
-    payload,
-  };
-};
-
-export const setOnClose = (payload): DrawerContextAction => {
-  return {
-    type: SET_ON_CLOSE,
-    payload,
-  };
-};
-
-export const toggleIsScrollbarOnTop = (payload): DrawerContextAction => {
-  return {
-    type: TOGGLE_IS_SCROLLBAR_ON_TOP,
-    payload,
-  };
-};
-
-export const toggleIsScrollbarOnBottom = (payload): DrawerContextAction => {
-  return {
-    type: TOGGLE_IS_SCROLLBAR_ON_BOTTOM,
-    payload,
-  };
-};
-
-export const DrawerContext =
-  createContext<[DrawerContextState, Dispatch<DrawerContextAction>]>(null);
-
-const reducer = (state: DrawerContextState, action: DrawerContextAction) => {
-  switch (action.type) {
-    case SET_HAS_FIXED_LAYOUT:
-      return {
-        ...state,
-        hasFixedLayout: action.payload,
-      };
-    case SET_ON_CLOSE:
-      return {
-        ...state,
-        onClose: action.payload,
-      };
-    case TOGGLE_IS_SCROLLBAR_ON_TOP:
-      return {
-        ...state,
-        isScrollbarOnTop: action.payload,
-      };
-    case TOGGLE_IS_SCROLLBAR_ON_BOTTOM:
-      return {
-        ...state,
-        isScrollbarOnBottom: action.payload,
-      };
-    default:
-      return state;
-  }
-};
-
-export type DrawerContextReducer = (
-  state: DrawerContextState,
-  action: DrawerContextAction
-) => DrawerContextState;
-
-export const DrawerContextProvider: FCC<{ hasFixedLayout?: boolean; onClose: () => void }> = ({
-  hasFixedLayout = false,
-  onClose = () => null,
-  children,
-}) => {
-  const [state, dispatch] = React.useReducer<DrawerContextReducer>(reducer, {
-    hasFixedLayout,
-    onClose,
-    isScrollbarOnTop: false,
-    isScrollbarOnBottom: false,
-  });
-
-  return <DrawerContext.Provider value={[state, dispatch]}>{children}</DrawerContext.Provider>;
-};
-
-export const useDrawerContext = () => useContext(DrawerContext);

package/src/components/Drawer/components/DrawerContent/DrawerContent.tsx

@@ -1,26 +0,0 @@
-import { rem } from 'polished';
-import { type FCC } from 'react';
-import type { TestProps } from 'utils/types';
-
-import useDrawerContentObserver from './hooks/useDrawerContentObserver';
-import { contentStyle } from '../../Drawer.style';
-import { useDrawerContext } from '../../DrawerContext';
-
-const DrawerContent: FCC<TestProps> = ({ children, dataTestPrefixId = 'ictinus_drawer' }) => {
-  const [{ hasFixedLayout }] = useDrawerContext();
-
-  const { contentTopRef, contentBottomRef } = useDrawerContentObserver();
-
-  return (
-    <div
-      data-testid={`${dataTestPrefixId}_content`}
-      css={contentStyle({ hasFixedHeader: hasFixedLayout })}
-    >
-      <div css={{ height: rem(1) }} ref={contentTopRef} />
-      {children}
-      <div css={{ height: rem(1) }} ref={contentBottomRef} />
-    </div>
-  );
-};
-
-export default DrawerContent;

package/src/components/Drawer/components/DrawerContent/hooks/useDrawerContentObserver.ts

@@ -1,52 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-import {
-  toggleIsScrollbarOnBottom,
-  toggleIsScrollbarOnTop,
-  useDrawerContext,
-} from 'components/Drawer/DrawerContext';
-
-const useDrawerContentObserver = () => {
-  const [, dispatch] = useDrawerContext();
-
-  const contentTopRef = useRef();
-  const contentBottomRef = useRef();
-
-  const obTopCallback = useCallback(
-    (payload) => {
-      dispatch(toggleIsScrollbarOnTop(payload[0].isIntersecting));
-    },
-    [dispatch]
-  );
-
-  const obBottomCallback = useCallback(
-    (payload) => {
-      dispatch(toggleIsScrollbarOnBottom(payload[0].isIntersecting));
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    const obTop = new IntersectionObserver(obTopCallback);
-
-    if (contentTopRef.current) {
-      obTop.observe(contentTopRef.current);
-    }
-
-    return () => obTop.disconnect();
-  }, [obTopCallback, contentTopRef]);
-
-  useEffect(() => {
-    const obBottom = new IntersectionObserver(obBottomCallback);
-
-    if (contentBottomRef.current) {
-      obBottom.observe(contentBottomRef.current);
-    }
-
-    return () => obBottom.disconnect();
-  }, [obBottomCallback, contentBottomRef]);
-
-  return { contentTopRef, contentBottomRef };
-};
-
-export default useDrawerContentObserver;

package/src/components/Drawer/components/DrawerContent/index.ts

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