@pingux/astro 2.218.0 → 2.219.0

package/lib/cjs/hooks/useField/useField.d.ts

@@ -3013,6 +3013,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
             id?: string;
             name: string;
         };
+        type?: string;
         variant?: string;
         as?: string | React.ReactNode | React.ElementType;
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
@@ -3776,6 +3777,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
             id?: string;
             name: string;
         };
+        type?: string;
         variant?: string;
         as?: string | React.ReactNode | React.ElementType;
         style?: React.CSSProperties | string;

package/lib/cjs/hooks/useSliderField/useSliderField.d.ts

@@ -284,6 +284,7 @@ declare const useSliderField: (props: UseSliderFieldProps) => {
             id?: string;
             name: string;
         };
+        type?: string;
         variant?: string;
         as?: string | import("react").ReactNode | import("react").ElementType;
         style?: import("react").CSSProperties | string;
@@ -1504,6 +1505,7 @@ declare const useSliderField: (props: UseSliderFieldProps) => {
             id?: string;
             name: string;
         };
+        type?: string;
         variant: string;
         as?: string | import("react").ReactNode | import("react").ElementType;
         style?: import("react").CSSProperties | string;
@@ -3457,6 +3459,7 @@ declare const useSliderField: (props: UseSliderFieldProps) => {
             id?: string;
             name: string;
         };
+        type?: string;
         as?: string | import("react").ReactNode | import("react").ElementType;
         style?: import("react").CSSProperties | string;
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;

package/lib/cjs/types/box.d.ts

@@ -19,5 +19,6 @@ export interface BoxProps extends StyleProps, DOMAttributes {
     isUnavailable?: boolean;
     hidden?: boolean;
     title?: string | BoxIconTitleProps;
+    type?: string;
 }
 export {};

package/lib/cjs/types/index.d.ts

@@ -41,6 +41,7 @@ export * from './messages';
 export * from './Modal';
 export * from './navBar';
 export * from './navSideBar';
+export * from './numberField';
 export * from './overlayPanel';
 export * from './passwordField';
 export * from './phoneNumberField';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context0, _context1, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context0, _context1, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -480,8 +480,19 @@ _forEachInstanceProperty(_context41 = _Object$keys(_navSideBar)).call(_context41
     }
   });
 });
+var _numberField = require("./numberField");
+_forEachInstanceProperty(_context42 = _Object$keys(_numberField)).call(_context42, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _numberField[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _numberField[key];
+    }
+  });
+});
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context42 = _Object$keys(_overlayPanel)).call(_context42, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_overlayPanel)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -492,7 +503,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _passwordField = require("./passwordField");
-_forEachInstanceProperty(_context43 = _Object$keys(_passwordField)).call(_context43, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_passwordField)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _passwordField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -503,7 +514,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_passwordField)).call(_contex
   });
 });
 var _phoneNumberField = require("./phoneNumberField");
-_forEachInstanceProperty(_context44 = _Object$keys(_phoneNumberField)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_phoneNumberField)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _phoneNumberField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -514,7 +525,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_phoneNumberField)).call(_con
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context45 = _Object$keys(_popoverContainer)).call(_context45, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_popoverContainer)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context46 = _Object$keys(_popoverMenu)).call(_context46, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_popoverMenu)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_popoverMenu)).call(_context4
   });
 });
 var _progressBar = require("./progressBar");
-_forEachInstanceProperty(_context47 = _Object$keys(_progressBar)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_progressBar)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _progressBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_progressBar)).call(_context4
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context48 = _Object$keys(_requirementsList)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_requirementsList)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context49 = _Object$keys(_rockerButtonGroup)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_rockerButtonGroup)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context50 = _Object$keys(_scrollBox)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_scrollBox)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_scrollBox)).call(_context50,
   });
 });
 var _searchField = require("./searchField");
-_forEachInstanceProperty(_context51 = _Object$keys(_searchField)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_searchField)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _searchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_searchField)).call(_context5
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context52 = _Object$keys(_separator)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_separator)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_separator)).call(_context52,
   });
 });
 var _ServerErrorBoundary = require("./ServerErrorBoundary");
