@pingux/astro 2.7.1 → 2.8.0-alpha.1

package/lib/components/Button/Button.stories.js

@@ -1,6 +1,17 @@
+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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["isConfigured"];
+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) { _defineProperty(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; }
 import React from 'react';
 import AddCircleIcon from '@pingux/mdi-react/AddCircleIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
@@ -9,43 +20,14 @@ import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, SearchField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
-import { buttonVariants } from '../../utils/devUtils/constants/variants';
 import ButtonReadme from './Button.mdx';
-
-// removing the iconButton variants from this story.
+import { buttonArgTypes } from './buttonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var variants = buttonVariants;
-delete variants.ICON;
-delete variants.ICON_BUTTON;
-delete variants.INVERTED;
-
-// add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 export default {
   title: 'Components/Button',
   component: Button,
   decorators: [withDesign],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: variantOptions
-      },
-      defaultValue: 'default'
-    },
-    children: {
-      description: 'Button text.',
-      defaultValue: 'Button Text',
-      table: {
-        type: {
-          summary: 'string'
-        }
-      },
-      control: {
-        type: 'text'
-      }
-    }
-  },
+  argTypes: _objectSpread({}, buttonArgTypes),
   parameters: {
     docs: {
       source: {

package/lib/components/Button/buttonAttributes.js

@@ -0,0 +1,101 @@
+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(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) { _defineProperty(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; }
+import PropTypes from 'prop-types';
+import { descriptions as ariaDescriptions } from '../../utils/docUtils/ariaAttributes';
+import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
+
+// add designer approved variants for devs to use here
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
+var descriptions = {
+  isDisabled: 'Whether the button is disabled.',
+  isLoading: 'Shows loader instead of children',
+  onHoverStart: 'Handler that is called when a hover interaction starts. (e: HoverEvent) => void',
+  onHoverEnd: 'Handler that is called when the hover state changes. (isHovering: boolean) => void',
+  onHoverChange: 'Handler that is called when the press is released over the target. (e: PressEvent) => void',
+  onPress: 'Handler that is called when the press is released over the target. (e: PressEvent) => void',
+  onPressChange: 'Handler that is called when the press state changes. (isPressed: boolean) => void',
+  onPressEnd: 'Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. (e: PressEvent) => void',
+  onPressStart: 'Handler that is called when a press interaction starts. (e: PressEvent) => void',
+  onPressUp: 'Handler that is called when a press is released over the target, regardless of whether it started on the target or not. (e: PressEvent) => void',
+  variant: 'The styling variation of the button.',
+  tabIndex: 'The focus variation of button',
+  children: 'Button text.'
+};
+export var buttonArgTypes = _objectSpread(_objectSpread({
+  variant: {
+    control: {
+      type: 'select',
+      options: variantOptions
+    },
+    defaultValue: 'default',
+    description: descriptions.variant
+  },
+  children: {
+    defaultValue: 'Button Text',
+    table: {
+      type: {
+        summary: 'string'
+      }
+    },
+    control: {
+      type: 'text'
+    },
+    description: descriptions.children
+  },
+  onPress: _objectSpread({
+    description: descriptions.onPress
+  }, funcArg),
+  onPressStart: _objectSpread({
+    description: descriptions.onPressStart
+  }, funcArg),
+  onPressEnd: _objectSpread({
+    description: descriptions.onPressEnd
+  }, funcArg),
+  onPressChange: _objectSpread({
+    description: descriptions.onPressChange
+  }, funcArg),
+  onPressUp: _objectSpread({
+    description: descriptions.onPressUp
+  }, funcArg)
+}, onHoverArgTypes), {}, {
+  isLoading: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isLoading
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isDisabled
+  }),
+  tabIndex: {
+    description: descriptions.tabIndex
+  },
+  'aria-label': {
+    control: {
+      type: 'text'
+    },
+    description: ariaDescriptions.ariaLabel
+  }
+});
+export var buttonPropTypes = {
+  'aria-label': PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  onHoverStart: PropTypes.func,
+  onHoverEnd: PropTypes.func,
+  onHoverChange: PropTypes.func,
+  onPress: PropTypes.func,
+  onPressStart: PropTypes.func,
+  onPressEnd: PropTypes.func,
+  onPressChange: PropTypes.func,
+  onPressUp: PropTypes.func,
+  variant: PropTypes.string,
+  tabIndex: PropTypes.number
+};

package/lib/components/Calendar/Calendar.test.js

@@ -124,7 +124,7 @@ test('should be able to select dates', function () {
   userEvent.click(dateButtons[4]);
   expect(dateButtons[4]).toHaveClass('is-selected');
 });
-test('should be able to navigate and select shown previous month dates', function () {
+test('should be able to navigate to previous month dates without selection', function () {
   var _context3;
   getComponent({
     defaultValue: '2022-08-10'
@@ -135,10 +135,10 @@ test('should be able to navigate and select shown previous month dates', functio
   var previousDate = disabledGridCells[0];
   expect(within(previousDate).getByText(31)).toHaveAttribute('aria-label', 'Sunday, July 31, 2022');
   userEvent.click(previousDate);
-  var selectedDate = screen.queryByText(31);
-  expect(selectedDate).toHaveAttribute('aria-label', 'Sunday, July 31, 2022 selected');
+  var selectedMonth = screen.queryByRole('grid');
+  expect(selectedMonth).toHaveAttribute('aria-label', 'July 2022');
 });
-test('should be able to navigate and select shown next month dates', function () {
+test('should be able to navigate to next month dates without selection', function () {
   var _context4;
   getComponent({
     defaultValue: '2022-08-10'
@@ -149,8 +149,8 @@ test('should be able to navigate and select shown next month dates', function ()
   var NextDate = disabledGridCells[34];
   expect(within(NextDate).getByText(3)).toHaveAttribute('aria-label', 'Saturday, September 3, 2022');
   userEvent.click(NextDate);
-  var selectedDate = screen.queryByText(3);
-  expect(selectedDate).toHaveAttribute('aria-label', 'Saturday, September 3, 2022 selected');
+  var selectedMonth = screen.queryByRole('grid');
+  expect(selectedMonth).toHaveAttribute('aria-label', 'September 2022');
 });
 test('allows users to open calendar item with enter / space key', function () {
   getComponent({

package/lib/components/Calendar/CalendarCell.js

@@ -37,8 +37,8 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
     formattedDate = _useCalendarCell.formattedDate,
     isDisabled = _useCalendarCell.isDisabled;
   var focusPreviousPage = state.focusPreviousPage,
-    setValue = state.setValue,
-    focusNextPage = state.focusNextPage;
+    focusNextPage = state.focusNextPage,
+    setFocused = state.setFocused;
 
   /**
    * Function handles the navigation and adds focus to previous or next month dates
@@ -48,13 +48,13 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var handleDisableClick = useCallback(function () {
     var _cellRef$current, _cellRef$current2;
     if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && formattedDate > 20) {
+      setFocused(undefined);
       focusPreviousPage();
-      setValue(date);
     } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && formattedDate < 15) {
+      setFocused(undefined);
       focusNextPage();
-      setValue(date);
     }
-  }, [date, focusNextPage, focusPreviousPage, formattedDate, setValue, state]);
+  }, [date, focusNextPage, focusPreviousPage, formattedDate, state, setFocused]);
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
@@ -103,6 +103,7 @@ CalendarCell.propTypes = {
     focusPreviousPage: PropTypes.func,
     setValue: PropTypes.func,
     focusNextPage: PropTypes.func,
+    setFocused: PropTypes.func,
     setFocusedDate: PropTypes.func,
     isDisabled: PropTypes.bool
   }),

package/lib/components/IconButton/IconButton.js

@@ -15,11 +15,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
+import { iconButtonPropTypes } from './iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -81,43 +81,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }
   return button;
 });
-IconButton.propTypes = {
-  /** Styling to apply to the IconButton. */
-  variant: PropTypes.string,
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-  /** Content will be displayed in a tooltip on hover or focus. */
-  title: PropTypes.string,
-  /**
-   * Handler that is called when the press is released over the target.
-   * (e: PressEvent) => void
-   */
-  onPress: PropTypes.func,
-  /**
-   * Handler that is called when a press interaction starts.
-   * (e: PressEvent) => void
-   */
-  onPressStart: PropTypes.func,
-  /**
-   * Handler that is called when a press interaction ends, either over the target or when the
-   * pointer leaves the target.
-   * (e: PressEvent) => void
-   */
-  onPressEnd: PropTypes.func,
-  /**
-   * Handler that is called when the press state changes.
-   * (isPressed: boolean) => void
-   */
-  onPressChange: PropTypes.func,
-  /**
-   * Handler that is called when a press is released over the target, regardless of whether it
-   * started on the target or not.
-   * (e: PressEvent) => void
-   */
-  onPressUp: PropTypes.func,
-  /** Whether the icon is disabled. */
-  isDisabled: PropTypes.bool
-};
+IconButton.propTypes = iconButtonPropTypes;
 IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false

package/lib/components/IconButton/IconButton.stories.js

@@ -10,6 +10,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
 import IconButtonReadme from './IconButton.mdx';
+import { iconButtonArgTypes } from './iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconButton',
@@ -25,40 +26,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    icon: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: CreateIcon,
-      description: 'The icon to render. List of icons at https://materialdesignicons.com/'
-    },
-    title: {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    isDisabled: {},
-    variant: {
-      control: {
-        type: 'select',
-        options: ['base', 'inverted', 'invertedSquare', 'square']
-      },
-      defaultValue: 'base'
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['xs', 'sm', 'md']
-      },
-      defaultValue: 'sm'
-    }
-  }
+  argTypes: iconButtonArgTypes
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconButton, _extends({

package/lib/components/IconButton/iconButtonAttributes.js

@@ -0,0 +1,91 @@
+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(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) { _defineProperty(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; }
+import CreateIcon from '@pingux/mdi-react/CreateIcon';
+import PropTypes from 'prop-types';
+import { descriptions as ariaDescriptions } from '../../utils/docUtils/ariaAttributes';
+import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+var descriptions = {
+  icon: 'The icon to render. List of icons at https://materialdesignicons.com/',
+  isDisabled: 'Whether the icon is disabled.',
+  onPress: 'Handler that is called when the press is released over the target. (e: PressEvent) => void',
+  onPressChange: 'Handler that is called when the press state changes. (isPressed: boolean) => void',
+  onPressEnd: 'Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. (e: PressEvent) => void',
+  onPressStart: 'Handler that is called when a press interaction starts. (e: PressEvent) => void',
+  onPressUp: 'Handler that is called when a press is released over the target, regardless of whether it started on the target or not. (e: PressEvent) => void',
+  title: 'Content will be displayed in a tooltip on hover or focus.',
+  variant: 'Styling to apply to the IconButton.'
+};
+export var iconButtonArgTypes = {
+  icon: {
+    control: {
+      type: 'none'
+    },
+    defaultValue: CreateIcon,
+    description: descriptions.icon
+  },
+  title: {
+    control: {
+      type: 'text'
+    },
+    description: descriptions.title
+  },
+  'aria-label': {
+    control: {
+      type: 'text'
+    },
+    description: ariaDescriptions.ariaLabel
+  },
+  isDisabled: _objectSpread({
+    description: descriptions.isDisabled
+  }, booleanArg),
+  variant: {
+    control: {
+      type: 'select',
+      options: ['base', 'inverted', 'invertedSquare', 'square']
+    },
+    defaultValue: 'base',
+    description: descriptions.variant
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: ['xs', 'sm', 'md']
+    },
+    defaultValue: 'sm'
+  },
+  onPress: _objectSpread({
+    description: descriptions.onPress
+  }, funcArg),
+  onPressStart: _objectSpread({
+    description: descriptions.onPressStart
+  }, funcArg),
+  onPressEnd: _objectSpread({
+    description: descriptions.onPressEnd
+  }, funcArg),
+  onPressChange: _objectSpread({
+    description: descriptions.onPressChange
+  }, funcArg),
+  onPressUp: _objectSpread({
+    description: descriptions.onPressUp
+  }, funcArg)
+};
+export var iconButtonPropTypes = {
+  variant: PropTypes.string,
+  'aria-label': PropTypes.string,
+  title: PropTypes.string,
+  onPress: PropTypes.func,
+  onPressStart: PropTypes.func,
+  onPressEnd: PropTypes.func,
+  onPressChange: PropTypes.func,
+  onPressUp: PropTypes.func,
+  isDisabled: PropTypes.bool
+};

package/lib/components/ListItem/ListItem.js

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { useStatusClasses } from '../../hooks';
+import { useDeprecationWarning, useStatusClasses } from '../../hooks';
 import { onHoverPropTypes } from '../../utils/docUtils/hoverProps';
 import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -34,6 +34,7 @@ var ListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onHoverStart: onHoverStart
     }),
     hoverProps = _useHover.hoverProps;
+  useDeprecationWarning('The ListItem will be depreciated in the near future, please use ListViewItem');
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isHovered,
       isSelected: isSelected

package/lib/components/ListView/ListView.js

@@ -53,15 +53,6 @@ export function useListLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
-
-/**
- * NOTE: be careful with putting focusable elements inside ListView.
- * It is using a grid (useList hook) with its own event listeners under the hood.
- * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
- * If you decided to add a focusable element inside ListView,
- * you should stop bubbling of a pointerDown event and put a focus on the element.
-*/
-
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
     _props$isHoverable = props.isHoverable,