@bitrise/bitkit 13.253.0 → 13.255.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.253.0",
+  "version": "13.255.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Form/Checkbox/Checkbox.theme.ts

@@ -22,6 +22,12 @@ const CheckboxTheme = {
         },
         backgroundColor: 'purple.50',
       },
+      _indeterminate: {
+        _disabled: {
+          backgroundColor: 'neutral.80',
+        },
+        backgroundColor: 'purple.50',
+      },
       _disabled: {
         backgroundColor: 'neutral.93',
         borderColor: 'neutral.90',
@@ -36,6 +42,7 @@ const CheckboxTheme = {
       _hover: {
         borderColor: 'neutral.70',
       },
+      backgroundColor: 'neutral.100',
       border: '1px solid',
       borderColor: 'neutral.90',
       borderRadius: '4',

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -31,7 +31,7 @@ export interface CheckboxProps
 const CustomIcon = (props: CheckboxIconProps) => {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { __css, isChecked, isIndeterminate } = props;
-  if (!isChecked) {
+  if (!isChecked && !isIndeterminate) {
     return null;
   }
   return <Icon __css={__css} name={isIndeterminate ? 'Minus' : 'Check'} />;

package/src/Components/Table/MultiSelectTable.context.tsx

@@ -0,0 +1,122 @@
+import { createContext, ReactNode, useContext, useMemo, useState, useCallback } from 'react';
+
+interface MultiSelectTableContextType {
+  selectedItems: any[];
+  selectedIds: string[];
+  allEnabledItems: any[];
+  allSelected: boolean;
+  someSelected: boolean;
+  toggleItem: (item: any) => void;
+  selectAll: (items: any[]) => void;
+  deselectAll: () => void;
+  isSelected: (item: any) => boolean;
+  compareItems: (a: any, b: any) => boolean;
+  handleSelectAll: () => void;
+  handleSelectionChange: (values: string[]) => void;
+}
+
+const MultiSelectTableContext = createContext<MultiSelectTableContextType | undefined>(undefined);
+
+interface MultiSelectTableProviderProps {
+  children: ReactNode;
+  items: any[];
+  compareItems?: (a: unknown, b: unknown) => boolean;
+}
+
+export const MultiSelectTableProvider = ({ children, items, compareItems }: MultiSelectTableProviderProps) => {
+  const [selectedItems, setSelectedItems] = useState<any[]>([]);
+
+  const compare = useCallback(compareItems ?? ((a: unknown, b: unknown) => a === b), [compareItems]);
+
+  const toggleItem = useCallback(
+    (item: any) => {
+      setSelectedItems((prev) => {
+        const isItemSelected = prev.some((selected) => compare(selected, item));
+        if (isItemSelected) {
+          return prev.filter((selected) => !compare(selected, item));
+        }
+        return [...prev, item];
+      });
+    },
+    [compare],
+  );
+
+  const selectAll = useCallback((itemsToSelect: any[]) => {
+    setSelectedItems(itemsToSelect);
+  }, []);
+
+  const deselectAll = useCallback(() => {
+    setSelectedItems([]);
+  }, []);
+
+  const isSelected = useCallback(
+    (item: any) => selectedItems.some((selected) => compare(selected, item)),
+    [selectedItems, compare],
+  );
+
+  const selectedIds = useMemo(() => selectedItems.map((item) => item.id), [selectedItems]);
+  const allEnabledItems = useMemo(() => items.filter((item) => !item.isDisabled), [items]);
+  const allSelected = selectedIds.length === allEnabledItems.length && allEnabledItems.length > 0;
+  const someSelected = selectedIds.length > 0 && !allSelected;
+
+  const handleSelectAll = useCallback(() => {
+    if (someSelected) {
+      deselectAll();
+    } else if (selectedIds.length === 0) {
+      selectAll(allEnabledItems);
+    } else {
+      deselectAll();
+    }
+  }, [someSelected, selectedIds.length, allEnabledItems, selectAll, deselectAll]);
+
+  const handleSelectionChange = useCallback(
+    (values: string[]) => {
+      const newSelectedItems = items.filter((item) => values.includes(item.id) && !item.isDisabled);
+      selectAll(newSelectedItems);
+    },
+    [items, selectAll],
+  );
+
+  const value = useMemo(
+    () => ({
+      selectedItems,
+      selectedIds,
+      allEnabledItems,
+      allSelected,
+      someSelected,
+      toggleItem,
+      selectAll,
+      deselectAll,
+      isSelected,
+      compareItems: compare,
+      handleSelectAll,
+      handleSelectionChange,
+    }),
+    [
+      selectedItems,
+      selectedIds,
+      allEnabledItems,
+      allSelected,
+      someSelected,
+      toggleItem,
+      selectAll,
+      deselectAll,
+      isSelected,
+      compare,
+      handleSelectAll,
+      handleSelectionChange,
+    ],
+  );
+
+  return <MultiSelectTableContext.Provider value={value}>{children}</MultiSelectTableContext.Provider>;
+};
+
+export const useMultiSelectTableContext = () => {
+  const context = useContext(MultiSelectTableContext);
+
+  if (!context) {
+    throw new Error('useMultiSelectTableContext must be used within MultiSelectTableProvider');
+  }
+
+  return context;
+};

package/src/Components/Table/MultiSelectTh.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import Checkbox from '../Form/Checkbox/Checkbox';
+import Th, { TableColumnHeaderProps } from './Th';
+
+export interface CheckableThProps extends TableColumnHeaderProps {
+  isChecked?: boolean;
+  isIndeterminate?: boolean;
+  onCheckChange: () => void;
+}
+
+const MultiSelectTh = forwardRef<HTMLTableHeaderCellElement, CheckableThProps>(
+  ({ isChecked, isIndeterminate, onCheckChange, ...rest }, ref) => (
+    <Th width="1%" {...rest} ref={ref}>
+      <Checkbox isChecked={isChecked} isIndeterminate={isIndeterminate} onChange={onCheckChange} />
+    </Th>
+  ),
+);
+
+export default MultiSelectTh;