@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/hooks/useSelectField/useSelectField.js

@@ -10,56 +10,48 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useCallback, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
-import { useSelect } from '@react-aria/select';
+import { DismissButton, FocusScope, useOverlayPosition, useSelect } from 'react-aria';
+import { useSelectState } from 'react-stately';
 import { useResizeObserver } from '@react-aria/utils';
-import { useSelectState } from '@react-stately/select';
-import { useColumnStyles, useDeprecationWarning, useField } from '..';
+import { modes } from '../../components/Label/constants';
 import ListBox from '../../components/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
 import ScrollBox from '../../components/ScrollBox';
-import { modes } from '../../components/Label/constants';
+import { useColumnStyles, useDeprecationWarning, useField } from '..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var useSelectField = function useSelectField(props, ref) {
   var _context;
-
   var align = props.align,
-      children = props.children,
-      defaultSelectedKey = props.defaultSelectedKey,
-      defaultText = props.defaultText,
-      direction = props.direction,
-      disabledKeys = props.disabledKeys,
-      disallowEmptySelection = props.hasNoEmptySelection,
-      defaultOpen = props.isDefaultOpen,
-      isDisabled = props.isDisabled,
-      isLoading = props.isLoading,
-      isNotFlippable = props.isNotFlippable,
-      isOpen = props.isOpen,
-      isReadOnly = props.isReadOnly,
-      isRequired = props.isRequired,
-      items = props.items,
-      label = props.label,
-      listboxStyle = props.listboxStyle,
-      name = props.name,
-      placeholder = props.placeholder,
-      selectedKey = props.selectedKey,
-      onLoadMore = props.onLoadMore,
-      onOpenChange = props.onOpenChange,
-      onSelectionChange = props.onSelectionChange,
-      controlProps = props.controlProps,
-      scrollBoxProps = props.scrollBoxProps; // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
+    children = props.children,
+    defaultSelectedKey = props.defaultSelectedKey,
+    defaultText = props.defaultText,
+    direction = props.direction,
+    disabledKeys = props.disabledKeys,
+    disallowEmptySelection = props.hasNoEmptySelection,
+    defaultOpen = props.isDefaultOpen,
+    isDisabled = props.isDisabled,
+    isLoading = props.isLoading,
+    isNotFlippable = props.isNotFlippable,
+    isOpen = props.isOpen,
+    isReadOnly = props.isReadOnly,
+    isRequired = props.isRequired,
+    items = props.items,
+    label = props.label,
+    listboxStyle = props.listboxStyle,
+    name = props.name,
+    placeholder = props.placeholder,
+    selectedKey = props.selectedKey,
+    onLoadMore = props.onLoadMore,
+    onOpenChange = props.onOpenChange,
+    onSelectionChange = props.onSelectionChange,
+    controlProps = props.controlProps,
+    scrollBoxProps = props.scrollBoxProps;
+  // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
   // negate this.
-
   var shouldFlip = !isNotFlippable;
-
   var selectProps = _objectSpread({
     children: children,
     defaultSelectedKey: defaultSelectedKey,
@@ -83,77 +75,75 @@ var useSelectField = function useSelectField(props, ref) {
     disallowEmptySelection: disallowEmptySelection,
     // must match React Aria API
     shouldFlip: shouldFlip
-  }, controlProps); // Create state based on the incoming props
-
-
+  }, controlProps);
+  // Create state based on the incoming props
   var state = useSelectState(selectProps);
   var popoverRef = useRef();
   var triggerRef = useRef();
   var listBoxRef = useRef();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return triggerRef.current;
   });
   useDeprecationWarning('The "defaultText" prop for `SelectField` will be deprecated in Astro-UI 1.0.0, use the "placeholder" prop instead.', {
     isActive: !!defaultText
-  }); // Get props for child elements from useSelect
+  });
 
+  // Get props for child elements from useSelect
   var _useSelect = useSelect(selectProps, state, triggerRef),
-      labelProps = _useSelect.labelProps,
-      triggerProps = _useSelect.triggerProps,
-      valueProps = _useSelect.valueProps,
-      menuProps = _useSelect.menuProps; // The following props are being passed into multiple
+    labelProps = _useSelect.labelProps,
+    triggerProps = _useSelect.triggerProps,
+    valueProps = _useSelect.valueProps,
+    menuProps = _useSelect.menuProps;
+
+  // The following props are being passed into multiple
   // DOM elements that leads to multiple test failures
   // and these props are never used in any components
   // that depend on useSelectField
-
-
   delete menuProps.shouldSelectOnPressUp;
   delete menuProps.shouldFocusOnHover;
   delete menuProps.disallowEmptySelection;
