@orfium/ictinus 5.43.0 → 5.43.2

package/src/components/DatePicker/constants.ts

@@ -26,44 +26,3 @@ export const CALENDAR_DEFAULT_OPTIONS: ExtraOption[] = [
     dates: [currentDay],
   },
 ];
-
-/** Stories constants */
-
-export const mockDate = currentDay;
-export const rangePickerOptions = [true, false];
-export const filterTypeOptions = ['preset', 'added'] as const;
-
-export const disableDates = {
-  days: [
-    mockDate.toDate(),
-    mockDate.subtract(1, 'day').toDate(),
-    mockDate.subtract(2, 'day').toDate(),
-    mockDate.subtract(4, 'day').toDate(),
-  ],
-};
-export const options = {
-  'Disable days of week (only Monday)': { daysOfWeek: [0, 2, 3, 4, 5, 6] },
-  'Disable dates after this day': { after: mockDate },
-  'Disable dates before this day': { before: mockDate },
-  'Disable dates before and after a date (-/+ 7 days)': {
-    before: mockDate.subtract(7, 'day').toDate(),
-    after: mockDate.add(7, 'day').toDate(),
-  },
-  'Enable dates from/to a date (7 days)': {
-    before: mockDate.subtract(7, 'day').toDate(),
-    after: mockDate.add(7, 'day').toDate(),
-  },
-  'Array of disabled dates(Today, last 2 days, and the 4th day to today)': disableDates,
-};
-
-export const dateFormatOptions = {
-  "Enables system's locale format": undefined,
-  'MM/DD/YYYY': 'MM/DD/YYYY',
-  'DD/MM/YYYY': 'DD/MM/YYYY',
-  'MMMM D, YYYY': 'MMMM D, YYYY',
-  'dddd, MMMM D, YYYY': 'dddd, MMMM D, YYYY',
-  'M/D/YYYY': 'M/D/YYYY',
-  'MMM D, YYYY': 'MMM D, YYYY',
-  'ddd, MMM D, YYYY': 'ddd, MMM D, YYYY',
-  'DD MMM YYYY': 'DD MMM YYYY',
-};

package/src/components/DatePicker/utils.ts

@@ -1,9 +1,6 @@
-import { KEYBOARD_EVENT_KEYS } from 'hooks/useKeyboardEvents';
 import type { Dayjs } from 'utils/date';
 import dayjs from 'utils/date';
-
 import type { Range } from './OverlayComponent/OverlayComponent';
-import { fireEvent } from '@testing-library/react';
 
 const fakeDate = dayjs('11-03-2020 12:00:00');
 const getDefaultDate = (date?: undefined | Dayjs) =>
@@ -18,30 +15,3 @@ export const initDates = (value: { from?: Date; to?: Date }): Range => {
     to: value.to ? dayjs(value.to) : undefined,
   };
 };
-
-export const clickOnElement = (element: HTMLElement, key: string, charCode: number) =>
-  fireEvent.keyDown(element, {
-    key: key,
-    code: key,
-    charCode: charCode,
-  });
-
-export const navigateOnElement = (
-  element: HTMLElement,
-  path: (keyof typeof KEYBOARD_EVENT_KEYS)[]
-) => {
-  path.forEach((key) => {
-    switch (key) {
-      case KEYBOARD_EVENT_KEYS.ArrowLeft:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowLeft, 37);
-      case KEYBOARD_EVENT_KEYS.ArrowUp:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowUp, 38);
-      case KEYBOARD_EVENT_KEYS.ArrowRight:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowRight, 39);
-      case KEYBOARD_EVENT_KEYS.ArrowDown:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowDown, 40);
-      default:
-        return null;
-    }
-  });
-};

package/src/components/ExpandCollapse/ExpandCollapse.types.ts

