@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/Select/types.ts

@@ -1,74 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import type { TestProps } from 'utils/types';
-
-import type { IconProps } from '../Icon';
-import type { TextFieldProps } from '../TextField';
-
-export type SelectOptionValues = {
-  value: string | number;
-  label: string;
-  /** refer to Icon component for more details */
-  iconProps?: IconProps;
-};
-
-export type SelectOptionBase = {
-  isDisabled?: boolean;
-  /** helper text that show under item text */
-  helperText?: string;
-  // @TODO remove this as it is not used?
-  tooltipInfo?: string;
-  options?: SelectOption[];
-  isCreated?: boolean;
-};
-
-export type SelectOption = SelectOptionBase & SelectOptionValues;
-
-type InputProps = Partial<Omit<InputHTMLAttributes<HTMLInputElement>, 'size' & 'onChange'>>;
-
-export type MultiSelectProps = {
-  /** The function that is used to return the selected options */
-  onChange?: (selectedOption: SelectOption[]) => void;
-  /** If true the user can select multiple options */
-  isMulti: true;
-  /** The selected options in case of multiSelect */
-  /** @TODO merge selectedOption with selectedOptions in v5 */
-  selectedOption?: SelectOption[];
-};
-export type SingleSelectProps = {
-  /** The function that is used to return the selected options */
-  onChange?: (selectedOption: SelectOption) => void;
-  /** If false the user can select one option */
-  isMulti?: never;
-  /** the value of the select if select is controlled */
-  selectedOption?: SelectOption;
-};
-export type SelectProps = {
-  /** Options for the select dropdown */
-  options: SelectOption[];
-  /** if the component is used asynchronously */
-  isAsync?: boolean;
-  /** the function to fetch new options */
-  asyncSearch?: (term: string) => void;
-  /** after how many characters to start searching (default = 0) */
-  minCharactersToSearch?: number;
-  /** if searched text should be highlighted in available options */
-  hasHighlightSearch?: boolean;
-  /** if the options are searchable */
-  isSearchable?: boolean;
-  /** data-testid suffix */
-  dataTestId?: string;
-  /** if component is loading */
-  isLoading?: boolean;
-  /** if options list is virtualized */
-  isVirtualized?: boolean;
-  /**
-   * If true, then in the case of a searched option that is not found in the Options list of MultiSelect,
-   * the user can create this option.
-   * */
-  isCreatable?: boolean;
-  /** Whether the MultiSelect should have a Select All option */
-  hasSelectAllOption?: boolean;
-} & (MultiSelectProps | SingleSelectProps) &
-  Omit<TextFieldProps, 'onChange' | 'mask'> &
-  Omit<InputProps, 'onChange' | 'size'> &
-  TestProps;

package/src/components/Slider/Slider.style.tsx

@@ -1,23 +0,0 @@
-import styled from '@emotion/styled';
-import { rem } from 'polished';
-
-import { flex } from 'theme/functions';
-
-export const Container = styled.div`
-  ${flex};
-  flex-direction: column;
-  gap: ${rem(22)};
-`;
-
-export const InputsContainer = styled.div`
-  ${flex};
-  margin-left: ${rem(-7)};
-  margin-right: ${rem(-7)};
-  gap: ${rem(20)};
-  align-items: center;
-  justify-content: space-between;
-`;
-
-export const InputContainer = styled.div`
-  width: ${rem(80)};
-`;

package/src/components/Slider/Slider.tsx

