From b1ecaba6a8490169daf50a67d34fb943f4b5cdc2 Mon Sep 17 00:00:00 2001
From: Alla Doroshkevych <alla.doroshkevych@oracle.com>
Date: Wed, 24 Apr 2024 12:04:00 -0400
Subject: [PATCH] popup examples added

---
 .../Examples.2/CellContent.7.doc.mdx          |  5 +-
 .../Examples.2/CellContent.jsx                | 64 +++++++++++++++++--
 packages/terra-popup/src/_PopupContent.jsx    |  2 +
 3 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.7.doc.mdx b/packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.7.doc.mdx
index 8605806d228..5b3f64c2bb0 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.7.doc.mdx
+++ b/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>
 
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.jsx
index 18eea51a0c3..5c8d347dc54 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.jsx
+++ b/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,
   },
diff --git a/packages/terra-popup/src/_PopupContent.jsx b/packages/terra-popup/src/_PopupContent.jsx
index 29182bdcc3d..1af58101991 100644
--- a/packages/terra-popup/src/_PopupContent.jsx
+++ b/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 */}