@bitrise/bitkit 13.162.1-alpha.0 → 13.162.1-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.162.1-alpha.0",
+  "version": "13.162.1-alpha.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/CloseButton/CloseButton.tsx

@@ -14,7 +14,7 @@ export interface CloseButtonProps extends ChakraCloseButtonProps {
 
 const CloseButton = forwardRef<CloseButtonProps, 'button'>((props, ref) => (
   <ChakraCloseButton ref={ref} {...CloseButtonTheme.defaultProps} {...props}>
-    <Icon name="CloseSmall" />
+    <Icon name="Cross" />
   </ChakraCloseButton>
 ));
 

package/src/Components/Dialog/Dialog.tsx

@@ -52,7 +52,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
 
   const closeBtn = (
     <ModalCloseButton isDisabled={!isClosable} size="large">
-      <Icon name="CloseSmall" />
+      <Icon name="Cross" />
     </ModalCloseButton>
   );
 

package/src/Components/Drawer/Drawer.tsx

@@ -52,7 +52,7 @@ const Drawer = ({ overlayProps, contentProps, headerProps, bodyProps, footerProp
       <DrawerOverlay {...overlayProps} />
       <DrawerContent maxWidth={maxWidth} padding={padding} margin={margin} {...contentProps}>
         <DrawerCloseButton size="md">
-          <Icon name="CloseSmall" />
+          <Icon name="Cross" />
         </DrawerCloseButton>
         <DrawerHeader as="h3" padding={headerPadding} {...headerProps}>
           {title}

package/src/Components/Filter/Filter.tsx

@@ -165,7 +165,7 @@ const Filter = (props: FilterProps) => {
             {showClearFilters && (
               <Button
                 isDisabled={isLoading}
-                leftIconName="CloseSmall"
+                leftIconName="Cross"
                 minWidth="7.5rem"
                 onClick={onClearFilters}
                 size="sm"

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -55,7 +55,7 @@ const FilterAdd = (props: FilterAddProps) => {
         as={Button}
         isDisabled={isDisabled}
         isLoading={isLoading}
-        leftIconName="PlusOpen"
+        leftIconName="Plus"
         position={isOpen ? 'relative' : undefined}
         size="sm"
         variant="tertiary"

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -84,7 +84,7 @@ const FilterItem = (props: FilterItemProps) => {
           {type !== 'select' && (
             <IconButton
               aria-label={isLoading ? '' : 'Clear'}
-              iconName="CloseSmall"
+              iconName="Cross"
               isDisabled={isLoading}
               onClick={() => onFilterClear(category)}
               size="sm"

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -61,7 +61,7 @@ const FilterSearch = (props: FilterSearchProps) => {
       </Tooltip>
       {!!searchValue && (
         <InputRightElement>
-          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="sm" variant="tertiary" />
+          <IconButton aria-label="Clear" iconName="Cross" onClick={onClearClick} size="sm" variant="tertiary" />
         </InputRightElement>
       )}
     </InputGroup>

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -34,7 +34,7 @@ const CustomIcon = (props: CheckboxIconProps) => {
   if (!isChecked) {
     return null;
   }
-  return <Icon __css={__css} name={isIndeterminate ? 'MinusClose' : 'Check'} />;
+  return <Icon __css={__css} name={isIndeterminate ? 'Minus' : 'Check'} />;
 };
 
 /**

package/src/Components/Form/FileInput/FileInput.tsx

@@ -104,7 +104,7 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
               </Text>
               <Text as="span">{selectedFileNames[0]}</Text>
             </Box>
-            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="sm" variant="secondary">
+            <Button flexShrink={0} leftIconName="MinusCircle" onClick={onRemoveClick} size="sm" variant="secondary">
               Remove
             </Button>
           </>

package/src/Components/Icons/16x16/{CloseSmall.tsx → Cross.tsx}

@@ -1,6 +1,6 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const CloseSmall = forwardRef<IconProps, 'svg'>((props, ref) => (
+const Cross = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
       d="M7.99996 6.93954L4.99474 3.93433L3.93408 4.99499L6.9393 8.0002L3.9341 11.0054L4.99476 12.0661L7.99996 9.06086L11.0051 12.0661L12.0658 11.0054L9.06062 8.0002L12.0658 4.99499L11.0052 3.93433L7.99996 6.93954Z"
@@ -9,4 +9,4 @@ const CloseSmall = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default CloseSmall;
+export default Cross;

package/src/Components/Icons/16x16/{MinusClose.tsx → Minus.tsx}

@@ -1,9 +1,9 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const MinusClose = forwardRef<IconProps, 'svg'>((props, ref) => (
+const Minus = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path clipRule="evenodd" d="M3 7.25L13 7.25L13 8.75L3 8.75L3 7.25Z" fill="currentColor" fillRule="evenodd" />
   </Icon>
 ));
 
-export default MinusClose;
+export default Minus;

package/src/Components/Icons/16x16/{MinusRemove.tsx → MinusCircle.tsx}

@@ -1,6 +1,6 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const MinusRemove = forwardRef<IconProps, 'svg'>((props, ref) => (
+const MinusCircle = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path d="M11.5 7.25H4.5V8.75H11.5V7.25Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const MinusRemove = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default MinusRemove;
+export default MinusCircle;

package/src/Components/Icons/16x16/{PlusOpen.tsx → Plus.tsx}

@@ -1,9 +1,9 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const PlusOpen = forwardRef<IconProps, 'svg'>((props, ref) => (
+const Plus = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path d="M8.75 7.25L8.75 3H7.25L7.25 7.25H3V8.75H7.25L7.25 13H8.75L8.75 8.75H13V7.25H8.75Z" fill="currentColor" />
   </Icon>
 ));
 
-export default PlusOpen;
+export default Plus;

package/src/Components/Icons/16x16/{PlusAdd.tsx → PlusCircle.tsx}

@@ -1,6 +1,6 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const PlusAdd = forwardRef<IconProps, 'svg'>((props, ref) => (
+const PlusCircle = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path d="M8.75 7.25H11.5V8.75H8.75V11.5H7.25V8.75H4.5V7.25H7.25V4.5H8.75V7.25Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const PlusAdd = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default PlusAdd;
+export default PlusCircle;

package/src/Components/Icons/16x16/index.ts

@@ -66,7 +66,7 @@ export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
 export { default as ChevronUp } from './ChevronUp';
 export { default as Clock } from './Clock';
-export { default as CloseSmall } from './CloseSmall';
+export { default as Cross } from './Cross';
 export { default as Code } from './Code';
 export { default as CodeSigning } from './CodeSigning';
 export { default as Coffee } from './Coffee';
@@ -151,8 +151,8 @@ export { default as MenuHamburger } from './MenuHamburger';
 export { default as Message } from './Message';
 export { default as MessageQuestion } from './MessageQuestion';
 export { default as MinusCircleFilled } from './MinusCircleFilled';
-export { default as MinusClose } from './MinusClose';
-export { default as MinusRemove } from './MinusRemove';
+export { default as Minus } from './Minus';
+export { default as MinusCircle } from './MinusCircle';
 export { default as Mobile } from './Mobile';
 export { default as MonitorChart } from './MonitorChart';
 export { default as MoreHorizontal } from './MoreHorizontal';
@@ -172,9 +172,9 @@ export { default as Pencil } from './Pencil';
 export { default as Percent } from './Percent';
 export { default as Person } from './Person';
 export { default as Play } from './Play';
-export { default as PlusAdd } from './PlusAdd';
+export { default as PlusCircle } from './PlusCircle';
 export { default as PlusCircleFilled } from './PlusCircleFilled';
-export { default as PlusOpen } from './PlusOpen';
+export { default as Plus } from './Plus';
 export { default as Podcast } from './Podcast';
 export { default as Power } from './Power';
 export { default as Pull } from './Pull';

package/src/Components/Icons/24x24/{CloseSmall.tsx → Cross.tsx}

@@ -1,6 +1,6 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const CloseSmall = forwardRef<IconProps, 'svg'>((props, ref) => (
+const Cross = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
       d="M12 13.4143L16.5426 17.9569C16.5426 17.9569 16.5428 17.9572 17.25 17.2501C17.9571 16.543 17.957 16.5429 17.957 16.5429L13.4142 12.0001L17.9571 7.45718L16.5428 6.04297L12 10.5859L7.45706 6.04297L6.04285 7.45718L10.5857 12.0001L6.04285 16.543L7.45706 17.9572L12 13.4143Z"
@@ -9,4 +9,4 @@ const CloseSmall = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default CloseSmall;
+export default Cross;

package/src/Components/Icons/24x24/{MinusClose.tsx → Minus.tsx}

@@ -1,9 +1,9 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const MinusClose = forwardRef<IconProps, 'svg'>((props, ref) => (
+const Minus = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path clipRule="evenodd" d="M18 13H6V11H18V13Z" fill="currentColor" fillRule="evenodd" />
   </Icon>
 ));
 
-export default MinusClose;
+export default Minus;

package/src/Components/Icons/24x24/{MinusRemove.tsx → MinusCircle.tsx}

@@ -1,6 +1,6 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const MinusRemove = forwardRef<IconProps, 'svg'>((props, ref) => (
+const MinusCircle = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path d="M7 13H17V11H7V13Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const MinusRemove = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default MinusRemove;
+export default MinusCircle;

package/src/Components/Icons/24x24/{PlusOpen.tsx → Plus.tsx}

@@ -1,9 +1,9 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const PlusOpen = forwardRef<IconProps, 'svg'>((props, ref) => (
+const Plus = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path d="M11 13V18H13V13H18V11H13V6H11V11H6V13H11Z" fill="currentColor" />
   </Icon>
 ));
 
-export default PlusOpen;
+export default Plus;

package/src/Components/Icons/24x24/{PlusAdd.tsx → PlusCircle.tsx}

@@ -1,6 +1,6 @@
 import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 
-const PlusAdd = forwardRef<IconProps, 'svg'>((props, ref) => (
+const PlusCircle = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path d="M11 13H7V11H11V7H13V11H17V13H13V17H11V13Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const PlusAdd = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default PlusAdd;
+export default PlusCircle;

package/src/Components/Icons/24x24/index.ts

@@ -63,7 +63,7 @@ export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
 export { default as ChevronUp } from './ChevronUp';
 export { default as Clock } from './Clock';
-export { default as CloseSmall } from './CloseSmall';
+export { default as Cross } from './Cross';
 export { default as Code } from './Code';
 export { default as CodeSigning } from './CodeSigning';
 export { default as Coffee } from './Coffee';
@@ -149,8 +149,8 @@ export { default as MenuHamburger } from './MenuHamburger';
 export { default as Message } from './Message';
 export { default as MessageQuestion } from './MessageQuestion';
 export { default as MinusCircleFilled } from './MinusCircleFilled';
-export { default as MinusClose } from './MinusClose';
-export { default as MinusRemove } from './MinusRemove';
+export { default as Minus } from './Minus';
+export { default as MinusCircle } from './MinusCircle';
 export { default as Mobile } from './Mobile';
 export { default as MonitorChart } from './MonitorChart';
 export { default as MoreHorizontal } from './MoreHorizontal';
@@ -170,9 +170,9 @@ export { default as Pencil } from './Pencil';
 export { default as Percent } from './Percent';
 export { default as Person } from './Person';
 export { default as Play } from './Play';
-export { default as PlusAdd } from './PlusAdd';
+export { default as PlusCircle } from './PlusCircle';
 export { default as PlusCircleFilled } from './PlusCircleFilled';
-export { default as PlusOpen } from './PlusOpen';
+export { default as Plus } from './Plus';
 export { default as Podcast } from './Podcast';
 export { default as Power } from './Power';
 export { default as Pull } from './Pull';

package/src/Components/LabeledData/LabeledData.tsx

@@ -67,7 +67,7 @@ const LabeledData = ({
       trendIconName = 'ArrowDown';
       break;
     case 'neutral':
-      trendIconName = 'MinusClose';
+      trendIconName = 'Minus';
       break;
   }
 

package/src/Components/SearchInput/SearchInput.tsx

@@ -23,7 +23,7 @@ const SearchInput = (props: SearchInputProps) => {
       _active={{ background: 'transparent' }}
       _hover={{ background: 'transparent' }}
       aria-label="Clear"
-      iconName="CloseSmall"
+      iconName="Cross"
       onClick={onClearClick}
       variant="tertiary"
     />

package/src/Components/Tabs/ContainedTab.tsx

@@ -7,6 +7,7 @@ import Text from '../Text/Text';
 
 export interface ContainedTabProps extends ChakraTabProps {
   href?: string;
+  id: string;
   iconColor?: TypeColors | 'currentColor';
   iconName?: TypeIconName;
   isWarning?: boolean;

package/src/Components/Tabs/Tab.tsx

@@ -6,6 +6,7 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;
   href?: string;
+  id: string;
   leftIconName?: TypeIconName;
   isDisabled?: boolean;
   rightIconName?: TypeIconName;

package/src/Components/Tabs/Tabs.tsx

@@ -1,18 +1,92 @@
+import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
 import { forwardRef, Tabs as ChakraTabs, TabsProps as ChakraTabsProps } from '@chakra-ui/react';
+import { useHistory } from '../../hooks';
+import { TabProps } from './Tab';
 
 export interface TabsProps extends ChakraTabsProps {
   defaultTab?: string;
   onChange?: (index: number, tabId?: string) => void;
   tabId?: string;
   variant?: 'contained' | 'line';
+  withHistory?: boolean;
 }
 
+const getTabIds = (props: TabsProps): string[] => {
+  const tabList = React.Children.toArray(props.children)[0] as ReactElement;
+  const tabs = React.Children.toArray(tabList.props.children) as ReactElement[];
+
+  return tabs.filter((item) => isValidElement(item)).map((item) => (item.props as TabProps).id || '');
+};
+
+const getTabIndexFromSearchParams = (tabIds: string[], tabIndex?: number) => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const tabName = searchParams.get('tab');
+  if (!tabName) {
+    return undefined;
+  }
+
+  const index = tabIds.indexOf(tabName);
+  if (index === -1) {
+    return tabIndex;
+  }
+
+  return index;
+};
+
 /**
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
 const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
-  const { variant = 'line', ...rest } = props;
-  return <ChakraTabs {...rest} ref={ref} variant={variant} />;
+  const { defaultTab = '', onChange, tabId, variant = 'line', withHistory, ...rest } = props;
+  const { replace } = useHistory();
+
+  const tabIds = getTabIds(props);
+
+  let tabIndex = 0;
+
+  if (defaultTab) {
+    tabIndex = tabIds.includes(defaultTab) ? tabIds.indexOf(defaultTab) : 0;
+  }
+
+  if (tabId) {
+    tabIndex = tabIds.includes(tabId) ? tabIds.indexOf(tabId) : 0;
+  }
+
+  const [actualIndex, setActualIndex] = useState(
+    withHistory ? getTabIndexFromSearchParams(tabIds, tabIndex) : tabIndex,
+  );
+
+  const onTabChange = (index: number) => {
+    const newTabId = tabIds[index];
+
+    if (withHistory) {
+      const searchParams = new URLSearchParams(window.location.search);
+      if (newTabId) {
+        searchParams.set('tab', newTabId);
+      } else {
+        searchParams.delete('tab');
+      }
+      replace(`?${searchParams.toString()}`);
+    }
+
+    if (onChange) {
+      onChange(index, newTabId);
+    }
+
+    setActualIndex(index);
+  };
+
+  useEffect(() => {
+    if (tabId) {
+      setActualIndex(tabIds.includes(tabId) ? tabIds.indexOf(tabId) : 0);
+    }
+  }, [tabId]);
+
+  return <ChakraTabs {...rest} ref={ref} index={actualIndex} onChange={onTabChange} variant={variant} />;
 });
 
 export default Tabs;

package/src/Components/Tag/Tag.tsx

@@ -67,7 +67,7 @@ const Tag = forwardRef<TagProps, 'span'>((props, ref) => {
       {!!onClose && (
         <Tooltip isDisabled={!closeButtonTooltip} label={closeButtonTooltip}>
           <TagCloseButton isDisabled={isDisabled || isLoading} onClick={onClose}>
-            <Icon name="CloseSmall" size="16" />
+            <Icon name="Cross" size="16" />
           </TagCloseButton>
         </Tooltip>
       )}

package/src/index.ts

@@ -58,8 +58,6 @@ export { default as TabPanels } from './Components/Tabs/TabPanels';
 export type { TabPanelProps } from './Components/Tabs/TabPanel';
 export { default as TabPanel } from './Components/Tabs/TabPanel';
 
-export { default as useTabs } from './Components/Tabs/useTabs';
-
 export type { BadgeProps } from './Components/Badge/Badge';
 export { default as Badge } from './Components/Badge/Badge';
 

package/src/Components/Tabs/useTabs.ts

@@ -1,46 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-type UseTabsProps<T> = {
-  defaultId?: T;
-  queryKey?: string;
-  tabIds: T[];
-  withHistory?: boolean;
-};
-
-const useTabs = <T extends string>(props: UseTabsProps<T>) => {
-  const { defaultId, queryKey = 'tab', tabIds, withHistory } = props;
-
-  const searchParams = new URLSearchParams(window.location.search);
-
-  const defaultIndex = useMemo(() => {
-    if (withHistory && searchParams.get(queryKey)) {
-      return tabIds.indexOf(searchParams.get(queryKey) as T);
-    }
-    if (defaultId) {
-      return tabIds.indexOf(defaultId);
-    }
-    return 0;
-  }, []);
-
-  const [tabIndex, setTabIndex] = useState(defaultIndex);
-
-  const setTabId = useCallback((id: T) => {
-    setTabIndex(tabIds.indexOf(id));
-  }, []);
-
-  useEffect(() => {
-    if (withHistory) {
-      searchParams.set(queryKey, tabIds[tabIndex]);
-      window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
-    }
-  }, [tabIndex]);
-
-  return {
-    setTabId,
-    setTabIndex,
-    tabId: tabIds[tabIndex],
-    tabIndex,
-  };
-};
-
-export default useTabs;