@@ -1,208 +0,0 @@
-import React, { useRef, type FC } from 'react';
-import { Range } from 'react-range';
-import type { IMarkProps, IThumbProps, ITrackProps } from 'react-range/lib/types';
-import type { TestProps } from 'utils/types';
-import useTheme from '../../hooks/useTheme';
-import type { NumberFieldProps } from '../NumberField';
-import NumberField from '../NumberField';
-import SliderMark from './components/SliderMark';
-import SliderThumb from './components/SliderThumb';
-import SliderTrack from './components/SliderTrack';
-import { Container, InputContainer, InputsContainer } from './Slider.style';
-
-export type SliderProps = {
-  /** Determines if the Slider is disabled or not */
-  isDisabled?: boolean;
-  /** Determines if the Slider will show increments along its track */
-  hasIncrements?: boolean;
-  /** Called when a thumb is moved, provides new values */
-  onChange: (values: number[]) => void;
-  /** Called when a change is finished (mouse/touch up, or keyup), provides current values.
-   * Use this event when you have to make for example ajax request with new values. */
-  onBlur?: (values: number[]) => void;
-  /** Determines the position of the rendered thumbs and the type of the Slider. 1 value means it's a Selector,
-   * while 2 values mean it's a Range. Defaults to [0, 100] */
-  values: [number] | [number, number];
-  /** NumberField props */
-  numberFieldOptions?: Partial<NumberFieldProps>;
-};
-
-const STEP = 1;
-export const STEP_WITH_INCREMENTS = 20;
-export const MIN = 0;
-export const MAX = 100;
-
-const Slider: FC<SliderProps & TestProps> = ({
-  values,
-  onChange,
-  onBlur,
-  hasIncrements = false,
-  isDisabled = false,
-  numberFieldOptions,
-  dataTestPrefixId,
-}) => {
-  const theme = useTheme();
-
-  const initialValueRef = useRef<[number] | [number, number]>(values);
-
-  const isSelector = initialValueRef.current.length === 1;
-
-  if (isSelector && values.length !== 1) {
-    throw new Error(
-      'The Selector type Slider can only accept one initial value in the array, since it only has one thumb. Try changing the `values` prop.'
-    );
-  }
-
-  if (!isSelector && values.length !== 2) {
-    throw new Error(
-      'The Range type Slider only accepts two initial values in the array, since it has two thumbs. Try changing the `values` prop.'
-    );
-  }
-
-  const sanitizeValues = (value: number) => {
-    if (value < MIN) {
-      return 0;
-    }
-
-    if (value > MAX) {
-      return 100;
-    }
-
-    return value;
-  };
-
-  const handleRenderMark = ({ props, index }: { props: IMarkProps; index: number }) => {
-    /** We don't show marks for the first and last increments of the Slider (0%, 100%) */
-    const isNotFirstOrLastMark = isSelector
-      ? index > MIN
-      : index > MIN && index < MAX / STEP_WITH_INCREMENTS;
-
-    return (
-      hasIncrements &&
-      isNotFirstOrLastMark && (
-        <SliderMark
-          key={`mark_${index}`}
-          dataTestPrefixId={dataTestPrefixId}
-          restProps={props}
-          values={values}
-          index={index}
-          isSelector={isSelector}
-          isDisabled={isDisabled}
-        />
-      )
-    );
-  };
-
-  const handleRenderTrack = ({
-    props,
-    children,
-  }: {
-    props: ITrackProps;
-    children: React.ReactNode;
-  }) => {
-    return (
-      <SliderTrack
-        dataTestPrefixId={dataTestPrefixId}
-        isSelector={isSelector}
-        restProps={props}
-        values={values}
-        isDisabled={isDisabled}
-      >
-        {children}
-      </SliderTrack>
-    );
-  };
-
-  const handleRenderThumb = ({
-    props,
-    value,
-    index,
-  }: {
-    props: IThumbProps;
-    value: number;
-    index: number;
-  }) => {
-    return (
-      <SliderThumb
-        key={`thumb_${index}`}
-        dataTestId={`${dataTestPrefixId ?? ''}thumb_${index}`}
-        restProps={props}
-        isDisabled={isDisabled}
-        value={value}
-        initialValue={initialValueRef.current?.[index]}
-      />
-    );
-  };
-
-  return (
-    <Container
-      data-testid={`${dataTestPrefixId ?? ''}slider_component`}
-      aria-disabled={isDisabled ? 'true' : 'false'}
-    >
-      <div css={{ opacity: isDisabled ? theme.tokens.disabledState.get('default') : 'inherit' }}>
-        <Range
-          step={hasIncrements ? STEP_WITH_INCREMENTS : STEP}
-          min={MIN}
-          max={MAX}
-          disabled={isDisabled}
-          values={values}
-          onChange={onChange}
-          onFinalChange={onBlur}
-          renderMark={handleRenderMark}
-          renderTrack={handleRenderTrack}
-          renderThumb={handleRenderThumb}
-        />
-      </div>
-      {!isSelector && !hasIncrements && values.length === 2 && (
-        <InputsContainer>
-          <InputContainer>
-            <NumberField
-              label="Start"
-              size="compact"
-              isDisabled={isDisabled}
-              value={values[0]}
-              onChange={(num: number) => {
-                onChange([num, values[1]]);
-              }}
-              onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
-                if (onBlur) {
-                  const sanitizedValue = sanitizeValues(parseInt(e?.target.value || '0'));
-                  onBlur([sanitizedValue, values[1]]);
-                }
-              }}
-              {...numberFieldOptions}
-              minValue={MIN}
-              maxValue={values[1]}
-              sx={{ wrapper: { width: '100%' } }}
-            />
-          </InputContainer>
-          <InputContainer>
-            <NumberField
-              label="End"
-              size="compact"
-              isDisabled={isDisabled}
-              value={values[1]}
-              onChange={(num: number) => {
-                onChange([values[0], num]);
-              }}
-              onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
-                if (onBlur) {
-                  const sanitizedValue = sanitizeValues(parseInt(e?.target.value || '100'));
-                  onBlur([values[0], sanitizedValue]);
-                }
-              }}
-              {...numberFieldOptions}
-              minValue={values[0]}
-              maxValue={MAX}
-              sx={{ wrapper: { width: '100%' } }}
-            />
-          </InputContainer>
-        </InputsContainer>
-      )}
-    </Container>
-  );
-};
-
-Slider.displayName = 'Slider';
-
-export default Slider;

