@infinite-table/infinite-react 0.5.1 → 0.5.2

package/src/components/InfiniteTable/api/getSelectionApi.ts

@@ -1,364 +0,0 @@
-import { InfiniteTable_RowInfoBase } from '../../../utils/groupAndPivot';
-import { getGroupKeysForDataItem } from '../../../utils/groupAndPivot/getGroupKeysForDataItem';
-
-import {
-  DataSourceComponentActions,
-  DataSourceState,
-  RowSelectionState,
-} from '../../DataSource';
-
-import {
-  GetRowSelectionStateConfig,
-  RowSelectionStateObject,
-} from '../../DataSource/RowSelectionState';
-
-type ArrayOfIds = Pick<InfiniteTable_RowInfoBase<any>, 'id'>[];
-
-export type InfiniteTableSelectionApi = {
-  get allRowsSelected(): boolean;
-  isRowSelected(pk: any, groupKeys?: any[]): boolean;
-  isRowDeselected(pk: any, groupKeys?: any[]): boolean;
-
-  selectRow(pk: any, groupKeys?: any[]): void;
-  deselectRow(pk: any, groupKeys?: any[]): void;
-  toggleRowSelection(pk: any, groupKeys?: any[]): void;
-
-  selectGroupRow(groupKeys: any[], children?: ArrayOfIds): void;
-  deselectGroupRow(groupKeys: any[], children?: ArrayOfIds): void;
-  toggleGroupRowSelection(groupKeys: any[], children?: ArrayOfIds): void;
-
-  getGroupRowSelectionState(groupKeys: any[]): boolean | null;
-
-  getSelectedPrimaryKeys(
-    rowSelection?: RowSelectionStateObject,
-  ): (string | number)[];
-  selectAll(): void;
-  deselectAll(): void;
-};
-
-export type GetSelectionApiParam<T> = {
-  getDataSourceState: () => DataSourceState<T>;
-  dataSourceActions: {
-    rowSelection: DataSourceComponentActions<T>['rowSelection'];
-  };
-};
-
-export function cloneRowSelection<T>(
-  rowSelection: RowSelectionState<T> | RowSelectionStateObject,
-  stateOrGetDataSourceState: DataSourceState<T> | (() => DataSourceState<T>),
-) {
-  return new RowSelectionState<T>(
-    rowSelection,
-    rowSelectionStateConfigGetter(stateOrGetDataSourceState),
-  );
-}
-
-export function rowSelectionStateConfigGetter<T>(
-  stateOrStateGetter: DataSourceState<T> | (() => DataSourceState<T>),
-): GetRowSelectionStateConfig<T> {
-  return () => {
-    const state =
-      typeof stateOrStateGetter === 'function'
-        ? stateOrStateGetter()
-        : stateOrStateGetter;
-
-    return {
-      lazyLoad: !!state.lazyLoad,
-      toPrimaryKey: state.toPrimaryKey,
-      onlyUsePrimaryKeys: !state.useGroupKeysForMultiRowSelection,
-      groupBy: state.groupBy,
-      groupDeepMap: state.groupDeepMap,
-      indexer: state.indexer,
-      totalCount: state.unfilteredCount,
-    };
-  };
-}
-
-export function getSelectionApi<T>(
-  param: GetSelectionApiParam<T>,
-): InfiniteTableSelectionApi {
-  const {
-    // getComputed,
-    // getState,
-    getDataSourceState,
-    // componentActions,
-    dataSourceActions,
-  } = param;
-
-  const selectionApi = {
-    get allRowsSelected() {
-      return getDataSourceState().allRowsSelected;
-    },
-
-    selectAll() {
-      const { rowSelection, selectionMode } = getDataSourceState();
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode is not multi-row';
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      const rowSelectionState = new RowSelectionState(
-        rowSelection as RowSelectionState<string>,
-        rowSelectionStateConfigGetter(getDataSourceState),
-      );
-
-      rowSelectionState.selectAll();
-
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-
-    deselectAll() {
-      const { rowSelection, selectionMode } = getDataSourceState();
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode is not multi-row';
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      const rowSelectionState = new RowSelectionState(
-        rowSelection as RowSelectionState<string>,
-        rowSelectionStateConfigGetter(getDataSourceState),
-      );
-
-      rowSelectionState.deselectAll();
-
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    isRowSelected(pk: any, groupKeys?: any[]) {
-      const { rowSelection, selectionMode, indexer, groupBy } =
-        getDataSourceState();
-
-      if (selectionMode === 'single-row') {
-        return rowSelection === pk;
-      }
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode is not multi-row or single-row';
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-      if (!groupKeys) {
-        const data = indexer.getDataForPrimaryKey(pk);
-        groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
-      }
-
-      return rowSelection.isRowSelected(pk, groupKeys);
-    },
-
-    isRowDeselected(pk: any, groupKeys?: any[]) {
-      return !this.isRowSelected(pk, groupKeys);
-    },
-
-    selectRow(pk: any, groupKeys?: any[]) {
-      const { rowSelection, selectionMode, indexer, groupBy } =
-        getDataSourceState();
-
-      if (selectionMode === 'single-row') {
-        dataSourceActions.rowSelection = pk;
-        return;
-      }
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode is not multi-row or single-row';
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      if (!groupKeys) {
-        const data = indexer.getDataForPrimaryKey(pk);
-        groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
-      }
-
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState),
-      );
-
-      rowSelectionState.selectRow(pk, groupKeys);
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-
-    deselectRow(pk: any, groupKeys?: any[]) {
-      const { selectionMode, rowSelection, indexer, groupBy } =
-        getDataSourceState();
-
-      if (selectionMode === 'single-row') {
-        dataSourceActions.rowSelection = null;
-        return;
-      }
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode is not multi-row or single-row';
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      if (selectionMode === 'multi-row') {
-        if (!groupKeys) {
-          const data = indexer.getDataForPrimaryKey(pk);
-          groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
-        }
-
-        const rowSelectionState = new RowSelectionState(
-          rowSelection,
-          rowSelectionStateConfigGetter(getDataSourceState),
-        );
-
-        rowSelectionState.deselectRow(pk, groupKeys);
-
-        dataSourceActions.rowSelection = rowSelectionState;
-      }
-    },
-    toggleRowSelection(pk: any, groupKeys?: any[]) {
-      if (this.isRowSelected(pk, groupKeys)) {
-        this.deselectRow(pk, groupKeys);
-      } else {
-        this.selectRow(pk, groupKeys);
-      }
-    },
-
-    selectGroupRow(groupKeys: any[]) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw 'No grouping specified';
-      }
-
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState),
-      );
-
-      rowSelectionState.selectGroupRow(groupKeys);
-
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-
-    deselectGroupRow(groupKeys: any[]) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw 'No grouping specified';
-      }
-
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState),
-      );
-
-      rowSelectionState.deselectGroupRow(groupKeys);
-
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-
-    toggleGroupRowSelection(groupKeys: any[]) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw 'No grouping specified';
-      }
-
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState),
-      );
-
-      rowSelectionState.toggleGroupRowSelection(groupKeys);
-
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-
-    getGroupRowSelectionState(
-      groupKeys: any[],
-      rowSelection?: RowSelectionStateObject | RowSelectionState,
-    ) {
-      const state = getDataSourceState();
-      const { selectionMode, groupBy } = state;
-
-      const rowSelectionState = rowSelection
-        ? new RowSelectionState(
-            rowSelection,
-            rowSelectionStateConfigGetter(state),
-          )
-        : (state.rowSelection as RowSelectionState);
-
-      if (selectionMode !== 'multi-row') {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw 'No grouping specified';
-      }
-
-      if (!(rowSelectionState instanceof RowSelectionState)) {
-        throw 'Invalid row selection';
-      }
-
-      return rowSelectionState.getGroupRowSelectionState(groupKeys);
-    },
-
-    getSelectedPrimaryKeys: (
-      rowSelection?: RowSelectionStateObject | RowSelectionState,
-    ) => {
-      const state = getDataSourceState();
-      const rowSelectionState = rowSelection
-        ? new RowSelectionState(
-            rowSelection,
-            rowSelectionStateConfigGetter(state),
-          )
-        : (state.rowSelection as RowSelectionState);
-
-      const selected: (string | number)[] = [];
-
-      if (state.lazyLoad) {
-        console.error(
-          `getSelectedPrimaryKeys  should not be called for lazy-loaded datasources as it wont return reliable results`,
-        );
-      }
-
-      // we can't iterate over state.dataArray as that has collapsed rows
-      // and wont reflect all the rows in the dataset
-      state.originalDataArray.forEach((data) => {
-        const id = state.toPrimaryKey(data);
-        if (rowSelectionState.isRowSelected(id)) {
-          selected.push(id);
-        }
-      });
-
-      return selected;
-    },
-  };
-
-  if (__DEV__) {
-    (globalThis as any).selectionApi = selectionApi;
-  }
-  return selectionApi;
-}

