@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/Table/components/TPagination/TPagination.style.ts

@@ -1,59 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-import { ACTIONS_BAR_HEIGHT } from '../../constants';
-import type { TPaginationProps } from './TPagination';
-
-export const paginationContainer = ({
-  isSticky,
-}: Pick<TPaginationProps, 'isSticky'>): SerializedStyles => {
-  return css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: ${vars.color.background.default};
-    height: ${rem(ACTIONS_BAR_HEIGHT)};
-    width: 100%;
-    padding: ${vars.spacing['4']} ${vars.spacing['6']};
-    box-sizing: border-box;
-    border-top: ${vars['border-width']['1']} solid ${vars.color['border-color'].decorative.default};
-    border-bottom-left-radius: ${vars['border-radius']['2']};
-    border-bottom-right-radius: ${vars['border-radius']['2']};
-
-    ${isSticky &&
-    `
-        box-shadow: ${vars['box-shadow']['5']},
-        0 ${vars['border-width']['1']}  0 0 ${vars.color['border-color'].decorative.default};
-      `}
-  `;
-};
-
-export const itemsPerPageContainer = (): SerializedStyles => {
-  return css`
-    display: flex;
-    align-items: center;
-    gap: ${vars.spacing['4']};
-  `;
-};
-
-export const counterContainer = (): SerializedStyles => {
-  return css`
-    display: flex;
-    align-items: center;
-    gap: ${vars.spacing['9']};
-  `;
-};
-
-export const counterWrapper = (): SerializedStyles => {
-  return css`
-    display: flex;
-    gap: ${vars.spacing['3']};
-  `;
-};
-
-export const buttonsContainer = (): SerializedStyles => {
-  return css`
-    display: flex;
-  `;
-};

package/src/components/Table/components/TPagination/TPagination.tsx

@@ -1,106 +0,0 @@
-import IconButton from 'components/IconButton';
-import Select from 'components/Select';
-import type { TableProps } from 'components/Table/types';
-import Typography from 'components/Typography';
-import React from 'react';
-import type { TestProps } from '~/utils/types';
-import {
-  buttonsContainer,
-  counterContainer,
-  counterWrapper,
-  itemsPerPageContainer,
-  paginationContainer,
-} from './TPagination.style';
-
-export type TPaginationProps = Pick<TableProps<any>, 'pagination'> & {
-  /** Whether the pagination footer is sticky */
-  isSticky?: boolean;
-} & TestProps;
-
-const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTestPrefixId }) => {
-  const {
-    page,
-    totalPages,
-    onChange,
-    showItems,
-    showItemsOptions,
-    onShowItemsChange,
-    isEnhancedPaginationVisible,
-    isNextPageDisabled,
-    isPrevPageDisabled,
-  } = pagination;
-
-  return (
-    <div css={paginationContainer({ isSticky })}>
-      <div css={itemsPerPageContainer()}>
-        {showItems && showItemsOptions && (
-          <Select
-            label=""
-            size="compact"
-            options={showItemsOptions}
-            selectedOption={showItems}
-            isSearchable={false}
-            onChange={onShowItemsChange}
-            dataTestId={`${dataTestPrefixId}_table_show_items`}
-          />
-        )}
-      </div>
-      <div css={counterContainer()}>
-        <div css={counterWrapper()} data-testid={`${dataTestPrefixId}_table_pages_info`}>
-          <Typography type="secondary" variant="body03">
-            page
-          </Typography>
-          <Typography variant="label03" data-testid={`${dataTestPrefixId}_table_current_page`}>
-            {page}
-          </Typography>
-          <Typography type="secondary" variant="body03">
-            of
-          </Typography>
-          <Typography variant="label03" data-testid={`${dataTestPrefixId}_table_total_pages`}>
-            {totalPages}
-          </Typography>
-        </div>
-        <div css={buttonsContainer()}>
-          {isEnhancedPaginationVisible && (
-            <IconButton
-              iconName="pageFirst"
-              size="compact"
-              type="tertiary"
-              onClick={() => onChange(1)}
-              isDisabled={page === 1 || isPrevPageDisabled}
-              dataTestPrefixId={`${dataTestPrefixId}_table_go_to_first_page`}
-            />
-          )}
-          <IconButton
-            iconName="chevronLeft"
-            size="compact"
-            type="tertiary"
-            onClick={() => onChange(page - 1)}
-            isDisabled={page === 1 || isPrevPageDisabled}
-            dataTestPrefixId={`${dataTestPrefixId}_table_go_to_prev_page`}
-          />
-          <IconButton
-            iconName="chevronRight"
-            size="compact"
-            type="tertiary"
-            onClick={() => onChange(page + 1)}
-            isDisabled={page === totalPages || isNextPageDisabled}
-            dataTestPrefixId={`${dataTestPrefixId}_table_go_to_next_page`}
-          />
-          {isEnhancedPaginationVisible && (
-            <IconButton
-              iconName="pageLast"
-              size="compact"
-              type="tertiary"
-              onClick={() => onChange(totalPages)}
-              isDisabled={page === totalPages || isNextPageDisabled}
-              dataTestPrefixId={`${dataTestPrefixId}_table_go_to_last_page`}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TPagination;

package/src/components/Table/components/TPagination/index.ts

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

package/src/components/Table/components/TR/TR.style.ts

@@ -1,33 +0,0 @@
-import { css, type SerializedStyles } from '@emotion/react';
-
-import { vars } from '@orfium/tokens';
-import type { TRProps } from './TR';
-
-export const trContainer = ({
-  isExpandable,
-  isSelected,
-  isExpanded,
-  isSelectable,
-  sx,
-}: Pick<
-  TRProps,
-  'sx' | 'isSelectable' | 'isSelected' | 'isExpandable' | 'isExpanded'
->): SerializedStyles => {
-  return css`
-    ${(isSelectable || isExpandable) &&
-    `
-         cursor: pointer;
-         &:hover {
-           background: ${vars.color.palette.tertiary.muted};
-         }
-      
-      `}
-
-    ${(isSelected || isExpanded) &&
-    `
-      background: ${vars.color.palette.tertiary.contrast};
-      `}
-
-      ${sx};
-  `;
-};

package/src/components/Table/components/TR/TR.tsx

@@ -1,39 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import React from 'react';
-import type { DivProps } from 'utils/common';
-
-import { trContainer } from './TR.style';
-
-export type TRProps = {
-  /** Whether the row is expandable */
-  isExpandable?: boolean;
-  /** Whether the row is expanded */
-  isExpanded?: boolean;
-  /** Whether the row is selected */
-  isSelected?: boolean;
-  /** Whether the row is selectable */
-  isSelectable?: boolean;
-  /** Style overrides */
-  sx?: CSSObject;
-};
-
-const TR: React.FCC<TRProps & Pick<DivProps, 'onClick'>> = ({
-  onClick,
-  isExpandable,
-  isExpanded,
-  isSelected,
-  isSelectable,
-  sx,
-  children,
-}) => {
-  return (
-    <tr
-      onClick={onClick}
-      css={trContainer({ isSelected, isSelectable, isExpandable, isExpanded, sx })}
-    >
-      {children}
-    </tr>
-  );
-};
-
-export default TR;

package/src/components/Table/components/TR/index.ts

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

package/src/components/Table/components/TTitle/TTitle.style.ts

@@ -1,33 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-
-import { ACTIONS_BAR_HEIGHT } from '../../constants';
-
-import { rem, vars } from '@orfium/tokens';
-
-export const tTitleContainer = (): SerializedStyles => {
-  return css`
-    padding: ${vars.spacing['4']} ${vars.spacing['6']};
-    border-bottom: ${vars['border-width']['1']} solid
-      ${vars.color['border-color'].decorative.default};
-    display: flex;
-    justify-content: space-between;
-    height: ${rem(ACTIONS_BAR_HEIGHT)};
-    box-sizing: border-box;
-  `;
-};
-
-export const titleContent = (): SerializedStyles => {
-  return css`
-    display: flex;
-    align-items: center;
-    gap: ${vars.spacing['6']};
-  `;
-};
-
-export const actionsContent = (): SerializedStyles => {
-  return css`
-    display: flex;
-    gap: ${vars.spacing['6']};
-  `;
-};

package/src/components/Table/components/TTitle/TTitle.tsx

@@ -1,86 +0,0 @@
-import React, { useMemo } from 'react';
-import isEqual from 'react-fast-compare';
-
-import type { TableProps } from 'components/Table/types';
-import Typography from 'components/Typography';
-import ColumnChooser from './components/ColumnChooser';
-import { actionsContent, titleContent, tTitleContainer } from './TTitle.style';
-
-import type { TestProps } from '~/utils/types';
-
-type Props = Pick<TableProps<any>, 'columnsConfig' | 'columns' | 'rowsConfig' | 'type'> & {
-  /** Element that that serves as the positioning boundary of the ColumnChooser Menu */
-  containerRef: React.MutableRefObject<any>;
-  /** Number of rows */
-  rowsCount?: number | string;
-} & TestProps;
-
-const TTitle: React.FCC<Props> = ({
-  type = 'read-only',
-  columns,
-  columnsConfig,
-  rowsConfig,
-  rowsCount,
-  containerRef,
-  dataTestPrefixId,
-}) => {
-  const { hasRowsCount, rowsCountLabel, rowSelection, bulkActions, defaultAction } =
-    rowsConfig ?? {};
-
-  const isSelectable = type === 'interactive' && rowSelection;
-
-  const itemsToDisplay = isSelectable
-    ? Object.keys(rowSelection).length
-    : hasRowsCount
-      ? rowsCount
-      : 0;
-
-  const hasTitle = isSelectable || hasRowsCount;
-  const hasVisibleActions = isSelectable && Number(itemsToDisplay) > 0;
-
-  const title = useMemo(
-    () => (
-      <div data-testid={`${dataTestPrefixId}_title`}>
-        <Typography
-          type="active"
-          variant="label02"
-          data-testid={`${dataTestPrefixId}_title_items_count`}
-        >
-          {itemsToDisplay}
-        </Typography>
-        <Typography variant="label02">
-          {' '}
-          {rowsCountLabel ? rowsCountLabel : 'items'} {isSelectable ? 'selected' : ''}
-        </Typography>
-      </div>
-    ),
-    [dataTestPrefixId, isSelectable, itemsToDisplay, rowsCountLabel]
-  );
-
-  return (
-    <div css={tTitleContainer()}>
-      <div css={titleContent()}>
-        {hasTitle && (
-          <>
-            {title}
-            {hasVisibleActions && bulkActions}
-          </>
-        )}
-      </div>
-
-      <div css={actionsContent()}>
-        {defaultAction}
-        {columnsConfig && (
-          <ColumnChooser
-            columns={columns}
-            columnsConfig={columnsConfig}
-            containerRef={containerRef}
-            dataTestPrefixId={dataTestPrefixId}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default React.memo(TTitle, isEqual);

package/src/components/Table/components/TTitle/components/ColumnChooser/ColumnChooser.style.ts

@@ -1,8 +0,0 @@
-import { css } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-
-export const menuStyle = () => {
-  return css`
-    border: ${vars['border-width']['1']} solid ${vars.color['border-color'].decorative.default};
-  `;
-};

package/src/components/Table/components/TTitle/components/ColumnChooser/ColumnChooser.tsx

@@ -1,152 +0,0 @@
-import React, { useRef } from 'react';
-import { Popover } from 'react-aria-components';
-
-import { menuStyle } from './ColumnChooser.style';
-import { flattenColumns } from '../utils';
-import Button from 'components/Button';
-import { Switch } from 'components/Controls';
-import { ListItem, ListItemAction, ListItemText } from 'components/List';
-import { listStyle } from 'components/List/List.style';
-import { MenuItemWrapper, MenuWrapper, popoverStyle } from 'components/Menu/Menu.style';
-import MenuItemDivider from 'components/Menu/MenuItemDivider';
-import type { TableProps } from 'components/Table/types';
-
-import type { TestProps } from '~/utils/types';
-
-type Props = Pick<TableProps<any>, 'columns' | 'columnsConfig'> & {
-  /** Element that that serves as the positioning boundary of the ColumnChooser Menu */
-  containerRef: React.MutableRefObject<any>;
-} & TestProps;
-
-/** @TODO create a generic Popover component */
-
-const ColumnChooser: React.FC<Props> = ({
-  columns,
-  columnsConfig,
-  containerRef,
-  dataTestPrefixId,
-}) => {
-  const [isBtnOpen, setIsBtnOpen] = React.useState<boolean>(false);
-
-  const options = flattenColumns(columns);
-
-  const menuRef = useRef(null);
-
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    new Set<string>(
-      Object.keys(columnsConfig.columnVisibility).filter(
-        (col) => columnsConfig.columnVisibility[col] === true
-      )
-    )
-  );
-
-  const disabledKeys = options
-    .filter((option) => option.isAlwaysVisible)
-    .map((option) => option.id);
-
-  const btnRef = useRef(null);
-
-  const handleBtnClick = (e) => {
-    if (e?.preventDefault) {
-      e?.preventDefault();
-    }
-
-    setIsBtnOpen((isOpen) => !isOpen);
-  };
-
-  const handleSelectionChange = (keys) => {
-    const keysArray = Array.from(keys);
-    setSelectedKeys(keys);
-
-    columnsConfig.setColumnVisibility(
-      options.reduce((obj, item) => {
-        obj[item.id] = keysArray.includes(item.id);
-
-        return obj;
-      }, {})
-    );
-  };
-
-  return (
-    <>
-      <Button
-        ref={btnRef}
-        aria-label="Menu"
-        onClick={handleBtnClick}
-        aria-controls={isBtnOpen ? 'basic-menu' : undefined}
-        aria-haspopup="true"
-        aria-expanded={isBtnOpen ? 'true' : undefined}
-        /** @TODO add iconLeft functionality to compact Button */
-        // iconLeftName="columnChooser"
-        size="compact"
-        type="secondary"
-        onKeyDown={(e) => {
-          if (e.key === 'ArrowDown') {
-            menuRef.current.focus();
-          }
-        }}
-        dataTestPrefixId={`${dataTestPrefixId}_column_chooser_`}
-      >
-        Edit Columns
-      </Button>
-      <Popover
-        triggerRef={btnRef}
-        css={popoverStyle}
-        isOpen={isBtnOpen}
-        onOpenChange={() => setIsBtnOpen((isOpen) => !isOpen)}
-        shouldCloseOnInteractOutside={() => true}
-        boundaryElement={containerRef.current}
-        /** @TODO adjust this when compact Button with iconLeft is implemented */
-        crossOffset={-31}
-      >
-        <MenuWrapper
-          ref={menuRef}
-          aria-label="Menu"
-          selectionMode="multiple"
-          selectedKeys={selectedKeys}
-          css={[listStyle({}), menuStyle()]}
-          onSelectionChange={handleSelectionChange}
-          disabledKeys={disabledKeys}
-        >
-          {options.map((col, index) => {
-            const key = col.id;
-
-            const testIdKey = col.header.toLowerCase().split(' ').join('_');
-
-            return (
-              <>
-                <MenuItemWrapper
-                  isCompact={true}
-                  rowSize="compact"
-                  isDisabled={col.isAlwaysVisible}
-                  id={key}
-                  key={key}
-                >
-                  <ListItem
-                    key={key}
-                    textValue={col.header}
-                    parentType="Menu"
-                    css={{ width: '100%' }}
-                    data-testid={`${dataTestPrefixId}_column_chooser_${testIdKey}`}
-                  >
-                    <ListItemText>{col.header}</ListItemText>
-                    <ListItemAction>
-                      <Switch
-                        isDisabled={col.isAlwaysVisible}
-                        isSelected={selectedKeys?.has(key)}
-                        dataTestPrefixId={`${dataTestPrefixId}_column_chooser_${testIdKey}`}
-                      />
-                    </ListItemAction>
-                  </ListItem>
-                </MenuItemWrapper>
-                {index < options.length - 1 && <MenuItemDivider />}
-              </>
-            );
-          })}
-        </MenuWrapper>
-      </Popover>
-    </>
-  );
-};
-
-export default ColumnChooser;

package/src/components/Table/components/TTitle/components/ColumnChooser/index.ts

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

package/src/components/Table/components/TTitle/components/utils.ts

@@ -1,9 +0,0 @@
-export const flattenColumns = (columns) => {
-  return columns.reduce((flattenedColumns, column) => {
-    if (column.columns) {
-      return flattenedColumns.concat(flattenColumns(column.columns));
-    } else {
-      return flattenedColumns.concat(column);
-    }
-  }, []);
-};

package/src/components/Table/components/TTitle/index.ts

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

package/src/components/Table/components/index.ts

@@ -1,7 +0,0 @@
-export { default as TBody } from './TBody';
-export { default as THead } from './THead';
-export { default as TH } from './TH';
-export { default as TR } from './TR';
-export { default as TD } from './TD';
-export { default as TTitle } from './TTitle';
-export { default as TPagination } from './TPagination';

package/src/components/Table/constants.tsx

@@ -1,8 +0,0 @@
-export const ACTIONS_CELL_WIDTH = 52;
-export const ACTIONS_BAR_HEIGHT = 44;
-
-export const contentAlignToFlex = {
-  left: 'flex-start',
-  center: 'center',
-  right: 'flex-end',
-};

package/src/components/Table/hooks/index.ts

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