package/src/components/Slider/components/SliderMark/SliderMark.style.tsx

@@ -1,74 +0,0 @@
-import styled from '@emotion/styled';
-import { vars } from '@orfium/tokens';
-import { rem, rgba } from 'polished';
-import type { CSSProperties } from 'react';
-
-export const Mark = styled.div<{
-  background: string;
-  isDisabled: boolean;
-  labelValue: string;
-  restStyleProps: CSSProperties;
-}>`
-  height: ${rem(7)};
-  width: ${rem(7)};
-  border-radius: 100%;
-  background: ${({ background }) => background};
-  position: relative;
-  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'unset')};
-
-  :hover {
-    background: ${({ isDisabled }) => (!isDisabled ? vars.color.palette.primary.base : undefined)};
-
-    ::before {
-      content: '${({ labelValue }) => labelValue}';
-      color: white;
-      display: ${({ isDisabled }) => (isDisabled ? 'none' : 'flex')};
-      justify-content: center;
-      font-size: ${vars['font-size']['11']};
-      background: black;
-      position: absolute;
-      padding: ${vars.spacing['4']};
-      box-sizing: border-box;
-      top: ${rem(-35)};
-      left: ${rem(-14.5)};
-      width: ${rem(35)};
-      height: ${rem(27)};
-      border-radius: 2px;
-    }
-
-    ::after {
-      content: ' ';
-      display: ${({ isDisabled }) => (isDisabled ? 'none' : 'unset')};
-      position: absolute;
-      top: ${rem(-10)};
-      left: ${rem(-2.5)};
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 6px solid #000;
-    }
-  }
-`;
-
-export const MarkHoverCircle = styled.div<{ isDisabled: boolean }>`
-  ::after {
-    content: ' ';
-
-    height: ${rem(7)};
-    width: ${rem(7)};
-
-    border: 4px solid transparent;
-    border-radius: 100px;
-
-    position: absolute;
-    top: ${rem(-4)};
-    left: ${rem(-4)};
-  }
-
-  :hover {
-    &::after {
-      border-color: ${({ isDisabled }) => (!isDisabled ? rgba(14, 14, 23, 0.1) : undefined)};
-    }
-  }
-`;

package/src/components/Slider/components/SliderMark/SliderMark.tsx

