@pingux/astro 1.1.0-alpha.9 → 1.1.0

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -14,11 +14,30 @@ var useOverlayPanelState = function useOverlayPanelState() {
   var isDefaultOpen = props.isDefaultOpen,
       isOpen = props.isOpen,
       onOpenChange = props.onOpenChange;
-  return useOverlayTriggerState({
+  var state = useOverlayTriggerState({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
   });
+
+  var onClose = function onClose(stateProp, triggerRef, onCloseProp) {
+    if (stateProp) {
+      stateProp.close();
+    }
+
+    if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+      triggerRef.current.focus();
+    }
+
+    if (onCloseProp) {
+      onCloseProp();
+    }
+  };
+
+  return {
+    state: state,
+    onClose: onClose
+  };
 };
 
 export default useOverlayPanelState;

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -7,8 +7,12 @@ test('default useOverlayPanelState', function () {
       result = _renderHook.result;
 
   expect(result.current).toEqual(expect.objectContaining({
-    open: expect.any(Function),
-    close: expect.any(Function),
-    toggle: expect.any(Function)
+    state: {
+      open: expect.any(Function),
+      close: expect.any(Function),
+      toggle: expect.any(Function),
+      isOpen: expect.any(Boolean)
+    },
+    onClose: expect.any(Function)
   }));
 });

package/lib/index.js

@@ -27,6 +27,7 @@ export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
 export { default as Chip } from './components/Chip';
 export * from './components/Chip';
+export { default as CodeView } from './components/CodeView';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
 export { default as ColorField } from './components/ColorField';
@@ -68,6 +69,10 @@ export { default as Messages } from './components/Messages';
 export * from './components/Messages';
 export { default as Modal } from './components/Modal';
 export * from './components/Modal';
+export { default as NavBar } from './components/NavBar';
+export * from './components/NavBar';
+export { default as NavBarSection } from './components/NavBarSection';
+export * from './components/NavBarSection';
 export { default as MultivaluesField } from './components/MultivaluesField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';

package/lib/styles/variants/accordion.js

@@ -56,6 +56,36 @@ var accordionGridHeader = {
     }
   }
 };
+var accordionGridHeaderNav = {
+  padding: '10px 15px 10px 15px',
+  cursor: 'pointer',
+  minHeight: '40px',
+  lineHeight: '30px',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  color: 'neutral.95',
+  flexGrow: 1,
+  fontWeight: 0,
+  fontSize: '16px',
+  mt: '5px',
+  '&.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.10'
+  }
+};
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -69,5 +99,6 @@ export default {
   accordionGridBody: accordionGridBody,
   accordionTitle: accordionTitle,
   accordion: accordion,
-  accordionBody: accordionBody
+  accordionBody: accordionBody,
+  accordionGridHeaderNav: accordionGridHeaderNav
 };

package/lib/styles/variants/boxes.js

@@ -189,6 +189,26 @@ var expandableRow = {
     }
   }
 };
+var navBar = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var navBarSectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+var navBarItemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -270,5 +290,8 @@ export default {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  navBar: navBar,
+  navBarSectionContainer: navBarSectionContainer,
+  navBarItemHeaderContainer: navBarItemHeaderContainer
 };

package/lib/styles/variants/buttons.js

@@ -52,6 +52,33 @@ var defaultFocus = {
   outline: 'none',
   boxShadow: 'focus'
 };
+var navItemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+  display: 'block',
+  color: 'neutral.95',
+  fontSize: 'sm',
+  fontWeight: 1,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  lineHeight: '16px',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+};
 var iconButton = {
   justifyContent: 'center',
   appearance: 'none',
@@ -67,7 +94,7 @@ var iconButton = {
   width: 'inherit',
   height: 'inherit',
   path: {
-    fill: 'neutral.20'
+    fill: 'neutral.40'
   },
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -516,6 +543,7 @@ export default {
   text: text,
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
+  navItemButton: navItemButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
   square: square,

package/lib/styles/variants/codeView.js

@@ -0,0 +1,68 @@
+import 'a11y-syntax-highlighting/dist/prism/a11y-light.min.css';
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+export default {
+  wrapper: wrapper,
+  lineNo: lineNo
+};

package/lib/styles/variants/link.js

@@ -1,5 +1,5 @@
 var link = {
-  color: 'active',
+  color: 'white',
   fontFamily: 'standard',
   fontSize: 'md',
   textDecoration: 'none',

package/lib/styles/variants/separator.js

@@ -1,4 +1,18 @@
-export default {
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var base = {
   bg: 'neutral.80',
   width: '100%',
   height: '1px',
@@ -8,4 +22,22 @@ export default {
     height: '100%',
     mx: '5px'
   }
+};
+
+var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  width: '100%',
+  backgroundColor: 'neutral.60'
+});
+
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  ml: '45px',
+  width: 'calc(100% - 75px)',
+  mb: '15px',
+  backgroundColor: 'neutral.60'
+});
+
+export default {
+  base: base,
+  navBarSeparator: navBarSeparator,
+  navBarSubtitleSeparator: navBarSubtitleSeparator
 };

package/lib/styles/variants/text.js

@@ -119,6 +119,19 @@ var expandableRow = {
     }
   }
 };
+var navBarSubtitle = {
+  fontWeight: 3,
+  fontSize: '11px',
+  color: 'accent.80'
+};
+
+var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: '13px',
+  fontSize: '13px',
+  fontWeight: 1
+});
+
 export var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -182,6 +195,8 @@ export var text = {
     textOverflow: 'ellipsis'
   }),
   expandableRow: expandableRow,
+  navBarHeaderText: navBarHeaderText,
+  navBarSubtitle: navBarSubtitle,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',

package/lib/styles/variants/variants.js

@@ -14,6 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import accordion from './accordion';
 import boxes from './boxes';
+import codeView from './codeView';
 import images from './images';
 import imageUpload from './imageUpload';
 import link from './link';
@@ -35,6 +36,7 @@ import tooltip from './tooltip';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
+  codeView: codeView,
   images: images,
   imageUpload: imageUpload,
   loader: loader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.9",
+  "version": "1.1.0",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -78,7 +78,7 @@
     "@react-aria/color": "^3.0.0-beta.2",
     "@react-aria/combobox": "^3.0.0",
     "@react-aria/dialog": "^3.1.2",
-    "@react-aria/focus": "^3.2.3",
+    "@react-aria/focus": "^3.5.0",
     "@react-aria/grid": "^3.0.0-beta.1",
     "@react-aria/i18n": "^3.3.0",
     "@react-aria/interactions": "^3.5.0",
@@ -126,12 +126,14 @@
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "@tippyjs/react": "4.2.0",
+    "a11y-syntax-highlighting": "0.2.0",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "emotion-normalize": "^11.0.1",
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
     "moment": "^2.29.1",
+    "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",