popup examples added

packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.7.doc.mdx

@@ -7,8 +7,9 @@ import CellContent from './CellContent?dev-site-examples';
 <Notice variant="important" ariaLevel="3">
 
 * Only one interactive element per cell is allowed. Because the Compact Intercative List component is one tab stop and the arrow keys are used to move between cells, these keys are not available to move to multiple interactive elements in a cell. 
-* Interactive elements are limited to [terra-button](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/button/about), [terra-hyperlink](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/hyperlink/about), and [terra-menu](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/menu/menu). Currently, the cell does not restrict interaction when active, 
-and all interactive elements keep their native arrow key interactions. If you place a text input, a text area, or select elements in a cell, you are unable to move away from the cell with the arrow keys. 
+* Interactive elements are limited to [terra-button](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/button/about), [terra-hyperlink](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/hyperlink/about), [terra-menu](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/menu/menu), and [terra-popup](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/popup/popup). 
+Currently, the cell does not restrict interaction when active, and all interactive elements keep their native arrow key interactions. 
+If you place a text input, a text area, or select elements in a cell, you are unable to move away from the cell with the arrow keys. 
 
 </Notice>
 

packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.jsx

@@ -1,14 +1,16 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import CompactInteractiveList, { alignTypes } from 'terra-compact-interactive-list';
 import {
   IconFeaturedOff, IconFeatured, IconMultipleResultsNormal, IconMultipleResultsNotNormal, IconMultipleResultsCritical,
 } from 'terra-icon';
 import Button from 'terra-button';
 import Hyperlink from 'terra-hyperlink';
+import Checkbox, { CheckboxField } from 'terra-form-checkbox';
+import Popup from 'terra-popup';
 import BasicMenu from '../../menu/example/BasicMenu';
 
 // eslint-disable-next-line no-alert
-const buttonCell = <Button text="Learn more" />;
+const buttonCell = <Button text="Learn more" onClick={() => alert('Learn more button was clicked')} />;
 const anchorCell = <Hyperlink href="https://www.cerner.com" text="Documents" />;
 const iconResultsNormal = <IconMultipleResultsNormal a11yLabel="Results normal" height="1.5em" width="1.5em" />;
 const iconResultsNotNormal = <IconMultipleResultsNotNormal a11yLabel="Results not normal" height="1.5em" width="1.5em" />;
@@ -34,7 +36,57 @@ const FeaturedIcon = () => {
   const [isFeatured, setIsFeatured] = useState(false);
   const onButtonClick = () => setIsFeatured(!isFeatured);
   return (
-    isFeatured ? <Button variant="utility" text="Unfavorite item" icon={<IconFeatured />} onClick={onButtonClick} /> : <Button variant="utility" text="Favorite item" icon={<IconFeaturedOff />} onClick={onButtonClick} />
+    isFeatured
+      ? <Button variant="utility" text="Unfavorite item" icon={<IconFeatured />} onClick={onButtonClick} /> 
+      : <Button variant="utility" text="Favorite item" icon={<IconFeaturedOff />} onClick={onButtonClick} />
+  );
+};
+
+const PopupWithInteractiveContent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const buttonRef = useRef(null);
+
+  const setButtonNode = (node) => { buttonRef.current = node; };
+  const getButtonNode = () => buttonRef.current;
+  const handleButtonClick = () => { setIsOpen(true); };
+  const handleRequestClose = () => { setIsOpen(false); };
+  const closeAndSetFocus = () => {
+    handleRequestClose();
+    buttonRef.current.focus();
+  };
+
+  const handleOnChange = (e) => {
+    const selectedAnswers = [...selected];
+    if (e.currentTarget.checked) {
+      selectedAnswers.push(e.currentTarget.value);
+    } else {
+      selectedAnswers.splice(selectedAnswers.indexOf(e.currentTarget.value), 1);
+    }
+    setSelected(selectedAnswers);
+  };
+
+  return (
+    <>
+      {/* <button onClick={handleButtonClick} ref={ref => setButtonNode(ref)}>TTT</button> */}
+      <Button text="Clinical Suite" onClick={handleButtonClick} refCallback={setButtonNode} />
+      <Popup
+        isOpen={isOpen}
+        targetRef={getButtonNode}
+        onRequestClose={handleRequestClose}
+        contentHeight="auto"
+      >
+        {/* eslint-disable-next-line react/forbid-dom-props */}
+        <div style={{ padding: '1em' }}>
+          <CheckboxField legend="Do you want to use any of our clinical applications?">
+            <Checkbox id="drug-database" name="applications[]" labelText="Drug Database" onChange={handleOnChange} value="drug-database" />
+            <Checkbox id="vitals-collection" name="applications[]" labelText="Vitals Collection" onChange={handleOnChange} value="vitals-collection" />
+            <Checkbox id="immunization-manager" name="applications[]" labelText="Immunization Manager" onChange={handleOnChange} value="immunization-manager" />
+          </CheckboxField>
+          <Button text="Submit Request" onClick={closeAndSetFocus} />
+        </div>
+      </Popup>
+    </>
   );
 };
 
@@ -52,7 +104,7 @@ const rows = [
     id: 'row_2',
     cells: [
       { content: iconResultsNormal },
-      { content: 'Initial observation Care/Day High Severity 99220 (2)' },
+      { content: 'Initial Observation Care/Day High Severity 99220 (2)' },
       { content: buttonCell },
       { content: <FeaturedIcon /> },
     ],
@@ -71,7 +123,7 @@ const rows = [
     cells: [
       { content: ' ' },
       { content: 'Sbsq Observation Care/Day High Severity 99226 (4)' },
-      { content: buttonCell },
+      { content: <PopupWithInteractiveContent /> },
       { content: <FeaturedIcon /> },
     ],
   },
@@ -106,7 +158,7 @@ const cols = [
   {
     id: 'Column-2',
     displayName: 'Details',
-    width: '210px',
+    width: '225px',
     align: alignTypes.RIGHT,
     isSelectable: true,
   },

packages/terra-popup/src/_PopupContent.jsx

@@ -237,6 +237,8 @@ class PopupContent extends React.Component {
             onResize={this.handleOnResize}
             refCallback={refCallback}
             role={popupContentRole || null}
+            onKeyDown={event => event.stopPropagation()} // Added for Popup support in terra-compact-interactive-list. As focus trap doesn't stop key press event propagation to the CIL cell, it interferes with cell key press event handler.
+            onFocus={event => event.stopPropagation()} // Added for Popup support in terra-compact-interactive-list. As popup semantically is not a CIL cell child, its focus event interferes with cell focus.
           >
             {arrowContent}
             {/* eslint-disable-next-line react/forbid-dom-props */}