@pingux/astro 2.16.1-alpha.1 → 2.17.0-alpha.1

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

@@ -8,8 +8,9 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.PanelHeader = exports.ListElement = exports.ListAndPanel = void 0;
 var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
@@ -20,94 +21,22 @@ var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIc
 var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
 var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _hooks = require("../hooks");
-var _useOverlappingMenuHoverState = _interopRequireDefault(require("../hooks/useOverlappingMenuHoverState"));
 var _index = require("../index");
+var _items = require("./items");
 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/List with Panel'
+  title: 'Recipes/List And Panel',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 exports["default"] = _default;
-var items = [{
-  email: 'dburkitt5@columbia.edu',
-  firstName: 'Nicola',
-  lastName: 'Burkitt',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'idixie2@elegantthemes.com',
-  firstName: 'Cacilia',
-  lastName: 'Dixie',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'dfowler0@rambler.ru',
-  firstName: 'Stavro',
-  lastName: 'Fowler',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'jgolde8@jimdo.com',
-  firstName: 'Celisse',
-  lastName: 'Golde',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'shearst9@answers.com',
-  firstName: 'Jeth',
-  lastName: 'Hearst',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'ajinaa@mapquest.com',
-  firstName: 'Kaycee',
-  lastName: 'Jina',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'vmalster4@biblegateway.com',
-  firstName: 'Lorry',
-  lastName: 'Malster',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'yphipp6@yellowpages.com',
-  firstName: 'Stanley',
-  lastName: 'Phipp',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'mskilbeck3@bbc.co.uk',
-  firstName: 'Gradey',
-  lastName: 'Skilbeck',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'dstebbing1@msu.edu',
-  firstName: 'Marnia',
-  lastName: 'Stebbing',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'lsterley7@lulu.com',
-  firstName: 'Joshua',
-  lastName: 'Sterley',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'luttleyb@hugedomains.com',
-  firstName: 'Jarrod',
-  lastName: 'Uttley',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}, {
-  email: 'lidelc@yelp.com',
-  firstName: 'Andromache',
-  lastName: 'Idel',
-  hasIcon: true,
-  avatar: _AccountIcon["default"]
-}];
 var sx = {
   wrapper: {
     px: 'lg',
@@ -116,16 +45,6 @@ var sx = {
     height: '900px',
     overflowY: 'scroll'
   },
-  searchField: {
-    position: 'fixed',
-    mb: 'sm',
-    width: '400px'
-  },
-  listElementWrapper: {
-    px: 'md',
-    bg: 'accent.99',
-    justifyContent: 'center'
-  },
   separator: {
     bg: 'accent.90'
   },
@@ -147,120 +66,83 @@ var sx = {
   itemValue: {
     fontWeight: 0,
     lineHeight: '18px',
-    variant: 'base',
     mb: 'md'
   },
-  listElement: {
-    wrapper: {
-      minHeight: '60px',
-      pl: '14px'
-    },
-    iconWrapper: {
-      mr: 'auto',
-      alignItems: 'center'
+  panelHeader: {
+    container: {
+      bg: 'accent.99',
+      minHeight: 58,
+      ml: 0,
+      pl: 14,
+      pr: 'xs'
     },
-    icon: {
-      mr: 'md',
+    controls: {
       alignSelf: 'center',
-      color: 'accent.40'
-    },
-    avatar: {
-      width: '25px',
-      height: '25px',
-      mr: '14px'
+      ml: 'auto',
+      pr: 'sm'
     },
-    title: {
-      alignSelf: 'start',
-      fontSize: 'md'
+    data: {
+      alignItems: 'center'
     },
     subtitle: {
+      alignSelf: 'start',
       fontSize: 'sm',
-      my: '1px',
       lineHeight: '16px',
-      alignSelf: 'start'
+      my: '1px'
     },
-    menuWrapper: {
-      alignSelf: 'center',
-      pr: '4px'
-    }
-  }
-};
-var ListElement = function ListElement(_ref) {
-  var item = _ref.item,
-    isHoverable = _ref.isHoverable,
-    onClosePanel = _ref.onClosePanel;
-  var listItemRef = (0, _react.useRef)();
-  var _useOverlappingMenuHo = (0, _useOverlappingMenuHoverState["default"])({
-      listItemRef: listItemRef
-    }),
-    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
-    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
-    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
-    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
-    isHovered = _useOverlappingMenuHo.isHovered;
-  return (0, _react2.jsx)(_index.ListItem, {
-    isHovered: isHoverable && isHovered,
-    isRow: true,
-    onHoverEnd: handleHoverEnd,
-    onHoverStart: handleHoverStart,
-    onMouseMove: handleMouseMove,
-    ref: listItemRef,
-    sx: sx.listElement.wrapper
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.listElement.iconWrapper
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: item.avatar,
-    size: "md",
-    sx: sx.listElement.icon,
-    title: {
-      name: 'Account Icon'
-    }
-  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: sx.listElement.title
-  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    sx: sx.listElement.subtitle
-  }, item.email))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.listElement.menuWrapper
-  }, (0, _react2.jsx)(_index.SwitchField, {
-    "aria-label": "active user",
-    isDefaultSelected: true,
-    alignSelf: "center",
-    mr: "sm"
-  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "more icon button",
-    mr: onClosePanel ? 'sm' : 0
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: "md",
     title: {
-      name: 'More Vertical Icon'
-    }
-  })), (0, _react2.jsx)(_index.Menu, {
-    onAction: handleHoverEnd,
-    onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoverStart
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "enable"
-  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "disable"
-  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "delete"
-  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "close icon button",
-    onPress: onClosePanel
-  }, (0, _react2.jsx)(_index.Icon, {
-    size: "sm",
-    icon: _CloseIcon["default"],
-    title: {
-      name: 'Close Icon'
+      alignSelf: 'start',
+      fontSize: 'md'
+    },
+    wrapper: {
+      cursor: 'pointer',
+      display: 'flex',
+      flex: '1 1 0px',
+      ml: 'md'
     }
-  }))));
+  }
 };
-var Default = function Default() {
+var heading = 'Users';
+var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
+var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  align: "center",
+  isRow: true,
+  mb: "xs",
+  role: "heading",
+  "aria-level": "1"
+}, (0, _react2.jsx)(_index.Text, {
+  fontSize: "xx",
+  fontWeight: 3,
+  fontColor: "text.primary"
+}, heading), (0, _react2.jsx)(_index.IconButton, {
+  "aria-label": "icon button",
+  ml: "sm",
+  variant: "inverted"
+}, (0, _react2.jsx)(_index.Icon, {
+  icon: _PlusIcon["default"],
+  size: "sm"
+}))), (0, _react2.jsx)(_index.Text, {
+  fontSize: "sm",
+  color: "text.secondary",
+  fontWeight: 0,
+  width: "800px"
+}, description, (0, _react2.jsx)(_index.Link, {
+  href: "https://uilibrary.ping-eng.com/",
+  sx: {
+    fontSize: '13px'
+  }
+}, " Learn more")));
+var ListAndPanel = function ListAndPanel() {
+  // Example of items data structure
+  // const items = [
+  //   {
+  //     email: 'dburkitt5@columbia.edu',
+  //     firstName: 'Nicola',
+  //     lastName: 'Burkitt',
+  //     icon: AccountIcon,
+  //   },
+  // ]
+
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedItemId = _useState2[0],
@@ -273,8 +155,6 @@ var Default = function Default() {
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
   var panelTriggerRef = (0, _react.useRef)();
-  var heading = 'Users';
-  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
@@ -282,7 +162,7 @@ var Default = function Default() {
   };
   var selectItemHandler = function selectItemHandler(e) {
     if (e.size) {
-      setSelectedItemId((0, _findIndex["default"])(items).call(items, function (item) {
+      setSelectedItemId((0, _findIndex["default"])(_items.items).call(_items.items, function (item) {
         return item.email === e.currentKey;
       }));
       setSelectedKeys([e.currentKey]);
@@ -291,37 +171,6 @@ var Default = function Default() {
       closePanelHandler();
     }
   };
-  var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "xx",
-    fontWeight: 3,
-    fontColor: "text.primary"
-  }, heading), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "icon button",
-    ml: "sm",
-    variant: "inverted"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
-    size: "sm",
-    title: {
-      name: 'Plus Icon'
-    }
-  }))), (0, _react2.jsx)(_index.Text, {
-    fontSize: "sm",
-    color: "text.secondary",
-    fontWeight: 0,
-    width: "800px"
-  }, description, (0, _react2.jsx)(_index.Link, {
-    href: "https://uilibrary.ping-eng.com/",
-    sx: {
-      fontSize: '13px'
-    }
-  }, " Learn more")));
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
   }, title, (0, _react2.jsx)(_index.SearchField, {
@@ -334,23 +183,20 @@ var Default = function Default() {
   }), (0, _react2.jsx)(_index.Separator, {
     margin: 0
   }), (0, _react2.jsx)(_index.ListView, {
-    items: items,
+    items: _items.items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys,
-    isHoverable: false
+    selectedKeys: selectedKeys
   }, function (item) {
+    var _context;
     return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.email,
-      textValue: item.email,
-      hasSeparator: item.hasSeparator,
-      listItemProps: {
-        minHeight: 75,
-        padding: 1
-      }
+      key: item.email
     }, (0, _react2.jsx)(ListElement, {
-      isHoverable: true,
-      item: item
+      data: {
+        text: (0, _concat["default"])(_context = "".concat(item.lastName, ", ")).call(_context, item.firstName),
+        subtext: item.email,
+        icon: item.icon
+      }
     }));
   }), (0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: panelState.isOpen,
@@ -362,12 +208,10 @@ var Default = function Default() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.listElementWrapper
-  }, (0, _react2.jsx)(ListElement, {
-    item: selectedItemId >= 0 ? items[selectedItemId] : [],
+  }, (0, _react2.jsx)(PanelHeader, {
+    item: selectedItemId >= 0 ? _items.items[selectedItemId] : [],
     onClosePanel: closePanelHandler
-  })), (0, _react2.jsx)(_index.Separator, {
+  }), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
     sx: sx.separator
   }), (0, _react2.jsx)(_index.Box, {
@@ -387,36 +231,120 @@ var Default = function Default() {
     variant: "inverted",
     "aria-label": "pencil icon button",
     sx: sx.iconButton
-  }, (0, _react2.jsx)(_PencilIcon["default"], {
-    size: 20
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PencilIcon["default"],
+    size: "sm"
   })), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemLabel
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
-  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemValue
+  }, _items.items[selectedItemId].firstName, ' ', _items.items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
-  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemValue
+  }, _items.items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel
   }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
