@infinite-table/infinite-react 0.5.1 → 0.5.3

package/src/components/InfiniteTable/components/cell.css.ts

@@ -1,192 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { InfiniteClsShiftingColumns } from '../InfiniteCls.css';
-
-import { ThemeVars } from '../theme.css';
-import {
-  alignItems,
-  display,
-  flexFlow,
-  position,
-  userSelect,
-  whiteSpace,
-  willChange,
-} from '../utilities.css';
-
-export const columnAlignCellStyle = styleVariants({
-  center: { justifyContent: 'center' },
-  start: { justifyContent: 'flex-start' },
-  end: { justifyContent: 'flex-start', flexFlow: 'row-reverse' },
-});
-
-export const CellBorderObject = {
-  borderLeft: `${ThemeVars.components.Cell.borderWidth} solid transparent`,
-  borderRight: `${ThemeVars.components.Cell.borderWidth} solid transparent`,
-};
-
-export const CellClsVariants = styleVariants({
-  shifting: {
-    transition: 'left 300ms',
-  },
-  dragging: {
-    transition: 'none',
-  },
-});
-
-export const CellCls = style([
-  display.flex,
-  flexFlow.row,
-  alignItems.center,
-  position.absolute,
-  willChange.transform,
-  whiteSpace.nowrap,
-  userSelect.none,
-  {
-    padding: ThemeVars.components.Cell.padding,
-    ...CellBorderObject,
-  },
-]);
-
-export const ColumnCellCls = style([
-  CellCls,
-  {
-    selectors: {
-      [`${InfiniteClsShiftingColumns} &`]: {
-        // color: 'red',
-        transition: `transform ${ThemeVars.components.Cell.reorderEffectDuration}`,
-      },
-    },
-  },
-]);
-
-export const ColumnCellVariantsObject = {
-  first: {
-    borderTopLeftRadius: ThemeVars.components.Cell.borderRadius,
-    borderBottomLeftRadius: ThemeVars.components.Cell.borderRadius,
-  },
-  last: {
-    borderTopRightRadius: ThemeVars.components.Cell.borderRadius,
-    borderBottomRightRadius: ThemeVars.components.Cell.borderRadius,
-  },
-  groupByField: {},
-  firstInCategory: {},
-  lastInCategory: {},
-  pinnedStart: {},
-  pinnedEnd: {},
-  unpinned: {},
-  pinnedStartLastInCategory: {},
-  pinnedStartFirstInCategory: {},
-  pinnedEndFirstInCategory: {},
-  pinnedEndLastInCategory: {},
-};
-
-export const SelectionCheckboxCls = style({
-  marginInline: ThemeVars.components.SelectionCheckBox.marginInline,
-});
-
-export const ColumnCellRecipe = recipe({
-  base: [
-    {
-      color: ThemeVars.components.Cell.color,
-    },
-  ],
-  variants: {
-    dragging: { false: {}, true: {} },
-    rowActive: {
-      false: {},
-      true: {},
-    },
-    zebra: {
-      false: {},
-      even: {
-        background: ThemeVars.components.Row.background,
-      },
-      odd: {
-        background: ThemeVars.components.Row.oddBackground,
-      },
-    },
-    rowSelected: {
-      true: {
-        background: ThemeVars.components.Row.selectedBackground,
-      },
-      false: {},
-      null: {},
-    },
-    first: {
-      true: {
-        borderTopLeftRadius: ThemeVars.components.Cell.borderRadius,
-        borderBottomLeftRadius: ThemeVars.components.Cell.borderRadius,
-      },
-      false: {},
-    },
-    last: {
-      true: {
-        borderTopRightRadius: ThemeVars.components.Cell.borderRadius,
-        borderBottomRightRadius: ThemeVars.components.Cell.borderRadius,
-      },
-      false: {},
-    },
-    groupByField: {
-      true: ColumnCellVariantsObject.groupByField,
-      false: {},
-    },
-    firstInCategory: {
-      true: ColumnCellVariantsObject.firstInCategory,
-      false: {},
-    },
-    lastInCategory: {
-      true: ColumnCellVariantsObject.lastInCategory,
-      false: {},
-    },
-    pinned: {
-      start: {
-        // vars: {
-        //   [ThemeVars.components.Cell.reorderEffectDuration]: '0',
-        // },
-      },
-      end: {
-        // vars: {
-        //   [ThemeVars.components.Cell.reorderEffectDuration]: '0',
-        // },
-      },
-      false: {},
-    },
-    filtered: {
-      true: {},
-      false: {},
-    },
-  },
-
-  compoundVariants: [
-    {
-      variants: {
-        pinned: 'start',
-        lastInCategory: true,
-      },
-      style: ColumnCellVariantsObject.pinnedStartLastInCategory,
-    },
-    {
-      variants: {
-        pinned: 'start',
-        firstInCategory: true,
-      },
-      style: ColumnCellVariantsObject.pinnedStartFirstInCategory,
-    },
-    {
-      variants: {
-        pinned: 'end',
-        firstInCategory: true,
-      },
-      style: ColumnCellVariantsObject.pinnedEndFirstInCategory,
-    },
-    {
-      variants: {
-        pinned: 'end',
-        lastInCategory: true,
-      },
-      style: ColumnCellVariantsObject.pinnedEndLastInCategory,
-    },
-  ],
-});
-
-export type ColumnCellVariantsType = RecipeVariants<typeof ColumnCellRecipe>;

