@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/hooks/useSelectField/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 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
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _useSelectField["default"];
   }
 });
-
 var _useSelectField = _interopRequireDefault(require("./useSelectField"));

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -1,105 +1,68 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _focus = require("@react-aria/focus");
-
-var _overlays = require("@react-aria/overlays");
-
-var _select = require("@react-aria/select");
-
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
 var _utils = require("@react-aria/utils");
-
-var _select2 = require("@react-stately/select");
-
-var _ = require("..");
-
+var _constants = require("../../components/Label/constants");
 var _ListBox = _interopRequireDefault(require("../../components/ListBox"));
-
 var _PopoverContainer = _interopRequireDefault(require("../../components/PopoverContainer"));
-
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
-
-var _constants = require("../../components/Label/constants");
-
+var _ = require("..");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
 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) { (0, _defineProperty2["default"])(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; }
-
 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,
@@ -123,77 +86,75 @@ var useSelectField = function useSelectField(props, ref) {
     disallowEmptySelection: disallowEmptySelection,
     // must match React Aria API
     shouldFlip: shouldFlip
-  }, controlProps); // Create state based on the incoming props
-
-
-  var state = (0, _select2.useSelectState)(selectProps);
+  }, controlProps);
+  // Create state based on the incoming props
+  var state = (0, _reactStately.useSelectState)(selectProps);
   var popoverRef = (0, _react.useRef)();
   var triggerRef = (0, _react.useRef)();
   var listBoxRef = (0, _react.useRef)();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return triggerRef.current;
   });
   (0, _.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
+  });
 
