@pingux/astro 2.235.0-alpha.0 → 2.236.0

package/lib/components/Tree/TreeItemContent.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isLocked", "showDefaultIcon", "showDefaultLock"];
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import { forwardRef } from 'react';
+import { Button as AriaButton, CheckboxButton as AriaCheckboxButton, CheckboxField as AriaCheckboxField, TreeItemContent as AriaTreeItemContent } from 'react-aria-components';
+import DragVerticalIcon from '@pingux/mdi-react/DragVerticalIcon';
+import { useGetTheme } from '../../hooks';
+import Box from '../Box';
+import Button from '../Button';
+import Icon from '../Icon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TreeItemContent = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var Lock = icons.Lock,
+    MenuDown = icons.MenuDown,
+    MenuRight = icons.MenuRight;
+  var _props$isLocked = props.isLocked,
+    isLocked = _props$isLocked === void 0 ? false : _props$isLocked,
+    _props$showDefaultIco = props.showDefaultIcon,
+    showDefaultIcon = _props$showDefaultIco === void 0 ? true : _props$showDefaultIco,
+    _props$showDefaultLoc = props.showDefaultLock,
+    showDefaultLock = _props$showDefaultLoc === void 0 ? true : _props$showDefaultLoc,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(AriaTreeItemContent, _extends({}, others, {
+    ref: ref
+  }), function (renderProps) {
+    var _context;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      variant: "tree.itemContent",
+      className: renderProps.isExpanded ? 'is-expanded' : undefined
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ,
+      sx: {
+        '--tree-item-level': renderProps.level
+      }
+    }, renderProps.allowsDragging && ___EmotionJSX(AriaButton, {
+      slot: "drag",
+      "aria-label": "Drag to move",
+      className: "astro-TreeDragButton",
+      render: function render(dragDomProps) {
+        return ___EmotionJSX(Button, dragDomProps, ___EmotionJSX(Icon, {
+          icon: DragVerticalIcon,
+          "aria-hidden": "true"
+        }));
+      }
+    }), renderProps.selectionMode !== 'none' && ___EmotionJSX(AriaCheckboxField, {
+      slot: "selection",
+      className: "astro-TreeSelectionCheckbox"
+    }, ___EmotionJSX(AriaCheckboxButton, {
+      className: "astro-TreeSelectionCheckboxBox"
+    })), ___EmotionJSX(Box, {
+      isRow: true,
+      variant: "tree.chevronSlot",
+      className: "astro-TreeChevronSlot"
+    }, renderProps.hasChildItems && ___EmotionJSX(AriaButton, {
+      slot: "chevron",
+      "aria-label": renderProps.isExpanded ? 'Collapse' : 'Expand',
+      className: "astro-TreeChevronButton",
+      render: function render(chevronDomProps) {
+        return ___EmotionJSX(Button, _extends({}, chevronDomProps, {
+          variant: "treeChevron"
+        }), ___EmotionJSX(Icon, {
+          icon: renderProps.isExpanded ? MenuDown : MenuRight,
+          "aria-hidden": "true"
+        }));
+      }
+    })), showDefaultIcon && ___EmotionJSX(Box, {
+      isRow: true,
+      variant: "tree.iconSlot",
+      className: _filterInstanceProperty(_context = ['astro-TreeIconSlot', renderProps.hasChildItems ? undefined : 'is-leaf']).call(_context, Boolean).join(' ')
+    }, ___EmotionJSX(Icon, {
+      icon: renderProps.hasChildItems ? 'folder' : 'draft',
+      color: "currentColor",
+      size: "xsm",
+      "aria-hidden": "true"
+    })), ___EmotionJSX(Box, {
+      isRow: true,
+      variant: "tree.labelSlot",
+      className: "astro-TreeLabelSlot"
+    }, typeof props.children === 'function' ? props.children(renderProps) : props.children), showDefaultLock && ___EmotionJSX(Box, {
+      variant: "tree.lockSlot",
+      className: isLocked ? undefined : 'is-unlocked'
+    }, ___EmotionJSX(Icon, {
+      icon: Lock,
+      color: "currentColor",
+      "aria-hidden": "true"
+    })));
+  });
+});
+TreeItemContent.displayName = 'TreeItemContent';
+export default TreeItemContent;

