@pingux/astro 2.97.0 → 2.98.0-alpha.1

package/lib/components/RadioField/RadioField.test.js

@@ -16,7 +16,9 @@ var defaultProps = {
   value: testValue
 };
 var defaultState = {
-  setLastFocusedValue: function setLastFocusedValue() {}
+  setLastFocusedValue: function setLastFocusedValue() {
+    return jest.fn();
+  }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -69,11 +71,12 @@ test('radio with checked content does not display if not checked', function () {
 });
 test('radio with checked content displays if checked', function () {
   var testContent = 'test content';
+  var customState = {
+    selectedValue: testValue
+  };
   getComponent({
     checkedContent: ___EmotionJSX("div", null, testContent)
-  }, {
-    selectedValue: testValue
-  });
+  }, customState);
   var content = screen.queryByText(testContent);
   expect(content).toBeInTheDocument();
 });

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -1,27 +1,12 @@
-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";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-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, { forwardRef, useMemo } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
-import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { RadioContext } from '../RadioField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'RadioGroupField';
@@ -73,36 +58,4 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-RadioGroupField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
-  name: PropTypes.string,
-  /** The current value (controlled). */
-  value: PropTypes.string,
-  /** The default value (uncontrolled). */
-  defaultValue: PropTypes.string,
-  /** Text to display after the radio group label. Useful for errors or other info. */
-  helperText: PropTypes.node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /** Determines the arrangement of the radios. */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Handler that is called when the value changes.
-   *
-   * `(newValue) => void`
-   */
-  onChange: PropTypes.func,
-  /** Whether the radio group is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /**
-   * The content to display as the label. If not set, It is recommended to set an aria-label or
-   * aria-labelledby attribute for accessibility.
-  */
-  label: PropTypes.node,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-RadioGroupField.displayName = displayName;
 export default RadioGroupField;

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RadioField, RadioGroupField } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import RadioGroupFieldReadme from './RadioGroupField.mdx';
@@ -72,6 +73,12 @@ export var Default = function Default(args) {
     label: "C"
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.radioGroup["default"]
+  }
+};
 export var Controlled = function Controlled() {
   var _useState = useState('A'),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/components/RadioGroupField/RadioGroupField.test.js

@@ -30,16 +30,16 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var groupProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var radioProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return render(___EmotionJSX(RadioGroupField, _extends({}, defaultProps, groupProps), ___EmotionJSX(RadioField, _extends({
+  return render(___EmotionJSX(RadioGroupField, _extends({}, defaultProps, groupProps), ___EmotionJSX(RadioField, {
     value: testValues[0],
     label: testValues[0]
-  }, radioProps[0])), ___EmotionJSX(RadioField, _extends({
+  }), ___EmotionJSX(RadioField, {
     value: testValues[1],
     label: testValues[1]
-  }, radioProps[1])), ___EmotionJSX(RadioField, _extends({
+  }), ___EmotionJSX(RadioField, {
     value: testValues[2],
     label: testValues[2]
-  }, radioProps[2]))));
+  })));
 };
 
 // Needs to be added to each components test file

package/lib/hooks/useLoadPrev/index.js

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

package/lib/hooks/useLoadPrev/useLoadPrev.js

@@ -0,0 +1,27 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useEvent } from '@react-aria/utils';
+var useLoadPrev = function useLoadPrev(props, ref) {
+  var isLoading = props.isLoading,
+    onLoadPrev = props.onLoadPrev,
+    items = props.items;
+  var isLoadingRef = useRef(isLoading);
+  var prevProps = useRef(props);
+  var onScroll = useCallback(function () {
+    if (ref.current && !isLoadingRef.current && onLoadPrev) {
+      var rc = ref.current;
+      var shouldLoadPrev = rc.scrollTop === 0;
+      if (shouldLoadPrev) {
+        isLoadingRef.current = true;
+        onLoadPrev();
+      }
+    }
+  }, [onLoadPrev, ref]);
+  useLayoutEffect(function () {
+    if (props !== prevProps.current) {
+      isLoadingRef.current = isLoading;
+      prevProps.current = props;
+    }
+  }, [isLoading, onLoadPrev, props, ref, items]);
+  useEvent(ref, 'scroll', onScroll);
+};
+export default useLoadPrev;

package/lib/hooks/useLoadPrev/useLoadPrev.test.js

@@ -0,0 +1,78 @@
+import React, { useRef } from 'react';
+import { fireEvent } from '@testing-library/react';
+import Box from '../../components/Box';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import useLoadPrev from './useLoadPrev';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var onLoadPrev = jest.fn();
+var TestComponent = function TestComponent(props) {
+  var items = props.items;
+  var ref = useRef(null);
+  useLoadPrev({
+    isLoading: false,
+    onLoadPrev: onLoadPrev,
+    items: items
+  }, ref);
+  return ___EmotionJSX(Box, {
+    sx: {
+      height: '400px',
+      maxHeight: '400px',
+      overflowY: 'scroll'
+    },
+    "data-testid": "outerbox",
+    ref: ref
+  }, "content", ___EmotionJSX(Box, {
+    sx: {
+      height: '800px',
+      minHeight: '800px'
+    },
+    "data-testid": "innerbox"
+  }, "inner content"));
+};
+describe('useLoadPrev', function () {
+  it('onLoadPrev is called when scrolling to the top', function () {
+    var _render = render(___EmotionJSX(TestComponent, {
+        items: [1, 2, 3, 4]
+      })),
+      rerender = _render.rerender;
+    var listView = screen.getByTestId('outerbox');
+    fireEvent.scroll(listView, {
+      target: {
+        scrollY: 450
+      }
+    });
+    fireEvent.scroll(listView, {
+      target: {
+        scrollY: 0
+      }
+    });
+    expect(onLoadPrev).toHaveBeenCalledTimes(1);
+    // should not call because props have not changed
+    fireEvent.scroll(listView, {
+      target: {
+        scrollY: 450
+      }
+    });
+    fireEvent.scroll(listView, {
+      target: {
+        scrollY: 0
+      }
+    });
+    expect(onLoadPrev).toHaveBeenCalledTimes(1);
+    // will call becuase props have changed.
+    rerender(___EmotionJSX(TestComponent, {
+      items: [1, 2, 3, 4, 5]
+    }));
+    fireEvent.scroll(listView, {
+      target: {
+        scrollY: 450
+      }
+    });
+    fireEvent.scroll(listView, {
+      target: {
+        scrollY: 0
+      }
+    });
+    expect(onLoadPrev).toHaveBeenCalledTimes(2);
+  });
+});

package/lib/types/radio.js

@@ -0,0 +1 @@
+export {};

package/lib/types/radioField.js

@@ -0,0 +1 @@
+export {};

package/lib/types/radioGroupField.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -149,6 +149,9 @@ export var FIGMA_LINKS = {
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },
+  radioGroup: {
+    "default": 'https://embed.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?m=auto&node-id=3613-12435&embed-host=share'
+  },
   requirementsList: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4039&t=We3h7LaaFJQnxdSy-1'
   },

package/lib/utils/devUtils/constants/loadingStates.js

@@ -4,5 +4,6 @@ export default {
   IDLE: 'idle',
   LOADING: 'loading',
   LOADING_MORE: 'loadingMore',
-  SORTING: 'sorting'
+  SORTING: 'sorting',
+  LOADING_MORE_PREPEND: 'loadingMorePrepend'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.97.0",
+  "version": "2.98.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",