@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/TextField/TextField.test.tsx

@@ -1,145 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import type { ChangeEvent, ComponentProps, KeyboardEvent } from 'react';
-import { useState } from 'react';
-import { fireEvent, render, screen } from '~/test';
-import TextField from './TextField';
-
-const StatefulTextField = ({
-  values,
-  mask,
-  status,
-  suffix,
-  size,
-  label,
-  isDisabled,
-  isRequired,
-}: Omit<ComponentProps<typeof TextField>, 'value'> & {
-  values?: string[];
-}) => {
-  const [value, setValue] = useState('');
-  const [tags, setTags] = useState<string[]>(values);
-
-  const addTag = (tag: string) => {
-    setTags([...tags, tag]);
-  };
-  const removeTag = (tag: string) => {
-    setTags(tags.filter((t) => t !== tag));
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) =>
-    setValue((event.target as HTMLInputElement).value);
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter': {
-        if (!value) return;
-        addTag(value);
-        setValue('');
-
-        return;
-      }
-      case 'Backspace': {
-        if (value || !tags.length) return;
-        removeTag(tags[tags.length - 1]);
-
-        return;
-      }
-    }
-  };
-
-  const handleClearAll = () => {
-    setTags([]);
-    setValue('');
-  };
-
-  const isMaskedTextField = !!mask;
-
-  return (
-    <TextField
-      value={value}
-      mask={isMaskedTextField ? mask : undefined}
-      isMulti={values?.length > 0}
-      data-testid="input_showcase"
-      onKeyDown={handleKeyDown}
-      onMultiValueDelete={removeTag}
-      onMultiValueClearAll={handleClearAll}
-      onChange={handleChange}
-      tags={tags}
-      onInput={handleChange}
-      status={status}
-      suffix={suffix}
-      size={size}
-      label={label}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
-    />
-  );
-};
-
-export const values = ['Value 1', 'Value 2'];
-
-describe('Multi TextField', () => {
-  let input: HTMLInputElement;
-  let tags: HTMLElement[];
-  let newTag: HTMLElement;
-
-  beforeEach(() => {
-    render(<StatefulTextField values={values} label="Multi TextField" />);
-  });
-
-  beforeEach(() => {
-    input = screen.getByTestId('input_showcase') as HTMLInputElement;
-  });
-
-  it('renders the initial values', async () => {
-    tags = await screen.findAllByTestId(/tag_container/);
-    expect(tags.length).toEqual(values.length);
-  });
-
-  it('creates a new Tag when there is input and Enter is pressed', async () => {
-    await userEvent.type(input, 'New item{enter}');
-
-    newTag = screen.getByTestId('tag_2_tag_container');
-    expect(newTag).toBeVisible();
-    expect(newTag.innerHTML).toContain('New item');
-  });
-
-  it('deletes the Tag when the delete button is clicked', async () => {
-    await userEvent.click(screen.getByTestId('tag_1_tag_suffix'));
-    expect(screen.queryByTestId('tag_1_tag_container')).not.toBeInTheDocument();
-  });
-
-  it('deletes all the Tags when the Delete All button is clicked', async () => {
-    await userEvent.click(screen.getByTestId('select-right-icon'));
-    expect(screen.queryByTestId('tag_0_tag_container')).not.toBeInTheDocument();
-  });
-
-  it('deletes a tag when Backspace is pressed', async () => {
-    await userEvent.type(input, '{backspace}');
-    expect(screen.queryByTestId('tag_1_tag_container')).not.toBeInTheDocument();
-  });
-});
-
-describe('Masked TextField', () => {
-  let input: HTMLInputElement;
-
-  beforeEach(() => {
-    render(<StatefulTextField mask="+(999)" label="Masked TextField" />);
-  });
-
-  beforeEach(() => {
-    input = screen.getByTestId('input_showcase') as HTMLInputElement;
-  });
-
-  it('shows the mask as a placeholder when focused', async () => {
-    input.focus();
-
-    expect(input.value).toEqual('+(   )');
-  });
-
-  it('formats the input correctly according to the mask', async () => {
-    fireEvent.change(input, { target: { value: '123' } });
-
-    expect(input.value).toEqual('+(123)');
-  });
-});

package/src/components/TextField/TextField.tsx

