@pingux/astro 1.3.0 → 1.3.1

package/lib/components/NumberField/NumberField.js

@@ -14,10 +14,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
-import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import MenuDown from 'mdi-react/MenuDownIcon';
 import { useNumberField } from '@react-aria/numberfield';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
@@ -73,18 +73,38 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), ___EmotionJSX(Icon, {
-    icon: ArrowDropUpIcon,
-    size: 12
+    icon: MenuUp,
+    size: 18
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), ___EmotionJSX(Icon, {
-    icon: ArrowDropDownIcon,
-    size: 12
-  })));
-
+    icon: MenuDown,
+    size: 18
+  }))); // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
+
+
+  var onInputFocus = useCallback(function (e) {
+    e.persist();
+    fieldControlProps.onFocus(e);
+    inputProps.onFocus(e);
+  }, [fieldControlProps, inputProps]);
+  var onInputBlur = useCallback(function (e) {
+    e.persist();
+    fieldControlProps.onBlur(e);
+    inputProps.onBlur(e);
+  }, [fieldControlProps, inputProps]);
+  var updatedFieldControlProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
+    });
+  }, [fieldControlProps, onInputBlur, onInputFocus]);
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
     variant: "numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, {
@@ -95,7 +115,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, omit(inputProps, 'name'))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/components/NumberField/NumberField.test.js

@@ -135,4 +135,9 @@ test('number field input receiving name attribute', function () {
     name: testName
   });
   expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
+});
+test('number field can be focused', function () {
+  getComponent();
+  userEvent.tab();
+  expect(screen.getByLabelText(testLabel)).toHaveClass('is-focused');
 });

package/lib/components/PageHeader/PageHeader.js

@@ -4,12 +4,14 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
+import { useDeprecationWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, ["title", "children"]);
 
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/components/PageHeader/PageHeader.stories.js

@@ -2,10 +2,14 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import PageHeader from '../PageHeader/PageHeader';
 import Button from '../Button/Button';
+import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'PageHeader',
+  title: 'Deprecated/PageHeader',
   component: PageHeader,
+  decorators: [function (Story, context) {
+    return withDeprecationWarning(Story, context, 'The `PageHeader` component will be deprecated in Astro-UI 2.0.0.');
+  }],
   argTypes: {
     title: {
       control: {

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -63,17 +63,21 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
-    isRequired: isRequired
-  }, labelProps), label), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
-  }, helperText), ___EmotionJSX(Box, {
+    isRequired: isRequired,
+    variant: "forms.label.radioGroup"
+  }, labelProps), label), ___EmotionJSX(Box, {
     variant: "forms.radioGroupWrapper",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, ___EmotionJSX(RadioContext.Provider, {
     value: _objectSpread({
       isDisabled: isDisabled
     }, state)
-  }, children)));
+  }, children)), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    sx: {
+      pt: 'xs'
+    }
+  }, helperText));
 });
 RadioGroupField.propTypes = {
   /** 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). */

package/lib/components/SelectField/SelectField.stories.js

@@ -16,7 +16,6 @@ import { useAsyncList } from '@react-stately/data';
 import { SelectField, Item, Separator, Section } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { modes as labelModes } from '../Label/constants';
-import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var animals = [{
   name: 'Aardvark',
@@ -195,52 +194,6 @@ export var FloatLabel = function FloatLabel() {
     key: "yellow"
   }, "Yellow"));
 };
-export var LeftLabel = function LeftLabel() {
-  return ___EmotionJSX(Box, {
-    gap: "xl",
-    width: "100%"
-  }, ___EmotionJSX(SelectField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    labelMode: "left"
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")), ___EmotionJSX(SelectField, {
-    label: "Example Label that is much longer than the previous one",
-    labelMode: "left"
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")), ___EmotionJSX(SelectField, {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")));
-};
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
 export var Controlled = function Controlled() {
   var _useState = useState('yellow'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -299,15 +252,14 @@ export var DisabledOptions = function DisabledOptions() {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
-  }, "Blue (disabled)"), ___EmotionJSX(Item, {
+  }, "Blue"), ___EmotionJSX(Item, {
     key: "yellow"
   }, "Yellow"));
 };
 export var NoOptionsAvailable = function NoOptionsAvailable() {
   return ___EmotionJSX(SelectField, {
     label: "Select an option...",
-    isDisabled: true,
-    defaultText: "No options available"
+    placeholder: "No options available"
   });
 };
 export var HelperText = function HelperText() {

package/lib/components/Tabs/Tabs.stories.js

@@ -161,17 +161,6 @@ export var CustomTabLine = function CustomTabLine() {
     }, item.children);
   });
 };
-export var Orientation = function Orientation() {
-  return ___EmotionJSX(Tabs, {
-    orientation: "vertical",
-    items: tabs
-  }, function (item) {
-    return ___EmotionJSX(Tab, {
-      key: item.name,
-      title: item.name
-    }, item.children);
-  });
-};
 export var TabPanelProps = function TabPanelProps() {
   return ___EmotionJSX(Tabs, {
     tabPanelProps: {

package/lib/hooks/useField/useField.js

@@ -156,8 +156,8 @@ var useField = function useField() {
   }),
       focusWithinProps = _useFocusWithin.focusWithinProps;
 
-  var isFloatLabel = labelMode === labelModes.FLOAT;
-  var isLeftLabel = labelMode === labelModes.LEFT;
+  var isFloatLabel = labelMode === labelModes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.FLOAT;
+  var isLeftLabel = labelMode === labelModes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {

package/lib/styles/forms/checkbox.js

@@ -2,7 +2,6 @@
 // Default checkbox
 export var checkbox = {
   color: 'active',
-  mr: 'sm',
   'input:focus ~ &': {
     bg: 'transparent'
   },

package/lib/styles/forms/input.js

@@ -186,5 +186,5 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
-  pr: '27px'
+  pr: '28px'
 });

package/lib/styles/forms/label.js

@@ -69,4 +69,7 @@ label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
   width: 'auto',
   alignItems: 'center',
   cursor: 'pointer'
+});
+label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
+  fontWeight: 1
 });

package/lib/styles/forms/radio.js

@@ -4,7 +4,7 @@ export var radio = {
   width: 20,
   height: 20,
   color: 'active',
-  mr: 'sm',
+  mr: 'xs',
   // override the default focus styling
   'input:focus ~ &': {
     bg: 'transparent'

package/lib/styles/forms/switch.js

@@ -1,5 +1,7 @@
 export var label = {
-  alignItems: 'center'
+  alignItems: 'center',
+  fontSize: 'md',
+  color: 'text.primary'
 };
 export var container = {
   mr: 5,

package/lib/styles/variants/boxes.js

@@ -34,7 +34,10 @@ var radioContainer = {
 }; // Used to add spacing for content shown when a radio is checked
 
 var radioCheckedContent = {
-  py: 'md'
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
 };
 
 var listItem = _objectSpread(_objectSpread({}, base), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",