@pingux/astro 2.20.0-alpha.0 → 2.20.0-alpha.10

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

@@ -26,6 +26,7 @@ export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
 export { default as Button } from './components/Button';
 export * from './components/Button';
+export { default as ButtonBar } from './components/ButtonBar/ButtonBar';
 export { default as Calendar } from './components/Calendar';
 export * from './components/Calendar';
 export { default as CalendarCell } from './components/Calendar/CalendarCell';
@@ -162,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';
 
@@ -171,11 +174,10 @@ 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
-export { default as ButtonBar } from './experimental/ButtonBar/ButtonBar';
 export { default as EditButton } from './experimental/EditButton';
 export { default as PanelHeader } from './experimental/PanelHeader';
 export { default as PanelHeaderCloseButton } from './experimental/PanelHeader/controls/PanelHeaderCloseButton';

package/lib/recipes/CountryPicker.stories.js

@@ -3,10 +3,13 @@ import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entrie
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
 import { countries as countriesObj } from 'countries-list';
+import { withDesign } from 'storybook-addon-designs';
 import { Box, ComboBoxField, Input, Item } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Country Picker'
+  title: 'Recipes/Country Picker',
+  decorators: [withDesign]
 };
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
@@ -117,4 +120,10 @@ export var Default = function Default() {
     onChange: onPhoneNumberValueChange,
     value: phoneNumber
   })));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.countryPicker["default"]
+  }
 };

package/lib/recipes/{EditableInput.stories.js → InlineEditing.stories.js}

@@ -13,10 +13,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import CheckIcon from '@pingux/mdi-react/CheckIcon';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { withDesign } from 'storybook-addon-designs';
 import { Box, Icon, IconButton, TextAreaField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Editable Input'
+  title: 'Recipes/Inline Editing',
+  decorators: [withDesign]
 };
 var EditableAreaContext = /*#__PURE__*/createContext();
 var EditableAreaProvider = EditableAreaContext.Provider;
@@ -85,6 +88,12 @@ export var Default = function Default() {
     controlProps: controlProps
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.inlineEditing["default"]
+  }
+};
 
 /**
  * Editable

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -4,6 +4,7 @@ import CogsIcon from '@pingux/mdi-react/CogsIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import DragVerticalIcon from '@pingux/mdi-react/DragVerticalIcon';
 import { Box, ComboBoxField, Icon, IconButton, IconButtonToggle, Item } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/One Way to Bidirectional Arrow'
@@ -252,4 +253,10 @@ export var Default = function Default() {
       name: 'Delete Icon'
     }
   })))));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.OnewayToBidirectionalArrow["default"]
+  }
 };

package/lib/styles/variants/variants.js

@@ -14,6 +14,7 @@ import accordion from '../../components/AccordionGroup/Accordion.styles';
 import box from '../../components/Box/Box.styles';
 import bracket from '../../components/Bracket/Bracket.styles';
 import breadcrumb from '../../components/Breadcrumbs/Breadcrumb.styles';
+import buttonBar from '../../components/ButtonBar/ButtonBar.styles';
 import calendar from '../../components/Calendar/Calendar.styles';
 import callout from '../../components/Callout/Callout.styles';
 import codeView from '../../components/CodeView/CodeView.styles';
@@ -44,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,
@@ -51,6 +53,7 @@ export default _objectSpread({
   box: box,
   bracket: bracket,
   breadcrumb: breadcrumb,
+  buttonBar: buttonBar,
   calendar: calendar,
   callout: callout,
   codeView: codeView,
@@ -80,5 +83,6 @@ export default _objectSpread({
   stepper: stepper,
   table: table,
   timeZone: timeZone,
-  tooltip: tooltip
+  tooltip: tooltip,
+  treeView: treeView
 }, tab);

package/lib/utils/designUtils/figmaLinks.js

@@ -17,6 +17,10 @@ export var FIGMA_LINKS = {
   button: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
   },
+  buttonBar: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20551&mode=dev',
+    rightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20657&mode=dev'
+  },
   calendar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
   },
@@ -39,6 +43,9 @@ export var FIGMA_LINKS = {
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
+  countryPicker: {
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
@@ -52,6 +59,9 @@ export var FIGMA_LINKS = {
   iconButton: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A2520&t=We3h7LaaFJQnxdSy-1'
   },
+  inlineEditing: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
+  },
   link: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8708-29543&t=8Wwd3tIBh3GEjCJB-0'
   },
@@ -79,6 +89,9 @@ export var FIGMA_LINKS = {
   navBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=548-3473&t=8Wwd3tIBh3GEjCJB-0'
   },
+  OnewayToBidirectionalArrow: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },

package/package.json

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