package/lib/components/Tree/index.js

@@ -0,0 +1,5 @@
+export { default as Tree, useDragAndDrop } from './Tree';
+export { default as TreeItem } from './TreeItem';
+export { default as TreeItemContent } from './TreeItemContent';
+export { default as useTreeDragAndDrop } from './useTreeDragAndDrop';
+export { TreeLoadMoreItem } from 'react-aria-components';

package/lib/components/Tree/useTreeDragAndDrop.js

@@ -0,0 +1,69 @@
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import { useDragAndDrop } from 'react-aria-components';
+
+/** A drag payload item: a map of MIME type to string data, per React Aria's DragItem shape. */
+
+/**
+ * Layers tree-specific drop validation on top of React Aria Components' `useDragAndDrop`:
+ * - Rejects self-drops and descendant/cycle drops.
+ * - Rejects drops on disabled or policy-disallowed targets.
+ * - Supports dropping "on" a target (re-parenting) via `onItemDrop` and sibling
+ *   before/after reordering via `onReorder`.
+ *
+ * This hook does not own or mutate any data itself — all actual state updates are performed
+ * by the consumer-supplied `onItemDrop`/`onReorder` callbacks.
+ */
+export default function useTreeDragAndDrop(options) {
+  var getItems = options.getItems,
+    onItemDrop = options.onItemDrop,
+    _onReorder = options.onReorder,
+    isDescendant = options.isDescendant,
+    isDisabledDropTarget = options.isDisabledDropTarget;
+  var validateTarget = function validateTarget(targetKey, draggedKeys) {
+    var _context;
+    if (draggedKeys.has(targetKey)) return false;
+
+    // Target may not be inside any dragged item's subtree (a cycle)
+    if (isDescendant && _someInstanceProperty(_context = _Array$from(draggedKeys)).call(_context, function (key) {
+      return isDescendant(targetKey, key);
+    })) {
+      return false;
+    }
+    if (isDisabledDropTarget !== null && isDisabledDropTarget !== void 0 && isDisabledDropTarget(targetKey)) return false;
+    return true;
+  };
+  return useDragAndDrop({
+    getItems: getItems,
+    // RAC routes internal 'on' drops to onMove and internal before/after drops to
+    // onReorder — both handlers must be forwarded for keyboard reordering to work.
+    // CAUTION: RAC's useDroppableCollection fires onMove for EVERY internal item
+    // target, including before/after positions (the call sits outside its
+    // dropPosition === 'on' guard). Without the explicit gate below, a pointer
+    // sibling reorder would ALSO trigger onMove → onItemDrop, silently re-parenting
+    // the dragged node while onReorder moves it — a data-corrupting double dispatch.
+    onMove: function onMove(e) {
+      var target = e.target;
+      var draggedKeys = _keysInstanceProperty(e);
+      if (target.type !== 'item' || target.dropPosition !== 'on') return;
+      if (!validateTarget(target.key, draggedKeys)) return;
+      onItemDrop === null || onItemDrop === void 0 || onItemDrop({
+        keys: draggedKeys,
+        targetKey: target.key
+      });
+    },
+    onReorder: function onReorder(e) {
+      var target = e.target;
+      var draggedKeys = _keysInstanceProperty(e);
+      // A root drop has no key.
+      if (target.type !== 'item') return;
+      if (!validateTarget(target.key, draggedKeys)) return;
+      _onReorder === null || _onReorder === void 0 || _onReorder({
+        keys: draggedKeys,
+        targetKey: target.key,
+        dropPosition: target.dropPosition
+      });
+    }
+  });
+}

package/lib/context/TooltipContext/index.js

@@ -6,7 +6,8 @@ export var TooltipContext = /*#__PURE__*/createContext({
   },
   close: function close() {
     return undefined;
-  }
+  },
+  shouldSkipAnimation: false
 });
 /* istanbul ignore next */
 export var useTooltipContext = function useTooltipContext() {

package/lib/hooks/useCircularLoader/useCircularLoader.js

@@ -8,7 +8,7 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["mode", "size", "isAstro", "defaultLoaderSize", "progress"];
+var _excluded = ["mode", "size", "isCircle", "isAstro", "defaultLoaderSize", "progress"];
 import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
 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; }