package/src/components/InfiniteTable/api/type.ts

@@ -1,11 +0,0 @@
-import { DataSourceState, DataSourceComponentActions } from '../../DataSource';
-import { InfiniteTableComputedValues, InfiniteTableState } from '../types';
-import { InfiniteTableActions } from '../types/InfiniteTableState';
-
-export type GetImperativeApiParam<T> = {
-  getComputed: () => InfiniteTableComputedValues<T>;
-  getState: () => InfiniteTableState<T>;
-  getDataSourceState: () => DataSourceState<T>;
-  componentActions: InfiniteTableActions<T>;
-  dataSourceActions: DataSourceComponentActions<T>;
-};

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

@@ -1,51 +0,0 @@
-import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
-
-import { ThemeVars } from '../theme.css';
-import {
-  left,
-  top,
-  pointerEvents,
-  position,
-  height,
-  zIndex,
-} from '../utilities.css';
-
-export const ActiveIndicatorWrapperCls = style([
-  pointerEvents.none,
-  position.sticky,
-  left['0'],
-  top['0'],
-  height['0'],
-  zIndex[1_000_000],
-]);
-export const ActiveCellIndicatorBaseCls = style(
-  [
-    pointerEvents.none,
-    position.sticky,
-    left['0'],
-    top['0'],
-    {
-      border: fallbackVar(
-        ThemeVars.components.Cell.activeBorder,
-
-        `${ThemeVars.components.Cell.activeBorderWidth} ${
-          ThemeVars.components.Cell.activeBorderStyle
-        } ${fallbackVar(
-          ThemeVars.components.Cell.activeBorderColor,
-          `rgb(${ThemeVars.components.Cell.activeBorderColor_R} ${ThemeVars.components.Cell.activeBorderColor_G} ${ThemeVars.components.Cell.activeBorderColor_B})`,
-        )}`,
-      ),
-
-      background: fallbackVar(
-        ThemeVars.components.Cell.activeBackground,
-        `rgba(${ThemeVars.components.Cell.activeBorderColor_R}, ${ThemeVars.components.Cell.activeBorderColor_G}, ${ThemeVars.components.Cell.activeBorderColor_B}, ${ThemeVars.components.Cell.activeBackgroundAlpha})`,
-      ),
-    },
-  ],
-  'ActiveCellIndicator',
-);
-
-export const ActiveCellIndicatorCls = styleVariants({
-  visible: [ActiveCellIndicatorBaseCls, { display: 'block' }],
-  hidden: [ActiveCellIndicatorBaseCls, { display: 'none' }],
-});

