@bitrise/bitkit 13.318.0 → 13.320.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.318.0",
+  "version": "13.320.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,11 +38,11 @@
     "chakra-ui-2--theme": "npm:@chakra-ui/theme@3.4.9",
     "chakra-ui-2--theme-tools": "npm:@chakra-ui/theme-tools@2.2.9",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.23.22",
+    "framer-motion": "^12.23.24",
     "luxon": "^3.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-focus-lock": "2.13.6",
+    "react-focus-lock": "2.13.7",
     "react-imask": "^7.6.1",
     "react-markdown": "^10.1.0"
   },
@@ -51,39 +51,39 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@bitrise/eslint-plugin": "^2.12.0",
-    "@google-cloud/storage": "^7.17.1",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
+    "@google-cloud/storage": "^7.17.3",
+    "@storybook/addon-docs": "^9.1.16",
+    "@storybook/addon-links": "^9.1.16",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^9.1.10",
+    "@storybook/react-webpack5": "^9.1.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/luxon": "^3.7.1",
-    "@types/react": "^18.3.25",
+    "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "axios": "^1.12.2",
+    "axios": "^1.13.2",
     "chakra-ui-2--cli": "npm:@chakra-ui/cli@2.5.8",
     "eslint": "^8.57.1",
-    "glob": "^11.0.3",
+    "glob": "^11.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "26.1.0",
     "lodash": "^4.17.21",