@@ -21,6 +21,7 @@ export var circularSizes = {
 var useCircularLoader = function useCircularLoader(props) {
   var mode = props.mode,
     size = props.size,
+    isCircle = props.isCircle,
     isAstro = props.isAstro,
     defaultLoaderSize = props.defaultLoaderSize,
     _props$progress = props.progress,
@@ -31,7 +32,7 @@ var useCircularLoader = function useCircularLoader(props) {
       sizes: circularSizes
     }),
     sizeProps = _useTShirtSize.sizeProps;
-  if (mode === 'dots' || isAstro) {
+  if (!isCircle && (mode === 'dots' || isAstro)) {
     return _objectSpread({
       size: size || defaultLoaderSize,
       isCircle: false,

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -12,7 +12,9 @@ test('default useOverlayPanelState', function () {
       toggle: expect.any(Function),
       isTransitioning: expect.any(Boolean),
       setOpen: expect.any(Function),
-      isOpen: expect.any(Boolean)
+      isOpen: expect.any(Boolean),
+      point: null,
+      setPoint: expect.any(Function)
     },
     onClose: expect.any(Function),
     isTransitioning: expect.any(Boolean)

package/lib/hooks/useStatusClasses/useStatusClasses.js

@@ -1,14 +1,8 @@
-import classnames from 'classnames';
-import kebabCase from 'lodash/kebabCase';
-import mapKeys from 'lodash/mapKeys';
+import getStatusClasses from '../../utils/getStatusClasses';
 var useStatusClasses = function useStatusClasses(defaultClass) {
   var statuses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var kebabStatuses = mapKeys(statuses, function (_v, k) {
-    return kebabCase(k);
-  });
-  var classNames = classnames(defaultClass, kebabStatuses);
   return {
-    classNames: classNames
+    classNames: getStatusClasses(defaultClass, statuses)
   };
 };
 export default useStatusClasses;

package/lib/index.js

@@ -234,6 +234,7 @@ export { default as TimeZonePicker } from './components/TimeZonePicker';
 export { default as timezones } from './components/TimeZonePicker/timezones';
 export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
+export { Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, useDragAndDrop, useTreeDragAndDrop } from './components/Tree';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
 export { PaginationContext } from './context/PaginationContext';

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -132,9 +132,15 @@ var codeEditor = {
   backgroundColor: backgroundSecondary,
   headerColor: astroTokensDark.color.gray[900]
 };
+
+// Icon/glyph color when it sits on a primary-colored surface (e.g. the Tree's
+// folder circle is primary blue in dark mode; a selected row's descendant
+// recolor would otherwise paint the glyph the same primary color).
+var iconOnPrimary = '#ffffff';
 export var colors = _objectSpread(_objectSpread({
   border: border,
-  iconWrapper: iconWrapper
+  iconWrapper: iconWrapper,
+  iconOnPrimary: iconOnPrimary
 }, overrides), {}, {
   twoTone: twoTone,
   light: '#1A1E22',

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -327,6 +327,21 @@ var buttons = {
     '&.is-focused': {
       color: chroma.mix(astroTokensDark.color.blue[500], 'white', 0.3, 'rgb').hex()
     }
+  },
+  treeChevron: {
+    path: {
+      fill: astroTokensDark.color.common.menu.item.text
+    },
+    '&:hover': {
+      '& svg': {
+        fill: astroTokensDark.color.common.menu.item.hover.text
+      }
+    },
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineColor: astroTokensDark.color.primary,
+      outlineOffset: '2px'
+    }
   }
 };
 export default buttons;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/tree.js

@@ -0,0 +1,154 @@
+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 _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 { astroTokensDark } from '@pingux/onyx-tokens';
+import treeSource from '../../../../components/Tree/Tree.styles';
+
+// 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 = treeSource;
+
+/**
+ * Onyx dark theme overrides for the Tree component, derived from the dark token set.
+ * Deep-merged over the Onyx light tree variant, so only differences that matter in
+ * dark mode are specified here.
+ */
+var onyxDarkTree = _objectSpread(_objectSpread({}, tree), {}, {
+  item: _objectSpread(_objectSpread({}, tree.item), {}, {
+    '&.is-focused, &[data-focused]': {
+      outline: 'none',
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokensDark.color.primary),
+      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)': {
+      outline: 'none',
+      boxShadow: 'none'
+    },
+    '&.is-focus-visible, &[data-focus-visible]': {
+      outline: 'none',
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokensDark.color.primary),
+      borderRadius: '4px'
+    },
+    '&.is-selected, &[data-selected]': {
+      bg: 'background.hover',
+      '& *': {
+        color: astroTokensDark.color.gray[100]
+      },
+      '& .astro-TreeIconSlot': {
+        color: 'iconOnPrimary',
+        '& svg': {
+          fill: 'iconOnPrimary'
+        }
+      },
+      '& .astro-TreeLabelSlot': {
+        bg: 'transparent'
+      }
+    },
+    '&.is-disabled, &[data-disabled]': {
+      opacity: 0.65,
+      cursor: 'not-allowed'
+    },
+    '&.is-dragging, &[data-dragging]': {
+      bg: 'background.hover',
+      outline: '1px solid #ffffff',
+      outlineOffset: '-1px',
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokensDark.color.primary),
+      borderRadius: '4px',
+      '& *': {
+        color: astroTokensDark.color.common.menu.item.selected.text
+      }
+    },
+    '&.is-drop-target, &[data-drop-target]': {
+      outline: '1px solid #ffffff',
+      outlineOffset: '-1px',
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokensDark.color.primary),
+      borderRadius: '4px'
+    },
+    '&:hover': {
+      bg: astroTokensDark.color['nav-bar-item'].hover.bg,
+      borderRadius: '4px'
+    }
+  }),
+  itemContent: _objectSpread(_objectSpread({}, tree.itemContent), {}, {
+    color: astroTokensDark.color.gray[100],
+    '&:hover': {
+      bg: 'transparent'
+    }
+  }),
+  dragButton: _objectSpread(_objectSpread({}, tree.dragButton), {}, {
+    path: {
+      fill: astroTokensDark.color.common.menu.item.text
+    },
+    '&:hover': {
+      bg: 'background.hover',
+      '& svg': {
+        fill: astroTokensDark.color.common.menu.item.hover.text
+      }
+    },
+    '&:focus, &:focus-visible': {
+      boxShadow: "0 0 0 2px ".concat(astroTokensDark.color.primary),
+      borderRadius: '4px'
+    },
+    '&:active, &[data-pressed]': {
+      bg: astroTokensDark.color.blue[500],
+      cursor: 'grabbing',
+      '& svg': {
+        fill: astroTokensDark.color.font.base
+      }
+    }
+  }),
+  selectionCheckbox: _objectSpread(_objectSpread({}, tree.selectionCheckbox), {}, {
+    '&:focus-visible, [data-focus-visible]': {
+      boxShadow: "0 0 0 2px ".concat(astroTokensDark.color.primary)
+    }
+  }),
+  // the visible checkbox box (drawn by tree.selectionCheckboxBox's CSS on the
+  // inner RAC CheckboxButton label) re-colored from dark tokens
+  selectionCheckboxBox: _objectSpread(_objectSpread({}, tree.selectionCheckboxBox), {}, {
+    borderColor: astroTokensDark.color.border,
+    '&[data-selected]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-selected]']), {}, {
+      borderColor: astroTokensDark.color.primary,
+      bg: astroTokensDark.color.primary
+    }),
+    '[data-hovered] &, [data-pressed] &': {
+      borderColor: astroTokensDark.color.primary
+    },
+    '&[data-disabled]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-disabled]']), {}, {
+      borderColor: astroTokensDark.color.border,
+      background: astroTokensDark.color.common.bg.secondary
+    })
+  }),
+  // dark Onyx: solid blue circle with a black folder glyph via the dark avatar
+  // tokens; the file variant stays violet
+  iconSlot: _objectSpread(_objectSpread({}, tree.iconSlot), {}, {
+    bg: astroTokensDark.color.avatar.blue.bg,
+    color: astroTokensDark.color.avatar.blue.text,
+    '&.is-leaf': {
+      bg: astroTokensDark.color.avatar.indigo.bg,
+      color: astroTokensDark.color.avatar.indigo.text
+    }
+  }),
+  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: astroTokensDark.color.primary
+      }
+    })
+  })
+});
+export default onyxDarkTree;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -12,6 +12,7 @@ import { navBar } from './navbar';
 import rangeCalendar from './rangeCalendar';
 import skeleton from './skeleton';
 import stepper from './stepper';
