@pingux/astro 2.87.0-alpha.3 → 2.88.0-alpha.0

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -274,12 +274,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     autoFocus: true,
     contain: true
   }, (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({
+    value: searchValue,
     "aria-describedby": optionsNumberMessageId,
     autocomplete: "off",
     placeholder: "Search",
     "aria-label": "Items Search",
     "data-testid": "Environment-Breadcrumb-Search",
-    onChange: setSearchValue,
+    onChange: function onChange(val) {
+      return setSearchValue(val);
+    },
     p: "10px"
   }, searchProps)), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
     role: "alert",

package/lib/cjs/components/SearchField/Search.styles.d.ts

@@ -0,0 +1,39 @@
+export declare const clearButtonIcon: {
+    color: string;
+};
+export declare const wrapper: {
+    position: string;
+    justifyContent: string;
+    '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
+        WebkitAppearance: string;
+    };
+    '&.is-focused > *': {
+        zIndex: number;
+    };
+};
+export declare const icon: {
+    position: string;
+    color: string;
+    ml: string;
+};
+declare const _default: {
+    clearButtonIcon: {
+        color: string;
+    };
+    wrapper: {
+        position: string;
+        justifyContent: string;
+        '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
+            WebkitAppearance: string;
+        };
+        '&.is-focused > *': {
+            zIndex: number;
+        };
+    };
+    icon: {
+        position: string;
+        color: string;
+        ml: string;
+    };
+};
+export default _default;

package/lib/cjs/components/SearchField/SearchField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchFieldProps } from '../../types';
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default SearchField;

package/lib/cjs/components/SearchField/SearchField.js

@@ -22,12 +22,9 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 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; }
@@ -44,12 +41,8 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     controlProps = props.controlProps,
     iconProps = props.iconProps,
     labelProps = props.labelProps;
-  var searchRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return searchRef.current;
-  });
+  var searchRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var state = (0, _reactStately.useSearchFieldState)(props);
   var _useSearchField = (0, _reactAria.useSearchField)(_objectSpread({
       autoComplete: autocomplete,
@@ -105,167 +98,6 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }))));
 });
