@bitrise/bitkit 13.238.0 → 13.240.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -213,7 +213,7 @@ function useDropdown<T>({
   // clear map when value is changed from the outside
   useEffect(() => {
     if (labelMapRef.current && Array.isArray(value)) {
-      const removed = labelMapRef.current.keys().filter((key) => !value.includes(key));
+      const removed = [...labelMapRef.current.keys()].filter((key) => !value.includes(key));
       removed.forEach((remove) => labelMapRef.current?.delete(remove));
     }
   }, [value]);

package/src/Components/LabeledData/LabeledData.tsx

@@ -103,7 +103,7 @@ const LabeledData = ({
         {label}
       </Label>
       {isLoading ? (
-        <Skeleton isActive display="flex" flexDirection="column" gap="4">
+        <Skeleton display="flex" flexDirection="column" gap="4">
           <SkeletonBox height={dataSkeletonHeight} width="120px" marginY={dataSkeletonPaddingY} />
           {skeletonVariant === 'double' && <SkeletonBox height="14" width="120px" marginY="3" />}
         </Skeleton>

package/src/Components/Skeleton/Skeleton.theme.ts

@@ -22,9 +22,9 @@ const afterStyle = (foregroundColor: string) => ({
   width: '100%',
 });
 
-const baseStyle = defineStyle(({ foregroundColor, isActive }) => {
+const baseStyle = defineStyle(({ foregroundColor }) => {
   return {
-    _after: isActive ? afterStyle(foregroundColor) : {},
+    _after: afterStyle(foregroundColor),
     overflow: 'hidden',
     position: 'relative',
   };

package/src/Components/Skeleton/Skeleton.tsx

@@ -1,7 +1,6 @@
 import { Box, BoxProps, forwardRef, getToken, useStyleConfig, useTheme } from '@chakra-ui/react';
 
 export interface SkeletonProps extends BoxProps {
-  isActive?: boolean;
   foregroundColor?: string;
 }
 
@@ -11,14 +10,13 @@ export interface SkeletonProps extends BoxProps {
  * We don't extend Chakra's Skeleton
  */
 const Skeleton = forwardRef<SkeletonProps, 'div'>((props, ref) => {
-  const { foregroundColor: foregroundColorToken, isActive, ...rest } = props;
+  const { foregroundColor: foregroundColorToken, ...rest } = props;
   const theme = useTheme();
   const foregroundColor = foregroundColorToken
     ? getToken('colors', foregroundColorToken, foregroundColorToken)(theme)
     : '#ffffff';
   const css = useStyleConfig('Skeleton', {
     foregroundColor,
-    isActive,
   });
 
   return <Box __css={css} {...rest} ref={ref} />;

package/src/Components/Tag/Tag.tsx

@@ -57,7 +57,7 @@ const Tag = forwardRef<TagProps, 'span'>((props, ref) => {
       )}
       <Text as="span" hasEllipsis sx={style.label}>
         {isLoading ? (
-          <Skeleton isActive>
+          <Skeleton>
             <SkeletonBox sx={style.skeleton} />
           </Skeleton>
         ) : (

package/src/Components/Toggle/Toggle.tsx

@@ -88,7 +88,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     if (!helperText) return;
     if (isLoading) {
       return (
-        <Skeleton marginTop="4" maxWidth="120px" isActive paddingY="0.125rem">
+        <Skeleton marginTop="4" maxWidth="120px" paddingY="0.125rem">
           <SkeletonBox height="12" />
         </Skeleton>
       );
@@ -133,7 +133,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
           <Box display="flex" flexDirection="row" alignItems="center" gap="8">
             {switchComponent()}
             {isLoading ? (
-              <Skeleton maxWidth="7.5rem" flex="1" isActive>
+              <Skeleton maxWidth="7.5rem" flex="1">
                 <SkeletonBox height="16" />
               </Skeleton>
             ) : (

package/src/Components/Toggle/ToggleComponent.tsx

@@ -12,7 +12,7 @@ const ToggleComponent = forwardRef<ToggleComponentProps, 'input'>((props, ref) =
   const { skeleton } = useMultiStyleConfig('Switch', props);
   if (isLoading) {
     return (
-      <Skeleton isActive>
+      <Skeleton>
         <SkeletonBox __css={skeleton} />
       </Skeleton>
     );

package/src/Patterns/SettingsCard/SettingsCard.tsx

@@ -143,7 +143,7 @@ export const SettingsCardFooterStatus = ({
     <SettingsCardFooter>
       <Box display="flex" flexDirection="row" gap="4" textStyle="body/md/regular" alignItems="center">
         {status === 'loading' ? (
-          <Skeleton isActive>
+          <Skeleton>
             <SkeletonBox width="128" height="16" />
           </Skeleton>
         ) : (