@bitrise/bitkit 10.25.0 → 10.25.3

package/package.json

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

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>
@@ -58,10 +58,10 @@ export const Responsive = () => {
       <Card boxShadow="medium" marginBottom="24" padding="24">
         <CardContent>
           <Text as="h3" size="6" marginBottom="12">
-            With useResponsiveHook
+            With useResponsive hook
           </Text>
           <Text marginBottom="24">
-            Use this hook when you want to render something conditionally. It will return an array with 1-4 booleans,
+            Use this hook when you want to render something conditionally. It will return an object with 1-4 booleans,
             like:
             <br />
             <Code backgroundColor="neutral.20" color="neutral.93" paddingY="4" paddingX="8">