@puppet/react-components - npm Package Compare versions

Comparing version 5.34.9 to 5.34.10

package.json

 {
   "name": "@puppet/react-components",
-  "version": "5.34.9",
+  "version": "5.34.10",
   "author": "Puppet, Inc.",
@@ -94,3 +94,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "0cd0f2f989590be98ceb89ac5588f5313113aebe"
+  "gitHead": "85d053c6f91aefa30a146de25b4fd1258e479a9e"
 }

source/react/library/select/Select.js

@@ -383,2 +383,7 @@ import React, { Component } from 'react';
       value,
+      actionLabel,
+      onChange,
+      onFilter,
+      onBlur: onBlurProp,
+      ...restProps
     } = this.props;
@@ -415,2 +420,3 @@
             autoComplete="off"
+            {...restProps}
           />
@@ -436,2 +442,3 @@ );
               }}
+              {...restProps}
             />
@@ -438,0 +445,0 @@ <input

source/react/library/select/Select.md

@@ -33,3 +33,3 @@ ## Overview
   onChange={newValue => setValue(newValue)}
-/>
+/>;
 ```
@@ -65,4 +65,8 @@
   />
-  {!isValueInOptions && <Alert type="warning" style={{ marginTop: 10 }}>"{value}" is not an option</Alert>}
-</>
+  {!isValueInOptions && (
+    <Alert type="warning" style={{ marginTop: 10 }}>
+      "{value}" is not an option
+    </Alert>
+  )}
+</>;
 ```
@@ -74,5 +78,7 @@
 
-With `type` set to `autocomplete`, the `Select` input will accept text and provide filtered menu options accordingly. Full keyboard navigation of the menu options is retained.
+With `type` set to `autocomplete`, the `Select` input will accept text and the menu options can be filtered accordingly. Full keyboard navigation of the menu options is retained.
 
 ```jsx
+const [fieldValue, setFieldValue] = React.useState('');
+
 const options = [
@@ -92,12 +98,26 @@ { value: 'apple', label: 'apple' },
 
+const noResults = [
+  {
+    value: [],
+    label: 'No results found',
+  },
+];
+
+let filteredOptions = [...options];
+if (state.fieldValue !== undefined && state.fieldValue !== '') {
+  filteredOptions = options.filter(options =>
+    options.label.includes(state.fieldValue),
+  );
+}
+
 <div>
   <Select
     name="autocomplete-example"
-    options={options}
+    options={filteredOptions.length === 0 ? noResults : filteredOptions}
     placeholder="Select your fruit"
     style={style}
-    value={state.value1}
-    onChange={value1 => {
-      console.log('New Value:', value1);
-      setState({ value1 });
+    value={state.fieldValue}
+    onChange={fieldValue => {
+      console.log('New Value:', fieldValue);
+      setState({ fieldValue });
     }}
@@ -118,24 +138,29 @@ onBlur={() => {
 ```jsx
-const optionsWithGroups = [{
-  label: "Spices",
-  value: [
-    {label: "Cinnamon", value: "cinnamon"},
-    {label: "Coriander", value: "coriander"},
-    {label: "Cumin", value: "cumin"},
-  ]
-}, {
-  label: "Oil",
-  value: "oil"
-}, {
-  label: "Vinegar",
-  value: "vinegar"
-}, {
-  label: "Herbs",
-  disabled: true,
-  value: [
-    {label: "Parsley", value: "parsley"},
-    {label: "Sage", value: "sage"},
-    {label: "Rosemary", value: "rosemary"},
-  ]
-}];
+const optionsWithGroups = [
+  {
+    label: 'Spices',
+    value: [
+      { label: 'Cinnamon', value: 'cinnamon' },
+      { label: 'Coriander', value: 'coriander' },
+      { label: 'Cumin', value: 'cumin' },
+    ],
+  },
+  {
+    label: 'Oil',
+    value: 'oil',
+  },
+  {
+    label: 'Vinegar',
+    value: 'vinegar',
+  },
+  {
+    label: 'Herbs',
+    disabled: true,
+    value: [
+      { label: 'Parsley', value: 'parsley' },
+      { label: 'Sage', value: 'sage' },
+      { label: 'Rosemary', value: 'rosemary' },
+    ],
+  },
+];
 
@@ -147,3 +172,3 @@ <Select
   onChange={value => {
-    setState({value});
+    setState({ value });
   }}
@@ -237,2 +262,3 @@ />;
 ## Option properties
+
 ### Disabled options
@@ -239,0 +265,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1645891

increased by0.14%

Lines of code

26876

increased by0.07%

No dependency changes