@pingux/astro 2.235.0-alpha.0 → 2.236.0

package/lib/cjs/styles/themes/next-gen/variants/tree.js

@@ -0,0 +1,153 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
+var _Tree = _interopRequireDefault(require("../../../../components/Tree/Tree.styles"));
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+// The base styles file builds its object imperatively (tree.item = {...}), so its
+// inferred type has possibly-undefined members; treat it as a complete object here.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var tree = _Tree["default"];
+
+/**
+ * Onyx (next-gen) theme overrides for the Tree component, derived from
+ * @pingux/onyx-tokens. Deep-merged onto the base Astro tree styles, so only
+ * differences from the Astro values are specified here.
+ */
+var onyxTree = _objectSpread(_objectSpread({}, tree), {}, {
+  item: _objectSpread(_objectSpread({}, tree.item), {}, {
+    '&.is-focused, &[data-focused]': {
+      boxShadow: "inset 0 0 0 2px ".concat(_onyxTokens.astroTokens.color.primary),
+      // the base Astro theme draws focus with outline: 2px solid; the Onyx
+      // treatment is a single inset shadow (matching ListView/DataTable), so
+      // the outline must be reset or both stack and the ring reads ~4px thick
+      outline: 'none',
+      borderRadius: '4px',
+      zIndex: 1
+    },
+    // the drag handle / chevron carry their own focus treatment, so the
+    // row-level focus treatment is suppressed while either is focused
+    '&:has(.astro-TreeDragButton:focus), &:has(.astro-TreeDragButton:focus-visible), &:has(.astro-TreeChevronButton:focus), &:has(.astro-TreeChevronButton:focus-visible)': {
+      boxShadow: 'none',
+      outline: 'none'
+    },
+    '&.is-focus-visible, &[data-focus-visible]': {
+      boxShadow: "inset 0 0 0 2px ".concat(_onyxTokens.astroTokens.color.primary),
+      outline: 'none',
+      borderRadius: '4px'
+    },
+    '&.is-selected, &[data-selected]': {
+      bg: _onyxTokens.astroTokens.color['nav-bar-item'].selected.bg,
+      '& *': {
+        color: _onyxTokens.astroTokens.color.gray[900]
+      }
+    },
+    '&.is-disabled, &[data-disabled]': {
+      opacity: 0.65,
+      cursor: 'not-allowed'
+    },
+    '&.is-dragging, &[data-dragging]': {
+      bg: _onyxTokens.astroTokens.color['nav-bar-item'].hover.bg,
+      boxShadow: "inset 0 0 0 2px ".concat(_onyxTokens.astroTokens.color.primary),
+      borderRadius: '4px',
+      '& *': {
+        color: _onyxTokens.astroTokens.color['nav-bar-item'].selected.text
+      }
+    },
+    '&.is-drop-target, &[data-drop-target]': {
+      boxShadow: "inset 0 0 0 2px ".concat(_onyxTokens.astroTokens.color.primary),
+      borderRadius: '4px'
+    },
+    '&:hover': {
+      bg: _onyxTokens.astroTokens.color['nav-bar-item'].hover.bg,
+      borderRadius: '4px'
+    }
+  }),
+  itemContent: _objectSpread(_objectSpread({}, tree.itemContent), {}, {
+    color: _onyxTokens.astroTokens.color.gray[900],
+    '&:hover': {
+      bg: 'transparent'
+    }
+  }),
+  dragButton: _objectSpread(_objectSpread({}, tree.dragButton), {}, {
+    path: {
+      fill: _onyxTokens.astroTokens.color.gray[500]
+    },
+    '&:hover': {
+      bg: _onyxTokens.astroTokens.color['nav-bar-item'].hover.bg,
+      '& svg': {
+        fill: _onyxTokens.astroTokens.color['nav-bar-item'].selected.text
+      }
+    },
+    '&:focus, &:focus-visible': {
+      boxShadow: "0 0 0 2px ".concat(_onyxTokens.astroTokens.color.primary),
+      borderRadius: '4px'
+    },
+    '&:active, &[data-pressed]': {
+      bg: _onyxTokens.astroTokens.color['primary-light'],
+      cursor: 'grabbing',
+      '& svg': {
+        fill: _onyxTokens.astroTokens.color['primary-dark']
+      }
+    }
+  }),
+  // the visible checkbox box is drawn by tree.selectionCheckboxBox on the
+  // inner RAC CheckboxButton label; Onyx re-colors it from tokens
+  selectionCheckbox: _objectSpread(_objectSpread({}, tree.selectionCheckbox), {}, {
+    '&:focus-visible, [data-focus-visible]': {
+      boxShadow: "0 0 0 2px ".concat(_onyxTokens.astroTokens.color.primary)
+    }
+  }),
+  selectionCheckboxBox: _objectSpread(_objectSpread({}, tree.selectionCheckboxBox), {}, {
+    borderColor: _onyxTokens.astroTokens.color.gray[500],
+    '&[data-selected]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-selected]']), {}, {
+      borderColor: _onyxTokens.astroTokens.color.primary,
+      bg: _onyxTokens.astroTokens.color.primary
+    }),
+    '[data-hovered] &, [data-pressed] &': {
+      borderColor: _onyxTokens.astroTokens.color.primary
+    },
+    '&[data-disabled]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-disabled]']), {}, {
+      borderColor: _onyxTokens.astroTokens.color.border,
+      background: _onyxTokens.astroTokens.color.gray[100]
+    })
+  }),
+  // blue circle with a blue.600 folder glyph for expandable nodes; the file
+  // (indigo) variant is applied per-item in TreeItemContent via is-leaf
+  iconSlot: _objectSpread(_objectSpread({}, tree.iconSlot), {}, {
+    bg: _onyxTokens.astroTokens.color.avatar.blue.bg,
+    color: _onyxTokens.astroTokens.color.avatar.blue.text,
+    '&.is-leaf': {
+      bg: _onyxTokens.astroTokens.color.avatar.indigo.bg,
+      color: _onyxTokens.astroTokens.color.avatar.indigo.text
+    }
+  }),
+  lockSlot: _objectSpread(_objectSpread({}, tree.lockSlot), {}, {
+    color: '#5F6DA7'
+  }),
+  container: _objectSpread(_objectSpread({}, tree.container), {}, {
+    '& .react-aria-DropIndicator': _objectSpread(_objectSpread({}, tree.container['& .react-aria-DropIndicator']), {}, {
+      '&::before': _objectSpread(_objectSpread({}, tree.container['& .react-aria-DropIndicator']['&::before']), {}, {
+        bg: 'transparent'
+      }),
+      '&[data-drop-target]::before': {
+        bg: _onyxTokens.astroTokens.color.primary
+      }
+    })
+  })
+});
+var _default = exports["default"] = onyxTree;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -2373,6 +2373,16 @@ declare const _default: {
             };
         };
     };