package/src/components/InfiniteTable/components/icons/ArrowDown.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import { TableIconProps, Icon } from './Icon';
-
-export const ArrowDown = (props: Omit<TableIconProps, 'children'>) => {
-  return (
-    <Icon {...props}>
-      <path
-        fill="currentColor"
-        d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"
-      />
-    </Icon>
-  );
-};

package/src/components/InfiniteTable/components/icons/ArrowUp.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import { TableIconProps, Icon } from './Icon';
-
-export const ArrowUp = (props: Omit<TableIconProps, 'children'>) => {
-  return (
-    <Icon {...props}>
-      <path
-        fill="currentColor"
-        d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"
-      />
-    </Icon>
-  );
-};

package/src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts

@@ -1,31 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
-import { cursor, fill, flex, transform } from '../../utilities.css';
-
-export const ExpanderIconCls = style([
-  fill.accentColor,
-  flex.none,
-  cursor.pointer,
-]);
-
-export const ExpanderIconClsVariants = recipe({
-  variants: {
-    expanded: {
-      true: transform.rotate90,
-      false: {},
-    },
-    direction: {
-      end: {},
-      start: {},
-    },
-  },
-  compoundVariants: [
-    {
-      variants: {
-        expanded: false,
-        direction: 'end',
-      },
-      style: transform.rotate180,
-    },
-  ],
-});

package/src/components/InfiniteTable/components/icons/ExpanderIcon.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-
-import { join } from '../../../../utils/join';
-import { isControlled } from '../../../utils/isControlled';
-import { ExpanderIconCls, ExpanderIconClsVariants } from './ExpanderIcon.css';
-import { InfiniteTableIconClassName } from './InfiniteTableIconClassName';
-
-type ExpanderIconProps = {
-  size?: number;
-  expanded?: boolean;
-  defaultExpanded?: boolean;
-  onChange?: (expanded: boolean) => void;
-  style?: React.CSSProperties;
-  className?: string;
-  direction?: 'end' | 'start';
-};
-
-export function ExpanderIcon(props: ExpanderIconProps) {
-  const { size = 24, direction = 'start' } = props;
-
-  const [expanded, setExpanded] = useState(
-    props.expanded ?? props.defaultExpanded,
-  );
-
-  const onClick = () => {
-    props.onChange?.(!expanded);
-    if (!isControlled('expanded', props)) {
-      setExpanded(!expanded);
-    }
-  };
-
-  React.useEffect(() => {
-    if (isControlled('expanded', props)) {
-      setExpanded(props.expanded);
-    }
-  }, [props.expanded]);
-  return (
-    <svg
-      data-name="expander-icon"
-      xmlns="http://www.w3.org/2000/svg"
-      height={`${size}px`}
-      viewBox="0 0 24 24"
-      width={`${size}px`}
-      style={props.style}
-      onClick={onClick}
-      className={join(
-        props.className,
-        ExpanderIconCls,
-        ExpanderIconClsVariants({
-          direction: direction || 'start',
-          expanded,
-        }),
-        `${InfiniteTableIconClassName}`,
-        `${InfiniteTableIconClassName}-expander`,
-        `InfiniteIcon-expander--${expanded ? 'expanded' : 'collapsed'}`,
-        `InfiniteIcon-expander--${direction === 'end' ? 'end' : 'start'}`,
-      )}
-    >
-      <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
-    </svg>
-  );
-}

package/src/components/InfiniteTable/components/icons/Icon.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-export type TableIconProps = {
-  children: React.ReactNode;
-  size?: number;
-  style?: React.CSSProperties;
-  className?: string;
-};
-
-export const Icon = (props: TableIconProps) => {
-  const size = props.size ?? `var(--ITableHeaderCell-icon-size)`;
-  const style = { flex: 'none', width: size, height: size, ...props.style };
-  return (
-    //@ts-ignore
-    <svg viewBox="0 0 24 24" {...props} style={style}>
-      {props.children}
-    </svg>
-  );
-};

