Task preset

superset-frontend/src/components/DropdownContainer/index.tsx

@@ -179,6 +179,42 @@ const DropdownContainer = forwardRef(
       [items, overflowingIndex],
     );
 
+    useEffect(() => {
+      const container = current?.children.item(0);
+      if (!container) return;
+
+      const childrenArray = Array.from(container.children);
+
+      const resizeObserver = new ResizeObserver(() => {
+        recalculateItemWidths();
+      });
+
+      childrenArray.map(child => resizeObserver.observe(child));
+
+      // eslint-disable-next-line consistent-return
+      return () => {
+        childrenArray.map(child => resizeObserver.unobserve(child));
+        resizeObserver.disconnect();
+      };
+    }, [items.length]);
+
+    // callback to update item widths so that the useLayoutEffect runs whenever
+    // width of any of the child changes
+    const recalculateItemWidths = () => {
+      const container = current?.children.item(0);
+      if (container) {
+        const { children } = container;
+        const childrenArray = Array.from(children);
+
+        const currentWidths = childrenArray.map(
+          child => child.getBoundingClientRect().width,
+        );
+
+        // Update state with new widths
+        setItemsWidth(currentWidths);
+      }
+    };
+
     useLayoutEffect(() => {
       if (popoverVisible) {
         return;

superset-frontend/src/components/Select/Select.tsx

@@ -89,6 +89,7 @@ import { customTagRender } from './CustomTag';
 const Select = forwardRef(
   (
     {
+      className,
       allowClear,
       allowNewOptions = false,
       allowSelectAll = true,
@@ -121,6 +122,7 @@ const Select = forwardRef(
       getPopupContainer,
       oneLine,
       maxTagCount: propsMaxTagCount,
+
       ...props
     }: SelectProps,
     ref: RefObject<HTMLInputElement>,
@@ -604,7 +606,7 @@ const Select = forwardRef(
     };
 
     return (
-      <StyledContainer headerPosition={headerPosition}>
+      <StyledContainer className={className} headerPosition={headerPosition}>
         {header && (
           <StyledHeader headerPosition={headerPosition}>{header}</StyledHeader>
         )}

superset-frontend/src/components/Select/types.ts

@@ -72,6 +72,10 @@ export type AntdExposedProps = Pick<
 export type SelectOptionsType = Exclude<AntdProps['options'], undefined>;
 
 export interface BaseSelectProps extends AntdExposedProps {
+  /**
+   * Optional CSS class name to apply to the select container
+   */
+  className?: string;
   /**
    * It enables the user to create new options.
    * Can be used with standard or async select types.

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx

@@ -109,7 +109,9 @@ const HorizontalOverflowFilterControlContainer = styled(
   }
 `;
 
-const VerticalFormItem = styled(StyledFormItem)`
+const VerticalFormItem = styled(StyledFormItem)<{
+  inverseSelection: boolean;
+}>`
   .ant-form-item-label {
     overflow: visible;
     label.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
@@ -118,9 +120,19 @@ const VerticalFormItem = styled(StyledFormItem)`
       }
     }
   }
+
+  .select-container {
+    ${({ inverseSelection }) =>
+      inverseSelection &&
+      `
+      width: 140px;
+    `}
+  }
 `;
 
-const HorizontalFormItem = styled(StyledFormItem)`
+const HorizontalFormItem = styled(StyledFormItem)<{
+  inverseSelection: boolean;
+}>`
   && {
     margin-bottom: 0;
     align-items: center;
@@ -142,7 +154,15 @@ const HorizontalFormItem = styled(StyledFormItem)`
   }
 
   .ant-form-item-control {
-    width: ${({ theme }) => theme.gridUnit * 41}px;
+    width: ${({ inverseSelection }) => (inverseSelection ? 252 : 164)}px;
+  }
+
+  .select-container {
+    ${({ inverseSelection, theme }) =>
+      inverseSelection &&
+      `
+      width: 164px;
+    `}
   }
 `;
 
@@ -151,31 +171,41 @@ const HorizontalOverflowFormItem = VerticalFormItem;
 const useFilterControlDisplay = (
   orientation: FilterBarOrientation,
   overflow: boolean,
+  inverseSelection: boolean,
 ) =>
   useMemo(() => {
     if (orientation === FilterBarOrientation.Horizontal) {
       if (overflow) {
         return {
           FilterControlContainer: HorizontalOverflowFilterControlContainer,
-          FormItem: HorizontalOverflowFormItem,
+          FormItem: (props: any) => (
+            <HorizontalOverflowFormItem
+              {...props}
+              inverseSelection={inverseSelection}
+            />
+          ),
           FilterControlTitleBox: HorizontalOverflowFilterControlTitleBox,
           FilterControlTitle: HorizontalOverflowFilterControlTitle,
         };
       }
       return {
         FilterControlContainer: HorizontalFilterControlContainer,
-        FormItem: HorizontalFormItem,
+        FormItem: (props: any) => (
+          <HorizontalFormItem {...props} inverseSelection={inverseSelection} />
+        ),
         FilterControlTitleBox: HorizontalFilterControlTitleBox,
         FilterControlTitle: HorizontalFilterControlTitle,
       };
     }
     return {
       FilterControlContainer: VerticalFilterControlContainer,
-      FormItem: VerticalFormItem,
+      FormItem: (props: any) => (
+        <VerticalFormItem {...props} inverseSelection={inverseSelection} />
+      ),
       FilterControlTitleBox: VerticalFilterControlTitleBox,
       FilterControlTitle: VerticalFilterControlTitle,
     };
-  }, [orientation, overflow]);
+  }, [orientation, overflow, inverseSelection]);
 
 const ToolTipContainer = styled.div`
   font-size: ${({ theme }) => theme.typography.sizes.m}px;
@@ -243,13 +273,14 @@ const FilterControl = ({
     checkIsMissingRequiredValue(filter, filter.dataMask?.filterState);
   const validateStatus = isMissingRequiredValue ? 'error' : undefined;
   const isRequired = !!filter.controlValues?.enableEmptyFilter;
+  const inverseSelection = !!filter.controlValues?.inverseSelection;
 
   const {
     FilterControlContainer,
     FormItem,
     FilterControlTitleBox,
     FilterControlTitle,
-  } = useFilterControlDisplay(orientation, overflow);
+  } = useFilterControlDisplay(orientation, overflow, inverseSelection);
 
   const label = useMemo(
     () => (