@pingux/astro 2.234.1 → 2.236.0-alpha.0

package/lib/components/ComboBox/ComboBoxInput.js

@@ -10,19 +10,15 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "isDisabled", "isReadOnly", "isOpen", "loadingState", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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, useImperativeHandle } from 'react';
 import { FocusRing, mergeProps } from 'react-aria';
 import { PressResponder, useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Box, Button, Icon, Loader, TextField } from '../..';
 import { useInputLoader, usePropWarning } from '../../hooks';
 import useGetTheme from '../../hooks/useGetTheme';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var controlProps = props.controlProps,
@@ -45,6 +41,9 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelectionChange = props.onSelectionChange,
     wrapperProps = props.wrapperProps,
     others = _objectWithoutProperties(props, _excluded);
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -59,12 +58,10 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-  var _useHover = useHover({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var _useInputLoader = useInputLoader({
       loadingState: loadingState,
-      inputValue: inputProps.value
+      // eslint-disable-next-line max-len
+      inputValue: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value
     }),
     isLoading = _useInputLoader.isLoading;
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -91,7 +88,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     size: isOnyx ? 'sm' : 'md',
     sx: isOpen ? {
       transform: 'rotate(180deg)'
-    } : null,
+    } : undefined,
     title: {
       name: ''
     },
@@ -114,40 +111,14 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
+    tabIndex: -1,
     statusClasses: {
       isHovered: isHovered
     },
     ref: inputRef,
     slots: {
       inContainer: button
-    },
-    tabIndex: -1
+    }
   }))));
 });
