Merge pull request #21 from glints-dev/feat/index-table-checkbox-type

index table checkbox type

Author: ninariccimarie

.changeset/eleven-tigers-smell.md

@@ -0,0 +1,5 @@
+---
+'polaris-glints': minor
+---
+
+update index table checkbox type

polaris-react/src/components/CheckableButton/CheckableButton.tsx

@@ -7,14 +7,18 @@ import type {IndexTableHeadingCheckbox} from '../IndexTable';
 
 import styles from './CheckableButton.scss';
 
+export interface CheckboxProps
+  extends Omit<IndexTableHeadingCheckbox, 'checked'> {
+  checked?: boolean | 'indeterminate';
+}
 export interface CheckableButtonProps {
   accessibilityLabel?: string;
   label?: string;
   selected?: boolean | 'indeterminate';
   disabled?: boolean;
   onToggleAll?(): void;
   ariaLive?: 'off' | 'polite';
-  checkbox?: (props: IndexTableHeadingCheckbox) => React.ReactNode;
+  checkbox?: (props: CheckboxProps) => React.ReactNode;
 }
 
 export const CheckableButton = forwardRef(function CheckableButton(

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -62,11 +62,19 @@ interface IndexTableSortToggleLabels {
   [key: number]: IndexTableSortToggleLabel;
 }
 
-export interface IndexTableHeadingCheckbox {
+export interface IndexTableHeadingCheckbox
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'onChange'
+  > {
+  id?: string;
   label?: string;
-  onChange?: (checked: boolean) => unknown;
-  checked?: boolean | 'indeterminate';
+  hasError?: boolean;
   indeterminate?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  helpText?: string;
+  onChange?(newChecked: boolean, id: string): void;
 }
 
 export interface IndexTableBaseProps {
@@ -766,7 +774,7 @@ function IndexTableBase({
         {checkbox?.({
           label: selectAllLabel,
           onChange: handleSelectPage,
-          checked: bulkSelectState,
+          checked: Boolean(bulkSelectState),
         })}
       </div>
     );

polaris-react/src/components/SelectAllActions/SelectAllActions.tsx

@@ -4,8 +4,7 @@ import {Transition} from 'react-transition-group';
 import {classNames} from '../../utilities/css';
 import type {Action} from '../../types';
 import {UnstyledButton} from '../UnstyledButton';
-import {CheckableButton} from '../CheckableButton';
-import type {IndexTableHeadingCheckbox} from '../IndexTable';
+import {CheckableButton, CheckboxProps} from '../CheckableButton';
 
 import styles from './SelectAllActions.scss';
 
@@ -29,7 +28,7 @@ export interface SelectAllActionsProps {
   disabled?: boolean;
   /** Callback when the select all checkbox is clicked */
   onToggleAll?(): void;
-  checkbox?: (props: IndexTableHeadingCheckbox) => React.ReactNode;
+  checkbox?: (props: CheckboxProps) => React.ReactNode;
 }
 
 export const SelectAllActions = forwardRef(function SelectAllActions(