+import tree from './tree';
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -349,5 +350,6 @@ export default {
     noImagePreview: {
       color: "".concat(astroTokensDark.color.gray[100], " !important")
     }
-  }
+  },
+  tree: tree
 };

package/lib/styles/themes/astro/customProperties/icons.js

@@ -31,7 +31,9 @@ import ImageFilterHdrIcon from '@pingux/mdi-react/ImageFilterHdrIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import KeyChainVariant from '@pingux/mdi-react/KeyChainVariantIcon';
+import LockIcon from '@pingux/mdi-react/LockIcon';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
+import MenuRight from '@pingux/mdi-react/MenuRightIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import MonitorScreenshotIcon from '@pingux/mdi-react/MonitorScreenshotIcon';
 import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
@@ -65,4 +67,4 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "tabPickerDown", ArrowDropDownIcon), "tabPickerUp", ArrowDropUpIcon), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "overviewIcon", WebIcon), "p1verify", Verify), "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), "WarningIcon", WarningIcon), "CameraOutlineIcon", CameraAltIcon), "ImageOutlineIcon", ImageFilterHdrIcon), "helpHint", HelpIcon), "ModalCloseIcon", CloseIcon), "errorCalloutBadge", AlertCircleIcon), "infoCalloutBadge", InformationIcon), "successCalloutBadge", CheckCircleIcon), _defineProperty(_statuses$DEFAULT$sta, "warningCalloutBadge", AlertIcon));
+export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "Lock", LockIcon), "MenuDown", MenuDown), "MenuRight", MenuRight), "MenuUp", MenuUp), "tabPickerDown", ArrowDropDownIcon), "tabPickerUp", ArrowDropUpIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), "WarningIcon", WarningIcon), "CameraOutlineIcon", CameraAltIcon), "ImageOutlineIcon", ImageFilterHdrIcon), "helpHint", HelpIcon), "ModalCloseIcon", CloseIcon), "errorCalloutBadge", AlertCircleIcon), _defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "infoCalloutBadge", InformationIcon), "successCalloutBadge", CheckCircleIcon), "warningCalloutBadge", AlertIcon));

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CheckboxFieldGroup', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField', 'LabelValuePairs'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CheckboxFieldGroup', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'Tree', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField', 'LabelValuePairs'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/styles/themes/next-gen/customProperties/icons.js

