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

package/lib/cjs/components/TreeView/TreeViewItem.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _react = _interopRequireWildcard(require("react"));
+var _FileIcon = _interopRequireDefault(require("@pingux/mdi-react/FileIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TreeViewContext = require("../../context/TreeViewContext");
+var _index = require("../../index");
+var _TreeViewRow = _interopRequireDefault(require("./TreeViewRow"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var TreeViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context, _context2, _context3;
+  var item = props.item,
+    title = props.title;
+  var treeItemRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return treeItemRef.current;
+  });
+  var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var isExpanded = (0, _includes["default"])(_context = (0, _from["default"])(state.expandedKeys)).call(_context, item.key);
+  var isSelected = (0, _includes["default"])(_context2 = (0, _from["default"])(tree.selectedKeys)).call(_context2, item.key);
+  var isDisabled = (0, _includes["default"])(_context3 = (0, _from["default"])(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 (0, _react2.jsx)(_index.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'
+      }
+    }
+  }, (0, _react2.jsx)(_TreeViewRow["default"], {
+    item: item,
+    title: title,
+    mainIcon: _FileIcon["default"],
+    isSelected: isSelected,
+    isExpanded: isExpanded,
+    isDisabled: isDisabled
+  }));
+});
+TreeViewItem.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  name: _propTypes["default"].string,
+  title: _propTypes["default"].string
+};
+var _default = TreeViewItem;
+exports["default"] = _default;

package/lib/cjs/components/TreeView/TreeViewRow.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _FolderIcon = _interopRequireDefault(require("@pingux/mdi-react/FolderIcon"));
+var _LockIcon = _interopRequireDefault(require("@pingux/mdi-react/LockIcon"));
+var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
+var _MenuRightIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuRightIcon"));
+var _interactions = require("@react-aria/interactions");
+var _utils = require("@react-aria/utils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TreeViewContext = require("../../context/TreeViewContext");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "iconButtonProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var title = props.title,
+    _props$mainIcon = props.mainIcon,
+    mainIcon = _props$mainIcon === void 0 ? _FolderIcon["default"] : _props$mainIcon,
+    _props$lastIcon = props.lastIcon,
+    lastIcon = _props$lastIcon === void 0 ? _LockIcon["default"] : _props$lastIcon,
+    item = props.item,
+    items = props.items,
+    isExpanded = props.isExpanded,
+    isSelected = props.isSelected,
+    isDisabled = props.isDisabled,
+    iconButtonProps = props.iconButtonProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var treeRowRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return treeRowRef.current;
+  });
+  var key = item.key;
+  var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var _useHover = (0, _interactions.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 = (0, _interactions.usePress)(_objectSpread(_objectSpread({}, others), {}, {
+      ref: treeRowRef,
+      onPress: pressRow
+    })),
+    isPressed = _usePress.isPressed,
+    pressProps = _usePress.pressProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isExpanded: isExpanded,
+      isPressed: isPressed,
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedProps = (0, _utils.mergeProps)(hoverProps, pressProps, others);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    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 && (0, _react2.jsx)(_index.IconButtonToggle, {
+    onToggle: pressIcon,
+    isToggled: isExpanded,
+    defaultIcon: _MenuRightIcon["default"],
+    toggledIcon: _MenuDownIcon["default"],
+    iconProps: {
+      size: 25,
+      title: "".concat(title, " expand or collapse button")
+    },
+    buttonProps: {
+      'aria-label': "".concat(title, " expand or collapse button")
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    className: classNames,
+    alignItems: "center",
+    gap: "xs",
+    variant: "treeView.treeRow"
+  }, (0, _react2.jsx)(_index.Icon, {
+    color: "focus",
+    icon: mainIcon,
+    size: 25,
+    title: "folder icon",
+    alt: "folder icon"
+  }), (0, _react2.jsx)(_index.Text, {
+    className: classNames
+  }, title), (0, _react2.jsx)(_index.Icon, {
+    icon: lastIcon,
+    size: 15,
+    color: "accent.80",
+    title: "lock icon",
+    alt: "lock icon"
+  })));
+});
+TreeViewRow.propTypes = {
+  isSelected: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isExpanded: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
+  iconButtonProps: _propTypes["default"].shape({
+    onPress: _propTypes["default"].func
+  }),
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  mainIcon: _propTypes["default"].elementType,
+  lastIcon: _propTypes["default"].elementType
+};
+var _default = TreeViewRow;
+exports["default"] = _default;