package/src/components/InfiniteTable/components/ActiveCellIndicator.tsx

@@ -1,116 +0,0 @@
-import * as React from 'react';
-import { useEffect, useLayoutEffect, useRef, CSSProperties } from 'react';
-import { stripVar } from '../../../utils/stripVar';
-import { useRerender } from '../../hooks/useRerender';
-import { MatrixBrain } from '../../VirtualBrain/MatrixBrain';
-
-import { internalProps } from '../internalProps';
-import { InternalVars } from '../theme.css';
-import { setInfiniteVarsOnNode } from '../utils/infiniteDOMUtils';
-import {
-  ActiveCellIndicatorCls,
-  ActiveIndicatorWrapperCls,
-} from './ActiveCellIndicator.css';
-
-const { rootClassName } = internalProps;
-
-const baseCls = `${rootClassName}-ActiveCellIndicator`;
-
-const columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
-
-export type ActiveCellIndicatorInfo = {
-  index: [number, number];
-  colOffset: number;
-  colWidth: number;
-};
-type ActiveCellIndicatorProps = {
-  activeCellIndex?: [number, number] | null;
-  brain: MatrixBrain;
-};
-
-const ActiveStyle: CSSProperties = {
-  [stripVar(InternalVars.activeCellOffsetX)]: InternalVars.activeCellColOffset,
-  [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
-
-  transform: `translate3d(${InternalVars.activeCellOffsetX}, ${InternalVars.activeCellOffsetY}, 0px)`,
-
-  width: InternalVars.activeCellColWidth,
-  height: InternalVars.activeCellRowHeight,
-};
-
-const ActiveCellIndicatorFn = (props: ActiveCellIndicatorProps) => {
-  const { brain } = props;
-  const [_rerenderId, rerender] = useRerender();
-
-  const domRef = useRef<HTMLDivElement>(null);
-
-  const active =
-    props.activeCellIndex != null &&
-    brain.getRowCount() > props.activeCellIndex[0];
-
-  useLayoutEffect(() => {
-    if (props.activeCellIndex == null) {
-      return;
-    }
-
-    const rowIndex = props.activeCellIndex[0];
-    const activeCellRowHeight = brain.getRowHeight(rowIndex);
-    const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, 'vertical');
-
-    const node = domRef.current!;
-
-    setInfiniteVarsOnNode(
-      {
-        activeCellRowHeight: `${activeCellRowHeight}px`,
-        activeCellRowOffset: `${activeCellRowOffset}px`,
-      },
-      node,
-    );
-  }, [props.activeCellIndex]);
-
-  useEffect(() => {
-    const removeOnRenderCountChange = brain.onRenderCountChange(() => {
-      rerender();
-    });
-
-    // const removeOnAvailableSizeChange = brain.onAvailableSizeChange(() => {
-    //   rerender();
-    // });
-
-    return () => {
-      removeOnRenderCountChange();
-    };
-  }, [brain]);
-
-  return (
-    // #correct-scroll-size this wrapper is here in order to make the indicator not take up space in the scroll container - to reproduce: remove this and click on a row, you will see that if you scroll at the bottom, there is extra space
-    <div
-      className={ActiveIndicatorWrapperCls}
-      data-name="active-cell"
-      style={
-        active
-          ? {
-              zIndex: `var(${columnZIndexAtIndex}-${
-                props.activeCellIndex![1]
-              })`,
-            }
-          : undefined
-      }
-    >
-      <div
-        ref={domRef}
-        data-name="active-cell-indicator"
-        className={`${baseCls} ${
-          active
-            ? ActiveCellIndicatorCls.visible
-            : ActiveCellIndicatorCls.hidden
-        }`}
-        style={active ? ActiveStyle : undefined}
-      ></div>
-    </div>
-  );
-};
-
-export const ActiveCellIndicator = React.memo(
-  ActiveCellIndicatorFn,
-) as typeof ActiveCellIndicatorFn;

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

