@bitrise/bitkit 8.2.0 → 8.5.0

package/src/Dropdown/Dropdown.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
 import DropdownMenu from './DropdownMenu';
 import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenuItemGroup from './DropdownMenuItemGroup';
 import Placement from '../Placement/Placement';
 import PlacementManager from '../Placement/PlacementManager';
 import PlacementReference from '../Placement/PlacementReference';
@@ -11,15 +12,21 @@ const { useState } = React;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DropdownValue = any;
+interface Option {
+  text: string;
+  value: DropdownValue;
+}
+
+interface OptionGroup {
+  text: string;
+  options: DropdownValue[];
+}
 
 export interface Props extends DropdownButtonProps {
   /** Handler for the value that is selected */
   onChange?: (value: DropdownValue) => void;
   /** Array of options that can be selected */
-  options: {
-    text: string;
-    value: DropdownValue;
-  }[];
+  options: (Option | OptionGroup)[];
   /** Selected value from the options */
   selected?: DropdownValue;
   maxHeight?: string;
@@ -41,6 +48,14 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
     handleToggleVisible();
   };
 
+  const renderOption = (({ text, value }: Option) => (
+    <DropdownMenuItem
+        onClick={ () => handleChange(value) }
+        selected={ selected === value }>
+      { text }
+    </DropdownMenuItem>
+  ));
+
   return (
     <PlacementManager>
       <PlacementReference>
@@ -59,13 +74,14 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
       <Placement onClose={ handleToggleVisible } visible={ visible }>
         { ({ width }) => (
           <DropdownMenu maxHeight={ maxHeight } width={ width }>
-            { options.map(({ text, value }) => (
-              <DropdownMenuItem
-                  key={ text }
-                  onClick={ () => handleChange(value) }
-                  selected={ selected === value }>
-                { text }
-              </DropdownMenuItem>
+            { options.map((option) => (
+              <React.Fragment key={ option.text }>
+                { 'options' in option ? (
+                  <DropdownMenuItemGroup text={ option.text }>
+                    { option.options.map(groupOption => <React.Fragment key={ groupOption.value }>{ renderOption(groupOption) }</React.Fragment>) }
+                  </DropdownMenuItemGroup>
+                ) : renderOption(option) }
+              </React.Fragment>
             )) }
           </DropdownMenu>
         ) }

package/src/Dropdown/DropdownMenu.css

@@ -4,14 +4,44 @@
   word-break: break-word;
 }
 
+.DropdownMenu__group-text {
+  display: flex;
+  align-items: center;
+  padding: var(--size--x3) var(--size--x4);
+  text-transform: uppercase;
+  gap: var(--size--x4);
+}
+
+.DropdownMenu__group-text::after {
+  content: '';
+  flex: 1;
+  /* stylelint-disable-next-line unit-blacklist */
+  height: 1px;
+  background-color: var(--color-gray--3);
+}
+
 .DropdownMenu__item {
   padding: var(--size--x3) var(--size--x8) var(--size--x3) var(--size--x1);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  line-height: inherit;
   cursor: pointer;
   transition-property: background-color, color;
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
 }
 
+.DropdownMenu__group .DropdownMenu__item {
+  padding-left: var(--size--x4);
+}
+
+.DropdownMenu__item[disabled] {
+  color: var(--color-gray--5);
+  pointer-events: none;
+}
+
 .DropdownMenu__item:hover {
   background-color: var(--color-grape--1);
   color: var(--color-grape--3);

package/src/Dropdown/DropdownMenuItemGroup.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Text from '../Text/Text';
+
+export interface Props extends FlexProps {
+  text: string;
+}
+
+const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({
+  text,
+  children,
+  className,
+  ...rest
+}: Props) => (
+  <Flex className={ classnames('DropdownMenu__group', className) } { ...rest }>
+    <Text className="DropdownMenu__group-text" size="2" textColor="gray-6">{ text }</Text>
+    { children }
+  </Flex>
+);
+
+export default DropdownMenuItemGroup;

package/src/Toggle/Toggle.tsx

@@ -45,7 +45,7 @@ const Toggle: React.FunctionComponent<Props> = (props: Props) => {
       </Flex>
 
       { children && (
-        <Flex>
+        <Flex minWidth="0px" shrink>
           { children }
         </Flex>
       ) }

package/src/index.ts

@@ -23,6 +23,7 @@ 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';
@@ -37,6 +38,7 @@ export { default as DropdownButton, Props as DropdownButtonProps } from './Dropd
 export { default as DropdownMenus, Props as DropdownMenusProps } from './Dropdown/DropdownMenus';
 export { default as DropdownMenu, Props as DropdownMenuProps } from './Dropdown/DropdownMenu';
 export { default as DropdownMenuItem, Props as DropdownMenuItemProps } from './Dropdown/DropdownMenuItem';
+export { default as DropdownMenuItemGroup, Props as DropdownMenuItemGroupProps } from './Dropdown/DropdownMenuItemGroup';
 export { default as Expand, Props as ExpandProps } from './Expand/Expand';
 export { default as ExternalLink, Props as ExternalLinkProps } from './ExternalLink/ExternalLink';
 export { default as Flex, Props as FlexProps } from './Flex/Flex';