@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/Link/Link.style.ts

@@ -1,90 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import type { Theme } from 'theme';
-
-import { vars } from '@orfium/tokens';
-import { generateStylesFromTokens } from 'components/Typography/utils';
-import type { LinkProps } from './Link.types';
-
-const LINK_TOKENS = (theme: Theme) => {
-  return {
-    block: {
-      1: generateStylesFromTokens(theme.tokens.typography.get('normal.label01')),
-      2: generateStylesFromTokens(theme.tokens.typography.get('normal.label02')),
-      3: generateStylesFromTokens(theme.tokens.typography.get('normal.label03')),
-    },
-    inline: {
-      1: {
-        'text-decoration': theme.globals.typography.textDecoration.get('link'),
-        'font-weight': vars.weight.medium,
-        'font-size': vars['font-size']['4'],
-        'line-height': vars['line-height']['5'],
-        'letter-spacing': vars['letter-spacing']['1'],
-      },
-      2: {
-        'text-decoration': theme.globals.typography.textDecoration.get('link'),
-        'font-weight': vars.weight.medium,
-        'font-size': vars['font-size']['3'],
-        'line-height': vars['line-height']['4'],
-        'letter-spacing': vars['letter-spacing']['2'],
-      },
-      3: {
-        'text-decoration': theme.globals.typography.textDecoration.get('link'),
-        'font-weight': vars.weight.medium,
-        'font-size': vars['font-size']['2'],
-        'line-height': vars['line-height']['3'],
-        'letter-spacing': vars['letter-spacing']['2'],
-      },
-    },
-  };
-};
-
-export const linkContainer =
-  ({
-    placement,
-    type,
-    size,
-    isDisabled,
-  }: Pick<LinkProps, 'placement' | 'type' | 'size' | 'isDisabled'>) =>
-  (theme: Theme): SerializedStyles => {
-    const isInverted = type === 'inverted';
-
-    return css`
-      display: ${placement === 'inline' ? 'inline-flex' : 'flex'};
-      gap: ${vars.spacing['3']};
-      color: ${vars.color.text[isInverted ? 'inverted' : 'default'].active};
-      text-decoration: none;
-      position: relative;
-
-      &:hover,
-      &[aria-expanded='true'] {
-        color: ${vars.color.text[isInverted ? 'inverted' : 'default'].primary};
-        path {
-          fill: ${vars.color.text[isInverted ? 'inverted' : 'default'].primary} !important;
-        }
-      }
-
-      &:visited {
-        color: ${vars.color.text[isInverted ? 'inverted' : 'default'].visited};
-        path {
-          fill: ${vars.color.text[isInverted ? 'inverted' : 'default'].visited} !important;
-        }
-      }
-
-      &:focus-visible:after {
-        content: '';
-        position: absolute;
-        inset: -3px -6px;
-        border-radius: ${vars['border-radius']['2']};
-        border: ${vars['border-width']['3']} solid ${vars.color['border-color'].interactive.upsell};
-      }
-
-      opacity: ${isDisabled ? theme.tokens.disabledState.get('default') : 1};
-
-      align-items: center;
-      cursor: ${isDisabled ? 'default' : 'pointer'};
-      pointer-events: ${isDisabled ? 'none' : 'auto'};
-
-      ${LINK_TOKENS(theme)[placement][size]};
-    `;
-  };

