@pingux/astro 2.20.0-alpha.7 → 2.20.0-alpha.9

package/lib/components/TreeView/TreeViewItem.js

@@ -0,0 +1,60 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import FileIcon from '@pingux/mdi-react/FileIcon';
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from '../../context/TreeViewContext';
+import { Box } from '../../index';
+import TreeViewRow from './TreeViewRow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TreeViewItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context, _context2, _context3;
+  var item = props.item,
+    title = props.title;
+  var treeItemRef = useRef();
+  /* istanbul ignore next */
+  useImperativeHandle(ref, function () {
+    return treeItemRef.current;
+  });
+  var _useTreeViewContext = useTreeViewContext(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var isExpanded = _includesInstanceProperty(_context = _Array$from(state.expandedKeys)).call(_context, item.key);
+  var isSelected = _includesInstanceProperty(_context2 = _Array$from(tree.selectedKeys)).call(_context2, item.key);
+  var isDisabled = _includesInstanceProperty(_context3 = _Array$from(state.disabledKeys)).call(_context3, item.key);
+
+  // this component may seem unnecessary, but it will be where the
+  // useOption and dragAndDrop stuff will go
+  // this comment will be removed at that time.
+
+  return ___EmotionJSX(Box, {
+    as: "li",
+    isRow: true,
+    ref: treeItemRef,
+    role: "treeitem",
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled,
+    sx: {
+      width: '100%',
+      ml: '36px',
+      ':not(:last-child)': {
+        pb: 'sm'
+      }
+    }
+  }, ___EmotionJSX(TreeViewRow, {
+    item: item,
+    title: title,
+    mainIcon: FileIcon,
+    isSelected: isSelected,
+    isExpanded: isExpanded,
+    isDisabled: isDisabled
+  }));
+});
+TreeViewItem.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  name: PropTypes.string,
+  title: PropTypes.string
+};
+export default TreeViewItem;

package/lib/components/TreeView/TreeViewRow.js