-  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemValue
+  }, _items.items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel
   }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue,
-    variant: "base"
-  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
+    sx: sx.itemValue
+  }, _items.items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
     title: "Account Info"
   }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
 };
-exports.Default = Default;
+exports.ListAndPanel = ListAndPanel;
+var ListElement = function ListElement(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? {
+      subtext: 'dburkitt5@columbia.edu',
+      text: 'Burkitt, Nicola',
+      icon: _AccountIcon["default"]
+    } : _ref$data;
+  var listItemRef = (0, _react.useRef)();
+  var _useOverlappingMenuHo = (0, _hooks.useOverlappingMenuHoverState)({
+      listItemRef: listItemRef
+    }),
+    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
+    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
+    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
+    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
+    isHovered = _useOverlappingMenuHo.isHovered;
+  return (0, _react2.jsx)(_index.ListViewItem, {
+    data: data,
+    isHovered: isHovered,
+    onHoverEnd: handleHoverEnd,
+    onHoverStart: handleHoverStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef
+  }, (0, _react2.jsx)(_index.ListViewItemSwitchField, null), (0, _react2.jsx)(_index.ListViewItemMenu, {
+    onAction: handleHoverEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoverStart
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete"
+  }, "Delete user")));
+};
+exports.ListElement = ListElement;
+var PanelHeader = function PanelHeader(_ref2) {
+  var _context2;
+  var _ref2$item = _ref2.item,
+    item = _ref2$item === void 0 ? {
+      email: 'dburkitt5@columbia.edu',
+      icon: _AccountIcon["default"],
+      firstName: 'John',
+      lastName: 'Doe'
+    } : _ref2$item,
+    onClosePanel = _ref2.onClosePanel;
+  var email = item.email,
+    firstName = item.firstName,
+    lastName = item.lastName;
+  var text = (0, _concat["default"])(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
+  return (0, _react2.jsx)(_index.Box, {
+    sx: sx.panelHeader.container
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.panelHeader.wrapper
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.panelHeader.data
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "bodyStrong",
+    sx: sx.panelHeader.title
+  }, text), (0, _react2.jsx)(_index.Text, {
+    variant: "subtitle",
+    sx: sx.panelHeader.subtitle
+  }, email))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.panelHeader.controls
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "xs"
+  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "more"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MoreVertIcon["default"],
+    size: "md"
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete"
+  }, "Delete user"))), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, (0, _react2.jsx)(_index.Icon, {
+    size: "md",
+    icon: _CloseIcon["default"]
+  })))));
+};
+exports.PanelHeader = PanelHeader;

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

