@bolttech/molecules-dropdown 0.26.0 → 0.27.0

package/README.md

@@ -70,6 +70,7 @@ The **Dropdown** component accepts the following props:
 | `onKeyUp`      | `function`      | The onkeyup event occurs when the user releases a key on the keyboard |
 | `onKeyDown`      | `boolean`      | Onkeydown is an event handler in Javascript that gets called when a key is pressed on the keyboard |
 | `asyncOptionList`      | `boolean`      | A boolean prop that controls a different behavior when OptionList are set by an API request |
+| helperMessage     | `string`   | An optional string to display as a helper message for the dropdown                                                    |
 
 ## Functionality
 

package/index.cjs

@@ -2300,7 +2300,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
 }) => theme.components.dropdown[$variant].container.color.default, ({
   theme,
   $variant
-}) => `1px solid ${theme.components.dropdown[$variant].container.border.default}`, ({
+}) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border.default}`, ({
   theme
 }) => theme.components.dropdown.borderRadius, ({
   theme: {
@@ -2344,7 +2344,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
   theme,
   $variant,
   $hasError
-}) => `1px solid ${theme.components.dropdown[$variant].container.border[$hasError ? 'error' : 'focus']}`, ({
+}) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border[$hasError ? 'error' : 'focus']}`, ({
   $hasError
 }) => !$hasError && styled.css([".fieldLabel{color:", ";}.requiredLabel{color:", ";}label.material-symbols-sharp{color:", ";}"], ({
   theme,
@@ -2361,7 +2361,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
 }) => $hasError && styled.css(["outline:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}label.material-symbols-sharp{color:", ";}"], ({
   theme,
   $variant
-}) => `1px solid ${theme.components.dropdown[$variant].container.border[$hasValue ? 'errorFilled' : 'error']}`, ({
+}) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border[$hasValue ? 'errorFilled' : 'error']}`, ({
   theme,
   $variant
 }) => theme.components.dropdown[$variant].container.color[$hasValue ? 'errorFilled' : 'error'], ({
@@ -2380,7 +2380,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
 }) => disabled && styled.css(["cursor:not-allowed;outline:", ";background-color:", ";*{cursor:not-allowed;}.fieldLabel{color:", ";}.requiredLabel{color:", ";}label.material-symbols-sharp{color:", ";}input{color:", ";&::placeholder{color:", ";}}"], ({
   theme,
   $variant
-}) => `1px solid ${theme.components.dropdown[$variant].container.border.disable}`, ({
+}) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border.disable}`, ({
   theme,
   $variant
 }) => theme.components.dropdown[$variant].container.color.disable, ({
@@ -2402,7 +2402,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
 const SectionContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "molecules-dropdownstyles__SectionContainer",
   componentId: "sc-3wugi4-2"
-})(["position:relative;.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+})(["position:relative;.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}.helperMessage{padding-right:", ";padding-left:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
   theme
 }) => theme.components.dropdown.paddingHorizontal, ({
   theme
@@ -2417,7 +2417,23 @@ const SectionContainer = /*#__PURE__*/styled__default["default"].section.withCon
   theme
 }) => theme.components.dropdown.error.fontSize, ({
   theme
-}) => theme.components.dropdown.error.letterSpacing);
+}) => theme.components.dropdown.error.letterSpacing, ({
+  theme
+}) => theme.components.dropdown.paddingHorizontal, ({
+  theme
+}) => theme.components.dropdown.paddingHorizontal, ({
+  theme,
+  $variant,
+  disabled
+}) => theme.components.dropdown[$variant].text.color.helper[disabled ? 'disabled' : 'default'], ({
+  theme
+}) => theme.components.dropdown.helper.fontWeight, ({
+  theme
+}) => theme.components.dropdown.helper.lineHeight, ({
+  theme
+}) => theme.components.dropdown.helper.fontSize, ({
+  theme
+}) => theme.components.dropdown.helper.letterSpacing);
 const InputAndIconDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "molecules-dropdownstyles__InputAndIconDropdown",
   componentId: "sc-3wugi4-3"
@@ -2450,6 +2466,7 @@ const ReusableDropdownComponent = _a => {
       inputLabel,
       disabled,
       errorMessage,
+      helperMessage,
       onChangeInputValue,
       onChangeInputLabel,
       setShowSelectComponent,
@@ -2463,7 +2480,7 @@ const ReusableDropdownComponent = _a => {
       onKeyUp,
       onKeyDown
     } = _a,
-    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "disableSearch", "inputRef", "placeholder", "onBlur", "onFocus", "onKeyUp", "onKeyDown"]);
+    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "helperMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "disableSearch", "inputRef", "placeholder", "onBlur", "onFocus", "onKeyUp", "onKeyDown"]);
   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();
@@ -2542,6 +2559,12 @@ const ReusableDropdownComponent = _a => {
         "data-testid": `${dataTestId}-label-error-message`,
         children: errorMessage
       })
+    }), !showSelectComponent && !errorMessage && helperMessage && jsxRuntime.jsx("div", {
+      className: "helperMessage",
+      children: jsxRuntime.jsx("label", {
+        "data-testid": `${dataTestId}-label-helper-message`,
+        children: helperMessage
+      })
     })]
   });
 };

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
     "@bolttech/atoms-icon": "0.22.1",
-    "@bolttech/atoms-input": "0.21.2",
+    "@bolttech/atoms-input": "0.22.0",
     "@bolttech/atoms-select": "0.21.0",
-    "@bolttech/default-theme": "0.3.1",
+    "@bolttech/default-theme": "0.5.0",
     "@bolttech/form-engine": "0.10.3",
-    "@bolttech/frontend-foundations": "0.4.0",
+    "@bolttech/frontend-foundations": "0.7.0",
     "@bolttech/ui-utils": "0.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

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

@@ -7,6 +7,7 @@ export declare const DropdownWithHeaders: import("react").ForwardRefExoticCompon
     id?: string | undefined;
     dataTestId?: string | undefined;
     errorMessage?: string | undefined;
+    helperMessage?: string | undefined;
     required?: boolean | undefined;
     variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
     disableSearch?: boolean | undefined;

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

@@ -7,6 +7,7 @@ export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<im
     id?: string | undefined;
     dataTestId?: string | undefined;
     errorMessage?: string | undefined;
+    helperMessage?: string | undefined;
     required?: boolean | undefined;
     variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
     disableSearch?: boolean | undefined;

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

@@ -14,6 +14,7 @@ Default props for Dropdown component
 @property disabled - An optional boolean to disable the dropdown
 @property dataTestId - An optional string to use as the data-testid attribute for the dropdown
 @property errorMessage - An optional string to display as an error message for the dropdown
+@property helperMessage - An optional string to display as an helper message for the dropdown
 @property required - An optional boolean to indicate if the dropdown is required
 @property variant - An optional string to set the variant of the dropdown
 @property disableSearch - An optional boolean representing if the user can type and mobile phones should show the keyboard
@@ -25,6 +26,7 @@ type DefaultDropdownProps = {
     id?: string;
     dataTestId?: string;
     errorMessage?: string;
+    helperMessage?: string;
     required?: boolean;
     variant?: StyleVariants;
     disableSearch?: boolean;

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, disableSearch, inputRef, placeholder, onBlur, onFocus, onKeyUp, onKeyDown, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, helperMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, disableSearch, inputRef, placeholder, onBlur, onFocus, onKeyUp, onKeyDown, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;