@thecb/components 8.4.8-beta.5 → 8.4.8-beta.7

package/package.json

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

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

@@ -12,6 +12,7 @@ export * from "./nav-footer";
 export * from "./nav-header";
 export * from "./nav-tabs";
 export * from "./paragraph";
+export * from "./searchable-select";
 export * from "./spinner";
 export * from "./table";
 export * from "./text";

package/src/components/atoms/searchable-select/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import {
+  Field,
+  FieldActions,
+  SearchableSelectOption
+} from "../../../types/common";
+
+export interface SearchableSelectProps {
+  items: SearchableSelectOption[];
+  selectedItems: SearchableSelectOption[];
+  allSelected: boolean;
+  toggleSelectAllItems: (isSelectAll: boolean) => void;
+  selectItem: (item: SearchableSelectOption) => void;
+  fields: {
+    searchTerm: Field;
+  };
+  actions: FieldActions;
+  disabled?: boolean;
+  placeholder: string;
+}
+
+export const SearchableSelect: React.FC<Expand<SearchableSelectProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/module/Module.js

@@ -40,7 +40,7 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
-  const disabledStyles = "opacity: 0.40;";
+  const disabledStyles = 'opacity: 0.40;"';
   const headingText = (
     <Title
       weight={themeValues.fontWeight}
@@ -56,7 +56,12 @@ const Module = ({
   );
 
   return (
-    <Box padding="0" extraStyles={disabled && disabledStyles}>
+    <Box
+      aria-disabled={disabled}
+      extraStyles={disabled && disabledStyles}
+      padding="0"
+      role={"group"}
+    >
       {heading && !rightTitleContent && headingText}
       {heading && rightTitleContent && (
         <Cluster justify="space-between" align="center" nowrap>

package/src/types/common/SearchableSelectOption.ts

@@ -0,0 +1,4 @@
+export default interface SearchableSelectOption {
+  name?: string;
+  value?: string;
+}

package/src/types/common/index.ts

@@ -2,5 +2,6 @@ export { default as Field } from "./Field";
 export { default as ReduxAction } from "./ReduxAction";
 export { default as FieldActions } from "./FieldActions";
 export { default as FormSelectOption } from "./FormSelectOption";
+export { default as SearchableSelectOption } from "./SearchableSelectOption";
 export { default as ErrorMessageDictionary } from "./ErrorMessageDictionary";
 export * from "./FieldActions";