@thecb/components 11.6.3 → 11.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.6.3",
+  "version": "11.6.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/dropdown/Dropdown.js

@@ -135,7 +135,8 @@ const Dropdown = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
   ariaInvalid = false,
-  isRequired = false
+  isRequired = false,
+  extraStyles
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -316,7 +317,7 @@ const Dropdown = ({
     <Box
       padding="0"
       background={isOpen ? themeValues.hoverColor : WHITE}
-      extraStyles={`position: relative;`}
+      extraStyles={`position: relative;${extraStyles ? ` ${extraStyles}` : ""}`}
       minWidth="100%"
       onClick={() => {
         if (!isOpen) {

package/src/components/atoms/dropdown/index.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import { FormSelectOption } from "../../../types/common";
+
+export interface DropdownThemeValues {
+  selectedColor?: string;
+  hoverColor?: string;
+  focusColor?: string;
+}
+
+export interface DropdownProps {
+  /** Placeholder text displayed when no value is selected */
+  placeholder?: string;
+  /** Array of options to display in the dropdown */
+  options: FormSelectOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Whether the dropdown is currently open */
+  isOpen?: boolean;
+  /** Whether the dropdown is in an error state */
+  isError?: boolean;
+  /** Callback fired when an option is selected */
+  onSelect: (value: string) => void;
+  /** Array of values that should be disabled */
+  disabledValues?: string[];
+  /** Callback fired when the dropdown is clicked */
+  onClick?: () => void;
+  /** Theme values for styling the dropdown */
+  themeValues?: DropdownThemeValues;
+  /** Maximum height of the dropdown content */
+  maxHeight?: string;
+  /** Whether the dropdown width should fit its content */
+  widthFitOptions?: boolean;
+  /** Whether the dropdown is disabled */
+  disabled?: boolean;
+  /** Whether to show title attributes on options */
+  hasTitles?: boolean;
+  /** Whether to auto-erase type-ahead input after timeout */
+  autoEraseTypeAhead?: boolean;
+  /** ID of the element that labels this dropdown */
+  ariaLabelledby?: string;
+  /** ID of the element that describes this dropdown */
+  ariaDescribedby?: string;
+  /** Autocomplete attribute value for browser autofill */
+  autocompleteValue?: string;
+  /** Whether to use smooth scrolling when scrolling to selected item */
+  smoothScroll?: boolean;
+  /** Whether the dropdown has an invalid value */
+  ariaInvalid?: boolean;
+  /** Whether the dropdown is required */
+  isRequired?: boolean;
+  /** Custom CSS styles */
+  extraStyles?: string;
+}
+
+export const Dropdown: React.FC<Expand<DropdownProps> &
+  Omit<React.HTMLAttributes<HTMLElement>, "onSelect">>;
+
+export default Dropdown;

package/src/components/atoms/index.d.ts

@@ -3,6 +3,7 @@ export * from "./badge";
 export * from "./button-with-action";
 export * from "./button-with-link";
 export * from "./card";
+export * from "./dropdown";
 export * from "./sortable-table-heading";
 export * from "./form-layouts";
 export * from "./form-select";