@xqmsg/ui-core 0.27.0 → 0.28.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.27.0",
+  "version": "0.28.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/banner/index.tsx

@@ -14,6 +14,7 @@ export interface BannerProps {
   buttonText?: string;
   onClick?: () => void;
   type?: 'condensed' | 'expanded';
+  centered?: boolean;
 }
 
 /**
@@ -25,6 +26,7 @@ export const Banner: React.FC<BannerProps> = ({
   buttonText,
   onClick,
   type = 'expanded',
+  centered = false,
 }) => {
   const Icon = useMemo(() => {
     switch (variant) {
@@ -42,15 +44,26 @@ export const Banner: React.FC<BannerProps> = ({
   }, [variant]);
 
   return (
-    <Alert variant={variant} borderRadius="4px">
+    <Alert
+      variant={variant}
+      borderRadius="4px"
+      justifyContent={centered ? 'center' : undefined}
+    >
       <AlertDescription>
         <Flex
-          flexDirection={type === 'condensed' ? 'row' : 'column'}
-          alignItems={type === 'condensed' ? 'center' : ''}
+          flexDirection={centered || type === 'condensed' ? 'row' : 'column'}
+          alignItems={centered || type === 'condensed' ? 'center' : ''}
+          justifyContent={centered ? 'center' : undefined}
           minHeight="26px"
         >
-          <Box pr="8px">{Icon}</Box>
-          <Box flexGrow="1" pt={type === 'condensed' ? 0 : '8px'}>
+          <Box pr="8px" pt={!centered && type !== 'condensed' ? '8px' : 0}>
+            {Icon}
+          </Box>
+          <Box
+            flexGrow={centered ? undefined : '1'}
+            pt={!centered && type !== 'condensed' ? '8px' : 0}
+            textAlign={centered ? 'center' : 'left'}
+          >
             {message}
           </Box>
           {onClick && buttonText && (

package/src/components/input/InputTypes.ts

@@ -22,7 +22,7 @@ export type InputType =
 export type FieldOption = {
   label: string;
   value: string | 'section_header';
-  sortValue: number;
+  sortValue?: number;
 };
 
 export interface ValidationProps {

package/src/components/input/StackedMultiSelect/index.tsx

@@ -159,7 +159,9 @@ const StackedMultiSelect = React.forwardRef<
       });
 
       setLocalOptions(prevLocalOptions =>
-        [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
+        [...prevLocalOptions, option].sort(
+          (a, b) => (a.sortValue ?? 0) - (b.sortValue ?? 0)
+        )
       );
 
       setLocalValues(prevLocalValues =>

package/src/components/input/StackedSelect/index.tsx

@@ -80,11 +80,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       setSearchValue('');
     });
 
-    const handleOnSelectItem = (option: {
-      label: string;
-      value: string;
-      sortValue: number;
-    }) => {
+    const handleOnSelectItem = (option: FieldOption) => {
       if (handleOnChange) {
         handleOnChange(option.value);
       }