-
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
-    placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,
-    labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
-    containerProps: _objectSpread({
-      isFloatLabelActive: state.selectedItem
-    }, props.containerProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,
+      labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
+      containerProps: _objectSpread({
+        isFloatLabelActive: state.selectedItem
+      }, props.containerProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: popoverRef,
-    scrollRef: listBoxRef,
-    placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    shouldFlip: !isNotFlippable,
-    isOpen: state.isOpen,
-    onClose: state.close
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition; // Update position once the ListBox has rendered. This ensures that
+      targetRef: triggerRef,
+      overlayRef: popoverRef,
+      scrollRef: listBoxRef,
+      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
+      shouldFlip: !isNotFlippable,
+      isOpen: state.isOpen,
+      onClose: state.close
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
+
+  // Update position once the ListBox has rendered. This ensures that
   // it flips properly when it doesn't fit in the available space.
-
   /* istanbul ignore next */
-
-
   useLayoutEffect(function () {
     if (state.isOpen) {
       requestAnimationFrame(function () {
         updatePosition();
       });
     }
-  }, [state.isOpen, updatePosition]); // Measure the width of the input to inform the width of the listbox (below).
+  }, [state.isOpen, updatePosition]);
 
+  // Measure the width of the input to inform the width of the listbox (below).
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      buttonWidth = _useState2[0],
-      setButtonWidth = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    buttonWidth = _useState2[0],
+    setButtonWidth = _useState2[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (triggerRef.current) {
@@ -165,21 +155,20 @@ var useSelectField = function useSelectField(props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: buttonWidth,
     minWidth: buttonWidth
   }, listboxStyle);
-
   var columnStyleProps = useColumnStyles({
     labelMode: props.labelMode
   });
   var isLoadingInitial = props.isLoading && state.collection.size === 0;
-  var isLoadingMore = props.isLoading && state.collection.size > 0; // Wrap in <FocusScope> so that focus is restored back to the
+  var isLoadingMore = props.isLoading && state.collection.size > 0;
+
+  // Wrap in <FocusScope> so that focus is restored back to the
   // trigger when the popup is closed. In addition, add hidden
   // <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
-
   var listbox = ___EmotionJSX(FocusScope, {
     restoreFocus: true
   }, ___EmotionJSX(DismissButton, {
@@ -199,7 +188,6 @@ var useSelectField = function useSelectField(props, ref) {
       return state.close();
     }
   }));
-
   var overlay = ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isDismissable: true,
@@ -210,11 +198,11 @@ var useSelectField = function useSelectField(props, ref) {
     ref: popoverRef,
     style: style
   }, ___EmotionJSX(ScrollBox, scrollBoxProps, listbox));
-
   return {
     columnStyleProps: columnStyleProps,
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps,
     isLoadingInitial: isLoadingInitial,
     listBoxRef: listBoxRef,
@@ -226,5 +214,4 @@ var useSelectField = function useSelectField(props, ref) {
     valueProps: valueProps
   };
 };
-
 export default useSelectField;

package/lib/hooks/useStatusClasses/useStatusClasses.js

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
-import mapKeys from 'lodash/mapKeys';
 import kebabCase from 'lodash/kebabCase';
+import mapKeys from 'lodash/mapKeys';
+
 /**
  * Converts status information into classes which can be supplied to the rendered component's
  * `className` prop.
@@ -10,7 +11,6 @@ import kebabCase from 'lodash/kebabCase';
  * kebab-case.
  * e.g. useStatusClasses('thing', { isDisabled: true }) => "thing is-disabled"
  */
-
 var useStatusClasses = function useStatusClasses(defaultClass) {
   var statuses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var kebabStatuses = mapKeys(statuses, function (_v, k) {
@@ -21,5 +21,4 @@ var useStatusClasses = function useStatusClasses(defaultClass) {
     classNames: classNames
   };
 };
-
 export default useStatusClasses;

package/lib/hooks/useStatusClasses/useStatusClasses.test.js

@@ -2,19 +2,17 @@ import { renderHook } from '@testing-library/react-hooks';
 import useStatusClasses from './useStatusClasses';
 test('should return empty', function () {
   var _renderHook = renderHook(function () {
-    return useStatusClasses();
-  }),
-      result = _renderHook.result;
-
+      return useStatusClasses();
+    }),
+    result = _renderHook.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('');
 });
 test('should return default', function () {
   var _renderHook2 = renderHook(function () {
-    return useStatusClasses('default');
-  }),
-      result = _renderHook2.result;
-
+      return useStatusClasses('default');
+    }),
+    result = _renderHook2.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('default');
 });