@@ -1,54 +0,0 @@
-import type { FCC } from 'react';
-import { useMemo } from 'react';
-import type { IMarkProps } from 'react-range/lib/types';
-import type { TestProps } from 'utils/types';
-
-import { vars } from '@orfium/tokens';
-import { STEP_WITH_INCREMENTS } from '../../Slider';
-import { Mark, MarkHoverCircle } from './SliderMark.style';
-
-export type SliderMarkProps = {
-  values: number[];
-  isDisabled: boolean;
-  index: number;
-  isSelector: boolean;
-  restProps: IMarkProps;
-};
-
-const SliderMark: FCC<SliderMarkProps & TestProps> = ({
-  values,
-  index,
-  isDisabled,
-  isSelector,
-  dataTestPrefixId = '',
-  restProps,
-}) => {
-  const backgroundStyle = useMemo(() => {
-    if (!isSelector) {
-      return index * 20 < values[0] || index * 20 > values[1]
-        ? vars.color.palette['primary-alt'].base
-        : vars.color.palette.primary.base;
-    }
-
-    return index * 20 > values[0]
-      ? vars.color.palette['primary-alt'].base
-      : vars.color.palette.primary.base;
-  }, [isSelector, index, values]);
-
-  const labelValue = useMemo(() => (STEP_WITH_INCREMENTS * index).toString(), [index]);
-
-  return (
-    <Mark
-      data-testid={`${dataTestPrefixId}mark_${index}`}
-      {...restProps}
-      isDisabled={isDisabled}
-      labelValue={labelValue ? `${labelValue}%` : ' '}
-      restStyleProps={restProps.style}
-      background={backgroundStyle}
-    >
-      <MarkHoverCircle isDisabled={isDisabled} />
-    </Mark>
-  );
-};
-
-export default SliderMark;

package/src/components/Slider/components/SliderMark/index.ts

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

package/src/components/Slider/components/SliderThumb/SliderThumb.style.tsx

@@ -1,44 +0,0 @@
-import styled from '@emotion/styled';
-import { vars } from '@orfium/tokens';
-import { rem, rgba } from 'polished';
-import type { CSSProperties } from 'react';
-
-import { transition } from 'theme/functions';
-
-export const Thumb = styled.div<{
-  isDisabled: boolean;
-  isChanged: boolean;
-  restStyleProps: CSSProperties;
-}>`
-  height: ${rem(16)};
-  width: ${rem(16)};
-  border-radius: 100px;
-  background-color: ${({ isChanged }) =>
-    isChanged ? vars.color.palette.primary.base : vars.color.background.default};
-  border: 2px solid ${vars.color.palette.primary.base};
-  ${({ restStyleProps }) => ({ ...restStyleProps })};
-  box-sizing: border-box;
-  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'unset')} !important;
-
-  &::after {
-    content: '';
-
-    height: ${rem(16)};
-    width: ${rem(16)};
-
-    border: 8px solid transparent;
-    border-radius: 100px;
-
-    position: absolute;
-    top: ${rem(-10)};
-    left: ${rem(-10)};
-
-    ${transition(0.15)};
-  }
-
-  :hover {
-    &::after {
-      border-color: ${({ isDisabled }) => (!isDisabled ? rgba(14, 14, 23, 0.1) : undefined)};
-    }
-  }
-`;

package/src/components/Slider/components/SliderThumb/SliderThumb.tsx

@@ -1,36 +0,0 @@
-import type { FCC } from 'react';
-import * as React from 'react';
-import { useMemo } from 'react';
-import type { IThumbProps } from 'react-range/lib/types';
-import type { TestProps } from 'utils/types';
-
-import { Thumb } from './SliderThumb.style';
-
-export interface SliderThumbProps {
-  isDisabled: boolean;
-  value: number;
-  initialValue: number | undefined;
-  restProps: IThumbProps;
-}
-
-const SliderThumb: FCC<SliderThumbProps & TestProps> = ({
-  isDisabled,
-  value,
-  initialValue,
-  dataTestId,
-  restProps,
-}) => {
-  const isChanged = useMemo(() => initialValue !== value, [initialValue, value]);
-
-  return (
-    <Thumb
-      data-testid={dataTestId}
-      {...restProps}
-      isChanged={isChanged}
-      isDisabled={isDisabled}
-      restStyleProps={restProps.style}
-    />
-  );
-};
-
-export default SliderThumb;

package/src/components/Slider/components/SliderThumb/index.ts

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

