@campxdev/react-blueprint 3.0.0-alpha.8 → 3.0.0

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -115,7 +115,7 @@ export interface TreeMapProps {
  *   />
  * );
  */
-const TreeMap: React.FC<TreeMapProps> = ({
+export const TreeMap: React.FC<TreeMapProps> = ({
   title = 'Tree Map',
   titleProps = { variant: 'large' },
   showSubtitle = false,
@@ -177,8 +177,6 @@ const TreeMap: React.FC<TreeMapProps> = ({
   );
 };
 
-export default TreeMap;
-
 /**
  * CustomizedContent Component
  * Renders custom content for treemap cells with text labels and borders.

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -366,6 +366,7 @@ const DataTable = <TData extends Record<string, any> = any>(
               uniqueId={tableActionProps.uniqueId}
               columns={tableColumns}
               viewsProps={tableActionProps.viewsProps}
+              hasCardView={!!props.card}
             />
           )}
         </>

package/src/components/DataDisplay/DataTable/components/CardsView.tsx

@@ -64,7 +64,7 @@ const CardsView = <TData extends Record<string, any> = any>({
         ) : card && rows && rows.length > 0 ? (
           rows.map((row, index) => card(row, index))
         ) : (
-          <div className="col-span-full p-4 text-center border rounded-md">
+          <div className="col-span-full p-4 text-center border rounded-md min-h-[300px]">
             <p className="text-muted-foreground">No items available</p>
           </div>
         )}

package/src/components/DataDisplay/DataTable/components/TableHeaders/TableActionHeader.tsx

@@ -20,6 +20,7 @@ type TableActionHeaderProps = {
     type: string;
     axios: Axios;
   };
+  hasCardView?: boolean;
 };
 
 const TableActionHeader = ({
@@ -28,6 +29,7 @@ const TableActionHeader = ({
   uniqueId,
   columns,
   viewsProps,
+  hasCardView = false,
 }: TableActionHeaderProps) => {
   const { data: views, isLoading } = useQuery(
     viewsProps.type,
@@ -71,11 +73,11 @@ const TableActionHeader = ({
 
               {/* Tablet & Desktop: Icon + Text */}
               <Button
-                variant="default"
+                variant="link"
                 size="sm"
                 onClick={open}
                 startIcon={<Plus />}
-                className="hidden md:flex"
+                className="hidden hover:no-underline md:flex"
               >
                 Add View
               </Button>
@@ -97,30 +99,31 @@ const TableActionHeader = ({
       <div className="flex items-center gap-2">
         {layoutMode === 'table' && (
           <>
-            {' '}
             {/* Density Selector  */}
             <DensitySelector uniqueId={uniqueId} />
             {/* Column Selector  */}
             <ColumnSelector columns={columns} uniqueId={uniqueId} />
           </>
         )}
-        {/* Layout Switcher */}
-        <div className="flex gap-1 border rounded-md flex-shrink-0 bg-background">
-          <Button
-            variant={layoutMode === 'table' ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => onLayoutChange('table')}
-          >
-            <Table />
-          </Button>
-          <Button
-            variant={layoutMode === 'card' ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => onLayoutChange('card')}
-          >
-            <LayoutGrid />
-          </Button>
-        </div>
+        {/* Layout Switcher - Only show if card view is available */}
+        {hasCardView && (
+          <div className="flex gap-1 border rounded-md flex-shrink-0 bg-background">
+            <Button
+              variant={layoutMode === 'table' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => onLayoutChange('table')}
+            >
+              <Table />
+            </Button>
+            <Button
+              variant={layoutMode === 'card' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => onLayoutChange('card')}
+            >
+              <LayoutGrid />
+            </Button>
+          </div>
+        )}
       </div>
     </Card>
   );

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -47,7 +47,7 @@ export const LabelWrapper = ({
       {typeof label === 'string' ? (
         <Label htmlFor={name}>
           {label}
-          {required && <span className="text-destructive ml-1">*</span>}
+          {required && <span className="text-destructive">*</span>}
         </Label>
       ) : (
         label

package/src/components/Input/MultiSelect/MultiSelect.tsx

@@ -22,6 +22,8 @@ export type MultiSelectProps = {
   name?: string;
   getValue?: (option: any) => any;
   value?: any[];
+  defaultValue?: any[];
+  placeholder?: string;
   dbValueProps?: {
     valueKey: string;
     isObjectId?: boolean;
@@ -70,6 +72,8 @@ export type MultiSelectProps = {
  * @param {boolean} [props.loading] - Whether options are loading
  * @param {boolean} [props.disableClear] - Whether to hide the clear button
  * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {any[]} [props.defaultValue] - Default values when component is uncontrolled (overridden by value prop)
+ * @param {string} [props.placeholder] - Placeholder text shown when no values are selected
  * @param {'input' | 'filter'} [props.type='input'] - Display type
  * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
  * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
@@ -92,7 +96,9 @@ export const MultiSelect = ({
   optionsApiEndpointParams,
   externalAxios,
   getValue,
-  value = [],
+  value,
+  defaultValue,
+  placeholder,
   onChange,
   dbValueProps = {
     valueKey: 'id',
@@ -110,16 +116,18 @@ export const MultiSelect = ({
   type = 'input',
   ...restProps
 }: MultiSelectProps) => {
+  // Prioritize value over defaultValue (value takes precedence if both exist)
+  const effectiveValue = value !== undefined ? value : defaultValue ?? [];
   const initialState: MultiSelectState = {
     open: false,
     loadingInternalOptions: false,
     loadingInitialInternalOptions: false,
     internalOptions: options ?? [],
     internalOptionsMap: generateOptionsMap(options ?? [], getValue),
-    selectedValues: value,
+    selectedValues: effectiveValue,
     selectedOptionsMap: generateSelectedOptionsMap(
       options ?? [],
-      value,
+      effectiveValue,
       getValue,
     ),
     limit: 10,
@@ -415,7 +423,7 @@ export const MultiSelect = ({
             ...(dbValueProps.isObjectId && { isObjectId: true }),
             ...(dbValueProps.isInt && { isInt: true }),
             ...(dbValueProps.isFloat && { isFloat: true }),
-            selectedValueData: value,
+            selectedValueData: effectiveValue,
             filterBySelectedValues: true,
           },
           dbLabelProps,
@@ -429,7 +437,7 @@ export const MultiSelect = ({
           internalOptionsMap: generateOptionsMap(res.data, getValue),
           selectedOptionsMap: generateSelectedOptionsMap(
             res.data,
-            value,
+            effectiveValue,
             getValue,
           ),
         },
@@ -444,7 +452,7 @@ export const MultiSelect = ({
   };
 
   useEffect(() => {
-    if (value && value.length > 0 && optionsApiEndPoint) {
+    if (effectiveValue && effectiveValue.length > 0 && optionsApiEndPoint) {
       loadSelectedOptions().finally(() => {
         dispatch({
           actionType: MultiSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
@@ -470,7 +478,8 @@ export const MultiSelect = ({
         state={state}
         optionsApiEndPoint={optionsApiEndPoint}
         getValue={getValue}
-        value={value}
+        value={effectiveValue}
+        placeholder={placeholder}
         dbLabelProps={dbLabelProps}
         {...restProps}
       />
@@ -488,7 +497,8 @@ export const MultiSelect = ({
       state={state}
       optionsApiEndPoint={optionsApiEndPoint}
       getValue={getValue}
-      value={value}
+      value={effectiveValue}
+      placeholder={placeholder}
       dbLabelProps={dbLabelProps}
       {...restProps}
     />

package/src/components/Input/MultiSelect/components/MultiSelectInput.tsx

@@ -43,6 +43,7 @@ export const MultiSelectInput = ({
   name,
   getValue,
   value = [],
+  placeholder = '',
   onChange,
   error,
   helperText,
@@ -155,9 +156,7 @@ export const MultiSelectInput = ({
             >
               <div className="flex items-center gap-2 flex-1 overflow-hidden">
                 {selectedChips.length === 0 ? (
-                  <span className="text-muted-foreground">
-                    Select options...
-                  </span>
+                  <span className="text-muted-foreground">{placeholder}</span>
                 ) : (
                   <>
                     <Badge variant={'default'}>{firstChip.label}</Badge>

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -30,6 +30,8 @@ export type SingleSelectProps = {
   name?: string;
   getValue?: (option: any) => any;
   value?: any;
+  defaultValue?: any;
+  placeholder?: string;
   dbValueProps?: {
     valueKey: string;
     isObjectId?: boolean;
@@ -78,6 +80,8 @@ export type SingleSelectProps = {
  * @param {boolean} [props.loading] - Whether options are loading
  * @param {boolean} [props.disableClear] - Whether to hide the clear button
  * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {any} [props.defaultValue] - Default value when component is uncontrolled (overridden by value prop)
+ * @param {string} [props.placeholder] - Placeholder text shown when no value is selected
  * @param {'input' | 'filter'} [props.type='input'] - Display type
  * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
  * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
@@ -101,6 +105,8 @@ export const SingleSelect = ({
   externalAxios,
   getValue,
   value,
+  defaultValue,
+  placeholder,
   onChange,
   dbValueProps = {
     valueKey: 'id',
@@ -139,6 +145,9 @@ export const SingleSelect = ({
 
   const internalAxios = externalAxios || axios;
 
+  // Prioritize value over defaultValue (value takes precedence if both exist)
+  const effectiveValue = value !== undefined ? value : defaultValue;
+
   const handleOpen = async (event: SyntheticEvent) => {
     dispatch({
       actionType: SingleSelectActionsTypes.OPEN,
@@ -211,10 +220,10 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
         stateChanges: {
           internalOptions: internalOptions.filter(
-            (o: any) => o.value === value,
+            (o: any) => o.value === effectiveValue,
           ),
           internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value === value),
+            internalOptions.filter((o: any) => o.value === effectiveValue),
           ),
         },
       });
@@ -246,7 +255,7 @@ export const SingleSelect = ({
               ...(dbValueProps.isObjectId && { isObjectId: true }),
               ...(dbValueProps.isInt && { isInt: true }),
               ...(dbValueProps.isFloat && { isFloat: true }),
-              selectedValueData: value,
+              selectedValueData: effectiveValue,
             },
             dbLabelProps: {
               search: search,
@@ -284,10 +293,10 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
         stateChanges: {
           internalOptions: internalOptions.filter(
-            (o: any) => o.value === value,
+            (o: any) => o.value === effectiveValue,
           ),
           internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value === value),
+            internalOptions.filter((o: any) => o.value === effectiveValue),
           ),
         },
       });
@@ -307,7 +316,7 @@ export const SingleSelect = ({
                 ...(dbValueProps.isObjectId && { isObjectId: true }),
                 ...(dbValueProps.isInt && { isInt: true }),
                 ...(dbValueProps.isFloat && { isFloat: true }),
-                selectedValueData: value,
+                selectedValueData: effectiveValue,
               },
               dbLabelProps: {
                 search: searchValue,
@@ -324,11 +333,11 @@ export const SingleSelect = ({
           stateChanges: {
             internalOptions: [
               ...options,
-              ...internalOptions.filter((o: any) => o.value === value),
+              ...internalOptions.filter((o: any) => o.value === effectiveValue),
             ],
             internalOptionsMap: generateOptionsMap([
               ...options,
-              ...internalOptions.filter((o: any) => o.value === value),
+              ...internalOptions.filter((o: any) => o.value === effectiveValue),
             ]),
           },
         });
@@ -360,7 +369,7 @@ export const SingleSelect = ({
             ...(dbValueProps.isObjectId && { isObjectId: true }),
             ...(dbValueProps.isInt && { isInt: true }),
             ...(dbValueProps.isFloat && { isFloat: true }),
-            selectedValueData: value,
+            selectedValueData: effectiveValue,
             filterBySelectedValues: true,
           },
           dbLabelProps,
@@ -384,7 +393,7 @@ export const SingleSelect = ({
   };
 
   useEffect(() => {
-    if (value && optionsApiEndPoint) {
+    if (effectiveValue && optionsApiEndPoint) {
       loadSelectedOptions().finally(() => {
         dispatch({
           actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
@@ -408,7 +417,8 @@ export const SingleSelect = ({
         state={state}
         optionsApiEndPoint={optionsApiEndPoint}
         getValue={getValue}
-        value={value}
+        value={effectiveValue}
+        placeholder={placeholder}
         dbLabelProps={dbLabelProps}
         {...restProps}
       />
@@ -424,7 +434,8 @@ export const SingleSelect = ({
       state={state}
       optionsApiEndPoint={optionsApiEndPoint}
       getValue={getValue}
-      value={value}
+      value={effectiveValue}
+      placeholder={placeholder}
       dbLabelProps={dbLabelProps}
       {...restProps}
     />

package/src/components/Input/SingleSelect/components/SingleInput.tsx

@@ -39,6 +39,7 @@ export const SingleInput = ({
   name,
   getValue,
   value,
+  placeholder,
   onChange,
   error,
   helperText,
@@ -140,7 +141,7 @@ export const SingleInput = ({
                   'border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
               )}
             >
-              {selectedOption?.label || 'Select an option...'}
+              {selectedOption?.label || placeholder || 'Select an option...'}
               <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
           </span>

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -15,7 +15,6 @@ import { AppLayoutProps } from './types';
  * @param {SideMenuItemProps[]} menu - Navigation menu items for the sidebar
  * @param {ReactNode | ((params: { collapsed: boolean }) => ReactNode)} [actions] - Optional action elements or function that receives collapsed state
  * @param {string} [mainContainerClassName=''] - Additional CSS classes for the main content container
- * @param {HelpDocsConfig} [helpDocsConfig] - Configuration for context-based help documentation
  * @param {boolean} [initialCollapsed] - Initial state of sidebar collapse (auto-determined on small screens)
  * @param {UserProfilePopupProps} [userProfileParams] - Configuration for user profile popup/menu
  *
@@ -41,7 +40,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   menu,
   actions,
   mainContainerClassName = '',
-  helpDocsConfig,
   initialCollapsed,
   userProfileParams,
 }) => {
@@ -53,7 +51,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
         menu={menu}
         actions={actions}
         mainContainerClassName={mainContainerClassName}
-        helpDocsConfig={helpDocsConfig}
         userProfileParams={userProfileParams}
       >
         {children}
@@ -67,7 +64,6 @@ const AppLayoutContent: React.FC<AppLayoutProps> = ({
   menu,
   actions,
   mainContainerClassName = '',
-  helpDocsConfig,
   userProfileParams,
 }) => {
   const { collapsed, setCollapsed } = useSidebar();

package/src/components/Layout/PageContent/PageContent.tsx

@@ -37,7 +37,7 @@ const PageContent = ({ children, className, styles }: PageContentProps) => {
         className,
       )}
       style={{
-        height: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 80px)`,
+        height: isSmallScreen ? 'calc(100vh - 149px)' : `calc(100vh - 85px)`,
         overflowY: 'auto',
         ...styles,
       }}

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -89,6 +89,7 @@ const Dialog = ({
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
   };
 
   return (
@@ -105,7 +106,7 @@ const Dialog = ({
         showCloseButton={showCloseButton}
       >
         {title && (
-          <DialogHeader className="pl-4 py-4 border-b">
+          <DialogHeader className="p-4 pr-0 border-b">
             <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
           </DialogHeader>
         )}

package/src/components/Navigation/DialogButton/DialogButton.tsx

@@ -102,6 +102,7 @@ export const DialogButton = ({
     lg: 'max-w-lg',
     xl: 'max-w-xl',
     '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
   };
 
   const onClose = () => {
@@ -134,7 +135,7 @@ export const DialogButton = ({
           showCloseButton={showCloseButton}
         >
           {title && (
-            <DialogHeader className="pl-4 pt-4">
+            <DialogHeader className="p-4 pr-0 border-b">
               <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
             </DialogHeader>
           )}