react-datalist-input - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

dist/index.d.ts

@@ -120,3 +120,3 @@ import type { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, ReactNode, CSSProperties, RefObject, MutableRefObject, SetStateAction, Dispatch } from 'react';
 declare const useFilters: (items: Array<Item>, value: ComboboxInputProps['value'], filters: Array<Filter>) => [Array<Item>, MutableRefObject<Array<Item>>];
-declare type LabelProps = {
+declare type LabelOptionProps = {
     showLabel?: false;
@@ -128,3 +128,4 @@ label: string;
 };
-declare type DatalistInputProps = LabelProps & Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+declare type LabelProps = HTMLAttributes<HTMLLabelElement>;
+declare type DatalistInputProps = LabelOptionProps & Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
     items: Array<Item>;
@@ -140,2 +141,3 @@ selectedItem?: Item;
     inputProps?: ComboboxInputProps;
+    labelProps?: LabelProps;
     listboxProps?: ListboxProps;
@@ -142,0 +144,0 @@ listboxOptionProps?: ListboxOptionProps;

dist/index.es.js

@@ -425,3 +425,3 @@ import React, { createContext, forwardRef, useContext, useMemo, useRef, useState, useEffect, useId, useDeferredValue, useCallback } from 'react';
 var DatalistInput = forwardRef(function (_a, forwardedRef) {
-    var label = _a.label, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b, items = _a.items, selectedItem = _a.selectedItem, value = _a.value, setValue = _a.setValue, onSelect = _a.onSelect, placeholder = _a.placeholder, _c = _a.isExpanded, isExpanded = _c === void 0 ? DEFAULT_IS_EXPANDED : _c, setIsExpanded = _a.setIsExpanded, _d = _a.filters, filters = _d === void 0 ? [startsWithValueFilter] : _d, inputProps = _a.inputProps, listboxOptionProps = _a.listboxOptionProps, listboxProps = _a.listboxProps, _e = _a.isExpandedClassName, isExpandedClassName = _e === void 0 ? '' : _e, _f = _a.isCollapsedClassName, isCollapsedClassName = _f === void 0 ? '' : _f, isExpandedStyle = _a.isExpandedStyle, isCollapsedStyle = _a.isCollapsedStyle, props = __rest(_a, ["label", "showLabel", "items", "selectedItem", "value", "setValue", "onSelect", "placeholder", "isExpanded", "setIsExpanded", "filters", "inputProps", "listboxOptionProps", "listboxProps", "isExpandedClassName", "isCollapsedClassName", "isExpandedStyle", "isCollapsedStyle"]);
+    var label = _a.label, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b, items = _a.items, selectedItem = _a.selectedItem, value = _a.value, setValue = _a.setValue, onSelect = _a.onSelect, placeholder = _a.placeholder, _c = _a.isExpanded, isExpanded = _c === void 0 ? DEFAULT_IS_EXPANDED : _c, setIsExpanded = _a.setIsExpanded, _d = _a.filters, filters = _d === void 0 ? [startsWithValueFilter] : _d, inputProps = _a.inputProps, labelProps = _a.labelProps, listboxOptionProps = _a.listboxOptionProps, listboxProps = _a.listboxProps, _e = _a.isExpandedClassName, isExpandedClassName = _e === void 0 ? '' : _e, _f = _a.isCollapsedClassName, isCollapsedClassName = _f === void 0 ? '' : _f, isExpandedStyle = _a.isExpandedStyle, isCollapsedStyle = _a.isCollapsedStyle, props = __rest(_a, ["label", "showLabel", "items", "selectedItem", "value", "setValue", "onSelect", "placeholder", "isExpanded", "setIsExpanded", "filters", "inputProps", "labelProps", "listboxOptionProps", "listboxProps", "isExpandedClassName", "isCollapsedClassName", "isExpandedStyle", "isCollapsedStyle"]);
     var _g = useStateRef(isExpanded), internalIsExpanded = _g[0], setInternalIsExpanded = _g[1], isExpandedRef = _g[2];
@@ -467,3 +467,3 @@ var _h = useInternalValue(value, setValue), internalValue = _h[0], setInternalValue = _h[1];
         React.createElement(Combobox, { listboxId: listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.id, selectedItemId: internalSelectedItem === null || internalSelectedItem === void 0 ? void 0 : internalSelectedItem.id, isExpanded: internalIsExpanded },
-            showLabel && React.createElement("label", { htmlFor: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) || internalTextboxId }, label),
+            showLabel && (React.createElement("label", __assign({}, labelProps, { className: "react-datalist-input__label ".concat(labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), htmlFor: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) || internalTextboxId }), label)),
             React.createElement(ComboboxInput, __assign({}, inputProps, { ref: comboboxInputRef, id: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) || internalTextboxId, placeholder: placeholder, value: internalValue, onClick: handleWith(expandOnFocus, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick), onFocus: handleWith(expandOnFocus, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus), onChange: handleWith(handleChange, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange), onKeyDown: handleWith(handleKeyDownOnInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown), "aria-label": !showLabel && typeof label === 'string' ? label : undefined, className: "react-datalist-input__textbox ".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })),
@@ -470,0 +470,0 @@ ((filteredItems.length && internalIsExpanded) || isCollapsedClassName || isCollapsedStyle) && (React.createElement(Listbox, __assign({}, listboxProps, { ref: listboxRef, "aria-hidden": internalIsExpanded, className: "react-datalist-input__listbox ".concat(internalIsExpanded ? isExpandedClassName : isCollapsedClassName, " ").concat((listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.className) || ''), style: __assign(__assign({}, (internalIsExpanded ? isExpandedStyle : isCollapsedStyle)), listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.style) }), filteredItems.map(function (item) { return (React.createElement(ListboxOption, __assign({}, listboxOptionProps, { "aria-label": item.label || item.value, key: item.id, id: item.id, tabIndex: -1, onClick: handleWith(function () { return handleSelect(item); }, listboxOptionProps === null || listboxOptionProps === void 0 ? void 0 : listboxOptionProps.onClick), onKeyDown: handleWith(handleKeyDownOnListboxOption, listboxOptionProps === null || listboxOptionProps === void 0 ? void 0 : listboxOptionProps.onKeyDown), className: "react-datalist-input__listbox-option ".concat(listboxOptionProps === null || listboxOptionProps === void 0 ? void 0 : listboxOptionProps.className) }),

dist/index.js

@@ -433,3 +433,3 @@ 'use strict';
 var DatalistInput = React.forwardRef(function (_a, forwardedRef) {
-    var label = _a.label, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b, items = _a.items, selectedItem = _a.selectedItem, value = _a.value, setValue = _a.setValue, onSelect = _a.onSelect, placeholder = _a.placeholder, _c = _a.isExpanded, isExpanded = _c === void 0 ? DEFAULT_IS_EXPANDED : _c, setIsExpanded = _a.setIsExpanded, _d = _a.filters, filters = _d === void 0 ? [startsWithValueFilter] : _d, inputProps = _a.inputProps, listboxOptionProps = _a.listboxOptionProps, listboxProps = _a.listboxProps, _e = _a.isExpandedClassName, isExpandedClassName = _e === void 0 ? '' : _e, _f = _a.isCollapsedClassName, isCollapsedClassName = _f === void 0 ? '' : _f, isExpandedStyle = _a.isExpandedStyle, isCollapsedStyle = _a.isCollapsedStyle, props = __rest(_a, ["label", "showLabel", "items", "selectedItem", "value", "setValue", "onSelect", "placeholder", "isExpanded", "setIsExpanded", "filters", "inputProps", "listboxOptionProps", "listboxProps", "isExpandedClassName", "isCollapsedClassName", "isExpandedStyle", "isCollapsedStyle"]);
+    var label = _a.label, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b, items = _a.items, selectedItem = _a.selectedItem, value = _a.value, setValue = _a.setValue, onSelect = _a.onSelect, placeholder = _a.placeholder, _c = _a.isExpanded, isExpanded = _c === void 0 ? DEFAULT_IS_EXPANDED : _c, setIsExpanded = _a.setIsExpanded, _d = _a.filters, filters = _d === void 0 ? [startsWithValueFilter] : _d, inputProps = _a.inputProps, labelProps = _a.labelProps, listboxOptionProps = _a.listboxOptionProps, listboxProps = _a.listboxProps, _e = _a.isExpandedClassName, isExpandedClassName = _e === void 0 ? '' : _e, _f = _a.isCollapsedClassName, isCollapsedClassName = _f === void 0 ? '' : _f, isExpandedStyle = _a.isExpandedStyle, isCollapsedStyle = _a.isCollapsedStyle, props = __rest(_a, ["label", "showLabel", "items", "selectedItem", "value", "setValue", "onSelect", "placeholder", "isExpanded", "setIsExpanded", "filters", "inputProps", "labelProps", "listboxOptionProps", "listboxProps", "isExpandedClassName", "isCollapsedClassName", "isExpandedStyle", "isCollapsedStyle"]);
     var _g = useStateRef(isExpanded), internalIsExpanded = _g[0], setInternalIsExpanded = _g[1], isExpandedRef = _g[2];
@@ -475,3 +475,3 @@ var _h = useInternalValue(value, setValue), internalValue = _h[0], setInternalValue = _h[1];
         React__default["default"].createElement(Combobox, { listboxId: listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.id, selectedItemId: internalSelectedItem === null || internalSelectedItem === void 0 ? void 0 : internalSelectedItem.id, isExpanded: internalIsExpanded },
-            showLabel && React__default["default"].createElement("label", { htmlFor: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) || internalTextboxId }, label),
+            showLabel && (React__default["default"].createElement("label", __assign({}, labelProps, { className: "react-datalist-input__label ".concat(labelProps === null || labelProps === void 0 ? void 0 : labelProps.className), htmlFor: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) || internalTextboxId }), label)),
             React__default["default"].createElement(ComboboxInput, __assign({}, inputProps, { ref: comboboxInputRef, id: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) || internalTextboxId, placeholder: placeholder, value: internalValue, onClick: handleWith(expandOnFocus, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick), onFocus: handleWith(expandOnFocus, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus), onChange: handleWith(handleChange, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange), onKeyDown: handleWith(handleKeyDownOnInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown), "aria-label": !showLabel && typeof label === 'string' ? label : undefined, className: "react-datalist-input__textbox ".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })),
@@ -478,0 +478,0 @@ ((filteredItems.length && internalIsExpanded) || isCollapsedClassName || isCollapsedStyle) && (React__default["default"].createElement(Listbox, __assign({}, listboxProps, { ref: listboxRef, "aria-hidden": internalIsExpanded, className: "react-datalist-input__listbox ".concat(internalIsExpanded ? isExpandedClassName : isCollapsedClassName, " ").concat((listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.className) || ''), style: __assign(__assign({}, (internalIsExpanded ? isExpandedStyle : isCollapsedStyle)), listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.style) }), filteredItems.map(function (item) { return (React__default["default"].createElement(ListboxOption, __assign({}, listboxOptionProps, { "aria-label": item.label || item.value, key: item.id, id: item.id, tabIndex: -1, onClick: handleWith(function () { return handleSelect(item); }, listboxOptionProps === null || listboxOptionProps === void 0 ? void 0 : listboxOptionProps.onClick), onKeyDown: handleWith(handleKeyDownOnListboxOption, listboxOptionProps === null || listboxOptionProps === void 0 ? void 0 : listboxOptionProps.onKeyDown), className: "react-datalist-input__listbox-option ".concat(listboxOptionProps === null || listboxOptionProps === void 0 ? void 0 : listboxOptionProps.className) }),

package.json

 {
   "name": "react-datalist-input",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "react-datalist-input provides a React datalist/combobox component called DatalistInput. The component contains an input field with a dropdown menu of suggestions based on the current input.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -115,3 +115,3 @@ ![Simple demo of DatalistInput](/media/demo.gif)
 
-**Note:** Be aware that version 3.0.0 includes breaking changes. Version 3.0.0 deprecates some properties from the DatalistInput component but all but one use case still be implemented in the new version (in a more intuitive way using the `useComboboxControls` hook). The only property that has been fully depcreated is `requiredInputLength`. Please create an [Issue](https://github.com/andrelandgraf/react-datalist-input/issues) if you need it!
+**Note:** Be aware that version 3.0.0 includes breaking changes. Version 3.0.0 deprecates some properties from the DatalistInput component such as `requiredInputLength`. Instead of using custom properties for different use cases, you have now full control using the `useComboboxControls` hook and the `filters` property. Use plain React state and callbacks to control every aspect of the component's behavior!
 
@@ -184,3 +184,3 @@ #### Version 2.2.0
         // node: option.name, // use a custom ReactNode to display the option
-        ...option, // pass along any other properties, will be available in your onSelect callback
+        ...option, // pass along any other properties to access in your onSelect callback
       })),
@@ -204,7 +204,16 @@ [yourItems],
 - `react-datalist-input__textbox`: For the input element.
+- `react-datalist-input__label`: For the label element.
 - `react-datalist-input__listbox`: For the dropdown list.
 - `react-datalist-input__listbox-option`: For each option in the dropdown list.
 
-**Note:** To get up and running quickly, just copy-paste the default stylesheet and adapt the pieces you need.
+**Note:** Use the focus and hover states of `react-datalist-input__listbox-option` to show the user some visual feedback.
 
+```css
+.react-datalist-input__listbox-option:focus {
+  background-color: gray;
+}
+```
+
+**Tip:** To get up and running quickly, just copy-paste the default stylesheet and adapt the pieces you need.
+
 #### Tailwind CSS / Utility Classes
@@ -216,2 +225,3 @@
 - `inputProps["className"]`: For the input element.
+- `labelProps["className"]`: For the label element.
 - `listboxProps["className"]`: For the dropdown list.
@@ -355,2 +365,3 @@ - `listboxOptionProps["className"]`: For each option in the dropdown list.
 - `listboxProps`: An object of props to pass to the listbox element.
+- `labelProps`: An object of props to pass to the label element.
 - `listboxOptionProps`: An object of props to pass to the listbox option elements.
@@ -357,0 +368,0 @@ - `isExpandedClassName`: The class name applied to the listbox element if it is expanded.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

173515

increased by1.1%

Lines of code

1176

increased by0.34%

Number of lines in readme file

403

increased by2.81%

No dependency changes