@bitrise/bitkit 10.25.1 → 10.25.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.25.1",
+  "version": "10.25.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -28,7 +28,6 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
-    "clipboard": "^2.0.11",
     "framer-motion": "^6.5.1",
     "luxon": "^2.5.0",
     "react": "^18.2.0",
@@ -66,7 +65,6 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.3.0",
     "@types/cheerio": "^0.22.31",
-    "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^28.1.6",
     "@types/luxon": "^2.4.0",
@@ -109,7 +107,6 @@
   },
   "files": [
     "src",
-    "icons.ts",
     "tsconfig.json"
   ],
   "publishConfig": {

package/src/Components/Accordion/Accordion.tsx

@@ -24,7 +24,7 @@ const getItemIds = (props: AccordionProps) => {
  * Accordions display a list of high-level options that can expand/collapse to reveal more information.
  */
 const Accordion = (props: AccordionProps) => {
-  const prefersReducedMotion = usePrefersReducedMotion();
+  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
   const { children, colorScheme, onChange, ...rest } = props;
   const itemIds = getItemIds(props);
 

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -5,10 +5,9 @@ import {
   BreadcrumbItem,
   BreadcrumbSeparator,
   forwardRef,
-  useBreakpointValue,
 } from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import { useResponsive } from '../../hooks';
 
 export interface BreadcrumbProps extends ChakraBreadcrumbProps {
   hasSeparatorAfterLast?: boolean;
@@ -21,7 +20,7 @@ export interface BreadcrumbProps extends ChakraBreadcrumbProps {
  */
 const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
   const { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+  const { isMobile } = useResponsive();
 
   const childrenCount = Children.count(children);
   const items = Children.map(children, (child, index) => {

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -2,10 +2,9 @@ import {
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
   forwardRef,
-  useBreakpointValue,
 } from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Avatar from '../Avatar/Avatar';
+import { useResponsive } from '../../hooks';
 
 export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
   avatarName?: string;
@@ -14,7 +13,7 @@ export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
 
 const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
   const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+  const { isMobile } = useResponsive();
 
   const properties: ChakraBreadcrumbLinkProps = {
     color: isCurrentPage ? 'neutral.40' : 'inherit',

package/src/Components/Dialog/Dialog.tsx

@@ -37,8 +37,8 @@ const Dialog = ({
   variant,
   ...rest
 }: DialogProps) => {
-  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
-  const prefersReducedMotion = usePrefersReducedMotion();
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
+  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
 
   return (
     <Modal

package/src/Components/LightBox/LightBox.tsx

@@ -16,8 +16,8 @@ export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollB
 }
 
 const LightBox = ({ children, dataTestid, size, isOpen, onClose, ...rest }: LightBoxProps) => {
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
+  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
 
   return (
     <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose} size={dialogSize}>

package/src/Components/Ribbon/Ribbon.tsx

@@ -2,7 +2,6 @@ import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
 import { ColorScheme } from '../../Foundations/Colors/Colors';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon from '../Icon/Icon';
@@ -62,19 +61,8 @@ const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
       {...rest}
     >
       <ActionContext.Provider value={actionContext}>
-        {onClose && (
-          <Box
-            display={{ [BREAKPOINTS.MOBILE]: 'none', [BREAKPOINTS.DESKTOP]: 'block' }}
-            width={24}
-            height={24}
-            marginEnd="auto"
-          />
-        )}
-        <Box
-          display="flex"
-          flexDirection={{ [BREAKPOINTS.MOBILE]: 'column', [BREAKPOINTS.DESKTOP]: 'row' }}
-          gap={{ [BREAKPOINTS.MOBILE]: 12, [BREAKPOINTS.DESKTOP]: 16 }}
-        >
+        {onClose && <Box display={['none', 'block']} width={24} height={24} marginEnd="auto" />}
+        <Box display="flex" flexDirection={['column', 'row']} gap={['12', '16']}>
           {children}
           {actionButton}
         </Box>

package/src/Foundations/Responsive/Responsive.examples.tsx

@@ -47,9 +47,9 @@ export const Responsive = () => {
             This Box is
             <List>
               <ListItem>green below 848px (53rem)</ListItem>
-              <ListItem>purple from 848px (53rem) but below 1280px (80rem)</ListItem>
-              <ListItem>red from 1280px (80rem) but below 1616px (101rem)</ListItem>
-              <ListItem>gray from 1616px (101rem)</ListItem>
+              <ListItem>purple from 848px (53rem)</ListItem>
+              <ListItem>but red from 1280px (80rem)</ListItem>
+              <ListItem>but gray from 1616px (101rem)</ListItem>
             </List>
           </Box>
         </CardContent>

package/src/Old/hooks/index.ts

@@ -1,4 +1,3 @@
-export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useEventListener } from './useEventListener';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useSyncedStateAndProps } from './useSyncedStateAndProps';

package/src/old.ts

@@ -15,15 +15,6 @@ export { default as Base } from './Old/Base/Base';
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
-export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
-export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';
-
-export type { Props as DropdownMenuItemProps } from './Old/Dropdown/DropdownMenuItem';
-export { default as DropdownMenuItem } from './Old/Dropdown/DropdownMenuItem';
-
-export type { Props as DropdownMenuItemGroupProps } from './Old/Dropdown/DropdownMenuItemGroup';
-export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuItemGroup';
-
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';