@@ -1,152 +0,0 @@
-import MultiTextFieldBase from 'components/MultiTextFieldBase/MultiTextFieldBase';
-import type { SelectOption } from 'components/Select';
-import type { TextInputBaseProps } from 'components/TextInputBase';
-import TextInputBase from 'components/TextInputBase';
-import { inputStyle } from 'components/TextInputBase/TextInputBase.style';
-import useFieldUtils from 'hooks/useFieldUtils';
-import { omit } from 'lodash-es';
-import type { InputHTMLAttributes } from 'react';
-import React, { useRef } from 'react';
-import isEqual from 'react-fast-compare';
-// 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';
-import { suffixContainerStyle } from './TextField.style';
-
-export type InputProps = Partial<
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'disabled' | 'size'>
->;
-
-type MaskProps = { mask?: never } | { mask?: string | (string | RegExp)[]; placeholder?: never };
-
-export type TextFieldProps = {
-  /** The id of the text field that will be used as for in label too */
-  id?: string;
-  /** Callback fired when the `input` is blurred. */
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  /** Callback fired when the `input` is changed. */
-  onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-  /** Callback fired when the `input` is focused. */
-  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  /** Callback fired when the `input` has a key down event. */
-  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-  /** Callback fired when the `input` value typed is changed */
-  onInput?: React.EventHandler<any>;
-  /** Boolean to make the input readonly. Default to false. */
-  isReadOnly?: boolean;
-  /** [For MultiTextField] If true, the user can add multiple tags as an input */
-  isMulti?: boolean;
-  /** [For MultiTextField] The values of the tags */
-  tags?: string[];
-  /** [For MultiTextField] A callback for when a Tag value is deleted */
-  onMultiValueDelete?: (value: string) => void;
-  /** [For MultiTextField] A callback for when all values are deleted  */
-  onMultiValueClearAll?: () => void;
-} & TextInputBaseProps &
-  MaskProps &
-  InputProps &
-  TestProps;
-
-const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
-  const {
-    id: userDefinedId,
-    suffix = null,
-    label,
-    placeholder = '',
-    size = 'normal',
-    isRequired = false,
-    isDisabled,
-    isReadOnly,
-    status = { type: 'normal' },
-    onInput,
-    isMulti = false,
-    tags = [],
-    onMultiValueDelete,
-    onMultiValueClearAll = () => null,
-    mask,
-    sx,
-    ...rest
-  } = props;
-  const id = useRef(userDefinedId || generateUniqueID('textfield_')).current;
-
-  const { isLocked, hintMessageId, handleContainerClick, suffixContent, combinedRefs } =
-    useFieldUtils({
-      id,
-      suffix,
-      status,
-      size,
-      isDisabled,
-      ref,
-    });
-
-  const inputProps = {
-    readOnly: isLocked || isReadOnly,
-    css: inputStyle({ label, placeholder, isLocked, isDisabled, size }),
-    ...(size === 'normal'
-      ? { placeholder: placeholder ? `${placeholder} ${isRequired ? '*' : ''}` : label }
-      : { placeholder: ' ' }),
-    required: isRequired,
-    id: id,
-    disabled: isDisabled || isLocked,
-    onInput: onInput,
-    'data-testid': rest.dataTestId ? `input_${rest.dataTestId}` : 'input',
-    'aria-invalid': status?.type === 'error',
-    'aria-describedby': hintMessageId,
-    ...omit(rest, 'dataTestId'),
-  };
-
-  return (
-    <div onClick={handleContainerClick}>
-      {isMulti ? (
-        <MultiTextFieldBase
-          {...props}
-          isTextfield
-          onOptionDelete={onMultiValueDelete as (option?: string | SelectOption) => void}
-          onClearAllOptions={onMultiValueClearAll}
-          label={label}
-          onInput={onInput}
-          onKeyDown={rest.onKeyDown}
-          selectedOptions={tags}
-          value={rest.value}
-          status={{ ...status, id: hintMessageId }}
-          ref={combinedRefs}
-        />
-      ) : (
-        <TextInputBase {...props} status={{ ...status, id: hintMessageId }} sx={sx}>
-          <div css={{ display: 'flex', flex: 1 }}>
-            {mask ? (
-              <InputMask
-                {...inputProps}
-                ref={combinedRefs}
-                mask={mask}
-                maskPlaceholder={' '}
-                dangerouslySetInnerHTML={undefined}
-              />
-            ) : (
-              <input {...inputProps} ref={combinedRefs} />
-            )}
-            <Label
-              htmlFor={id}
-              label={label}
-              size={size}
-              isRequired={isRequired}
-              isAnimated={Boolean(rest.value)}
-              hasError={!isDisabled && status?.type === 'error'}
-            />
-          </div>
-          {suffixContent && (
-            <div aria-hidden={!suffixContent} css={suffixContainerStyle({ size })}>
-              {suffixContent}
-            </div>
-          )}
-        </TextInputBase>
-      )}
-    </div>
-  );
-});
-
-TextField.displayName = 'TextField';
-
-export default React.memo(TextField, isEqual);

