@khanacademy/wonder-blocks-search-field 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 1.0.7
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-icon-button@3.4.9
+
 ## 1.0.6
 
 ### Patch Changes

package/dist/index.js

@@ -776,7 +776,7 @@ if (false) { var secondaryBuildName, initialBuildName, buildNames, key, global;
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _extends; });
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -789,7 +789,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -3233,6 +3232,24 @@ function (module, __webpack_exports__, __webpack_require__) {
       boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.red}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white}`
     }
   });
+  /**
+   * A TextField is an element used to accept a single line of text from the user.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {TextField} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [value, setValue] = React.useState("");
+   *
+   * <TextField
+   *     id="some-unique-text-field-id"
+   *     value={value}
+   *     onChange={setValue}
+   * />
+   * ```
+   */
+
   const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TextFieldInternal, _extends({}, props, {
     forwardedRef: ref
   })));
@@ -3521,6 +3538,63 @@ function (module, __webpack_exports__, __webpack_require__) {
    *
    * If you wish to use just a single field, use Checkbox or Radio with the
    * optional label and description props.
+   *
+   * ### Checkbox Usage
+   *
+   * ```jsx
+   * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValues, setSelectedValues] = React.useState([]);
+   *
+   * // Checkbox usage
+   * <CheckboxGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValues}
+   *     selectedValues={selectedValues}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *        description="Some choice description."
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </CheckboxGroup>
+   * ```
+   *
+   * ### Radio Usage
+   *
+   * ```jsx
+   * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValue, setSelectedValue] = React.useState("");
+   *
+   * <RadioGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValue}>
+   *     selectedValues={selectedValue}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *        description="Some choice description."
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </RadioGroup>
+   * ```
    */
 
 
@@ -3620,6 +3694,33 @@ function (module, __webpack_exports__, __webpack_require__) {
    * many props for its children Choice components. The Choice component is
    * exposed for the user to apply custom styles or to indicate which choices are
    * disabled.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValues, setSelectedValues] = React.useState([]);
+   *
+   * <CheckboxGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValues}
+   *     selectedValues={selectedValues}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </CheckboxGroup>
+   * ```
    */
 
   class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -3759,6 +3860,33 @@ function (module, __webpack_exports__, __webpack_require__) {
    * indicate which choices are disabled. The use of the groupName prop is
    * important to maintain expected keyboard navigation behavior for
    * accessibility.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValue, setSelectedValue] = React.useState([]);
+   *
+   * <RadioGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValue}
+   *     selectedValue={selectedValue}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </RadioGroup>
+   * ```
    */
 
   class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -3993,6 +4121,27 @@ function (module, __webpack_exports__, __webpack_require__) {
     disabled: false,
     light: false
   };
+  /**
+   * A LabeledTextField is an element used to accept a single line of text
+   * from the user paired with a label, description, and error field elements.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [value, setValue] = React.useState("");
+   *
+   * <LabeledTextField
+   *     label="Label"
+   *     description="Hello, this is the description for this field"
+   *     placeholder="Placeholder"
+   *     value={value}
+   *     onChange={setValue}
+   * />
+   * ```
+   */
+
   const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](LabeledTextFieldInternal, _extends({}, props, {
     forwardedRef: ref
   })));
@@ -4736,11 +4885,10 @@ function (module, __webpack_exports__, __webpack_require__) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _setPrototypeOf; });
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -5634,7 +5782,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
   /* MEDIA_MODAL_SPEC */
   "c"]).map(spec => spec.query));
-  const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
+  const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/require-exact-type
   // If for some reason we're not able to resolve the current media size we
   // fall back to this state.
 
@@ -5788,6 +5936,32 @@ function (module, __webpack_exports__, __webpack_require__) {
 
   } // gen-snapshot-tests.js only understands `export default class ...`
 
+  /**
+   * ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
+   *
+   * MediaLayout is a container component that accepts a `styleSheets` object,
+   * whose keys are media sizes. It listens for changes to the current media
+   * size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
+   * `children`, which is a render function taking those three values as an
+   * object.
+   *
+   * Valid keys for the `styleSheets` object are (in order of precedence):
+   * - `small`, `medium`, `large`
+   * - `mdOrSmaller`, `mdOrLarger`
+   * - `all`
+   *
+   * `MediaLayout` will merge style rules from multiple styles that match the
+   * current media query, e.g. `"(min-width: 1024px)"`.
+   *
+   * The `mediaSpec` is an object with one or more of the following keys:
+   * `small`, `medium`, or `large`. Each value contains the following data:
+   * - `query: string` e.g. "(min-width: 1024px)"
+   * - `totalColumns: number`
+   * - `gutterWidth: number`
+   * - `marginWidth: number`
+   * - `maxWidth: number`
+   */
+
 
   class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     render() {
@@ -6404,7 +6578,6 @@ function (module, __webpack_exports__, __webpack_require__) {
       case "checkbox":
       case "radio":
       case "listbox":
-      case "option":
         return {
           triggerOnEnter: false,
           triggerOnSpace: true
@@ -6414,6 +6587,7 @@ function (module, __webpack_exports__, __webpack_require__) {
       case "button":
       case "menuitem":
       case "menu":
+      case "option":
       default:
         return {
           triggerOnEnter: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-search-field",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "design": "v1",
   "description": "Search Field components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,11 +15,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
+    "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.3.2",
     "@khanacademy/wonder-blocks-icon": "^1.2.29",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.8",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },