@oracle/oraclejet-core-pack 17.1.3 → 18.0.0

package/oj-c/LineChart.json

@@ -6,7 +6,7 @@
     "memberof": "oj-c",
     "longname": "oj-c.LineChart",
     "kind": "class",
-    "classdesc": "<h3 id=\"lineChartOverview-section\">\n  JET Line Chart\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#lineChartOverview-section\"></a>\n</h3>\n\n<p>A line chart displays information graphically using data points connected by straight or curved lines, making relationships among the data easier to understand.</p>\n\n<pre class=\"prettyprint\">\n<code>\n&lt;oj-c-line-chart\n  data=\"[[dataProvider]]\">\n&lt;/oj-c-line-chart>\n</code>\n</pre>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\nTo make your component accessible, the application is required to include contextual information for screender readers using one or more the following methods as appropriate:\n <ul>\n  <li>aria-describedby</li>\n  <li>aria-labelledby</li>\n  <li>aria-label</li>\n  <li>short-desc property of your items</li>\n </ul>\n<p>\n If your application has custom keyboard and touch shortcuts implemented for the component, these shortcuts can conflict with those of the component. It is the application's responsibility to disclose these custom shortcuts, possibly via a datatip or help popup.\n</p>\n<p>\n When setting color, applications are responsible for making sure that the color meets the <a target=\"_blank\" href=\"https://www.w3.org/TR/WCAG21/#contrast-minimum\">minimum contrast requirements</a>.\n</p>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>= or +</kbd></td>\n      <td>Zoom in one level if zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>- or _</kbd></td>\n      <td>Zoom out one level if zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Drill on data item, categorical axis label, or legend item when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"perf-section\">\n  Performance\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#perf-section\"></a>\n</h3>\n\n<h4>Data Set Size</h4>\n<p>As a rule of thumb, it's recommended that applications only set usable data densities on the chart. For example,\n   it's not recommended to show more than 500 lines on a 500 pixel wide chart, since the  lines will be unusably thin.\n   While there are several optimizations within the chart to deal with large data sets, it's always more efficient to\n   reduce the data set size as early as possible. Future optimizations will focus on improving end user experience as\n   well as developer productivity for common use cases.\n</p>\n\n<h4>Styling</h4>\n<p>Use the highest level property available. For example, consider setting styling properties on\n   <code class=\"prettyprint\">styleDefaults</code> or <code class=\"prettyprint\">series</code>, instead of styling properties\n   on the individual data items. The chart can take advantage of these higher level properties to apply the style properties on\n   containers, saving expensive DOM calls.\n</p>\n\n\n<h3 id=\"touch-section\">\nTouch End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#touch-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"5\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">none</code>.</td>\n    </tr>\n    <tr>\n      <td><kbd>Double Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\"><kbd>Press & Hold</kbd></td>\n      <td>Display tooltip.</td>\n    </tr>\n    <tr>\n      <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n      <td>Categorical Axis Item</td>\n      <td><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\">Legend Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Filter when <code class=\"prettyprint\">hideAndShowBehavior</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"4\">Plot Line</td>\n      <td rowspan=\"2\"><kbd>Drag</kbd></td>\n      <td>Pan when panning is enabled and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td>Marquee select when <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">multiple</code> and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Pinch-close</kbd></td>\n      <td>Zoom out when zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Spread-open</kbd></td>\n      <td>Zoom in when zooming is enabled.</td>\n    </tr>\n  </tbody>\n</table>",
+    "classdesc": "<h3 id=\"lineChartOverview-section\">\n  JET Line Chart\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#lineChartOverview-section\"></a>\n</h3>\n\n<p>A line chart displays information graphically using data points connected by straight or curved lines, making relationships among the data easier to understand.</p>\n\n<pre class=\"prettyprint\">\n<code>\n&lt;oj-c-line-chart\n  data=\"[[dataProvider]]\">\n&lt;/oj-c-line-chart>\n</code>\n</pre>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\nTo make your component accessible, the application is required to include contextual information for screender readers using one or more the following methods as appropriate:\n <ul>\n  <li>aria-describedby</li>\n  <li>aria-labelledby</li>\n  <li>aria-label</li>\n  <li>short-desc property of your items</li>\n </ul>\n<p>\n If your application has custom keyboard and touch shortcuts implemented for the component, these shortcuts can conflict with those of the component. It is the application's responsibility to disclose these custom shortcuts, possibly via a datatip or help popup.\n</p>\n<p>\n When setting color, applications are responsible for making sure that the color meets the <a target=\"_blank\" href=\"https://www.w3.org/TR/WCAG21/#contrast-minimum\">minimum contrast requirements</a>.\n</p>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>= or +</kbd></td>\n      <td>Zoom in one level if zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>- or _</kbd></td>\n      <td>Zoom out one level if zooming is enabled.</td>\n    </tr>\n     <tr>\n      <td><kbd>PageUp or Shift + PageUp</kbd></td>\n      <td>Pan left in left-to-right locales. Pan right in right-to-left locales.</td>\n    </tr>\n    <tr>\n      <td><kbd>PageDown or Shift + PageDown</kbd></td>\n      <td>Pan right in left-to-right locales. Pan left in right-to-left locales.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Drill on data item, categorical axis label, or legend item when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+F10</kbd></td>\n      <td>Launch the context menu if there is one associated with the current item.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"perf-section\">\n  Performance\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#perf-section\"></a>\n</h3>\n\n<h4>Data Set Size</h4>\n<p>As a rule of thumb, it's recommended that applications only set usable data densities on the chart. For example,\n   it's not recommended to show more than 500 lines on a 500 pixel wide chart, since the  lines will be unusably thin.\n   While there are several optimizations within the chart to deal with large data sets, it's always more efficient to\n   reduce the data set size as early as possible. Future optimizations will focus on improving end user experience as\n   well as developer productivity for common use cases.\n</p>\n\n<h4>Styling</h4>\n<p>Use the highest level property available. For example, consider setting styling properties on\n   <code class=\"prettyprint\">styleDefaults</code> or <code class=\"prettyprint\">series</code>, instead of styling properties\n   on the individual data items. The chart can take advantage of these higher level properties to apply the style properties on\n   containers, saving expensive DOM calls.\n</p>\n\n\n<h3 id=\"touch-section\">\nTouch End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#touch-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"5\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">none</code>.</td>\n    </tr>\n    <tr>\n      <td><kbd>Double Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\"><kbd>Press & Hold</kbd></td>\n      <td>Display tooltip.</td>\n    </tr>\n    <tr>\n      <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\">Categorical Axis Item</td>\n      <td><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\">Legend Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Filter when <code class=\"prettyprint\">hideAndShowBehavior</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"5\">Plot Area</td>\n      <td rowspan=\"2\"><kbd>Drag</kbd></td>\n      <td>Pan when panning is enabled and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td>Marquee select when <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">multiple</code> and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Pinch-close</kbd></td>\n      <td>Zoom out when zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Spread-open</kbd></td>\n      <td>Zoom in when zooming is enabled.</td>\n    </tr>\n    <tr>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n       <td>Series Line</td>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n       <td>Axis Title</td>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n  </tbody>\n</table>",
     "scope": "static",
     "tagWithoutBrackets": "oj-c-line-chart",
     "tagWithBrackets": "<oj-c-line-chart>",
