restored hig flyout for now..

4 files changed, 126 insertions, 6 deletions

diff --git a/package-lock.json b/package-lock.json
index 2ae22808e..8525c6e8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -219,6 +219,9 @@
                 "xregexp": "^4.4.1"
             },
             "devDependencies": {
+                "@hig/flyout": "^1.3.1",
+                "@hig/theme-context": "^2.1.3",
+                "@hig/theme-data": "^2.23.1",
                 "@types/adm-zip": "^0.4.34",
                 "@types/animejs": "^2.0.2",
                 "@types/archiver": "^3.1.1",
@@ -4244,6 +4247,72 @@
                 "supercluster": "^7.1.3"
             }
         },
+        "node_modules/@hig/flyout": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@hig/flyout/-/flyout-1.3.1.tgz",
+            "integrity": "sha512-dj69PnHtvXQ+IbbFv167ObHCuSVVv5ycMdFIOPMY+SCqSCssYiu1PkEI6eQxOePAb3MYhF4u7oi3Vy2XmxfkgA==",
+            "dev": true,
+            "dependencies": {
+                "@hig/utils": "^0.4.1",
+                "emotion": "^10.0.0",
+                "prop-types": "^15.7.1",
+                "react-transition-group": "^2.3.1"
+            },
+            "peerDependencies": {
+                "@hig/theme-context": "^3.0.3",
+                "@hig/theme-data": "^2.22.0",
+                "react": "^15.4.1 || ^16.3.2"
+            }
+        },
+        "node_modules/@hig/flyout/node_modules/react-transition-group": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+            "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+            "dev": true,
+            "dependencies": {
+                "dom-helpers": "^3.4.0",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2",
+                "react-lifecycles-compat": "^3.0.4"
+            },
+            "peerDependencies": {
+                "react": ">=15.0.0",
+                "react-dom": ">=15.0.0"
+            }
+        },
+        "node_modules/@hig/theme-context": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@hig/theme-context/-/theme-context-2.1.3.tgz",
+            "integrity": "sha512-c0Ju+Z8C532ZZtjwOLzN+XeO+pL3kqUawu6ZG3J084MH5RM9W8JCKyMf4D9Qr38jFWoiX6u8yiSxxjV/mz9Sqw==",
+            "dev": true,
+            "dependencies": {
+                "create-react-context": "^0.2.3",
+                "prop-types": "^15.6.1"
+            },
+            "peerDependencies": {
+                "@hig/theme-data": "*",
+                "react": "^15.4.1 || ^16.3.2"
+            }
+        },
+        "node_modules/@hig/theme-data": {
+            "version": "2.26.0",
+            "resolved": "https://registry.npmjs.org/@hig/theme-data/-/theme-data-2.26.0.tgz",
+            "integrity": "sha512-jEiCieyafBePgFLlIPRPIhNPulWELeOgWJUY4wxdvozRdFUEq50ydx0ysuYPQOh4ucy0jI7Q8FcsBd+aEe7WXQ==",
+            "dev": true,
+            "dependencies": {
+                "tinycolor2": "^1.4.1"
+            }
+        },
+        "node_modules/@hig/utils": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@hig/utils/-/utils-0.4.1.tgz",
+            "integrity": "sha512-yx8HF5dLNo/WwwF5dR9P1pZu0tKhCuItrqbGbg52HpLUsptODBs/1ATT76cBaAJ7dSBCeNOKKiE4WKSrsA8bdQ==",
+            "dev": true,
+            "dependencies": {
+                "emotion": "^10.0.0",
+                "lodash.memoize": "^4.1.2"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.8",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -14127,6 +14196,18 @@
                 "node": ">= 6.9.0"
             }
         },
+        "node_modules/create-emotion": {
+            "version": "10.0.27",
+            "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz",
+            "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==",
+            "dev": true,
+            "dependencies": {
+                "@emotion/cache": "^10.0.27",
+                "@emotion/serialize": "^0.11.15",
+                "@emotion/sheet": "0.9.4",
+                "@emotion/utils": "0.11.3"
+            }
+        },
         "node_modules/create-error-class": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
@@ -14138,6 +14219,20 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/create-react-context": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+            "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+            "dev": true,
+            "dependencies": {
+                "fbjs": "^0.8.0",
+                "gud": "^1.0.0"
+            },
+            "peerDependencies": {
+                "prop-types": "^15.0.0",
+                "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
+            }
+        },
         "node_modules/create-require": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -15812,6 +15907,16 @@
                 "node": ">= 4"
             }
         },
+        "node_modules/emotion": {
+            "version": "10.0.27",
+            "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz",
+            "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==",
+            "dev": true,
+            "dependencies": {
+                "babel-plugin-emotion": "^10.0.27",
+                "create-emotion": "^10.0.27"
+            }
+        },
         "node_modules/encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -22568,6 +22673,12 @@
             "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
             "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
         },
+        "node_modules/lodash.memoize": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+            "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+            "dev": true
+        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 55fb2ec62..4ef6d428e 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,9 @@
         "@types/webpack-hot-middleware": "^2.25.6",
         "@types/xregexp": "^4.4.0",
         "@types/youtube": "0.0.39",
+        "@hig/flyout": "^1.3.1",
+        "@hig/theme-context": "^2.1.3",
+        "@hig/theme-data": "^2.23.1",
         "awesome-typescript-loader": "^5.2.1",
         "chai": "^4.3.6",
         "copy-webpack-plugin": "^11.0.0",
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 58e30b284..6e6c8a5f1 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -28,6 +28,9 @@ import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
 import { PinProps } from './nodes/trails';
 import { TemplateMenu } from './TemplateMenu';
 import * as React from 'react';
+const higflyout = require('@hig/flyout');
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 const cloud: IconProp = 'cloud-upload-alt';
 const fetch: IconProp = 'sync-alt';
@@ -420,7 +423,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Show metadata panel</div>}>
                 <div className="documentButtonBar-linkFlyout">
-                    {/* <Flyout
+                    <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         content={
                             <MetadataEntryMenu
@@ -434,7 +437,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                         <div className={'documentButtonBar-linkButton-' + 'empty'} onPointerDown={e => e.stopPropagation()}>
                             {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
                         </div>
-                    </Flyout> */}
+                    </Flyout>
                 </div>
             </Tooltip>
         );
@@ -498,7 +501,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
                 <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
-                    {/* <Flyout
+                    <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         onOpen={action(() => (this._embedDown = true))}
                         onClose={action(() => (this._embedDown = false))}
@@ -513,7 +516,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                         <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
                             <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />
                         </div>
-                    </Flyout> */}
+                    </Flyout>
                 </div>
             </Tooltip>
         );
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 569a76546..7724c786d 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -18,6 +18,9 @@ import { EditableView } from '../EditableView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { CollectionStackingView } from './CollectionStackingView';
 import './CollectionStackingView.scss';
+const higflyout = require('@hig/flyout');
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 interface CMVFieldRowProps {
     rows: () => number;
@@ -335,11 +338,11 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                     )}
                     {noChrome || evContents === `NO  ${key.toUpperCase()} VALUE` ? null : (
                         <div className="collectionStackingView-sectionOptions" onPointerDown={e => e.stopPropagation()}>
-                            {/* <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
+                            <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
                                     <FontAwesomeIcon icon="ellipsis-v" size="lg" />
                                 </button>
-                            </Flyout> */}
+                            </Flyout>
                         </div>
                     )}
                 </div>