react-datalist-input - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/index.d.ts

@@ -151,2 +151,3 @@ import type { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, ReactNode, CSSProperties, RefObject, MutableRefObject, SetStateAction, Dispatch } from 'react';
     listboxOptionProps?: ListboxOptionProps;
+    highlightProps?: HighlightProps;
     isExpandedClassName?: string;
@@ -153,0 +154,0 @@ isCollapsedClassName?: string;

dist/index.es.js

@@ -305,3 +305,3 @@ import React, { createContext, forwardRef, useContext, useMemo, useRef, useState, useEffect, useId, useDeferredValue, useCallback } from 'react';
             children.substring(0, index),
-            as === 'mark' ? (React.createElement("mark", __assign({}, props), children.substring(index, index + inputLength))) : (React.createElement("span", __assign({}, props), children.substring(index, inputLength))),
+            as === 'mark' ? (React.createElement("mark", __assign({}, props), children.substring(index, index + inputLength))) : (React.createElement("span", __assign({}, props), children.substring(index, index + inputLength))),
             children.substring(index + inputLength, children.length)));
@@ -437,3 +437,3 @@ }, [currentInput, children]);
 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 ? [includesValueFilter] : _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 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 ? [includesValueFilter] : _d, inputProps = _a.inputProps, labelProps = _a.labelProps, listboxOptionProps = _a.listboxOptionProps, listboxProps = _a.listboxProps, highlightProps = _a.highlightProps, _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", "highlightProps", "isExpandedClassName", "isCollapsedClassName", "isExpandedStyle", "isCollapsedStyle"]);
     var _g = useStateRef(isExpanded), internalIsExpanded = _g[0], setInternalIsExpanded = _g[1], isExpandedRef = _g[2];
@@ -482,3 +482,3 @@ var _h = useInternalValue(value, setValue), internalValue = _h[0], setInternalValue = _h[1];
             ((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) }),
-                React.createElement(Highlight, { currentInput: internalValue }, item.node || item.value))); }))))));
+                React.createElement(Highlight, __assign({}, highlightProps, { currentInput: internalValue }), item.node || item.value))); }))))));
 });
@@ -485,0 +485,0 @@ DatalistInput.displayName = 'DatalistInput';

dist/index.js

@@ -313,3 +313,3 @@ 'use strict';
             children.substring(0, index),
-            as === 'mark' ? (React__default["default"].createElement("mark", __assign({}, props), children.substring(index, index + inputLength))) : (React__default["default"].createElement("span", __assign({}, props), children.substring(index, inputLength))),
+            as === 'mark' ? (React__default["default"].createElement("mark", __assign({}, props), children.substring(index, index + inputLength))) : (React__default["default"].createElement("span", __assign({}, props), children.substring(index, index + inputLength))),
             children.substring(index + inputLength, children.length)));
@@ -445,3 +445,3 @@ }, [currentInput, children]);
 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 ? [includesValueFilter] : _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 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 ? [includesValueFilter] : _d, inputProps = _a.inputProps, labelProps = _a.labelProps, listboxOptionProps = _a.listboxOptionProps, listboxProps = _a.listboxProps, highlightProps = _a.highlightProps, _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", "highlightProps", "isExpandedClassName", "isCollapsedClassName", "isExpandedStyle", "isCollapsedStyle"]);
     var _g = useStateRef(isExpanded), internalIsExpanded = _g[0], setInternalIsExpanded = _g[1], isExpandedRef = _g[2];
@@ -490,3 +490,3 @@ var _h = useInternalValue(value, setValue), internalValue = _h[0], setInternalValue = _h[1];
             ((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) }),
-                React__default["default"].createElement(Highlight, { currentInput: internalValue }, item.node || item.value))); }))))));
+                React__default["default"].createElement(Highlight, __assign({}, highlightProps, { currentInput: internalValue }), item.node || item.value))); }))))));
 });
@@ -493,0 +493,0 @@ DatalistInput.displayName = 'DatalistInput';

package.json

 {
   "name": "react-datalist-input",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "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

@@ -469,2 +469,3 @@ ![Simple demo of DatalistInput](/media/demo.gif)
 - `listboxOptionProps`: An object of props to pass to the listbox option elements.
+- `highlightProps`: An object of props to style the highlighted text.
 - `isExpandedClassName`: The class name applied to the listbox element if it is expanded.
@@ -471,0 +472,0 @@ - `isCollapsedClassName`: The class name applied to the listbox element if it is collapsed.

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181952

increased by0.32%

Lines of code

1210

increased by0.08%

Number of lines in readme file

511

increased by0.2%

Number of low supply chain risk alerts

2

decreased by-50%

No dependency changes