@@ -457,7 +457,7 @@
     "longname": "oj-c.LineChart#selectionMode",
     "optional": true,
     "scope": "instance",
-    "description": "The type of selection behavior that is enabled on the tag cloud. This attribute controls the number of selections that can be made via selection gestures at any given time.",
+    "description": "The type of selection behavior that is enabled on the line chart. This attribute controls the number of selections that can be made via selection gestures at any given time.",
     "meta": {
       "filename": "line-chart.tsx",
       "path": "web/components/oj-c/line-chart"
@@ -547,10 +547,10 @@
     "type": {
       "names": [
         "\"pan\"",
+        "\"zoom\"",
         "\"select\"",
         "\"off\"",
-        "\"user\"",
-        "\"zoom\""
+        "\"user\""
       ]
     }
   },
@@ -762,6 +762,32 @@
       }
     ]
   },
+  {
+    "memberof": "oj-c.LineChart",
+    "id": "oj-c.LineChart#contextMenuConfig",
+    "name": "contextMenuConfig",
+    "kind": "member",
+    "longname": "oj-c.LineChart#contextMenuConfig",
+    "optional": true,
+    "scope": "instance",
+    "description": "Specifies a context menu configuration.\nIt takes the keys `accessibleLabel` and `items`,\nwhere `accessibleLabel` is optional and items required . `items` function returns an array\nof menu item object representations that indicates what menu items are going to be part of\nmenu based on some specific context menu context.\n<table>\n<tr><th align='left'>Context Menu Item Type</th><th align='left'>Def</th></tr>\n<tr><td>ContextMenuSeparator</td><td>{ type: 'separator'}</td></tr>\n<tr><td>MenuItem</td><td>{\ntype?: 'item';\nlabel: string;\nkey: string;\ndisabled?: boolean;\nonAction?: () => void;\nstartIcon?: MenuIcon;\nendIcon?: MenuIcon;\nvariant?: 'standard' | 'destructive';\n};</td></tr>\n<tr><td>ContextMenuSubMenu</td><td>{\ntype: 'submenu';\nlabel?: string;\ndisabled?: boolean;\nstartIcon?: string;\nitems?: Array&lt;ContextMenuItems&gt;;\n};</td></tr>\n<tr><td>ContextMenuSelectSingle</td><td>{\ntype: 'selectsingle';\nkey?: string;\nitems?: Array&lt;MenuSelectItem&gt;;\nselection?: string;\nonSelection?: (detail: { value: string }) => void;\n};</td></tr>\n<tr><td>ContextMenuSelectMultiple</td><td>{\ntype: 'selectmultiple';\nkey?: string;\nitems?: Array&lt;MenuSelectItem&gt;;\nselection?: Array&lt;string&gt;;\nonSelection?: (detail: { value: Array&lt;string&gt; }) => void;\n};</td></tr>\n<tr><td>MenuIcon</td><td>{\ntype?: 'class';\n    class: string;\n  }\n| {\n    type: 'img';\n   src: string;\n  };</td></tr>\n<tr><td>MenuSelectItem</td><td>{\nlabel: string;\ndisabled?: boolean;\nendIcon?: MenuIcon;\nvalue: string;\n}</td></tr>\n</table>",
+    "meta": {
+      "filename": "line-chart.tsx",
+      "path": "web/components/oj-c/line-chart"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "oj-c.LineChart.LineChartContextMenuConfig<K, D>",
+        "jsdocOverride": true
+      }
+    ]
+  },
   {
     "memberof": "oj-c.LineChart",
     "id": "oj-c.LineChart#setProperty",
@@ -1244,6 +1270,97 @@
       }
     ]
   },
