@bitrise/bitkit 10.25.4 → 10.27.0

package/package.json

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

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,30 +1,49 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbLink from './BreadcrumbLink';
 
 export default {
-  title: 'Components/Breadcrumb',
   component: Breadcrumb,
   subcomponents: { BreadcrumbLink },
+  args: {
+    hasSeparatorAfterLast: true,
+    hasSeparatorBeforeFirst: false,
+  },
 } as ComponentMeta<typeof Breadcrumb>;
 
-const Template: ComponentStory<typeof Breadcrumb> = (props) => (
-  <Breadcrumb {...props}>
-    <BreadcrumbLink
-      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
-      href="#"
-    >
-      Bitrise #Core
-    </BreadcrumbLink>
-    <BreadcrumbLink avatarName="Bitkit" href="#">
-      bitkit
-    </BreadcrumbLink>
-    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
-  </Breadcrumb>
-);
+export const DefaultVersion = {
+  args: {
+    children: [
+      <BreadcrumbLink
+        avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+        href="#"
+      >
+        Bitrise #Core
+      </BreadcrumbLink>,
+      <BreadcrumbLink avatarName="Bitkit" href="#">
+        bitkit
+      </BreadcrumbLink>,
+      <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>,
+    ],
+  },
+};
 
-export const WithProps = Template.bind({});
-WithProps.args = {
-  hasSeparatorAfterLast: false,
-  hasSeparatorBeforeFirst: false,
+export const WithLongText = {
+  args: {
+    children: [
+      <BreadcrumbLink
+        avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+        href="#"
+      >
+        Bitrise #Core
+      </BreadcrumbLink>,
+      <BreadcrumbLink avatarName="Bitkit" href="#">
+        Bitkit
+      </BreadcrumbLink>,
+      <BreadcrumbLink href="#">
+        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+        some form, by injected humour, or randomised words which don't look even slightly believable.
+      </BreadcrumbLink>,
+    ],
+  },
 };

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -8,13 +8,21 @@ const BreadcrumbTheme: SystemStyleObject = {
         alignItems: 'center',
       },
     },
+    item: {
+      _last: {
+        minWidth: 0,
+        '.chakra-breadcrumb__link': {
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        },
+      },
+    },
     link: {
       display: 'flex',
       alignItems: 'center',
       gap: '8',
-      '[aria-current]': {
-        color: 'red',
-      },
+      whiteSpace: 'nowrap',
     },
     separator: {
       display: 'flex',

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -16,7 +16,7 @@ type DropdownContext<T> = {
   searchOnSubmit: () => void;
   filter?: string;
   activeIndex?: number | null;
-  getItemProps: (x: object) => object;
+  getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
 };
 
 const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext<unknown>>();

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -581,4 +581,46 @@ describe('Dropdown', () => {
       expect(button).toHaveTextContent('Custom label');
     });
   });
+
+  describe('option onClick support', () => {
+    it('calls onClick handler on option', async () => {
+      const onChangeHandler = jest.fn();
+      const onClickHandler = jest.fn();
+
+      render(
+        <Dropdown onChange={onChangeHandler}>
+          <DropdownOption value="Test option 1">Test option 1</DropdownOption>
+          <DropdownOption value="Test option 2" onClick={onClickHandler}>
+            Test option 2
+          </DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const option2 = await screen.findByRole('option', { name: 'Test option 2' });
+      await userEvent.click(option2);
+      expect(onClickHandler).toHaveBeenCalled();
+      expect(onChangeHandler).toHaveBeenCalled();
+    });
+
+    it("doesn't call onChange handler if option's onClick handler prevented it", async () => {
+      const onChangeHandler = jest.fn();
+
+      render(
+        <Dropdown onChange={onChangeHandler}>
+          <DropdownOption value="Test option 1">Test option 1</DropdownOption>
+          <DropdownOption value="Test option 2" onClick={(event) => event.preventDefault()}>
+            Test option 2
+          </DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const option2 = await screen.findByRole('option', { name: 'Test option 2' });
+      await userEvent.click(option2);
+      expect(onChangeHandler).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Components/Dropdown/DropdownOption.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useId } from 'react';
+import { MouseEventHandler, ReactNode, useId } from 'react';
 import { chakra } from '@chakra-ui/react';
 import { cx } from '@chakra-ui/utils';
 import Text from '../Text/Text';
@@ -9,8 +9,9 @@ export type DropdownOptionProps<T> = {
   value?: T | null;
   children?: ReactNode;
   'aria-label'?: string;
+  onClick?: MouseEventHandler<HTMLElement>;
 };
-const DropdownOption = <T = string,>({ value = null, children, ...rest }: DropdownOptionProps<T>) => {
+const DropdownOption = <T = string,>({ value = null, children, onClick, ...rest }: DropdownOptionProps<T>) => {
   const { item } = useDropdownStyles();
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
@@ -30,8 +31,12 @@ const DropdownOption = <T = string,>({ value = null, children, ...rest }: Dropdo
       )}
       __css={item}
       {...ctx.getItemProps({
-        onClick() {
-          ctx.onOptionSelected({ value, index, label: children });
+        onClick(event) {
+          onClick?.(event);
+
+          if (!event.defaultPrevented) {
+            ctx.onOptionSelected({ value, index, label: children });
+          }
         },
       })}
     >