-SearchField.propTypes = _objectSpread(_objectSpread({
-  /**
-   * @ignore
-   * Identifies the currently active element when DOM focus is on a composite widget, textbox,
-   * group, or application.
-   */
-  'aria-activedescendant': _propTypes["default"].string,
-  /**
-   * Indicates whether inputting text could trigger display of one or more predictions of the
-   * user's intended value for an input and specifies how predictions would be presented if they
-   * are made.
-   */
-  'aria-autocomplete': _propTypes["default"].oneOf(['none', 'inline', 'list', 'both']),
-  /**
-   * @ignore
-   * Indicates the availability and type of interactive popup element, such as menu or dialog, that
-   * can be triggered by an element.
-   */
-  'aria-haspopup': _propTypes["default"].oneOf([true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog']),
-  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
-  autoComplete: _propTypes["default"].string,
-  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
-  autocomplete: _propTypes["default"].string,
-  /** The default value (uncontrolled). */
-  defaultValue: _propTypes["default"].string,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Whether to display the clear button or not. */
-  hasNoClearButton: _propTypes["default"].bool,
-  /** The icon to display alongside the placeholder text. */
-  icon: _propTypes["default"].elementType,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Whether the input is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** The content to display as the label. */
-  label: _propTypes["default"].node,
-  /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
-  name: _propTypes["default"].string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: _propTypes["default"].string,
-  /** The current value (controlled). */
-  value: _propTypes["default"].string,
-  /**
-   * Handler that is called when the SearchField is submitted.
-   * (value: string) => void
-   */
-  onSubmit: _propTypes["default"].func,
-  /**
-   * Handler that is called when the clear button is pressed.
-   * () => void
-   */
-  onClear: _propTypes["default"].func,
-  /**
-   * Handler that is called when the element receives focus.
-   * (e: FocusEvent) => void
-   */
-  onFocus: _propTypes["default"].func,
-  /**
-   * Handler that is called when the element loses focus.
-   * (e: FocusEvent) => void
-   */
-  onBlur: _propTypes["default"].func,
-  /**
-   * Handler that is called when a key is pressed.
-   * (e: KeyboardEvent) => void
-   */
-  onKeyDown: _propTypes["default"].func,
-  /**
-   * Handler that is called when a key is released.
-   * (e: KeyboardEvent) => void
-   */
-  onKeyUp: _propTypes["default"].func,
-  /**
-   * Handler that is called when the value changes.
-   * (value: string) => void
-   */
-  onChange: _propTypes["default"].func,
-  /** Props object that is spread into the icon element. */
-  iconProps: _propTypes["default"].shape({}),
-  // NOTE: unsurfaced useSearchField / useSearchFieldState props listed below
-
-  /** @ignore Whether the input can be selected but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /**
-   * @ignore
-   * Whether user input is required on the input before form submission.
-   * Often paired with the necessityIndicator prop to add a visual indicator to the input.
-   */
-  isRequired: _propTypes["default"].bool,
-  /**
-   * @ignore
-   * Handler that is called when the element's focus status changes.
-   * (isFocused: boolean) => void
-   */
-  onFocusChange: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Whether to exclude the element from the sequential tab order. If true, the element will not be
-   * focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where
-   * an alternative means of accessing the element or its functionality via the keyboard is
-   * available.
-   */
-  isExcludedFromTabOrder: _propTypes["default"].bool,
-  /** The maximum number of characters supported by the input set by the user. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). */
-  maxLength: _propTypes["default"].number,
-  /** @ignore The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). */
-  minLength: _propTypes["default"].number,
-  /** @ignore Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). */
-  pattern: _propTypes["default"].string,
-  /** @ignore The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
-  type: _propTypes["default"].string,
-  /**
-   * @ignore
-   * Hints at the type of data that might be entered by the user while editing the element or its
-   * contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
-   */
-  inputMode: _propTypes["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
-  /**
-   * @ignore
-   * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
-   */
-  onCopy: _propTypes["default"].func,
-  /** @ignore Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). */
-  onCut: _propTypes["default"].func,
-  /** @ignore Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). */
-  onPaste: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Handler that is called when a text composition system starts a new text composition session.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
-   */
-  onCompositionStart: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Handler that is called when a text composition system completes or cancels the current text
-   * composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
-   */
-  onCompositionEnd: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Handler that is called when a new character is received in the current text composition
-   * session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
-   */
-  onCompositionUpdate: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
-   */
-  onSelect: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
-   */
-  onBeforeInput: _propTypes["default"].func,
-  /**
-   * @ignore
-   * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
-   */
-  onInput: _propTypes["default"].func
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: _SearchIcon["default"]

package/lib/cjs/components/SearchField/SearchField.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryFn } from '@storybook/react';
+import { SearchFieldProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<SearchFieldProps>;
+export declare const Controlled: StoryFn<SearchFieldProps>;
+export declare const CustomIcon: StoryFn<SearchFieldProps>;
+export declare const NoClearButton: StoryFn<SearchFieldProps>;
+export declare const ControlledWithDebouncedInput: StoryFn<SearchFieldProps>;
+export declare const WithFilter: StoryFn<SearchFieldProps>;

package/lib/cjs/components/SearchField/SearchField.stories.js

@@ -96,7 +96,9 @@ var Controlled = function Controlled() {
     setValue = _useState2[1];
   return (0, _react2.jsx)(_index.SearchField, {
     value: value,
-    onChange: setValue,
+    onChange: function onChange(val) {
+      return setValue(val);
+    },
     "aria-label": "Search Groups",
     placeholder: "Search Groups",
     onSubmit: function onSubmit(text) {
@@ -138,7 +140,9 @@ var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
   });
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
     value: value,
-    onChange: setValue,
+    onChange: function onChange(val) {
+      return setValue(val);
+    },
     "aria-label": "Search Groups",
     placeholder: "Search Groups",
     onSubmit: function onSubmit(text) {

package/lib/cjs/components/SearchField/SearchField.test.d.ts

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

package/lib/cjs/components/SearchField/SearchField.test.js

@@ -89,7 +89,7 @@ test('search isRequired', function () {
 });
 test('search autoFocus', function () {
   getComponent({
-    autoFocus: true
+    hasAutoFocus: true
   });
   var search = _testWrapper.screen.getByLabelText(testLabel);
   expect(search).toHaveFocus();
@@ -163,7 +163,7 @@ test('search onChange', function () {
 });
 test('search excludeFromTabOrder', function () {
   getComponent({
-    excludeFromTabOrder: true
+    isExcludedFromTabOrder: true
   });
   var search = _testWrapper.screen.getByLabelText(testLabel);
   expect(search).toHaveAttribute('tabindex', '-1');

package/lib/cjs/components/SearchField/index.d.ts

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

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

@@ -41,6 +41,7 @@ export * from './progressBar';
 export * from './requirementsList';
 export * from './rockerButtonGroup';
 export * from './scrollBox';
+export * from './searchField';
 export * from './separator';
 export * from './shared';
 export * from './switchField';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _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;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _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;
 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(_context43 = _Object$keys(_scrollBox)).call(_context43,
     }
   });
 });
+var _searchField = require("./searchField");
+_forEachInstanceProperty(_context44 = _Object$keys(_searchField)).call(_context44, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _searchField[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _searchField[key];
+    }
+  });
+});
 var _separator = require("./separator");
-_forEachInstanceProperty(_context44 = _Object$keys(_separator)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_separator)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -492,7 +503,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_separator)).call(_context44,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context45 = _Object$keys(_shared)).call(_context45, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_shared)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -503,7 +514,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_shared)).call(_context45, fu
   });
 });
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context46 = _Object$keys(_switchField)).call(_context46, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_switchField)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -514,7 +525,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_switchField)).call(_context4
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context47 = _Object$keys(_tab)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_tab)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_tab)).call(_context47, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context48 = _Object$keys(_table)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_table)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_table)).call(_context48, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context49 = _Object$keys(_tabs)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_tabs)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_tabs)).call(_context49, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context50 = _Object$keys(_text)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_text)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_text)).call(_context50, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context51 = _Object$keys(_textField)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_textField)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_textField)).call(_context51,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context52 = _Object$keys(_timefield)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_timefield)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_timefield)).call(_context52,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context53 = _Object$keys(_tooltipTrigger)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_tooltipTrigger)).call(_context54, 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/searchField.d.ts

@@ -0,0 +1,168 @@
+/// <reference types="react" />
+import { ThemeUICSSObject } from 'theme-ui';
+import { ControlProps } from '../hooks/useField/useField';
+import { StyleProps } from './shared';
+import { IconProps, IconTypeExtended, LabelProps } from '.';
+export interface SearchFieldProps extends StyleProps {
+    /**
+       * @ignore
+       * Identifies the currently active element when DOM focus is on a composite widget, textbox,
+       * group, or application.
+       */
+    'aria-activedescendant'?: string;
+    /**
+     * Indicates whether inputting text could trigger display of one or more predictions of the
+     * user's intended value for an input and specifies how predictions would be presented if they
+     * are made.
+     */
+    'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
+    /**
+     * @ignore
+     * Indicates the availability and type of interactive popup element, such as menu or dialog, that
+     * can be triggered by an element.
+     */
+    'aria-haspopup'?: true | false | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+    autoComplete?: string;
+    /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
+    autocomplete?: string;
+    /** The default value (uncontrolled). */
+    defaultValue?: string;
+    /** Whether the element should receive focus on render. */
+    hasAutoFocus?: boolean;
+    /** Whether to display the clear button or not. */
+    hasNoClearButton?: boolean;
+    /** The icon to display alongside the placeholder text. */
+    icon?: IconTypeExtended;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** The content to display as the label. */
+    label?: React.ReactNode;
+    /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
+    name?: string;
+    /** Temporary text that occupies the text input when it is empty. */
+    placeholder?: string;
+    /** The current value (controlled). */
+    value?: string;
+    /**
+     * Handler that is called when the SearchField is submitted.
+     * (value: string) => void
+     */
+    onSubmit?: (value?: unknown) => void;
+    /**
+     * Handler that is called when the clear button is pressed.
+     * () => void
+     */
+    onClear?: () => void;
+    /**
+     * Handler that is called when the element receives focus.
+     * (e: FocusEvent) => void
+     */
+    onFocus?: (e: FocusEvent) => void;
+    /**
+     * Handler that is called when the element loses focus.
+     * (e: FocusEvent) => void
+     */
+    onBlur?: (e: FocusEvent) => void;
+    /**
+     * Handler that is called when a key is pressed.
+     * (e: KeyboardEvent) => void
+     */
+    onKeyDown?: (e: KeyboardEvent) => void;
+    /**
+     * Handler that is called when a key is released.
+     * (e: KeyboardEvent) => void
+     */
+    onKeyUp?: (e: KeyboardEvent) => void;
+    /**
+     * Handler that is called when the value changes.
+     * (value: string) => void
+     */
+    onChange?: (value: string) => void;
+    /** Props object that is spread into the icon element. */
+    iconProps?: IconProps;
+    /** @ignore Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /**
+     * @ignore
+     * Whether user input is required on the input before form submission.
+     * Often paired with the necessityIndicator prop to add a visual indicator to the input.
+     */
+    isRequired?: boolean;
+    /**
+     * @ignore
+     * Handler that is called when the element's focus status changes.
+     * (isFocused: boolean) => void
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    /**
+     * @ignore
+     * Whether to exclude the element from the sequential tab order. If true, the element will not be
+     * focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where
+     * an alternative means of accessing the element or its functionality via the keyboard is
+     * available.
+     */
+    isExcludedFromTabOrder?: boolean;
+    /** The maximum number of characters supported by the input set by the user. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). */
+    maxLength?: number;
+    /** @ignore The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). */
+    minLength?: number;
+    /** @ignore Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). */
+    pattern?: string;
+    /** @ignore The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
+    type?: string;
+    /**
+     * @ignore
+     * Hints at the type of data that might be entered by the user while editing the element or its
+     * contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
+     */
+    inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * @ignore
+     * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
+     */
+    onCopy?: () => void;
+    /** @ignore Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). */
+    onCut?: () => void;
+    /** @ignore Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). */
+    onPaste?: () => void;
+    /**
+     * @ignore
+     * Handler that is called when a text composition system starts a new text composition session.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
+     */
+    onCompositionStart?: () => void;
+    /**
+     * @ignore
+     * Handler that is called when a text composition system completes or cancels the current text
+     * composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
+     */
+    onCompositionEnd?: () => void;
+    /**
+     * @ignore
+     * Handler that is called when a new character is received in the current text composition
+     * session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
+     */
+    onCompositionUpdate?: () => void;
+    /**
+     * @ignore
+     * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
+     */
+    onSelect?: () => void;
+    /**
+     * @ignore
+     * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
+     */
+    onBeforeInput?: () => void;
+    /**
+     * @ignore
+     * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
+     */
+    onInput?: () => void;
+    controlProps?: ControlProps;
+    labelProps?: LabelProps;
+    size?: string;
+    sx?: ThemeUICSSObject;
+}

package/lib/cjs/types/searchField.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/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -260,12 +260,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     autoFocus: true,
     contain: true
   }, ___EmotionJSX(SearchField, _extends({
+    value: searchValue,
     "aria-describedby": optionsNumberMessageId,
     autocomplete: "off",
     placeholder: "Search",
     "aria-label": "Items Search",
     "data-testid": "Environment-Breadcrumb-Search",
-    onChange: setSearchValue,
+    onChange: function onChange(val) {
+      return setSearchValue(val);
+    },
     p: "10px"
   }, searchProps)), ___EmotionJSX(VisuallyHidden, {
     role: "alert",

package/lib/components/SearchField/SearchField.js

@@ -10,17 +10,14 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useSearchField } from 'react-aria';
 import { useSearchFieldState } from 'react-stately';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Input, Label } from '../..';
