react-datalist-input - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/index.d.ts

@@ -14,3 +14,2 @@ import type { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, ReactNode, CSSProperties, RefObject, MutableRefObject, SetStateAction, Dispatch } from 'react';
  * Pass the properties down to the DataListInput component.
- * The isExpandedRef property can be ignored. It is for advanced use cases only.
  */
@@ -25,3 +24,2 @@ declare const useComboboxControls: ({ initialValue, ...params }: {
     setValue: Dispatch<SetStateAction<string>>;
-    isExpandedRef: MutableRefObject<boolean>;
 };
@@ -28,0 +26,0 @@ /**

dist/index.es.js

@@ -98,3 +98,4 @@ import React, { createContext, forwardRef, useContext, useMemo, useRef, useState, useEffect, useId, useDeferredValue, useCallback } from 'react';
     return function (e) {
-        return fns.forEach(function (fn) { return fn && fn(e); });
+        console.log('executing handleWith', fns);
+        fns.forEach(function (fn) { return fn && fn(e); });
     };
@@ -112,7 +113,6 @@ };
  * Pass the properties down to the DataListInput component.
- * The isExpandedRef property can be ignored. It is for advanced use cases only.
  */
 var useComboboxControls = function (_a) {
     var _b = _a.initialValue, initialValue = _b === void 0 ? '' : _b, params = __rest(_a, ["initialValue"]);
-    var _c = useStateRef(params.isExpanded), isExpanded = _c[0], setIsExpanded = _c[1], isExpandedRef = _c[2];
+    var _c = useStateRef(params.isExpanded), isExpanded = _c[0], setIsExpanded = _c[1];
     var _d = useState(initialValue), value = _d[0], setValue = _d[1];
@@ -124,3 +124,2 @@ return {
         setValue: setValue,
-        isExpandedRef: isExpandedRef,
     };
@@ -423,7 +422,2 @@ };
 };
-var getTextboxTitle = function (isExpanded, length, title) {
-    var formattedTitle = title ? (title[title.length - 1] === '.' ? title : title + '.') : undefined;
-    var ariaContent = "Listbox is ".concat(isExpanded ? 'expanded' : 'closed', ". ").concat(length, " ").concat(length === 1 ? 'option matches' : 'options match', " your input. Use ArrowDown to navigate between options.");
-    return formattedTitle ? "".concat(formattedTitle, " ").concat(ariaContent) : ariaContent;
-};
 /**
@@ -479,3 +473,3 @@ * DatalistInput implements all lower-level components for you and provides a simple API for controlling the combobox.
             showLabel && React.createElement("label", { 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, title: getTextboxTitle(internalIsExpanded, filteredItems.length, inputProps === null || inputProps === void 0 ? void 0 : inputProps.title), className: "react-datalist-input__textbox ".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })),
+            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) })),
             ((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) }),
@@ -482,0 +476,0 @@ React.createElement(Highlight, { currentInput: internalValue }, item.node || item.value))); }))))));

dist/index.js

@@ -106,3 +106,4 @@ 'use strict';
     return function (e) {
-        return fns.forEach(function (fn) { return fn && fn(e); });
+        console.log('executing handleWith', fns);
+        fns.forEach(function (fn) { return fn && fn(e); });
     };
@@ -120,7 +121,6 @@ };
  * Pass the properties down to the DataListInput component.
- * The isExpandedRef property can be ignored. It is for advanced use cases only.
  */
 var useComboboxControls = function (_a) {
     var _b = _a.initialValue, initialValue = _b === void 0 ? '' : _b, params = __rest(_a, ["initialValue"]);
-    var _c = useStateRef(params.isExpanded), isExpanded = _c[0], setIsExpanded = _c[1], isExpandedRef = _c[2];
+    var _c = useStateRef(params.isExpanded), isExpanded = _c[0], setIsExpanded = _c[1];
     var _d = React.useState(initialValue), value = _d[0], setValue = _d[1];
@@ -132,3 +132,2 @@ return {
         setValue: setValue,
-        isExpandedRef: isExpandedRef,
     };
@@ -431,7 +430,2 @@ };
 };
-var getTextboxTitle = function (isExpanded, length, title) {
-    var formattedTitle = title ? (title[title.length - 1] === '.' ? title : title + '.') : undefined;
-    var ariaContent = "Listbox is ".concat(isExpanded ? 'expanded' : 'closed', ". ").concat(length, " ").concat(length === 1 ? 'option matches' : 'options match', " your input. Use ArrowDown to navigate between options.");
-    return formattedTitle ? "".concat(formattedTitle, " ").concat(ariaContent) : ariaContent;
-};
 /**
@@ -487,3 +481,3 @@ * DatalistInput implements all lower-level components for you and provides a simple API for controlling the combobox.
             showLabel && React__default["default"].createElement("label", { 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, title: getTextboxTitle(internalIsExpanded, filteredItems.length, inputProps === null || inputProps === void 0 ? void 0 : inputProps.title), className: "react-datalist-input__textbox ".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })),
+            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) })),
             ((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) }),
@@ -490,0 +484,0 @@ React__default["default"].createElement(Highlight, { currentInput: internalValue }, item.node || item.value))); }))))));

package.json

 {
   "name": "react-datalist-input",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "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.",
@@ -82,4 +82,6 @@ "main": "dist/index.js",
     "prepublish": "npm run lint && npm run test && npm run build",
-    "publish:package": "npm run prepublish && npm publish"
+    "publish:package": "npm run prepublish && npm publish",
+    "dev:css": "sass --watch src/styles.scss dist/styles.css",
+    "dev": "rollup -c -w"
   }
 }

README.md

@@ -11,3 +11,3 @@ ![Simple demo of DatalistInput](/media/demo.gif)
 import DatalistInput from 'react-datalist-input';
-import 'react-datalist-input/dist/style.css';
+import 'react-datalist-input/dist/styles.css';
 
@@ -151,3 +151,3 @@ const YourComponent = () => (
 // Tntegrate the css file if you want to use the default styling
-import 'react-datalist-input/dist/style.css';
+import 'react-datalist-input/dist/styles.css';
 
@@ -197,3 +197,3 @@ const options = [
 
-For simple use cases, you can use the default styling provided by this package: `import 'react-datalist-input/dist/style.css'`.
+For simple use cases, you can use the default styling provided by this package: `import 'react-datalist-input/dist/styles.css'`.
 
@@ -200,0 +200,0 @@ However, you can also customize the styling by providing your own CSS! Instead of importing the default stylesheet, create your own one. The following classes are available:

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

Worsened metrics

Total package byte prevSize

170720

decreased by-2.42%

Lines of code

1176

decreased by-1.18%

No dependency changes