@infinite-table/infinite-react 0.4.12 → 0.5.0

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

@@ -0,0 +1,364 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,94 @@
+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

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