@awell-health/ui-library 0.1.38 → 0.1.40

package/dist/index.js

@@ -33712,7 +33712,7 @@ Check the top-level render call using <` + t + ">.");
     };
     var Select = function (_a) {
       var _b;
-      var onChange = _a.onChange,id = _a.id,labels = _a.labels,type = _a.type,mandatory = _a.mandatory,options = _a.options,_c = _a.optionsShown,optionsShown = _c === void 0 ? 4 : _c,_d = _a.showCount,showCount = _d === void 0 ? false : _d,_e = _a.displayMaxLength,displayMaxLength = _e === void 0 ? 15 : _e,value = _a.value,_f = _a.filtering,filtering = _f === void 0 ? false : _f,props = __rest(_a, ["onChange", "id", "labels", "type", "mandatory", "options", "optionsShown", "showCount", "displayMaxLength", "value", "filtering"]);
+      var onChange = _a.onChange,onSearch = _a.onSearch,id = _a.id,labels = _a.labels,type = _a.type,mandatory = _a.mandatory,options = _a.options,_c = _a.optionsShown,optionsShown = _c === void 0 ? 4 : _c,_d = _a.showCount,showCount = _d === void 0 ? false : _d,_e = _a.displayMaxLength,displayMaxLength = _e === void 0 ? 15 : _e,value = _a.value,_f = _a.filtering,filtering = _f === void 0 ? false : _f,props = __rest(_a, ["onChange", "onSearch", "id", "labels", "type", "mandatory", "options", "optionsShown", "showCount", "displayMaxLength", "value", "filtering"]);
       var _g = React.useState(false),isOpen = _g[0],setIsOpen = _g[1];
       var _h = React.useState(options),filteredOptions = _h[0],setFilteredOptions = _h[1];
       var _j = React.useState(''),searchValue = _j[0],setSearchValue = _j[1];
@@ -33735,6 +33735,11 @@ Check the top-level render call using <` + t + ">.");
       var selectWrapperRef = React.useRef(null);
       var handleInputChange = function (event) {
         var inputText = event.target.value.toLowerCase();
+        if (!lodash.exports.isNil(onSearch)) {
+          setSearchValue(inputText);
+          onSearch(inputText);
+          return;
+        }
         if (inputText === '') {
           setSearchValue('');
           setFilteredOptions(options);
@@ -33763,6 +33768,11 @@ Check the top-level render call using <` + t + ">.");
           document.removeEventListener('mousedown', handleClickOutside);
         };
       }, [isOpen, handleClickOutside]);
+      React.useEffect(function () {
+        if (!lodash.exports.isNil(onSearch)) {
+          setFilteredOptions(options);
+        }
+      }, [options]);
       var toggleDropdown = React.useCallback(function () {
         setIsOpen(!isOpen);
       }, [isOpen]);
@@ -33853,7 +33863,10 @@ Check the top-level render call using <` + t + ">.");
         setSearchValue('');
         setFilteredOptions(options);
       }, [options]);
