@linzjs/step-ag-grid 6.1.0 → 7.0.0

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -19,7 +19,7 @@ export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow>
 export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
   props: GridSubComponentTextAreaProps<RowType>,
 ): JSX.Element => {
-  const { value, data, setValue, setValid } = useContext(GridSubComponentContext);
+  const { value, data, setValue, setValid, context } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press tab to save";
 
@@ -28,7 +28,7 @@ export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
     if (value == null) setValue(props.defaultValue);
   }, [props.defaultValue, setValue, value]);
 
-  const invalid = useCallback(() => TextInputValidator(props, value, data), [data, props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data, context), [data, props, value, context]);
 
   useEffect(() => {
     setValid(value != null && invalid() == null);

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -17,7 +17,7 @@ export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
 export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
   props: GridFormSubComponentTextInputProps<RowType>,
 ): JSX.Element => {
-  const { value, setValue, setValid, data } = useContext(GridSubComponentContext);
+  const { value, setValue, setValid, data, context } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
@@ -26,7 +26,7 @@ export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
     if (value == null) setValue(props.defaultValue);
   }, [props.defaultValue, setValue, value]);
 
-  const invalid = useCallback(() => TextInputValidator(props, value, data), [data, props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data, context), [context, data, props, value]);
 
   useEffect(() => {
     setValid(value != null && invalid() == null);
@@ -40,9 +40,7 @@ export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
       helpText={helpText}
       autoFocus={true}
       placeholder={props.placeholder}
-      style={{
-        width: "100%",
-      }}
+      style={{ width: "100%" }}
     />
   );
 };

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
@@ -17,30 +17,30 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
 
 export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
   const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
-  const [value, setValue] = useState(initialVale != null ? `${initialVale}` : "");
+
+  const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
+  const [value, setValue] = useState(initValue);
 
   const helpText = props.helpText ?? "Press tab to save";
 
-  const invalid = useCallback(() => TextInputValidator(props, value, data), [props, value, data]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data, {}), [props, value, data]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      if (initialVale === (value ?? "")) return true;
+      if (invalid()) return false;
+
+      const trimmedValue = value.trim();
+      // No change, so don't save
+      if (initValue === trimmedValue) return true;
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, value);
+        return await props.onSave(selectedRows, trimmedValue);
       }
 
-      if (field == null) {
-        console.error("ColDef has no field set");
-        return false;
-      }
-      selectedRows.forEach((row) => {
-        row[field] = value as any;
-      });
+      selectedRows.forEach((row) => (row[field] = trimmedValue as any));
       return true;
     },
