From 1d79237d11bff209e7cc8e35d2fe39a2a5aab2f4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 26 Jul 2024 14:14:05 +0300
Subject: [PATCH] Fixed #6122 - New Fluid component

---
 packages/metadata/src/components/index.ts     |   1 +
 .../src/autocomplete/AutoComplete.d.ts        |   4 +-
 .../src/autocomplete/AutoComplete.vue         |  13 +-
 .../src/autocomplete/BaseAutoComplete.vue     |   2 +-
 .../autocomplete/style/AutoCompleteStyle.js   |   2 +-
 packages/primevue/src/button/BaseButton.vue   |   2 +-
 packages/primevue/src/button/Button.d.ts      |   4 +-
 packages/primevue/src/button/Button.vue       |   7 +
 .../primevue/src/button/style/ButtonStyle.js  |   2 +-
 .../src/cascadeselect/BaseCascadeSelect.vue   |   2 +-
 .../src/cascadeselect/CascadeSelect.d.ts      |   4 +-
 .../src/cascadeselect/CascadeSelect.vue       |   6 +
 .../cascadeselect/style/CascadeSelectStyle.js |   2 +-
 .../src/datepicker/BaseDatePicker.vue         |   2 +-
 .../primevue/src/datepicker/DatePicker.d.ts   |   4 +-
 .../primevue/src/datepicker/DatePicker.vue    |   9 +-
 .../src/datepicker/style/DatePickerStyle.js   |   6 +-
 packages/primevue/src/fluid/BaseFluid.vue     |  16 +++
 packages/primevue/src/fluid/Fluid.d.ts        | 130 ++++++++++++++++++
 packages/primevue/src/fluid/Fluid.vue         |  15 ++
 packages/primevue/src/fluid/package.json      |  11 ++
 .../primevue/src/fluid/style/FluidStyle.d.ts  |  19 +++
 .../primevue/src/fluid/style/FluidStyle.js    |  10 ++
 .../primevue/src/fluid/style/package.json     |   6 +
 .../src/inputgroup/BaseInputGroup.vue         |   2 +-
 .../primevue/src/inputgroup/InputGroup.d.ts   |   4 +-
 .../primevue/src/inputgroup/InputGroup.vue    |  11 +-
 .../src/inputgroup/style/InputGroupStyle.js   |   4 +-
 .../primevue/src/inputmask/InputMask.d.ts     |   4 +-
 .../src/inputnumber/BaseInputNumber.vue       |   2 +-
 .../primevue/src/inputnumber/InputNumber.d.ts |   4 +-
 .../primevue/src/inputnumber/InputNumber.vue  |  10 +-
 .../src/inputnumber/style/InputNumberStyle.js |   2 +-
 .../primevue/src/inputtext/BaseInputText.vue  |   2 +-
 .../primevue/src/inputtext/InputText.d.ts     |   4 +-
 packages/primevue/src/inputtext/InputText.vue |   7 +
 .../src/inputtext/style/InputTextStyle.js     |   2 +-
 .../src/multiselect/BaseMultiSelect.vue       |   2 +-
 .../primevue/src/multiselect/MultiSelect.d.ts |   4 +-
 .../primevue/src/multiselect/MultiSelect.vue  |   8 +-
 .../src/multiselect/style/MultiSelectStyle.js |   2 +-
 .../primevue/src/password/BasePassword.vue    |   2 +-
 packages/primevue/src/password/Password.d.ts  |   4 +-
 packages/primevue/src/password/Password.vue   |   7 +
 .../src/password/style/PasswordStyle.js       |   4 +-
 packages/primevue/src/select/BaseSelect.vue   |   2 +-
 packages/primevue/src/select/Select.d.ts      |   4 +-
 packages/primevue/src/select/Select.vue       |   8 +-
 .../primevue/src/select/style/SelectStyle.js  |   2 +-
 .../src/splitbutton/BaseSplitButton.vue       |   2 +-
 .../primevue/src/splitbutton/SplitButton.d.ts |   4 +-
 .../primevue/src/splitbutton/SplitButton.vue  |   7 +
 .../src/splitbutton/style/SplitButtonStyle.js |   4 +-
 .../primevue/src/textarea/BaseTextarea.vue    |   2 +-
 packages/primevue/src/textarea/Textarea.d.ts  |   4 +-
 packages/primevue/src/textarea/Textarea.vue   |   7 +
 .../src/textarea/style/TextareaStyle.js       |   2 +-
 .../src/treeselect/BaseTreeSelect.vue         |   2 +-
 .../primevue/src/treeselect/TreeSelect.d.ts   |   4 +-
 .../primevue/src/treeselect/TreeSelect.vue    |  11 +-
 .../src/treeselect/style/TreeSelectStyle.js   |   2 +-
 61 files changed, 367 insertions(+), 70 deletions(-)
 create mode 100644 packages/primevue/src/fluid/BaseFluid.vue
 create mode 100644 packages/primevue/src/fluid/Fluid.d.ts
 create mode 100644 packages/primevue/src/fluid/Fluid.vue
 create mode 100644 packages/primevue/src/fluid/package.json
 create mode 100644 packages/primevue/src/fluid/style/FluidStyle.d.ts
 create mode 100644 packages/primevue/src/fluid/style/FluidStyle.js
 create mode 100644 packages/primevue/src/fluid/style/package.json