+  {
+    "memberof": "oj-c.LineChart",
+    "id": "oj-c.LineChart#event:ojContextMenuAction",
+    "name": "ojContextMenuAction",
+    "kind": "event",
+    "longname": "oj-c.LineChart#event:ojContextMenuAction",
+    "description": "Triggered when a menu item is clicked, whether by keyboard, mouse, or touch events.",
+    "meta": {
+      "filename": "line-chart.tsx",
+      "path": "web/components/oj-c/line-chart"
+    },
+    "scope": "instance",
+    "properties": [
+      {
+        "name": "menuItemKey",
+        "optional": false,
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      },
+      {
+        "name": "contextMenuContext",
+        "optional": false,
+        "type": {
+          "names": [
+            "any"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "C",
+            "jsdocOverride": true,
+            "for": "contextMenuContext"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.LineChart",
+    "id": "oj-c.LineChart#event:ojContextMenuSelection",
+    "name": "ojContextMenuSelection",
+    "kind": "event",
+    "longname": "oj-c.LineChart#event:ojContextMenuSelection",
+    "description": "Triggered when a select menu item is clicked, whether by keyboard, mouse, or touch events.",
+    "meta": {
+      "filename": "line-chart.tsx",
+      "path": "web/components/oj-c/line-chart"
+    },
+    "scope": "instance",
+    "properties": [
+      {
+        "name": "value",
+        "optional": false,
+        "type": {
+          "names": [
+            "string|Array<string>"
+          ]
+        }
+      },
+      {
+        "name": "contextMenuContext",
+        "optional": false,
+        "type": {
+          "names": [
+            "any"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "C",
+            "jsdocOverride": true,
+            "for": "contextMenuContext"
+          }
+        ]
+      },
+      {
+        "name": "menuSelectionGroupKey",
+        "optional": false,
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      }
+    ]
+  },
   {
     "memberof": "oj-c.LineChart",
     "id": "oj-c.LineChart#itemTemplate",
@@ -1432,7 +1549,7 @@
     "name": "touchDoc",
     "kind": "member",
     "longname": "oj-c.LineChart.touchDoc",
-    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"5\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">none</code>.</td>\n    </tr>\n    <tr>\n      <td><kbd>Double Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\"><kbd>Press & Hold</kbd></td>\n      <td>Display tooltip.</td>\n    </tr>\n    <tr>\n      <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n      <td>Categorical Axis Item</td>\n      <td><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\">Legend Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Filter when <code class=\"prettyprint\">hideAndShowBehavior</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"4\">Plot Line</td>\n      <td rowspan=\"2\"><kbd>Drag</kbd></td>\n      <td>Pan when panning is enabled and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td>Marquee select when <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">multiple</code> and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Pinch-close</kbd></td>\n      <td>Zoom out when zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Spread-open</kbd></td>\n      <td>Zoom in when zooming is enabled.</td>\n    </tr>\n  </tbody>\n</table>",
+    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"5\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">none</code>.</td>\n    </tr>\n    <tr>\n      <td><kbd>Double Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled and <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\"><kbd>Press & Hold</kbd></td>\n      <td>Display tooltip.</td>\n    </tr>\n    <tr>\n      <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\">Categorical Axis Item</td>\n      <td><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"2\">Legend Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Drill when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td>Filter when <code class=\"prettyprint\">hideAndShowBehavior</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"5\">Plot Area</td>\n      <td rowspan=\"2\"><kbd>Drag</kbd></td>\n      <td>Pan when panning is enabled and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td>Marquee select when <code class=\"prettyprint\">selectionMode</code> is <code class=\"prettyprint\">multiple</code> and toggled into that mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Pinch-close</kbd></td>\n      <td>Zoom out when zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Spread-open</kbd></td>\n      <td>Zoom in when zooming is enabled.</td>\n    </tr>\n    <tr>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n       <td>Series Line</td>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n       <td>Axis Title</td>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n  </tbody>\n</table>",
     "memberof": "oj-c.LineChart",
     "meta": {
       "filename": "line-chart.tsx",
@@ -1445,7 +1562,7 @@
     "name": "keyboardDoc",
     "kind": "member",
     "longname": "oj-c.LineChart.keyboardDoc",
-    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>= or +</kbd></td>\n      <td>Zoom in one level if zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>- or _</kbd></td>\n      <td>Zoom out one level if zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Drill on data item, categorical axis label, or legend item when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n  </tbody>\n</table>",
+    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>= or +</kbd></td>\n      <td>Zoom in one level if zooming is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>- or _</kbd></td>\n      <td>Zoom out one level if zooming is enabled.</td>\n    </tr>\n     <tr>\n      <td><kbd>PageUp or Shift + PageUp</kbd></td>\n      <td>Pan left in left-to-right locales. Pan right in right-to-left locales.</td>\n    </tr>\n    <tr>\n      <td><kbd>PageDown or Shift + PageDown</kbd></td>\n      <td>Pan right in left-to-right locales. Pan left in right-to-left locales.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Drill on data item, categorical axis label, or legend item when <code class=\"prettyprint\">drilling</code> is enabled.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+F10</kbd></td>\n      <td>Launch the context menu if there is one associated with the current item.</td>\n    </tr>\n  </tbody>\n</table>",
     "memberof": "oj-c.LineChart",
     "meta": {
       "filename": "line-chart.tsx",
@@ -3242,5 +3359,56 @@
         }
       }
     ]
+  },
+  {
+    "memberof": "oj-c.LineChart",
+    "id": "oj-c.LineChart.LineChartContextMenuConfig",
+    "name": "LineChartContextMenuConfig",
+    "kind": "typedef",
+    "longname": "oj-c.LineChart.LineChartContextMenuConfig",
+    "scope": "static",
+    "description": "",
+    "tsgenerictype": {
+      "target": "Type",
+      "value": "<K,D>",
+      "for": "genericTypeParameters"
+    },
+    "type": {
+      "names": [
+        "Object"
+      ]
+    },
+    "meta": {
+      "filename": "line-chart.tsx",
+      "path": "web/components/oj-c/line-chart"
+    },
+    "properties": [
+      {
+        "name": "accessibleLabel",
+        "optional": true,
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      },
+      {
+        "name": "items",
+        "optional": false,
+        "type": {
+          "names": [
+            "function"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "(context: C) => ContextMenuItems[]",
+            "jsdocOverride": true,
+            "for": "items"
+          }
+        ]
+      }
+    ]
   }
 ]

package/oj-c/ListView.json

@@ -6,7 +6,7 @@
     "memberof": "oj-c",
     "longname": "oj-c.ListView",
     "kind": "class",
-    "classdesc": "<h3 id=\"listViewOverview-section\">\n  JET ListView Component\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#listViewOverview-section\"></a>\n</h3>\n\n<p>Description: The JET ListView enhances a HTML list element into a themable, WAI-ARIA compliant, mobile friendly component with advance interactive features.\nThe child content can be configured via a DataProvider which should be used for mutable data.</p>\n\n<p>For migration information from <code>oj-list-view</code> refer to the <a href=\"https://jet.oraclecorp.com/trunk/jsdocs/oj.ojListView.html#styling-section\">migration section</a> in the API docs.\n\n<h3 id=\"data-section\">\n  Data\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-section\"></a>\n</h3>\n<p>The JET ListView gets its data from a DataProvider.</p>\n\n<p><b>ArrayDataProvider</b> - Use this when the underlying data is an array object or an observableArray.  In the observableArray case, ListView will automatically react\nwhen items are added or removed from the array.  See the documentation for ArrayDataProvider for more details on the available options.</p>\n\n<p>Example of data provider content</p>\n<pre class=\"prettyprint\"><code>\n  &lt;oj-c-list-view aria-label=\"Accessible Summary\" data=\"[[dataProvider]]\">\n  &lt;/oj-c-list-view>\n</code></pre>\n\n<p>Check out the Listview Basic demo</a>\n\n<h3 id=\"keyboard-section\">\n  Coming Features\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#coming-features-section\"></a>\n</h3>\n\n<p>These features will be the domain of new, specialized components</p>\n<ul>\n   <li>Cards in grid layout</li>\n   <li>Cards in waterfall layout</li>\n   <li>Grouped list</li>\n   <li>Expandable list</li>\n</ul>\n\n<p>These features will be available in forthcoming versions</p>\n<ul>\n   <li>Context menu</li>\n   <li>Selection required</li>\n   <li>First selected item</li>\n   <li>Reordering, drag and drop with move, copy and paste functionalities</li>\n   <li>Managing scroll position</li>\n</ul>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan = \"20\" nowrap>List Item</td>\n      <td><kbd>F2</kbd></td>\n      <td>Enters tabbable mode.  This enables keyboard action on elements inside the item, including navigate between focusable elements inside the item.  It can also be used to exit tabbable mode if already in tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Exits tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>When in tabbable mode, navigates to next focusable element within the item.  If the last focusable element is reached, shift focus back to the first focusable element.\n          When not in tabbable mode, navigates to next focusable element on page (outside ListView).</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Tab</kbd></td>\n      <td>When in tabbable mode, navigates to previous focusable element within the item.  If the first focusable element is reached, shift focus back to the last focusable element.\n          When not in tabbable mode, navigates to previous focusable element on page (outside ListView).</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+DownArrow</kbd></td>\n      <td>Extend the selection to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+UpArrow</kbd></td>\n      <td>Extend the selection to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>Space</kbd></td>\n      <td>Toggles to select and deselect the current item.  If previous items have been selected, deselects them and selects the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Space</kbd></td>\n      <td>Selects contiguous items from the last selected item to the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+UpArrow</kbd></td>\n      <td>Reorder the current item up.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+DownArrow</kbd></td>\n      <td>Reorder the current item down.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl+Space</kbd></td>\n      <td>Toggles to select and deselect the current item while maintaining previous selected items.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\n\n<p>Application should specify a value for the aria-label attribute with a meaningful description of the purpose of this list.</p>\n<p>Note that ListView uses the grid role and follows the <a href=\"https://www.w3.org/TR/wai-aria-practices/examples/grid/LayoutGrids.html\">Layout Grid</a> design as outlined in the <a href=\"https://www.w3.org/TR/wai-aria-practices/#grid\">grid design pattern</a></p>\n<p>Nesting collection components such as ListView, Table, TreeView, and ListView inside of ListView is not supported.</p>\n<p>When reorder feature is enabled, application should specify a live region which contains an announcement to notify assistive technologies that the item reordering happens.</p>\n\n<h4>Custom Colours</h4>\n<p>Using colors, including background and text colors, is not accessible if it is the only way information is conveyed.\nLow vision users may not be able to see the different colors, and in high contrast mode the colors are removed.\nThe Redwood approved way to show status is to use badge.</p>\n\n<h3 id=\"context-section\">\n  Item Context\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#context-section\"></a>\n</h3>\n\n<p>For all item options, developers can specify a function as the return value.  The function takes a single argument, which is an object that contains contextual information about the particular item.  This gives developers the flexibility to return different value depending on the context.</p>\n\n<p>The context parameter contains the following keys:</p>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data</kbd></td>\n      <td>The data of the item.  Note this is made available primarily to ease migration.\n          Applications should get the data from the item property instead.</td>\n    </tr>\n    <tr>\n      <td><kbd>item</kbd></td>\n      <td>An object that contains the data and metadata for the item.</td>\n    </tr>\n    <tr>\n      <td><kbd>isTabbable</kbd></td>\n      <td>A boolean indicating whether the item is in tabbable mode or not.\n         This should be used to implement conditional behavior for all tabbable elements, this avoids creating a keyboard trap when tabbing through a List.<br/>\n         This can be implemented as a conditional tabindex, for example <code>tabindex=\"[[!item.isTabbable && '-1']]\"</code>.<br/>\n         When composing with core pack components, this is not needed, as they are tabbable mode aware.\n        </td>\n    </tr>\n  </tbody>\n</table>\n\n<p>The following keys are not currently supported:</p>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>componentElement</kbd></td>\n      <td>A reference to the root element of ListView.</td>\n    </tr>\n    <tr>\n      <td><kbd>datasource</kbd></td>\n      <td>A reference to the data source object.</td>\n    </tr>\n    <tr>\n      <td><kbd>index</kbd></td>\n      <td>The index of the item, where 0 is the index of the first item.  In the hierarchical case the index is relative to its parent.</td>\n    </tr>\n    <tr>\n      <td><kbd>key</kbd></td>\n      <td>The key of the item (this duplicates item.metadata.key and has been deprecated)</td>\n    </tr>\n    <tr>\n      <td><kbd>metadata</kbd></td>\n      <td>The metadata of the item (this is instead available in item)</td>\n    </tr>\n    <tr>\n      <td><kbd>parentElement</kbd></td>\n      <td>This will be supported by the Hierarchical list component and no longer applies to list view..</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"data-attributes-section\">\n  Custom Data Attributes\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-attributes-section\"></a>\n</h3>\n\n<p>ListView supports the following custom data attributes.\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th>Description</th>\n      <th>Example</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data-oj-as</kbd></td>\n      <td>Provides an alias for a specific template instance and has the same subproperties as the $current variable.</td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-list-view id=\"listView\">\n  &lt;template slot=\"itemTemplate\" data-oj-as=\"item\">\n  &lt;/template>\n&lt;/oj-c-list-view></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-clickthrough</kbd></td>\n      <td><p>Specify on any element inside an item where you want to control whether ListView should perform actions triggered by\n          a click event originating from the element or one of its descendants.</p>\n          <p>For example, if you specify this attribute with a value of \"disabled\" on a link inside an item, then ListView\n          will not select or trigger itemAction event to be fired when user clicks on the link.</p>\n          <p>Note that the currentItem will still be updated to the item that the user clicked on.</p>\n          <p>Also note you do not need to set this attribute on core pack components such as oj-c-button, as it natively supports\n             disabling clickthrough.</p>\n      </td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-list-view id=\"listView\">\n  &lt;template slot=\"itemTemplate\">\n    &lt;a href=\"#\" data-oj-clickthrough=\"disabled\">&lt;/a>\n  &lt;/template>\n&lt;/oj-c-list-view></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-manage-tabs</kbd></td>\n      <td><p>ListView does not manipulate the tabindex of the item content.  Applications should set the tabIndex of any focusable\n         element based on the isTabbableMode property from the context pass to the itemTemplate.</p>\n         <p>However, there will be cases where you can't control the tabindex of the content, for example, if you are using components from another team.</p>\n         <p>In that case, applications can specify this attribute on the element or one of its ancestors so that when the itemTemplate is processed,\n         it will scan and manipulate the tabindex of any focusable elements.</p>\n      </td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-list-view id=\"listView\">\n  &lt;template slot=\"itemTemplate\">\n    &lt;some-component-with-focusable-elements data-oj-manage-tabs>&lt;/some-component-with-focusable-elements>\n  &lt;/template>\n&lt;/oj-c-list-view></code></pre>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"suggestion-items-section\">\n  Suggestion Items\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#suggestion-items-section\"></a>\n</h3>\n\n<p>If <a href=\"ItemMetadata.html\">ItemMetadata</a> returned by the DataProvider contains suggestion field, ListView will apply special visual to those\n   items. The DataProvider must ensure the suggestion items are the first items returned by the initial fetchFirst call.</p>",
+    "classdesc": "<h3 id=\"listViewOverview-section\">\n  JET ListView Component\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#listViewOverview-section\"></a>\n</h3>\n\n<p>Description: The JET ListView enhances a HTML list element into a themable, WAI-ARIA compliant, mobile friendly component with advance interactive features.\nThe child content can be configured via a DataProvider which should be used for mutable data.</p>\n\n<p>For migration information from <code>oj-list-view</code> refer to the <a href=\"https://jet.oraclecorp.com/trunk/jsdocs/oj.ojListView.html#styling-section\">migration section</a> in the API docs.\n\n<h3 id=\"data-section\">\n  Data\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-section\"></a>\n</h3>\n<p>The JET ListView gets its data from a DataProvider.</p>\n\n<p><b>ArrayDataProvider</b> - Use this when the underlying data is an array object or an observableArray.  In the observableArray case, ListView will automatically react\nwhen items are added or removed from the array.  See the documentation for ArrayDataProvider for more details on the available options.</p>\n\n<p>Example of data provider content</p>\n<pre class=\"prettyprint\"><code>\n  &lt;oj-c-list-view aria-label=\"Accessible Summary\" data=\"[[dataProvider]]\">\n  &lt;/oj-c-list-view>\n</code></pre>\n\n<p>Check out the Listview Basic demo</a>\n\n<h3 id=\"keyboard-section\">\n  Coming Features\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#coming-features-section\"></a>\n</h3>\n\n<p>These features will be the domain of new, specialized components</p>\n<ul>\n   <li>Cards in grid layout</li>\n   <li>Cards in waterfall layout</li>\n   <li>Grouped list</li>\n   <li>Expandable list</li>\n</ul>\n\n<p>These features will be available in forthcoming versions</p>\n<ul>\n   <li>Drag and drop between components</li>\n   <li>Managing scroll position</li>\n</ul>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan = \"20\" nowrap>List Item</td>\n      <td><kbd>F2</kbd></td>\n      <td>Enters tabbable mode.  This enables keyboard action on elements inside the item, including navigate between focusable elements inside the item.  It can also be used to exit tabbable mode if already in tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Exits tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>When in tabbable mode, navigates to next focusable element within the item.  If the last focusable element is reached, shift focus back to the first focusable element.\n          When not in tabbable mode, navigates to next focusable element on page (outside ListView).</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Tab</kbd></td>\n      <td>When in tabbable mode, navigates to previous focusable element within the item.  If the first focusable element is reached, shift focus back to the last focusable element.\n          When not in tabbable mode, navigates to previous focusable element on page (outside ListView).</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+DownArrow</kbd></td>\n      <td>Extend the selection to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+UpArrow</kbd></td>\n      <td>Extend the selection to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>Space</kbd></td>\n      <td>Toggles to select and deselect the current item.  If previous items have been selected, deselects them and selects the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Space</kbd></td>\n      <td>Selects contiguous items from the last selected item to the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+UpArrow</kbd></td>\n      <td>Reorder the current item up.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+DownArrow</kbd></td>\n      <td>Reorder the current item down.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl+Space</kbd></td>\n      <td>Toggles to select and deselect the current item while maintaining previous selected items.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\n\n<p>Application should specify a value for the aria-label attribute with a meaningful description of the purpose of this list.</p>\n<p>Note that ListView uses the grid role and follows the <a href=\"https://www.w3.org/TR/wai-aria-practices/examples/grid/LayoutGrids.html\">Layout Grid</a> design as outlined in the <a href=\"https://www.w3.org/TR/wai-aria-practices/#grid\">grid design pattern</a></p>\n<p>Nesting collection components such as ListView, Table, TreeView, and ListView inside of ListView is not supported.</p>\n<p>When reorder feature is enabled, application should specify a live region which contains an announcement to notify assistive technologies that the item reordering happens.</p>\n\n<h4>Custom Colours</h4>\n<p>Using colors, including background and text colors, is not accessible if it is the only way information is conveyed.\nLow vision users may not be able to see the different colors, and in high contrast mode the colors are removed.\nThe Redwood approved way to show status is to use badge.</p>\n\n<h3 id=\"context-section\">\n  Item Context\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#context-section\"></a>\n</h3>\n\n<p>For all item options, developers can specify a function as the return value.  The function takes a single argument, which is an object that contains contextual information about the particular item.  This gives developers the flexibility to return different value depending on the context.</p>\n\n<p>The context parameter contains the following keys:</p>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data</kbd></td>\n      <td>The data of the item.  Note this is made available primarily to ease migration.\n          Applications should get the data from the item property instead.</td>\n    </tr>\n    <tr>\n      <td><kbd>item</kbd></td>\n      <td>An object that contains the data and metadata for the item.</td>\n    </tr>\n    <tr>\n      <td><kbd>isTabbable</kbd></td>\n      <td>A boolean indicating whether the item is in tabbable mode or not.\n         This should be used to implement conditional behavior for all tabbable elements, this avoids creating a keyboard trap when tabbing through a List.<br/>\n         This can be implemented as a conditional tabindex, for example <code>tabindex=\"[[!item.isTabbable && '-1']]\"</code>.<br/>\n         When composing with core pack components, this is not needed, as they are tabbable mode aware.\n        </td>\n    </tr>\n  </tbody>\n</table>\n\n<p>The following keys are not currently supported:</p>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>componentElement</kbd></td>\n      <td>A reference to the root element of ListView.</td>\n    </tr>\n    <tr>\n      <td><kbd>datasource</kbd></td>\n      <td>A reference to the data source object.</td>\n    </tr>\n    <tr>\n      <td><kbd>index</kbd></td>\n      <td>The index of the item, where 0 is the index of the first item.  In the hierarchical case the index is relative to its parent.</td>\n    </tr>\n    <tr>\n      <td><kbd>key</kbd></td>\n      <td>The key of the item (this duplicates item.metadata.key and has been deprecated)</td>\n    </tr>\n    <tr>\n      <td><kbd>metadata</kbd></td>\n      <td>The metadata of the item (this is instead available in item)</td>\n    </tr>\n    <tr>\n      <td><kbd>parentElement</kbd></td>\n      <td>This will be supported by the Hierarchical list component and no longer applies to list view..</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"data-attributes-section\">\n  Custom Data Attributes\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-attributes-section\"></a>\n</h3>\n\n<p>ListView supports the following custom data attributes.\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th>Description</th>\n      <th>Example</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data-oj-as</kbd></td>\n      <td>Provides an alias for a specific template instance and has the same subproperties as the $current variable.</td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-list-view id=\"listView\">\n  &lt;template slot=\"itemTemplate\" data-oj-as=\"item\">\n  &lt;/template>\n&lt;/oj-c-list-view></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-clickthrough</kbd></td>\n      <td><p>Specify on any element inside an item where you want to control whether ListView should perform actions triggered by\n          a click event originating from the element or one of its descendants.</p>\n          <p>For example, if you specify this attribute with a value of \"disabled\" on a link inside an item, then ListView\n          will not select or trigger itemAction event to be fired when user clicks on the link.</p>\n          <p>Note that the currentItem will still be updated to the item that the user clicked on.</p>\n          <p>Also note you do not need to set this attribute on core pack components such as oj-c-button, as it natively supports\n             disabling clickthrough.</p>\n      </td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-list-view id=\"listView\">\n  &lt;template slot=\"itemTemplate\">\n    &lt;a href=\"#\" data-oj-clickthrough=\"disabled\">&lt;/a>\n  &lt;/template>\n&lt;/oj-c-list-view></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-manage-tabs</kbd></td>\n      <td><p>ListView does not manipulate the tabindex of the item content.  Applications should set the tabIndex of any focusable\n         element based on the isTabbableMode property from the context pass to the itemTemplate.</p>\n         <p>However, there will be cases where you can't control the tabindex of the content, for example, if you are using components from another team.</p>\n         <p>In that case, applications can specify this attribute on the element or one of its ancestors so that when the itemTemplate is processed,\n         it will scan and manipulate the tabindex of any focusable elements.</p>\n      </td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-list-view id=\"listView\">\n  &lt;template slot=\"itemTemplate\">\n    &lt;some-component-with-focusable-elements data-oj-manage-tabs>&lt;/some-component-with-focusable-elements>\n  &lt;/template>\n&lt;/oj-c-list-view></code></pre>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"suggestion-items-section\">\n  Suggestion Items\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#suggestion-items-section\"></a>\n</h3>\n\n<p>If <a href=\"ItemMetadata.html\">ItemMetadata</a> returned by the DataProvider contains suggestion field, ListView will apply special visual to those\n   items. The DataProvider must ensure the suggestion items are the first items returned by the initial fetchFirst call.</p>",
     "scope": "static",
     "tagWithoutBrackets": "oj-c-list-view",
     "tagWithBrackets": "<oj-c-list-view>",
@@ -50,14 +50,66 @@
     "scope": "instance",
     "ojwriteback": true,
     "readonly": true,
-    "description": "The item that currently has keyboard focus",
+    "description": "The key of the item that currently has keyboard focus",
     "meta": {
       "filename": "list-view.tsx",
       "path": "web/components/oj-c/list-view"
     },
     "type": {
       "names": [
-        "any"
+        "string|number"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "K",
+        "jsdocOverride": true
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.ListView",
+    "id": "oj-c.ListView#currentItemOverride",
+    "name": "currentItemOverride",
+    "kind": "member",
+    "longname": "oj-c.ListView#currentItemOverride",
+    "optional": true,
+    "scope": "instance",
+    "description": "The key of the item that will have keyboard focus",
+    "meta": {
+      "filename": "list-view.tsx",
+      "path": "web/components/oj-c/list-view"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "{ rowKey: K }",
+        "jsdocOverride": true
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.ListView",
+    "id": "oj-c.ListView#currentItemOverride.rowKey",
+    "name": "currentItemOverride.rowKey",
+    "kind": "member",
+    "longname": "oj-c.ListView#currentItemOverride.rowKey",
+    "optional": false,
+    "scope": "instance",
+    "description": "",
+    "meta": {
+      "filename": "list-view.tsx",
+      "path": "web/components/oj-c/list-view"
+    },
+    "type": {
+      "names": [
+        "string|number"
       ]
     },
     "tstype": [
@@ -225,7 +277,7 @@
     "longname": "oj-c.ListView#selectionMode",
     "optional": true,
     "scope": "instance",
-    "description": "<p>The type of selection behavior that is enabled on the ListView. This attribute controls the number of selections that can be made via selection gestures at any given time.\n\n<p>If <code class=\"prettyprint\">single</code> or <code class=\"prettyprint\">multiple</code> is specified, selection gestures will be enabled, and the ListView's selection styling will be applied to all items specified by the <a href=\"#selected\">selected</a> attribute.\nIf <code class=\"prettyprint\">singleRequired</code> is specified, then the behavior is the same as single except that ListView will ensure there is an item selected at all time. Specifically, user will not be able to de-selected a selected item.  And if selection is initially empty, ListView will select the first item.\nIf <code class=\"prettyprint\">none</code> is specified, selection gestures will be disabled, and the ListView's selection styling will not be applied to any items specified by the <a href=\"#selected\">selected</a> attribute.\n<p>Changing the value of this attribute will not affect the value of the <a href=\"#selected\">selected</a> attribute.",
+    "description": "<p>The type of selection behavior that is enabled on the ListView. This attribute controls the number of selections that can be made via selection gestures at any given time.\n\n<p>If <code class=\"prettyprint\">single</code> or <code class=\"prettyprint\">multiple</code> is specified, selection gestures will be enabled, and the ListView's selection styling will be applied to all items specified by the <a href=\"#selected\">selected</a> attribute.\nIf <code class=\"prettyprint\">singleRequired</code> is specified, then the behavior is the same as single except that ListView will ensure there is an item selected at all times. Specifically, the user will not be able to de-selected a selected item.  And if selection is initially empty, ListView will select the first item.\nIf <code class=\"prettyprint\">none</code> is specified, selection gestures will be disabled, and the ListView's selection styling will not be applied to any items specified by the <a href=\"#selected\">selected</a> attribute.\n<p>Changing the value of this attribute will not affect the value of the <a href=\"#selected\">selected</a> attribute.",
     "meta": {
       "filename": "list-view.tsx",
       "path": "web/components/oj-c/list-view"
@@ -355,6 +407,32 @@
       ]
     }
   },
+  {
+    "memberof": "oj-c.ListView",
+    "id": "oj-c.ListView#item",
+    "name": "item",
+    "kind": "member",
+    "longname": "oj-c.ListView#item",
+    "optional": true,
+    "scope": "instance",
+    "description": "The item option contains a subset of options for items.",
+    "meta": {
+      "filename": "list-view.tsx",
+      "path": "web/components/oj-c/list-view"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "{ padding?: 'disabled' | 'enabled' | oj-c.ListView.ItemPadding; }",
+        "jsdocOverride": true
+      }
+    ]
+  },
   {
     "memberof": "oj-c.ListView",
     "id": "oj-c.ListView#setProperty",
@@ -453,7 +531,7 @@
     "name": "ojItemAction",
     "kind": "event",
     "longname": "oj-c.ListView#event:ojItemAction",
-    "description": "Triggered when user performs an action gesture on an item while ListView is in navigation mode.  The action gestures include:\n<ul>\n  <li>User clicks anywhere in an item</li>\n  <li>User taps anywhere in an item</li>\n  <li>User pressed spacebar on an item</li>\n</ul>",
+    "description": "Triggered when user performs an action gesture on an item while ListView is in navigation mode.  The action gestures include:\n<ul>\n  <li>User clicks anywhere in an item</li>\n  <li>User taps anywhere in an item</li>\n  <li>User pressed enter key while item has focus</li>\n</ul>",
     "meta": {
       "filename": "list-view.tsx",
       "path": "web/components/oj-c/list-view"
@@ -947,5 +1025,65 @@
         ]
       }
     ]
+  },
+  {
+    "memberof": "oj-c.ListView",
+    "id": "oj-c.ListView.ItemPadding",
+    "name": "ItemPadding",
+    "kind": "typedef",
+    "longname": "oj-c.ListView.ItemPadding",
+    "scope": "static",
+    "description": "",
+    "type": {
+      "names": [
+        "Object"
+      ]
+    },
+    "meta": {
+      "filename": "list-view.tsx",
+      "path": "web/components/oj-c/list-view"
+    },
+    "properties": [
+      {
+        "name": "bottom",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      },
+      {
+        "name": "end",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      },
+      {
+        "name": "start",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      },
+      {
+        "name": "top",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      }
+    ]
   }
 ]