@visns-studio/visns-components 6.21.0 → 6.23.1

package/src/components/columns/SelectFilterEditor.jsx

@@ -0,0 +1,372 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
+
+/**
+ * The grid's dropdown column filter, with one added behaviour: opening a
+ * filter that already holds a value clears that value.
+ *
+ * The complaint this answers is the everyday one — the Client filter says
+ * "Smith, John", you want a different client, and the only way to get a
+ * usable list is to hit the small × first, because the combo re-opens still
+ * carrying the old selection. Clicking the filter is already the gesture for
+ * "I want to choose again", so it now IS the clear: the chip disappears, the
+ * grid refilters as if the column were never filtered, and the menu you just
+ * opened shows the whole option list with an empty search box.
+ *
+ * ---------------------------------------------------------------------------
+ * Deliberate consequence: closing without picking leaves the filter CLEARED.
+ * There is no "restore what was there" on collapse — the click was the clear,
+ * and a filter that silently came back would make the gesture unpredictable.
+ * Re-picking the old option is one click away in the list that is already open.
+ *
+ * ---------------------------------------------------------------------------
+ * Only a DELIBERATE open clears — and that distinction has to be made here,
+ * because the combo expands on focus (`expandOnFocus`, on by default). Without
+ * the gate below, Tab-ing along the filter row would wipe every filled
+ * dropdown focus passed through, which is nobody's idea of "I clicked it".
+ * So an expand clears only when it followed, within a moment, either
+ *
+ *   - a pointer press inside this combo (a click on the field, its chip area
+ *     or its toggle arrow), or
+ *   - a key press inside this combo that means "open this / start searching"
+ *     (Enter, Space, Arrow Up/Down, F4, or a printable character).
+ *
+ * A Tab is neither: the keystroke lands on the element being left, so it is
+ * both the wrong key and outside this combo. Nothing else moves the needle —
+ * a programmatic focus, a saved view restoring a filter, or the grid's own
+ * focus handling all expand without a gesture and so leave the value alone.
+ *
+ * ---------------------------------------------------------------------------
+ * Why a wrapper and not a patch.
+ *
+ * `SelectFilter` lives in `@visns-studio/visns-datagrid-*` (the Inovua fork),
+ * which is vendor code we do not edit. Everything needed is reachable from
+ * outside it:
+ *
+ *   - `filterEditorProps` is spread straight onto the underlying `Combo`
+ *     (SelectFilter.render -> `finalProps`), so an `onExpandedChange` handed
+ *     down there is called by the combo on every expand and collapse —
+ *     mouse, keyboard and programmatic alike, since they all funnel through
+ *     `ComboBox.setExpanded()`. One interception point covers every way of
+ *     opening the list.
+ *   - The gesture behind an expand is not passed to `onExpandedChange`, and
+ *     the combo neither forwards `onClick`/`onMouseDown` (its own handlers
+ *     replace them on the root node) nor calls `props.onKeyDown` until after
+ *     it has already expanded. So the gesture is read from the page instead:
+ *     capture-phase `window` listeners record the last pointer/key press
+ *     before any React handler runs, and the expand asks what that was.
+ *   - The clear itself goes through the `SelectFilter` instance's own
+ *     `onChange`, which is exactly what the × button ends up calling: it drops
+ *     the displayed value and emits the emptied `filterValue` to the grid
+ *     (honouring `filterDelay`, as the × does). It deliberately does NOT go
+ *     through `Combo.setValue()`, which collapses the list when
+ *     `collapseOnSelect` is set — and SelectFilter always sets it, so clearing
+ *     that way would shut the menu the user just opened.
+ *
+ * The editor contract (props, the required `render` wrapper, the `setValue`
+ * the grid calls on the ref) is documented in NativeDateFilterEditor; this
+ * component forwards all of it to `SelectFilter` untouched.
+ */
+
+/**
+ * Filter editors are handed `filterEditorProps` both as a top-level prop and
+ * spread across their props (renderFilter/index.tsx `filterProps`), and it may
+ * be an object or a `(props) => object` factory — SelectFilter resolves it the
+ * same way.
+ */
+const resolveEditorProps = (props) => {
+    let { filterEditorProps } = props;
+
+    if (filterEditorProps === undefined) {
+        filterEditorProps =
+            props.filterValue && props.filterValue.filterEditorProps;
+    }
+
+    if (typeof filterEditorProps === 'function') {
+        return filterEditorProps(props) || {};
+    }
+
+    return filterEditorProps || {};
+};
+
+/**
+ * How long after a key or pointer press an expand still counts as that
+ * gesture's doing. A click expands in the same task; this is loose enough to
+ * survive a slow frame and far too tight to catch the next thing the user does.
+ */
+const GESTURE_WINDOW_MS = 700;
+
+/**
+ * Keys that mean "open this list", as opposed to Tab, which means "leave".
+ * A printable character counts too: typing into a filter is as deliberate as
+ * clicking it.
+ */
+const OPEN_KEYS = ['Enter', ' ', 'Spacebar', 'ArrowDown', 'ArrowUp', 'F4'];
+
+const isOpenKey = (event) => {
+    const { key } = event;
+
+    if (typeof key !== 'string' || key === 'Tab') {
+        return false;
+    }
+
+    if (OPEN_KEYS.indexOf(key) !== -1) {
+        return true;
+    }
+
+    return key.length === 1 && !event.ctrlKey && !event.metaKey;
+};
+
+/**
+ * The last user gesture seen anywhere on the page: `{ kind, target, at }`,
+ * where `kind` is 'open' for a press that means business and 'other' for
+ * everything else (a Tab, an Escape, a modifier).
+ */
+let lastGesture = null;
+let watching = false;
+
+/**
+ * One set of capture-phase listeners for the whole page, however many filters
+ * are on screen. Capture on `window` runs before React's delegated handlers,
+ * which is the point: the gesture is on record before the combo has decided to
+ * expand. They are passive and never removed — three listeners for the life of
+ * the page is cheaper than mounting and unmounting them per filter cell.
+ */
+const watchGestures = () => {
+    if (watching || typeof window === 'undefined') {
+        return;
+    }
+
+    watching = true;
+
+    const remember = (event, kind) => {
+        lastGesture = {
+            kind,
+            target: event.target,
+            at: Date.now(),
+        };
+    };
+
+    const options = { capture: true, passive: true };
+
+    window.addEventListener(
+        'mousedown',
+        (event) => remember(event, 'open'),
+        options
+    );
+    window.addEventListener(
+        'touchstart',
+        (event) => remember(event, 'open'),
+        options
+    );
+    window.addEventListener(
+        'keydown',
+        (event) => remember(event, isOpenKey(event) ? 'open' : 'other'),
+        options
+    );
+};
+
+/**
+ * Did the user just ask this combo to open, or did the combo open itself?
+ *
+ * `node` is the combo's own root element: a gesture outside it — the Tab press
+ * that lands on the element being left, a click elsewhere that moves focus —
+ * did not open this list, whatever else it did.
+ */
+export const openedByGesture = (
+    node,
+    gesture = lastGesture,
+    now = Date.now()
+) => {
+    if (!gesture || gesture.kind !== 'open' || !gesture.target) {
+        return false;
+    }
+
+    if (now - gesture.at > GESTURE_WINDOW_MS) {
+        return false;
+    }
+
+    return !!node && !!node.contains && node.contains(gesture.target);
+};
+
+/**
+ * "Is something actually filtered here?" — `null` is the `select` filter
+ * type's emptyValue, `''` is what DataGrid's dependent-filter reset writes,
+ * and a multi-select carries an array.
+ */
+export const hasFilterValue = (value) => {
+    if (value === null || value === undefined || value === '') {
+        return false;
+    }
+
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+
+    return true;
+};
+
+/**
+ * The whole decision, kept pure so it can be reasoned about (and tested)
+ * without a combo box.
+ *
+ * @param {boolean} expanded   the state the combo just moved to
+ * @param {boolean} openedDeliberately  the user opened it (see openedByGesture)
+ *                                      rather than focus opening it for them
+ * @param {*}       value      what the filter currently holds
+ * @param {boolean} multiple   multi-select (`operator: 'inlist'`)
+ * @param {boolean} clearOnOpen  per-column opt out (or opt in, for multiple)
+ * @param {boolean} disabled
+ * @param {boolean} readOnly
+ */
+export const shouldClearOnOpen = ({
+    expanded,
+    openedDeliberately,
+    value,
+    multiple,
+    clearOnOpen,
+    disabled,
+    readOnly,
+} = {}) => {
+    // Collapsing is not a clear, and an already-empty filter has nothing to
+    // clear — opening one must be a no-op so no needless refetch is posted.
+    if (!expanded || disabled || readOnly) {
+        return false;
+    }
+
+    // Focus alone expands the combo. That is not the user opening it, and
+    // clearing there would empty every filter a Tab travels past.
+    if (!openedDeliberately) {
+        return false;
+    }
+
+    if (clearOnOpen === false) {
+        return false;
+    }
+
+    // A multi-select is opened to ADD a choice as often as to replace one, so
+    // wiping the existing selections on open would make it impossible to pick
+    // a second value. Those columns keep the old behaviour unless a column
+    // explicitly asks for the clear with `filter.clearOnOpen: true`.
+    if (multiple && clearOnOpen !== true) {
+        return false;
+    }
+
+    return hasFilterValue(value);
+};
+
+const SelectFilterEditor = forwardRef((props, ref) => {
+    const { filterValue, emptyValue, onChange, disabled, readOnly } = props;
+
+    // Idempotent: the first filter cell on the page arms the listeners, the
+    // rest are no-ops. Done during render rather than in an effect so a combo
+    // that is clicked the instant it appears is already being watched.
+    watchGestures();
+
+    const innerRef = useRef(null);
+
+    // The grid reaches the editor through this ref: `GenericFilter.setValue`
+    // calls `setValue` on it (DataGrid's dependent-filter reset does exactly
+    // that), and `getInputRef` is read for focus handling. Both belong to the
+    // wrapped SelectFilter.
+    useImperativeHandle(
+        ref,
+        () => ({
+            setValue: (next) => {
+                if (innerRef.current && innerRef.current.setValue) {
+                    innerRef.current.setValue(next);
+                }
+            },
+            getInputRef: () =>
+                innerRef.current && innerRef.current.getInputRef
+                    ? innerRef.current.getInputRef()
+                    : null,
+        }),
+        []
+    );
+
+    // `null` is the `select` filter type's emptyValue (community-edition
+    // filterTypes.ts) and what the combo's × emits; fall back to it so a grid
+    // that does not pass the prop still clears to the same value.
+    const noValue = emptyValue === undefined ? null : emptyValue;
+
+    // Kept fresh on every render so the stable handler below always sees the
+    // current props without re-arming the combo's prop on each render.
+    const clearRef = useRef(null);
+    clearRef.current = (expanded) => {
+        const instance = innerRef.current;
+        const combo =
+            instance && instance.getInputRef && instance.getInputRef();
+        const editorProps = resolveEditorProps(props);
+
+        // The displayed value is SelectFilter's own state — with a
+        // `filterDelay` in play it is ahead of the `filterValue` prop, so it,
+        // not the prop, decides whether there is anything to clear.
+        const current =
+            instance && instance.state
+                ? instance.state.value
+                : filterValue && filterValue.value;
+
+        if (
+            !shouldClearOnOpen({
+                expanded,
+                openedDeliberately: openedByGesture(
+                    combo && combo.getComboNode ? combo.getComboNode() : null
+                ),
+                value: current,
+                multiple: editorProps.multiple,
+                clearOnOpen: editorProps.clearOnOpen,
+                disabled,
+                readOnly,
+            })
+        ) {
+            return;
+        }
+
+        if (instance && typeof instance.onChange === 'function') {
+            // The × button's path: drops the chip immediately and posts the
+            // emptied filter to the grid after `filterDelay`.
+            instance.onChange(noValue);
+        } else if (onChange) {
+            onChange({ ...filterValue, value: noValue });
+        }
+
+        // Leftover search text would filter the list the user is looking at.
+        // The combo normally clears it on select/blur, so this is a backstop;
+        // `skipFilter` avoids a redundant re-filter, and passing `null` (not
+        // `''`) keeps `clearValueOnEmpty` out of it — that path calls
+        // `Combo.setValue`, which would collapse the open menu.
+        if (combo && typeof combo.setText === 'function' && combo.getText()) {
+            combo.setText(null, { skipFilter: true });
+        }
+    };
+
+    const editorProps = resolveEditorProps(props);
+
+    // `clearOnOpen` is ours, not the combo's — and the combo hands every prop
+    // it does not recognise to a DOM node (`cleanProps` in ComboBox.render),
+    // which would put an unknown attribute on a div. Keep it out of what goes
+    // down.
+    const { clearOnOpen, ...comboProps } = editorProps;
+
+    return (
+        <SelectFilter
+            {...props}
+            ref={innerRef}
+            filterEditorProps={{
+                ...comboProps,
+                onExpandedChange: (expanded) => {
+                    if (editorProps.onExpandedChange) {
+                        editorProps.onExpandedChange(expanded);
+                    }
+
+                    clearRef.current(expanded);
+                },
+            }}
+        />
+    );
+});
+
+SelectFilterEditor.displayName = 'SelectFilterEditor';
+
+export default SelectFilterEditor;

package/src/components/controls/DataGridSearch.jsx

@@ -240,8 +240,13 @@ const DataGridSearch = ({
                 <div className={styles['icon-search']}>
                     <Search strokeWidth={2} size={14} />
                 </div>
+                {/* type="search", not "text": host apps style bare text inputs
+                    globally (throughlife's _forms.scss padded rule among them),
+                    and that padding put the magnifier on top of the placeholder.
+                    Search inputs are excluded from such rules, so the module's
+                    own matched icon-offset/indent pair applies. */}
                 <input
-                    type="text"
+                    type="search"
                     placeholder="Search"
                     value={search}
                     onChange={handleChangeSearch}