@pingux/astro 2.56.0-alpha.0 → 2.56.0

package/lib/cjs/components/ListView/ListViewExpandableItem.js

@@ -13,7 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useExpandableListViewItem = _interopRequireDefault(require("../../hooks/useExpandableListViewItem/useExpandableListViewItem"));
 var _index = require("../../index");
 var _ListViewContext = require("./ListViewContext");
@@ -23,22 +22,25 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ListViewExpandableItem = function ListViewExpandableItem(props) {
   var item = props.item,
-    _props$item$props = props.item.props,
-    listItemProps = _props$item$props.listItemProps,
-    rowProps = _props$item$props.rowProps,
-    _props$item$props$has = _props$item$props.hasSeparator,
-    hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
-    hasInsetSeparator = _props$item$props.hasInsetSeparator,
+    _props$item = props.item,
+    _props$item$props = _props$item.props,
+    _props$item$props2 = _props$item$props === void 0 ? {} : _props$item$props,
+    listItemProps = _props$item$props2.listItemProps,
+    rowProps = _props$item$props2.rowProps,
+    _props$item$props2$ha = _props$item$props2.hasSeparator,
+    hasSeparator = _props$item$props2$ha === void 0 ? true : _props$item$props2$ha,
+    hasInsetSeparator = _props$item$props2.hasInsetSeparator,
+    key = _props$item.key,
     isHoverable = props.isHoverable,
     isFocusable = props.isFocusable,
     className = props.className;
-  var key = item.key;
   var _useContext = (0, _react.useContext)(_ListViewContext.ListViewContext),
     state = _useContext.state;
-  var expandableItemRowRef = (0, _react.useRef)();
-  var expandableChildrenRef = (0, _react.useRef)();
+  var expandableItemRowRef = (0, _react.useRef)(null);
+  var expandableChildrenRef = (0, _react.useRef)(null);
   var hookProps = {
     item: item,
+    key: key,
     listItemProps: listItemProps,
     rowProps: rowProps,
     hasSeparator: hasSeparator,
@@ -68,7 +70,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       alignItems: 'center',
       width: '100%'
     }
-  }, item.rendered[0], (0, _react2.jsx)(_index.Icon, {
+  }, item.rendered && item.rendered[0], (0, _react2.jsx)(_index.Icon, {
     sx: {
       ml: 'auto'
     },
@@ -79,22 +81,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
   }))), (0, _react2.jsx)(_index.Box, expandableItemState.gridCellProps, isExpanded && (0, _react2.jsx)(_ListViewFocusWrapper["default"], {
     isFocusEscaped: isFocusEscaped,
     containerProps: expandableContainerProps
-  }, item.rendered[1])));
-};
-ListViewExpandableItem.propTypes = {
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    rendered: _propTypes["default"].node,
-    props: _propTypes["default"].shape({
-      'data-id': _propTypes["default"].string,
-      listItemProps: _propTypes["default"].shape({}),
-      rowProps: _propTypes["default"].shape({}),
-      hasSeparator: _propTypes["default"].bool,
-      hasInsetSeparator: _propTypes["default"].bool
-    })
-  }),
-  isHoverable: _propTypes["default"].bool,
-  isFocusable: _propTypes["default"].bool
+  }, item.rendered && item.rendered[1])));
 };
 var _default = ListViewExpandableItem;
 exports["default"] = _default;

package/lib/cjs/components/ListView/ListViewFocusWrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ExpandableContainerProps } from '../../types/listView';
+export declare const escapeFocusDelegate: (e: any, setIsFocusEscaped: any, focusManager: any, isFocusEscaped: any) => void;
+declare const ListViewFocusWrapper: {
+    (props: ExpandableContainerProps): React.JSX.Element;
+    propTypes: {
+        containerProps: any;
+        isFocusEscaped: any;
+    };
+};
+export default ListViewFocusWrapper;

package/lib/cjs/components/ListView/ListViewFocusWrapper.js

@@ -49,6 +49,8 @@ var escapeFocusDelegate = function escapeFocusDelegate(e, setIsFocusEscaped, foc
     }
   }
 };
+
+// eslint-disable-next-line max-len
 exports.escapeFocusDelegate = escapeFocusDelegate;
 var ExpandableItemChildrenContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