package/src/components/Link/Link.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { vars } from '@orfium/tokens';
-import Icon from 'components/Icon';
-import { useSlotProps } from '../utils/Slots';
-import { linkContainer } from './Link.style';
-import type { LinkProps } from './Link.types';
-
-const ICON_SIZE = {
-  1: vars.sizing['5'],
-  2: vars.sizing['4'],
-  3: vars.sizing['3'],
-};
-
-const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  props = useSlotProps(props, 'link');
-  const {
-    type = 'primary',
-    placement = 'block',
-    size = 1,
-    iconName,
-    isDisabled,
-    component,
-    dataTestPrefixId = '',
-    children,
-    ...rest
-  } = props;
-
-  const Component = component ?? 'a';
-
-  const componentProps = component ? { to: props.href } : {};
-
-  const isInverted = type === 'inverted';
-
-  return (
-    <Component
-      css={linkContainer({ placement, type, size, isDisabled })}
-      ref={ref}
-      data-testid={`${dataTestPrefixId}_link`}
-      {...componentProps}
-      {...rest}
-    >
-      {children}
-      {iconName && (
-        <Icon
-          name={iconName}
-          color={vars.color.text[isInverted ? 'inverted' : 'default'].active}
-          size={ICON_SIZE[size]}
-          dataTestId={`${dataTestPrefixId}_link_icon`}
-        />
-      )}
-    </Component>
-  );
-});
-
-Link.displayName = 'Link';
-
-export default Link;

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

@@ -1,23 +0,0 @@
-
-import type { AnchorHTMLAttributes, ElementType } from 'react';
-
-import type { AcceptedIconNames } from 'components/Icon';
-
-export type LinkSizes = 1 | 2 | 3;
-
-export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  /** The type of the Link in terms of style */
-  type?: 'primary' | 'inverted';
-  /** The placement of the link */
-  placement?: 'block' | 'inline';
-  /** The size of the Link */
-  size?: LinkSizes;
-  /** Optional icon to add at the right of the Link */
-  iconName?: AcceptedIconNames;
-  /** Whether the link is disabled*/
-  isDisabled?: boolean;
-  /** The component used for the root node */
-  component?: ElementType;
-  /** Data Test Id prefix **/
-  dataTestPrefixId?: string;
-};

package/src/components/Link/index.ts

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

package/src/components/List/List.style.ts

@@ -1,50 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-export const wrapperStyle = ({
-  width,
-  isSearchable,
-}: {
-  width: number | undefined;
-  isSearchable?: boolean;
-}): SerializedStyles => {
-  return css`
-    border: ${isSearchable
-      ? 'initial'
-      : `${vars['border-width']['1']} solid ${vars.color['border-color'].decorative.default}`};
-    border-radius: ${isSearchable ? 'initial' : vars['border-radius']['2']};
-    width: ${width !== undefined ? `${width}px` : '100%'};
-    box-shadow: ${vars['box-shadow']['2']};
-  `;
-};
-
-export const listStyle = ({
-  width,
-  height,
-  maxHeight,
-  isSearchable,
-}: {
-  width?: number;
-  height?: number;
-  maxHeight?: number;
-  isSearchable?: boolean;
-}): SerializedStyles => {
-  return css`
-    padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-    border-radius: ${isSearchable ? 'initial' : vars['border-radius']['2']};
-    width: ${width ? rem(width) : '100%'};
-    height: ${height ? rem(height) : 'auto'};
-    max-height: ${maxHeight ? rem(maxHeight) : 'auto'};
-    overflow: auto;
-    overflow-x: hidden;
-    background: ${vars.color.background.default};
-  `;
-};
-
-export const groupedUlStyle = (): SerializedStyles => css`
-  padding: 0;
-  list-style: none;
-`;

