@thecb/components 8.4.8-beta.4 → 8.4.8-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.8-beta.4",
+  "version": "8.4.8-beta.6",
   "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

@@ -16,17 +16,18 @@ import { Box, Cluster } from "../../atoms/layouts";
 */
 
 const Module = ({
+  variant = "default",
+  as,
+  disabled,
   heading,
+  rightTitleContent,
+  titleID = "",
   spacing = "1rem",
   padding = "0",
-  spacingBottom = "2.5rem",
   margin = "0",
-  themeValues,
-  variant = "default",
+  spacingBottom = "2.5rem",
   fontSize,
-  as,
-  titleID = "",
-  rightTitleContent,
+  themeValues,
   children
 }) => {
   const themedFontSize =
@@ -39,6 +40,7 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
+  const disabledStyles = 'opacity: 0.40;"';
   const headingText = (
     <Title
       weight={themeValues.fontWeight}
@@ -54,7 +56,12 @@ const Module = ({
   );
 
   return (
-    <Fragment>
+    <Box
+      aria-disabled={"true"}
+      extraStyles={disabled && disabledStyles}
+      padding="0"
+      role={"group"}
+    >
       {heading && !rightTitleContent && headingText}
       {heading && rightTitleContent && (
         <Cluster justify="space-between" align="center" nowrap>
@@ -72,7 +79,7 @@ const Module = ({
           {children}
         </Box>
       </Box>
-    </Fragment>
+    </Box>
   );
 };
 

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";