-ComboBoxInput.propTypes = _objectSpread(_objectSpread({
-  containerProps: PropTypes.shape({}),
-  controlProps: PropTypes.shape({}),
-  hasAutoFocus: PropTypes.bool,
-  helperText: PropTypes.node,
-  inputProps: PropTypes.shape({
-    value: PropTypes.string
-  }),
-  inputRef: PropTypes.shape({}),
-  inputWrapperRef: PropTypes.shape({}),
-  isDisabled: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  label: PropTypes.node,
-  labelProps: PropTypes.shape({}),
-  loadingState: PropTypes.oneOf(_Object$values(loadingStates)),
-  menuTrigger: PropTypes.oneOf(['focus', 'input', 'manual']),
-  onInputChange: PropTypes.func,
-  onLoadMore: PropTypes.func,
-  onOpenChange: PropTypes.func,
-  onSelectionChange: PropTypes.func,
-  style: PropTypes.shape({}),
-  triggerProps: PropTypes.shape({}),
-  triggerRef: PropTypes.shape({}),
-  wrapperProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes);
 export default ComboBoxInput;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -14,7 +14,6 @@ var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySe
   _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp", "UNSTABLE_itemBehavior"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -22,13 +21,10 @@ import { DismissButton, FocusScope, useComboBox, useOverlayPosition } from 'reac
 import { useComboBoxState } from 'react-stately';
 import { useFilter } from '@react-aria/i18n';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import PropTypes from 'prop-types';
 import { usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import ComboBoxInput from '../ComboBox';
 import ListBox from '../ListBox';
 import Popover from '../Popover';
@@ -76,11 +72,11 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     label: 'default',
     allowsEmptyCollection: allowsEmptyCollection
   }, nonAriaProps);
-  var popoverRef = useRef();
-  var buttonRef = useRef();
-  var listBoxRef = useRef();
-  var inputRef = useRef();
-  var inputWrapperRef = useRef();
+  var popoverRef = useRef(null);
+  var buttonRef = useRef(null);
+  var listBoxRef = useRef(null);
+  var inputRef = useRef(null);
+  var inputWrapperRef = useRef(null);
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -91,7 +87,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var getItemsArr = function getItemsArr(initialArr) {
     if (initialArr && shouldShowAddOption) {
       var _context;
-      return _concatInstanceProperty(_context = []).call(_context, initialArr, [{
+      return _concatInstanceProperty(_context = []).call(_context, _Array$from(initialArr), [{
         name: addOption,
         key: addOption
       }]);
@@ -133,10 +129,11 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     inputProps = _useComboBox.inputProps,
     listBoxProps = _useComboBox.listBoxProps,
     labelProps = _useComboBox.labelProps;
-  var shouldFocusOnHover = listBoxProps.shouldFocusOnHover,
-    shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
-    action = listBoxProps['UNSTABLE_itemBehavior'],
-    otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded2);
+  var _ref = listBoxProps,
+    shouldFocusOnHover = _ref.shouldFocusOnHover,
+    shouldSelectOnPressUp = _ref.shouldSelectOnPressUp,
+    action = _ref['UNSTABLE_itemBehavior'],
+    otherListBoxProps = _objectWithoutProperties(_ref, _excluded2);
   var _useOverlayPosition = useOverlayPosition({
       offset: 1,
       targetRef: inputWrapperRef,
@@ -224,125 +221,6 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true
   })), listBox);
 });
-ComboBoxField.propTypes = _objectSpread(_objectSpread({
-  /* Whether or not adding new options to the list is enabled. */
-  hasAddOption: PropTypes.bool,
-  /** Whether the ComboBox allows a non-item matching input value to be set. */
-  hasCustomValue: PropTypes.bool,
-  /** Whether the collection allows empty selection. */
-  hasNoEmptySelection: PropTypes.bool,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: isIterableProp,
-  /** The interaction required to display the ComboBox menu. */
-  menuTrigger: PropTypes.oneOf(['focus', 'input', 'manual']),
-  /**
-   * Whether the ComboBox menu is prevented from flipping directions when insufficient space is
-   * available for the given `direction` placement.
-   */
-  isNotFlippable: PropTypes.bool,
-  /** Where the ComboBox menu opens relative to its trigger. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: PropTypes.string,
-  /** The currently selected key in the collection (controlled). */
-  selectedKey: PropTypes.string,
-  /**
-   * Handler that is called when the selection changes.
-   *
-   * `(key: Key) => any`
-   */
-  onSelectionChange: PropTypes.func,
-  /** The list of ComboBox items (uncontrolled). */
-  defaultItems: isIterableProp,
-  /** The list of ComboBox items (controlled). */
-  items: isIterableProp,
-  /**
-   * 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: PropTypes.func,
-  loadingState: PropTypes.oneOf(_Object$values(loadingStates)),
-  onLoadMore: PropTypes.func,
-  /** The default value of the ComboBox input (uncontrolled). */
-  defaultInputValue: PropTypes.string,
-  /** The value of the ComboBox input (controlled). */
-  inputValue: PropTypes.string,
-  /**
-   * Handler that is called when the ComboBox input value changes.
-   *
-   * `(value: string) => void`
-   */
-  onInputChange: PropTypes.func,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /** Whether the input is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the input can be selected but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /** The rendered label for the field. */
-  label: PropTypes.node,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /** Whether the field has a status indicator. */
-  hasNoStatusIndicator: PropTypes.bool,
-  /**
-   * Handler that is called when the element receives focus.
-   *
-   * `(e: FocusEvent) => void`
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Handler that is called when the element loses focus.
-   *
-   * `(e: FocusEvent) => void`
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Handler that is called when the element's focus status changes.
-   *
-   * `(isFocused: boolean) => void`
-   */
-  onFocusChange: PropTypes.func,
-  /**
-   * Handler that is called when a key is pressed.
-   *
-   * `(e: KeyboardEvent) => void`
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Handler that is called when a key is released.
-   *
-   * `(e: KeyboardEvent) => void`
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * 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: PropTypes.func,
-  // /** Props object that is spread directly into the ScrollBox element. */
-  /** @ignore */
-  scrollBoxProps: PropTypes.shape({
-    maxHeight: PropTypes.string
-  }),
-  /** Props object that is spread directly into the ComboBoxInput element. */
-  controlProps: PropTypes.shape({
-    onClick: PropTypes.func
-  })
-}, statusPropTypes), ariaAttributesBasePropTypes);
 ComboBoxField.defaultProps = {
   menuTrigger: 'focus',
   direction: 'bottom',

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -330,9 +330,10 @@ export var AsyncLoading = function AsyncLoading() {
     loadingState: loading,
     onLoadMore: handleLoadMore
   }), function (item) {
+    var _item$name, _item$name2;
     return ___EmotionJSX(Item, {
-      key: item.name.given
-    }, item.name.given);
+      key: (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.given
+    }, (_item$name2 = item.name) === null || _item$name2 === void 0 ? void 0 : _item$name2.given);
   }));
 };
 export var ControlledInput = function ControlledInput() {
@@ -411,8 +412,8 @@ export var ControlledFiltering = function ControlledFiltering() {
       inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
       selectedKey: key,
       itemsList: _filterInstanceProperty(items).call(items, function (item) {
-        var _selectedItem$name;
-        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+        var _name;
+        return startsWith(item.name, (_name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _name !== void 0 ? _name : '');
       })
     });
   };

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -145,8 +145,8 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
       inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
       selectedKey: key,
       itemsList: _filterInstanceProperty(items).call(items, function (item) {
-        var _selectedItem$name;
-        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+        var _name;
+        return startsWith(item.name, (_name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _name !== void 0 ? _name : '');
       })
     });
   };
@@ -173,7 +173,6 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
     }
   };
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
     items: fieldState.itemsList,
     inputValue: fieldState.inputValue,
     selectedKey: fieldState.selectedKey,

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.