-  var _useSelect = (0, _select.useSelect)(selectProps, state, triggerRef),
-      labelProps = _useSelect.labelProps,
-      triggerProps = _useSelect.triggerProps,
-      valueProps = _useSelect.valueProps,
-      menuProps = _useSelect.menuProps; // The following props are being passed into multiple
+  // Get props for child elements from useSelect
+  var _useSelect = (0, _reactAria.useSelect)(selectProps, state, triggerRef),
+    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 = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
-    placeholder: props.labelMode === _constants.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;
-
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
-    targetRef: triggerRef,
-    overlayRef: popoverRef,
-    scrollRef: listBoxRef,
-    placement: (0, _concat["default"])(_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
+      placeholder: props.labelMode === _constants.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 = (0, _reactAria.useOverlayPosition)({
+      targetRef: triggerRef,
+      overlayRef: popoverRef,
+      scrollRef: listBoxRef,
+      placement: (0, _concat["default"])(_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 */
-
-
   (0, _react.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 = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      buttonWidth = _useState2[0],
-      setButtonWidth = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    buttonWidth = _useState2[0],
+    setButtonWidth = _useState2[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (triggerRef.current) {
@@ -205,24 +166,23 @@ var useSelectField = function useSelectField(props, ref) {
     onResize: onResize
   });
   (0, _react.useLayoutEffect)(onResize, [onResize]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: buttonWidth,
     minWidth: buttonWidth
   }, listboxStyle);
-
   var columnStyleProps = (0, _.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 = (0, _react2.jsx)(_focus.FocusScope, {
+  var listbox = (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
-  }, (0, _react2.jsx)(_overlays.DismissButton, {
+  }, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: function onDismiss() {
       return state.close();
     }
@@ -234,7 +194,7 @@ var useSelectField = function useSelectField(props, ref) {
     variant: "listBox.selectField",
     isLoading: isLoadingMore,
     onLoadMore: onLoadMore
-  }, menuProps)), (0, _react2.jsx)(_overlays.DismissButton, {
+  }, menuProps)), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: function onDismiss() {
       return state.close();
     }
@@ -252,7 +212,8 @@ var useSelectField = function useSelectField(props, ref) {
   return {
     columnStyleProps: columnStyleProps,
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps,
     isLoadingInitial: isLoadingInitial,
     listBoxRef: listBoxRef,
@@ -264,6 +225,5 @@ var useSelectField = function useSelectField(props, ref) {
     valueProps: valueProps
   };
 };
-
 var _default = useSelectField;
 exports["default"] = _default;

package/lib/cjs/hooks/useStatusClasses/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 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
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _useStatusClasses["default"];
   }
 });
-
 var _useStatusClasses = _interopRequireDefault(require("./useStatusClasses"));

package/lib/cjs/hooks/useStatusClasses/useStatusClasses.js

@@ -1,21 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-var _mapKeys = _interopRequireDefault(require("lodash/mapKeys"));
-
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
-
+var _mapKeys = _interopRequireDefault(require("lodash/mapKeys"));
 /**
  * Converts status information into classes which can be supplied to the rendered component's
  * `className` prop.
@@ -35,6 +28,5 @@ var useStatusClasses = function useStatusClasses(defaultClass) {
     classNames: classNames
   };
 };
-
 var _default = useStatusClasses;
 exports["default"] = _default;

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

@@ -1,26 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _reactHooks = require("@testing-library/react-hooks");
-
 var _useStatusClasses = _interopRequireDefault(require("./useStatusClasses"));
-
 test('should return empty', function () {
   var _renderHook = (0, _reactHooks.renderHook)(function () {
-    return (0, _useStatusClasses["default"])();
-  }),
-      result = _renderHook.result;
-
+      return (0, _useStatusClasses["default"])();
+    }),
+    result = _renderHook.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('');
 });
 test('should return default', function () {
   var _renderHook2 = (0, _reactHooks.renderHook)(function () {
-    return (0, _useStatusClasses["default"])('default');
-  }),
-      result = _renderHook2.result;
-
+      return (0, _useStatusClasses["default"])('default');
+    }),
+    result = _renderHook2.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('default');
 });
@@ -30,12 +25,10 @@ test('should return statuses without default', function () {
     isBlah: false,
     isFocused: true
   };
-
   var _renderHook3 = (0, _reactHooks.renderHook)(function () {
-    return (0, _useStatusClasses["default"])(null, statuses);
-  }),
-      result = _renderHook3.result;
-
+      return (0, _useStatusClasses["default"])(null, statuses);
+    }),
+    result = _renderHook3.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('is-disabled is-focused');
 });
@@ -45,12 +38,10 @@ test('should return statuses with default', function () {
     isBlah: false,
     isFocused: true
   };
-
   var _renderHook4 = (0, _reactHooks.renderHook)(function () {
-    return (0, _useStatusClasses["default"])('default', statuses);
-  }),
-      result = _renderHook4.result;
-
+      return (0, _useStatusClasses["default"])('default', statuses);
+    }),
+    result = _renderHook4.result;
   var classNames = result.current.classNames;
   expect(classNames).toBe('default is-disabled is-focused');
 });

package/lib/cjs/hooks/useTShirtSize/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 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
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _useTShirtSize["default"];
   }
 });
-
 var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));

package/lib/cjs/hooks/useTShirtSize/useTShirtSize.js

@@ -1,23 +1,19 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
-
 /**
  * A custom hook which returns the pixel value of a tShirtSize.
  * @param {Object} [props] The props object
  * @param {String} [props.size] The size of the svg container
  * @returns {Object} `{ sizeProps: Object }`
  */
+
 var useTShirtSize = function useTShirtSize(_ref) {
   var size = _ref.size;
   var value = (0, _react.useMemo)(function () {
@@ -26,7 +22,6 @@ var useTShirtSize = function useTShirtSize(_ref) {
       console.warn('useTShirtSize hook requires a size prop.');
       return undefined;
     }
-
     return _tShirtSizes.tShirtSizes === null || _tShirtSizes.tShirtSizes === void 0 ? void 0 : _tShirtSizes.tShirtSizes[size];
   }, [size]);
   var sizeProps = {
@@ -36,6 +31,5 @@ var useTShirtSize = function useTShirtSize(_ref) {
     sizeProps: sizeProps
   };
 };
-
 var _default = useTShirtSize;
 exports["default"] = _default;

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

@@ -1,20 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _reactHooks = require("@testing-library/react-hooks");
-
 var _useTShirtSize = _interopRequireDefault(require("./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();
@@ -44,12 +40,10 @@ test('returns size value if size is a tshirt value', function () {
   var props = {
     size: 'xs'
   };
-
   var _renderHook = (0, _reactHooks.renderHook)(function () {
-    return (0, _useTShirtSize["default"])(props);
-  }),
-      result = _renderHook.result;
-
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook.result;
   var obj = {
     sizeProps: {
       size: '15px'
@@ -61,12 +55,10 @@ test('returns size value if size is a string value', function () {
   var props = {
     size: '20px'
   };
-
   var _renderHook2 = (0, _reactHooks.renderHook)(function () {
-    return (0, _useTShirtSize["default"])(props);
-  }),
-      result = _renderHook2.result;
-
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook2.result;
   var obj = {
     sizeProps: {
       size: '20px'
@@ -78,12 +70,10 @@ test('returns size value if size is a number value', function () {
   var props = {
     size: 20
   };
-
   var _renderHook3 = (0, _reactHooks.renderHook)(function () {
-    return (0, _useTShirtSize["default"])(props);
-  }),
-      result = _renderHook3.result;
-
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook3.result;
   var obj = {
     sizeProps: {
       size: 20