-    "prettier": "^3.6.2",
-    "react-hook-form": "^7.63.0",
-    "release-it": "^19.0.5",
-    "storybook": "^9.1.10",
-    "ts-jest": "^29.4.4",
+    "prettier": "^3.7.3",
+    "react-hook-form": "^7.67.0",
+    "release-it": "^19.0.6",
+    "storybook": "^9.1.16",
+    "ts-jest": "^29.4.5",
     "typescript": "^5.9.3"
   },
   "files": [

package/src/Components/DatePicker/DatePicker.tsx

@@ -19,13 +19,13 @@ import { DatePickerDayViewProps } from './DatePickerDay';
 export { useDateRange, DateRange };
 
 export type DatePickerProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  onClose?: () => void;
   dayTooltip?: DatePickerDayViewProps['tooltip'];
   selectable?: DateRange;
-  onClose: () => void;
   onClear?: () => void;
   visible: boolean;
-  variant?: 'default' | 'filter';
+  variant?: 'default' | 'filter' | 'inline';
 } & (
   | {
       selected?: DateRange;
@@ -88,7 +88,7 @@ const DatePicker = (props: DatePickerProps) => {
   }, [initialRange]);
 
   const handleClose = () => {
-    onClose();
+    onClose?.();
     setDateTo(undefined);
     setDateFrom(undefined);
   };
@@ -158,7 +158,7 @@ const DatePicker = (props: DatePickerProps) => {
       setDateFrom(dateFromNew);
       setDateTo(dateToNew);
 
-      if (variant === 'default') {
+      if (variant === 'default' || variant === 'inline') {
         if (!dateFromNew || previewNew) {
           return;
         }
@@ -200,58 +200,63 @@ const DatePicker = (props: DatePickerProps) => {
     [isMonthSelector],
   );
 
-  return (
-    <Popover isLazy isOpen={visible} lazyBehavior="unmount" modifiers={[]} onClose={onClose}>
-      <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent aria-label="select date range">
-        <FocusLock returnFocus>
-          <DatePickerContext value={ctx}>
-            <Box padding="24">
-              {isMonthSelector ? (
-                <DatePickerMonthSelector
-                  onMonthSelected={onMonthSelected}
-                  viewDate={isMonthSelector === 'left' ? leftViewDate : rightViewDate}
-                />
-              ) : (
-                <>
-                  <Box display="flex" gap="32" marginBottom="24">
-                    <DatePickerMonth
-                      controls={isSingleMonthView ? 'both' : 'left'}
-                      onMonthClick={onMonthClickLeft}
-                      onViewDateChange={updateLeftViewDate}
-                      viewDate={leftViewDate}
-                    />
+  const datePicker = (
+    <DatePickerContext value={ctx}>
+      <Box padding={variant === 'inline' ? '0' : '24'}>
+        {isMonthSelector ? (
+          <DatePickerMonthSelector
+            onMonthSelected={onMonthSelected}
+            viewDate={isMonthSelector === 'left' ? leftViewDate : rightViewDate}
+          />
+        ) : (
+          <>
+            <Box display="flex" gap="32" marginBottom="24">
+              <DatePickerMonth
+                controls={isSingleMonthView ? 'both' : 'left'}
+                onMonthClick={onMonthClickLeft}
+                onViewDateChange={updateLeftViewDate}
+                viewDate={leftViewDate}
+              />
 
-                    {!isSingleMonthView && (
-                      <DatePickerMonth
-                        controls="right"
-                        onMonthClick={onMonthClickRight}
-                        onViewDateChange={updateRightViewDate}
-                        viewDate={rightViewDate}
-                      />
-                    )}
-                  </Box>
-                  {variant === 'filter' && (
-                    <DatePickerFooter
-                      mode={mode || 'range'}
-                      onApply={() => handleApply(dateFrom, dateTo)}
-                      onClear={onClear}
-                      onClose={handleClose}
-                      selected={currentSelected}
-                    />
-                  )}
-                  {variant === 'default' && mode === 'day' && (
-                    <Box display="flex" justifyContent="space-around">
-                      <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
-                        Today
-                      </Button>
-                    </Box>
-                  )}
-                </>
+              {!isSingleMonthView && (
+                <DatePickerMonth
+                  controls="right"
+                  onMonthClick={onMonthClickRight}
+                  onViewDateChange={updateRightViewDate}
+                  viewDate={rightViewDate}
+                />
               )}
             </Box>
-          </DatePickerContext>
-        </FocusLock>
+            {variant === 'filter' && (
+              <DatePickerFooter
+                mode={mode || 'range'}
+                onApply={() => handleApply(dateFrom, dateTo)}
+                onClear={onClear}
+                onClose={handleClose}
+                selected={currentSelected}
+              />
+            )}
+            {variant === 'default' && mode === 'day' && (
+              <Box display="flex" justifyContent="space-around">
+                <Button onClick={() => handleSelect(DateTime.now())} variant="tertiary">
+                  Today
+                </Button>
+              </Box>
+            )}
+          </>
+        )}
+      </Box>
+    </DatePickerContext>
+  );
+
+  return variant === 'inline' ? (
+    datePicker
+  ) : (
+    <Popover isLazy isOpen={visible} lazyBehavior="unmount" modifiers={[]} onClose={onClose}>
+      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverContent aria-label="select date range">
+        <FocusLock returnFocus />
+        {datePicker}
       </PopoverContent>
     </Popover>
   );

package/src/Components/Dialog/DialogProps.ts

@@ -1,8 +1,7 @@
 import { HTMLChakraProps, ModalProps } from 'chakra-ui-2--react';
 
 export interface DialogProps
-  extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'>,
-    Pick<ModalProps, 'returnFocusOnClose'> {
+  extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'>, Pick<ModalProps, 'returnFocusOnClose'> {
   isClosable?: boolean;
   isOpen: boolean;
   onClose(): void;

package/src/Components/Drawer/Drawer.tsx

@@ -17,8 +17,12 @@ import {
 } from 'chakra-ui-2--react';
 import Icon from '../Icon/Icon';
 
-export interface DrawerProps
-  extends Pick<ChakraDrawerProps, 'finalFocusRef' | 'initialFocusRef' | 'isOpen' | 'onClose' | 'onCloseComplete'> {
+export interface DrawerProps extends Pick<
+  ChakraDrawerProps,
+  'finalFocusRef' | 'initialFocusRef' | 'isOpen' | 'onClose' | 'onCloseComplete'
+> {
+  blockScrollOnMount?: boolean;
+  bodyRef?: React.RefObject<HTMLDivElement>;
   children: DrawerContentProps['children'];
   footer?: ReactNode;
   maxWidth?: BoxProps['maxWidth'];
@@ -26,6 +30,7 @@ export interface DrawerProps
   padding?: BoxProps['padding'];
   margin?: BoxProps['margin'];
   headerPadding?: BoxProps['padding'];
+  hideCloseButton?: boolean;
   bodyPadding?: BoxProps['padding'];
   overlayProps?: ModalOverlayProps;
   contentProps?: DrawerContentProps;
@@ -34,12 +39,21 @@ export interface DrawerProps
   footerProps?: ModalFooterProps;
 }
 
-const Drawer = ({ overlayProps, contentProps, headerProps, bodyProps, footerProps, ...props }: DrawerProps) => {
+const Drawer = ({
+  bodyRef,
+  overlayProps,
+  contentProps,
+  headerProps,
+  bodyProps,
+  footerProps,
+  ...props
+}: DrawerProps) => {
   const {
     bodyPadding,
     children,
     footer,
     headerPadding,
+    hideCloseButton,
     maxWidth = '20rem',
     padding,
     margin,
@@ -51,13 +65,15 @@ const Drawer = ({ overlayProps, contentProps, headerProps, bodyProps, footerProp
     <ChakraDrawer {...drawerProps}>
       <DrawerOverlay {...overlayProps} />
       <DrawerContent maxWidth={maxWidth} padding={padding} margin={margin} {...contentProps}>
-        <DrawerCloseButton size="md">
-          <Icon name="Cross" />
-        </DrawerCloseButton>
+        {!hideCloseButton && (
+          <DrawerCloseButton size="md">
+            <Icon name="Cross" />
+          </DrawerCloseButton>
+        )}
         <DrawerHeader as="h3" padding={headerPadding} {...headerProps}>
           {title}
         </DrawerHeader>
-        <DrawerBody padding={bodyPadding} {...bodyProps}>
+        <DrawerBody padding={bodyPadding} {...bodyProps} ref={bodyRef}>
           {children}
         </DrawerBody>
         {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}

package/src/Components/ExpandableCard/ExpandableCard.tsx

@@ -5,30 +5,29 @@ import Collapse from '../Collapse/Collapse';
 import Card, { CardProps } from '../Card/Card';
 import Icon from '../Icon/Icon';
 
-export interface ExpandableCardProps
-  extends Omit<
-    CardProps,
-    | 'p'
-    | 'pt'
-    | 'paddingTop'
-    | 'pr'
-    | 'paddingRight'
-    | 'pe'
-    | 'paddingEnd'
-    | 'pb'
-    | 'paddingBottom'
-    | 'pl'
-    | 'paddingLeft'
-    | 'ps'
-    | 'paddingStart'
-    | 'px'
-    | 'paddingX'
-    | 'py'
-    | 'paddingY'
-    | 'paddingInlineStart'
-    | 'paddingInlineEnd'
-    | 'onChange'
-  > {
+export interface ExpandableCardProps extends Omit<
+  CardProps,
+  | 'p'
+  | 'pt'
+  | 'paddingTop'
+  | 'pr'
+  | 'paddingRight'
+  | 'pe'
+  | 'paddingEnd'
+  | 'pb'
+  | 'paddingBottom'
+  | 'pl'
+  | 'paddingLeft'
+  | 'ps'
+  | 'paddingStart'
+  | 'px'
+  | 'paddingX'
+  | 'py'
+  | 'paddingY'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
+  | 'onChange'
+> {
   buttonContent: ReactNode;
   buttonPadding?: BoxProps['padding'];
   isExpanded?: boolean;

package/src/Components/Filter/Desktop/Filter.tsx

@@ -0,0 +1,92 @@
+import { Modal, ModalOverlay, useMultiStyleConfig } from 'chakra-ui-2--react';
+import Box from '../../Box/Box';
+import Icon from '../../Icon/Icon';
+import Button from '../../Button/Button';
+import Divider from '../../Divider/Divider';
+import { FilterProps } from '../Filter.types';
+import { useFilterContext } from '../Filter.context';
+import FilterAdd from './FilterAdd/FilterAdd';
+import FilterDate from './FilterDate/FilterDate';
+import FilterItem from './FilterItem';
+import FilterSearch from './FilterSearch';
+import FilterSwitchAdapter from './FilterSwitch/FilterSwitchAdapter';
+
+const Filter = (props: FilterProps) => {
+  const {
+    data,
+    defaultState,
+    filtersDependOn,
+    isLoading,
+    isMobile,
+    onChange,
+    searchTooltip,
+    showAdd = true,
+    showFilterIcon = true,
+    showClearFilters = true,
+    showSearch,
+    ...rest
+  } = props;
+
+  const filterStyle = useMultiStyleConfig('Filter');
+
+  const { filters, isPopoverOpen, onClearFilters, onFilterChange, showClearButton, state } = useFilterContext();
+
+  return (
+    <Box sx={filterStyle.container} {...rest}>
+      <Modal isOpen={isPopoverOpen} onClose={() => {}}>
+        {isPopoverOpen && <ModalOverlay />}
+      </Modal>
+      <Box sx={filterStyle.content}>
+        {showFilterIcon && <Icon name="Filter" sx={filterStyle.icon} />}
+
+        {Object.keys(filters.switch).map((category) => (
+          <FilterSwitchAdapter key={category} category={category} />
+        ))}
+
+        {Object.keys(filters.dateRange).map((category) => (
+          <FilterDate category={category} isMobile={Boolean(isMobile)} key={category} />
+        ))}
+
+        {Object.keys(filters.select).map((category) => (
+          <FilterItem key={category} category={category} />
+        ))}
+        {Object.keys(filters.tag).map((category) => {
+          if (!state[category]) {
+            return;
+          }
+          return <FilterItem key={category} category={category} />;
+        })}
+
+        {showAdd && <FilterAdd />}
+      </Box>
+      {(showClearButton || showSearch) && (
+        <Box sx={filterStyle.rightContent}>
+          {showClearButton && (
+            <Button
+              isDisabled={isLoading}
+              leftIconName="Cross"
+              minWidth="7.5rem"
+              onClick={onClearFilters}
+              size="sm"
+              variant="tertiary"
+            >
+              Clear filters
+            </Button>
+          )}
+          {showSearch && (
+            <>
+              <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
+              <FilterSearch
+                onChange={onFilterChange}
+                value={state.search?.length ? state.search[0] : ''}
+                searchTooltip={searchTooltip}
+              />
+            </>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Filter;

package/src/Components/Filter/Desktop/FilterAdd/FilterAdd.tsx

@@ -0,0 +1,89 @@
+import { Menu, MenuButton, MenuList, Portal } from 'chakra-ui-2--react';
+import Button from '../../../Button/Button';
+import MenuItem from '../../../Menu/MenuItem';
+import Tooltip from '../../../Tooltip/Tooltip';
+import { useFilterContext } from '../../Filter.context';
+import FilterForm from '../FilterForm';
+import { FilterValue } from '../../Filter.types';
+import { getMissingDependencies } from '../../Filter.utils';
+import useFilterAdd from '../../hooks/useFilterAdd';
+
+export interface FilterAddProps {
+  onChange: (category: string, selected: FilterValue) => void;
+}
+
+const FilterAdd = () => {
+  const { data, isLoading } = useFilterContext();
+
+  const {
+    categoryList,
+    isDisabled,
+    isMenuOpen,
+    onCategorySelect,
+    onChange,
+    onClose,
+    onOpen,
+    selectedCategory,
+    stateKeys,
+  } = useFilterAdd({ isMobile: false });
+
+  return (
+    <Menu closeOnSelect={false} isOpen={isMenuOpen} onClose={onClose} onOpen={onOpen}>
+      <MenuButton
+        as={Button}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        leftIconName="Plus"
+        position={isMenuOpen ? 'relative' : undefined}
+        size="sm"
+        variant="tertiary"
+        zIndex={isMenuOpen ? 'dialog' : undefined}
+      >
+        Add filter {isMenuOpen}
+      </MenuButton>
+      <Portal>
+        <MenuList
+          paddingY={selectedCategory ? 0 : '12'}
+          position={isMenuOpen ? 'relative' : undefined}
+          zIndex={isMenuOpen ? 'dialog' : undefined}
+        >
+          {selectedCategory ? (
+            <FilterForm
+              category={selectedCategory}
+              categoryName={data[selectedCategory].categoryName}
+              categoryNamePlural={data[selectedCategory].categoryNamePlural}
+              loadingText={data[selectedCategory].loadingText}
+              onCancel={onClose}
+              onChange={onChange}
+            />
+          ) : (
+            categoryList.map((category) => {
+              const { categoryName, dependsOn } = data[category];
+              const missingDependencies = getMissingDependencies(stateKeys, Object.keys(dependsOn || []));
+              const isCategoryDisabled = missingDependencies.length > 0 || !data[category]?.options?.length;
+              return (
+                <Tooltip
+                  key={category}
+                  isDisabled={!isCategoryDisabled}
+                  label={dependsOn?.[missingDependencies[0]] || 'There is no options for this category.'}
+                  placement="right"
+                >
+                  <MenuItem
+                    isDisabled={isCategoryDisabled}
+                    onClick={() => onCategorySelect(category)}
+                    pointerEvents="all"
+                    rightIconName="ChevronRight"
+                  >
+                    {categoryName || category}
+                  </MenuItem>
+                </Tooltip>
+              );
+            })
+          )}
+        </MenuList>
+      </Portal>
+    </Menu>
+  );
+};
+
+export default FilterAdd;

package/src/Components/Filter/{FilterDate → Desktop/FilterDate}/FilterDate.tsx

@@ -1,21 +1,21 @@
-// import { useEffect } from 'react';
 import { useEffect } from 'react';
 import { useDisclosure, useMultiStyleConfig } from 'chakra-ui-2--react';
 import { DateTime } from 'luxon';
-import Box from '../../Box/Box';
-import DatePicker, { DatePickerProps, DateRange, useDateRange } from '../../DatePicker/DatePicker';
-import Icon from '../../Icon/Icon';
-import Text from '../../Text/Text';
-import { useFilterContext } from '../Filter.context';
-import { FilterStyle } from '../Filter.theme';
-import { FilterCategoryProps } from '../Filter.types';
+import DatePicker, { DatePickerProps, DateRange, useDateRange } from '../../../DatePicker/DatePicker';
+import { useFilterContext } from '../../Filter.context';
+import { FilterStyle } from '../../Filter.theme';
+import { FilterCategoryProps } from '../../Filter.types';
+import Box from '../../../Box/Box';
+import Text from '../../../Text/Text';
+import Icon from '../../../Icon/Icon';
 
 export type FilterDateProps = {
   category: string;
+  isMobile: boolean;
 };
 
 const FilterDate = (props: FilterDateProps) => {
-  const { category } = props;
+  const { category, isMobile } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state, data } = useFilterContext();
@@ -58,7 +58,18 @@ const FilterDate = (props: FilterDateProps) => {
     ? `${selectedRange.from?.toFormat('LLL dd')} - ${selectedRange.to?.toFormat('LLL dd')}`
     : 'All dates';
 
-  return (
+  return isMobile ? (
+    <DatePicker
+      selectable={dateRangeData.selectable || selectable}
+      onApply={onDateRangeApply}
+      onClear={value?.length ? onClearClick : undefined}
+      dayTooltip={dateRangeData.dayTooltip}
+      selected={selectedRange}
+      visible={isOpen}
+      variant="inline"
+      mode="range"
+    />
+  ) : (
     <DatePicker
       selectable={dateRangeData.selectable || selectable}
       onApply={onDateRangeApply}