Merge branch 'master' of github.com:qlik-oss/nebula.js into field-mou…

…nt-promise
qlik-oss · Mar 20, 2023 · be69af1 · be69af1
2 parents 5e7a537 + 1ac8a87
commit be69af1
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 14 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBox.jsx b/apis/nucleus/src/components/listbox/ListBox.jsx
@@ -41,6 +41,7 @@ export default function ListBox({
   keyScroll = { state: {}, reset: () => {} },
   currentScrollIndex = { set: () => {} },
   renderedCallback,
+  onCtrlF,
 }) {
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState(false);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -241,6 +242,11 @@ export default function ListBox({
     setLast: (last) => setFocusListItem((prevState) => ({ ...prevState, last })),
   });
 
+  const selectAll = () => {
+    selectionState.clearItemStates(false);
+    model.selectListObjectAll('/qListObjectDef');
+  };
+
   const { List, Grid } = getListBoxComponents({
     direction,
     layout,
@@ -253,6 +259,8 @@ export default function ListBox({
     showGray,
     interactionEvents,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     isVertical,
     pages,

diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -45,7 +45,7 @@ const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding'
     [`& .${classes.listboxWrapper}`]: {
       padding: containerPadding,
     },
-    '&:focus': {
+    '&:focus:not(:hover)': {
       boxShadow: `inset 0 0 0 2px ${theme.palette.custom.focusBorder} !important`,
     },
     '&:focus-visible': {
@@ -214,6 +214,15 @@ function ListBoxInline({ options, layout }) {
     setShowSearch(newValue);
   };
 
+  const onCtrlF = () => {
+    if (search === 'toggle') {
+      onShowSearch();
+    } else {
+      const input = searchContainer.current.querySelector('input');
+      input?.focus();
+    }
+  };
+
   const getActionToolbarProps = (isPopover) =>
     getListboxActionProps({
       isPopover,
@@ -346,10 +355,10 @@ function ListBoxInline({ options, layout }) {
               visible={searchVisible}
               search={search}
               autoFocus={shouldAutoFocus}
-              searchContainerRef={searchContainerRef}
               wildCardSearch={wildCardSearch}
               searchEnabled={searchEnabled}
               direction={direction}
+              hide={showSearchIcon && onShowSearch}
             />
           </Grid>
           <Grid item xs className={classes.listboxWrapper}>
@@ -386,6 +395,7 @@ function ListBoxInline({ options, layout }) {
                     set: setCurrentScrollIndex,
                   }}
                   renderedCallback={renderedCallback}
+                  onCtrlF={onCtrlF}
                 />
               )}
             </AutoSizer>

diff --git a/apis/nucleus/src/components/listbox/ListBoxPopover.jsx b/apis/nucleus/src/components/listbox/ListBoxPopover.jsx
@@ -42,6 +42,7 @@ export default function ListBoxPopover({
   const open = show && Boolean(alignTo.current);
   const [listCount, setListCount] = useState(0);
   const theme = useTheme();
+  const searchContainerRef = useRef();
   const [model] = useSessionModel(
     {
       qInfo: {
@@ -119,6 +120,11 @@ export default function ListBoxPopover({
     selectionState,
   });
 
+  const onCtrlF = () => {
+    const input = searchContainerRef.current.querySelector('input');
+    input?.focus();
+  };
+
   const hasSelections = getHasSelections(layout);
 
   return (
@@ -171,15 +177,17 @@ export default function ListBoxPopover({
         </Grid>
         <Grid item xs>
           <div ref={moreAlignTo} />
-          <ListBoxSearch
-            visible
-            model={model}
-            listCount={listCount}
-            selections={selections}
-            selectionState={selectionState}
-            keyboard={{ enabled: false }}
-            autoFocus={autoFocus ?? true}
-          />
+          <Grid item ref={searchContainerRef}>
+            <ListBoxSearch
+              visible
+              model={model}
+              listCount={listCount}
+              selections={selections}
+              selectionState={selectionState}
+              keyboard={{ enabled: false }}
+              autoFocus={autoFocus ?? true}
+            />
+          </Grid>
           <ListBox
             model={model}
             app={app}
@@ -188,6 +196,7 @@ export default function ListBoxPopover({
             selectionState={selectionState}
             direction="ltr"
             onSetListCount={(c) => setListCount(c)}
+            onCtrlF={onCtrlF}
           />
         </Grid>
       </Grid>

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx
@@ -157,7 +157,7 @@ const RowColRoot = styled('div', {
   [`& .${classes.frequencyCount}`]: {
     justifyContent: 'flex-end',
     ...ellipsis,
-    flex: `0 1 ${frequencyWidth}px`,
+    flex: `0 1 ${frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth)}px`,
     textAlign: 'right',
     paddingLeft: '2px',
   },

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx b/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx
@@ -30,6 +30,7 @@ export default function ListBoxSearch({
   wildCardSearch = false,
   searchEnabled,
   direction,
+  hide,
 }) {
   const { translator } = useContext(InstanceContext);
   const [value, setValue] = useState('');
@@ -123,6 +124,16 @@ export default function ListBoxSearch({
         e.preventDefault();
         e.stopPropagation();
         break;
+      case 'f':
+      case 'F':
+        if (e.ctrlKey || e.metaKey) {
+          if (hide) {
+            hide();
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        break;
       default:
         break;
     }

diff --git a/...omponents/grid-list-components/__tests__/__snapshots__/grid-list-components.spec.jsx.snap b/...omponents/grid-list-components/__tests__/__snapshots__/grid-list-components.spec.jsx.snap
@@ -13,7 +13,9 @@ exports[`grid-list-components should create a Grid component 1`] = `
       "actions": {
         "cancel": [Function],
         "confirm": [Function],
+        "onCtrlF": undefined,
         "select": [MockFunction],
+        "selectAll": undefined,
         "setScrollPosition": undefined,
       },
       "checkboxes": false,
@@ -68,7 +70,9 @@ exports[`grid-list-components should create a List component 1`] = `
       "actions": {
         "cancel": [Function],
         "confirm": [Function],
+        "onCtrlF": undefined,
         "select": [MockFunction],
+        "selectAll": undefined,
         "setScrollPosition": undefined,
       },
       "checkboxes": false,

diff --git a/apis/nucleus/src/components/listbox/components/grid-list-components/grid-list-components.jsx b/apis/nucleus/src/components/listbox/components/grid-list-components/grid-list-components.jsx
@@ -22,6 +22,8 @@ export default function getListBoxComponents({
   histogram,
   isSingleSelect,
   select,
+  selectAll,
+  onCtrlF,
   textAlign,
   selections,
   keyboard,
@@ -72,6 +74,8 @@ export default function getListBoxComponents({
       confirm: () => selections?.confirm.call(selections),
       cancel: () => selections?.cancel.call(selections),
       setScrollPosition,
+      selectAll,
+      onCtrlF,
     },
     frequencyMax,
     histogram,

diff --git a/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js b/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js
@@ -1,6 +1,14 @@
 import KEYS from '../../../keys';
 
-export function getFieldKeyboardNavigation({ select, confirm, cancel, setScrollPosition, focusListItems }) {
+export function getFieldKeyboardNavigation({
+  select,
+  selectAll,
+  onCtrlF,
+  confirm,
+  cancel,
+  setScrollPosition,
+  focusListItems,
+}) {
   const getElement = (elm, next = false) => {
     const parentElm = elm && elm.parentElement[next ? 'nextElementSibling' : 'previousElementSibling'];
     return parentElm && parentElm.querySelector('[role]');
@@ -13,7 +21,7 @@ export function getFieldKeyboardNavigation({ select, confirm, cancel, setScrollP
 
   const handleKeyDown = (event) => {
     let elementToFocus;
-    const { keyCode, shiftKey = false, ctrlKey = false } = event.nativeEvent;
+    const { keyCode, shiftKey = false, ctrlKey = false, metaKey = false } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
         // This is to ensure we include the first value when starting a range selection.
@@ -66,6 +74,18 @@ export function getFieldKeyboardNavigation({ select, confirm, cancel, setScrollP
         }
         setScrollPosition?.('end');
         break;
+      case KEYS.A:
+        if (ctrlKey || metaKey) {
+          selectAll();
+          break;
+        }
+        return;
+      case KEYS.F:
+        if (ctrlKey || metaKey) {
+          onCtrlF();
+          break;
+        }
+        return;
       default:
         return; // don't stop propagation since we want to outsource keydown to other handlers.
     }

diff --git a/...ndering/listbox/listbox.spec.js-snapshots/list-frequency-histogram-js-linux.png b/...ndering/listbox/listbox.spec.js-snapshots/list-frequency-histogram-js-linux.png
diff --git a/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png b/test/rendering/listbox/listbox.spec.js-snapshots/listbox-key-scroll-linux.png