@bitrise/bitkit 9.4.1-beta.2 → 9.4.1

package/site/components/Documentation/Components/SectionButtons.tsx

@@ -376,55 +376,22 @@ const SectionButtons = () => {
           <ButtonWithDropdown
             items={[
               {
-                key: '1',
                 component: 'button',
                 icon: 'Percent',
-                content: 'Refer your friends',
+                text: 'Refer your friends',
               },
               {
-                key: '2',
                 component: 'a',
                 icon: 'Settings',
-                content: 'Account setings',
+                text: 'Account setings',
               },
               {
-                key: '3',
                 icon: 'ChangePlan',
-                content: 'Change plan',
+                text: 'Change plan',
               },
               {
-                key: '4',
                 icon: 'Logout',
-                content: 'Log out',
-              },
-            ]}
-          >
-            <Icon name="Bitbot" />
-            <Text>Account</Text>
-          </ButtonWithDropdown>
-          <ButtonWithDropdown
-            items={[
-              {
-                key: '1',
-                component: 'button',
-                icon: 'Percent',
-                content: 'Refer your friends',
-              },
-              {
-                key: '2',
-                component: 'a',
-                icon: 'Settings',
-                content: 'Account setings',
-              },
-              {
-                key: '3',
-                icon: 'ChangePlan',
-                content: 'Change plan',
-              },
-              {
-                key: '4',
-                icon: 'Logout',
-                content: 'Log out',
+                text: 'Log out',
               },
             ]}
           >

package/site/components/Documentation/Components/SectionDropdowns.tsx

@@ -4,6 +4,7 @@ import {
   DropdownMenu,
   DropdownMenus,
   DropdownMenuItem,
+  DropdownMenuItemGroup,
   Flex,
   Icon,
   Placement,
@@ -244,7 +245,6 @@ const SectionDropdown = () => {
                 setSelectedItem(undefined);
                 handleToggle3();
               }}
-              sameWidth
               visible={visible3}
             >
               {() => (

package/site/components/Documentation/Components/SectionPlacement.tsx

@@ -21,9 +21,7 @@ const SectionPlacement = () => {
   const [selectedTab, setSelectedTab] = useState(1);
   const [ref, setRef] = useState<SVGSVGElement>();
 
-  const handleToggle = () => {
-    setVisible(!visible);
-  };
+  const handleToggle = () => setVisible(!visible);
 
   return (
     <Section>
@@ -41,7 +39,6 @@ const SectionPlacement = () => {
         <>
           <PlacementManager>
             <PlacementReference>
-              {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
               {({ ref }) => (
                 <Button innerRef={ref} level="primary" onClick={handleToggle}>
                   <Icon name="More" />

package/src/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -10,18 +10,14 @@ import {
   PlacementManager,
   PlacementProps,
   PlacementReference,
-  BaseProps,
 } from '@bitrise/bitkit';
 
 export interface ItemProps extends DropdownMenuItemProps {
-  key: string;
   component?: string;
   disabled?: boolean;
   href?: string;
-  onClick?: (e?: any) => void;
   target?: string;
-  content: React.ReactNode;
-  textColor?: BaseProps['textColor'];
+  text: string;
 }
 
 export interface Props {
@@ -32,39 +28,46 @@ export interface Props {
   placementProps?: PlacementProps;
 }
 
-const ButtonWithDropdown = ({ buttonProps, children, dropdownWidth, items, placementProps }: Props): JSX.Element => {
+const ButtonWithDropdown = ({
+  buttonProps = {},
+  children,
+  dropdownWidth,
+  items,
+  placementProps,
+}: Props): JSX.Element => {
   const [visible, setVisible] = React.useState(false);
 
-  const onButtonClick = () => {
-    setVisible(!visible);
-  };
-
   return (
     <PlacementManager>
       <PlacementReference>
         {({ ref }) => (
-          <Button innerRef={ref} {...buttonProps} onClick={onButtonClick}>
+          <Button innerRef={ref} onClick={() => setVisible(true)} {...buttonProps}>
             {children}
             <Icon name="ChevronDown" />
           </Button>
         )}
       </PlacementReference>
-      {!buttonProps?.disabled && (
-        <Placement onClose={() => setVisible(false)} placement="bottom-end" visible={visible} {...placementProps}>
+      {!buttonProps.disabled && (
+        <Placement
+          disableMargin="left-right"
+          onClose={() => setVisible(false)}
+          placement="bottom-end"
+          visible={visible}
+          {...placementProps}
+        >
           {() => (
             <DropdownMenu width={dropdownWidth} withArrow>
-              {items.map(({ key, component, disabled, href, icon, onClick, target, content, textColor }) => (
+              {items.map(({ component, disabled, href, icon, onClick, target, text }) => (
                 <DropdownMenuItem
-                  Component={component || 'button'}
+                  Component={component || 'div'}
                   disabled={disabled}
                   href={href}
                   icon={icon}
+                  key={text}
                   onClick={onClick}
-                  key={key}
                   target={target}
-                  textColor={textColor}
                 >
-                  {content}
+                  {text}
                 </DropdownMenuItem>
               ))}
             </DropdownMenu>

package/src/DatePicker/DatePickerDay.tsx

@@ -63,7 +63,7 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
       onClick={isSelectable ? () => onSelect(date) : undefined}
     >
       <Flex alignChildren="middle" className="DatePicker__day-inner" direction="horizontal">
-        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n)}
+        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
         {isCurrentMonth && n - dayOfWeek + 1}
         {isNextMonth && n - dayOfWeek - daysInMonth + 1}
       </Flex>

package/src/Dropdown/Dropdown.tsx

@@ -41,15 +41,17 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
+  const handleToggleVisible = () => setVisible(!visible);
+
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    setVisible(false);
+    handleToggleVisible();
   };
 
   const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
+    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value}>
       {text}
     </DropdownMenuItem>
   );
@@ -58,22 +60,15 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
     <PlacementManager>
       <PlacementReference>
         {({ ref }) => (
-          <DropdownButton
-            {...rest}
-            alignChildrenHorizontal="start"
-            innerRef={ref}
-            onClick={() => {
-              setVisible(!visible);
-            }}
-          >
+          <DropdownButton {...rest} alignChildrenHorizontal="start" innerRef={ref} onClick={handleToggleVisible}>
             <Text ellipsis>{children}</Text>
           </DropdownButton>
         )}
       </PlacementReference>
 
-      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
-        {() => (
-          <DropdownMenu maxHeight={maxHeight} width="100%">
+      <Placement onClose={handleToggleVisible} visible={visible}>
+        {({ width }) => (
+          <DropdownMenu maxHeight={maxHeight} width={width}>
             {options.map((option) => (
               <React.Fragment key={option.text}>
                 {'options' in option ? (

package/src/Dropdown/DropdownMenu.css

@@ -15,7 +15,7 @@
 .DropdownMenu__group-text::after {
   content: '';
   flex: 1;
-  /* stylelint-disable-next-line unit-disallowed-list */
+  /* stylelint-disable-next-line unit-blacklist */
   height: 1px;
   background-color: var(--color-gray--3);
 }

package/src/Placement/Placement.css

@@ -1,10 +1,29 @@
 
+:root {
+  --Placement-arrow-size: var(--size--x3);
+}
+
 .Placement {
   position: absolute;
+  margin: var(--Placement-arrow-size);
   z-index: var(--z-index-Placement--below-modal);
   pointer-events: none;
 }
 
+.Placement--disable-margin {
+  margin: 0;
+}
+
+.Placement--disable-margin-top-bottom {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.Placement--disable-margin-left-right {
+  margin-right: 0;
+  margin-left: 0;
+}
+
 .Placement--animate {
   transition-property: transform;
   transition-duration: var(--transition-duration--fast);
@@ -64,51 +83,50 @@
   border-top: 0.0625rem solid var(--color-gray--2);
 }
 
-.Placement__arrow,
-.Placement__arrow::before {
+.Placement__arrow {
   position: absolute;
-  width: var(--size--x3);
-  height: var(--size--x3);
+  width: var(--Placement-arrow-size);
+  height: var(--Placement-arrow-size);
 }
 
 .Placement__arrow,
 .Placement__arrow:first-child,
 .Placement__arrow:last-child {
-  visibility: hidden;
-}
-
-.Placement__arrow::before {
-  content: '';
-  display: block;
-  transform: rotate(45deg);
-  background: inherit;
-  visibility: visible;
+  margin: var(--Placement-arrow-size);
 }
 
 .Placement--top .Placement__arrow,
 .Placement--top-start .Placement__arrow,
 .Placement--top-end .Placement__arrow {
   top: 100%;
-  margin-top: -0.375rem;
+  transform:
+    translateY(calc(-50% + var(--Placement-arrow-size) * -1))
+    rotate(45deg);
 }
 
 .Placement--right .Placement__arrow,
 .Placement--right-start .Placement__arrow,
 .Placement--right-end .Placement__arrow {
   right: 100%;
-  margin-right: -0.375rem;
+  transform:
+    translateX(calc(50% - var(--Placement-arrow-size) * -1))
+    rotate(45deg);
 }
 
 .Placement--bottom .Placement__arrow,
 .Placement--bottom-start .Placement__arrow,
 .Placement--bottom-end .Placement__arrow {
   bottom: 100%;
-  margin-bottom: -0.375rem;
+  transform:
+    translateY(calc(50% - var(--Placement-arrow-size) * -1))
+    rotate(45deg);
 }
 
 .Placement--left .Placement__arrow,
 .Placement--left-start .Placement__arrow,
 .Placement--left-end .Placement__arrow {
   left: 100%;
-  margin-left: -0.375rem;
+  transform:
+    translateX(calc(-50% + var(--Placement-arrow-size) * -1))
+    rotate(45deg);
 }

package/src/Placement/Placement.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Placement as TypePlacement } from '@popperjs/core';
+import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
 import { Props as BaseProps } from '../Base/Base';
 import { ModalContext } from '../Modal/ModalContext';
 import PlacementPopper from './PlacementPopper';
@@ -13,11 +13,15 @@ export interface Props extends BaseProps {
   animatePosition?: boolean;
   /**
    * A render callback function that provides a
-   * update function to trigger a reposition,
+   * scheduleUpdate function to trigger a reposition,
    * and the width of the target that is being positioned
    * around.
    */
-  children: (props: { update: () => void; width?: number }) => React.ReactNode;
+  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
+  /**
+   * Flag that disables margin around the Placement.
+   */
+  disableMargin?: boolean | 'top-bottom' | 'left-right';
   /**
    * Flag that disables repositioning on scroll and resize events.
    */
@@ -41,8 +45,7 @@ export interface Props extends BaseProps {
   /**
    * An optional reference element to be used as the target.
    */
-  referenceElement?: any;
-  sameWidth?: boolean;
+  referenceElement?: TypeReferenceObject;
   /**
    * The visibilty of the positioned content.
    */

package/src/Placement/PlacementPopper.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable react/default-props-match-prop-types */
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { Placement as TypePlacement, VirtualElement } from '@popperjs/core';
+import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
 import { Popper, PopperProps } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
@@ -28,14 +27,15 @@ const transitionClasses = {
 
 export interface Props extends BaseProps {
   animatePosition?: boolean;
-  children: (props: { update: () => void; width?: number }) => React.ReactNode;
+  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
   closeElement?: null | HTMLElement;
+  disableMargin?: boolean | 'top-bottom' | 'left-right';
   disableReposition?: boolean;
   flip?: boolean;
   isInsideModal?: boolean;
   onClose?: (event: MouseEvent) => void;
   placement?: TypePlacement;
-  referenceElement?: any;
+  referenceElement?: TypeReferenceObject;
   visible?: boolean;
   timeout?: number;
 }
@@ -46,13 +46,13 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     backgroundColor,
     children,
     closeElement,
+    disableMargin,
     disableReposition,
     flip,
     isInsideModal,
     onClose,
     placement: desiredPlacement,
     referenceElement,
-    sameWidth,
     visible,
     timeout = transitionDurationFast,
     ...rest
@@ -61,8 +61,6 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
   const ref = useRef<HTMLElement | null>();
   const [render, setRender] = useState(visible);
 
-  const [reference, setReference] = useState<Element | VirtualElement | undefined>(undefined);
-
   useEffect(() => {
     if (visible) {
       setRender(true);
@@ -73,14 +71,11 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     closeElement || document,
     'click',
     (event) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      /* @ts-ignore */
-      const isReferenceInPath = [...event.composedPath()].includes(reference);
-      if (onClose && ref.current && !ref.current.contains(event.target as Node) && !isReferenceInPath) {
+      if (onClose && ref.current && !ref.current.contains(event.target as Node)) {
         onClose(event as MouseEvent);
       }
     },
-    [onClose, reference],
+    [onClose],
   );
 
   useEventListener(
@@ -98,36 +93,19 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     return null;
   }
 
-  const modifiers: any[] = [
-    {
-      name: 'offset',
-      options: {
-        offset: [0, 12],
-      },
-    },
-  ];
-
-  if (sameWidth) {
-    modifiers.push({
-      enabled: true,
-      name: 'sameWidth',
-      phase: 'beforeWrite',
-      requires: ['computeStyles'],
-      fn: ({ state }: any) => {
-        // eslint-disable-next-line no-param-reassign
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      },
-      effect: ({ state }: any) => {
-        // eslint-disable-next-line no-param-reassign
-        state.elements.popper.style.width = `${state.elements.reference.getBoundingClientRect().width || 0}px`;
-      },
-    });
-  }
-
-  const popperProps: PopperProps<any> = {
+  const popperProps: PopperProps = {
     children: () => null,
+    eventsEnabled: !disableReposition,
     placement: desiredPlacement,
-    modifiers,
+    modifiers: {
+      preventOverflow: {
+        boundariesElement: 'window',
+      },
+      flip: {
+        behavior: 'flip',
+        enabled: flip,
+      },
+    },
   };
 
   if (referenceElement) {
@@ -136,45 +114,39 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
 
   return createPortal(
     // eslint-disable-next-line no-return-assign
-    <Popper
-      {...popperProps}
-      // eslint-disable-next-line no-return-assign
-      innerRef={(el) => (ref.current = el || null)}
-      onFirstUpdate={(state) => {
-        setReference(state.elements?.reference);
-      }}
-    >
+    <Popper {...popperProps} innerRef={(el) => (ref.current = el || null)}>
       {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
-      {({ arrowProps, placement, ref, update, style }) => {
-        return (
-          // eslint-disable-next-line react/jsx-no-constructed-context-values
-          <PlacementArrowPropsContext.Provider value={{ ...arrowProps, backgroundColor }}>
-            <div
-              className={classnames('Placement', `Placement--${placement}`, {
-                'Placement--above-modal': isInsideModal,
-                'Placement--animate': animatePosition,
-              })}
-              ref={ref}
-              style={style}
-            >
-              <CSSTransition appear={visible} classNames={transitionClasses} in={visible} timeout={timeout}>
-                <div className="Placement__content">
-                  <Base {...rest} backgroundColor={backgroundColor} className="Placement__shadow">
-                    <PlacementManagerContext.Consumer>
-                      {({ referenceNode }) =>
-                        children({
-                          update,
-                          width: (referenceNode && referenceNode.clientWidth) || undefined,
-                        })
-                      }
-                    </PlacementManagerContext.Consumer>
-                  </Base>
-                </div>
-              </CSSTransition>
-            </div>
-          </PlacementArrowPropsContext.Provider>
-        );
-      }}
+      {({ arrowProps, placement, ref, scheduleUpdate, style }) => (
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        <PlacementArrowPropsContext.Provider value={{ ...arrowProps, backgroundColor }}>
+          <div
+            className={classnames('Placement', `Placement--${placement}`, {
+              'Placement--above-modal': isInsideModal,
+              'Placement--animate': animatePosition,
+              'Placement--disable-margin': disableMargin === true,
+              'Placement--disable-margin-top-bottom': disableMargin === 'top-bottom',
+              'Placement--disable-margin-left-right': disableMargin === 'left-right',
+            })}
+            ref={ref}
+            style={style}
+          >
+            <CSSTransition appear={visible} classNames={transitionClasses} in={visible} timeout={timeout}>
+              <div className="Placement__content">
+                <Base {...rest} backgroundColor={backgroundColor} className="Placement__shadow">
+                  <PlacementManagerContext.Consumer>
+                    {({ referenceNode }) =>
+                      children({
+                        scheduleUpdate,
+                        width: (referenceNode && referenceNode.clientWidth) || undefined,
+                      })
+                    }
+                  </PlacementManagerContext.Consumer>
+                </Base>
+              </div>
+            </CSSTransition>
+          </div>
+        </PlacementArrowPropsContext.Provider>
+      )}
     </Popper>,
     document.body,
   );

package/src/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReferenceChildrenProps } from 'react-popper';
-import { Placement as TypePlacement } from '@popperjs/core';
+import { Placement as TypePlacement } from 'popper.js';
 import { Props as BaseProps } from '../Base/Base';
 import Placement from '../Placement/Placement';
 import PlacementArea from '../Placement/PlacementArea';

package/src/hooks/useEventListener.ts

@@ -4,30 +4,10 @@ type HTMLElementOrDocumentOrWindow = HTMLElement | Document | Window;
 interface HTMLElementOrDocumentOrWindowEventMap extends HTMLElementEventMap, DocumentEventMap, WindowEventMap {}
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-function useEventListener<E extends Window, K extends keyof WindowEventMap>(
-  el: E | null | undefined,
-  type: K,
-  handler: (evnt: WindowEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener<E extends Document, K extends keyof DocumentEventMap>(
-  el: E | null | undefined,
-  type: K,
-  handler: (evt: DocumentEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener<E extends HTMLElement, K extends keyof HTMLElementEventMap>(
-  el: E | null | undefined,
-  type: K,
-  handler: (evt: HTMLElementEventMap[K]) => void,
-  watch?: any[],
-): void;
-function useEventListener<K extends keyof HTMLElementOrDocumentOrWindowEventMap>(
-  el: HTMLElementOrDocumentOrWindow,
-  type: string,
-  handler: (evt: HTMLElementOrDocumentOrWindowEventMap[K]) => void,
-  watch?: any[],
-): void;
+function useEventListener<E extends Window, K extends keyof WindowEventMap>(el: E | null | undefined, type: K, handler: (evnt: WindowEventMap[K]) => void, watch?: any[]): void;
+function useEventListener<E extends Document, K extends keyof DocumentEventMap>(el: E | null | undefined, type: K, handler: (evt: DocumentEventMap[K]) => void, watch?: any[]): void;
+function useEventListener<E extends HTMLElement, K extends keyof HTMLElementEventMap>(el: E | null | undefined, type: K, handler: (evt: HTMLElementEventMap[K]) => void, watch?: any[]): void;
+function useEventListener<K extends keyof HTMLElementOrDocumentOrWindowEventMap>(el: HTMLElementOrDocumentOrWindow, type: string, handler: (evt: HTMLElementOrDocumentOrWindowEventMap[K]) => void, watch?: any[]): void;
 function useEventListener(el: any, type: string, handler: any, watch?: any[]) {
   useEffect(() => {
     if (el) {
@@ -40,6 +20,6 @@ function useEventListener(el: any, type: string, handler: any, watch?: any[]) {
       }
     };
   }, watch || []);
-}
+};
 
 export default useEventListener;

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx commitlint --edit ""