package/src/components/InfiniteTable/components/icons/InfiniteTableIconClassName.ts

@@ -1 +0,0 @@
-export const InfiniteTableIconClassName = 'InfiniteTableIcon';

package/src/components/InfiniteTable/components/icons/LoadingIcon.css.ts

@@ -1,8 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { cursor, stroke, flex } from '../../utilities.css';
-
-export const LoadingIconCls = style([
-  stroke.accentColor,
-  flex.none,
-  cursor.pointer,
-]);

package/src/components/InfiniteTable/components/icons/LoadingIcon.tsx

@@ -1,45 +0,0 @@
-import { TableIconProps } from './Icon';
-import * as React from 'react';
-import { join } from '../../../../utils/join';
-import { LoadingIconCls } from './LoadingIcon.css';
-
-export const LoadingIcon = (props: Omit<TableIconProps, 'children'>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        margin: 'auto',
-        display: 'block',
-        shapeRendering: 'auto',
-      }}
-      width="24px"
-      height="24px"
-      viewBox="0 0 100 100"
-      preserveAspectRatio="xMidYMid"
-      className={join(
-        props.className,
-        LoadingIconCls,
-        'InfiniteIcon',
-        'InfiniteIcon-loading',
-      )}
-    >
-      <circle
-        cx="50"
-        cy="50"
-        fill="none"
-        strokeWidth="10"
-        r="35"
-        strokeDasharray="164.93361431346415 56.97787143782138"
-      >
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          repeatCount="indefinite"
-          dur="1s"
-          values="0 50 50;360 50 50"
-          keyTimes="0;1"
-        />
-      </circle>
-    </svg>
-  );
-};