@@ -24,12 +22,10 @@ test('should return statuses without default', function () {
     isBlah: false,
     isFocused: true
   };
-
   var _renderHook3 = renderHook(function () {
-    return useStatusClasses(null, statuses);
-  }),
-      result = _renderHook3.result;
-
+      return useStatusClasses(null, statuses);
+    }),
+    result = _renderHook3.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('is-disabled is-focused');
 });
@@ -39,12 +35,10 @@ test('should return statuses with default', function () {
     isBlah: false,
     isFocused: true
   };
-
   var _renderHook4 = renderHook(function () {
-    return useStatusClasses('default', statuses);
-  }),
-      result = _renderHook4.result;
-
+      return useStatusClasses('default', statuses);
+    }),
+    result = _renderHook4.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('default is-disabled is-focused');
 });

package/lib/hooks/useTShirtSize/useTShirtSize.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
+
 /**
  * A custom hook which returns the pixel value of a tShirtSize.
  * @param {Object} [props] The props object
@@ -15,7 +16,6 @@ var useTShirtSize = function useTShirtSize(_ref) {
       console.warn('useTShirtSize hook requires a size prop.');
       return undefined;
     }
-
     return tShirtSizes === null || tShirtSizes === void 0 ? void 0 : tShirtSizes[size];
   }, [size]);
   var sizeProps = {
@@ -25,5 +25,4 @@ var useTShirtSize = function useTShirtSize(_ref) {
     sizeProps: sizeProps
   };
 };
-
 export default useTShirtSize;

package/lib/hooks/useTShirtSize/useTShirtSize.test.js

@@ -3,12 +3,11 @@ import useTShirtSize from './useTShirtSize';
 describe('useTShirtSize', function () {
   beforeEach(function () {
     process.env.NODE_ENV = 'development';
-
     global.console.warn = function () {
       return jest.mock();
     }; // eslint-disable-line no-console
-
   });
+
   afterEach(function () {
     process.env.NODE_ENV = 'test';
     jest.clearAllMocks();
@@ -38,12 +37,10 @@ test('returns size value if size is a tshirt value', function () {
   var props = {
     size: 'xs'
   };
-
   var _renderHook = renderHook(function () {
-    return useTShirtSize(props);
-  }),
-      result = _renderHook.result;
-
+      return useTShirtSize(props);
+    }),
+    result = _renderHook.result;
   var obj = {
     sizeProps: {
       size: '15px'
@@ -55,12 +52,10 @@ test('returns size value if size is a string value', function () {
   var props = {
     size: '20px'
   };
-
   var _renderHook2 = renderHook(function () {
-    return useTShirtSize(props);
-  }),
-      result = _renderHook2.result;
-
+      return useTShirtSize(props);
+    }),
+    result = _renderHook2.result;
   var obj = {
     sizeProps: {
       size: '20px'
@@ -72,12 +67,10 @@ test('returns size value if size is a number value', function () {
   var props = {
     size: 20
   };
-
   var _renderHook3 = renderHook(function () {
-    return useTShirtSize(props);
-  }),
-      result = _renderHook3.result;
-
+      return useTShirtSize(props);
+    }),
+    result = _renderHook3.result;
   var obj = {
     sizeProps: {
       size: 20

package/lib/index.js

@@ -1,44 +1,50 @@
 // NOTE: Named exports must be unique across files, otherwise collisions will occur.
 
 /* eslint-disable import/export */
-export { default as AstroWrapper } from './components/AstroWrapper';
-export * from './components/AstroWrapper';
-export { default as AccordionGroup } from './components/AccordionGroup';
-export * from './components/AccordionGroup';
+
 export { default as AccordionGridGroup } from './components/AccordionGridGroup';
 export * from './components/AccordionGridGroup';
-export { default as AccordionItem } from './components/AccordionItem';
-export * from './components/AccordionItem';
 export { default as AccordionGridItem } from './components/AccordionGridItem';
 export * from './components/AccordionGridItem';
