@bolttech/molecules-dropdown 0.1.4 → 0.1.6

package/{index.js → index.cjs}

@@ -1,9 +1,17 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { Select, SelectWithHeaders } from '@bolttech/atoms-select';
-import { Icon } from '@bolttech/atoms-icon';
-import { InputStyled } from '@bolttech/atoms-input';
-import styled, { css } from 'styled-components';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var atomsSelect = require('@bolttech/atoms-select');
+var atomsIcon = require('@bolttech/atoms-icon');
+var atomsInput = require('@bolttech/atoms-input');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1647,11 +1655,11 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-const ClickableElement = /*#__PURE__*/styled.div.withConfig({
+const ClickableElement = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "molecules-dropdownstyles__ClickableElement",
   componentId: "sc-3wugi4-0"
 })(["cursor:pointer;"]);
-const ContainerDropdown = /*#__PURE__*/styled.section.withConfig({
+const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "molecules-dropdownstyles__ContainerDropdown",
   componentId: "sc-3wugi4-1"
 })(["padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";border:", ";border-radius:", ";box-shadow:", ";.fieldLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}svg{width:", ";fill:", ";}input{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}&:focus-within{background-color:", ";border:", ";", "}", " ", ""], ({
@@ -1735,7 +1743,7 @@ const ContainerDropdown = /*#__PURE__*/styled.section.withConfig({
   hasError
 }) => `1px solid ${theme.components.dropdown[variant].container.border[hasError ? 'error' : 'focus']}`, ({
   hasError
-}) => !hasError && css([".fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
+}) => !hasError && styled.css([".fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
   theme,
   variant
 }) => theme.components.dropdown[variant].text.color.fieldLabel.focus, ({
@@ -1747,7 +1755,7 @@ const ContainerDropdown = /*#__PURE__*/styled.section.withConfig({
 }) => theme.components.dropdown[variant].icon.color.focus), ({
   hasError,
   hasValue
-}) => hasError && css(["border:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
+}) => hasError && styled.css(["border:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
   theme,
   variant
 }) => `1px solid ${theme.components.dropdown[variant].container.border[hasValue ? 'errorFilled' : 'error']}`, ({
@@ -1766,7 +1774,7 @@ const ContainerDropdown = /*#__PURE__*/styled.section.withConfig({
   variant
 }) => theme.components.dropdown[variant].icon.color[hasValue ? 'errorFilled' : 'error']), ({
   disabled
-}) => disabled && css(["cursor:not-allowed;border:", ";background-color:", ";*{cursor:not-allowed;}.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}input{::placeholder{color:", ";}}"], ({
+}) => disabled && styled.css(["cursor:not-allowed;border:", ";background-color:", ";*{cursor:not-allowed;}.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}input{::placeholder{color:", ";}}"], ({
   theme,
   variant
 }) => `1px solid ${theme.components.dropdown[variant].container.border.disable}`, ({
@@ -1785,7 +1793,7 @@ const ContainerDropdown = /*#__PURE__*/styled.section.withConfig({
   theme,
   variant
 }) => theme.components.dropdown[variant].text.color.required.disable));
-const SectionContainer = /*#__PURE__*/styled.section.withConfig({
+const SectionContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "molecules-dropdownstyles__SectionContainer",
   componentId: "sc-3wugi4-2"
 })([".errorMessage{width:100%;padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
@@ -1806,17 +1814,17 @@ const SectionContainer = /*#__PURE__*/styled.section.withConfig({
 }) => theme.components.dropdown.error.fontSize, ({
   theme
 }) => theme.components.dropdown.error.letterSpacing);
-const InputAndIconDropdown = /*#__PURE__*/styled.div.withConfig({
+const InputAndIconDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "molecules-dropdownstyles__InputAndIconDropdown",
   componentId: "sc-3wugi4-3"
 })(["display:flex;"]);
-const ContentDropdown = /*#__PURE__*/styled.div.withConfig({
+const ContentDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "molecules-dropdownstyles__ContentDropdown",
   componentId: "sc-3wugi4-4"
 })(["gap:", ";"], ({
   theme
 }) => theme.components.dropdown.gap);
-const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled(ClickableElement).withConfig({
+const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled__default["default"](ClickableElement).withConfig({
   displayName: "molecules-dropdownstyles__FieldLabelAndRequiredLabelDropdown",
   componentId: "sc-3wugi4-5"
 })(["gap:", ";display:flex;"], ({
@@ -1839,33 +1847,33 @@ const ReusableDropdownComponent = ({
   dataTestId,
   placeholder
 }) => {
-  return jsxs(Fragment, {
-    children: [jsx(ContainerDropdown, Object.assign({
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(ContainerDropdown, Object.assign({
       variant: _variant,
       hasValue: inputValue,
       hasError: hasError,
       disabled: disabled,
       "data-testid": `${dataTestId}-dropdown-container`
     }, {
-      children: jsxs(ContentDropdown, {
-        children: [jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
+      children: jsxRuntime.jsxs(ContentDropdown, {
+        children: [jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
           onClick: () => {
             setShowSelectComponent(disabled ? false : !showSelectComponent);
           }
         }, {
-          children: [jsx("label", Object.assign({
+          children: [jsxRuntime.jsx("label", Object.assign({
             className: "fieldLabel",
             "data-testid": `${dataTestId}-label`
           }, {
             children: label
-          })), required && jsx("label", Object.assign({
+          })), required && jsxRuntime.jsx("label", Object.assign({
             className: "requiredLabel",
             "data-testid": `${dataTestId}-label-required`
           }, {
             children: "*"
           }))]
-        })), jsxs(InputAndIconDropdown, {
-          children: [jsx(InputStyled, {
+        })), jsxRuntime.jsxs(InputAndIconDropdown, {
+          children: [jsxRuntime.jsx(atomsInput.InputStyled, {
             "data-testid": `${dataTestId}-input`,
             ref: inputRef,
             disabled: disabled,
@@ -1885,22 +1893,22 @@ const ReusableDropdownComponent = ({
               setSelectedOptionOnInputValue();
               setShowSelectComponent(false);
             }
-          }), jsx(ClickableElement, Object.assign({
+          }), jsxRuntime.jsx(ClickableElement, Object.assign({
             onClick: () => {
               if (!disabled) setShowSelectComponent(!showSelectComponent);
             }
           }, {
-            children: jsx(Icon, {
+            children: jsxRuntime.jsx(atomsIcon.Icon, {
               dataTestId: `${dataTestId}-icon`,
               icon: !showSelectComponent ? 'keyboard_arrow_down' : 'keyboard_arrow_up'
             })
           }))]
         })]
       })
-    })), !showSelectComponent && hasError && errorMessage && jsx("div", Object.assign({
+    })), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", Object.assign({
       className: "errorMessage"
     }, {
-      children: jsx("label", Object.assign({
+      children: jsxRuntime.jsx("label", Object.assign({
         "data-testid": `${dataTestId}-label-error-message`
       }, {
         children: errorMessage
@@ -2399,17 +2407,17 @@ const Dropdown = ({
   setSelectedOption,
   placeholder
 }) => {
-  const [showSelectComponent, setShowSelectComponent] = useState(false);
-  const [currentOptionList, setCurrentOptionList] = useState([]);
-  const [inputValue, setInputValue] = useState('');
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [showSelectComponent, setShowSelectComponent] = react.useState(false);
+  const [currentOptionList, setCurrentOptionList] = react.useState([]);
+  const [inputValue, setInputValue] = react.useState('');
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
       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]);
-  const setSelectedOptionOnInputValue = useCallback(() => {
+  const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && selectedOption) {
       setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
       return;
@@ -2419,7 +2427,7 @@ const Dropdown = ({
       if (!isValidValue) setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
     }
   }, [currentOptionList, inputValue, selectedOption]);
-  return jsxs(SectionContainer, Object.assign({
+  return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2427,7 +2435,7 @@ const Dropdown = ({
     variant: _variant,
     "data-testid": `${dataTestId}-container`
   }, {
-    children: [jsx(ReusableDropdownComponent, {
+    children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       label: label,
       variant: _variant,
       required: required,
@@ -2442,8 +2450,8 @@ const Dropdown = ({
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
-    }), showSelectComponent && !disabled && jsx("div", {
-      children: jsx(Select, {
+    }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(atomsSelect.Select, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           setInputValue(selectedValue.value);
@@ -2471,17 +2479,17 @@ const DropdownOptionsWithHeaders = ({
   setSelectedOption,
   placeholder
 }) => {
-  const [showSelectComponent, setShowSelectComponent] = useState(false);
-  const [currentOptionList, setCurrentOptionList] = useState([]);
-  const [inputValue, setInputValue] = useState('');
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [showSelectComponent, setShowSelectComponent] = react.useState(false);
+  const [currentOptionList, setCurrentOptionList] = react.useState([]);
+  const [inputValue, setInputValue] = react.useState('');
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
       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]);
-  const setSelectedOptionOnInputValue = useCallback(() => {
+  const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && selectedOption) {
       setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
       return;
@@ -2495,7 +2503,7 @@ const DropdownOptionsWithHeaders = ({
       if (!isValidValue) setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
     }
   }, [currentOptionList, inputValue, selectedOption]);
-  return jsxs(SectionContainer, Object.assign({
+  return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2503,7 +2511,7 @@ const DropdownOptionsWithHeaders = ({
     variant: _variant,
     "data-testid": `${dataTestId}-container`
   }, {
-    children: [jsx(ReusableDropdownComponent, {
+    children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       label: label,
       variant: _variant,
       required: required,
@@ -2518,8 +2526,8 @@ const DropdownOptionsWithHeaders = ({
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
-    }), showSelectComponent && !disabled && jsx("div", {
-      children: jsx(SelectWithHeaders, {
+    }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           setInputValue(selectedValue.value);
@@ -2532,4 +2540,5 @@ const DropdownOptionsWithHeaders = ({
   }));
 };
 
-export { Dropdown, DropdownOptionsWithHeaders };
+exports.Dropdown = Dropdown;
+exports.DropdownOptionsWithHeaders = DropdownOptionsWithHeaders;

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "dependencies": {
     "@bolttech/atoms-icon": "0.0.1",
     "@bolttech/atoms-input": "0.0.1"
   },
-  "module": "./index.js",
-  "main": "./index.js",
-  "type": "module",
+  "main": "./index.cjs",
+  "type": "commonjs",
   "types": "./src/index.d.ts",
   "peerDependencies": {
-    "@bolttech/atoms-select": "0.1.3",
-    "@edirect/frontend-foundations": "0.0.26",
+    "@bolttech/atoms-select": "0.1.5",
+    "@edirect/frontend-foundations": "0.0.27",
     "jest-styled-components": "7.1.1",
     "react": "18.2.0",
     "styled-components": "5.3.6"