Follow up of #14 (#18)

* Add missing event in react wrappers

* Fix data grid

* Update demo

* Add typing for anchored region and tooltip properties

Author: fcollonval

packages/components/src/data-grid/data-grid-cell.styles.ts

@@ -7,7 +7,6 @@ import {
   bodyFont,
   controlCornerRadius,
   designUnit,
-  focusStrokeOuter,
   focusStrokeWidth,
   neutralForegroundRest,
   strokeWidth,

packages/components/src/data-grid/data-grid.stories.ts

@@ -60,33 +60,6 @@ const Template = (
   //     </jp-data-grid-row>
   //     </jp-data-grid>`;
 
-  //   const container = document.createElement('div');
-  //   container.innerHTML =
-  //     '<jp-data-grid id="basic-grid" generate-header="sticky" aria-label="With Sticky Header"></jp-data-grid>';
-  //   const grid = container.firstChild as DataGrid;
-
-  //   grid.rowsData = [
-  //     {
-  //       Header1: 'Data 1 1',
-  //       Header2: 'Data 2 1',
-  //       Header3: 'Data 3 1',
-  //       Header4: 'Cell Data 4 1'
-  //     },
-  //     {
-  //       Header1: 'Data 1 2',
-  //       Header2: 'Data 2 2',
-  //       Header3: 'Data 3 2',
-  //       Header4: 'Cell Data 4 2'
-  //     },
-  //     {
-  //       Header1: 'Data 1 3',
-  //       Header2: 'Data 2 3',
-  //       Header3: 'Data 3 3',
-  //       Header4: 'Cell Data 4 3'
-  //     }
-  //   ];
-  //   return grid;
-
   return '<jp-data-grid id="basic-grid" generate-header="sticky" aria-label="With Sticky Header"></jp-data-grid>';
 };
 

packages/lab-example/src/index.tsx

@@ -92,25 +92,58 @@ const plugin: JupyterFrontEndPlugin<void> = {
       };
       return f;
     };
+    const eventListener = (name: string, emitAlert = false) => {
+      const f = (event: Event) => {
+        console.log(event);
+        if (emitAlert) {
+          alert(`${name} event: ${event.type}`);
+        }
+      };
+      return f;
+    };
     const buttons = widget.node.querySelectorAll('jp-button');
     buttons.forEach(button => {
       button.addEventListener('click', clickListener);
     });
     const search = widget.node.querySelector('jp-search');
     search?.addEventListener('change', changeListener('Search'));
     search?.addEventListener('input', changeConsoleListener('Search'));
+
     const textField = widget.node.querySelector('jp-text-field');
     textField?.addEventListener('change', changeListener('Text field'));
+    textField?.addEventListener('input', changeListener('Text field'));
+
     const numberField = widget.node.querySelector('jp-number-field');
     numberField?.addEventListener('change', changeListener('Number field'));
+    numberField?.addEventListener('input', changeListener('Number field'));
+
     const select = widget.node.querySelector('jp-select');
     select?.addEventListener('change', changeListener('Select'));
+
     const combobox = widget.node.querySelector('jp-combobox');
     combobox?.addEventListener('change', changeListener('Combobox'));
     combobox?.addEventListener('input', changeConsoleListener('Combobox'));
+
     const slider = widget.node.querySelector('jp-slider');
     slider?.addEventListener('change', changeConsoleListener('Slider'));
 
+    const checkbox = widget.node.querySelectorAll('jp-checkbox');
+    checkbox.forEach(box => {
+      box.addEventListener('change', eventListener('Checkbox', true));
+    });
+
+    const tooltip = widget.node.querySelector('jp-tooltip');
+    tooltip?.addEventListener('dismiss', eventListener('Tooltip'));
+
+    const tabs = widget.node.querySelector('jp-tabs');
+    tabs?.addEventListener('change', eventListener('Tabs'));
+
+    const treeItems = widget.node.querySelectorAll('jp-tree-item');
+    treeItems.forEach(item => {
+      item.addEventListener('selected-change', eventListener('Tree Item'));
+      item.addEventListener('expanded-change', eventListener('Tree Item'));
+    });
+
     const dataRef = React.createRef<WebDataGrid>();
     const reactWidget = ReactWidget.create(<Artwork dataRef={dataRef} />);
     reactWidget.addClass('jp-Artwork');