+    tree: {
+        item: any;
+        itemContent: any;
+        dragButton: any;
+        selectionCheckbox: any;
+        selectionCheckboxBox: any;
+        iconSlot: any;
+        lockSlot: any;
+        container: any;
+    };
     imageUpload: {
         button: {
             border: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -52,6 +52,7 @@ var _table = require("./table");
 var _tableBase = require("./tableBase");
 var _tabs = require("./tabs");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _tree = _interopRequireDefault(require("./tree"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -546,5 +547,6 @@ var _default = exports["default"] = {
   tableBase: _tableBase.tableBase,
   tabs: _tabs.tabs,
   tooltip: _tooltip["default"],
+  tree: _tree["default"],
   imageUpload: imageUpload
 };

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

@@ -62,6 +62,7 @@ _Object$defineProperty(exports, "variants", {
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = _interopRequireDefault(require("../../components/Button/Buttons.styles"));
 var _IconButton = _interopRequireDefault(require("../../components/IconButton/IconButton.styles"));
+var _Tree = require("../../components/Tree/Tree.styles");
 var _Badge = _interopRequireDefault(require("../../components/Badge/Badge.styles"));
 var _Card = _interopRequireDefault(require("../../components/Card/Card.styles"));
 var _Grid = _interopRequireDefault(require("../../components/Grid/Grid.styles"));
@@ -83,5 +84,6 @@ var _variants = _interopRequireDefault(require("./variants"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buttons = exports.buttons = _objectSpread(_objectSpread({}, _Buttons["default"]), {}, {
-  iconButtons: _IconButton["default"]
+  iconButtons: _IconButton["default"],
+  treeChevron: _Tree.treeChevron
 });

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

@@ -74,6 +74,7 @@ var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeField = _interopRequireDefault(require("../../components/TimeField/TimeField.styles"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
 var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
+var _Tree = _interopRequireDefault(require("../../components/Tree/Tree.styles"));
 var _TreeView = _interopRequireDefault(require("../../components/TreeView/TreeView.styles"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -134,6 +135,7 @@ var _default = exports["default"] = _objectSpread(_objectSpread({
   timefield: _TimeField["default"],
   timeZone: _TimeZone["default"],
   tooltip: _Tooltip["default"],
+  tree: _Tree["default"],
   treeView: _TreeView["default"]
 }, tab), {}, {
   statusIcon: _StatusIcon["default"],

package/lib/cjs/utils/getStatusClasses.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts status information into a class string. Status keys are converted to
+ * kebab-case and joined with the default class.
+ *
+ * This is the shared implementation behind the `useStatusClasses` hook; it exists
+ * as a plain function so render-prop components (e.g. React Aria wrappers) can
+ * build the same status classes from values that are only available inside a
+ * callback, where hooks cannot be called.
+ *
+ * e.g. getStatusClasses('thing', { isDisabled: true }) => "thing is-disabled"
+ */
+declare const getStatusClasses: (defaultClass?: string | undefined | null, statuses?: Record<string, string | boolean | undefined | null>) => string;
+export default getStatusClasses;

package/lib/cjs/utils/getStatusClasses.js

@@ -0,0 +1,29 @@
+"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
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _mapKeys = _interopRequireDefault(require("lodash/mapKeys"));
+/**
+ * Converts status information into a class string. Status keys are converted to
+ * kebab-case and joined with the default class.
+ *
+ * This is the shared implementation behind the `useStatusClasses` hook; it exists
+ * as a plain function so render-prop components (e.g. React Aria wrappers) can
+ * build the same status classes from values that are only available inside a
+ * callback, where hooks cannot be called.
+ *
+ * e.g. getStatusClasses('thing', { isDisabled: true }) => "thing is-disabled"
+ */
+var getStatusClasses = function getStatusClasses(defaultClass) {
+  var statuses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return (0, _classnames["default"])(defaultClass, (0, _mapKeys["default"])(statuses, function (_v, k) {
+    return (0, _kebabCase["default"])(k);
+  }));
+};
+var _default = exports["default"] = getStatusClasses;

package/lib/components/Tree/Tree.js

@@ -0,0 +1,33 @@
+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 _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { forwardRef } from 'react';
+import { Tree as AriaTree, useDragAndDrop } from 'react-aria-components';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Tree = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(AriaTree, _extends({}, props, {
+    ref: ref,
+    render: function render(domProps) {
+      return ___EmotionJSX(Box, _extends({}, domProps, {
+        ref: domProps.ref,
+        isRow: false,
+        variant: "tree.container",
+        sx: _objectSpread({}, _typeof(props.style) === 'object' ? props.style : {})
+      }));
+    }
+  }));
+});
+Tree.displayName = 'Tree';
+export { useDragAndDrop };
+export default Tree;

package/lib/components/Tree/Tree.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as TreeStories from './Tree.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
+
+<Meta of={TreeStories} isTemplate />
+
+# Tree
+
+The Tree component displays hierarchical data in an expandable, collapsible tree structure. Users can expand and collapse levels, select one or many items, and — optionally — reorder and re-parent items with drag and drop.
+
+A Tree should:
+- Be used for data with a clear parent/child relationship, such as environments, regions, folders, or organization structures.
+- Be used when users need to navigate a nested structure that is deeper than a flat list.
+
+A Tree shouldn't:
+- Be used for flat data — use a [ListView](./?path=/docs/components-listview--docs) instead.
+- Be used for navigation that fits a menu or breadcrumbs.
+- Expose too many levels of depth; keep nesting shallow enough to stay scannable.
+
+### Required Components
+
+This component can be used with `TreeItem`, `TreeItemContent`, and `TreeLoadMoreItem` from this package. A chevron and expand/collapse behavior are provided by default. `TreeItem` children render as row content directly; place them inside `TreeItemContent` only when you need its render props or its built-in folder/file and lock icons.
+
+### Authoring Modes
+
+- **Static**: declare `TreeItem` children directly in JSX (see the *Static Nested Tree* story). Best for small, fixed trees.
+- **Dynamic**: pass a nested array via the `items` prop and render nodes with a recursive render function (see the *Dynamic Recursive Tree* story). Best for trees backed by data.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) accessibility guidelines.
+
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'When focused, selects the item (with selectionMode enabled) or toggles expand/collapse.' },
+  KeyboardRows.tabFocusesItem,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Right Arrow', description: 'Expands a collapsed parent item, or moves focus to its first child when expanded.' },
+  { key: 'Left Arrow', description: 'Collapses an expanded parent item, or moves focus to its parent when collapsed.' },
+  { key: 'Down / Up Arrow', description: 'Moves focus to the next or previous visible item.' },
+  {
+    key: 'Home (Fn + Right Arrow Key) Or Control/Command + Home',
+    description: 'Shifts the focus to the first item in the tree.',
+  },
+  {
+    key: 'End (Fn + Left Arrow Key) Or Control/Command + End',
+    description: 'Shifts the focus to the last item in the tree.',
+  },
+]} screenReaderRows={[
+  'The Tree uses the **`role="tree"`** attribute with each TreeItem using **`role="treeitem"`**.',
+  'Parent items use the **`aria-expanded`** attribute to indicate whether they are expanded or collapsed.',
+  'Selected items use the **`aria-selected`** attribute; disabled items use **`aria-disabled`**.',
+  'The Tree requires an **`aria-label`** to provide an accessible name.',
+]} />
+
+### Keyboard Drag and Drop
+
+When drag and drop is enabled, the drag handle is focusable. Press **Enter** to start a drag session, use the arrow keys to move the drop target, then press **Enter** to drop or **Escape** to cancel.