@thecb/components 10.11.0-beta.1 → 10.11.1

package/package.json

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

package/src/components/atoms/search/Search.js

@@ -27,6 +27,7 @@ const Search = ({
   field,
   fieldActions,
   dataset,
+  disableFilter = false, // Some implementations may prefer to filter the list at the application level (e.g., Revenue Management centralizing search, sort, and filtering Users state).
   valuesToSearchFor,
   onSearchCallback,
   onClearCallback,
@@ -52,7 +53,8 @@ const Search = ({
     );
   };
 
-  const handleSubmit = () => onSearchCallback(getFilteredDataset());
+  const handleSubmit = () =>
+    disableFilter ? onSearchCallback() : onSearchCallback(getFilteredDataset());
 
   return (
     <Cluster extraStyles={`overflow: visible; width: ${width}; ${extraStyles}`}>

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

@@ -10,6 +10,7 @@ export interface SearchProps {
   field: Field;
   fieldActions: FieldActions;
   dataset: FlexibleObjectArray;
+  disableFilter?: boolean;
   valuesToSearchFor: string[];
   onSearchCallback: () => void;
   onClearCallback: () => void;

package/src/components/atoms/sortable-table-heading/SortableTableHeading.js

@@ -5,9 +5,11 @@ import { fallbackValues } from "./SortableTableHeading.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Cluster, Stack } from "../layouts";
 import { TableHeading } from "../table";
+import { noop } from "../../../util/general";
 
 const SortableTableHeading = ({
   ariaControlsId,
+  disabled = false,
   displayName,
   onSortChange,
   sortOrder = null,
@@ -22,8 +24,9 @@ const SortableTableHeading = ({
   };
   return (
     <TableHeading
+      disabled={disabled}
       extraStyles={`cursor: pointer; ${extraStyles}`}
-      onClick={onSortChange}
+      onClick={event => (disabled ? noop : onSortChange(event))}
       aria-controls={ariaControlsId}
     >
       <Cluster justify="space-between">

package/src/components/atoms/sortable-table-heading/index.d.ts

@@ -4,6 +4,7 @@ import Expand from "../../../util/expand";
 export type SortOrder = "asc" | "desc" | null;
 export interface SortableTableHeadingProps {
   ariaControlsId: string;
+  disabled?: boolean; // Useful if you want to render the component while data is fetching
   displayName: string; // The name displayed in the <th> element
   onSortChange: () => void;
   sortOrder: SortOrder;

package/src/components/atoms/state-province-dropdown/options.js

@@ -3650,7 +3650,10 @@ const allOptions = {
     { text: "Washington", value: "WA" },
     { text: "West Virginia", value: "WV" },
     { text: "Wisconsin", value: "WI" },
-    { text: "Wyoming", value: "WY" }
+    { text: "Wyoming", value: "WY" },
+    { text: "Armed Forces Americas", value: "AA" },
+    { text: "Armed Forces Europe", value: "AE" },
+    { text: "Armed Forces Pacific", value: "AP" }
   ],
   UM: [{ text: "Palmyra Atoll", value: "95" }],
   UY: [

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -180,9 +180,9 @@ const MultipleSelectFilter = ({
     : WHITE;
   const contentColor = !opened && selectedOptions?.length ? WHITE : "#292A33";
 
-  const completeOptionsList = itemList.sort((a, b) =>
-    a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-  );
+  const completeOptionsList = itemList
+    .slice()
+    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
   const selectValues = items => items.map(item => item.value);
   const selectOption = selectedOption => {
     if (selectValues(selectedOptions).includes(selectedOption.value)) {