@@ -65,7 +67,7 @@ var ExpandableItemChildrenContainer = /*#__PURE__*/(0, _react.forwardRef)(functi
 
   // this handles instances where a user clicks into the container.
   (0, _react.useEffect)(function () {
-    if (isFocusWithin && !isFocusEscaped && !isFocused) {
+    if (isFocusWithin && !isFocusEscaped && !isFocused && setIsFocusEscaped) {
       setIsFocusEscaped(true);
     }
   }, [isFocusWithin]);
@@ -78,18 +80,6 @@ var ExpandableItemChildrenContainer = /*#__PURE__*/(0, _react.forwardRef)(functi
     }
   }), children);
 });
-ExpandableItemChildrenContainer.propTypes = {
-  gridCellProps: _propTypes["default"].shape({}),
-  focusManager: _propTypes["default"].shape({}),
-  focusProps: _propTypes["default"].shape({}),
-  focusWithinProps: _propTypes["default"].shape({}),
-  isFocusEscaped: _propTypes["default"].bool,
-  isFocused: _propTypes["default"].bool,
-  isFocusWithin: _propTypes["default"].bool,
-  expandableContainerOnBlur: _propTypes["default"].func,
-  expandableContainerOnFocus: _propTypes["default"].func,
-  setIsFocusEscaped: _propTypes["default"].func
-};
 var ListViewFocusWrapper = function ListViewFocusWrapper(props) {
   var children = props.children,
     containerProps = props.containerProps,

package/lib/cjs/components/ListView/ListViewItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const ListViewItem: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        item: any;
+        isHoverable: any;
+        isFocusable: any;
+    };
+};
+export default ListViewItem;

package/lib/cjs/components/ListView/ListViewItem.js