@@ -1,56 +0,0 @@
-import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
-
-import { ThemeVars } from '../theme.css';
-import { left, top, pointerEvents, position, width } from '../utilities.css';
-
-export const ActiveRowIndicatorBaseCls = style(
-  [
-    pointerEvents.none,
-    position.sticky,
-    width['100%'],
-    top['0'],
-    left['0'],
-    {
-      border: fallbackVar(
-        ThemeVars.components.Row.activeBorder,
-        `${fallbackVar(
-          ThemeVars.components.Row.activeBorderWidth,
-          ThemeVars.components.Cell.activeBorderWidth,
-        )} ${fallbackVar(
-          ThemeVars.components.Row.activeBorderStyle,
-          ThemeVars.components.Cell.activeBorderStyle,
-        )} ${fallbackVar(
-          ThemeVars.components.Row.activeBorderColor,
-          `rgb(${ThemeVars.components.Cell.activeBorderColor_R} ${ThemeVars.components.Cell.activeBorderColor_G} ${ThemeVars.components.Cell.activeBorderColor_B})`,
-        )}`,
-      ),
-      background: fallbackVar(
-        ThemeVars.components.Row.activeBackground,
-        ThemeVars.components.Cell.activeBackground,
-        `rgba(${ThemeVars.components.Cell.activeBorderColor_R}, ${
-          ThemeVars.components.Cell.activeBorderColor_G
-        }, ${ThemeVars.components.Cell.activeBorderColor_B}, ${fallbackVar(
-          ThemeVars.components.Row.activeBackgroundAlpha,
-          ThemeVars.components.Cell.activeBackgroundAlpha,
-        )})`,
-      ),
-      vars: {
-        [ThemeVars.components.Row.activeBorderStyle]: fallbackVar(
-          ThemeVars.components.Row.activeBorderStyle,
-          ThemeVars.components.Cell.activeBorderStyle,
-        ),
-      },
-    },
-  ],
-  'ActiveRowIndicator',
-);
-
-export const ActiveRowIndicatorCls = styleVariants({
-  visible: [
-    ActiveRowIndicatorBaseCls,
-    {
-      display: 'block',
-    },
-  ],
-  hidden: [ActiveRowIndicatorBaseCls, { display: 'none' }],
-});