package/lib/cjs/components/TreeView/TreeViewSection.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TreeViewContext = require("../../context/TreeViewContext");
+var _index = require("../../index");
+var _TreeView = require("./TreeView");
+var _TreeViewRow = _interopRequireDefault(require("./TreeViewRow"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context, _context2, _context3, _context4;
+  var item = props.item,
+    items = props.items,
+    title = props.title;
+  var treeSectionRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return treeSectionRef.current;
+  });
+  var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var isExpanded = (0, _includes["default"])(_context = (0, _from["default"])(state.expandedKeys)).call(_context, item.key);
+  var isSelected = (0, _includes["default"])(_context2 = (0, _from["default"])(tree.selectedKeys)).call(_context2, item.key);
+  var isDisabled = (0, _includes["default"])(_context3 = (0, _from["default"])(state.disabledKeys)).call(_context3, item.key);
+  return (0, _react2.jsx)(_index.Box, {
+    ref: treeSectionRef,
+    as: "li",
+    sx: {
+      ':not(:last-child)': {
+        pb: 'sm'
+      }
+    },
+    role: "treeitem",
+    "aria-expanded": isExpanded,
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled
+  }, (0, _react2.jsx)(_TreeViewRow["default"], {
+    item: item,
+    title: title,
+    items: items,
+    isExpanded: isExpanded,
+    isSelected: isSelected,
+    isDisabled: isDisabled
+  }), isExpanded && (0, _react2.jsx)(_index.Box, {
+    as: "ul",
+    role: "group",
+    key: "".concat(item.key, " ul"),
+    sx: {
+      pl: 'md'
+    }
+  }, (0, _map["default"])(_context4 = (0, _from["default"])(items)).call(_context4, function (_item) {
+    var _item$value$items;
+    return (0, _TreeView.SectionOrItemRender)(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, (0, _react2.jsx)(TreeViewSection, {
+      item: _item,
+      items: _item.children,
+      title: _item.value.title,
+      key: _item.value.title
+    }), (0, _react2.jsx)(_index.TreeViewItem, {
+      item: _item,
+      title: _item.value.title,
+      key: _item.value.title
+    }));
+  })));
+});
+TreeViewSection.propTypes = {
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  title: _propTypes["default"].string
+};
+var _default = TreeViewSection;
+exports["default"] = _default;

package/lib/cjs/components/TreeView/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "TreeViewItem", {
+  enumerable: true,
+  get: function get() {
+    return _TreeViewItem["default"];
+  }
+});
+_Object$defineProperty(exports, "TreeViewSection", {
+  enumerable: true,
+  get: function get() {
+    return _TreeViewSection["default"];
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TreeView["default"];
+  }
+});
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _TreeViewItem = _interopRequireDefault(require("./TreeViewItem"));
+var _TreeViewSection = _interopRequireDefault(require("./TreeViewSection"));

package/lib/cjs/context/TreeViewContext/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewContext = exports.TreeViewContext = void 0;
+var _react = require("react");
+var TreeViewContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.TreeViewContext = TreeViewContext;
+var useTreeViewContext = function useTreeViewContext() {
+  return (0, _react.useContext)(TreeViewContext);
+};
+exports.useTreeViewContext = useTreeViewContext;

package/lib/cjs/index.d.ts

@@ -22,6 +22,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';
@@ -158,15 +159,16 @@ 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';
 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';
-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/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75;
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -24,6 +24,7 @@ var _exportNames = {
   Bracket: true,
   Breadcrumbs: true,
   Button: true,
+  ButtonBar: true,
   Calendar: true,
   CalendarCell: true,
   CalendarGrid: true,
@@ -102,6 +103,7 @@ var _exportNames = {
   TextField: true,
   TimeZonePicker: true,
   TooltipTrigger: true,
+  TreeView: true,
   PageHeader: true,
   DataTable: true,
   OverlayProvider: true,
@@ -110,12 +112,12 @@ var _exportNames = {
   Item: true,
   Section: true,
   useOverlayTriggerState: true,
+  useTreeData: true,
   DataTableBody: true,
   DataTableCell: true,
   DataTableColumn: true,
   DataTableHeader: true,
   DataTableRow: true,
-  ButtonBar: true,
   EditButton: true,
   PanelHeader: true,
   PanelHeaderCloseButton: true,
@@ -758,6 +760,12 @@ _Object$defineProperty(exports, "TooltipTrigger", {
     return _TooltipTrigger["default"];
   }
 });
+_Object$defineProperty(exports, "TreeView", {
+  enumerable: true,
+  get: function get() {
+    return _TreeView["default"];
+  }
+});
 _Object$defineProperty(exports, "useOverlayPosition", {
   enumerable: true,
   get: function get() {
@@ -776,6 +784,12 @@ _Object$defineProperty(exports, "useOverlayTriggerState", {
     return _reactStately.useOverlayTriggerState;
   }
 });
+_Object$defineProperty(exports, "useTreeData", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.useTreeData;
+  }
+});
 var _AccordionGridGroup = _interopRequireWildcard(require("./components/AccordionGridGroup"));
 _forEachInstanceProperty(_context = _Object$keys(_AccordionGridGroup)).call(_context, function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -920,6 +934,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_Button)).call(_context12, fu
     }
   });
 });
+var _ButtonBar = _interopRequireDefault(require("./components/ButtonBar/ButtonBar"));
 var _Calendar = _interopRequireWildcard(require("./components/Calendar"));
 _forEachInstanceProperty(_context13 = _Object$keys(_Calendar)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1645,8 +1660,20 @@ _forEachInstanceProperty(_context71 = _Object$keys(_TooltipTrigger)).call(_conte
     }
   });
 });