package/src/components/Slider/components/SliderTrack/SliderTrack.style.tsx

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-import { rem } from 'polished';
-import type { CSSProperties } from 'react';
-
-export const Track = styled.div<{
-  background: string;
-  restStyleProps: CSSProperties;
-  isDisabled: boolean;
-}>`
-  height: ${rem(3)};
-  border-radius: 4px;
-  background: ${({ background }) => background};
-  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'unset')} !important;
-`;

package/src/components/Slider/components/SliderTrack/SliderTrack.tsx

@@ -1,58 +0,0 @@
-import type { FCC } from 'react';
-import { useMemo } from 'react';
-import { getTrackBackground } from 'react-range';
-import type { ITrackProps } from 'react-range/lib/types';
-import type { TestProps } from 'utils/types';
-
-import { vars } from '@orfium/tokens';
-import { MAX, MIN } from '../../Slider';
-import { Track } from './SliderTrack.style';
-
-export type SliderTrackProps = {
-  values: number[];
-  isDisabled: boolean;
-  isSelector: boolean;
-  restProps: ITrackProps;
-};
-
-const SliderTrack: FCC<SliderTrackProps & TestProps> = ({
-  values,
-  isDisabled,
-  isSelector,
-  dataTestPrefixId = '',
-  restProps,
-  children,
-}) => {
-  const backgroundStyle = useMemo(
-    () =>
-      getTrackBackground({
-        values,
-        colors: isSelector
-          ? [vars.color.palette.primary.base, vars.color.palette['primary-alt'].base]
-          : [
-              vars.color.palette['primary-alt'].base,
-              vars.color.palette.primary.base,
-              vars.color.palette['primary-alt'].base,
-            ],
-        min: MIN,
-        max: MAX,
-
-        rtl: false,
-      }),
-    [isSelector, values]
-  );
-
-  return (
-    <Track
-      data-testid={`${dataTestPrefixId}track_component`}
-      {...restProps}
-      isDisabled={isDisabled}
-      restStyleProps={restProps.style}
-      background={backgroundStyle}
-    >
-      {children}
-    </Track>
-  );
-};
-
-export default SliderTrack;

package/src/components/Slider/components/SliderTrack/index.ts

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

package/src/components/Slider/index.ts

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

package/src/components/TabStepper/TabStepper.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { TabsContainer } from '~/components/Tabs';
-import { TabStep, TabStepList } from './components';
-import type { StepperProps } from './types';
-
-const TabStepper = React.forwardRef<HTMLDivElement, StepperProps>((props, ref) => {
-  const {
-    orientation = 'horizontal',
-    selectedKey,
-    onSelectionChange,
-    items,
-    iconPosition = 'adjacent',
-    dataTestPrefixId = 'ictinus',
-    children,
-    sx,
-  } = props;
-
-  return (
-    <TabsContainer
-      orientation={orientation}
-      selectedKey={selectedKey}
-      onSelectionChange={onSelectionChange}
-      ref={ref}
-      sx={sx?.tabsContainer}
-    >
-      <TabStepList aria-label={props['aria-label']} sx={sx?.tabStepList}>
-        {items.map((item) => (
-          <TabStep
-            key={item.id}
-            {...item}
-            iconPosition={iconPosition}
-            dataTestPrefixId={`${dataTestPrefixId}_tabstep_${item.id}`}
-            sx={sx?.tabStep}
-          />
-        ))}
-      </TabStepList>
-      {children}
-    </TabsContainer>
-  );
-});
-
-TabStepper.displayName = 'TabStepper';
-
-export default TabStepper;

package/src/components/TabStepper/components/TabStep/TabStep.style.ts

@@ -1,29 +0,0 @@
-import { css, type CSSObject } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-import { flex, flexCenterVertical } from 'theme/functions';
-import { type Theme } from '~/theme';
-
-export const stepStyles = (sx?: CSSObject) => css`
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  ${sx};
-`;
-
-export const stepContainer = () => css`
-  ${flex};
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: ${vars.spacing['3']};
-`;
-
-export const stepTitle = () => css`
-  ${flexCenterVertical};
-  gap: ${vars.spacing['4']};
-`;
-
-export const stepSubtitle = () => (theme: Theme) => css`
-  ${theme.tokens.typography.get('normal.body03')}
-  color: ${vars.color.text.default.secondary}
-`;