@campxdev/react-blueprint 1.6.3 → 1.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -63,4 +63,6 @@ export const CellContainer = styled(Stack)(({ theme }) => ({
   alignItems: 'center',
   height: '100%',
   flexDirection: 'row',
+  justifyContent: 'flex-start',
+  gap: '12px',
 }));

package/src/components/Layout/PageHeader/components/DensitySelector/DensitySelector.tsx

@@ -2,7 +2,8 @@ import { MenuListProps, MenuProps, Stack, useTheme } from '@mui/material';
 import { GridDensity } from '@mui/x-data-grid';
 import { capitalize } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState, setDensity } from '../../../../../redux/export';
+import { setDensity } from '../../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../../redux/store';
 import { Button, DropdownMenu, Icons, Typography } from '../../../../export';
 import { DensityAnchor } from '../Anchors';
 
@@ -18,8 +19,7 @@ export const DensitySelector = ({
 }: DensitySelectorProps) => {
   const dispatch = useDispatch();
   const density = useSelector(
-    (state: RootState) =>
-      state.pageHeaderSlice[uniqueId]?.density || 'standard',
+    (state: RootState) => state.pageHeader[uniqueId]?.density || 'standard',
   );
   const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
 

package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx

@@ -3,10 +3,8 @@ import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  RootState,
-  setColumnVisibilityModel,
-} from '../../../../../redux/export';
+import { setColumnVisibilityModel } from '../../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../../redux/store';
 import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
 import { DropdownMenu } from '../../../../Navigation/export';
 
@@ -26,7 +24,7 @@ export const TableColumnsSelector = ({
 
   const columnVisibilityModel = useSelector(
     (state: RootState) =>
-      state.pageHeaderSlice[uniqueId]?.columnVisibilityModel ||
+      state.pageHeader[uniqueId]?.columnVisibilityModel ||
       columns.reduce((acc, column) => {
         acc[column.field] = true;
         return acc;

package/src/hooks/usePageHeader.ts

@@ -10,7 +10,7 @@ export const usePageHeader = () => {
   const dispatch = useDispatch();
   const filterState = useSelector(
     (state: RootState) =>
-      state.pageHeaderSlice[uuidRef.current] ||
+      state.pageHeader[uuidRef.current] ||
       ({} as {
         density: GridDensity;
         columnVisibilityModel: GridColumnVisibilityModel;

package/src/redux/export.ts

@@ -1,2 +1 @@
-export * from './slices/pageHeaderSlice';
-export * from './store';
+export * from './reducers';

package/src/redux/reducers.ts

@@ -0,0 +1,5 @@
+import { pageHeaderSlice } from './slices/pageHeaderSlice';
+
+export const reactBlueprintReducers = {
+  pageHeader: pageHeaderSlice.reducer,
+};

package/src/redux/slices/pageHeaderSlice.ts

@@ -10,7 +10,7 @@ export type PageHeaderState = {
 
 const initialState: PageHeaderState = {};
 
-const pageHeaderSlice = createSlice({
+export const pageHeaderSlice = createSlice({
   name: 'pageHeader',
   initialState,
   reducers: {
@@ -31,5 +31,3 @@ const pageHeaderSlice = createSlice({
 
 export const { setColumnVisibilityModel, setDensity, resetStateForUniqueId } =
   pageHeaderSlice.actions;
-
-export default pageHeaderSlice.reducer;

package/src/redux/store.ts

@@ -1,10 +1,8 @@
-import { configureStore } from '@reduxjs/toolkit';
-import pageHeaderSlice from './slices/pageHeaderSlice';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { reactBlueprintReducers } from './reducers';
 
 export const store = configureStore({
-  reducer: {
-    pageHeaderSlice,
-  },
+  reducer: combineReducers(reactBlueprintReducers),
 });
 
 export type RootState = ReturnType<typeof store.getState>;