@@ -122,22 +155,25 @@ const plugin: JupyterFrontEndPlugin<void> = {
       app.shell.add(reactWidget, 'main', { mode: 'split-bottom' });
       app.shell.activateById(widget.id);
 
-      const loadTableData = setInterval(() => {
-        const dataGrid: WebDataGrid | null =
-          widget.node.querySelector('#basic-grid');
-        if (dataGrid?.isConnected) {
-          clearInterval(loadTableData);
-          dataGrid.rowsData = TABLE_DATA;
-          if (dataRef.current) {
-            dataRef.current.rowsData = TABLE_DATA;
-          }
+      const dataGrid: WebDataGrid | null =
+        widget.node.querySelector('#basic-grid');
+      if (dataGrid?.isConnected) {
+        dataGrid.rowsData = TABLE_DATA;
+        if (dataRef.current) {
+          dataRef.current.rowsData = TABLE_DATA;
         }
-      }, 100);
+      }
     });
   }
 };
 
 function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
+  const tooltipAnchor = React.useRef<HTMLElement>(null);
+
+  const onEvent = (event: any) => {
+    console.log(event);
+    alert(`Got a React event: ${event.type}`);
+  };
   const onChange = (event: any) => {
     alert(`React on React change event: ${event?.target?.value}`);
   };
@@ -208,9 +244,13 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         </RadioGroup> */}
         <div className="jp-FlexColumn">
           <label>Checkboxes</label>
-          <Checkbox checked>Label</Checkbox>
-          <Checkbox checked>Label</Checkbox>
-          <Checkbox disabled>Label</Checkbox>
+          <Checkbox onChange={onEvent} checked>
+            Label
+          </Checkbox>
+          <Checkbox onChange={onEvent}>Label</Checkbox>
+          <Checkbox onChange={onEvent} disabled>
+            Label
+          </Checkbox>
         </div>
         {/* <div>
           <Tag>Tag</Tag>
@@ -235,14 +275,15 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         </div>
         <div className="jp-FlexColumn">
           <label>Tooltip</label>
-          <Tooltip anchor="anchored-react-button">React tooltip</Tooltip>
-          <Button id="anchored-react-button">Anchor</Button>
+          {/* The tooltip component needs to be placed after the anchor so the reference is defined */}
+          <Button ref={tooltipAnchor}>Anchor</Button>
+          <Tooltip anchorElement={tooltipAnchor.current}>React tooltip</Tooltip>
         </div>
       </div>
       <div className="jp-FlexColumn" style={{ gridColumn: 4 }}>
         <DataGrid ref={props.dataRef}></DataGrid>
 
-        <Tabs>
+        <Tabs onChange={onEvent}>
           <Tab id="one">One</Tab>
           <Tab id="two">Two</Tab>
           <Tab id="three">Three</Tab>
@@ -252,7 +293,8 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
         </Tabs>
 
         <TreeView>
-          <TreeItem>
+          {/* @ts-expect-error unknown event onExpand */}
+          <TreeItem onSelect={onEvent} onExpand={onEvent}>
             Root item 1
             <TreeItem expanded>
               Flowers
@@ -340,8 +382,8 @@ function createNode(): HTMLElement {
       -->
       <div class="jp-FlexColumn">
         <label>Checkboxes</label>
-        <jp-checkbox autofocus checked>Label</jp-checkbox>
         <jp-checkbox checked>Label</jp-checkbox>
+        <jp-checkbox>Label</jp-checkbox>
         <jp-checkbox disabled>Label</jp-checkbox>
       </div>
       <!--

packages/react-components/src/anchored-region/index.tsx

@@ -37,6 +37,14 @@ export const AnchoredRegion: React.DetailedHTMLFactory<
     'vertical-scaling'?: 'anchor' | 'fill' | 'content';
     'fixed-placement'?: boolean;
     'auto-update-mode'?: 'anchor' | 'auto';
+    /**
+     * @property
+     */
+    anchorElement?: HTMLElement | null;
+    /**
+     * @property
+     */
+    viewportElement?: HTMLElement | null;
   },
   HTMLElement
 > = wrap(jpAnchoredRegion()) as any;

