@pingux/astro 2.235.0-alpha.0 → 2.236.0

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

@@ -0,0 +1,147 @@
+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 { astroTokens } 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 (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(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(astroTokens.color.primary),
+      outline: 'none',
+      borderRadius: '4px'
+    },
+    '&.is-selected, &[data-selected]': {
+      bg: astroTokens.color['nav-bar-item'].selected.bg,
+      '& *': {
+        color: astroTokens.color.gray[900]
+      }
+    },
+    '&.is-disabled, &[data-disabled]': {
+      opacity: 0.65,
+      cursor: 'not-allowed'
+    },
+    '&.is-dragging, &[data-dragging]': {
+      bg: astroTokens.color['nav-bar-item'].hover.bg,
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokens.color.primary),
+      borderRadius: '4px',
+      '& *': {
+        color: astroTokens.color['nav-bar-item'].selected.text
+      }
+    },
+    '&.is-drop-target, &[data-drop-target]': {
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokens.color.primary),
+      borderRadius: '4px'
+    },
+    '&:hover': {
+      bg: astroTokens.color['nav-bar-item'].hover.bg,
+      borderRadius: '4px'
+    }
+  }),
+  itemContent: _objectSpread(_objectSpread({}, tree.itemContent), {}, {
+    color: astroTokens.color.gray[900],
+    '&:hover': {
+      bg: 'transparent'
+    }
+  }),
+  dragButton: _objectSpread(_objectSpread({}, tree.dragButton), {}, {
+    path: {
+      fill: astroTokens.color.gray[500]
+    },
+    '&:hover': {
+      bg: astroTokens.color['nav-bar-item'].hover.bg,
+      '& svg': {
+        fill: astroTokens.color['nav-bar-item'].selected.text
+      }
+    },
+    '&:focus, &:focus-visible': {
+      boxShadow: "0 0 0 2px ".concat(astroTokens.color.primary),
+      borderRadius: '4px'
+    },
+    '&:active, &[data-pressed]': {
+      bg: astroTokens.color['primary-light'],
+      cursor: 'grabbing',
+      '& svg': {
+        fill: 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(astroTokens.color.primary)
+    }
+  }),
+  selectionCheckboxBox: _objectSpread(_objectSpread({}, tree.selectionCheckboxBox), {}, {
+    borderColor: astroTokens.color.gray[500],
+    '&[data-selected]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-selected]']), {}, {
+      borderColor: astroTokens.color.primary,
+      bg: astroTokens.color.primary
+    }),
+    '[data-hovered] &, [data-pressed] &': {
+      borderColor: astroTokens.color.primary
+    },
+    '&[data-disabled]': _objectSpread(_objectSpread({}, tree.selectionCheckboxBox['&[data-disabled]']), {}, {
+      borderColor: astroTokens.color.border,
+      background: 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: astroTokens.color.avatar.blue.bg,
+    color: astroTokens.color.avatar.blue.text,
+    '&.is-leaf': {
+      bg: astroTokens.color.avatar.indigo.bg,
+      color: 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: astroTokens.color.primary
+      }
+    })
+  })
+});
+export default onyxTree;

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

@@ -45,6 +45,7 @@ import { table } from './table';
 import { tableBase } from './tableBase';
 import { menuTab, tab, tabPickerExpandIcon, tabs } from './tabs';
 import tooltip from './tooltip';
+import tree from './tree';
 var onyxLabelValuePairs = _objectSpread(_objectSpread({}, labelValuePairs), {}, {
   value: _objectSpread(_objectSpread({}, labelValuePairs.value), {}, {
     color: 'text.primary'
@@ -536,5 +537,6 @@ export default {
   tableBase: tableBase,
   tabs: tabs,
   tooltip: tooltip,
+  tree: tree,
   imageUpload: imageUpload
 };

package/lib/styles/variants/index.js

@@ -11,8 +11,10 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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 defaultButtons from '../../components/Button/Buttons.styles';
 import iconButtons from '../../components/IconButton/IconButton.styles';
+import { treeChevron } from '../../components/Tree/Tree.styles';
 export var buttons = _objectSpread(_objectSpread({}, defaultButtons), {}, {
-  iconButtons: iconButtons
+  iconButtons: iconButtons,
+  treeChevron: treeChevron
 });
 export { default as badges } from '../../components/Badge/Badge.styles';
 export { default as cards } from '../../components/Card/Card.styles';

package/lib/styles/variants/variants.js

@@ -67,6 +67,7 @@ import * as tab from '../../components/Tabs/Tabs.style';
 import timefield from '../../components/TimeField/TimeField.styles';
 import timeZone from '../../components/TimeZonePicker/TimeZone.styles';
 import tooltip from '../../components/TooltipTrigger/Tooltip.styles';
+import tree from '../../components/Tree/Tree.styles';
 import treeView from '../../components/TreeView/TreeView.styles';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
@@ -124,6 +125,7 @@ export default _objectSpread(_objectSpread({
   timefield: timefield,
   timeZone: timeZone,
   tooltip: tooltip,
+  tree: tree,
   treeView: treeView
 }, tab), {}, {
   statusIcon: statusIcon,

package/lib/utils/getStatusClasses.js

@@ -0,0 +1,22 @@
+import classnames from 'classnames';
+import kebabCase from 'lodash/kebabCase';
+import mapKeys from '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 classnames(defaultClass, mapKeys(statuses, function (_v, k) {
+    return kebabCase(k);
+  }));
+};
+export default getStatusClasses;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.235.0-alpha.0",
+  "version": "2.236.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -86,13 +86,15 @@
     "@react-stately/dnd": "3.0.0",
     "@react-stately/grid": "~3.3.1",
     "@react-stately/layout": "^3.13.4",
-    "@react-stately/list": "^3.10.4",
-    "@react-stately/overlays": "^3.6.4",
-    "@react-stately/select": "^3.6.4",
+    "@react-stately/combobox": "^3.14.1",
+    "@react-stately/list": "^3.14.1",
+    "@react-stately/overlays": "^3.7.1",
+    "@react-stately/select": "^3.10.1",
     "@react-stately/selection": "^3.15.0",
-    "@react-stately/table": "^3.9.0",
-    "@react-stately/tabs": "^3.6.3",
+    "@react-stately/table": "^3.16.1",
+    "@react-stately/tabs": "^3.9.1",
     "@react-stately/toggle": "^3.8.5",
+    "@react-stately/tooltip": "^3.6.1",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
     "@react-types/combobox": "^3.13.8",
@@ -116,6 +118,7 @@
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",
     "react-aria": "~3.19.0",
+    "react-aria-components": "1.20.0",
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
     "react-stately": "^3.31.0",