+export { default as AccordionGroup } from './components/AccordionGroup';
+export * from './components/AccordionGroup';
+export { default as AccordionItem } from './components/AccordionItem';
+export * from './components/AccordionItem';
 export { default as ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
+export { default as AstroWrapper } from './components/AstroWrapper';
+export * from './components/AstroWrapper';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
-export { default as Badge } from './components/Chip/Badge';
+export { default as Badge } from './components/Badge';
+export * from './components/Badge';
 export { default as Box } from './components/Box';
 export * from './components/Box';
 export { default as Bracket } from './components/Bracket';
 export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
+export { default as Button } from './components/Button';
+export * from './components/Button';
 export { default as Bulletin } from './components/Callout';
 export { default as Callout } from './components/Callout';
 export * from './components/Callout';
-export { default as Button } from './components/Button';
-export * from './components/Button';
 export { default as Card } from './components/Card';
 export * from './components/Card';
 export { default as Checkbox } from './components/Checkbox';
 export * from './components/Checkbox';
 export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
-export { default as Chip } from './components/Chip';
-export * from './components/Chip';
 export { default as CodeView } from './components/CodeView';
+export { default as CollapsiblePanel } from './components/CollapsiblePanel';
+export * from './components/CollapsiblePanel';
+export { default as CollapsiblePanelContainer } from './components/CollapsiblePanelContainer';
+export * from './components/CollapsiblePanelContainer';
+export { default as CollapsiblePanelItem } from './components/CollapsiblePanelItem';
+export * from './components/CollapsiblePanelItem';
+export { default as ColorField } from './components/ColorField';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
-export { default as ColorField } from './components/ColorField';
 export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
@@ -59,16 +65,12 @@ export { default as ImageUploadField } from './components/ImageUploadField';
 export * from './components/ImageUploadField';
 export { default as Input } from './components/Input';
 export * from './components/Input';
-export { default as NumberField } from './components/NumberField';
-export * from './components/NumberField';
 export { default as Label } from './components/Label';
 export * from './components/Label';
 export { default as Link } from './components/Link';
 export * from './components/Link';
 export { default as LinkSelectField } from './components/LinkSelectField';
 export * from './components/LinkSelectField';
-export { default as List } from './components/List';
-export * from './components/List';
 export { default as ListItem } from './components/ListItem';
 export * from './components/ListItem';
 export { default as ListView } from './components/ListView';
@@ -82,21 +84,15 @@ export { default as Messages } from './components/Messages';
 export * from './components/Messages';
 export { default as Modal } from './components/Modal';
 export * from './components/Modal';
-export { default as CollapsiblePanel } from './components/CollapsiblePanel';
-export * from './components/CollapsiblePanel';
-export { default as CollapsiblePanelItem } from './components/CollapsiblePanelItem';
-export * from './components/CollapsiblePanelItem';
-export { default as CollapsiblePanelContainer } from './components/CollapsiblePanelContainer';
-export * from './components/CollapsiblePanelContainer';
+export { default as MultivaluesField } from './components/MultivaluesField';
 export { default as NavBar } from './components/NavBar';
 export * from './components/NavBar';
 export { default as NavBarSection } from './components/NavBarSection';
 export * from './components/NavBarSection';
-export { default as MultivaluesField } from './components/MultivaluesField';
+export { default as NumberField } from './components/NumberField';
+export * from './components/NumberField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';
-export { default as PageHeader } from './components/PageHeader';
-export * from './components/PageHeader';
 export { default as PasswordField } from './components/PasswordField';
 export * from './components/PasswordField';
 export { default as PopoverContainer } from './components/PopoverContainer';
@@ -122,7 +118,7 @@ export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';
 export { default as Separator } from './components/Separator';
 export * from './components/Separator';
-export { default as Stepper, Step } from './components/Stepper';
+export { Step, default as Stepper } from './components/Stepper';
 export * from './components/Stepper';
 export { default as Switch } from './components/Switch';
 export * from './components/Switch';
@@ -134,32 +130,32 @@ export { default as Table } from './components/Table';
 export * from './components/Table';
 export { default as TableBody } from './components/TableBody';
 export * from './components/TableBody';
+export { default as TableCaption } from './components/TableCaption';
+export * from './components/TableCaption';
 export { default as TableCell } from './components/TableCell';
 export * from './components/TableCell';
 export { default as TableHead } from './components/TableHead';
 export * from './components/TableHead';
 export { default as TableRow } from './components/TableRow';
 export * from './components/TableRow';
-export { default as TableCaption } from './components/TableCaption';
-export * from './components/TableCaption';
 export { default as Tabs } from './components/Tabs';
 export * from './components/Tabs';
 export { default as Text } from './components/Text';
 export * from './components/Text';
-export { default as TextField } from './components/TextField';
-export * from './components/TextField';
 export { default as TextArea } from './components/TextArea';
 export * from './components/TextArea';
 export { default as TextAreaField } from './components/TextAreaField';
 export * from './components/TextAreaField';
+export { default as TextField } from './components/TextField';
+export * from './components/TextField';
 export { default as TimeZonePicker } from './components/TimeZonePicker';
 export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
+
 /* eslint-enable import/export */
 
-export { Item, Section } from '@react-stately/collections';
-export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-export { useOverlayTriggerState } from '@react-stately/overlays';
 export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
-export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-stately/table';
+export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
+export { Item, Section, useOverlayTriggerState } from 'react-stately';
+export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';