@bitrise/bitkit 12.16.0 → 12.17.1

package/package.json

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

package/src/Components/Icons/16x16/Unlock.tsx

@@ -0,0 +1,15 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 20" {...props}>
+    <path d="M7 15V12H9V15H7Z" fill="currentColor" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 7V5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5H3C3 2.23858 5.23858 0 8 0C10.7614 0 13 2.23858 13 5V7H14C15.1046 7 16 7.89543 16 9V18C16 19.1046 15.1046 20 14 20H2C0.895431 20 0 19.1046 0 18V9C0 7.89543 0.895431 7 2 7H11ZM2 9V18H14V9H2Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Unlock;

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

@@ -187,6 +187,7 @@ 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

@@ -0,0 +1,15 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path d="M7 15V12H9V15H7Z" fill="currentColor" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 7V5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5H3C3 2.23858 5.23858 0 8 0C10.7614 0 13 2.23858 13 5V7H14C15.1046 7 16 7.89543 16 9V18C16 19.1046 15.1046 20 14 20H2C0.895431 20 0 19.1046 0 18V9C0 7.89543 0.895431 7 2 7H11ZM2 9V18H14V9H2Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Unlock;

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

@@ -187,6 +187,7 @@ 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';