package/src/components/InfiniteTable/components/ActiveRowIndicator.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import { CSSProperties, useEffect, useLayoutEffect, useRef } from 'react';
-import { stripVar } from '../../../utils/stripVar';
-import { useRerender } from '../../hooks/useRerender';
-import { MatrixBrain } from '../../VirtualBrain/MatrixBrain';
-
-import { internalProps } from '../internalProps';
-import { InternalVars } from '../theme.css';
-import { setInfiniteVarsOnNode } from '../utils/infiniteDOMUtils';
-import { ActiveIndicatorWrapperCls } from './ActiveCellIndicator.css';
-import { ActiveRowIndicatorCls } from './ActiveRowIndicator.css';
-
-const { rootClassName } = internalProps;
-const baseCls = `${rootClassName}-ActiveRowIndicator`;
-
-type ActiveRowIndicatorProps = {
-  activeRowIndex?: number | null;
-  brain: MatrixBrain;
-};
-
-const ActiveStyle: CSSProperties = {
-  [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
-
-  transform: `translate3d(0px, calc( ${
-    InternalVars.activeCellOffsetY
-  } + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
-  height: InternalVars.activeCellRowHeight,
-};
-
-const ActiveRowIndicatorFn = (props: ActiveRowIndicatorProps) => {
-  const { brain } = props;
-
-  const domRef = useRef<HTMLDivElement>(null);
-
-  const active =
-    props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
-
-  const [_rerenderId, rerender] = useRerender();
-
-  useLayoutEffect(() => {
-    if (props.activeRowIndex == null) {
-      return;
-    }
-
-    const rowIndex = props.activeRowIndex;
-    const activeCellRowHeight = brain.getRowHeight(rowIndex);
-    const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, 'vertical');
-
-    const node = domRef.current!;
-
-    const vars = {
-      activeCellRowHeight: `${activeCellRowHeight}px`,
-      activeCellRowOffset: `${activeCellRowOffset}px`,
-    };
-
-    setInfiniteVarsOnNode(vars, node);
-  }, [props.activeRowIndex]);
-
-  useEffect(() => {
-    const removeOnScroll = brain.onScroll((scrollPosition) => {
-      setInfiniteVarsOnNode(
-        {
-          scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
-        },
-        domRef.current!,
-      );
-    });
-
-    const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
-
-    return () => {
-      removeOnRenderCountChange();
-      removeOnScroll();
-    };
-  }, [brain]);
-
-  return (
-    // #correct-scroll-size this wrapper is here in order to make the indicator not take up space in the scroll container - to reproduce: remove this and click on a row, you will see that if you scroll at the bottom, there is extra space
-    <div className={ActiveIndicatorWrapperCls} data-name="active-row">
-      <div
-        ref={domRef}
-        data-name="active-row-indicator"
-        className={`${baseCls} ${
-          active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden
-        }`}
-        style={active ? ActiveStyle : undefined}
-      ></div>
-    </div>
-  );
-};
-
-export const ActiveRowIndicator = React.memo(
-  ActiveRowIndicatorFn,
-) as typeof ActiveRowIndicatorFn;

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

@@ -1,13 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { cursor } from '../utilities.css';
-
-export const CheckBoxCls = style([
-  cursor.pointer,
-  {
-    selectors: {
-      '&[disabled]': {
-        opacity: 0.7,
-      },
-    },
-  },
-]);