-    [initialVale, value, props, field],
+    [invalid, value, initValue, props, field],
   );
 
   const { popoverWrapper } = useGridPopoverHook({

package/src/components/gridForm/GridFormTextInput.tsx

@@ -24,26 +24,21 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
   const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
-  const invalid = useCallback(() => TextInputValidator<RowType>(props, value, data), [data, props, value]);
+  const invalid = useCallback(() => TextInputValidator<RowType>(props, value, data, {}), [data, props, value]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
 
       const trimmedValue = value.trim();
+      // No change, so don't save
       if (initValue === trimmedValue) return true;
 
       if (props.onSave) {
         return await props.onSave(selectedRows, trimmedValue);
       }
 
-      if (field == null) {
-        console.error("ColDef has no field set");
-        return false;
-      }
-      selectedRows.forEach((row) => {
-        row[field] = trimmedValue as any;
-      });
+      selectedRows.forEach((row) => (row[field] = trimmedValue as any));
       return true;
     },
     [invalid, value, initValue, props, field],

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -3,15 +3,15 @@ import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
-export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType>(
+export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormMultiSelectProps<RowType, ValueType>>,
+  props: GenericCellEditorProps<GridFormMultiSelectProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell(colDef, {
     editor: GridFormMultiSelect,
     ...props,
     editorParams: {
       className: "GridMultiSelect-containerMedium",
-      ...(props.editorParams as GridFormMultiSelectProps<RowType, ValueType>),
+      ...(props.editorParams as GridFormMultiSelectProps<RowType>),
     },
   });

package/src/contexts/GridSubComponentContext.ts

@@ -6,6 +6,7 @@ export interface GridSubComponentContextType {
   setValue: (value: string) => void;
   setValid: (valid: boolean) => void;
   triggerSave: () => Promise<void>;
+  context: any;
 }
 
 export const GridSubComponentContext = createContext<GridSubComponentContextType>({
@@ -20,4 +21,5 @@ export const GridSubComponentContext = createContext<GridSubComponentContextType
   triggerSave: async () => {
     console.error("GridSubComponentContext triggerSave no context");
   },
+  context: null,
 });

package/src/lui/ActionButton.tsx

@@ -16,6 +16,7 @@ export interface ActionButtonProps {
   title?: string;
   dataTestId?: string;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
+  iconPosition?: "left" | "right";
   className?: string;
   onAction: () => Promise<void> | void;
   // Used for external code to get access to whether action is in progress
@@ -36,6 +37,7 @@ export const ActionButton = ({
   onAction,
   externalSetInProgress,
   size = "sm",
+  iconPosition = "left",
   level = "tertiary",
   "aria-label": ariaLabel,
 }: ActionButtonProps): JSX.Element => {
@@ -48,6 +50,14 @@ export const ActionButton = ({
     inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
   }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
 
+  const buttonText = (
+    <span className={"ActionButton-minimalArea"}>
+      <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>
+      {/* This makes sure the button expands to fill maximum length text at all times */}
+      <span className={"ActionButton-minimalAreaExpand"}>{name}</span>
+    </span>
+  );
+
   return (
     <LuiButton
       data-testid={dataTestId}
@@ -55,7 +65,7 @@ export const ActionButton = ({
       level={level}
       title={title ?? ariaLabel ?? name}
       aria-label={ariaLabel ?? name}
-      className={clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
+      className={clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
       size={"lg"}
       style={name == null ? { padding: "8px 5px" } : {}}
       onClick={async () => {
@@ -71,24 +81,32 @@ export const ActionButton = ({
       }}
       disabled={localInProgress}
     >
+      {iconPosition === "right" && buttonText}
       {localInProgress ? (
         <LuiMiniSpinner
           size={16}
           divProps={{
             "data-testid": "loading-spinner",
-            style: { margin: 0, paddingRight: 5, paddingLeft: 3, paddingBottom: 0, paddingTop: 0 },
+            style: {
+              margin: 0,
+              paddingRight: 5,
+              paddingLeft: 3,
+              paddingBottom: 0,
+              paddingTop: 0,
+            },
             role: "status",
             "aria-label": "Loading",
           }}
         />
       ) : (
-        <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
+        <LuiIcon
+          name={icon}
+          alt={ariaLabel ?? name ?? ""}
+          size={size}
+          spanProps={{ style: iconPosition === "right" ? { transform: "scaleX(-1)" } : {} }}
+        />
       )}
-      <span className={"ActionButton-minimalArea"}>
-        <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>
-        {/* This makes sure the button expands to fill maximum length text at all times */}
-        <span className={"ActionButton-minimalAreaExpand"}>{name}</span>
-      </span>
+      {iconPosition === "left" && buttonText}
     </LuiButton>
   );
 };

package/src/lui/FormError.scss

@@ -0,0 +1,7 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+
+.helpText {
+  font-size: 0.75rem;
+  color: colors.$fuscous;
+  font-weight: 400;
+}

package/src/lui/FormError.tsx

@@ -1,29 +1,20 @@
-import { LuiIcon } from "@linzjs/lui";
+import "./FormError.scss";
 
 export interface FormErrorProps {
   helpText?: string;
-  error?: string | boolean | null;
+  error?: JSX.Element | string | boolean | null;
 }
 
 export const FormError = (props: FormErrorProps) => {
   return (
     <>
       {props.error && (
-        <span className="LuiTextInput-error">
-          <LuiIcon alt="error" name="ic_error" className="LuiTextInput-error-icon" size="sm" status="error" />
+        <span className="LuiTextInput-error" style={{ paddingLeft: 0 }}>
           {props.error}
         </span>
       )}
 
-      {props.helpText && !props.error && (
-        <span
-          style={{
-            fontSize: "0.7rem",
-          }}
-        >
-          {props.helpText}
-        </span>
-      )}
+      {props.helpText && !props.error && <span className={"helpText"}>{props.helpText}</span>}
     </>
   );
 };

package/src/lui/TextAreaInput.tsx

@@ -17,7 +17,7 @@ export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaE
   label?: JSX.Element | string;
   mandatory?: boolean;
   helpText?: string;
-  error?: string | boolean | null;
+  error?: JSX.Element | string | boolean | null;
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {

package/src/lui/TextInputFormatted.tsx

@@ -12,7 +12,7 @@ export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes
 
   // Custom fields
   helpText?: string;
-  error?: string | boolean | null;
+  error?: JSX.Element | string | boolean | null;
   formatted?: string;
 }
 

package/src/react-menu3/components/ControlledMenu.tsx

@@ -137,7 +137,8 @@ export const ControlledMenuFr = (
       if (activeElement !== firstInputEl && activeElement !== lastInputEl) return;
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
-      const suppressEnterAutoSave = activeElement.getAttribute("data-disableEnterAutoSave") || isTextArea;
+      const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautoSave") || isTextArea;
+      const allowTabToSave = activeElement.getAttribute("data-allowtabtoSave");
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;
         saveButtonRef.current?.setAttribute("data-reason", reason);
@@ -147,7 +148,7 @@ export const ControlledMenuFr = (
       switch (activeElement.nodeName) {
         case "TEXTAREA":
         case "INPUT": {
-          if (activeElement === lastInputEl && activeElement === firstInputEl) {
+          if ((activeElement === lastInputEl && activeElement === firstInputEl) || allowTabToSave) {
             if (ev.key === "Tab") {
               // Can't forward/backwards tab out of popup
               ev.preventDefault();

package/src/react-menu3/components/MenuList.tsx

@@ -7,6 +7,7 @@ import {
   CloseReason,
   commonProps,
   floatEqual,
+  focusFirstInput,
   FocusPositions,
   getScrollAncestor,
   getTransition,
@@ -380,18 +381,7 @@ export const MenuList = ({
           if (!menuRef.current.contains(document.activeElement)) {
             // Handle popover portal focus
             const popupElement = focusRef.current?.nextSibling;
-            if (popupElement instanceof Element) {
-              const input = popupElement.querySelectorAll("input,textarea")[0] as HTMLElement;
-              if (input) {
-                input.focus();
-                // Text areas should start at end
-                if (input instanceof HTMLTextAreaElement) {
-                  input.selectionStart = input.value.length;
-                }
-              } else {
-                focusRef.current?.focus();
-              }
-            } else {
+            if (!focusFirstInput(popupElement)) {
               focusRef.current?.focus();
             }
             setItemFocus();

package/src/react-menu3/hooks/useItems.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, MutableRefObject } from "react";
-import { HoverActionTypes, indexOfNode } from "../utils";
+import { focusFirstInput, HoverActionTypes, indexOfNode } from "../utils";
 import { FocusPosition } from "../types";
 
 export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObject<any> | undefined) => {
@@ -84,16 +84,19 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
           index++;
           if (index >= items.length) index = 0;
           newItem = items[index];
+          focusFirstInput(newItem);
           break;
 
-        case HoverActionTypes.DECREASE:
+        case HoverActionTypes.DECREASE: {
           sortItems();
           index = hoverIndex;
           if (index < 0) index = items.indexOf(item);
           index--;
           if (index < 0) index = items.length - 1;
           newItem = items[index];
+          focusFirstInput(newItem);
           break;
+        }
 
         default:
           if (process.env.NODE_ENV !== "production")

package/src/react-menu3/utils/utils.ts

@@ -86,3 +86,18 @@ export function commonProps(isDisabled?: boolean, isHovering?: boolean) {
 }
 
 export const indexOfNode = (nodeList: NodeListOf<Node>, node: Node) => findIndex(nodeList, node);
+
+export const focusFirstInput = (container: any) => {
+  if (!(container instanceof Element)) return false;
+  const inputs = container.querySelectorAll("input[type='text'],textarea");
+  const input = inputs[0];
+  if (input instanceof HTMLElement) {
+    input.focus();
+    // Text areas should start at end
+    if (input instanceof HTMLTextAreaElement) {
+      input.selectionStart = input.value.length;
+    }
+    return true;
+  }
+  return false;
+};

package/src/stories/components/ActionButton.stories.tsx

@@ -19,7 +19,16 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
   return (
     <>
       <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={performAction} />
+      <br />
       <ActionButton icon={"ic_add"} aria-label={"Add new row"} onAction={performAction} level={"primary"} />
+      <br />
+      <ActionButton
+        icon={"ic_arrow_back"}
+        name={"Continue"}
+        onAction={performAction}
+        iconPosition={"right"}
+        level={"secondary"}
+      />
     </>
   );
 };

package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -8,12 +8,13 @@ import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextP
 import { GridContextProvider } from "../../contexts/GridContextProvider";
 import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
-import { wait } from "../../utils/util";
+import { MenuHeaderItem, MenuSeparator } from "../../components/gridForm/GridFormDropDown";
 import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
-import { partition } from "lodash-es";
+import { isEmpty, partition } from "lodash-es";
+import { wait } from "../../utils/util";
+import { MultiSelectOption } from "../../components/gridForm/GridFormMultiSelect";
 
 export default {
   title: "Components / Grids",
@@ -37,7 +38,7 @@ export default {
 
 interface ITestRow {
   id: number;
-  position: string | null;
+  position: string[] | null;
   position2: string | null;
   position3: string | null;
 }
@@ -46,6 +47,15 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
   const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {
+    const positionMap: Record<string, string> = {
+      lot1: "Lot 1",
+      lot2: "Lot 2",
+      lot3: "Lot 3",
+      lot4: "Lot A 482392",
+      appA: "A",
+      appB: "B",
+      other: "Other",
+    };
     const positionTwoMap: Record<string, string> = {
       "1": "One",
       "2": "Two",
@@ -62,8 +72,12 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
         {
           field: "position",
           initialWidth: 65,
-          maxWidth: 300,
+          maxWidth: 250,
           headerName: "Position",
+          valueFormatter: ({ value }) => {
+            if (value == null) return "";
+            return value.map((v: string) => positionMap[v] ?? v).join(", ");
+          },
         },
         {
           multiEdit: true,
@@ -72,11 +86,14 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
             filterPlaceholder: "Filter position",
             className: "GridMultiSelect-containerUnlimited",
             options: [
-              { value: "a", label: "Architect" },
-              { value: "b", label: "Developer" },
-              { value: "c", label: "Product Owner" },
-              { value: "d", label: "Scrum Master" },
-              { value: "e", label: "Tester" },
+              MenuHeaderItem("Header item"),
+              { value: "lot1", label: "Lot 1" },
+              { value: "lot2", label: "Lot 2" },
+              { value: "lot3", label: "Lot 3" },
+              { value: "lot11", label: "Lot 11" },
+              { value: "lot4", label: "Lot A 482392" },
+              { value: "appA", label: "A" },
+              { value: "appB", label: "B" },
               MenuSeparator,
               {
                 value: "other",
@@ -84,16 +101,76 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
                 subComponent: () => <GridFormSubComponentTextArea required={true} maxLength={5} defaultValue={""} />,
               },
             ],
-            initialSelectedValues: () => ({
-              other: "Hello",
-            }),
             onSave: async (selectedRows, selectedOptions) => {
               // eslint-disable-next-line no-console
               console.log("multiSelect result", { selectedRows, selectedOptions });
 
               await wait(1000);
               const [subValues, normalValues] = partition(selectedOptions, (o) => o.subComponent);
-              const newValue = [...normalValues.map((o) => o.label), ...subValues.map((o) => o.subValue)].join(", ");
+              const newValue = [...normalValues.map((o) => o.value), ...subValues.map((o) => o.subValue)];
+              selectedRows.forEach((row) => (row.position = newValue));
+              return true;
+            },
+          },
+        },
+      ),
+      GridPopoutEditMultiSelect(
+        {
+          field: "position",
+          initialWidth: 65,
+          maxWidth: 250,
+          headerName: "Parcel picker",
+          valueFormatter: ({ value }) => {
+            if (value == null) return "";
+            return value.map((v: string) => positionMap[v] ?? v).join(", ");
+          },
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            filtered: true,
+            filterPlaceholder: "Filter/add custom parcel...",
+            filterHelpText: (filter, options) =>
+              isEmpty(filter) || options.find((o) => o.label && o.label.toLowerCase() === filter.toLowerCase())
+                ? undefined
+                : "Press enter to add free text",
+            onSelectFilter: async (filter, options) => {
+              if (isEmpty(filter) || options.find((o) => o.label && o.label.toLowerCase() === filter.toLowerCase()))
+                return;
+              options.push({ value: filter, label: filter, filter: "freeText", checked: true });
+            },
+            className: "GridMultiSelect-containerLarge",
+            headers: [{ header: "Free text", filter: "freeText" }, { header: "Parcels" }],
+            options: (selectedRows) => {
+              const firstRow = selectedRows[0];
+              const r: MultiSelectOption[] = [
+                { value: "lot1", label: "Lot 1" },
+                { value: "lot2", label: "Lot 2" },
+                { value: "lot3", label: "Lot 3" },
+                { value: "lot11", label: "Lot 11" },
+                { value: "lot4", label: "Lot A 482392" },
+                { value: "appA", label: "A" },
+                { value: "appB", label: "B" },
+              ].map((r) => ({ ...r, checked: firstRow.position?.includes(r.value) }));
+              firstRow.position?.forEach(
+                (p) =>
+                  !(p in positionMap) &&
+                  r.push({
+                    value: p,
+                    label: p,
+                    checked: true,
+                    filter: "freeText",
+                  }),
+              );
+              return r;
+            },
+            onSave: async (selectedRows, selectedOptions) => {
+              // eslint-disable-next-line no-console
+              console.log("multiSelect result", { selectedRows, selectedOptions });
+
+              await wait(1000);
+              const [subValues, normalValues] = partition(selectedOptions, (o) => o.subComponent);
+              const newValue = [...normalValues.map((o) => o.value), ...subValues.map((o) => o.subValue)];
               selectedRows.forEach((row) => (row.position = newValue));
               return true;
             },
@@ -113,7 +190,6 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
           editorParams: {
             filtered: true,
             filterPlaceholder: "Filter position",
-            initialSelectedValues: (selectedRows) => [selectedRows[0].position2],
             options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
             onSave: async (selectedRows, selectedOptions) => {
               // eslint-disable-next-line no-console
@@ -128,8 +204,8 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
   }, []);
 
   const [rowData] = useState([
-    { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
-    { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+    { id: 1000, position: ["lot1", "lot2"], position2: "lot1", position3: "Tester" },
+    { id: 1001, position: ["appA"], position2: "lot2", position3: "Developer" },
   ] as ITestRow[]);
 
   return (

package/src/styles/Grid.scss

@@ -39,3 +39,15 @@
   padding: 4px 8px;
   max-width: 400px;
 }
+
+.ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
+  visibility: hidden;
+}
+
+.ag-cell:hover .Grid-displayWhenCellFocused {
+  visibility: inherit;
+}
+
+.ag-cell-wrapper {
+  width: 100%;
+}

package/src/styles/lui-overrides.scss

@@ -32,8 +32,6 @@
 
   /** Free text input */
   .free-text-input {
-    border: transparent;
-    outline: transparent;
     line-height: 33px;
     padding-left: 4px;
   }

package/src/utils/textMatcher.ts

@@ -0,0 +1,31 @@
+import { isEmpty } from "lodash-es";
+import { isMatch } from "matcher";
+
+/**
+ * Text matching with wildcards and multiple matchers.
+ *
+ * "L" => L*
+ * "L*" => L*
+ * "*L*" => *L*
+ * "*L" => *L
+ * "A B" => A* and B*
+ * "A B, C" => (A* and B*) or C*
+ *
+ * Returns ture if there's a text match.
+ */
+export const textMatch = (text: string | undefined | null, filter: string): boolean => {
+  if (text == null) return true;
+
+  const superFilters = filter
+    .split(",")
+    .map((sf) => sf.trim())
+    .filter((sf) => sf);
+  const values = text.replaceAll(",", " ").trim().split(/\s+/);
+  return (
+    isEmpty(superFilters) || // Not filtered
+    superFilters.some((superFilter) => {
+      const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, "\\$1"));
+      return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));
+    })
+  );
+};