@@ -47,7 +47,7 @@ var ListViewItem = function ListViewItem(props) {
   var _useContext = (0, _react.useContext)(_ListViewContext.ListViewContext),
     state = _useContext.state;
   var isDisabled = state.disabledKeys.has(item.key);
-  var rowRef = (0, _react.useRef)();
+  var rowRef = (0, _react.useRef)(null);
   var isSelectable = state.selectionManager.selectionMode !== 'none';
   var _useFocusRing = (0, _reactAria.useFocusRing)({
       within: true

package/lib/cjs/components/ListView/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ListView';

package/lib/cjs/components/ListView/listViewAttributes.d.ts

@@ -0,0 +1,113 @@
+export declare const listViewArgTypes: {
+    loadingState: {
+        description: string;
+        control: string;
+        options: any;
+    };
+    disabledKeys: {
+        description: string;
+    };
+    defaultExpandedKeys: {
+        description: string;
+    };
+    expandedKeys: {
+        description: string;
+    };
+    onExpandedChange: {
+        description: string;
+    };
+    items: {
+        description: string;
+    };
+    id: {
+        description: string;
+    };
+    isHoverable: {
+        description: string;
+    };
+    'aria-label': {
+        type: {
+            summary: string;
+        };
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    'aria-labelledby': {
+        type: {
+            summary: string;
+        };
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    'aria-describedby': {
+        type: {
+            summary: string;
+        };
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    'aria-details': {
+        type: {
+            summary: string;
+        };
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    selectedKeys: {
+        description: string;
+    };
+    selectionMode: {
+        description: string;
+    };
+    selectionStyle: {};
+    onSelectionChange: {
+        description: string;
+    };
+    onLoadMore: {
+        description: string;
+    };
+    'aria-controls': {
+        type: {
+            summary: string;
+        };
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    'aria-errormessage': {
+        type: {
+            summary: string;
+        };
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+};

package/lib/cjs/components/ListView/listViewAttributes.js

@@ -0,0 +1,74 @@
+"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.listViewArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var listViewArgTypes = _objectSpread(_objectSpread({}, _ariaAttributes.ariaAttributeBaseArgTypes), {}, {
+  loadingState: {
+    description: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.',
+    control: 'radio',
+    options: _loadingStates["default"]
+  },
+  disabledKeys: {
+    description: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.'
+  },
+  defaultExpandedKeys: {
+    description: 'The initial expanded keys in the collection (uncontrolled).'
+  },
+  expandedKeys: {
+    description: 'The expanded keys in the collection (controlled).'
+  },
+  onExpandedChange: {
+    description: 'Handler that is called when items are expanded or collapsed.'
+  },
+  items: {
+    description: 'The list of ListView items (controlled).'
+  },
+  id: {
+    description: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+  },
+  isHoverable: {
+    description: 'Whether ListView should handle hover state (defaults to true)'
+  },
+  'aria-label': _objectSpread({
+    description: 'Defines a string value that labels the current element.'
+  }, _ariaAttributes.ariaAttributeBaseDocSettings),
+  'aria-labelledby': _objectSpread({
+    description: 'Identifies the element (or elements) that labels the current element.'
+  }, _ariaAttributes.ariaAttributeBaseDocSettings),
+  'aria-describedby': _objectSpread({
+    description: 'Identifies the element (or elements) that describes the object.'
+  }, _ariaAttributes.ariaAttributeBaseDocSettings),
+  'aria-details': _objectSpread({
+    description: 'Identifies the element (or elements) that provide a detailed, extended description for the object.'
+  }, _ariaAttributes.ariaAttributeBaseDocSettings),
+  selectedKeys: {
+    description: 'The currently selected keys in the collection (controlled). `selectedKeys="all"` can be used to select every key.'
+  },
+  selectionMode: {
+    description: 'The type of selection that is allowed in the collection.'
+  },
+  selectionStyle: {},
+  onSelectionChange: {
+    description: 'Callback function that fires when the selected key changes.'
+  },
+  onLoadMore: {
+    description: 'Handler called when more items should be loaded, e.g. while scrolling near the bottom.'
+  }
+});
+exports.listViewArgTypes = listViewArgTypes;

package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.d.ts

@@ -1,12 +1,9 @@
-/// <reference types="react" />
-import type { TreeState } from 'react-stately';
-import type { SelectionManager } from '@react-stately/selection';
-import type { GridNode } from '@react-types/grid';
+import { ExpandableItemState, ExpandableListViewItemProps } from '../../types/listView';
 interface UseExpandableListViewItemResult {
     expandableRowProps: object;
     cellProps: object;
     expandableContainerProps: object;
-    expandableItemState: object;
+    expandableItemState: ExpandableItemState;
 }
 interface UseExpandableListViewItem<T> {
     /**
@@ -17,6 +14,7 @@ interface UseExpandableListViewItem<T> {
      * Returns four objects, three of which are spread into subcomponents,
      * the fourth provides state handing props.
      * @param {Object} [props] Properties provided to the underlying hooks
+     * @param {Boolean} [props.isFocusable] whether or not the option is focusable
      * @param {Boolean} [props.isHoverable] whether or not the option is hoverable
      * @param {ReactRef} [props.expandableChildrenRef] the container of all of the expandable content
      * @param {ReactRef} [props.expandableItemRowRef] the container of for the entire item
@@ -31,21 +29,5 @@ interface UseExpandableListViewItem<T> {
      */
     (props: ExpandableListViewItemProps<T>): UseExpandableListViewItemResult;
 }
-interface ListViewState<T> extends TreeState<T> {
-    hover: {
-        hoveredItem?: string;
-        setHoveredItem: (hoveredItem: string | number) => unknown;
-    };
-    isLink: boolean;
-    selectionManager: SelectionManager;
-}
-interface ExpandableListViewItemProps<T> {
-    expandableItemRowRef: React.MutableRefObject<HTMLDivElement | null>;
-    expandableChildrenRef: React.MutableRefObject<HTMLDivElement | null>;
-    className: string;
-    item: GridNode<T>;
-    state: ListViewState<T>;
-    key: string | number;
-}
 declare const useExpandableListViewItem: UseExpandableListViewItem<object>;
 export default useExpandableListViewItem;

package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.js

@@ -30,11 +30,12 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
     _props$item$props = props.item.props,
     listItemProps = _props$item$props.listItemProps,
     rowProps = _props$item$props.rowProps,
+    _props$item$props$has = _props$item$props.hasSeparator,
+    hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
     state = props.state,
     expandableItemRowRef = props.expandableItemRowRef,
     expandableChildrenRef = props.expandableChildrenRef,
     className = props.className;
-  var hasSeparator = true;
 
   // convenience extractions from props
   var key = item.key;
@@ -135,6 +136,7 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
 
   // if the expanded content container is focused, this function will call
   // it returns focus to the row on right press, and calls the native left press
+  /* istanbul ignore next */
   var expandedChildrenKeyCaptureOverride = function expandedChildrenKeyCaptureOverride(e) {
     var _expandableItemRowRef;
     // if left go back ie dont stifle

package/lib/cjs/hooks/useField/useField.d.ts

@@ -109,6 +109,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         isRow?: boolean | undefined;
         isDisabled?: boolean | undefined;
         isFocused?: boolean | undefined;
+        tabIndex?: string | number | undefined;
         isSelected?: boolean | undefined;
         isUnavailable?: boolean | undefined;
         hidden?: boolean | undefined;
@@ -1120,6 +1121,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         style?: import("react").CSSProperties | undefined;
         slot?: string | undefined;
         title?: string | undefined;
+        tabIndex?: number | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         dangerouslySetInnerHTML?: {
@@ -1302,7 +1304,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         nonce?: string | undefined;
         placeholder?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
-        tabIndex?: number | undefined;
         radioGroup?: string | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
@@ -1439,6 +1440,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         style?: import("react").CSSProperties | undefined;
         slot?: string | undefined;
         title?: string | undefined;
+        tabIndex?: number | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         dangerouslySetInnerHTML?: {
@@ -1621,7 +1623,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         nonce?: string | undefined;
         placeholder?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
-        tabIndex?: number | undefined;
         radioGroup?: string | undefined;
         about?: string | undefined;
         datatype?: string | undefined;

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

@@ -9,6 +9,7 @@ export interface BoxProps extends StyleProps, DOMAttributes {
     isDisabled?: boolean;
     /** Whether the box is focused. */
     isFocused?: boolean;
+    tabIndex?: string | number;
     isSelected?: boolean;
     isUnavailable?: boolean;
     hidden?: boolean;

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

@@ -0,0 +1,69 @@
+import { Dispatch, Key, ReactNode, SetStateAction } from 'react';
+import { FocusManager } from 'react-aria';
+import { TreeProps, TreeState } from 'react-stately';
+import type { GridNode } from '@react-types/grid';
+export type SelectionOptions = 'expansion' | 'single' | 'multiple' | 'none';
+export interface ListViewProps extends Omit<TreeProps<object>, 'selectionMode'> {
+    selectionStyle?: string;
+    isHoverable?: boolean;
+    loadingState?: string;
+    selectionMode?: SelectionOptions;
+    onFocus?: (event: any) => void;
+    onLoadMore?: () => void;
+    'aria-label'?: string;
+}
+export interface ExpandableItemChildrenContainerProps {
+    children?: ReactNode;
+    gridCellProps?: object;
+    isFocusEscaped?: boolean;
+    isFocusWithin?: boolean;
+    isFocused?: boolean;
+    focusManager?: FocusManager;
+    focusProps?: object;
+    setIsFocusEscaped?: (boolean: any) => void;
+    focusWithinProps?: object;
+}
+export interface ExpandableContainerProps {
+    containerProps: object;
+    isFocusEscaped: boolean;
+    children?: ReactNode;
+}
+export interface ListViewExpandableItemProps<T> {
+    isHoverable: boolean;
+    isFocusable: boolean;
+    className?: string;
+    item: ListViewItemTypes<T>;
+}
+export interface ListViewState<T> extends TreeState<T> {
+    hover: {
+        hoveredItem?: Key | null;
+        setHoveredItem: Dispatch<SetStateAction<Key | null>>;
+    };
+    isLink: boolean;
+    isLoading: boolean;
+}
+export interface ListViewItemTypesProps {
+    listItemProps?: object;
+    rowProps?: object;
+    hasSeparator?: boolean;
+    hasInsetSeparator?: boolean;
+}
+export interface ListViewItemTypes<T> extends GridNode<T> {
+    props?: ListViewItemTypesProps;
+}
+export interface ExpandableListViewItemProps<T> {
+    expandableItemRowRef: React.MutableRefObject<HTMLDivElement | null>;
+    expandableChildrenRef: React.MutableRefObject<HTMLDivElement | null>;
+    className?: string;
+    isHoverable: boolean;
+    isFocusable: boolean;
+    item: GridNode<unknown>;
+    state: ListViewState<T>;
+    key: string | number;
+}
+export interface ExpandableItemState {
+    isExpanded: boolean;
+    toggleExpanded: (boolean: any) => void;
+    isFocusEscaped: boolean;
+    gridCellProps: object;
+}

package/lib/cjs/types/listView.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
+});