@bitrise/bitkit 9.4.1 → 9.4.2

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

@@ -1,18 +1,5 @@
-/* eslint-disable object-shorthand */
 import * as React from 'react';
-import {
-  Base,
-  Button,
-  Buttons,
-  ColorButton,
-  Icon,
-  Tab,
-  Tabs,
-  Text,
-  Ribbon,
-  ButtonWithDropdown,
-  Flex,
-} from '@bitrise/bitkit';
+import { Base, Button, Buttons, ColorButton, Icon, Tab, Tabs, Text, Ribbon } from '@bitrise/bitkit';
 import CodeBlock from '../../CodeBlock/CodeBlock';
 import Section from '../../Section/Section';
 import SectionSubTitle from '../../Section/SectionSubTitle';
@@ -34,10 +21,6 @@ const SectionButtons = () => {
         <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
           Color Button
         </Tab>
-
-        <Tab active={selectedTab === 4} onClick={() => setSelectedTab(4)}>
-          with dropdown
-        </Tab>
       </Tabs>
 
       {selectedTab === 1 && (
@@ -371,35 +354,6 @@ const SectionButtons = () => {
 );`}</CodeBlock>
         </>
       )}
-      {selectedTab === 4 && (
-        <Flex alignChildren="end" direction="horizontal">
-          <ButtonWithDropdown
-            items={[
-              {
-                component: 'button',
-                icon: 'Percent',
-                text: 'Refer your friends',
-              },
-              {
-                component: 'a',
-                icon: 'Settings',
-                text: 'Account setings',
-              },
-              {
-                icon: 'ChangePlan',
-                text: 'Change plan',
-              },
-              {
-                icon: 'Logout',
-                text: 'Log out',
-              },
-            ]}
-          >
-            <Icon name="Bitbot" />
-            <Text>Account</Text>
-          </ButtonWithDropdown>
-        </Flex>
-      )}
     </Section>
   );
 };

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

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

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

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

package/site/components/Documentation/Documentation.tsx

@@ -41,12 +41,7 @@ const SectionMap = {
   },
   Button: {
     Showcase: require('./Components/SectionButtons').default,
-    components: [
-      documentation.Button,
-      documentation.Buttons,
-      documentation.ColorButton,
-      documentation.ButtonWithDropdown,
-    ],
+    components: [documentation.Button, documentation.Buttons, documentation.ColorButton],
   },
   Card: {
     Showcase: require('./Components/SectionCards').default,

package/src/Dropdown/Dropdown.tsx

@@ -41,17 +41,15 @@ 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);
     }
-    handleToggleVisible();
+    setVisible(false);
   };
 
   const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value}>
+    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
       {text}
     </DropdownMenuItem>
   );
@@ -60,15 +58,22 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
     <PlacementManager>
       <PlacementReference>
         {({ ref }) => (
-          <DropdownButton {...rest} alignChildrenHorizontal="start" innerRef={ref} onClick={handleToggleVisible}>
+          <DropdownButton
+            {...rest}
+            alignChildrenHorizontal="start"
+            innerRef={ref}
+            onClick={() => {
+              setVisible(!visible);
+            }}
+          >
             <Text ellipsis>{children}</Text>
           </DropdownButton>
         )}
       </PlacementReference>
 
-      <Placement onClose={handleToggleVisible} visible={visible}>
-        {({ width }) => (
-          <DropdownMenu maxHeight={maxHeight} width={width}>
+      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
+        {() => (
+          <DropdownMenu maxHeight={maxHeight} width="100%">
             {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-blacklist */
+  /* stylelint-disable-next-line unit-disallowed-list */
   height: 1px;
   background-color: var(--color-gray--3);
 }

package/src/Placement/Placement.css

@@ -1,29 +1,10 @@
 
-: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);
@@ -83,50 +64,51 @@
   border-top: 0.0625rem solid var(--color-gray--2);
 }
 
-.Placement__arrow {
+.Placement__arrow,
+.Placement__arrow::before {
   position: absolute;
-  width: var(--Placement-arrow-size);
-  height: var(--Placement-arrow-size);
+  width: var(--size--x3);
+  height: var(--size--x3);
 }
 
 .Placement__arrow,
 .Placement__arrow:first-child,
 .Placement__arrow:last-child {
-  margin: var(--Placement-arrow-size);
+  visibility: hidden;
+}
+
+.Placement__arrow::before {
+  content: '';
+  display: block;
+  transform: rotate(45deg);
+  background: inherit;
+  visibility: visible;
 }
 
 .Placement--top .Placement__arrow,
 .Placement--top-start .Placement__arrow,
 .Placement--top-end .Placement__arrow {
   top: 100%;
-  transform:
-    translateY(calc(-50% + var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-top: -0.375rem;
 }
 
 .Placement--right .Placement__arrow,
 .Placement--right-start .Placement__arrow,
 .Placement--right-end .Placement__arrow {
   right: 100%;
-  transform:
-    translateX(calc(50% - var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-right: -0.375rem;
 }
 
 .Placement--bottom .Placement__arrow,
 .Placement--bottom-start .Placement__arrow,
 .Placement--bottom-end .Placement__arrow {
   bottom: 100%;
-  transform:
-    translateY(calc(50% - var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-bottom: -0.375rem;
 }
 
 .Placement--left .Placement__arrow,
 .Placement--left-start .Placement__arrow,
 .Placement--left-end .Placement__arrow {
   left: 100%;
-  transform:
-    translateX(calc(-50% + var(--Placement-arrow-size) * -1))
-    rotate(45deg);
+  margin-left: -0.375rem;
 }

package/src/Placement/Placement.tsx

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

package/src/Placement/PlacementPopper.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable react/default-props-match-prop-types */
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
+import { Placement as TypePlacement, VirtualElement } from '@popperjs/core';
 import { Popper, PopperProps } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
@@ -27,15 +28,14 @@ const transitionClasses = {
 
 export interface Props extends BaseProps {
   animatePosition?: boolean;
-  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
+  children: (props: { update: () => 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?: TypeReferenceObject;
+  referenceElement?: any;
   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,6 +61,8 @@ 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);
@@ -71,11 +73,14 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     closeElement || document,
     'click',
     (event) => {
-      if (onClose && ref.current && !ref.current.contains(event.target as Node)) {
+      // 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) {
         onClose(event as MouseEvent);
       }
     },
-    [onClose],
+    [onClose, reference],
   );
 
   useEventListener(
@@ -93,19 +98,36 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     return null;
   }
 
-  const popperProps: PopperProps = {
-    children: () => null,
-    eventsEnabled: !disableReposition,
-    placement: desiredPlacement,
-    modifiers: {
-      preventOverflow: {
-        boundariesElement: 'window',
-      },
-      flip: {
-        behavior: 'flip',
-        enabled: flip,
+  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> = {
+    children: () => null,
+    placement: desiredPlacement,
+    modifiers,
   };
 
   if (referenceElement) {
@@ -114,39 +136,45 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
 
   return createPortal(
     // eslint-disable-next-line no-return-assign
-    <Popper {...popperProps} innerRef={(el) => (ref.current = el || null)}>
+    <Popper
+      {...popperProps}
+      // eslint-disable-next-line no-return-assign
+      innerRef={(el) => (ref.current = el || null)}
+      onFirstUpdate={(state) => {
+        setReference(state.elements?.reference);
+      }}
+    >
       {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
-      {({ 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>
-      )}
+      {({ 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>
+        );
+      }}
     </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 'popper.js';
+import { Placement as TypePlacement } from '@popperjs/core';
 import { Props as BaseProps } from '../Base/Base';
 import Placement from '../Placement/Placement';
 import PlacementArea from '../Placement/PlacementArea';

package/src/hooks/useEventListener.ts

@@ -4,10 +4,30 @@ 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) {
@@ -20,6 +40,6 @@ function useEventListener(el: any, type: string, handler: any, watch?: any[]) {
       }
     };
   }, watch || []);
-};
+}
 
 export default useEventListener;

package/src/index.ts

@@ -23,10 +23,6 @@ export { default as Base, Props as BaseProps, TypeColors, TypeSizes } from './Ba
 export { default as Bounds, Props as BoundsProps } from './Bounds/Bounds';
 export { default as Button, Props as ButtonProps } from './Button/Button';
 export { default as Buttons, Props as ButtonsProps } from './Button/Buttons';
-export {
-  default as ButtonWithDropdown,
-  Props as ButtonWithDropdownProps,
-} from './ButtonWithDropdown/ButtonWithDropdown';
 export { default as Card, Props as CardProps } from './Card/Card';
 export { default as CardButton, Props as CardButtonProps } from './Card/CardButton';
 export { default as CardContent, Props as CardContentProps } from './Card/CardContent';

package/lib/cjs/ButtonWithDropdown/ButtonWithDropdown.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { ButtonProps, DropdownMenuItemProps, PlacementProps } from '@bitrise/bitkit';
-export interface ItemProps extends DropdownMenuItemProps {
-    component?: string;
-    disabled?: boolean;
-    href?: string;
-    target?: string;
-    text: string;
-}
-export interface Props {
-    buttonProps?: ButtonProps;
-    children?: React.ReactElement | React.ReactNodeArray;
-    dropdownWidth?: string;
-    items: ItemProps[];
-    placementProps?: PlacementProps;
-}
-declare const ButtonWithDropdown: ({ buttonProps, children, dropdownWidth, items, placementProps, }: Props) => JSX.Element;
-export default ButtonWithDropdown;
-//# sourceMappingURL=ButtonWithDropdown.d.ts.map

package/lib/cjs/ButtonWithDropdown/ButtonWithDropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonWithDropdown.d.ts","sourceRoot":"","sources":["../../../src/ButtonWithDropdown/ButtonWithDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,WAAW,EAGX,qBAAqB,EAIrB,cAAc,EAEf,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,SAAU,SAAQ,qBAAqB;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,KAAK;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,QAAA,MAAM,kBAAkB,qEAMrB,KAAK,KAAG,WA0CV,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/cjs/ButtonWithDropdown/ButtonWithDropdown.js

@@ -1,55 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var bitkit_1 = require("@bitrise/bitkit");
-var ButtonWithDropdown = function (_a) {
-    var _b = _a.buttonProps, buttonProps = _b === void 0 ? {} : _b, children = _a.children, dropdownWidth = _a.dropdownWidth, items = _a.items, placementProps = _a.placementProps;
-    var _c = React.useState(false), visible = _c[0], setVisible = _c[1];
-    return (React.createElement(bitkit_1.PlacementManager, null,
-        React.createElement(bitkit_1.PlacementReference, null, function (_a) {
-            var ref = _a.ref;
-            return (React.createElement(bitkit_1.Button, __assign({ innerRef: ref, onClick: function () { return setVisible(true); } }, buttonProps),
-                children,
-                React.createElement(bitkit_1.Icon, { name: "ChevronDown" })));
-        }),
-        !buttonProps.disabled && (React.createElement(bitkit_1.Placement, __assign({ disableMargin: "left-right", onClose: function () { return setVisible(false); }, placement: "bottom-end", visible: visible }, placementProps), function () { return (React.createElement(bitkit_1.DropdownMenu, { width: dropdownWidth, withArrow: true }, items.map(function (_a) {
-            var component = _a.component, disabled = _a.disabled, href = _a.href, icon = _a.icon, onClick = _a.onClick, target = _a.target, text = _a.text;
-            return (React.createElement(bitkit_1.DropdownMenuItem, { Component: component || 'div', disabled: disabled, href: href, icon: icon, key: text, onClick: onClick, target: target }, text));
-        }))); }))));
-};
-exports.default = ButtonWithDropdown;
-//# sourceMappingURL=ButtonWithDropdown.js.map

package/lib/cjs/ButtonWithDropdown/ButtonWithDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonWithDropdown.js","sourceRoot":"","sources":["../../../src/ButtonWithDropdown/ButtonWithDropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,0CAWyB;AAkBzB,IAAM,kBAAkB,GAAG,UAAC,EAMpB;QALN,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,cAAc,oBAAA;IAER,IAAA,KAAwB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA5C,OAAO,QAAA,EAAE,UAAU,QAAyB,CAAC;IAEpD,OAAO,CACL,oBAAC,yBAAgB;QACf,oBAAC,2BAAkB,QAChB,UAAC,EAAO;gBAAL,GAAG,SAAA;YAAO,OAAA,CACZ,oBAAC,eAAM,aAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,IAAM,WAAW;gBACpE,QAAQ;gBACT,oBAAC,aAAI,IAAC,IAAI,EAAC,aAAa,GAAG,CACpB,CACV;QALa,CAKb,CACkB;QACpB,CAAC,WAAW,CAAC,QAAQ,IAAI,CACxB,oBAAC,kBAAS,aACR,aAAa,EAAC,YAAY,EAC1B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EAChC,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,OAAO,IACZ,cAAc,GAEjB,cAAM,OAAA,CACL,oBAAC,qBAAY,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,UAC1C,KAAK,CAAC,GAAG,CAAC,UAAC,EAA0D;gBAAxD,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA;YAAO,OAAA,CACzE,oBAAC,yBAAgB,IACf,SAAS,EAAE,SAAS,IAAI,KAAK,EAC7B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,EACT,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,IAAI,CACY,CACpB;QAZ0E,CAY1E,CAAC,CACW,CAChB,EAhBM,CAgBN,CACS,CACb,CACgB,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}