@@ -0,0 +1,135 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "iconButtonProps"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import FolderIcon from '@pingux/mdi-react/FolderIcon';
+import LockIcon from '@pingux/mdi-react/LockIcon';
+import MenuDownIcon from '@pingux/mdi-react/MenuDownIcon';
+import MenuRight from '@pingux/mdi-react/MenuRightIcon';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from '../../context/TreeViewContext';
+import { useStatusClasses } from '../../hooks';
+import { Box, Icon, IconButtonToggle, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+    _props$mainIcon = props.mainIcon,
+    mainIcon = _props$mainIcon === void 0 ? FolderIcon : _props$mainIcon,
+    _props$lastIcon = props.lastIcon,
+    lastIcon = _props$lastIcon === void 0 ? LockIcon : _props$lastIcon,
+    item = props.item,
+    items = props.items,
+    isExpanded = props.isExpanded,
+    isSelected = props.isSelected,
+    isDisabled = props.isDisabled,
+    iconButtonProps = props.iconButtonProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var treeRowRef = useRef();
+  /* istanbul ignore next */
+  useImperativeHandle(ref, function () {
+    return treeRowRef.current;
+  });
+  var key = item.key;
+  var _useTreeViewContext = useTreeViewContext(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var pressIcon = function pressIcon(e) {
+    state.toggleKey(item.key);
+    if (iconButtonProps !== null && iconButtonProps !== void 0 && iconButtonProps.onPress) {
+      iconButtonProps.onPress(e);
+    }
+  };
+  var pressRow = function pressRow() {
+    tree.setSelectedKeys([item.key]);
+  };
+  var _usePress = usePress(_objectSpread(_objectSpread({}, others), {}, {
+      ref: treeRowRef,
+      onPress: pressRow
+    })),
+    isPressed = _usePress.isPressed,
+    pressProps = _usePress.pressProps;
+  var _useStatusClasses = useStatusClasses('', {
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isExpanded: isExpanded,
+      isPressed: isPressed,
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedProps = mergeProps(hoverProps, pressProps, others);
+  return ___EmotionJSX(Box, _extends({
+    ref: treeRowRef,
+    isRow: true,
+    alignItems: "center",
+    gap: "xs",
+    sx: {
+      flexGrow: 1
+    },
+    className: classNames,
+    key: "".concat(key, " box")
+  }, mergedProps), (items === null || items === void 0 ? void 0 : items.length) > 0 && ___EmotionJSX(IconButtonToggle, {
+    onToggle: pressIcon,
+    isToggled: isExpanded,
+    defaultIcon: MenuRight,
+    toggledIcon: MenuDownIcon,
+    iconProps: {
+      size: 25,
+      title: "".concat(title, " expand or collapse button")
+    },
+    buttonProps: {
+      'aria-label': "".concat(title, " expand or collapse button")
+    }
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    className: classNames,
+    alignItems: "center",
+    gap: "xs",
+    variant: "treeView.treeRow"
+  }, ___EmotionJSX(Icon, {
+    color: "focus",
+    icon: mainIcon,
+    size: 25,
+    title: "folder icon",
+    alt: "folder icon"
+  }), ___EmotionJSX(Text, {
+    className: classNames
+  }, title), ___EmotionJSX(Icon, {
+    icon: lastIcon,
+    size: 15,
+    color: "accent.80",
+    title: "lock icon",
+    alt: "lock icon"
+  })));
+});
+TreeViewRow.propTypes = {
+  isSelected: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  title: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+  iconButtonProps: PropTypes.shape({
+    onPress: PropTypes.func
+  }),
+  item: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  mainIcon: PropTypes.elementType,
+  lastIcon: PropTypes.elementType
+};
+export default TreeViewRow;

package/lib/components/TreeView/TreeViewSection.js

@@ -0,0 +1,74 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from '../../context/TreeViewContext';
+import { Box, TreeViewItem } from '../../index';
+import { SectionOrItemRender } from './TreeView';
+import TreeViewRow from './TreeViewRow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context, _context2, _context3, _context4;
+  var item = props.item,
+    items = props.items,
+    title = props.title;
+  var treeSectionRef = useRef();
+  /* istanbul ignore next */
+  useImperativeHandle(ref, function () {
+    return treeSectionRef.current;
+  });
+  var _useTreeViewContext = useTreeViewContext(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var isExpanded = _includesInstanceProperty(_context = _Array$from(state.expandedKeys)).call(_context, item.key);
+  var isSelected = _includesInstanceProperty(_context2 = _Array$from(tree.selectedKeys)).call(_context2, item.key);
+  var isDisabled = _includesInstanceProperty(_context3 = _Array$from(state.disabledKeys)).call(_context3, item.key);
+  return ___EmotionJSX(Box, {
+    ref: treeSectionRef,
+    as: "li",
+    sx: {
+      ':not(:last-child)': {
+        pb: 'sm'
+      }
+    },
+    role: "treeitem",
+    "aria-expanded": isExpanded,
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled
+  }, ___EmotionJSX(TreeViewRow, {
+    item: item,
+    title: title,
+    items: items,
+    isExpanded: isExpanded,
+    isSelected: isSelected,
+    isDisabled: isDisabled
+  }), isExpanded && ___EmotionJSX(Box, {
+    as: "ul",
+    role: "group",
+    key: "".concat(item.key, " ul"),
+    sx: {
+      pl: 'md'
+    }
+  }, _mapInstanceProperty(_context4 = _Array$from(items)).call(_context4, function (_item) {
+    var _item$value$items;
+    return SectionOrItemRender(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, ___EmotionJSX(TreeViewSection, {
+      item: _item,
+      items: _item.children,
+      title: _item.value.title,
+      key: _item.value.title
+    }), ___EmotionJSX(TreeViewItem, {
+      item: _item,
+      title: _item.value.title,
+      key: _item.value.title
+    }));
+  })));
+});
+TreeViewSection.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+  item: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  title: PropTypes.string
+};
+export default TreeViewSection;

package/lib/components/TreeView/index.js

@@ -0,0 +1,3 @@
+export { default } from './TreeView';
+export { default as TreeViewItem } from './TreeViewItem';
+export { default as TreeViewSection } from './TreeViewSection';

package/lib/context/TreeViewContext/index.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var TreeViewContext = /*#__PURE__*/createContext(null);
+export var useTreeViewContext = function useTreeViewContext() {
+  return useContext(TreeViewContext);
+};

package/lib/index.js

@@ -163,6 +163,8 @@ export * from './components/TextField';
 export { default as TimeZonePicker } from './components/TimeZonePicker';
 export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
+export { default as TreeView } from './components/TreeView';
+export * from './components/TreeView';
 export { default as PageHeader } from './experimental/PageHeader';
 export * from './experimental/PageHeader';
 
@@ -172,7 +174,7 @@ export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Item, Section, useOverlayTriggerState } from 'react-stately';
+export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
 export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
 
 // Experimental

package/lib/styles/variants/variants.js

@@ -45,6 +45,7 @@ import table from '../../components/Table/Table.styles';
 import * as tab from '../../components/Tabs/Tabs.style';
 import timeZone from '../../components/TimeZonePicker/TimeZone.styles';
 import tooltip from '../../components/TooltipTrigger/Tooltip.styles';
+import treeView from '../../components/TreeView/TreeView.styles';
 import panelHeader from '../../experimental/PanelHeader/PanelHeader.styles';
 export default _objectSpread({
   accordion: accordion,
@@ -82,5 +83,6 @@ export default _objectSpread({
   stepper: stepper,
   table: table,
   timeZone: timeZone,
-  tooltip: tooltip
+  tooltip: tooltip,
+  treeView: treeView
 }, tab);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.20.0-alpha.7",
+  "version": "2.20.0-alpha.9",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",