-import { useField, usePropWarning } from '../../hooks';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'SearchField';
 var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -33,12 +30,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps = props.controlProps,
     iconProps = props.iconProps,
     labelProps = props.labelProps;
-  var searchRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return searchRef.current;
-  });
+  var searchRef = useLocalOrForwardRef(ref);
   var state = useSearchFieldState(props);
   var _useSearchField = useSearchField(_objectSpread({
       autoComplete: autocomplete,
@@ -94,167 +87,6 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }))));
 });
-SearchField.propTypes = _objectSpread(_objectSpread({
-  /**
-   * @ignore
-   * Identifies the currently active element when DOM focus is on a composite widget, textbox,
-   * group, or application.
-   */
-  'aria-activedescendant': PropTypes.string,
-  /**
-   * Indicates whether inputting text could trigger display of one or more predictions of the
-   * user's intended value for an input and specifies how predictions would be presented if they
-   * are made.
-   */
-  'aria-autocomplete': PropTypes.oneOf(['none', 'inline', 'list', 'both']),
-  /**
-   * @ignore
-   * Indicates the availability and type of interactive popup element, such as menu or dialog, that
-   * can be triggered by an element.
-   */
-  'aria-haspopup': PropTypes.oneOf([true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog']),
-  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
-  autoComplete: PropTypes.string,
-  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
-  autocomplete: PropTypes.string,
-  /** The default value (uncontrolled). */
-  defaultValue: PropTypes.string,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /** Whether to display the clear button or not. */
-  hasNoClearButton: PropTypes.bool,
-  /** The icon to display alongside the placeholder text. */
-  icon: PropTypes.elementType,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Whether the input is disabled. */
-  isDisabled: PropTypes.bool,
-  /** The content to display as the label. */
-  label: PropTypes.node,
-  /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
-  name: PropTypes.string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** The current value (controlled). */
-  value: PropTypes.string,
-  /**
-   * Handler that is called when the SearchField is submitted.
-   * (value: string) => void
-   */
-  onSubmit: PropTypes.func,
-  /**
-   * Handler that is called when the clear button is pressed.
-   * () => void
-   */
-  onClear: PropTypes.func,
-  /**
-   * Handler that is called when the element receives focus.
-   * (e: FocusEvent) => void
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Handler that is called when the element loses focus.
-   * (e: FocusEvent) => void
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Handler that is called when a key is pressed.
-   * (e: KeyboardEvent) => void
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Handler that is called when a key is released.
-   * (e: KeyboardEvent) => void
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * Handler that is called when the value changes.
-   * (value: string) => void
-   */
-  onChange: PropTypes.func,
-  /** Props object that is spread into the icon element. */
-  iconProps: PropTypes.shape({}),
-  // NOTE: unsurfaced useSearchField / useSearchFieldState props listed below
-
-  /** @ignore Whether the input can be selected but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /**
-   * @ignore
-   * Whether user input is required on the input before form submission.
-   * Often paired with the necessityIndicator prop to add a visual indicator to the input.
-   */
-  isRequired: PropTypes.bool,
-  /**
-   * @ignore
-   * Handler that is called when the element's focus status changes.
-   * (isFocused: boolean) => void
-   */
-  onFocusChange: PropTypes.func,
-  /**
-   * @ignore
-   * Whether to exclude the element from the sequential tab order. If true, the element will not be
-   * focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where
-   * an alternative means of accessing the element or its functionality via the keyboard is
-   * available.
-   */
-  isExcludedFromTabOrder: PropTypes.bool,
-  /** The maximum number of characters supported by the input set by the user. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength). */
-  maxLength: PropTypes.number,
-  /** @ignore The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength). */
-  minLength: PropTypes.number,
-  /** @ignore Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern). */
-  pattern: PropTypes.string,
-  /** @ignore The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
-  type: PropTypes.string,
-  /**
-   * @ignore
-   * Hints at the type of data that might be entered by the user while editing the element or its
-   * contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
-   */
-  inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
-  /**
-   * @ignore
-   * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
-   */
-  onCopy: PropTypes.func,
-  /** @ignore Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). */
-  onCut: PropTypes.func,
-  /** @ignore Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). */
-  onPaste: PropTypes.func,
-  /**
-   * @ignore
-   * Handler that is called when a text composition system starts a new text composition session.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
-   */
-  onCompositionStart: PropTypes.func,
-  /**
-   * @ignore
-   * Handler that is called when a text composition system completes or cancels the current text
-   * composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
-   */
-  onCompositionEnd: PropTypes.func,
-  /**
-   * @ignore
-   * Handler that is called when a new character is received in the current text composition
-   * session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
-   */
-  onCompositionUpdate: PropTypes.func,
-  /**
-   * @ignore
-   * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
-   */
-  onSelect: PropTypes.func,
-  /**
-   * @ignore
-   * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
-   */
-  onBeforeInput: PropTypes.func,
-  /**
-   * @ignore
-   * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
-   */
-  onInput: PropTypes.func
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon

package/lib/components/SearchField/SearchField.stories.js

@@ -84,7 +84,9 @@ export var Controlled = function Controlled() {
     setValue = _useState2[1];
   return ___EmotionJSX(SearchField, {
     value: value,
-    onChange: setValue,
+    onChange: function onChange(val) {
+      return setValue(val);
+    },
     "aria-label": "Search Groups",
     placeholder: "Search Groups",
     onSubmit: function onSubmit(text) {
@@ -126,7 +128,9 @@ export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput(
   });
   return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
     value: value,
-    onChange: setValue,
+    onChange: function onChange(val) {
+      return setValue(val);
+    },
     "aria-label": "Search Groups",
     placeholder: "Search Groups",
     onSubmit: function onSubmit(text) {

package/lib/components/SearchField/SearchField.test.js

@@ -86,7 +86,7 @@ test('search isRequired', function () {
 });
 test('search autoFocus', function () {
   getComponent({
-    autoFocus: true
+    hasAutoFocus: true
   });
   var search = screen.getByLabelText(testLabel);
   expect(search).toHaveFocus();
@@ -160,7 +160,7 @@ test('search onChange', function () {
 });
 test('search excludeFromTabOrder', function () {
   getComponent({
-    excludeFromTabOrder: true
+    isExcludedFromTabOrder: true
   });
   var search = screen.getByLabelText(testLabel);
   expect(search).toHaveAttribute('tabindex', '-1');

package/lib/types/index.js

@@ -41,6 +41,7 @@ export * from './progressBar';
 export * from './requirementsList';
 export * from './rockerButtonGroup';
 export * from './scrollBox';
+export * from './searchField';
 export * from './separator';
 export * from './shared';
 export * from './switchField';

package/lib/types/searchField.js

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

package/package.json

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