@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

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

@@ -0,0 +1,356 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _searchfield = require("@react-aria/searchfield");
+
+var _searchfield2 = require("@react-stately/searchfield");
+
+var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _hooks = require("../../hooks");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * Renders a search field with associated controls including visual elements and keyboard
+ * interaction handlers.
+ *
+ * Built with [useSearchField](https://react-spectrum.adobe.com/react-aria/useSearchField.html)
+ * from React Aria and
+ * [useSearchFieldState](https://react-spectrum.adobe.com/react-stately/useSearchFieldState.html)
+ * from React Stately.
+ */
+var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var autocomplete = props.autocomplete,
+      hasAutoFocus = props.hasAutoFocus,
+      hasNoClearButton = props.hasNoClearButton,
+      icon = props.icon,
+      isExcludedFromTabOrder = props.isExcludedFromTabOrder,
+      label = props.label,
+      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 state = (0, _searchfield2.useSearchFieldState)(props);
+
+  var _useSearchField = (0, _searchfield.useSearchField)(_objectSpread({
+    autoComplete: autocomplete,
+    autoFocus: hasAutoFocus,
+    excludeFromTabOrder: isExcludedFromTabOrder
+  }, props), state, searchRef),
+      raLabelProps = _useSearchField.labelProps,
+      raInputProps = _useSearchField.inputProps,
+      clearButtonProps = _useSearchField.clearButtonProps;
+
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, props), {}, {
+    labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+    controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+  })),
+      fieldContainerProps = _useField.fieldContainerProps,
+      fieldControlProps = _useField.fieldControlProps,
+      fieldLabelProps = _useField.fieldLabelProps;
+
+  return (0, _react2.jsx)(_index.Box, fieldContainerProps, label && (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Box, {
+    variant: "forms.search.container"
+  }, (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({
+    ref: searchRef,
+    pl: 40,
+    pr: 40
+  }, fieldControlProps)), icon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: icon,
+    variant: "forms.search.icon",
+    size: 22
+  }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    sx: {
+      position: 'absolute',
+      top: 8,
+      right: 10,
+      path: {
+        fill: 'text.secondary'
+      }
+    }
+  }, clearButtonProps), (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"]
+  }))));
+});
+SearchField.propTypes = {
+  /** Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  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,
+
+  /**
+   * 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']),
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': _propTypes["default"].string,
+
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby': _propTypes["default"].string,
+
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread into the input element. */
+  controlProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread into the icon element. */
+  iconProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread into the label element. */
+  labelProps: _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
+   * Identifies the currently active element when DOM focus is on a composite widget, textbox,
+   * group, or application.
+   */
+  'aria-activedescendant': _propTypes["default"].string,
+
+  /**
+   * @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']),
+
+  /** @ignore Identifies the element (or elements) that describes the object. */
+  'aria-describedby': _propTypes["default"].string,
+
+  /**
+   * @ignore
+   * Identifies the element (or elements) that provide a detailed, extended description for the
+   * object.
+   */
+  'aria-details': _propTypes["default"].string,
+
+  /**
+   * @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,
+
+  /** @ignore Identifies the element that provides an error message for the object. */
+  'aria-errormessage': _propTypes["default"].string
+};
+SearchField.defaultProps = {
+  hasNoClearButton: false,
+  icon: _SearchIcon["default"]
+};
+SearchField.displayName = 'SearchField';
+var _default = SearchField;
+exports["default"] = _default;

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

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.ControlledWithDebouncedInput = exports.MaxLength = exports.NoClearButton = exports.CustomIcon = exports.Controlled = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
+
+var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
+
+var _index = require("../../index");
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/SearchField',
+  component: _index.SearchField,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      }
+    },
+    placeholder: {
+      defaultValue: 'Search Groups'
+    },
+    defaultValue: {},
+    icon: {
+      control: {
+        type: 'none'
+      }
+    },
+    isDisabled: {},
+    hasAutoFocus: {},
+    hasNoClearButton: {},
+    autocomplete: {},
+    containerProps: {},
+    iconProps: {},
+    controlProps: {},
+    labelProps: {},
+    name: {},
+    id: {},
+    'aria-label': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-labelledby': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-autocomplete': {},
+    value: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({}, args, {
+    icon: _SearchIcon["default"],
+    "aria-label": "Search Groups",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    } // eslint-disable-line no-alert
+
+  }));
+};
+
+exports.Default = Default;
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return (0, _react2.jsx)(_index.SearchField, {
+    value: value,
+    onChange: setValue,
+    "aria-label": "Search Groups",
+    placeholder: "Search Groups",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    } // eslint-disable-line no-alert
+
+  });
+};
+
+exports.Controlled = Controlled;
+
+var CustomIcon = function CustomIcon() {
+  return (0, _react2.jsx)(_index.SearchField, {
+    icon: _AccountGroupIcon["default"],
+    "aria-label": "Search Users",
+    placeholder: "Search Users",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    } // eslint-disable-line no-alert
+
+  });
+};
+
+exports.CustomIcon = CustomIcon;
+
+var NoClearButton = function NoClearButton() {
+  return (0, _react2.jsx)(_index.SearchField, {
+    hasNoClearButton: true,
+    "aria-label": "Search Users",
+    placeholder: "Search Users",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    } // eslint-disable-line no-alert
+
+  });
+};
+
+exports.NoClearButton = NoClearButton;
+
+var MaxLength = function MaxLength(args) {
+  return (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({}, args, {
+    icon: _SearchIcon["default"],
+    "aria-label": "Search Groups",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    } // eslint-disable-line no-alert
+    ,
+    maxLength: 9
+  }));
+};
+
+exports.MaxLength = MaxLength;
+
+var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var debouncedSearchText = (0, _hooks.useDebounce)({
+    value: value,
+    delay: 500
+  });
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
+    value: value,
+    onChange: setValue,
+    "aria-label": "Search Groups",
+    placeholder: "Search Groups",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    } // eslint-disable-line no-alert
+
+  }), (0, _react2.jsx)(_index.Text, {
+    mt: "xs"
+  }, "Debounced value: ".concat(debouncedSearchText)));
+};
+
+exports.ControlledWithDebouncedInput = ControlledWithDebouncedInput;