@arbor-education/design-system.components 3.2.1 → 3.3.0

package/src/components/table/tableControls/TableControls.test.tsx

@@ -44,6 +44,26 @@ describe('TableControls', () => {
       expect(onRedo).toHaveBeenCalledTimes(1);
     });
 
+    test('disables the undo button when isUndoDisabled is true', () => {
+      render(<TableControls onUndo={vi.fn()} isUndoDisabled />);
+      expect(screen.getByRole('button', { name: /undo/i })).toBeDisabled();
+    });
+
+    test('does not disable the undo button by default', () => {
+      render(<TableControls onUndo={vi.fn()} />);
+      expect(screen.getByRole('button', { name: /undo/i })).toBeEnabled();
+    });
+
+    test('disables the redo button when isRedoDisabled is true', () => {
+      render(<TableControls onRedo={vi.fn()} isRedoDisabled />);
+      expect(screen.getByRole('button', { name: /redo/i })).toBeDisabled();
+    });
+
+    test('does not disable the redo button by default', () => {
+      render(<TableControls onRedo={vi.fn()} />);
+      expect(screen.getByRole('button', { name: /redo/i })).toBeEnabled();
+    });
+
     test('renders bulk actions dropdown when bulkActions is provided', () => {
       render(
         <TableControls

package/src/components/table/tableControls/TableControls.tsx

@@ -16,6 +16,8 @@ export type TableControlsProps = {
   bulkActions?: BulkAction[];
   onUndo?: () => void;
   onRedo?: () => void;
+  isUndoDisabled?: boolean;
+  isRedoDisabled?: boolean;
   showHideColumns?: boolean;
   hideColumnsProps?: HideColumnsDropdownProps;
   hasSearch?: boolean;
@@ -36,6 +38,8 @@ export const TableControls = (props: TableControlsProps) => {
     bulkActions,
     onUndo,
     onRedo,
+    isUndoDisabled = false,
+    isRedoDisabled = false,
     showHideColumns,
     hideColumnsProps,
     hasSearch,
@@ -73,6 +77,7 @@ export const TableControls = (props: TableControlsProps) => {
               variant="secondary"
               borderless
               isRound
+              disabled={isUndoDisabled}
               onClick={onUndo}
             >
               <Icon name="undo" screenReaderText="Undo" />
@@ -83,6 +88,7 @@ export const TableControls = (props: TableControlsProps) => {
               variant="secondary"
               borderless
               isRound
+              disabled={isRedoDisabled}
               onClick={onRedo}
             >
               <Icon name="redo" screenReaderText="Redo" />

package/src/components/table/useTableSettings.ts

@@ -8,7 +8,14 @@ export type TableSettings = {
   areCellColorsEnabled?: boolean;
 };
 
+export const DEFAULT_TABLE_SETTINGS: Required<TableSettings> = {
+  hasColumnBorders: false,
+  tableSpacing: TABLE_SPACING.M,
+  areCellColorsEnabled: true,
+};
+
 export type UseTableSettingsParams = {
+  initialSettings?: Partial<TableSettings>;
   onTableSettingsChanged?: (val: TableSettings) => void;
   onTableSettingsReset?: () => void;
   onColumnBordersChanged?: (val: boolean) => void;
@@ -18,15 +25,22 @@ export type UseTableSettingsParams = {
 
 export const useTableSettings = (params: UseTableSettingsParams = {}) => {
   const {
+    initialSettings,
     onTableSettingsChanged,
     onTableSettingsReset,
     onColumnBordersChanged,
     onTableSpacingChanged,
     onCellColorsChanged,
   } = params;
-  const [hasColumnBorders, setHasColumnBorders] = useState(false);
-  const [tableSpacing, setTableSpacing] = useState(TABLE_SPACING.M);
-  const [areCellColorsEnabled, setAreCellColorsEnabled] = useState(true);
+  const [hasColumnBorders, setHasColumnBorders] = useState(
+    initialSettings?.hasColumnBorders ?? DEFAULT_TABLE_SETTINGS.hasColumnBorders,
+  );
+  const [tableSpacing, setTableSpacing] = useState(
+    initialSettings?.tableSpacing ?? DEFAULT_TABLE_SETTINGS.tableSpacing,
+  );
+  const [areCellColorsEnabled, setAreCellColorsEnabled] = useState(
+    initialSettings?.areCellColorsEnabled ?? DEFAULT_TABLE_SETTINGS.areCellColorsEnabled,
+  );
 
   const settings = {
     hasColumnBorders,
@@ -35,9 +49,9 @@ export const useTableSettings = (params: UseTableSettingsParams = {}) => {
   };
 
   const resetSettings = () => {
-    setHasColumnBorders(false);
-    setTableSpacing(TABLE_SPACING.M);
-    setAreCellColorsEnabled(true);
+    setHasColumnBorders(DEFAULT_TABLE_SETTINGS.hasColumnBorders);
+    setTableSpacing(DEFAULT_TABLE_SETTINGS.tableSpacing);
+    setAreCellColorsEnabled(DEFAULT_TABLE_SETTINGS.areCellColorsEnabled);
     if (onTableSettingsReset) {
       onTableSettingsReset();
     }