@bitrise/bitkit 13.266.0 → 13.267.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.266.0",
+  "version": "13.267.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -34,14 +34,14 @@
     "@chakra-ui/theme-tools": "^2.2.8",
     "@chakra-ui/utils": "^2.2.4",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.2.8",
-    "@fontsource/source-code-pro": "^5.2.5",
-    "framer-motion": "^12.5.0",
+    "@fontsource/source-code-pro": "^5.2.6",
+    "framer-motion": "^12.20.4",
     "luxon": "^3.6.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-focus-lock": "2.13.6",
     "react-imask": "^7.6.1",
     "react-markdown": "^10.1.0"
@@ -51,44 +51,39 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.27.7",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@bitrise/eslint-plugin": "^2.12.0",
     "@chakra-ui/cli": "^2.5.8",
     "@google-cloud/storage": "^7.16.0",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-links": "^9.0.15",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/react-webpack5": "^9.0.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/luxon": "^3.6.2",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "eslint": "^8.57.1",
-    "glob": "^11.0.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "glob": "^11.0.3",
+    "jest": "^30.0.3",
+    "jest-environment-jsdom": "^30.0.2",
     "jsdom": "26.1.0",
     "lodash": "^4.17.21",
-    "prettier": "^3.5.3",
-    "react-hook-form": "^7.56.4",
-    "release-it": "^19.0.2",
-    "storybook": "^8.6.14",
-    "ts-jest": "^29.3.4",
+    "prettier": "^3.6.2",
+    "react-hook-form": "^7.59.0",
+    "release-it": "^19.0.3",
+    "storybook": "^9.0.15",
+    "ts-jest": "^29.4.0",
     "typescript": "^5.8.3"
   },
   "files": [

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -87,7 +87,7 @@ const DatePickerDayView = ({
 const [DatePickerDayContext, useDatePickerDayContext] = createContext<Context>();
 export { DatePickerDayContext };
 
-const DatePickerDay = ({ n }: { n: number }): JSX.Element | null => {
+const DatePickerDay = ({ n }: { n: number }) => {
   const {
     onPreview,
     onSelect,

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -57,7 +57,7 @@ const DatePickerHeader = ({
   onNext: () => void;
   controls?: 'left' | 'right' | 'both';
   children?: ReactNode;
-}): JSX.Element => {
+}) => {
   const ctx = useObjectMemo({ controls, onNext, onPrevious });
   return (
     <Box

package/src/Components/DatePicker/DatePickerMonthSelector.tsx

@@ -62,7 +62,7 @@ const DatePickerMonthSelector = ({
 }: {
   viewDate: DateTime;
   onMonthSelected: (month: number, year: number) => void;
-}): JSX.Element => {
+}) => {
   const [selectedYear, setSelectedYear] = useState(viewDate.year);
   const onPreviousYear = useCallback(() => setSelectedYear((year) => year - 1), []);
   const onNextYear = useCallback(() => setSelectedYear((year) => year + 1), []);

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,8 +1,15 @@
 import React, {
+  Children,
   cloneElement,
   createContext,
   forwardRef,
+  ForwardRefExoticComponent,
+  isValidElement,
+  JSX,
   ReactNode,
+  Ref,
+  RefAttributes,
+  RefObject,
   useCallback,
   useContext,
   useEffect,
@@ -93,23 +100,24 @@ export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, Dropdown
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
   return useMemo(() => {
-    const childList = React.Children.toArray(children);
+    const childList = Children.toArray(children);
     let idx = 0;
     const transform = (ch: ReactNode): ReactNode => {
-      if (React.isValidElement(ch)) {
+      if (isValidElement(ch)) {
         if (ch.type === DropdownOption || ch.type === DropdownDetailedOption) {
           const index = idx;
           idx += 1;
           return cloneElement(ch, {
-            ...ch.props,
+            ...(ch.props || {}),
             index,
-          });
+          } as any);
         }
-        if ('children' in ch.props) {
+        if ('children' in (ch.props as any)) {
           return cloneElement(ch, {
-            ...ch.props,
-            children: React.Children.toArray(ch.props.children).map(transform),
-          });
+            ...(ch.props || {}),
+            // Cast to any to allow children property
+            children: Children.toArray((ch.props as any).children).map(transform),
+          } as any);
         }
       }
       return ch;
@@ -119,24 +127,29 @@ function useOptionListWithIndexes({ children }: { children: ReactNode }) {
 }
 
 type UseDropdownProps = {
-  ref: React.Ref<Element>;
-  optionsRef: React.RefObject<HTMLDivElement>;
+  ref: Ref<Element>;
+  optionsRef: RefObject<HTMLDivElement | null>;
 };
 
 function findOption<T>(
   children: ReactNode,
   value: T,
 ): { label: ReactNode; index: number; avatar?: AvatarProps } | null {
-  const list = React.Children.toArray(children);
+  const list = Children.toArray(children);
   for (let i = 0; i < list.length; i++) {
     const elem = list[i];
-    if (React.isValidElement(elem) && !elem.props.isDisabled) {
-      const optValue = typeof elem.props.value === 'undefined' ? null : elem.props.value;
+    if (isValidElement(elem) && !(elem.props as any).isDisabled) {
+      const optValue = typeof (elem.props as any).value === 'undefined' ? null : (elem.props as any).value;
       if (elem.type === DropdownOption && optValue === value) {
-        return { index: elem.props.index, label: elem.props.children, avatar: elem.props.avatar };
+        return {
+          index: (elem.props as any).index,
+          label: (elem.props as any).children,
+          avatar: (elem.props as any).avatar,
+        };
       }
       const ch =
-        findOption(elem.props.children, value) || (isSearchable(elem.type) && findOption(elem.type(elem.props), value));
+        findOption((elem.props as any).children, value) ||
+        (isSearchable(elem.type) && findOption(elem.type(elem.props), value));
       if (ch) {
         return ch;
       }
@@ -194,7 +207,7 @@ function useDropdown<T>({
     }
   }, [activeIndex]);
   const referenceKeyDown = useCallback(
-    (ev: React.KeyboardEvent) => {
+    (ev: React.KeyboardEvent<Element>) => {
       if (ev.key === 'Enter') {
         ev.preventDefault();
         searchOnSubmit();
@@ -208,7 +221,7 @@ function useDropdown<T>({
   });
 
   // this can just be a ref as it will always be updated when formValue is, which will cause a re-render
-  const labelMapRef = useRef<Map<T, ReactNode>>();
+  const labelMapRef = useRef<Map<T, ReactNode>>(new Map());
   if (!labelMapRef.current) labelMapRef.current = new Map();
 
   // clear map when value is changed from the outside
@@ -407,7 +420,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   ) => {
     const dataAttributes = getDataAttributes(props);
 
-    const optionsRef = useRef(null);
+    const optionsRef = useRef<HTMLDivElement | null>(null);
     const {
       avatar,
       children,
@@ -553,7 +566,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
 
 export function typedDropdown<T>() {
   return {
-    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<Element>>,
+    Dropdown: Dropdown as ForwardRefExoticComponent<DropdownProps<T> & RefAttributes<Element>>,
     DropdownOption: DropdownOption as (p: DropdownOptionProps<T>) => JSX.Element,
   };
 }

package/src/Components/Dropdown/hooks/useAutoScroll.ts

@@ -7,13 +7,13 @@ const useAutoScroll = ({
   optionsRef,
   selectedIndex,
 }: {
-  optionsRef: React.RefObject<HTMLDivElement>;
+  optionsRef: React.RefObject<HTMLDivElement | null>;
   listRef: React.MutableRefObject<HTMLElement[]>;
   activeIndex: number | null;
   selectedIndex: number | null;
   keyboardControlled: boolean;
 }) => {
-  const prevActiveIndexRef = useRef<number | null>();
+  const prevActiveIndexRef = useRef<number | null>(null);
   useLayoutEffect(() => {
     prevActiveIndexRef.current = activeIndex;
   }, [activeIndex]);

package/src/Components/Dropdown/hooks/useFloatingDropdown.ts

@@ -27,7 +27,7 @@ const useFloatingDropdown = ({
   placement,
 }: {
   enabled: boolean;
-  optionsRef: RefObject<HTMLDivElement>;
+  optionsRef: RefObject<HTMLDivElement | null>;
   dropdownWidth: ChakraProps['width'] | 'match';
   placement: UseFloatingProps['placement'] | undefined;
 }) => {

package/src/Components/Dropdown/hooks/useSimpleSearch.tsx

@@ -1,4 +1,4 @@
-import { Children, cloneElement, isValidElement, ReactNode, useMemo, useState } from 'react';
+import { Children, cloneElement, isValidElement, ReactElement, ReactNode, useMemo, useState } from 'react';
 import { chakra } from '@chakra-ui/react';
 import { useDropdownStyles } from '../Dropdown.context';
 import isNodeMatch from '../isNodeMatch';
@@ -25,12 +25,13 @@ function useSimpleSearch({ children, onSearch }: { children?: ReactNode; onSearc
 
     const transform = (node: ReactNode): ReactNode => {
       if (isValidElement(node) && node.type === DropdownGroup) {
-        const groupChildren = Children.toArray(node.props.children).map(transform).filter(Boolean);
+        const element = node as ReactElement<{ children?: ReactNode }>;
+        const groupChildren = Children.toArray(element.props.children).map(transform).filter(Boolean);
         if (groupChildren.length === 0) {
           return null;
         }
-        return cloneElement(node, {
-          ...node.props,
+        return cloneElement(element, {
+          ...element.props,
           children: groupChildren,
         });
       }

package/src/Components/Dropdown/isNodeMatch.ts

@@ -1,4 +1,4 @@
-import React, { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import { isValidElement, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 
 type SearchableElement = JSXElementConstructor<any> & { searchable: true };
 export function isSearchable(
@@ -17,10 +17,10 @@ function isNodeMatch(node: ReactNode, filter: string): boolean {
   if (Array.isArray(node)) {
     return Array.from(node).some((child) => isNodeMatch(child, filter));
   }
-  if ('children' in node) {
-    return isNodeMatch(node.children, filter);
+  if (typeof node === 'object' && node !== null && 'children' in node) {
+    return isNodeMatch((node as any).children, filter);
   }
-  if (React.isValidElement<any>(node)) {
+  if (isValidElement<any>(node)) {
     if (node.type === 'svg') {
       return false;
     }
@@ -28,9 +28,18 @@ function isNodeMatch(node: ReactNode, filter: string): boolean {
     if (isSearchable(ctor)) {
       return isNodeMatch(ctor(node.props), filter);
     }
-    return isNodeMatch(node.props.children, filter);
+    if (isValidElement(node)) {
+      return isNodeMatch((node as ReactElement<any>).props.children, filter);
+    }
+    return false;
+  }
+  if (
+    (typeof node === 'object' && node !== null && (Symbol.iterator in node || 'length' in node)) ||
+    Array.isArray(node)
+  ) {
+    return Array.from(node as Iterable<ReactNode> | ArrayLike<ReactNode>).some((child) => isNodeMatch(child, filter));
   }
-  return isNodeMatch(Array.from(node), filter);
+  return false;
 }
 
 export default isNodeMatch;

package/src/Components/Filter/Filter.storyData.ts

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 import { DateRange } from '../DatePicker/useDateRange';
 import { FilterContextType, FilterData, FilterOptions, FilterState } from './Filter.types';
 
+const branches = [...new Array(25000)].map((_, i) => `branch ${i}`);
+
 export const FILTER_STORY_OPTIONS: FilterOptions =
   'Lorem ipsum dolor sit amet consectetur adipisicing elit Reiciendis reprehenderit laudantium laborum excepturi nam quae quod sunt expedita vel repellat cum cupiditate esse similique est ducimus provident eos numquam voluptas'.split(
     ' ',
@@ -43,7 +45,7 @@ export const FILTER_STORY_DATA: FilterData = {
     categoryNamePlural: 'Branches',
     isMultiple: true,
     isPatternEnabled: true,
-    options: ['default 1', 'default 2', 'default 3', 'default 13'],
+    options: branches,
     type: 'tag',
   },
   cache_type: {

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -23,6 +23,8 @@ import { isEqual, useDebounce } from '../../../utils/utils';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
 
+const MAX_ITEMS = 100;
+
 /**
  * https://gist.github.com/donmccurdy/6d073ce2c6f3951312dfa45da14a420f
  * RegExp-escapes all characters in the given string.
@@ -242,13 +244,19 @@ const FilterForm = (props: FilterFormProps) => {
             {!isLoading && isMultiple && (
               <CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
                 {items.length
-                  ? items.map((opt) => (
+                  ? items.slice(0, MAX_ITEMS).map((opt) => (
                       <Checkbox key={opt} value={opt}>
                         {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
                         {getOptionLabel(opt, currentOptionMap)}
                       </Checkbox>
                     ))
                   : getEmptyText()}
+                {items.length > MAX_ITEMS && (
+                  <Text textStyle="body/md/regular">
+                    We show only {MAX_ITEMS} items, use the search
+                    <br /> to find more.
+                  </Text>
+                )}
               </CheckboxGroup>
             )}
             {!isLoading && !isMultiple && (
@@ -261,7 +269,7 @@ const FilterForm = (props: FilterFormProps) => {
                   </Radio>
                 )}
                 {items.length
-                  ? items.map((opt) => {
+                  ? items.slice(0, MAX_ITEMS).map((opt) => {
                       const hasIcon = iconsMap && iconsMap[opt];
                       const label = getOptionLabel(opt, currentOptionMap);
                       return (
@@ -278,6 +286,12 @@ const FilterForm = (props: FilterFormProps) => {
                       );
                     })
                   : getEmptyText()}
+                {items.length > MAX_ITEMS && (
+                  <Text textStyle="body/md/regular">
+                    We show only {MAX_ITEMS} items, use the search
+                    <br /> to find more.
+                  </Text>
+                )}
               </RadioGroup>
             )}
           </>

package/src/Components/LabeledData/LabeledData.tsx

@@ -39,7 +39,7 @@ const LabeledData = ({
   trendValue,
   trendColorScheme,
   ...rest
-}: LabeledDataProps): JSX.Element => {
+}: LabeledDataProps) => {
   const trendIconSize = size === 'sm' ? '16' : '24';
   const labelColor = size === 'sm' ? 'text/primary' : 'text/secondary';
   let trendSign;

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -166,7 +166,7 @@ const RealStage = ({
   );
 };
 
-const ProgressIndicator = ({ activeStageIndex, stages, ...rest }: ProgressIndicatorProps): JSX.Element => {
+const ProgressIndicator = ({ activeStageIndex, stages, ...rest }: ProgressIndicatorProps) => {
   const style = useMultiStyleConfig('ProgressIndicator', { variant: rest.variant });
   const extendLines = Boolean(rest.variant === 'horizontal' && rest.extendLines);
   const activeSegmentIndex = extendLines ? activeStageIndex * 2 : activeStageIndex;

package/src/Components/Table/TablePagination.tsx

@@ -5,7 +5,7 @@ import Tr from './Tr';
 
 export type TablePaginationProps = Omit<PaginationProps, 'variant'> & { colSpan: number };
 
-const TablePagination = ({ colSpan, ...paginationProps }: TablePaginationProps): JSX.Element => {
+const TablePagination = ({ colSpan, ...paginationProps }: TablePaginationProps) => {
   return (
     <Tfoot>
       <Tr>

package/src/Components/TreeView/TreeViewGroup.tsx

@@ -17,7 +17,7 @@ const TreeViewGroup = ({ label, role, level, indexPath, titlePath, children }: T
           ? cloneElement(child, {
               level,
               indexPath: [...indexPath, childIndex],
-              titlePath: [...titlePath, child.props.title],
+              titlePath: [...titlePath, (child.props as { title: string }).title],
             } as { level: number; indexPath: number[]; titlePath: string[] })
           : child,
       )}