@@ -16,6 +16,7 @@ var _EyeOffOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EyeOf
 var _EyeOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EyeOutlineIcon"));
 var _hooks = require("../hooks");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 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; }
@@ -98,4 +99,10 @@ var Default = function Default(_ref) {
     }
   }))));
 };
-exports.Default = Default;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.maskedValue["default"]
+  }
+};

package/lib/cjs/{experimental/recipes → recipes}/ScrollableListView.stories.js

@@ -15,12 +15,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
-var _index = require("../../index");
+var _index = require("../index");
 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: 'Experimental/recipes/ScrollableListView'
+  title: 'Recipes/Scrollable List View'
 };
 exports["default"] = _default;
 var ScrollableListView = function ScrollableListView() {

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -64,6 +64,9 @@ var FIGMA_LINKS = {
   loader: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=13675-33113&t=8Wwd3tIBh3GEjCJB-0'
   },
+  maskedValue: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=10328%3A31859&mode=dev'
+  },
   menu: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12726-41720&t=8Wwd3tIBh3GEjCJB-0'
   },

package/lib/components/ListView/ListView.js

@@ -23,9 +23,9 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import ListViewItem from '../ListViewItem';
 import Loader from '../Loader';
 import { ListViewContext } from './ListViewContext';
+import ListViewItem from './ListViewItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var collectionTypes = {
   ITEM: 'item',

package/lib/components/ListView/ListView.mdx

@@ -15,7 +15,7 @@ It shouldn’t be used to list items that only have a single piece of informatio
 
 ### Required Components
 
-This component requires [ListItem](./?path=/docs/components-listitem--default).
+This component requires [ListViewItem](./?path=/docs/components-listviewitem--docs).
 
 ### Accessibility
 
@@ -42,3 +42,6 @@ This component uses the following attributes to assist screen readers:
 - The **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid. 
 - Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows. 
 - Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component’s column position and aria-selected to indicate the currently selected state.
+
+#### NOTES:
+- See the [ListAndPanel](./?path=/docs/recipes-listandpanel--docs) and [ScrollableListView](./?path=/docs/recipes-scrollablelistview--docs) recipes for more detailed examples.