@bolttech/molecules-dropdown 0.13.0 → 0.15.0

package/index.cjs

@@ -9,6 +9,7 @@ var atomsSelect = require('@bolttech/atoms-select');
 var atomsIcon = require('@bolttech/atoms-icon');
 var atomsInput = require('@bolttech/atoms-input');
 var styled = require('styled-components');
+var uiUtils = require('@bolttech/ui-utils');
 var reactDom = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1652,6 +1653,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -2414,33 +2427,35 @@ const DropdownOptionsContainer = /*#__PURE__*/styled__default["default"].div.wit
   componentId: "sc-3wugi4-6"
 })(["position:absolute;inset:0;top:100%;"]);
 
-const ReusableDropdownComponent = ({
-  id,
-  dataTestId,
-  label,
-  variant: _variant = 'grey',
-  required,
-  inputValue,
-  inputLabel,
-  disabled,
-  errorMessage,
-  onChangeInputValue,
-  onChangeInputLabel,
-  setShowSelectComponent,
-  showSelectComponent,
-  setSelectedOptionOnInputValue,
-  inputRef,
-  placeholder,
-  onBlur,
-  onFocus
-}) => {
+const ReusableDropdownComponent = _a => {
+  var {
+      id,
+      dataTestId,
+      label,
+      variant = 'grey',
+      required,
+      inputValue,
+      inputLabel,
+      disabled,
+      errorMessage,
+      onChangeInputValue,
+      onChangeInputLabel,
+      setShowSelectComponent,
+      showSelectComponent,
+      setSelectedOptionOnInputValue,
+      inputRef,
+      placeholder,
+      onBlur,
+      onFocus
+    } = _a,
+    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "inputRef", "placeholder", "onBlur", "onFocus"]);
   const hasError = !!errorMessage;
   // we have to type cast because of jest. when testing it sets the type of useTheme to DefaultTheme
   const theme = /*#__PURE__*/styled.useTheme();
   const sizeIcon = Number(theme.components.dropdown.icon.size.replace(/[^\d.-]+/g, ''));
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(ContainerDropdown, {
-      variant: _variant,
+      variant: variant,
       hasValue: inputValue,
       hasError: hasError,
       disabled: disabled,
@@ -2461,13 +2476,13 @@ const ReusableDropdownComponent = ({
             children: "*"
           })]
         }), jsxRuntime.jsx(InputAndIconDropdown, {
-          children: jsxRuntime.jsx(atomsInput.InputStyled, {
+          children: jsxRuntime.jsx(atomsInput.InputStyled, Object.assign({
             id: `${id}-input`,
             "data-testid": `${dataTestId}-input`,
             ref: inputRef,
             disabled: disabled,
             value: inputLabel,
-            variant: _variant,
+            variant: variant,
             placeholder: placeholder,
             onChange: e => {
               var _a, _b;
@@ -2486,7 +2501,7 @@ const ReusableDropdownComponent = ({
               setShowSelectComponent(false);
               onBlur && onBlur(event);
             }
-          })
+          }, uiUtils.applyDataAttributes(props, 'input')))
         })]
       }), jsxRuntime.jsx(ClickableElement, {
         onClick: () => {
@@ -2632,24 +2647,26 @@ function filterOptionsWithHeaders(inputValue, optionList) {
   });
 }
 
-const Dropdown = /*#__PURE__*/react.forwardRef(({
-  label,
-  variant: _variant = 'grey',
-  required,
-  optionList,
-  disabled,
-  errorMessage,
-  urlFilterOptions,
-  id: _id = 'dropdown-id',
-  dataTestId: _dataTestId = 'dropdown-data-testid',
-  filterOptionsParam: _filterOptionsParam = filterOptions,
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder
-}, ref) => {
-  var _a;
+const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
+  var _b;
+  var {
+      label,
+      variant = 'grey',
+      required,
+      optionList,
+      disabled,
+      errorMessage,
+      urlFilterOptions,
+      id = 'dropdown-id',
+      dataTestId = 'dropdown-data-testid',
+      filterOptionsParam = filterOptions,
+      value,
+      onChange,
+      onBlur,
+      onFocus,
+      placeholder
+    } = _a,
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
@@ -2659,10 +2676,10 @@ const Dropdown = /*#__PURE__*/react.forwardRef(({
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
-      return yield _filterOptionsParam(inputValue, optionList, urlFilterOptions);
+      return yield filterOptionsParam(inputValue, optionList, urlFilterOptions);
     });
     normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
-  }, [_filterOptionsParam, optionList, urlFilterOptions, inputValue]);
+  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue]);
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && internalSelectedOption) {
       setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
@@ -2686,23 +2703,24 @@ const Dropdown = /*#__PURE__*/react.forwardRef(({
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
   }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
-  return jsxRuntime.jsxs(SectionContainer, {
+  return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
-    variant: _variant,
-    id: `${_id}-container`,
-    "data-testid": `${_dataTestId}-container`,
+    variant: variant,
+    id: `${id}-container`,
+    "data-testid": `${dataTestId}-container`,
     style: {
-      maxWidth: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.style.width
+      maxWidth: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.style.width
     },
-    ref: ref,
-    children: [jsxRuntime.jsx(ReusableDropdownComponent, {
-      id: _id,
-      dataTestId: _dataTestId,
+    ref: ref
+  }, uiUtils.applyDataAttributes(props), {
+    children: [jsxRuntime.jsx(ReusableDropdownComponent, Object.assign({
+      id: id,
+      dataTestId: dataTestId,
       label: label,
-      variant: _variant,
+      variant: variant,
       required: required,
       inputValue: inputValue,
       inputLabel: inputLabel,
@@ -2717,10 +2735,10 @@ const Dropdown = /*#__PURE__*/react.forwardRef(({
       onChangeInputLabel: setInputLabel,
       onBlur: onBlur,
       onFocus: onFocus
-    }), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
-      children: jsxRuntime.jsx(atomsSelect.Select, {
-        id: `${_id}-select`,
-        dataTestId: `${_dataTestId}-select`,
+    }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
+      children: jsxRuntime.jsx(atomsSelect.Select, Object.assign({
+        id: `${id}-select`,
+        dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           var _a;
           setInputValue(selectedValue.value);
@@ -2733,27 +2751,29 @@ const Dropdown = /*#__PURE__*/react.forwardRef(({
         },
         active: internalSelectedOption,
         options: currentOptionList
-      })
+      }, uiUtils.applyDataAttributes(props, 'select')))
     })]
-  });
+  }));
 });
 
-const DropdownWithHeaders = /*#__PURE__*/react.forwardRef(({
-  label,
-  variant: _variant = 'grey',
-  required,
-  optionList,
-  disabled,
-  errorMessage,
-  urlFilterOptions,
-  dataTestId,
-  filterOptionsParam: _filterOptionsParam = filterOptionsWithHeaders,
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder
-}, ref) => {
+const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
+  var {
+      label,
+      variant = 'grey',
+      required,
+      optionList,
+      disabled,
+      errorMessage,
+      urlFilterOptions,
+      dataTestId,
+      filterOptionsParam = filterOptionsWithHeaders,
+      value,
+      onChange,
+      onBlur,
+      onFocus,
+      placeholder
+    } = _a,
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
@@ -2763,10 +2783,10 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef(({
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
-      return yield _filterOptionsParam(inputValue, optionList, urlFilterOptions);
+      return yield filterOptionsParam(inputValue, optionList, urlFilterOptions);
     });
     normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
-  }, [_filterOptionsParam, optionList, urlFilterOptions, inputValue]);
+  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue]);
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && internalSelectedOption) {
       setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
@@ -2796,17 +2816,18 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef(({
     })[0] || undefined);
     setIsFirstRender(false);
   }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
-  return jsxRuntime.jsxs(SectionContainer, {
+  return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
-    variant: _variant,
+    variant: variant,
     "data-testid": `${dataTestId}-container`,
-    ref: ref,
-    children: [jsxRuntime.jsx(ReusableDropdownComponent, {
+    ref: ref
+  }, uiUtils.applyDataAttributes(props), {
+    children: [jsxRuntime.jsx(ReusableDropdownComponent, Object.assign({
       label: label,
-      variant: _variant,
+      variant: variant,
       required: required,
       inputValue: inputValue,
       inputLabel: inputLabel,
@@ -2822,8 +2843,8 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef(({
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
       onBlur: onBlur,
       onFocus: onFocus
-    }), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
-      children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, {
+    }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
+      children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, Object.assign({
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           var _a;
@@ -2837,9 +2858,9 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef(({
         },
         active: internalSelectedOption,
         options: currentOptionList
-      })
+      }, uiUtils.applyDataAttributes(props, 'select')))
     })]
-  });
+  }));
 });
 
 exports.Dropdown = Dropdown;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.19.0",
-    "@bolttech/atoms-input": "0.16.0",
-    "@bolttech/atoms-select": "0.16.0",
-    "@edirect/frontend-foundations": "0.0.67",
+    "@bolttech/atoms-icon": "0.20.0",
+    "@bolttech/atoms-input": "0.18.0",
+    "@bolttech/atoms-select": "0.17.0",
+    "@bolttech/ui-utils": "0.1.1",
+    "@edirect/frontend-foundations": "0.0.69",
     "jest-styled-components": "7.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/molecules-dropdown-with-header-options.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { OptionWithHeaderType, OptionType } from '@bolttech/atoms-select';
-export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<{
+export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string | undefined;
     disabled?: boolean | undefined;

package/src/lib/molecules-dropdown.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { OptionType } from '@bolttech/atoms-select';
-export declare const Dropdown: import("react").ForwardRefExoticComponent<{
+export declare const Dropdown: import("react").ForwardRefExoticComponent<import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string | undefined;
     disabled?: boolean | undefined;

package/src/lib/molecules-dropdown.type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
+import { DefaultProps } from '@bolttech/ui-utils';
 /**
  * @typedef {StyleVariants}
  The string value possibilities to affect the theme
@@ -16,7 +17,7 @@ Default props for Dropdown component
 @property required - An optional boolean to indicate if the dropdown is required
 @property variant - An optional string to set the variant of the dropdown
 */
-type DefaultProps = {
+type DefaultDropdownProps = {
     label: string;
     placeholder?: string;
     disabled?: boolean;
@@ -37,7 +38,7 @@ type DefaultProps = {
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
   */
-export type DropdownProps = DefaultProps & {
+export type DropdownProps = DefaultProps & DefaultDropdownProps & {
     optionList?: OptionType[];
     /**
      * An optional function that filters the option list based on input value
@@ -97,7 +98,7 @@ export type DropdownProps = DefaultProps & {
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
   */
-export type DropdownWithHeadersProps = DefaultProps & {
+export type DropdownWithHeadersProps = DefaultProps & DefaultDropdownProps & {
     optionList?: OptionWithHeaderType[];
     /**
      * An optional function that filters the option list based on input value
@@ -167,7 +168,7 @@ export type DropdownWithHeadersProps = DefaultProps & {
   @property setSelectedOptionOnInputValue - A function to set the selected option based on the input value
   @property inputRef - A ref to the input element of the dropdown
   */
-export type ReusableDropdownComponentProps = DefaultProps & {
+export type ReusableDropdownComponentProps = DefaultProps & DefaultDropdownProps & {
     setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;

package/src/lib/molecules-reusable-dropdown-component.d.ts

@@ -1,2 +1,2 @@
 import { ReusableDropdownComponentProps } from './molecules-dropdown.type';
-export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, placeholder, onBlur, onFocus, }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, placeholder, onBlur, onFocus, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;