@pingux/astro 2.234.1 → 2.236.0-alpha.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/types/ComboBox.d.ts

@@ -0,0 +1,36 @@
+import React, { Key, ReactNode } from 'react';
+import type { AriaButtonProps } from 'react-aria';
+import type { MenuTriggerAction } from '@react-types/combobox';
+import { ContainerProps, ControlProps } from '../hooks/useField/useField';
+import { BoxProps } from './box';
+import { Status } from './item';
+import { loadingState } from './shared';
+export interface ComboBoxInputProps extends Omit<BoxProps, 'children' | 'direction'> {
+    containerProps?: Omit<ContainerProps, 'sx'> & {
+        sx?: Record<string, unknown>;
+    };
+    controlProps?: ControlProps;
+    hasAutoFocus?: boolean;
+    helperText?: ReactNode;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    inputWrapperRef?: React.RefObject<HTMLDivElement>;
+    isDisabled?: boolean;
+    isOpen?: boolean;
+    isReadOnly?: boolean;
+    label?: ReactNode;
+    labelProps?: React.DOMAttributes<HTMLElement>;
+    loadingState?: loadingState;
+    menuTrigger?: MenuTriggerAction;
+    onInputChange?: (value: string) => void;
+    onLoadMore?: () => void;
+    onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;
+    onSelectionChange?(key: Key | null): void;
+    triggerProps?: AriaButtonProps;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
+    wrapperProps?: Omit<BoxProps, 'sx'> & {
+        sx?: Record<string, unknown>;
+    };
+    /** Determines any status related styling. */
+    status?: Status;
+}

package/lib/cjs/types/ComboBox.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/ComboBoxField.d.ts

@@ -0,0 +1,110 @@
+import { Key, ReactNode } from 'react';
+import type { MenuTriggerAction } from '@react-types/combobox';
+import type { CollectionChildren } from '@react-types/shared';
+import { ControlProps } from '../hooks/useField/useField';
+import { BoxProps } from './box';
+import { Status } from './item';
+import { ScrollBoxProps } from './scrollBox';
+import { Axis, loadingState } from './shared';
+export interface ComboBoxFieldProps<T extends object = object> extends Omit<BoxProps, 'children' | 'direction'> {
+    /** Whether or not adding new options to the list is enabled. */
+    hasAddOption?: boolean;
+    /** Whether the ComboBox allows a non-item matching input value to be set. */
+    hasCustomValue?: boolean;
+    /** Whether the collection allows empty selection. */
+    hasNoEmptySelection?: boolean;
+    /**
+     * The item keys that are disabled. These items cannot be selected, focused, or otherwise
+     * interacted with.
+     */
+    disabledKeys?: Iterable<Key>;
+    /** The interaction required to display the ComboBox menu. */
+    menuTrigger?: MenuTriggerAction;
+    /**
+     * Whether the ComboBox menu is prevented from flipping directions when insufficient space is
+     * available for the given `direction` placement.
+     */
+    isNotFlippable?: boolean;
+    /** Where the ComboBox menu opens relative to its trigger. */
+    direction?: Axis;
+    /** Text rendered below the input. */
+    helperText?: ReactNode;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: string;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: Key | null;
+    /**
+     * Handler that is called when the selection changes.
+     *
+     * `(key: Key) => any`
+     */
+    onSelectionChange?(key: Key | null): void;
+    /** The list of ComboBox items (uncontrolled). */
+    defaultItems?: Iterable<T>;
+    /** The list of ComboBox items (controlled). */
+    items?: Iterable<T>;
+    /**
+     * Method that is called when the open state of the menu changes.
+     * Returns the new open state and the action that caused the opening of the menu.
+     *
+     * `(isOpen: boolean, menuTrigger: MenuTriggerAction) => void`
+     */
+    onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;
+    loadingState?: loadingState;
+    onLoadMore?: () => void;
+    /** The default value of the ComboBox input (uncontrolled). */
+    defaultInputValue?: string;
+    /** The value of the ComboBox input (controlled). */
+    inputValue?: string;
+    /**
+     * Handler that is called when the ComboBox input value changes.
+     *
+     * `(value: string) => void`
+     */
+    onInputChange?: (value: string) => void;
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /** The rendered label for the field. */
+    label?: ReactNode;
+    /** Temporary text that occupies the text input when it is empty. */
+    placeholder?: string;
+    /** Whether the element should receive focus on render. */
+    hasAutoFocus?: boolean;
+    /** Whether the field has a status indicator. */
+    hasNoStatusIndicator?: boolean;
+    /**
+     * Handler that determines the default filtering for items. If undefined, `contains` from
+     * [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) is used.
+     *
+     * `(option: string, inputValue: string) => boolean`
+     */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /** @ignore */
+    scrollBoxProps?: Omit<ScrollBoxProps, 'sx'> & {
+        sx?: Record<string, unknown>;
+    };
+    /** Props object that is spread directly into the ComboBoxInput element. */
+    controlProps?: ControlProps;
+    /** Whether the collection allows an empty collection. */
+    allowsEmptyCollection?: boolean;
+    /** The function to render when the collection is empty. */
+    renderEmptyState?: () => ReactNode;
+    /** Determines any status related styling. */
+    status?: Status;
+    /** The collection items. */
+    children?: CollectionChildren<T>;
+    /** Whether the ComboBox menu is currently open (controlled). */
+    isOpen?: boolean;
+    /** Props object that is spread directly into the ComboBoxInput wrapper element. */
+    wrapperProps?: Omit<BoxProps, 'sx'> & {
+        sx?: Record<string, unknown>;
+    };
+    /** Props object that is spread directly into the input wrapper element. */
+    containerProps?: Omit<BoxProps, 'sx'> & {
+        sx?: Record<string, unknown>;
+    };
+}

package/lib/cjs/types/ComboBoxField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -19,6 +19,8 @@ export * from './codeEditor';
 export * from './codeView';
 export * from './collapsiblePanel';
 export * from './colorField';
+export * from './ComboBox';
+export * from './ComboBoxField';
 export * from './copyText';
 export * from './dataTable';
 export * from './datePicker';