@true-engineering/true-react-common-ui-kit 4.0.0-alpha28 → 4.0.0-alpha29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha28",
+  "version": "4.0.0-alpha29",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -33,6 +33,11 @@ export const useStyles = createThemedStyles('FiltersPaneSearch', {
     },
   },
 
+  hasValue: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
   selectWrapper: {
     position: 'relative',
     display: 'flex',

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -4,6 +4,8 @@ import {
   addDataAttributes,
   addDataTestId,
   getTestId,
+  isArrayLikeNotEmpty,
+  isArrayNotEmpty,
   isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
@@ -99,6 +101,7 @@ export function FiltersPaneSearch<Value>({
       className={clsx(classes.root, {
         [classes.focused]: isInputFocused,
         [classes.disabled]: isDisabled,
+        [classes.hasValue]: isArrayLikeNotEmpty(value),
       })}
       ref={refRoot}
       {...addDataAttributes(data, testId)}
@@ -117,7 +120,7 @@ export function FiltersPaneSearch<Value>({
 
       <div className={classes.selectWrapper}>
         {/* Select block */}
-        {fields.length > 0 && (
+        {isArrayNotEmpty(fields) && (
           <div
             className={classes.selectBlock}
             onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}

package/src/components/WithPopup/WithPopup.tsx

@@ -116,13 +116,14 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   const [isOpen, setIsOpen] = useState(false);
+  const isActive = isOpen && !isDisabled;
 
   const arrowRef = useRef<SVGSVGElement>(null);
 
-  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
+  const handleToggle = (next: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
-    onToggle?.(isActive, event);
-    setIsOpen(isActive);
+    onToggle?.(next, event);
+    setIsOpen(next);
   };
 
   const handleClose = (event?: IWithPopupToggleEvent) => {
@@ -130,7 +131,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   };
 
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen && !isDisabled,
+    open: isActive,
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
@@ -177,7 +178,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : undefined,
     triggerProps: {
-      isActive: isOpen,
+      isActive,
       isDisabled,
       ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
     },
@@ -190,7 +191,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
           className={clsx(classes.trigger, {
             [classes.clickable]: eventType === 'click',
             [classes.disabled]: isDisabled,
-            [classes.active]: isOpen,
+            [classes.active]: isActive,
           })}
           {...referenceProps}
           {...addDataAttributes(data, testId)}