@bitrise/bitkit 12.48.0 → 12.49.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.48.0",
+  "version": "12.49.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Form/FileInput/FileInput.tsx

@@ -95,16 +95,16 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
 
   return (
     <FormControl {...rest} isDisabled={isDisabled} isInvalid={isInputInvalid} ref={ref}>
-      <Box __css={style.container} data-disabled={isDisabled || undefined}>
+      <Box __css={style.container} data-disabled={isDisabled || undefined} gap="10px">
         {selectedFileNames.length > 0 ? (
           <>
-            <div>
+            <Box textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden">
               <Text as="h6" size="2" fontWeight="bold">
                 Selected file
               </Text>
               <Text as="span">{selectedFileNames[0]}</Text>
-            </div>
-            <Button leftIconName="MinusRemove" size="small" variant="secondary" onClick={onRemoveClick}>
+            </Box>
+            <Button leftIconName="MinusRemove" size="small" variant="secondary" onClick={onRemoveClick} flexShrink={0}>
               Remove
             </Button>
           </>

package/src/Components/Table/TablePagination.tsx

@@ -0,0 +1,101 @@
+import Box from '../Box/Box';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
+import Divider from '../Divider/Divider';
+import Dropdown from '../Dropdown/Dropdown';
+import { DropdownOption } from '../Dropdown/DropdownOption';
+import IconButton from '../IconButton/IconButton';
+import Text from '../Text/Text';
+import Td from './Td';
+import Tr from './Tr';
+
+const defaultItemsPerPageOptions = [10, 20, 50];
+
+export type TablePaginationProps = {
+  page: number;
+  perPage: number;
+  totalCount: number;
+  setPage: (newPage: number) => void;
+  setPerPage: (newPerPage: number) => void;
+  colSpan: number;
+  itemsPerPageOptions: number[];
+};
+
+const TablePagination = ({
+  page,
+  perPage,
+  totalCount,
+  setPage,
+  setPerPage,
+  colSpan,
+  itemsPerPageOptions = defaultItemsPerPageOptions,
+}: TablePaginationProps): JSX.Element => {
+  const pageCount = totalCount && Math.ceil(totalCount / perPage);
+  const itemsStartIndex = (page - 1) * perPage + 1;
+  const itemsEndIndex = Math.min(page * perPage, totalCount);
+
+  return (
+    <Tr>
+      <Td colSpan={colSpan}>
+        <Box display="flex" gap="1rem" alignItems="center">
+          <Box display="flex" gap="0.5rem" alignItems="center">
+            <Text>Items per page:</Text>
+            <Dropdown
+              onChange={({ target }) => setPerPage(Number(target.value))}
+              value={perPage.toString()}
+              search={false}
+              width="auto"
+            >
+              {itemsPerPageOptions.map((perPageOption) => (
+                <DropdownOption key={perPageOption} value={perPageOption.toString()}>
+                  {perPageOption}
+                </DropdownOption>
+              ))}
+            </Dropdown>
+          </Box>
+          <Divider orientation="vertical" height="3rem" color="neutral.90" />
+          <Text marginRight="auto">
+            {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
+          </Text>
+          <Divider orientation="vertical" height="3rem" color="neutral.90" />
+          <Box display="flex" gap="0.5rem" alignItems="center">
+            <Dropdown
+              onChange={({ target }) => setPage(Number(target.value))}
+              value={page.toString()}
+              search={false}
+              width="auto"
+            >
+              {[...Array(pageCount)].map((_, index) => {
+                const pageOption = index + 1;
+
+                return (
+                  <DropdownOption key={pageOption} value={pageOption.toString()}>
+                    {pageOption}
+                  </DropdownOption>
+                );
+              })}
+            </Dropdown>
+            <Text>of {pageCount} pages</Text>
+          </Box>
+          <ButtonGroup>
+            <IconButton
+              iconName="ChevronLeft"
+              variant="secondary"
+              onClick={() => setPage(page - 1)}
+              aria-label="Previous page"
+              isDisabled={page === 1}
+            />
+            <IconButton
+              iconName="ChevronRight"
+              variant="secondary"
+              onClick={() => setPage(page + 1)}
+              aria-label="Next page"
+              isDisabled={page === pageCount}
+            />
+          </ButtonGroup>
+        </Box>
+      </Td>
+    </Tr>
+  );
+};
+
+export default TablePagination;

package/src/index.ts

@@ -314,3 +314,6 @@ export type { FilterSwitchProps } from './Components/Form/FilterSwitch/FilterSwi
 export { default as FilterSwitch } from './Components/Form/FilterSwitch/FilterSwitch';
 
 export { default as FilterSwitchGroup } from './Components/Form/FilterSwitch/FilterSwitchGroup';
+
+export type { TablePaginationProps } from './Components/Table/TablePagination';
+export { default as TablePagination } from './Components/Table/TablePagination';