diff --git a/src/custom/CatalogFilterSection/index.tsx b/src/custom/CatalogFilterSection/index.tsx index bab5baf4..a79660b9 100644 --- a/src/custom/CatalogFilterSection/index.tsx +++ b/src/custom/CatalogFilterSection/index.tsx @@ -1,3 +1,4 @@ -import CatalogFilterSidebar from './CatalogFilterSidebar'; +import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar'; export { CatalogFilterSidebar }; +export type { FilterList }; diff --git a/src/custom/CustomCatalog/EmptyStateCard.tsx b/src/custom/CustomCatalog/EmptyStateCard.tsx index 014b0a55..256b193d 100644 --- a/src/custom/CustomCatalog/EmptyStateCard.tsx +++ b/src/custom/CustomCatalog/EmptyStateCard.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EmptyStyleIcon } from '../../icons/EmptyStyle'; +import { EmptyStyleIcon } from '../../icons'; import { useTheme } from '../../theme'; import { CatalogEmptyStateDiv } from './style'; diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index a49cbebb..38fb8005 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -349,7 +349,7 @@ export const CardBack = styled('div')(({ isCatalog }) => ({ })); const getBackground = (isLightMode: boolean) => { - const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white,white, $, ${WHITESMOKE}, ${GRAY97})`; + const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white, white, ${WHITESMOKE}, ${GRAY97})`; const darkGradient = `linear-gradient(to right top, ${DARK_PRIMARY_COLOR}, ${accentGrey[30]}, ${accentGrey[20]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${charcoal[20]}, ${charcoal[10]}, black)`; return isLightMode ? lightGradient : darkGradient; diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index da529de6..b608789c 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -1,6 +1,6 @@ import { SxProps, Theme } from '@mui/material'; import { debounce } from 'lodash'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { InputAdornment } from '../../base'; import { SearchIcon } from '../../icons'; import { useTheme } from '../../theme'; @@ -33,7 +33,7 @@ interface SearchBarProps { */ function StyledSearchBar({ onChange, - value, + value = '', label, sx, placeholder, @@ -41,36 +41,48 @@ function StyledSearchBar({ debounceTime = 300 }: SearchBarProps): JSX.Element { const theme = useTheme(); - const [inputValue, setInputValue] = useState(value ?? ''); + const [inputValue, setInputValue] = useState(value); + // Update local state when controlled value changes useEffect(() => { - if (value !== undefined && value !== inputValue) { + if (value !== inputValue) { setInputValue(value); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [value]); - useEffect(() => { - const handler = debounce((newValue: string) => { - if (onChange) { - const syntheticEvent = { - target: { value: newValue }, - persist: () => {} - } as React.ChangeEvent; + // Create synthetic event helper + const createSyntheticEvent = (value: string): React.ChangeEvent => + ({ + target: { value }, + persist: () => {} + }) as React.ChangeEvent; - onChange(syntheticEvent); - } - }, debounceTime); + // Memoize the debounced handler + const debouncedOnChange = useMemo( + () => + debounce((newValue: string) => { + onChange?.(createSyntheticEvent(newValue)); + }, debounceTime), + [onChange, debounceTime] + ); - handler(inputValue); + useEffect(() => { + if (!onChange) return; + if (inputValue === '') { + onChange(createSyntheticEvent(inputValue)); + } else { + debouncedOnChange(inputValue); + } return () => { - handler.cancel(); + debouncedOnChange.cancel(); }; - }, [inputValue, onChange, debounceTime]); + }, [inputValue, onChange, debouncedOnChange]); const handleChange = (event: React.ChangeEvent) => { - setInputValue(event.target.value); + const newValue = event.target.value; + setInputValue(newValue); }; return ( diff --git a/src/custom/index.tsx b/src/custom/index.tsx index ca9ba32b..a7505ea5 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -45,6 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList'; import UniversalFilter, { UniversalFilterProps } from './UniversalFilter'; export { CatalogCard } from './CatalogCard'; export { CatalogFilterSidebar } from './CatalogFilterSection'; +export type { FilterList } from './CatalogFilterSection'; export { StyledChartDialog } from './ChartDialog'; export { LearningContent } from './LearningContent'; export { NavigationNavbar } from './NavigationNavbar'; diff --git a/src/icons/CollapseAll/CollapseAllIcon.tsx b/src/icons/CollapseAll/CollapseAllIcon.tsx new file mode 100644 index 00000000..66afdc31 --- /dev/null +++ b/src/icons/CollapseAll/CollapseAllIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +interface CollapsAllIconProps { + height?: string; + width?: string; + fill?: string; + strokeWidth?: string; + style?: React.CSSProperties; +} + +const CollapsAllIcon: React.FC = ({ + height = '24', + width = '24', + fill = 'none', + strokeWidth = '2', + style +}) => ( + + + + +); + +export default CollapsAllIcon; diff --git a/src/icons/CollapseAll/index.tsx b/src/icons/CollapseAll/index.tsx new file mode 100644 index 00000000..dd1fa97d --- /dev/null +++ b/src/icons/CollapseAll/index.tsx @@ -0,0 +1 @@ +export { default as CollapseAllIcon } from './CollapseAllIcon'; diff --git a/src/icons/ExpandAll/ExpandAllIcon.tsx b/src/icons/ExpandAll/ExpandAllIcon.tsx new file mode 100644 index 00000000..d9e79004 --- /dev/null +++ b/src/icons/ExpandAll/ExpandAllIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +interface ExpandAllIconProps { + height?: string; + width?: string; + fill?: string; + strokeWidth?: string; + style?: React.CSSProperties; +} + +const ExpandAllIcon: React.FC = ({ + height = '24', + width = '24', + fill = 'none', + strokeWidth = '2', + style +}) => ( + + + + +); + +export default ExpandAllIcon; diff --git a/src/icons/ExpandAll/index.tsx b/src/icons/ExpandAll/index.tsx new file mode 100644 index 00000000..0f9a8c8f --- /dev/null +++ b/src/icons/ExpandAll/index.tsx @@ -0,0 +1 @@ +export { default as ExpandAllIcon } from './ExpandAllIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index 2a8522ad..c7bf87e6 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -9,6 +9,7 @@ export * from './Circle'; export * from './Clone'; export * from './Close'; export * from './Cloud'; +export * from './CollapseAll'; export * from './Column'; export * from './Component'; export * from './Configuration'; @@ -25,6 +26,7 @@ export * from './Designer'; export * from './Detail'; export * from './DropDownIcon'; export * from './Error'; +export * from './ExpandAll'; export * from './Favorite'; export * from './Filter'; export * from './Fullscreen'; @@ -45,6 +47,7 @@ export * from './Design'; export * from './Done'; export * from './Download'; export * from './Edit'; +export * from './EmptyStyle'; export * from './Environment'; export * from './ExternalLink'; export * from './Feedback';