package/src/components/InfiniteTable/components/icons/MenuIcon.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-import { join } from '../../../../utils/join';
-import { ThemeVars } from '../../theme.css';
-
-import { HeaderMenuIconCls } from '../InfiniteTableHeader/header.css';
-import { InfiniteTableIconClassName } from './InfiniteTableIconClassName';
-
-type MenuIconProps = {
-  lineWidth?: number;
-  lineStyle?: React.CSSProperties;
-  style?: React.CSSProperties;
-  className?: string;
-  domProps?: React.HTMLAttributes<HTMLDivElement>;
-};
-
-const defaultLineStyle: React.CSSProperties = {
-  width: '100%',
-  pointerEvents: 'none',
-};
-
-const lineClassName = `${InfiniteTableIconClassName}-menu`;
-
-export function MenuIcon(props: MenuIconProps) {
-  const { style, className, domProps } = props;
-
-  const lineStyle = {
-    ...defaultLineStyle,
-    borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`,
-    ...props.lineStyle,
-  };
-
-  return (
-    <div
-      {...domProps}
-      style={style}
-      onPointerDown={(e) => e.stopPropagation()}
-      className={join(
-        className,
-        HeaderMenuIconCls,
-        InfiniteTableIconClassName,
-        `${InfiniteTableIconClassName}-menu`,
-      )}
-    >
-      <div className={lineClassName} style={lineStyle}></div>
-      <div className={lineClassName} style={lineStyle}></div>
-      <div className={lineClassName} style={lineStyle}></div>
-    </div>
-  );
-}

package/src/components/InfiniteTable/components/icons/SortIcon.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-
-import { join } from '../../../../utils/join';
-import { HeaderSortIconIndexCls } from '../InfiniteTableHeader/header.css';
-import { InfiniteTableIconClassName } from './InfiniteTableIconClassName';
-
-type SortIconProps = {
-  direction: 1 | -1 | 0;
-  size?: number;
-  lineWidth?: number;
-  lineStyle?: React.CSSProperties;
-  style?: React.CSSProperties;
-  className?: string;
-  index?: number;
-};
-
-const defaultLineStyle: React.CSSProperties = {
-  marginTop: 2,
-  marginBottom: 2,
-  transition: `width 0.25s, opacity 0.25s`,
-};
-
-export function SortIcon(props: SortIconProps) {
-  const [rendered, setRendered] = useState(true);
-  const [opacity, setOpacity] = useState(0);
-
-  const { direction, lineWidth = 1, style, className, index } = props;
-
-  const showIndex = index != null && index > 0;
-
-  const size = props.size ?? 16;
-
-  const part = Math.floor(size / 4);
-
-  const sizes = direction
-    ? [size - 3 * part, size - 2 * part, size - part]
-    : [0, 0, 0];
-
-  if (direction === -1) {
-    sizes.reverse();
-  }
-
-  const lineStyle = {
-    ...defaultLineStyle,
-    borderTop: `${lineWidth}px solid currentColor`,
-    ...props.lineStyle,
-    opacity,
-  };
-
-  useEffect(() => {
-    const newOpacity = direction != 0 ? 1 : 0;
-
-    if (!rendered && newOpacity) {
-      setRendered(true);
-    }
-    if (newOpacity !== opacity) {
-      const rafId = requestAnimationFrame(() => {
-        setOpacity(newOpacity);
-      });
-
-      return () => {
-        cancelAnimationFrame(rafId);
-      };
-    }
-    return () => {};
-  }, [direction, rendered]);
-
-  const onTransitionEnd = () => {
-    const hidden = opacity === 0 && direction === 0;
-    const newRendered = !hidden;
-    if (newRendered !== rendered) {
-      setRendered(newRendered);
-    }
-  };
-
-  if (!rendered) {
-    return null;
-  }
-
-  const indexStyle: React.CSSProperties = {};
-
-  if (direction === -1) {
-    indexStyle.top = '100%';
-  }
-
-  return (
-    <div
-      style={{ ...style, width: size }}
-      className={join(
-        className,
-        InfiniteTableIconClassName,
-        `${InfiniteTableIconClassName}-sort`,
-      )}
-    >
-      {showIndex ? (
-        <div
-          data-name="index"
-          style={indexStyle}
-          className={HeaderSortIconIndexCls}
-        >
-          {index}
-        </div>
-      ) : null}
-      <div
-        style={{ width: sizes[0], ...lineStyle }}
-        onTransitionEnd={onTransitionEnd}
-      ></div>
-      <div style={{ width: sizes[1], ...lineStyle }}></div>
-      <div style={{ width: sizes[2], ...lineStyle }}></div>
-    </div>
-  );
-}

package/src/components/InfiniteTable/eventHandlers/eventHandlerTypes.ts

@@ -1,57 +0,0 @@
-import {
-  DataSourceState,
-  DataSourceComponentActions,
-  RowSelectionState,
-} from '../../DataSource';
-import { InfiniteTableSelectionApi } from '../api/getSelectionApi';
-import {
-  InfiniteTableApi,
-  InfiniteTableComputedValues,
-  InfiniteTableState,
-} from '../types';
-import { InfiniteTableActions } from '../types/InfiniteTableState';
-
-export type InfiniteTableEventHandlerAbstractContext<T> = {
-  getComputed: () => InfiniteTableComputedValues<T>;
-  getState: () => {
-    activeRowIndex: InfiniteTableState<T>['activeRowIndex'];
-    activeCellIndex: InfiniteTableState<T>['activeCellIndex'];
-    keyboardNavigation: InfiniteTableState<T>['keyboardNavigation'];
-    keyboardSelection: InfiniteTableState<T>['keyboardSelection'];
-  };
-  actions: InfiniteTableActions<T>;
-  cloneRowSelection: (
-    rowSelection: RowSelectionState<T>,
-  ) => RowSelectionState<T>;
-  getDataSourceState: () => {
-    rowSelection: DataSourceState<T>['rowSelection'];
-    groupBy: DataSourceState<T>['groupBy'];
-    selectionMode: DataSourceState<T>['selectionMode'];
-    dataArray: { id: string; isGroupRow: boolean; groupKeys?: any[] }[];
-  };
-  dataSourceActions: DataSourceComponentActions<T>;
-  api: {
-    selectionApi: InfiniteTableSelectionApi;
-  };
-};
-
-export type InfiniteTableEventHandlerContext<T> = {
-  getComputed: () => InfiniteTableComputedValues<T>;
-  getState: () => InfiniteTableState<T>;
-  actions: InfiniteTableActions<T>;
-  cloneRowSelection: (
-    rowSelection: RowSelectionState<T>,
-  ) => RowSelectionState<T>;
-  getDataSourceState: () => DataSourceState<T>;
-  dataSourceActions: DataSourceComponentActions<T>;
-  api: InfiniteTableApi<T>;
-};
-
-export type InfiniteTableKeyboardEventHandlerContext<T> =
-  InfiniteTableEventHandlerContext<T>;
-
-export type InfiniteTableCellClickEventHandlerContext<T> =
-  InfiniteTableEventHandlerContext<T> & {
-    rowIndex: number;
-    colIndex: number;
-  };