diff --git a/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx b/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx index 9402cece57..23e401d306 100644 --- a/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx +++ b/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx @@ -6,7 +6,7 @@ import cx from "classnames"; import { keyCodes } from "../../../../constants/keyCodes"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { CSSTransition, SwitchTransition } from "react-transition-group"; -import useEventListener from "../../../../hooks/useKeyEvent"; +import useEventListener from "../../../../hooks/useEventListener"; import useKeyEvent from "../../../../hooks/useKeyEvent"; import Icon from "../../../../components/Icon/Icon"; import Check from "../../../../components/Icon/Icons/components/Check"; @@ -111,7 +111,6 @@ const StepIndicator: React.FC = ({ // Event listeners for removing animation. useEventListener({ - // @ts-ignore TODO either fix the import to 'useEventListener' OR fix to fit 'useKeyEvent' OR remove entirely eventName: "animationend", callback: disableStatusChangeAnimation, ref: componentRef diff --git a/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx b/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx index b5bc2d2426..7b7f1f9f93 100644 --- a/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx +++ b/src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx @@ -53,7 +53,7 @@ const Bar: FC = ({ return cx(styles.bar, getStyle(styles, camelCase("type__" + type + "--" + barStyle)), className, { [styles.animate]: animated }); - }, [type, barStyle, animated]); + }, [type, barStyle, animated, className]); const valuePercentage = useMemo(() => { if (value === null || value === undefined) return 0; diff --git a/src/components/Slider/SliderHelpers.ts b/src/components/Slider/SliderHelpers.ts index d901c702eb..4e5a496f04 100644 --- a/src/components/Slider/SliderHelpers.ts +++ b/src/components/Slider/SliderHelpers.ts @@ -1,26 +1,9 @@ -import cx from "classnames"; -import { BEM_PREFIX, COMPONENT_ID } from "./SliderConstants"; - export function _calcDimension(max: number, min: number, value: number): [number, number] { const valuePoints = max - min; const dimension = Math.round(((value - min) * 100) / valuePoints); return [dimension, dimension]; } -function _createBemBlockHelper(block: string, isConsume = false) { - if (!block || block === "") { - return () => ""; - } - const blockClass = isConsume ? block : `${BEM_PREFIX}-${block}`; - return function bem(element: any, modifiers: any = "", extraClasses = "") { - const elClass = element !== "" ? `${blockClass}__${element}` : blockClass; - const modClasses = cx(modifiers) - .split(" ") - .map(modClass => (modClass === "" ? "" : `${elClass}--${modClass}`)); - return cx(elClass, modClasses, extraClasses); - }; -} - function _ensureSingleValueText(valueText: string, value: number, formatter: (value: number) => string): string { if (valueText) { return valueText; @@ -42,8 +25,6 @@ function _ensureStepModulo(pageStep: number, step: number) { return pageStep - moduloToStep; } -export const bem = _createBemBlockHelper(COMPONENT_ID); - export function calcDimensions(max: number, min: number, ranged: boolean, value: number | number[]) { if (!ranged) { const [dimension, position] = _calcDimension(max, min, value as number); diff --git a/src/components/Tabs/TabsContext/TabsContext.tsx b/src/components/Tabs/TabsContext/TabsContext.tsx index 33fba5402e..1a3c18f990 100644 --- a/src/components/Tabs/TabsContext/TabsContext.tsx +++ b/src/components/Tabs/TabsContext/TabsContext.tsx @@ -9,6 +9,10 @@ export interface TabsContextProps extends VibeComponentProps { children?: ReactElement | ReactElement[]; } +type TabsChild = ReactElement & { + type: Record; +}; + const TabsContext: FC = forwardRef( ({ className, id, activeTabId = 0, children, "data-testid": dataTestId }, ref) => { const componentRef = useRef(null); @@ -41,12 +45,10 @@ const TabsContext: FC = forwardRef( id={id} data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABS_CONTEXT, id)} > - {React.Children.map(children, child => { - // @ts-ignore + {React.Children.map(children, (child: TabsChild) => { if (child.type.isTabList) { return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange: onTabClick }); } - // @ts-ignore if (child.type.isTabPanels) { const animationDirection = previousActiveTabIdState < activeTabIdState ? "ltr" : "rtl"; return React.cloneElement(child, { activeTabId: activeTabIdState, animationDirection });