package/src/components/List/List.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import {
-  mergeProps,
-  useFocusRing,
-  useListBox,
-  useListBoxSection,
-  useOption,
-  type AriaListBoxProps,
-} from 'react-aria';
-import { useListState } from 'react-stately';
-import type { TestProps } from 'utils/types';
-import useCombinedRefs from '../../hooks/useCombinedRefs';
-import type { SelectOption } from '../Select';
-import ListItemWrapper from './components/ListItemWrapper/ListItemWrapper';
-import { ListItemWrapperStyled } from './components/ListItemWrapper/ListItemWrapper.style';
-import { groupedUlStyle, listStyle, wrapperStyle } from './List.style';
-import type { ListSelected, ListSelection } from './types';
-import { LIST_ITEM_HEIGHT } from './utils';
-import Window from './Window';
-
-export type ListProps = {
-  /** The label that describes the List, useful to determine aria and accessibility of the list  */
-  label: string;
-  /** Width of the list */
-  width?: number;
-  /** Height of the list when you use it as virtualized */
-  height?: number;
-  /** Virtualized list option */
-  isVirtualized?: boolean;
-  /** Callback when an item gets a change */
-  onSelectionChange?: (keys: ListSelection) => unknown;
-  /** Is the actual `key` of the item e.g `<Item key={'item_1'} />` is the `item_1` */
-  disabledKeys?: ListSelected;
-  /** Is the actual `key` of the item e.g `<Item key={'item_1'} />` is the `item_1` */
-  selectedKeys?: ListSelected;
-  // @TODO fix this on Select/Filter part as this only affect those
-  // /** Search Term to be highlighted in list items */
-  // searchTerm?: string;
-  // /** Defines if this is searchable list or not **/
-  // isSearchable?: boolean;
-} & Omit<AriaListBoxProps<SelectOption>, 'selectionMode' | 'onSelectionChange' | 'children'> &
-  TestProps &
-  Omit<React.InputHTMLAttributes<HTMLUListElement>, 'onChange'>;
-
-/**
- * This is the List component that uses the Window underneath for every UL.
- * Because this component uses the React-Aria abstraction for the List it will also contain the Option and ListBoxSection below
- * as a masked layer to the actual subcomponents
- * */
-const List = React.forwardRef<HTMLUListElement, ListProps>((props, ref) => {
-  const {
-    width,
-    height,
-    isVirtualized = false,
-    // isSearchable,
-    // searchTerm,
-    dataTestId,
-  } = props;
-  /** ignore the change on the `onSelectionChange` from any to unknown **/
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const state = useListState<SelectOption>({ ...props, selectionMode: 'single' });
-  const myRef = React.useRef(null);
-  const combinedRefs = useCombinedRefs(myRef, ref);
-  /** ignore the change on the `onSelectionChange` from any to unknown **/
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const { listBoxProps } = useListBox(props, state, combinedRefs);
-
-  const firstKey = state.collection.getFirstKey();
-  const first = firstKey ? state.collection.getItem(firstKey) : null;
-
-  return (
-    <div css={wrapperStyle({ width })}>
-      <div data-testid={dataTestId ? `${dataTestId}_list` : 'ictinus_list'}>
-        <div style={{ height: isVirtualized && height ? height : '100%' }}>
-          <Window
-            {...listBoxProps}
-            css={listStyle({ width, height })}
-            id={listBoxProps.id}
-            isVirtualizationEnabled={isVirtualized}
-            rowHeight={LIST_ITEM_HEIGHT[first?.props.rowSize ?? 'normal']}
-            ref={combinedRefs}
-          >
-            {Array.from(state.collection).map((item) => {
-              return item.type === 'section' ? (
-                <ListBoxSection key={item.key} section={item} state={state} />
-              ) : (
-                <Option key={item.key} item={item} state={state} />
-              );
-            })}
-          </Window>
-        </div>
-      </div>
-    </div>
-  );
-});
-List.displayName = 'List';
-
-/**
- * The Option overlay component for React-Aria. The actual subcomponent rendered is the `ListItemWrapper`
- */
-function Option({ item, state, style }: { item: any; state: any; style?: any }) {
-  // Get props for the option element
-  const ref = React.useRef(null);
-  const { optionProps, isDisabled } = useOption({ key: item.key }, state, ref);
-
-  // Determine whether we should show a keyboard
-  // focus ring for accessibility
-  const { isFocusVisible, isFocused, focusProps } = useFocusRing();
-
-  return (
-    <ListItemWrapper
-      {...mergeProps(optionProps, focusProps)}
-      id={optionProps.id}
-      ref={ref}
-      isDisabled={isDisabled}
-      style={style}
-      data-focus-visible={isFocusVisible || undefined}
-      data-focused={isFocused || undefined}
-      data-empty={state.collection.size === 0 || undefined}
-      rowSize={item.props?.rowSize || 'normal'}
-    >
-      {item.rendered}
-    </ListItemWrapper>
-  );
-}
-
-/**
- * The Group overlay component for React-Aria. The actual subcomponent rendered is the `Option` which will render
- * `ListItemWrapper` at the end.
- */
-function ListBoxSection({ section, state }: any) {
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label'],
-  });
-
-  return (
-    <>
-      <ListItemWrapperStyled
-        {...itemProps}
-        rowSize={section.props?.rowSize || 'normal'}
-        isDisabled={false}
-      >
-        {section.rendered && (
-          <span {...headingProps} id={headingProps.id}>
-            {section.rendered}
-          </span>
-        )}
-        <ul {...groupProps} aria-labelledby={groupProps['aria-labelledby']} css={groupedUlStyle}>
-          {[...section.childNodes].map((node) => (
-            <Option
-              key={node.key}
-              item={{
-                ...node,
-                props: { ...node.props, rowSize: section.props?.rowSize || 'normal' },
-              }}
-              state={state}
-            />
-          ))}
-        </ul>
-      </ListItemWrapperStyled>
-    </>
-  );
-}
-
-export default List;