package/src/components/TextField/components/commons.tsx

@@ -1,13 +0,0 @@
-import type { FCC, MouseEvent } from 'react';
-import React from 'react';
-
-import { iconWrapperStyle } from '../TextField.style';
-
-export const IconWrapper: FCC<{
-  iconPosition: 'left' | 'right';
-  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
-}> = ({ children, iconPosition, onClick }) => (
-  <div onClick={onClick} css={iconWrapperStyle({ iconPosition, isClickable: Boolean(onClick) })}>
-    {children}
-  </div>
-);

package/src/components/TextField/index.ts

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

package/src/components/TextInputBase/TextInputBase.style.ts

@@ -1,219 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import type { SemanticTypographyKey } from '@orfium/tokens';
-import { rem, vars } from '@orfium/tokens';
-import type { Theme } from 'theme';
-
-import { LABEL_TRANSFORM_LEFT_SPACING } from 'components/Label/Label.style';
-import { body03 } from 'components/Typography/Typography.config.styles';
-import { generateStylesFromTokens } from 'components/Typography/utils';
-import type { ColorScheme } from '../../theme/types';
-import { FIELD_TOKENS } from '../DatePicker/DatePickInput/DatePickInput.style';
-import type { TextInputBaseProps } from './TextInputBase';
-
-// TODO:MERGE: remove theme as prop and do it as (theme) => ({}) because emotion should pass
-const wrapperStyleSwitch = ({
-  hasError,
-  isLocked,
-  isDisabled,
-  isInteractive,
-}: {
-  colorScheme: ColorScheme;
-  isLocked?: boolean;
-  hasError?: boolean;
-  isInteractive?: boolean;
-} & Pick<TextInputBaseProps, 'isDisabled'>) => {
-  const borderColor = isLocked
-    ? vars.color['border-color'].interactive.default
-    : vars.color['border-color'].interactive.active;
-
-  const backgroundColor = hasError
-    ? vars.color.palette.error.base
-    : isLocked
-      ? vars.color.palette.secondary.muted
-      : vars.color.palette.secondary.base;
-
-  const backgroundHoveredColor = hasError
-    ? vars.color.palette.error.muted
-    : vars.color.palette.secondary.muted;
-
-  const events = isDisabled
-    ? {
-        '&:focus-within': {
-          boxShadow: `0 0 0 ${vars['border-width']['2']} transparent`,
-        },
-      }
-    : {
-        '&:hover': {
-          backgroundColor: backgroundHoveredColor,
-        },
-        '&:focus-within': {
-          boxShadow: `0 0 0 ${vars['border-width']['2']} ${borderColor}`,
-          backgroundColor: vars.color.palette.secondary.base,
-        },
-      };
-
-  return {
-    backgroundColor: backgroundColor,
-    ...(isInteractive ? events : {}),
-  };
-};
-
-/**
- * this wrapper must remain simple and not mess with children properties as it will be used
- * in custom implementation needed eg: datepicker
- * */
-export const wrapperStyle =
-  ({ isDisabled, status, isInteractive, size = 'normal', sx }: Partial<TextInputBaseProps>) =>
-  (theme: Theme): SerializedStyles => {
-    const colorScheme = theme.colorScheme;
-    const isLocked = !isDisabled && status?.type === 'read-only';
-    const hasError = !isDisabled && status?.type === 'error';
-
-    const borderColor = hasError
-      ? vars.color['border-color'].interactive.error
-      : vars.color['border-color'].interactive.default;
-
-    return css({
-      display: 'flex',
-      flex: 1,
-      alignItems: 'center',
-      position: 'relative',
-      transition: `background-color 0.25s, box-shadow 0.25s, border-color 0.25s`,
-
-      boxShadow: `0 0 0 ${vars['border-width'][hasError ? '2' : '1']} ${borderColor}`,
-      borderRadius: vars['border-radius']['2'],
-      userSelect: 'none',
-      opacity: isDisabled ? theme.tokens.disabledState.get('default') : 1,
-      cursor: isDisabled ? 'not-allowed' : 'text',
-      height: FIELD_TOKENS.container[size],
-      minWidth: FIELD_TOKENS.minWidth.small[size],
-      ...wrapperStyleSwitch({
-        colorScheme,
-        hasError,
-        isLocked,
-        isDisabled,
-        isInteractive,
-      }),
-      ...sx?.wrapper,
-    });
-  };
-
-export const textFieldStyle = ({ sx }: Partial<TextInputBaseProps>): SerializedStyles => {
-  return css({
-    position: 'relative',
-    display: 'inline-flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    verticalAlign: 'top',
-    width: 'fill-available',
-    padding: FIELD_TOKENS.content.padding,
-
-    '> div': {
-      position: 'relative',
-    },
-
-    ...sx?.textField,
-  });
-};
-
-export const inputStyle =
-  ({
-    label,
-    placeholder,
-    size = 'normal',
-    isLocked,
-    isDisabled,
-    sx,
-  }: Partial<TextInputBaseProps> & { isLocked?: boolean }) =>
-  (theme: Theme): SerializedStyles => {
-    const typography: SemanticTypographyKey = size === 'normal' ? 'normal.body02' : 'normal.body03';
-
-    return css(generateStylesFromTokens(theme.tokens.typography.get(typography)), {
-      background: 'transparent',
-      border: 'none',
-      color: vars.color.text.default.primary,
-      padding: 0,
-      display: 'block',
-      position: 'relative',
-      top: label && size === 'normal' ? rem(7) : undefined,
-      zIndex: 1,
-      textOverflow: 'ellipsis',
-      width: 0,
-      minWidth: '100%',
-
-      '&::placeholder': {
-        color: 'transparent',
-        ...(!label && placeholder
-          ? generateStylesFromTokens(theme.tokens.typography.get(typography))
-          : {}),
-      },
-
-      '&:focus': {
-        outline: 'none',
-        '&::placeholder': {
-          color: placeholder ? vars.color.text.default.secondary : 'transparent',
-        },
-      },
-
-      '&:not(:focus):placeholder-shown': {
-        '& + label': {
-          fontWeight: 'normal',
-        },
-      },
-
-      '&:focus-within, &:not(:placeholder-shown)': {
-        '& + label':
-          size === 'normal'
-            ? {
-                fontWeight: `${vars.weight.bold} !important`,
-                transform: `translate(${LABEL_TRANSFORM_LEFT_SPACING}, -35%) scale(0.8)`,
-              }
-            : {
-                display: 'none',
-              },
-      },
-
-      '&:focus-within': {
-        '& + label': {
-          fontWeight: `${vars.weight.bold} !important`,
-          color: vars.color.text.default.active,
-        },
-      },
-
-      '&:disabled': {
-        cursor: isLocked && !isDisabled ? 'text' : 'not-allowed',
-      },
-      ...sx?.input,
-    });
-  };
-
-export const hintMessageStyle =
-  ({ status, isDisabled }: Partial<TextInputBaseProps>) =>
-  (theme: Theme): SerializedStyles => {
-    const statusColor = {
-      error: vars.color.text.default.error,
-      warning: vars.color.text.default.warning,
-    };
-
-    const color =
-      !isDisabled && status?.type && statusColor[status.type]
-        ? statusColor[status.type]
-        : vars.color.text.default.secondary;
-
-    return css(
-      {
-        display: 'flex',
-        alignItems: 'center',
-        gap: vars.spacing['3'],
-        opacity: isDisabled ? theme.tokens.disabledState.get('default') : 1,
-        color,
-        padding: `${vars.spacing['4']} 0 0`,
-        span: {
-          alignItems: 'stretch',
-          padding: 0,
-        },
-      },
-      body03(theme)
-    );
-  };