@@ -1,5 +1,5 @@
-import type { ReactComponentLike } from 'prop-types';
-import type * as React from 'react';
+
+import { type ElementType, type ReactElement, type ReactEventHandler, type ReactNode } from 'react';
 import type { TestProps } from 'utils/types';
 
 export type SharedProps = {
@@ -7,14 +7,14 @@ export type SharedProps = {
    * A function accepting a click handler and a boolean representing the current expansion state. Returns the elements containing the text and the
    * expand/collapse button
    * */
-  textAndControl: (x: React.ReactEventHandler, y: boolean) => React.ReactElement;
+  textAndControl: (x: ReactEventHandler, y: boolean) => ReactElement;
   /**
    * The type of the component that wraps the action and content. Must be able to hold a
    * `data-testid` prop
    *
    * @default div
    */
-  component?: ReactComponentLike;
+  component?: ElementType;
   /**
    * Initial expansion state.
    *
@@ -31,12 +31,12 @@ export type SharedProps = {
    * A function accepting a boolean representing the current expansion state. Returns the
    * collapsible/expandable content. Mutually exclusive with children.
    */
-  content?: (x: boolean) => React.ReactNode;
+  content?: (x: boolean) => ReactNode;
   /**
    * A function accepting a boolean representing the current expansion state. Returns the
    * collapsible/expandable content. Mutually exclusive with content.
    */
-  children?: (x: boolean) => React.ReactNode;
+  children?: (x: boolean) => ReactNode;
 } & TestProps;
 
 export type ExternalProps = {
@@ -49,7 +49,7 @@ export type ExternalProps = {
   /**
    * Change handler for the case when the component is controlled
    */
-  onChange: React.ReactEventHandler;
+  onChange: ReactEventHandler;
 };
 
 export type InternalProps = {

package/src/components/Filter/components/FilterButton/FilterButton.tsx

@@ -64,7 +64,7 @@ export const FilterButton = React.forwardRef<HTMLButtonElement, FilterButtonProp
       >
         {children}
       </div>
-      {moreFilters && !isActive && (
+      {moreFilters > 0 && !isActive && (
         <Tag
           css={{ cursor: 'pointer' }}
           color="blue"

package/src/components/IconButton/IconButton.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
-import { vars } from '@orfium/tokens';
 import type { PrimitiveButtonTypes } from 'components/Button/Button.types';
 import type { ButtonBaseProps } from 'components/ButtonBase/ButtonBase';
 import ButtonBase from 'components/ButtonBase/ButtonBase';
-import { BUTTON_COLOR } from 'components/ButtonBase/constants';
-import type { AcceptedIconNames } from '../Icon';
-import Icon from '../Icon';
+import { BUTTON_ICON_COLOR } from 'components/ButtonBase/constants';
+import { Icon, type IconProps } from '../../icon';
 
 export type IconButtonShape = 'circle' | 'square';
 
@@ -17,7 +15,7 @@ export type IconButtonProps = Omit<
   /** This property defines the type of the IconButton */
   type?: PrimitiveButtonTypes;
   /** This property defines witch icon to use */
-  iconName: AcceptedIconNames;
+  iconName: IconProps['name'];
   /** This property defines the shape of the IconButton */
   shape?: IconButtonShape;
 };
@@ -25,8 +23,6 @@ export type IconButtonProps = Omit<
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
   const { iconName, size = 'normal', type = 'primary', shape = 'circle', dataTestPrefixId } = props;
 
-  const iconColor = BUTTON_COLOR[type].text;
-
   return (
     <ButtonBase
       {...props}
@@ -35,7 +31,11 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props,
       shape={shape}
       dataTestPrefixId={dataTestPrefixId ? `${dataTestPrefixId}-icon-` : 'icon-'}
     >
-      <Icon size={vars.sizing[size === 'compact' ? '4' : '5']} name={iconName} color={iconColor} />
+      <Icon
+        size={size === 'compact' ? 'sm' : 'md'}
+        name={iconName}
+        color={BUTTON_ICON_COLOR[type]}
+      />
     </ButtonBase>
   );
 });

package/src/components/Link/Link.types.ts

@@ -1,5 +1,5 @@
-import type { ReactComponentLike } from 'prop-types';
-import type { AnchorHTMLAttributes } from 'react';
+
+import type { AnchorHTMLAttributes, ElementType } from 'react';
 
 import type { AcceptedIconNames } from 'components/Icon';
 
@@ -17,7 +17,7 @@ export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   /** Whether the link is disabled*/
   isDisabled?: boolean;
   /** The component used for the root node */
-  component?: ReactComponentLike;
+  component?: ElementType;
   /** Data Test Id prefix **/
   dataTestPrefixId?: string;
 };

package/src/components/Table/constants.tsx

@@ -1,348 +1,6 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { SortingState } from '@tanstack/react-table';
-import Typography from 'components/Typography';
-import type React from 'react';
-import type { TableColumn, TableRow } from './types';
-
 export const ACTIONS_CELL_WIDTH = 52;
 export const ACTIONS_BAR_HEIGHT = 44;
 
-export type SimpleData = {
-  firstName: string;
-  lastName: string | undefined;
-  age: number | undefined;
-  job: string | undefined | React.JSX.Element;
-};
-
-export const contentAlignOptions = ['left', 'center', 'right'];
-
-export const simpleColumns: TableColumn<SimpleData>[] = [
-  { id: 'firstName', header: 'First Name' },
-  { id: 'lastName', header: 'Last Name' },
-  { id: 'age', header: 'Age' },
-  { id: 'job', header: 'Job' },
-];
-
-export const groupedColumns = [
-  {
-    id: 'personalDetails',
-    header: 'Personal Details',
-    columns: [
-      { id: 'firstName', header: 'First Name' },
-      { id: 'lastName', header: 'Last Name' },
-    ],
-  },
-  { id: 'age', header: 'Age' },
-  { id: 'job', header: 'Job' },
-];
-
-const getDetails = (name: string) => {
-  {
-    return (
-      <div css={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Typography variant="label01">Famous Quotes</Typography>
-        {Object.keys(quotes[name]).map((__, index) => (
-          <Typography key={index} type="active" isItalic>
-            {quotes[name][index + 1]}
-          </Typography>
-        ))}
-      </div>
-    );
-  }
-};
-
-export const sortDataByKey = (data, key, order = 'asc') => {
-  const returnData = [...data];
-
-  return returnData.sort((a, b) => {
-    const valueA = a.cells[key];
-    const valueB = b.cells[key];
-
-    const comparison =
-      key === 'age'
-        ? parseInt(valueA, 10) - parseInt(valueB, 10)
-        : valueA < valueB
-          ? -1
-          : valueA > valueB
-            ? 1
-            : 0;
-
-    return order === 'desc' ? -comparison : comparison;
-  });
-};
-
-export const sortedData = (data, sorting: SortingState) => {
-  const { id = undefined, desc = undefined } = sorting?.length ? sorting[0] : {};
-
-  if (id) {
-    return sortDataByKey(data, id, desc ? 'desc' : 'asc');
-  } else {
-    return data;
-  }
-};
-
-export const multiSortDataByKey = (data, keys) => {
-  const returnData =
-    keys.length === 0
-      ? data
-      : data.sort((a, b) => {
-          for (const { id, desc } of keys) {
-            const valueA = a.cells[id];
-            const valueB = b.cells[id];
-
-            let comparison;
-            if (id === 'age') {
-              comparison = parseInt(valueA, 10) - parseInt(valueB, 10);
-            } else {
-              comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
-            }
-
-            if (comparison !== 0) {
-              return desc ? -comparison : comparison;
-            }
-          }
-
-          return 0;
-        });
-
-  return returnData;
-};
-
-const quotes = {
-  rachel: {
-    1: "It's like all my life everyone has always told me, 'You're a shoe! You're a shoe! You're a shoe!' Well, what if I don't want to be a shoe? What if I want to be a purse, you know, or a hat!",
-    2: 'I got off the plane.',
-    3: 'Oh, you know what? I am gonna go get one of those job things.',
-  },
-  ross: {
-    1: 'We were on a break!',
-    2: 'Pivot! Pivot! Pivot!',
-    3: 'Hi, I’m Ross. I’m divorced, and I have a son.',
-  },
-  monica: {
-    1: 'Welcome to the real world! It sucks. You’re gonna love it.',
-    2: 'I KNOW!',
-    3: 'Rules are good! Rules help control the fun!',
-  },
-  chandler: {
-    1: 'Could I BE any more...?',
-    2: 'I’m not great at the advice. Can I interest you in a sarcastic comment?',
-    3: 'I say more dumb things before 9 a.m. than most people say all day.',
-  },
-  joey: {
-    1: "How you doin'?",
-    2: 'Joey doesn’t share food!',
-    3: "It's a moo point. It's like a cow's opinion; it doesn't matter. It's moo.",
-  },
-  phoebe: {
-    1: 'Smelly Cat, Smelly Cat, what are they feeding you?',
-    2: 'Oh, I wish I could, but I don’t want to.',
-    3: 'They don’t know that we know they know we know.',
-  },
-  gunther: {
-    1: 'I love you...in a really, really big, pretend-to-like-your-taste-in-music, let-you-eat-the-last-piece-of-cheesecake, hold-a-radio-over-my-head-outside-your-window, unfortunate way that makes me hate you, love you.',
-  },
-  janice: { 1: 'Oh. My. God.' },
-  richard: {
-    1: 'You know, I see what you are doing. You are just pointing out all the things that are wrong with me.',
-  },
-  estelle: { 1: 'Acting is weird' },
-  mike: {
-    1: 'I’d rather be with you in an ordinary life than without you in an extraordinary one.',
-  },
-  charlie: {
-    1: 'This is so humiliating. You would never see this at Princeton. You would see it at Yale, but never at Princeton.',
-  },
-  emily: {
-    1: 'My name is Emily Waltham. Emily, as in Emily Dickinson. Waltham, as in Waltham, Massachusetts. And I have never met you before in my life.',
-  },
-  carol: { 1: 'Fine by me!' },
-  frank: { 1: 'Can you believe it? Three babies! I mean, it’s like a dream come true.' },
-  barry: { 1: 'Well, at least she had the chance to leave a man at the altar.' },
-  mrHeckles: { 1: 'You are disturbing my oboe practice.' },
-  tag: { 1: 'Im the king of bad birthday presents.' },
-  pete: { 1: 'I want to be the Ultimate Fighting Champion.' },
-  paul: {
-    1: 'Hey, I was young once too. I remember I used to sneak around, having fun, getting into trouble.',
-  },
-};
-
-export const simpleData = (isDetailed?: boolean): TableRow<SimpleData>[] => [
-  {
-    cells: {
-      firstName: 'Rachel',
-      lastName: 'Green',
-      age: 30,
-      job: 'Fashion Executive',
-    },
-    ...(isDetailed && { details: getDetails('rachel') }),
-  },
-  {
-    cells: {
-      firstName: 'Ross',
-      lastName: 'Geller',
-      age: 32,
-      job: 'Paleontologist',
-    },
-    ...(isDetailed && { details: getDetails('ross') }),
-  },
-  {
-    cells: { firstName: 'Monica', lastName: 'Geller', age: 31, job: 'Chef' },
-    ...(isDetailed && { details: getDetails('monica') }),
-  },
-  {
-    cells: { firstName: 'Chandler', lastName: 'Bing', age: 32, job: '?' },
-    ...(isDetailed && { details: getDetails('chandler') }),
-  },
-  {
-    cells: {
-      firstName: 'Joey',
-      lastName: 'Tribbiani',
-      age: 30,
-      job: 'Actor',
-    },
-    ...(isDetailed && { details: getDetails('joey') }),
-  },
-  {
-    cells: {
-      firstName: 'Phoebe',
-      lastName: 'Buffay',
-      age: 31,
-      job: 'Massage Therapist',
-    },
-    ...(isDetailed && { details: getDetails('phoebe') }),
-  },
-];
-
-export const moreData = (isDetailed?: boolean): TableRow<SimpleData>[] => [
-  {
-    cells: {
-      firstName: 'Gunther',
-      lastName: undefined,
-      age: 35,
-      job: 'Central Perk Manager',
-    },
-    ...(isDetailed && { details: getDetails('gunther') }),
-  },
-  {
-    cells: {
-      firstName: 'Janice',
-      lastName: 'Litman-Foralnik',
-      age: 35,
-      job: 'Personal Shopper',
-    },
-    ...(isDetailed && { details: getDetails('janice') }),
-  },
-  {
-    cells: {
-      firstName: 'Richard',
-      lastName: 'Burke',
-      age: 50,
-      job: 'Ophthalmologist',
-    },
-    ...(isDetailed && { details: getDetails('richard') }),
-  },
-  {
-    cells: {
-      firstName: 'Estelle',
-      lastName: 'Leonard',
-      age: undefined,
-      job: 'Talent Agent',
-    },
-    ...(isDetailed && { details: getDetails('estelle') }),
-  },
-  {
-    cells: {
-      firstName: 'Mike',
-      lastName: 'Hannigan',
-      age: 31,
-      job: undefined,
-    },
-    ...(isDetailed && { details: getDetails('mike') }),
-  },
-  {
-    cells: {
-      firstName: 'Charlie',
-      lastName: 'Wheeler',
-      age: 28,
-      job: 'Paleontologist',
-    },
-    ...(isDetailed && { details: getDetails('charlie') }),
-  },
-  {
-    cells: {
-      firstName: 'Emily',
-      lastName: 'Waltham',
-      age: 28,
-      job: undefined,
-    },
-    ...(isDetailed && { details: getDetails('emily') }),
-  },
-  {
-    cells: {
-      firstName: 'Carol',
-      lastName: 'Willick',
-      age: 35,
-      job: undefined,
-    },
-    ...(isDetailed && { details: getDetails('carol') }),
-  },
-  {
-    cells: {
-      firstName: 'Frank',
-      lastName: 'Buffay Jr.',
-      age: 29,
-      job: undefined,
-    },
-    ...(isDetailed && { details: getDetails('frank') }),
-  },
-  {
-    cells: {
-      firstName: 'Barry',
-      lastName: 'Farber',
-      age: 30,
-      job: 'Orthodontist',
-    },
-    ...(isDetailed && { details: getDetails('barry') }),
-  },
-  {
-    cells: {
-      firstName: 'Mr. Heckles',
-      lastName: undefined,
-      age: 60,
-      job: 'Retired',
-    },
-    ...(isDetailed && { details: getDetails('mrHeckles') }),
-  },
-  {
-    cells: {
-      firstName: 'Tag',
-      lastName: 'Jones',
-      age: 24,
-      job: 'Assistant',
-    },
-    ...(isDetailed && { details: getDetails('tag') }),
-  },
-  {
-    cells: {
-      firstName: 'Pete',
-      lastName: 'Becker',
-      age: 32,
-      job: 'Software Engineer',
-    },
-    ...(isDetailed && { details: getDetails('pete') }),
-  },
-  {
-    cells: {
-      firstName: 'Paul',
-      lastName: 'Stevens',
-      age: 50,
-      job: 'Lawyer',
-    },
-    ...(isDetailed && { details: getDetails('paul') }),
-  },
-];
-
 export const contentAlignToFlex = {
   left: 'flex-start',
   center: 'center',

package/src/components/TextField/TextField.tsx

@@ -8,7 +8,8 @@ import { omit } from 'lodash-es';
 import type { InputHTMLAttributes } from 'react';
 import React, { useRef } from 'react';
 import isEqual from 'react-fast-compare';
-import InputMask from 'react-input-mask';
+// TODO: this allows backwards compatibility for React 19. Migrate to a more popular library
+import InputMask from '@mona-health/react-input-mask';
 import { generateUniqueID } from 'utils/helpers';
 import type { TestProps } from 'utils/types';
 import Label from '../Label';
@@ -81,20 +82,16 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
     });
 
   const inputProps = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     readOnly: isLocked || isReadOnly,
     css: inputStyle({ label, placeholder, isLocked, isDisabled, size }),
     ...(size === 'normal'
       ? { placeholder: placeholder ? `${placeholder} ${isRequired ? '*' : ''}` : label }
       : { placeholder: ' ' }),
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     required: isRequired,
     id: id,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     disabled: isDisabled || isLocked,
     onInput: onInput,
     'data-testid': rest.dataTestId ? `input_${rest.dataTestId}` : 'input',
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     'aria-invalid': status?.type === 'error',
     'aria-describedby': hintMessageId,
     ...omit(rest, 'dataTestId'),
@@ -120,12 +117,11 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref
         <TextInputBase {...props} status={{ ...status, id: hintMessageId }} sx={sx}>
           <div css={{ display: 'flex', flex: 1 }}>
             {mask ? (
-              // @ts-expect-error - too complex
               <InputMask
                 {...inputProps}
+                ref={combinedRefs}
                 mask={mask}
-                maskChar={' '}
-                inputRef={combinedRefs}
+                maskPlaceholder={' '}
                 dangerouslySetInnerHTML={undefined}
               />
             ) : (