-_forEachInstanceProperty(_context53 = _Object$keys(_ServerErrorBoundary)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_ServerErrorBoundary)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ServerErrorBoundary[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_ServerErrorBoundary)).call(_
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context54 = _Object$keys(_shared)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_shared)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_shared)).call(_context54, fu
   });
 });
 var _skeleton = require("./skeleton");
-_forEachInstanceProperty(_context55 = _Object$keys(_skeleton)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_skeleton)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _skeleton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -635,7 +646,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_skeleton)).call(_context55,
   });
 });
 var _Stepper = require("./Stepper");
-_forEachInstanceProperty(_context56 = _Object$keys(_Stepper)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_Stepper)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Stepper[key]) return;
   _Object$defineProperty(exports, key, {
@@ -646,7 +657,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_Stepper)).call(_context56, f
   });
 });
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context57 = _Object$keys(_switchField)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_switchField)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -657,7 +668,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context58 = _Object$keys(_tab)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_tab)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -668,7 +679,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_tab)).call(_context58, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context59 = _Object$keys(_table)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_table)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -679,7 +690,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_table)).call(_context59, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context60 = _Object$keys(_tabs)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_tabs)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -690,7 +701,7 @@ _forEachInstanceProperty(_context60 = _Object$keys(_tabs)).call(_context60, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context61 = _Object$keys(_text)).call(_context61, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_text)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -701,7 +712,7 @@ _forEachInstanceProperty(_context61 = _Object$keys(_text)).call(_context61, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context62 = _Object$keys(_textField)).call(_context62, function (key) {
+_forEachInstanceProperty(_context63 = _Object$keys(_textField)).call(_context63, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -712,7 +723,7 @@ _forEachInstanceProperty(_context62 = _Object$keys(_textField)).call(_context62,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context63 = _Object$keys(_timefield)).call(_context63, function (key) {
+_forEachInstanceProperty(_context64 = _Object$keys(_timefield)).call(_context64, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -723,7 +734,7 @@ _forEachInstanceProperty(_context63 = _Object$keys(_timefield)).call(_context63,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context64 = _Object$keys(_tooltipTrigger)).call(_context64, function (key) {
+_forEachInstanceProperty(_context65 = _Object$keys(_tooltipTrigger)).call(_context65, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/numberField.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { UseFieldProps } from '../hooks/useField/useField';
+import { TestingAttributes } from './shared/test';
+export interface NumberFieldProps extends Omit<UseFieldProps<HTMLInputElement>, 'onChange'>, TestingAttributes {
+    /** A custom aria-label for the decrement button.
+     * If not provided, the localized string "Decrement" is used. */
+    decrementAriaLabel?: string;
+    /** A custom aria-label for the increment button.
+     * If not provided, the localized string "Increment" is used. */
+    incrementAriaLabel?: string;
+    /** Formatting options for the value displayed in the number field.
+     * This also affects what characters are allowed to be typed by the user.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The amount that the input value changes with each increment or decrement "tick". */
+    step?: number;
+    /** The smallest value allowed for the input. */
+    minValue?: number;
+    /** The largest value allowed for the input. */
+    maxValue?: number;
+    /** The default value (uncontrolled). */
+    defaultValue?: number;
+    /** The current value (controlled). */
+    value?: number;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: number) => void;
+    /** Handler that is called when a key is pressed. */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}

package/lib/cjs/types/numberField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/NumberField/NumberField.js

@@ -10,20 +10,17 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef } from 'react';
 import { mergeProps, useNumberField } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
 import { useLocale } from '@react-aria/i18n';
 import omit from 'lodash/omit';
-import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
-import { useField, useGetTheme, usePropWarning } from '../../hooks';
+import { useField, useGetTheme, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 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 { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'NumberField';
 var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
     status = props.status;
@@ -38,9 +35,9 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
-  var inputRef = React.useRef();
-  var incrRef = React.useRef();
-  var decRef = React.useRef();
+  var inputRef = useLocalOrForwardRef(ref);
+  var incrRef = React.useRef(null);
+  var decRef = React.useRef(null);
   var _useNumberField = useNumberField(props, state, inputRef),
     labelProps = _useNumberField.labelProps,
     groupProps = _useNumberField.groupProps,
@@ -53,16 +50,12 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return inputRef.current;
-  });
   var ControlArrows = ___EmotionJSX(Box, {
     variant: "forms.numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
-    ref: decRef,
-    tabIndex: "0",
-    p: !isOnyx && 0
+    ref: incrRef,
+    tabIndex: 0,
+    p: !isOnyx ? 0 : undefined
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
     size: numberFieldArrowSize,
@@ -71,9 +64,9 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     "aria-hidden": "true"
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
-    ref: incrRef,
-    tabIndex: "0",
-    p: !isOnyx && 0
+    ref: decRef,
+    tabIndex: 0,
+    p: !isOnyx ? 0 : undefined
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
     size: numberFieldArrowSize,
@@ -82,18 +75,16 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     "aria-hidden": "true"
   })));
-
-  // this needed to remove console warning in React 16
-  // I believe once we update to 17 - we can remove this
+  var typedFieldControlInputProps = fieldControlInputProps;
   var onInputFocus = function onInputFocus(e) {
-    e.persist();
-    fieldControlInputProps.onFocus(e);
-    inputProps.onFocus(e);
+    var _typedFieldControlInp, _inputProps$onFocus;
+    (_typedFieldControlInp = typedFieldControlInputProps.onFocus) === null || _typedFieldControlInp === void 0 || _typedFieldControlInp.call(typedFieldControlInputProps, e);
+    (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 || _inputProps$onFocus.call(inputProps, e);
   };
   var onInputBlur = function onInputBlur(e) {
-    e.persist();
-    fieldControlInputProps.onBlur(e);
-    inputProps.onBlur(e);
+    var _typedFieldControlInp2, _inputProps$onBlur;
+    (_typedFieldControlInp2 = typedFieldControlInputProps.onBlur) === null || _typedFieldControlInp2 === void 0 || _typedFieldControlInp2.call(typedFieldControlInputProps, e);
+    (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, e);
   };
   var updatedFieldControlInputProps = _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
     onFocus: onInputFocus,
@@ -103,13 +94,13 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var updatedLabelProps = _objectSpread({}, mergeProps(fieldLabelProps, labelProps));
   var inputPropsValue = inputProps.value || 0;
   var inputPropsNumericValue = state.numberValue;
-  return ___EmotionJSX(Box, _extends({}, getPendoID('NumberField'), fieldContainerProps), ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.arrowsWrapper"
   }, fieldControlWrapperProps, {
     role: "spinbutton",
-    "aria-valuetext": inputPropsValue,
+    "aria-valuetext": String(inputPropsValue),
     "aria-valuenow": inputPropsNumericValue,
     "aria-labelledby": updatedLabelProps.id
   }), ___EmotionJSX(Input, _extends({
@@ -124,68 +115,5 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText)));
 });
-export default NumberField;
-NumberField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** A custom aria-label for the decrement button.
-   * If not provided, the localized string "Decrement" is used. */
-  decrementAriaLabel: PropTypes.string,
-  /** A custom aria-label for the increment button.
-   * If not provided, the localized string "Increment" is used. */
-  incrementAriaLabel: PropTypes.string,
-  /** Formatting options for the value displayed in the number field.
-   * This also affects what characters are allowed to be typed by the user.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
-   * */
-  formatOptions: PropTypes.shape({}),
-  /** Whether the input is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the input can be selected but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /**
-   * Callback fired when focus is lost on the input element.
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Callback fired when focus is lost on the input element.
-   */
-  onFocus: PropTypes.func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: PropTypes.func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: PropTypes.func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** The amount that the input value changes with each increment or decrement "tick".
-   * The step prop can be used to snap the value to certain increments.
-   * You can read more about this prop here
-   * [Step values](https://react-spectrum.adobe.com/react-aria/useNumberField.html#step-values)
-   * */
-  step: PropTypes.number,
-  /** The smallest value allowed for the input. */
-  minValue: PropTypes.number,
-  /** The largest value allowed for the input. */
-  maxValue: PropTypes.number,
-  /** The rendered label for the field. */
-  label: PropTypes.node,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: PropTypes.shape({}),
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /**
-   * Handler that is called when the value changes.
-   * (value: number) => void
-   */
-  onChange: PropTypes.func,
-  /** The default value (uncontrolled). */
-  defaultValue: PropTypes.number,
-  /** The current value (controlled). */
-  value: PropTypes.number
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+NumberField.displayName = displayName;
+export default NumberField;

package/lib/components/TableBase/TableBase.js

@@ -372,7 +372,8 @@ function Resizer(props) {
       onResizeEnd: onResizeEnd
     }, layoutState, ref),
     resizerProps = _useTableColumnResize.resizerProps,
-    inputProps = _useTableColumnResize.inputProps;
+    inputProps = _useTableColumnResize.inputProps,
+    isResizing = _useTableColumnResize.isResizing;
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
@@ -381,8 +382,9 @@ function Resizer(props) {
   // keyboard events fired on the input (Enter to start resize, Escape/Tab to
   // end it) bubble up to the element with the keyboard handlers.
 
-  var _useStatusClasses3 = useStatusClasses('', {
-      isFocused: isFocusVisible
+  var _useStatusClasses3 = useStatusClasses('resizer', {
+      isFocused: isFocusVisible,
+      isResizing: isResizing
     }),
     classNames = _useStatusClasses3.classNames;
   return ___EmotionJSX(Box, _extends({
@@ -447,11 +449,15 @@ function TableColumnHeader(props) {
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key),
       position: 'relative'
     }, column.props.sx)
-  }, mergeProps(columnHeaderProps, focusProps, column.props)), ___EmotionJSX(Box, {
+  }, mergeProps(columnHeaderProps, column.props)), ___EmotionJSX(Box, _extends({
+    as: "button",
+    type: "button",
     isRow: true,
     gap: "sm",
-    alignItems: "center"
-  }, ___EmotionJSX(Text, {
+    alignItems: "center",
+    variant: "tableBase.sortButton",
+    "aria-label": "Sort by ".concat(column.textValue)
+  }, mergeProps(focusProps)), ___EmotionJSX(Text, {
     as: "h4",
     variant: "headText"
   }, column.rendered), allowsSorting && sortIcon), allowsResizing && ___EmotionJSX(Resizer, {

package/lib/components/TableBase/TableBase.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TableBaseStories from './TableBase.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={TableBaseStories} isTemplate />
 
@@ -42,23 +43,16 @@ This component requires these additional components:
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Focuses the component and triggers an action if one is associated with it. |
-| Arrow keys | Can be used to navigate between the components in the table. |
-| Home or Page Up | Shifts the focus to the first row. |
-| End or Page Down | Shifts the focus to the last visible row. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute should be provided on the `TableBase` to give the table an accessible name. When a visible `TableCaption` is present, use **`aria-labelledby`** to associate the caption with the table instead.
-- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.
-- Each `Row` uses the **`aria-rowindex`** attribute to enumerate its position within the table.
-- Each `Column` and `Cell` uses the **`aria-colindex`** attribute to enumerate its position within its row.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus into the table (from outside) or out of the table (to the next focusable element after it). The table is a single stop in the page tab sequence — Tab does not move focus between rows or cells within the table.' },
+  { key: 'Shift + Tab', description: 'Moves focus out of the table to the previous focusable element (or into the table from after it).' },
+  { key: 'Space or Enter', description: 'Triggers an action on the focused component, such as toggling row selection or sorting a column.' },
+  { key: 'Arrow keys', description: 'Moves focus between rows and cells within the table.' },
+  { key: 'Home or Page Up', description: 'Shifts the focus to the first row.' },
+  { key: 'End or Page Down', description: 'Shifts the focus to the last visible row.' },
+]} screenReaderRows={[
+  'The **`aria-label`** attribute should be provided on the `TableBase` to give the table an accessible name. When a visible `TableCaption` is present, use **`aria-labelledby`** to associate the caption with the table instead.',
+  'The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.',
+  'Each `Row` uses the **`aria-rowindex`** attribute to enumerate its position within the table.',
+  'Each `Column` and `Cell` uses the **`aria-colindex`** attribute to enumerate its position within its row.',
+]} />