package/src/components/TextInputBase/TextInputBase.tsx

@@ -1,96 +0,0 @@
-import type { CSSObject } from '@emotion/serialize';
-import type { FCC } from 'react';
-import React from 'react';
-import isEqual from 'react-fast-compare';
-import { generateTestDataId } from 'utils/helpers';
-import type { ComponentSizes, TestProps } from 'utils/types';
-
-import { vars } from '@orfium/tokens';
-import type { AcceptedIconNames } from 'components/Icon';
-import Icon from 'components/Icon';
-import { hintMessageStyle, textFieldStyle, wrapperStyle } from './TextInputBase.style';
-
-export type TextInputBaseProps = {
-  /** The label of the text field that will be used as a placeholder and a label */
-  label: string;
-  /** The placeholder of the input that will be used. This is shown if no label exists */
-  placeholder?: string;
-  /** The size of input */
-  size?: ComponentSizes;
-  /** An optional suffix (element or icon-name) to show to the left */
-  suffix?: AcceptedIconNames | React.ReactNode | null;
-  /** If the text field value is required */
-  isRequired?: boolean;
-  /** If the text field is disabled */
-  isDisabled?: boolean;
-  /** The status of the TextInput with an optional hint message */
-  status?: {
-    type: 'normal' | 'error' | 'warning' | 'read-only';
-    hintMessage?: string;
-    id?: string;
-  };
-  /** value of the input */
-  value?: string | number | null;
-  /** Sx prop to override specific properties */
-  sx?: {
-    wrapper?: CSSObject;
-    textField?: CSSObject;
-    input?: CSSObject;
-  };
-  /** Whether the Textfield should change its styles when hovered/focused etc */
-  isInteractive?: boolean;
-  children?: React.ReactNode;
-} & TestProps;
-
-/** This Component is a wrapper for all primitives that hold text like Select, TextArea, TextInput. Here we keep the
- * logic of all the hover, focus status etc and the styling of these centralized **/
-const TextInputBase: FCC<
-  Omit<TextInputBaseProps, 'value' | 'label' | 'placeholder' | 'suffix' | 'isRequired'>
-> = ({
-  isDisabled,
-  dataTestId,
-  status = { type: 'normal' },
-  size = 'normal',
-  isInteractive = true,
-  children,
-  sx,
-}) => {
-  const statusColor = {
-    error: vars.color.text.default.error,
-    warning: vars.color.indicators.warning,
-  };
-
-  const hintMessageToShow = status.hintMessage && (
-    <div
-      data-testid={generateTestDataId('error', dataTestId)}
-      css={hintMessageStyle({ status, isDisabled })}
-    >
-      {!isDisabled &&
-        (status.type === 'error' || status.type === 'warning') &&
-        size === 'normal' && (
-          <Icon color={statusColor[status.type]} name="warning" size={vars.sizing['4']} />
-        )}
-      <span id={status.id}>{status.hintMessage}</span>
-    </div>
-  );
-
-  return (
-    <React.Fragment>
-      <div
-        data-testid={dataTestId}
-        css={wrapperStyle({
-          isDisabled,
-          status,
-          size,
-          sx,
-          isInteractive,
-        })}
-      >
-        <div css={textFieldStyle({ sx })}>{children}</div>
-      </div>
-      {status.hintMessage && hintMessageToShow}
-    </React.Fragment>
-  );
-};
-
-export default React.memo(TextInputBase, isEqual);

package/src/components/TextInputBase/index.ts

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

package/src/components/ThemeProvider/Test.tsx

@@ -1,14 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import type { BoxProps as BoxProps } from '../Box';
-
-type TestProps = BoxProps;
-
-const Test = forwardRef<HTMLDivElement, TestProps>((props, ref) => (
-  <div {...props} ref={ref}>
-    {props.children}
-  </div>
-));
-Test.displayName = 'Test';
-
-export default Test;

package/src/components/ThemeProvider/ThemeProvider.style.ts

@@ -1,31 +0,0 @@
-import { css } from '@emotion/react';
-
-// TODO: View transitions used by toast remove when toast is migrated to vanilla extract
-export const globalStyles = () => css`
-  ::view-transition-group(*) {
-    animation-duration: 250ms;
-    /* swift out */
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
-  }
-
-  ::view-transition-new(.toast):only-child {
-    animation-name: fade-in-up;
-  }
-
-  ::view-transition-old(.toast):only-child {
-    animation-name: fade-out;
-  }
-
-  @keyframes fade-out {
-    to {
-      opacity: 0;
-    }
-  }
-
-  @keyframes fade-in-up {
-    from {
-      opacity: 0;
-      transform: translateY(24px);
-    }
-  }
-`;