package/src/components/List/ListItem.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Item as AriaItem } from 'react-stately';
-import type { ListRowSize } from './types';
-
-export type ListItemProps = {
-  /** A string representation of the item's unique key. */
-  key?: string | number;
-  /** A string representation of the item's contents, used when contents are something more than just text to determine labels etc. */
-  textValue?: string;
-  /** @default normal */
-  rowSize?: ListRowSize;
-  /** The type of the parent component, usually changed when used on Menus @defaults List */
-  parentType?: 'List' | 'Menu';
-};
-const ListItem: React.FCC<ListItemProps> = (props) => {
-  const Component = props.parentType === 'Menu' ? 'div' : AriaItem;
-
-  return (
-    <Component {...props} key={String(props.key)}>
-      {props.children}
-    </Component>
-  );
-};
-
-// @ts-ignore hack to pass the aria generator to the component as needed
-ListItem.getCollectionNode = AriaItem.getCollectionNode;
-
-export default ListItem;

package/src/components/List/ListSection.tsx

@@ -1,22 +0,0 @@
-import type { SectionProps } from '@react-types/shared';
-import type { ReactNode } from 'react';
-import React from 'react';
-import { Section as AriaSection } from 'react-stately';
-
-import type { ListRowSize } from './types';
-
-export type ListSectionProps = {
-  /** Rendered contents of the section, e.g. a header. */
-  title: ReactNode;
-  /** An accessibility label for the section. */
-  'aria-label'?: string;
-  /** @default normal */
-  rowSize?: ListRowSize;
-} & SectionProps<unknown>;
-
-const ListSection: React.FCC<ListSectionProps> = (props) => <AriaSection {...props} />;
-
-// @ts-ignore hack to pass the aria generator to the component as needed
-ListSection.getCollectionNode = AriaSection.getCollectionNode;
-
-export default ListSection;

package/src/components/List/Window.tsx