-      return jsxRuntime.exports.jsxs("div", __assign({ className: classes$f.select_wrapper, ref: selectWrapperRef }, { children: [(labels === null || labels === void 0 ? void 0 : labels.questionLabel) !== undefined && jsxRuntime.exports.jsx(QuestionLabel, { htmlFor: id, label: labels.questionLabel, mandatory: mandatory }), jsxRuntime.exports.jsxs("div", __assign({ className: classes$f.select_input_wrapper, onClick: toggleDropdown }, { children: [jsxRuntime.exports.jsx("input", __assign({}, props, { type: "text", id: id, value: getDisplayValue(), placeholder: filtering ? (_b = labels === null || labels === void 0 ? void 0 : labels.searchPlaceholder) !== null && _b !== void 0 ? _b : '' : '', className: "".concat(classes$f.select_input, " ").concat(filtering ? '' : classes$f.pointer), "data-testid": "input-".concat(id), onChange: filtering ? handleInputChange : function () {return null;}, onClick: filtering ? handleResetSearch : function () {return null;}, readOnly: !filtering, onKeyUp: handleKeyUpOnInput, dir: "ltr" })), type === 'multiple' && selected.length > 0 && showCount && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.badge }, { children: selected.length })), jsxRuntime.exports.jsx("div", { className: "".concat(classes$f.chevron, " ").concat(isOpen ? "".concat(classes$f.open) : '') }), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(isOpen ? classes$f.dropdown_open : classes$f.dropdown, " ").concat(options.length > optionsShown ? classes$f.dropdown_scroll : ''), style: { maxHeight: "".concat(optionsShown * 50, "px") }, role: "listbox" }, { children: [filteredOptions.length === 0 && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.no_options }, { children: "No options found" })), filteredOptions.map(function (option) {return jsxRuntime.exports.jsxs("div", __assign({ className: classes$f.option, id: "option-".concat(option.value), onClick: function (event) {return handleSelect(event, option);}, onKeyUp: function (e) {return handleKeyUpOnOption(e, option);}, onKeyDown: function (e) {return handleKeyDownOnOption(e, option);}, role: "button", tabIndex: 0 }, { children: [option.label, type === 'multiple' && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.checkbox }, { children: jsxRuntime.exports.jsx("input", { type: "checkbox", id: "checkbox-".concat(option.value), checked: selected === null || selected === void 0 ? void 0 : selected.some(function (item) {return item.value === option.value;}), readOnly: true, tabIndex: -1 }) }))] }), option.value);})] }))] })), (labels === null || labels === void 0 ? void 0 : labels.customError) && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.error }, { children: labels.customError }))] }));
+      return jsxRuntime.exports.jsxs("div", __assign({ className: classes$f.select_wrapper, ref: selectWrapperRef }, { children: [(labels === null || labels === void 0 ? void 0 : labels.questionLabel) !== undefined && jsxRuntime.exports.jsx(QuestionLabel, { htmlFor: id, label: labels.questionLabel, mandatory: mandatory }), jsxRuntime.exports.jsxs("div", __assign({ className: classes$f.select_input_wrapper, onClick: toggleDropdown }, { children: [jsxRuntime.exports.jsx("input", __assign({}, props, { type: "text", id: id, value: getDisplayValue(), placeholder: filtering ? (_b = labels === null || labels === void 0 ? void 0 : labels.searchPlaceholder) !== null && _b !== void 0 ? _b : '' : '', className: "".concat(classes$f.select_input, " ").concat(filtering ? '' : classes$f.pointer), "data-testid": "input-".concat(id), onChange: filtering ? handleInputChange : function () {return null;}, onClick: filtering ? handleResetSearch : function () {return null;}, readOnly: !filtering, onKeyUp: handleKeyUpOnInput, dir: "ltr" })), type === 'multiple' && selected.length > 0 && showCount && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.badge }, { children: selected.length })), jsxRuntime.exports.jsx("div", { className: "".concat(classes$f.chevron, " ").concat(isOpen ? "".concat(classes$f.open) : '') }), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(isOpen ? classes$f.dropdown_open : classes$f.dropdown, " ").concat(options.length > optionsShown ? classes$f.dropdown_scroll : ''), style: { maxHeight: "".concat(optionsShown * 50, "px") }, role: "listbox" }, { children: [filteredOptions.length === 0 && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.no_options }, { children: "No options found" })), filteredOptions.map(function (option) {
+              var _a;
+              return jsxRuntime.exports.jsxs("div", __assign({ className: classes$f.option, id: "option-".concat(option.value), onClick: function (event) {return handleSelect(event, option);}, onKeyUp: function (e) {return handleKeyUpOnOption(e, option);}, onKeyDown: function (e) {return handleKeyDownOnOption(e, option);}, role: "button", tabIndex: 0 }, { children: [option.label, type === 'multiple' && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.checkbox }, { children: jsxRuntime.exports.jsx("input", { type: "checkbox", id: "checkbox-".concat(option.value), checked: selected === null || selected === void 0 ? void 0 : selected.some(function (item) {return item.value === option.value;}), readOnly: true, tabIndex: -1 }) }))] }), (_a = option.id) !== null && _a !== void 0 ? _a : option.value);
+            })] }))] })), (labels === null || labels === void 0 ? void 0 : labels.customError) && jsxRuntime.exports.jsx("div", __assign({ className: classes$f.error }, { children: labels.customError }))] }));
     };
 
     var getHexColorFromString = function (string) {
@@ -50551,6 +50564,7 @@ Check the top-level render call using <` + t + ">.");
     exports.RangeInput = RangeInput;
     exports.RichTextViewer = RichTextViewer;
     exports.ScrollIndicator = ScrollIndicator;
+    exports.Select = Select;
     exports.SingleChoiceQuestion = SingleChoiceQuestion;
     exports.SubHeading = SubHeading;
     exports.Text = Text;

package/dist/types/atoms/select/Select.d.ts

@@ -8,7 +8,7 @@ export interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     mandatory?: boolean;
     options: Array<Option>;
     optionsShown?: number;
-    value: Array<Option> | number | undefined;
+    value: Array<Option> | number | string | undefined;
     labels: {
         questionLabel?: string;
         searchPlaceholder?: string;
@@ -18,5 +18,6 @@ export interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     showCount?: boolean;
     displayMaxLength?: number | null;
     filtering?: boolean;
+    onSearch?: (searchValue: string) => void;
 }
-export declare const Select: ({ onChange, id, labels, type, mandatory, options, optionsShown, showCount, displayMaxLength, value, filtering, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ onChange, onSearch, id, labels, type, mandatory, options, optionsShown, showCount, displayMaxLength, value, filtering, ...props }: SelectProps) => JSX.Element;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, CheckboxButton, DatePicker, Description, InputField, QuestionLabel, Logo, LongTextField, RadioButton, RangeInput, RichTextViewer, HeadingMain, HeadingSecondary, HeadingTertiary, SubHeading, Heading5, Heading6, Text, InlineText, ExternalLink, InnerText, CircularSpinner, HorizontalSpinner, ThemeProvider, ScrollIndicator, Modal, CalDotComScheduling, type CalDotComBookingSuccessfulFunction, ProgressIndicator, TypingCaret, WithTypingCaret, } from './atoms';
+export { Button, CheckboxButton, DatePicker, Description, InputField, QuestionLabel, Logo, LongTextField, RadioButton, RangeInput, RichTextViewer, HeadingMain, HeadingSecondary, HeadingTertiary, SubHeading, Heading5, Heading6, Text, InlineText, ExternalLink, InnerText, CircularSpinner, HorizontalSpinner, ThemeProvider, ScrollIndicator, Modal, CalDotComScheduling, type CalDotComBookingSuccessfulFunction, ProgressIndicator, TypingCaret, WithTypingCaret, Select, } from './atoms';
 export { MultipleChoiceQuestion, Navbar, Question, SingleChoiceQuestion, AttachmentList, } from './molecules';
 export { Checklist, ConversationalForm, TraditionalForm, WizardForm, Message, HostedPageLayout, CloseButton, CloudinaryUpload, CloudinarySingleFileUpload, } from './hostedPages';
 export { useClickOutsideNotifier, useScrollHint, useConversationalForm, useTraditionalForm, } from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "private": false,
   "description": "UI components to integrate with Awell Health",
   "repository": {