packages/react-components/src/checkbox/index.tsx

@@ -19,6 +19,6 @@ export const Checkbox: React.DetailedHTMLFactory<
     readonly?: boolean;
   },
   HTMLElement
-> = wrap(jpCheckbox()) as any;
+> = wrap(jpCheckbox(), { events: { onChange: 'change' } }) as any;
 // @ts-expect-error unknown property
 Checkbox.displayName = 'Jupyter.Checkbox';

packages/react-components/src/combobox/index.tsx

@@ -20,6 +20,11 @@ export const Combobox: React.DetailedHTMLFactory<
     value?: 'string';
   },
   HTMLElement
-> = wrap(jpCombobox()) as any;
+> = wrap(jpCombobox(), {
+  events: {
+    onChange: 'change',
+    onInput: 'input'
+  }
+}) as any;
 // @ts-expect-error unknown property
 Combobox.displayName = 'Jupyter.Combobox';

packages/react-components/src/data-grid/index.tsx

@@ -12,23 +12,19 @@ import React from 'react';
 
 const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
 
-export const DataGrid: React.DetailedHTMLFactory<
-  React.HTMLAttributes<HTMLElement> & {
-    'generate-header'?: 'none' | 'default' | 'sticky';
-    'grid-template-columns'?: 'string';
-  },
-  HTMLElement
-> = wrap(jpDataGrid()) as any;
-// @ts-expect-error unknown property
-DataGrid.displayName = 'Jupyter.DataGrid';
+// WARNING The wrapping needs to be called in order (from bottom to top DOM elements)
+// Otherwise during the wrapping the tag for sub elements won't be resolved and this
+// will contaminate the standard web component.
 
 export const DataGridCell: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {
     'cell-type'?: 'default' | 'columnheader' | 'rowheader';
     'grid-column'?: string;
   },
   HTMLElement
-> = wrap(jpDataGridCell()) as any;
+> = wrap(jpDataGridCell(), {
+  events: { onFocus: 'cell-focused' }
+}) as any;
 // @ts-expect-error unknown property
 DataGridCell.displayName = 'Jupyter.DataGridCell';
 
@@ -38,6 +34,16 @@ export const DataGridRow: React.DetailedHTMLFactory<
     'row-type'?: 'default' | 'header' | 'sticky-header';
   },
   HTMLElement
-> = wrap(jpDataGridRow()) as any;
+> = wrap(jpDataGridRow(), { events: { onFocus: 'row-focused' } }) as any;
 // @ts-expect-error unknown property
 DataGridRow.displayName = 'Jupyter.DataGridRow';
+
+export const DataGrid: React.DetailedHTMLFactory<
+  React.HTMLAttributes<HTMLElement> & {
+    'generate-header'?: 'none' | 'default' | 'sticky';
+    'grid-template-columns'?: 'string';
+  },
+  HTMLElement
+> = wrap(jpDataGrid()) as any;
+// @ts-expect-error unknown property
+DataGrid.displayName = 'Jupyter.DataGrid';

packages/react-components/src/tooltip/index.tsx

@@ -19,6 +19,10 @@ export const Tooltip: React.DetailedHTMLFactory<
     position?: 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
     'horizontal-viewport-lock'?: boolean;
     'vertical-viewport-lock'?: boolean;
+    /**
+     * @property
+     */
+    anchorElement?: HTMLElement | null;
   },
   HTMLElement
 > = wrap(jpTooltip()) as any;

packages/react-components/src/tree-item/index.tsx

@@ -17,6 +17,8 @@ export const TreeItem: React.DetailedHTMLFactory<
     disabled?: boolean;
   },
   HTMLElement
-> = wrap(jpTreeItem()) as any;
+> = wrap(jpTreeItem(), {
+  events: { onExpand: 'expanded-change', onSelect: 'selected-change' }
+}) as any;
 // @ts-expect-error unknown property
 TreeItem.displayName = 'Jupyter.TreeItem';