@@ -1,86 +0,0 @@
-import useElementSize from 'hooks/useElementSize';
-import { throttle } from 'lodash-es';
-import React, { forwardRef } from 'react';
-import useCombinedRefs from '../../hooks/useCombinedRefs';
-
-export type WindowProps = {
-  rowHeight: number;
-  children: Array<React.JSX.Element>;
-  gap?: number;
-  isVirtualizationEnabled?: boolean;
-} & React.InputHTMLAttributes<HTMLUListElement>;
-
-const bufferedItems = 5;
-
-/**
- * Custom component to implement virtualization of a Ul list
- * We used a custom solution in order to provide a semantically correct UL list with accessibility (aria) included.
- * Other solutions such as react-window etc couldn't override to use UL lists and pass with ...rest properties
- * */
-const Window = forwardRef<HTMLUListElement, WindowProps>(
-  ({ rowHeight, children, gap = 0, isVirtualizationEnabled = true, ...rest }, ref) => {
-    const [containerRef, { height: containerHeight }] = useElementSize<HTMLUListElement>();
-    const combinedRefs = useCombinedRefs(containerRef, ref);
-    const [scrollPosition, setScrollPosition] = React.useState(0);
-
-    // get the children to be renderd
-    const visibleChildren = React.useMemo(() => {
-      if (!isVirtualizationEnabled) {
-        return children.map((child, index) => React.cloneElement(child, {}));
-      }
-      const startIndex = Math.max(Math.floor(scrollPosition / rowHeight) - bufferedItems, 0);
-      const endIndex = Math.min(
-        Math.ceil((scrollPosition + containerHeight) / rowHeight - 1) + bufferedItems,
-        children.length - 1
-      );
-
-      return children.slice(startIndex, endIndex + 1).map((child, index) =>
-        React.cloneElement(child, {
-          style: {
-            position: 'absolute',
-            top: (startIndex + index) * rowHeight + index * gap,
-            height: rowHeight,
-            left: 0,
-            right: 0,
-            lineHeight: `${rowHeight}px`,
-          },
-        })
-      );
-    }, [children, containerHeight, rowHeight, scrollPosition, gap, isVirtualizationEnabled]);
-
-    const onScroll = React.useMemo(
-      () =>
-        throttle(
-          function (e: any) {
-            setScrollPosition(e.target.scrollTop);
-          },
-          50,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          { leading: false }
-        ),
-      []
-    );
-
-    return (
-      <ul
-        onScroll={onScroll}
-        {...rest}
-        style={{
-          overflowY: 'auto',
-          position: 'relative',
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100%',
-          listStyle: 'none',
-          padding: 0,
-        }}
-        ref={combinedRefs}
-      >
-        {visibleChildren}
-      </ul>
-    );
-  }
-);
-Window.displayName = 'Window';
-
-export default Window;

package/src/components/List/components/ListItemAction/ListItemAction.style.ts

@@ -1,10 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-
-export const listItemActionWrapper = () => (): SerializedStyles =>
-  css`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-  `;

package/src/components/List/components/ListItemAction/ListItemAction.tsx

@@ -1,12 +0,0 @@
-import type { FCC } from 'react';
-import React from 'react';
-
-import { listItemActionWrapper } from './ListItemAction.style';
-
-export type ListItemActionProps = NonNullable<unknown>;
-
-const ListItemAction: FCC<ListItemActionProps> = (props) => {
-  return <div css={listItemActionWrapper()}>{props.children}</div>;
-};
-
-export default ListItemAction;

package/src/components/List/components/ListItemAction/index.ts

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

package/src/components/List/components/ListItemText/ListItemText.style.ts

@@ -1,45 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import type { Theme } from 'index';
-
-import { vars } from '@orfium/tokens';
-import { generateStylesFromTokens } from 'components/Typography/utils';
-
-export const listItemTextWrapperStyles = (
-  isGroupItem?: boolean,
-  isHighlighted?: boolean
-): SerializedStyles => {
-  return css`
-    color: ${vars.color.text.default.primary};
-    font-weight: ${isGroupItem || isHighlighted ? 'bold' : 'initial'};
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: inherit;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    strong {
-      font-weight: bold;
-    }
-
-    span {
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `;
-};
-
-export const descriptionStyles =
-  () =>
-  (theme: Theme): SerializedStyles => {
-    return css`
-      ${generateStylesFromTokens(theme.tokens.typography.get('normal.body03'))};
-      color: ${vars.color.text.default.secondary};
-    `;
-  };

package/src/components/List/components/ListItemText/ListItemText.tsx

@@ -1,19 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-
-import { descriptionStyles, listItemTextWrapperStyles } from './ListItemText.style';
-
-export type ListItemTextProps = {
-  description?: string | React.JSX.Element;
-};
-
-const ListItemText: FC<React.PropsWithChildren<ListItemTextProps>> = (props) => {
-  return (
-    <div css={listItemTextWrapperStyles(false, false)}>
-      <span>{props.children}</span>
-      {props.description && <p css={descriptionStyles()}>{props.description}</p>}
-    </div>
-  );
-};
-
-export default ListItemText;

package/src/components/List/components/ListItemText/index.ts

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