@@ -12,5 +12,5 @@ import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, PamIcon, Protect } from '../../astro/customProperties/navBarIcons';
-var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "tabPickerDown", 'keyboard_arrow_down'), "tabPickerUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'), "errorCalloutBadge", AlertCircleOutlineIcon), "infoCalloutBadge", InformationCircleOutlineIcon), "successCalloutBadge", CheckCircleOutlineIcon), _defineProperty(_icons, "warningCalloutBadge", AlertOutlineIcon));
+var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "Lock", 'lock'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiPlayCircleIcon", 'play_circle'), "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuRight", 'keyboard_arrow_right'), "MenuUp", 'keyboard_arrow_up'), "tabPickerDown", 'keyboard_arrow_down'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "tabPickerUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'), "errorCalloutBadge", AlertCircleOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_icons, "infoCalloutBadge", InformationCircleOutlineIcon), "successCalloutBadge", CheckCircleOutlineIcon), "warningCalloutBadge", AlertOutlineIcon));
 export default icons;

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

@@ -668,6 +668,17 @@ var buttons = {
   selectLink: selectLink,
   tableHeaderButton: {
     '&.is-focused': _objectSpread({}, defaultFocus)
+  },
+  treeChevron: {
+    path: {
+      fill: astroTokens.color.gray[500]
+    },
+    '&:hover': {
+      '& svg': {
+        fill: astroTokens.color['nav-bar-item'].selected.text
+      }
+    },
+    '&.is-focused': _objectSpread({}, defaultFocus)
   }
 };
 export default buttons;