@bitrise/bitkit 13.211.0 → 13.213.0

package/package.json

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

package/src/Components/Form/Input/Input.tsx

@@ -41,6 +41,7 @@ type UsedChakraInputProps = Pick<
   | 'placeholder'
   | 'step'
 >;
+
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   badge?: FormLabelProps['badge'];
   errorText?: ReactNode;
@@ -57,12 +58,12 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   leftAddonPlacement?: 'inside' | 'outside';
   leftIconColor?: IconProps['color'];
   leftIconName?: TypeIconName;
+  recommendedLength?: number;
   rightAddon?: ReactNode;
   rightAddonPlacement?: 'inside' | 'outside';
   rightIconName?: TypeIconName;
   rightIconColor?: IconProps['color'];
   size?: 'lg' | 'md';
-  withCounter?: boolean;
   warningText?: ReactNode;
 }
 
@@ -75,7 +76,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     autoFocus,
     badge,
     defaultValue,
-    errorText,
+    errorText: errorTextProp,
     helperText,
     infoTooltipLabel,
     infoTooltipProps,
@@ -100,6 +101,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     onChange,
     pattern,
     placeholder,
+    recommendedLength,
     rightAddon,
     rightAddonPlacement,
     rightIconName,
@@ -110,10 +112,15 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     type,
     value,
     warningText,
-    withCounter,
     ...rest
   } = props;
 
+  const [valueLength, setValueLength] = useState(value?.toString().length || 0);
+
+  const exceedsCharacterLimitError =
+    recommendedLength && valueLength > recommendedLength ? 'Text exceeds the character limit.' : undefined;
+  const errorText = errorTextProp || exceedsCharacterLimitError;
+
   const formControlProps = {
     isDisabled: isDisabled || isLoading,
     isInvalid: isInvalid || !!errorText,
@@ -151,8 +158,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const LeftContentWrapper = leftAddonPlacement === 'inside' ? InputLeftElement : InputLeftAddon;
   const inputLeftPadding = leftIconName || (leftAddon && leftAddonPlacement === 'inside') ? '43px' : inputInlinePadding;
 
-  const [valueLength, setValueLength] = useState(value?.toString().length || 0);
-
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValueLength(e.currentTarget.value.length);
 
@@ -170,9 +175,9 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
         badge={badge}
         infoTooltipLabel={infoTooltipLabel}
         infoTooltipProps={infoTooltipProps}
-        maxLength={maxLength}
+        maxLength={maxLength || recommendedLength}
         valueLength={valueLength}
-        withCounter={withCounter}
+        withCounter={Boolean(maxLength || recommendedLength)}
       >
         {label}
       </FormLabel>

package/src/Components/Tabs/useTabs.ts

@@ -2,23 +2,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type UseTabsProps<T> = {
   defaultId?: T;
-  queryKey?: string;
+  onChange?: (id: T, index: number) => void;
   tabIds: T[];
-  withHistory?: boolean;
 };
 
 const useTabs = <T extends string>(props: UseTabsProps<T>) => {
-  const { defaultId, queryKey = 'tab', tabIds, withHistory } = props;
-
-  let searchParams = new URLSearchParams(window.location.search);
+  const { defaultId, onChange, tabIds } = props;
 
   const defaultIndex = useMemo(() => {
-    if (withHistory && searchParams.get(queryKey)) {
-      const tabIndex = tabIds.indexOf(searchParams.get(queryKey) as T);
-      if (tabIndex !== -1) {
-        return tabIndex;
-      }
-    }
     if (defaultId) {
       const tabIndex = tabIds.indexOf(defaultId);
       if (tabIndex !== -1) {
@@ -35,11 +26,9 @@ const useTabs = <T extends string>(props: UseTabsProps<T>) => {
   }, []);
 
   useEffect(() => {
-    const queryValue = tabIds[tabIndex];
-    if (withHistory && queryValue) {
-      searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(queryKey, queryValue);
-      window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
+    if (onChange) {
+      const id = tabIds[tabIndex];
+      onChange(id, tabIndex);
     }
   }, [tabIndex]);