diff --git a/packages/metadata/src/components/index.ts b/packages/metadata/src/components/index.ts
index 6d95bd017..777aab146 100644
--- a/packages/metadata/src/components/index.ts
+++ b/packages/metadata/src/components/index.ts
@@ -11,6 +11,7 @@ export const form: MetaType[] = toMeta([
     'Dropdown',
     'Editor',
     'FloatLabel',
+    'Fluid',
     'IconField',
     'InputChips',
     'InputGroup',
diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts
index 1d99208e4..5d480acb1 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.d.ts
+++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts
@@ -503,9 +503,9 @@ export interface AutoCompleteProps {
     tabindex?: number | string | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Defines a string value that labels an interactive element.
      */
diff --git a/packages/primevue/src/autocomplete/AutoComplete.vue b/packages/primevue/src/autocomplete/AutoComplete.vue
index 4ab4665c5..40cad385d 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.vue
+++ b/packages/primevue/src/autocomplete/AutoComplete.vue
@@ -10,6 +10,7 @@
             :value="inputValue"
             :placeholder="placeholder"
             :tabindex="!disabled ? tabindex : -1"
+            :fluid="hasFluid"
             :disabled="disabled"
             :invalid="invalid"
             :variant="variant"
@@ -180,10 +181,10 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
-import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
-import { resolveFieldData, isEmpty, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
+import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
+import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Chip from 'primevue/chip';
@@ -199,6 +200,9 @@ export default {
     extends: BaseAutoComplete,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
@@ -973,6 +977,9 @@ export default {
         },
         panelId() {
             return this.id + '_panel';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/autocomplete/BaseAutoComplete.vue b/packages/primevue/src/autocomplete/BaseAutoComplete.vue
index fd953ff3c..66df8f7e4 100644
--- a/packages/primevue/src/autocomplete/BaseAutoComplete.vue
+++ b/packages/primevue/src/autocomplete/BaseAutoComplete.vue
@@ -181,7 +181,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: AutoCompleteStyle,
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index 0059ebee8..e3e2fcc9b 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -252,7 +252,7 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue || isNotEmpty(instance.inputValue),
             'p-inputwrapper-focus': instance.focused,
             'p-autocomplete-open': instance.overlayVisible,
-            'p-autocomplete-fluid': props.fluid
+            'p-autocomplete-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-autocomplete-input',
diff --git a/packages/primevue/src/button/BaseButton.vue b/packages/primevue/src/button/BaseButton.vue
index a15be6bb2..3ae70885c 100644
--- a/packages/primevue/src/button/BaseButton.vue
+++ b/packages/primevue/src/button/BaseButton.vue
@@ -84,7 +84,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: ButtonStyle,
diff --git a/packages/primevue/src/button/Button.d.ts b/packages/primevue/src/button/Button.d.ts
index e4a9e5ea3..3b309f6f1 100755
--- a/packages/primevue/src/button/Button.d.ts
+++ b/packages/primevue/src/button/Button.d.ts
@@ -179,9 +179,9 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     plain?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/button/Button.vue b/packages/primevue/src/button/Button.vue
index 775f6b31e..943421897 100755
--- a/packages/primevue/src/button/Button.vue
+++ b/packages/primevue/src/button/Button.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Badge from 'primevue/badge';
 import Ripple from 'primevue/ripple';
@@ -26,6 +27,9 @@ export default {
     name: 'Button',
     extends: BaseButton,
     inheritAttrs: false,
+    inject: {
+        $pcFluid: { default: null }
+    },
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -60,6 +64,9 @@ export default {
                 'data-p-disabled': this.disabled,
                 'data-p-severity': this.severity
             };
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index 9ab25c5eb..d0fa7bffd 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -616,7 +616,7 @@ const classes = {
             'p-button-sm': props.size === 'small',
             'p-button-lg': props.size === 'large',
             'p-button-plain': props.plain,
-            'p-button-fluid': props.fluid
+            'p-button-fluid': instance.hasFluid
         }
     ],
     loadingIcon: 'p-button-loading-icon',
diff --git a/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue b/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
index cc5f711df..1cf8e5cb6 100644
--- a/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
+++ b/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
@@ -134,7 +134,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: CascadeSelectStyle,
diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
index 5d662076d..38b385577 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
@@ -421,9 +421,9 @@ export interface CascadeSelectProps {
     tabindex?: number | string | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.vue b/packages/primevue/src/cascadeselect/CascadeSelect.vue
index 5cc3b7fef..5e7196a6f 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.vue
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.vue
@@ -103,6 +103,9 @@ export default {
     extends: BaseCascadeSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -774,6 +777,9 @@ export default {
         },
         focusedOptionId() {
             return this.focusedOptionInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index 2b82d4d29..eb0629b44 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -201,7 +201,7 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-cascadeselect-open': instance.overlayVisible,
-            'p-cascadeselect-fluid': props.fluid
+            'p-cascadeselect-fluid': instance.hasFluid
         }
     ],
     label: ({ instance, props }) => [
diff --git a/packages/primevue/src/datepicker/BaseDatePicker.vue b/packages/primevue/src/datepicker/BaseDatePicker.vue
index 75607bff5..bb851a002 100644
--- a/packages/primevue/src/datepicker/BaseDatePicker.vue
+++ b/packages/primevue/src/datepicker/BaseDatePicker.vue
@@ -234,7 +234,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         ariaLabelledby: {
             type: String,
diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/packages/primevue/src/datepicker/DatePicker.d.ts
index 49f5d110c..3c241b3ef 100755
--- a/packages/primevue/src/datepicker/DatePicker.d.ts
+++ b/packages/primevue/src/datepicker/DatePicker.d.ts
@@ -786,9 +786,9 @@ export interface DatePickerProps {
     timepickerButtonProps?: object | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
index e45f3f283..fd645695e 100755
--- a/packages/primevue/src/datepicker/DatePicker.vue
+++ b/packages/primevue/src/datepicker/DatePicker.vue
@@ -12,6 +12,7 @@
             :name="name"
             :invalid="invalid"
             :variant="variant"
+            :fluid="fluid"
             :unstyled="unstyled"
             autocomplete="off"
             aria-autocomplete="none"
@@ -531,7 +532,7 @@
 
 <script>
 import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
-import { localeComparator } from '@primeuix/utils/object';
+import { isEmpty, localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
@@ -551,6 +552,9 @@ export default {
     extends: BaseDatePicker,
     inheritAttrs: false,
     emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     navigationState: null,
     timePickerChange: false,
     scrollHandler: null,
@@ -2943,6 +2947,9 @@ export default {
         },
         panelId() {
             return this.d_id + '_panel';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index a4a167dea..b871b7975 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -370,14 +370,14 @@ const inlineStyles = {
 };
 
 const classes = {
-    root: ({ props, state }) => [
+    root: ({ instance, props, state }) => [
         'p-datepicker p-component p-inputwrapper',
         {
             'p-invalid': props.invalid,
-            'p-datepicker-fluid': props.fluid,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': state.focused,
-            'p-focus': state.focused || state.overlayVisible
+            'p-focus': state.focused || state.overlayVisible,
+            'p-datepicker-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-datepicker-input',
diff --git a/packages/primevue/src/fluid/BaseFluid.vue b/packages/primevue/src/fluid/BaseFluid.vue
new file mode 100644
index 000000000..98a6afb96
--- /dev/null
+++ b/packages/primevue/src/fluid/BaseFluid.vue
@@ -0,0 +1,16 @@
+<script>
+import BaseComponent from '@primevue/core/basecomponent';
+import FluidStyle from 'primevue/fluid/style';
+
+export default {
+    name: 'BaseFluid',
+    extends: BaseComponent,
+    style: FluidStyle,
+    provide() {
+        return {
+            $pcFluid: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/packages/primevue/src/fluid/Fluid.d.ts b/packages/primevue/src/fluid/Fluid.d.ts
new file mode 100644
index 000000000..dda785c65
--- /dev/null
+++ b/packages/primevue/src/fluid/Fluid.d.ts
@@ -0,0 +1,130 @@
+/**
+ *
+ * Fluid spans 100% width of the container.
+ *
+ * [Live Demo](https://www.primevue.org/fluid/)
+ *
+ * @module fluid
+ *
+ */
+import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { ComponentHooks } from '@primevue/core/basecomponent';
+import type { PassThroughOptions } from 'primevue/passthrough';
+import { TransitionProps, VNode } from 'vue';
+
+export declare type FluidPassThroughOptionType = FluidPassThroughAttributes | ((options: FluidPassThroughMethodOptions) => FluidPassThroughAttributes | string) | string | null | undefined;
+
+export declare type FluidPassThroughTransitionType = TransitionProps | ((options: FluidPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FluidPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: FluidProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FluidProps.pt}
+ */
+export interface FluidPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: FluidPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FluidPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Fluid component.
+ */
+export interface FluidProps {
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {FluidPassThroughOptions}
+     */
+    pt?: PassThrough<FluidPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Fluid component.
+ */
+export interface FluidSlots {
+    /**
+     * Default content slot.
+     */
+    default: () => VNode[];
+}
+
+/**
+ * Defines valid emits in Fluid component.
+ */
+export interface FluidEmitsOptions {}
+
+export declare type FluidEmits = EmitFn<FluidEmitsOptions>;
+
+/**
+ * **PrimeVue - Fluid**
+ *
+ * _Fluid spans 100% width of the container._
+ *
+ * [Live Demo](https://www.primevue.org/fluid/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Fluid: DefineComponent<FluidProps, FluidSlots, FluidEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Fluid: GlobalComponentConstructor<FluidProps, FluidSlots, FluidEmits>;
+    }
+}
+
+export default Fluid;
diff --git a/packages/primevue/src/fluid/Fluid.vue b/packages/primevue/src/fluid/Fluid.vue
new file mode 100644
index 000000000..985f4550a
--- /dev/null
+++ b/packages/primevue/src/fluid/Fluid.vue
@@ -0,0 +1,15 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseFluid from './BaseFluid.vue';
+
+export default {
+    name: 'Fluid',
+    extends: BaseFluid,
+    inheritAttrs: false
+};
+</script>
diff --git a/packages/primevue/src/fluid/package.json b/packages/primevue/src/fluid/package.json
new file mode 100644
index 000000000..dd1341f3c
--- /dev/null
+++ b/packages/primevue/src/fluid/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./Fluid.vue",
+    "module": "./Fluid.vue",
+    "types": "./Fluid.d.ts",
+    "browser": {
+        "./sfc": "./Fluid.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/packages/primevue/src/fluid/style/FluidStyle.d.ts b/packages/primevue/src/fluid/style/FluidStyle.d.ts
new file mode 100644
index 000000000..d7cbe1bf3
--- /dev/null
+++ b/packages/primevue/src/fluid/style/FluidStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * Fluid spans 100% width of the container.
+ *
+ * [Live Demo](https://www.primevue.org/fluid/)
+ *
+ * @module fluidstyle
+ *
+ */
+import type { BaseStyle } from '@primevue/core/base/style';
+
+export enum FluidClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-fluid'
+}
+
+export interface FluidStyle extends BaseStyle {}
diff --git a/packages/primevue/src/fluid/style/FluidStyle.js b/packages/primevue/src/fluid/style/FluidStyle.js
new file mode 100644
index 000000000..1b08c6b52
--- /dev/null
+++ b/packages/primevue/src/fluid/style/FluidStyle.js
@@ -0,0 +1,10 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const classes = {
+    root: 'p-fluid'
+};
+
+export default BaseStyle.extend({
+    name: 'fluid',
+    classes
+});
diff --git a/packages/primevue/src/fluid/style/package.json b/packages/primevue/src/fluid/style/package.json
new file mode 100644
index 000000000..88535ee32
--- /dev/null
+++ b/packages/primevue/src/fluid/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./FluidStyle.js",
+    "module": "./FluidStyle.js",
+    "types": "./FluidStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/packages/primevue/src/inputgroup/BaseInputGroup.vue b/packages/primevue/src/inputgroup/BaseInputGroup.vue
index 05fc62e9b..f3e16c3d0 100644
--- a/packages/primevue/src/inputgroup/BaseInputGroup.vue
+++ b/packages/primevue/src/inputgroup/BaseInputGroup.vue
@@ -8,7 +8,7 @@ export default {
     props: {
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: InputGroupStyle,
diff --git a/packages/primevue/src/inputgroup/InputGroup.d.ts b/packages/primevue/src/inputgroup/InputGroup.d.ts
index 6080ac0f9..0c03bbafb 100644
--- a/packages/primevue/src/inputgroup/InputGroup.d.ts
+++ b/packages/primevue/src/inputgroup/InputGroup.d.ts
@@ -69,9 +69,9 @@ export interface InputGroupPassThroughAttributes {
 export interface InputGroupProps {
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/inputgroup/InputGroup.vue b/packages/primevue/src/inputgroup/InputGroup.vue
index 2d162da50..a3f5794ad 100644
--- a/packages/primevue/src/inputgroup/InputGroup.vue
+++ b/packages/primevue/src/inputgroup/InputGroup.vue
@@ -5,11 +5,20 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import BaseInputGroup from './BaseInputGroup.vue';
 
 export default {
     name: 'InputGroup',
     extends: BaseInputGroup,
-    inheritAttrs: false
+    inheritAttrs: false,
+    inject: {
+        $pcFluid: { default: null }
+    },
+    computed: {
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        }
+    }
 };
 </script>
diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
index d5d836be8..456986b2e 100644
--- a/packages/primevue/src/inputgroup/style/InputGroupStyle.js
+++ b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
@@ -102,10 +102,10 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-inputgroup',
         {
-            'p-inputgroup-fluid': props.fluid
+            'p-inputgroup-fluid': instance.hasFluid
         }
     ]
 };
diff --git a/packages/primevue/src/inputmask/InputMask.d.ts b/packages/primevue/src/inputmask/InputMask.d.ts
index 24e370502..c926fde3c 100755
--- a/packages/primevue/src/inputmask/InputMask.d.ts
+++ b/packages/primevue/src/inputmask/InputMask.d.ts
@@ -151,9 +151,9 @@ export interface InputMaskProps {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
diff --git a/packages/primevue/src/inputnumber/BaseInputNumber.vue b/packages/primevue/src/inputnumber/BaseInputNumber.vue
index 9448dfeeb..8c9eb8ac1 100644
--- a/packages/primevue/src/inputnumber/BaseInputNumber.vue
+++ b/packages/primevue/src/inputnumber/BaseInputNumber.vue
@@ -135,7 +135,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,
diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/packages/primevue/src/inputnumber/InputNumber.d.ts
index 558904fe1..a837653fe 100755
--- a/packages/primevue/src/inputnumber/InputNumber.d.ts
+++ b/packages/primevue/src/inputnumber/InputNumber.d.ts
@@ -336,9 +336,9 @@ export interface InputNumberProps {
     placeholder?: string | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * 	Identifier of the focus input to match a label defined for the chips.
      */
diff --git a/packages/primevue/src/inputnumber/InputNumber.vue b/packages/primevue/src/inputnumber/InputNumber.vue
index 99d09455d..930ec333e 100755
--- a/packages/primevue/src/inputnumber/InputNumber.vue
+++ b/packages/primevue/src/inputnumber/InputNumber.vue
@@ -72,8 +72,8 @@
 </template>
 
 <script>
-import { getSelection, clearSelection } from '@primeuix/utils/dom';
-import { isNotEmpty } from '@primeuix/utils/object';
+import { clearSelection, getSelection } from '@primeuix/utils/dom';
+import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
 import AngleDownIcon from '@primevue/icons/angledown';
 import AngleUpIcon from '@primevue/icons/angleup';
 import InputText from 'primevue/inputtext';
@@ -84,6 +84,9 @@ export default {
     extends: BaseInputNumber,
     inheritAttrs: false,
     emits: ['update:modelValue', 'input', 'focus', 'blur'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     numberFormat: null,
     _numeral: null,
     _decimal: null,
@@ -977,6 +980,9 @@ export default {
         },
         getFormatter() {
             return this.numberFormat;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
index c08f06932..98234bb85 100644
--- a/packages/primevue/src/inputnumber/style/InputNumberStyle.js
+++ b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
@@ -153,7 +153,7 @@ const classes = {
             'p-inputnumber-stacked': props.showButtons && props.buttonLayout === 'stacked',
             'p-inputnumber-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
             'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical',
-            'p-inputnumber-fluid': instance.fluid
+            'p-inputnumber-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-inputnumber-input',
diff --git a/packages/primevue/src/inputtext/BaseInputText.vue b/packages/primevue/src/inputtext/BaseInputText.vue
index 05da21cc0..4bba32110 100644
--- a/packages/primevue/src/inputtext/BaseInputText.vue
+++ b/packages/primevue/src/inputtext/BaseInputText.vue
@@ -21,7 +21,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: InputTextStyle,
diff --git a/packages/primevue/src/inputtext/InputText.d.ts b/packages/primevue/src/inputtext/InputText.d.ts
index b6784dcff..615b9635a 100755
--- a/packages/primevue/src/inputtext/InputText.d.ts
+++ b/packages/primevue/src/inputtext/InputText.d.ts
@@ -103,9 +103,9 @@ export interface InputTextProps extends InputHTMLAttributes {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/inputtext/InputText.vue b/packages/primevue/src/inputtext/InputText.vue
index e0e35851b..9a76a50f7 100755
--- a/packages/primevue/src/inputtext/InputText.vue
+++ b/packages/primevue/src/inputtext/InputText.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import BaseInputText from './BaseInputText.vue';
 
 export default {
@@ -10,6 +11,9 @@ export default {
     extends: BaseInputText,
     inheritAttrs: false,
     emits: ['update:modelValue'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -28,6 +32,9 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     }
 };
diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js
index a62b77730..f4f4f8256 100644
--- a/packages/primevue/src/inputtext/style/InputTextStyle.js
+++ b/packages/primevue/src/inputtext/style/InputTextStyle.js
@@ -75,7 +75,7 @@ const classes = {
             'p-inputtext-lg': props.size === 'large',
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
-            'p-inputtext-fluid': props.fluid
+            'p-inputtext-fluid': instance.hasFluid
         }
     ]
 };
diff --git a/packages/primevue/src/multiselect/BaseMultiSelect.vue b/packages/primevue/src/multiselect/BaseMultiSelect.vue
index bdbec7cee..0625302ec 100644
--- a/packages/primevue/src/multiselect/BaseMultiSelect.vue
+++ b/packages/primevue/src/multiselect/BaseMultiSelect.vue
@@ -32,7 +32,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,
diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/packages/primevue/src/multiselect/MultiSelect.d.ts
index 12f732bf0..83c60ed0c 100755
--- a/packages/primevue/src/multiselect/MultiSelect.d.ts
+++ b/packages/primevue/src/multiselect/MultiSelect.d.ts
@@ -370,9 +370,9 @@ export interface MultiSelectProps {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Identifier of the underlying input element.
      */
diff --git a/packages/primevue/src/multiselect/MultiSelect.vue b/packages/primevue/src/multiselect/MultiSelect.vue
index 7aeeb9887..c77a9051e 100755
--- a/packages/primevue/src/multiselect/MultiSelect.vue
+++ b/packages/primevue/src/multiselect/MultiSelect.vue
@@ -206,7 +206,7 @@
 
 <script>
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
-import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
+import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
@@ -231,6 +231,9 @@ export default {
     extends: BaseMultiSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -1111,6 +1114,9 @@ export default {
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     directives: {
diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
index ef9ef3f9b..6820d06a8 100644
--- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js
+++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
@@ -212,7 +212,7 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-multiselect-open': instance.overlayVisible,
-            'p-multiselect-fluid': props.fluid
+            'p-multiselect-fluid': instance.hasFluid
         }
     ],
     labelContainer: 'p-multiselect-label-container',
diff --git a/packages/primevue/src/password/BasePassword.vue b/packages/primevue/src/password/BasePassword.vue
index ec24b08bb..f87e62d9b 100644
--- a/packages/primevue/src/password/BasePassword.vue
+++ b/packages/primevue/src/password/BasePassword.vue
@@ -81,7 +81,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,
diff --git a/packages/primevue/src/password/Password.d.ts b/packages/primevue/src/password/Password.d.ts
index de2c4947c..aecc3db3e 100755
--- a/packages/primevue/src/password/Password.d.ts
+++ b/packages/primevue/src/password/Password.d.ts
@@ -249,9 +249,9 @@ export interface PasswordProps extends InputHTMLAttributes {
     required?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Identifier of the underlying input element.
      */
diff --git a/packages/primevue/src/password/Password.vue b/packages/primevue/src/password/Password.vue
index de55db230..e662d2918 100755
--- a/packages/primevue/src/password/Password.vue
+++ b/packages/primevue/src/password/Password.vue
@@ -66,6 +66,7 @@
 
 <script>
 import { absolutePosition, addStyle, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
+import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import EyeIcon from '@primevue/icons/eye';
@@ -80,6 +81,9 @@ export default {
     extends: BasePassword,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     data() {
         return {
             id: this.$attrs.id,
@@ -319,6 +323,9 @@ export default {
         },
         overlayUniqueId() {
             return this.id + '_overlay';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/password/style/PasswordStyle.js b/packages/primevue/src/password/style/PasswordStyle.js
index a4f0fc8f0..c76719043 100644
--- a/packages/primevue/src/password/style/PasswordStyle.js
+++ b/packages/primevue/src/password/style/PasswordStyle.js
@@ -83,12 +83,12 @@ const inlineStyles = {
 };
 
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ instance }) => [
         'p-password p-component p-inputwrapper',
         {
             'p-inputwrapper-filled': instance.filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-password-fluid': props.fluid
+            'p-password-fluid': instance.hasFluid
         }
     ],
     pcInput: 'p-password-input',
diff --git a/packages/primevue/src/select/BaseSelect.vue b/packages/primevue/src/select/BaseSelect.vue
index 41d58fa9c..9d7a4c4be 100644
--- a/packages/primevue/src/select/BaseSelect.vue
+++ b/packages/primevue/src/select/BaseSelect.vue
@@ -52,7 +52,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,
diff --git a/packages/primevue/src/select/Select.d.ts b/packages/primevue/src/select/Select.d.ts
index 3bcd3485b..61eed1878 100755
--- a/packages/primevue/src/select/Select.d.ts
+++ b/packages/primevue/src/select/Select.d.ts
@@ -377,9 +377,9 @@ export interface SelectProps {
     showClear?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * @deprecated since v4.0. Use 'labelId' instead.
      * Identifier of the underlying input element.
diff --git a/packages/primevue/src/select/Select.vue b/packages/primevue/src/select/Select.vue
index a2cfe921e..18fd894da 100755
--- a/packages/primevue/src/select/Select.vue
+++ b/packages/primevue/src/select/Select.vue
@@ -191,7 +191,7 @@
 
 <script>
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isAndroid, isTouchDevice, isVisible, relativePosition } from '@primeuix/utils/dom';
-import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
+import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
@@ -215,6 +215,9 @@ export default {
     extends: BaseSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -995,6 +998,9 @@ export default {
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     directives: {
diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js
index 31e3ab8b6..ac42d0c07 100644
--- a/packages/primevue/src/select/style/SelectStyle.js
+++ b/packages/primevue/src/select/style/SelectStyle.js
@@ -204,7 +204,7 @@ const classes = {
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
             'p-select-open': state.overlayVisible,
-            'p-select-fluid': props.fluid
+            'p-select-fluid': instance.hasFluid
         }
     ],
     label: ({ instance, props }) => [
diff --git a/packages/primevue/src/splitbutton/BaseSplitButton.vue b/packages/primevue/src/splitbutton/BaseSplitButton.vue
index b764097b7..f56a96e05 100644
--- a/packages/primevue/src/splitbutton/BaseSplitButton.vue
+++ b/packages/primevue/src/splitbutton/BaseSplitButton.vue
@@ -36,7 +36,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         class: {
             type: null,
diff --git a/packages/primevue/src/splitbutton/SplitButton.d.ts b/packages/primevue/src/splitbutton/SplitButton.d.ts
index 824f94744..ea111ed19 100755
--- a/packages/primevue/src/splitbutton/SplitButton.d.ts
+++ b/packages/primevue/src/splitbutton/SplitButton.d.ts
@@ -149,9 +149,9 @@ export interface SplitButtonProps {
     disabled?: boolean | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Style class of the component.
      */
diff --git a/packages/primevue/src/splitbutton/SplitButton.vue b/packages/primevue/src/splitbutton/SplitButton.vue
index 45d0da805..8e88c915f 100755
--- a/packages/primevue/src/splitbutton/SplitButton.vue
+++ b/packages/primevue/src/splitbutton/SplitButton.vue
@@ -63,6 +63,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import { UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import Button from 'primevue/button';
@@ -74,6 +75,9 @@ export default {
     extends: BaseSplitButton,
     inheritAttrs: false,
     emits: ['click'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     data() {
         return {
             id: this.$attrs.id,
@@ -118,6 +122,9 @@ export default {
     computed: {
         containerClass() {
             return [this.cx('root'), this.class];
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js
index f4e2dd029..48273520e 100644
--- a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js
+++ b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js
@@ -52,12 +52,12 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance, props }) => [
         'p-splitbutton p-component',
         {
             'p-splitbutton-raised': props.raised,
             'p-splitbutton-rounded': props.rounded,
-            'p-splitbutton-fluid': props.fluid
+            'p-splitbutton-fluid': instance.hasFluid
         }
     ],
     pcButton: 'p-splitbutton-button',
diff --git a/packages/primevue/src/textarea/BaseTextarea.vue b/packages/primevue/src/textarea/BaseTextarea.vue
index b068bfd49..8a479fe8d 100644
--- a/packages/primevue/src/textarea/BaseTextarea.vue
+++ b/packages/primevue/src/textarea/BaseTextarea.vue
@@ -18,7 +18,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         }
     },
     style: TextareaStyle,
diff --git a/packages/primevue/src/textarea/Textarea.d.ts b/packages/primevue/src/textarea/Textarea.d.ts
index 9625a6562..7c4c7ee81 100755
--- a/packages/primevue/src/textarea/Textarea.d.ts
+++ b/packages/primevue/src/textarea/Textarea.d.ts
@@ -109,9 +109,9 @@ export interface TextareaProps extends TextareaHTMLAttributes {
     variant?: 'outlined' | 'filled' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/textarea/Textarea.vue b/packages/primevue/src/textarea/Textarea.vue
index 2bcc9b601..2419176a9 100755
--- a/packages/primevue/src/textarea/Textarea.vue
+++ b/packages/primevue/src/textarea/Textarea.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { isEmpty } from '@primeuix/utils/object';
 import BaseTextarea from './BaseTextarea.vue';
 
 export default {
@@ -10,6 +11,9 @@ export default {
     extends: BaseTextarea,
     inheritAttrs: false,
     emits: ['update:modelValue'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     mounted() {
         if (this.$el.offsetParent && this.autoResize) {
             this.resize();
@@ -50,6 +54,9 @@ export default {
                     disabled: this.$attrs.disabled || this.$attrs.disabled === ''
                 }
             };
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     }
 };
diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js
index 39ab06915..e452af4ca 100644
--- a/packages/primevue/src/textarea/style/TextareaStyle.js
+++ b/packages/primevue/src/textarea/style/TextareaStyle.js
@@ -69,7 +69,7 @@ const classes = {
             'p-textarea-resizable ': props.autoResize,
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
-            'p-textarea-fluid': props.fluid
+            'p-textarea-fluid': instance.hasFluid
         }
     ]
 };
diff --git a/packages/primevue/src/treeselect/BaseTreeSelect.vue b/packages/primevue/src/treeselect/BaseTreeSelect.vue
index af9304b49..0ed012ce8 100644
--- a/packages/primevue/src/treeselect/BaseTreeSelect.vue
+++ b/packages/primevue/src/treeselect/BaseTreeSelect.vue
@@ -54,7 +54,7 @@ export default {
         },
         fluid: {
             type: Boolean,
-            default: false
+            default: null
         },
         inputId: {
             type: String,
diff --git a/packages/primevue/src/treeselect/TreeSelect.d.ts b/packages/primevue/src/treeselect/TreeSelect.d.ts
index f0e64c50c..1455fb5ca 100644
--- a/packages/primevue/src/treeselect/TreeSelect.d.ts
+++ b/packages/primevue/src/treeselect/TreeSelect.d.ts
@@ -206,9 +206,9 @@ export interface TreeSelectProps {
     selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
     /**
      * Spans 100% width of the container when enabled.
-     * @defaultValue false
+     * @defaultValue null
      */
-    fluid?: boolean;
+    fluid?: boolean | undefined;
     /**
      * Style class of the overlay panel.
      */
diff --git a/packages/primevue/src/treeselect/TreeSelect.vue b/packages/primevue/src/treeselect/TreeSelect.vue
index 5df7f61e8..5b6b139c0 100644
--- a/packages/primevue/src/treeselect/TreeSelect.vue
+++ b/packages/primevue/src/treeselect/TreeSelect.vue
@@ -111,9 +111,10 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
-import { focus, getFirstFocusableElement, getLastFocusableElement, find, findSingle, getFocusableElements, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice } from '@primeuix/utils/dom';
+import { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
+import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import Chip from 'primevue/chip';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -127,6 +128,9 @@ export default {
     extends: BaseTreeSelect,
     inheritAttrs: false,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
+    inject: {
+        $pcFluid: { default: null }
+    },
     data() {
         return {
             id: this.$attrs.id,
@@ -502,6 +506,9 @@ export default {
         },
         listId() {
             return this.id + '_list';
+        },
+        hasFluid() {
+            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index 0f8b2612a..dc637080f 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -148,7 +148,7 @@ const classes = {
             'p-inputwrapper-filled': !instance.emptyValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-treeselect-open': instance.overlayVisible,
-            'p-treeselect-fluid': props.fluid
+            'p-treeselect-fluid': instance.hasFluid
         }
     ],
     labelContainer: 'p-treeselect-label-container',