+var _TreeView = _interopRequireWildcard(require("./components/TreeView"));
+_forEachInstanceProperty(_context72 = _Object$keys(_TreeView)).call(_context72, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeView[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TreeView[key];
+    }
+  });
+});
 var _PageHeader = _interopRequireWildcard(require("./experimental/PageHeader"));
-_forEachInstanceProperty(_context72 = _Object$keys(_PageHeader)).call(_context72, function (key) {
+_forEachInstanceProperty(_context73 = _Object$keys(_PageHeader)).call(_context73, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PageHeader[key]) return;
@@ -1658,7 +1685,7 @@ _forEachInstanceProperty(_context72 = _Object$keys(_PageHeader)).call(_context72
   });
 });
 var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
-_forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73, function (key) {
+_forEachInstanceProperty(_context74 = _Object$keys(_DataTable)).call(_context74, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataTable[key]) return;
@@ -1670,7 +1697,7 @@ _forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73,
   });
 });
 var _types = require("./types");
-_forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, function (key) {
+_forEachInstanceProperty(_context75 = _Object$keys(_types)).call(_context75, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;
@@ -1683,7 +1710,6 @@ _forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, fun
 });
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _ButtonBar = _interopRequireDefault(require("./experimental/ButtonBar/ButtonBar"));
 var _EditButton = _interopRequireDefault(require("./experimental/EditButton"));
 var _PanelHeader = _interopRequireDefault(require("./experimental/PanelHeader"));
 var _PanelHeaderCloseButton = _interopRequireDefault(require("./experimental/PanelHeader/controls/PanelHeaderCloseButton"));

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -14,12 +14,15 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _countriesList = require("countries-list");
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
-  title: 'Recipes/Country Picker'
+  title: 'Recipes/Country Picker',
+  decorators: [_storybookAddonDesigns.withDesign]
 };
 exports["default"] = _default;
 var validatePhoneNumber = function validatePhoneNumber(str) {
@@ -132,4 +135,10 @@ var Default = function Default() {
     value: phoneNumber
   })));
 };
-exports.Default = Default;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.countryPicker["default"]
+  }
+};

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

@@ -20,14 +20,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = _interopRequireWildcard(require("react"));
 var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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) { (0, _defineProperty2["default"])(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; }
 var _default = {
-  title: 'Recipes/Editable Input'
+  title: 'Recipes/Inline Editing',
+  decorators: [_storybookAddonDesigns.withDesign]
 };
 exports["default"] = _default;
 var EditableAreaContext = /*#__PURE__*/(0, _react.createContext)();
@@ -97,12 +100,19 @@ var Default = function Default() {
     controlProps: controlProps
   }));
 };
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.inlineEditing["default"]
+  }
+};
 
 /**
  * Editable
  * Wrapper component that provides context value for all editable components
  */
-exports.Default = Default;
+
 var Editable = function Editable(props) {
   var value = props.value,
     isEditing = props.isEditing;

package/lib/cjs/recipes/OneWayToBidirectionalArrow.stories.js

@@ -12,6 +12,7 @@ var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _DragVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DragVerticalIcon"));
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Recipes/One Way to Bidirectional Arrow'
@@ -262,4 +263,10 @@ var Default = function Default() {
     }
   })))));
 };
-exports.Default = Default;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.OnewayToBidirectionalArrow["default"]
+  }
+};

package/lib/cjs/styles/variants/variants.js

@@ -21,6 +21,7 @@ var _Accordion = _interopRequireDefault(require("../../components/AccordionGroup
 var _Box = _interopRequireDefault(require("../../components/Box/Box.styles"));
 var _Bracket = _interopRequireDefault(require("../../components/Bracket/Bracket.styles"));
 var _Breadcrumb = _interopRequireDefault(require("../../components/Breadcrumbs/Breadcrumb.styles"));
+var _ButtonBar = _interopRequireDefault(require("../../components/ButtonBar/ButtonBar.styles"));
 var _Calendar = _interopRequireDefault(require("../../components/Calendar/Calendar.styles"));
 var _Callout = _interopRequireDefault(require("../../components/Callout/Callout.styles"));
 var _CodeView = _interopRequireDefault(require("../../components/CodeView/CodeView.styles"));
@@ -51,6 +52,7 @@ var _Table = _interopRequireDefault(require("../../components/Table/Table.styles
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
 var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
+var _TreeView = _interopRequireDefault(require("../../components/TreeView/TreeView.styles"));
 var _PanelHeader = _interopRequireDefault(require("../../experimental/PanelHeader/PanelHeader.styles"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,6 +64,7 @@ var _default = _objectSpread({
   box: _Box["default"],
   bracket: _Bracket["default"],
   breadcrumb: _Breadcrumb["default"],
+  buttonBar: _ButtonBar["default"],
   calendar: _Calendar["default"],
   callout: _Callout["default"],
   codeView: _CodeView["default"],
@@ -91,6 +94,7 @@ var _default = _objectSpread({
   stepper: _Stepper["default"],
   table: _Table["default"],
   timeZone: _TimeZone["default"],
-  tooltip: _Tooltip["default"]
+  tooltip: _Tooltip["default"],
+  treeView: _TreeView["default"]
 }, tab);
 exports["default"] = _default;