@bitrise/bitkit 13.267.1-alpha.0 → 13.269.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.267.1-alpha.0",
+  "version": "13.269.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,10 +38,10 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.2.8",
     "@fontsource/source-code-pro": "^5.2.6",
-    "framer-motion": "^12.20.4",
+    "framer-motion": "^12.23.0",
     "luxon": "^3.6.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-focus-lock": "2.13.6",
     "react-imask": "^7.6.1",
     "react-markdown": "^10.1.0"
@@ -51,14 +51,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.7",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@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-docs": "^9.0.15",
     "@storybook/addon-links": "^9.0.15",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/react-webpack5": "^9.0.15",
@@ -66,17 +65,17 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
+    "@types/jest": "^29.5.14",
     "@types/luxon": "^3.6.2",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "axios": "^1.10.0",
     "eslint": "^8.57.1",
     "glob": "^11.0.3",
-    "jest": "^30.0.3",
-    "jest-environment-jsdom": "^30.0.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "26.1.0",
     "lodash": "^4.17.21",
     "prettier": "^3.6.2",
@@ -84,7 +83,8 @@
     "release-it": "^19.0.3",
     "storybook": "^9.0.15",
     "ts-jest": "^29.4.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "@storybook/addon-docs": "^9.0.15"
   },
   "files": [
     "src",

package/src/Components/Dropdown/Dropdown.tsx

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

package/src/Components/Dropdown/DropdownOption.tsx

@@ -29,7 +29,7 @@ const DropdownOption = <T = string,>({
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
   const isSelected = !!(
-    ctx.formValue && (Array.isArray(ctx.formValue) ? ctx.formValue.includes(value) : ctx.formValue === value)
+    ctx.formValue !== null && (Array.isArray(ctx.formValue) ? ctx.formValue.includes(value) : ctx.formValue === value)
   );
 
   return (

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

@@ -7,13 +7,13 @@ const useAutoScroll = ({
   optionsRef,
   selectedIndex,
 }: {
-  optionsRef: React.RefObject<HTMLDivElement | null>;
+  optionsRef: React.RefObject<HTMLDivElement>;
   listRef: React.MutableRefObject<HTMLElement[]>;
   activeIndex: number | null;
   selectedIndex: number | null;
   keyboardControlled: boolean;
 }) => {
-  const prevActiveIndexRef = useRef<number | null>(null);
+  const prevActiveIndexRef = useRef<number | 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 | null>;
+  optionsRef: RefObject<HTMLDivElement>;
   dropdownWidth: ChakraProps['width'] | 'match';
   placement: UseFloatingProps['placement'] | undefined;
 }) => {

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

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

package/src/Components/Dropdown/isNodeMatch.ts

@@ -1,4 +1,4 @@
-import { isValidElement, JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import React, { 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 (typeof node === 'object' && node !== null && 'children' in node) {
-    return isNodeMatch((node as any).children, filter);
+  if ('children' in node) {
+    return isNodeMatch(node.children, filter);
   }
-  if (isValidElement<any>(node)) {
+  if (React.isValidElement<any>(node)) {
     if (node.type === 'svg') {
       return false;
     }
@@ -28,18 +28,9 @@ function isNodeMatch(node: ReactNode, filter: string): boolean {
     if (isSearchable(ctor)) {
       return isNodeMatch(ctor(node.props), 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(node.props.children, filter);
   }
-  return false;
+  return isNodeMatch(Array.from(node), filter);
 }
 
 export default isNodeMatch;

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

@@ -252,9 +252,8 @@ 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 textStyle="body/sm/regular" color="text.secondary" marginBlockStart="4">
+                    Showing first {MAX_ITEMS} items. Use search to find more.
                   </Text>
                 )}
               </CheckboxGroup>
@@ -287,9 +286,8 @@ 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 textStyle="body/sm/regular" color="text.secondary" marginBlockStart="4">
+                    Showing first {MAX_ITEMS} items. Use search to find more.
                   </Text>
                 )}
               </RadioGroup>

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 as { title: string }).title],
+              titlePath: [...titlePath, child.props.title],
             } as { level: number; indexPath: number[]; titlePath: string[] })
           : child,
       )}