@bitrise/bitkit 12.17.0 → 12.17.2

package/package.json

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

package/src/Components/Icons/16x16/{Unlock.tsx → LockOpen.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
+const LockOpen = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 20" {...props}>
     <path d="M7 15V12H9V15H7Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default Unlock;
+export default LockOpen;

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

@@ -104,6 +104,7 @@ export { default as Laptop } from './Laptop';
 export { default as Lightbulb } from './Lightbulb';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
+export { default as LockOpen } from './LockOpen';
 export { default as Login } from './Login';
 export { default as Logout } from './Logout';
 export { default as Macos } from './Macos';
@@ -187,7 +188,6 @@ export { default as Trace } from './Trace';
 export { default as Trash } from './Trash';
 export { default as Trigger } from './Trigger';
 export { default as Twitter } from './Twitter';
-export { default as Unlock } from './Unlock';
 export { default as ValidateShield } from './ValidateShield';
 export { default as Video } from './Video';
 export { default as Warning } from './Warning';

package/src/Components/Icons/24x24/{Unlock.tsx → LockOpen.tsx}

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

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

@@ -104,6 +104,7 @@ export { default as Laptop } from './Laptop';
 export { default as Lightbulb } from './Lightbulb';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
+export { default as LockOpen } from './LockOpen';
 export { default as Login } from './Login';
 export { default as Logout } from './Logout';
 export { default as Macos } from './Macos';
@@ -187,7 +188,6 @@ export { default as Trace } from './Trace';
 export { default as Trash } from './Trash';
 export { default as Trigger } from './Trigger';
 export { default as Twitter } from './Twitter';
-export { default as Unlock } from './Unlock';
 export { default as ValidateShield } from './ValidateShield';
 export { default as Video } from './Video';
 export { default as Warning } from './Warning';

package/src/Components/Popover/Popover.context.ts

@@ -0,0 +1,6 @@
+import { createContext } from '@chakra-ui/react-utils';
+
+export interface PopoverContextType {
+  withArrow?: boolean;
+}
+export const [PopoverContext, usePopoverContext] = createContext<PopoverContextType>();

package/src/Components/Popover/Popover.theme.ts

@@ -1,4 +1,7 @@
 import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import { cssVar } from '@chakra-ui/theme-tools';
+
+const $arrowBackground = cssVar('popper-arrow-bg');
 
 const PopoverTheme: SystemStyleObject = {
   baseStyle: {
@@ -6,6 +9,7 @@ const PopoverTheme: SystemStyleObject = {
       zIndex: 'popover',
     },
     content: {
+      [$arrowBackground.variable]: 'colors.neutral.100',
       backgroundColor: 'neutral.100',
       borderRadius: 8,
       boxShadow: 'large',

package/src/Components/Popover/Popover.tsx

@@ -1,7 +1,31 @@
+import { useMemo } from 'react';
 import { PopoverProps as ChakraPopoverProps, Popover as ChakraPopover } from '@chakra-ui/react';
+import { PopoverContext, PopoverContextType } from './Popover.context';
 
-export type PopoverProps = ChakraPopoverProps;
+export interface PopoverProps extends ChakraPopoverProps {
+  withArrow?: boolean;
+}
 
-const Popover = (props: PopoverProps) => <ChakraPopover {...props} />;
+const Popover = (props: PopoverProps) => {
+  const { withArrow, ...rest } = props;
+  const popoverProps = {
+    arrowPadding: 16,
+    arrowSize: 16,
+    gutter: withArrow ? 16 : 8,
+    ...rest,
+  };
+  const ctx = useMemo<PopoverContextType>(
+    () => ({
+      withArrow,
+    }),
+    [withArrow],
+  );
+
+  return (
+    <PopoverContext value={ctx}>
+      <ChakraPopover {...popoverProps} />
+    </PopoverContext>
+  );
+};
 
 export default Popover;

package/src/Components/Popover/PopoverContent.tsx

@@ -1,20 +1,28 @@
-import { ReactNode, Fragment } from 'react';
+import { Fragment } from 'react';
 import {
-  PopoverContentProps as ChakraPopoverContentProps,
+  PopoverArrow,
+  PopoverBody,
+  PopoverBodyProps as ChakraPopoverBodyProps,
   PopoverContent as ChakraPopoverContent,
   Portal,
 } from '@chakra-ui/react';
+import { usePopoverContext } from './Popover.context';
 
-export interface PopoverContentProps extends ChakraPopoverContentProps {
-  children: ReactNode;
+export interface PopoverContentProps extends ChakraPopoverBodyProps {
   withoutPortal?: boolean;
 }
 
-const PopoverContent = ({ withoutPortal, ...rest }: PopoverContentProps) => {
+const PopoverContent = ({ children, withoutPortal, ...rest }: PopoverContentProps) => {
   const Wrapper = withoutPortal ? Fragment : Portal;
+
+  const { withArrow } = usePopoverContext();
+
   return (
     <Wrapper>
-      <ChakraPopoverContent {...rest} />
+      <ChakraPopoverContent>
+        {withArrow && <PopoverArrow />}
+        <PopoverBody {...rest}>{children}</PopoverBody>
+      </ChakraPopoverContent>
     </Wrapper>
   );
 };

package/src/index.ts

@@ -111,9 +111,6 @@ export { default as PopoverTrigger } from './Components/Popover/PopoverTrigger';
 export type { PopoverContentProps } from './Components/Popover/PopoverContent';
 export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
-export type { PopoverArrowProps } from './Components/Popover/PopoverArrow';
-export { default as PopoverArrow } from './Components/Popover/PopoverArrow';
-
 export type { AvatarProps } from './Components/Avatar/Avatar';
 export { default as Avatar } from './Components/Avatar/Avatar';