@flightlesslabs/dodo-ui 0.10.3 → 0.11.1

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte.d.ts

@@ -19,8 +19,6 @@ export interface CalendarDateChipProps {
     selected?: boolean;
     /** onselect event handler */
     onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
-    /** onselectRange event handler */
-    onselectRange?: (value: Date, type: DateRangeType, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
     /** Custom Calendar Chip Content */
     customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
     /** Custom Calendar Chip Content */
@@ -33,17 +31,13 @@ export interface CalendarDateChipProps {
     timezone?: string;
     /** Whether to return the time in UTC. If true, overrides timezone. */
     utc?: boolean;
-    /** Show Value Range */
-    showValueRange?: boolean;
-    /** Date Range Type */
-    rangeType?: DateRangeType;
 }
 import type { ComponentColor } from '../../../../../../../types/colors.js';
 import type { ComponentRoundness } from '../../../../../../../types/roundness.js';
 import type { Snippet } from 'svelte';
 import type { ButtonClickEvent } from '../../../../../Form/Button/Button.svelte';
 import type { ComponentSize } from '../../../../../../../types/size.js';
-import type { DateOfMonth, DateRangeType } from '../../../utils/types.js';
+import type { DateOfMonth } from '../../../utils/types.js';
 declare const CalendarDateChip: import("svelte").Component<CalendarDateChipProps, {}, "ref">;
 type CalendarDateChip = ReturnType<typeof CalendarDateChip>;
 export default CalendarDateChip;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/utils/scss/mixins.scss

@@ -56,22 +56,6 @@
   --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
     --dodo-color-#{$color-name}-100
   );
-
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
-
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
 }
 
 /// Mixin: generate-dodo-ui-calendarDateChip-color
@@ -119,35 +103,5 @@
         }
       }
     }
-
-    &.isRangeStart {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-active-bg);
-        }
-      }
-    }
-
-    &.isRangeEnd {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-active-bg);
-        }
-      }
-    }
   }
 }

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte

@@ -83,3 +83,17 @@ const { Story } = defineMeta({
     showNextMonth: false,
   }}
 />
+
+<Story
+  name="ManipulateDate"
+  args={{
+    manipulateDate: (dateToModify: DateOfMonth) => {
+      // Disable all Fridays
+      if (getMoment(dateToModify.date, undefined).day() === 5) {
+        dateToModify.disabled = true;
+      }
+
+      return dateToModify;
+    },
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte

@@ -2,10 +2,10 @@
 </script>
 
 <script lang="ts">import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import getDatesOfMonth from '../../utils/getDatesOfMonth.js';
 import CalendarDateChip, {} from './CalendarDateChip/CalendarDateChip.svelte';
 import CalendarWeek from './CalendarWeek/CalendarWeek.svelte';
-let { class: className = '', ref = $bindable(), value, startOfWeek, timezone, utc, calendarDateChipProps, color, showToday, showLastMonth, showNextMonth, showSelected = true, activeMonth, onselect, customCalendarDateChipContent, customCalendarDateChip, today, minDate, maxDate, excludeDates, includeDates, weekDayNameType, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, rangeValue, onselectRange, } = $props();
+import { getDatesOfMonth } from '../../../../../../index.js';
+let { class: className = '', ref = $bindable(), value, startOfWeek, timezone, utc, calendarDateChipProps, color, showToday, showLastMonth, showNextMonth, showSelected = true, activeMonth, onselect, customCalendarDateChipContent, customCalendarDateChip, today, minDate, maxDate, excludeDates, includeDates, weekDayNameType, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, manipulateDate, } = $props();
 let monthToPick = $state(undefined);
 const daysGroup = $derived(getDatesOfMonth(monthToPick, {
     startOfWeek,
@@ -16,26 +16,7 @@ const daysGroup = $derived(getDatesOfMonth(monthToPick, {
     maxDate,
     excludeDates,
     includeDates,
-    rangeValue,
-}) || []);
-function getRangeType(day, rangeValue) {
-    if (!rangeValue) {
-        return undefined;
-    }
-    const [range1, range2] = rangeValue;
-    if (!range1 || !range2) {
-        return undefined;
-    }
-    if (getMoment(range1, undefined, { timezone, utc }).format('MMM YYYY') ===
-        getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')) {
-        return 'start';
-    }
-    else if (getMoment(range2, undefined, { timezone, utc }).format('MMM YYYY') ===
-        getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')) {
-        return 'end';
-    }
-    return undefined;
-}
+}, manipulateDate) || []);
 $effect(() => {
     if (!value) {
         monthToPick = activeMonth;
@@ -92,9 +73,6 @@ $effect(() => {
             )
               ? true
               : false}
-            showValueRange={rangeValue ? true : false}
-            rangeType={getRangeType(day, rangeValue)}
-            {onselectRange}
             {...calendarDateChipProps}
           />
         {/each}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte.d.ts

@@ -38,8 +38,6 @@ export interface CalendarDatesChartProps {
     includeDates?: Date[];
     /** onselect event handler */
     onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
-    /** onselectRange event handler */
-    onselectRange?: (value: Date, type: DateRangeType, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
     /** Custom Calendar Chip Content */
     customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
     /** Custom Calendar Chip */
@@ -56,15 +54,16 @@ export interface CalendarDatesChartProps {
     weekendDays?: CalendarWeekNames[];
     /** Color Weekend days */
     weekendDaysColorDays?: boolean;
-    /** Range value */
-    rangeValue?: [Date, Date];
+    /** manipulate date callback */
+    manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth;
 }
 import type { ComponentColor } from '../../../../../../types/colors.js';
 import type { Snippet } from 'svelte';
-import type { DateOfMonth, DateRangeType } from '../../utils/types.js';
+import type { DateOfMonth } from '../../utils/types.js';
 import { type CalendarDateChipProps } from './CalendarDateChip/CalendarDateChip.svelte';
 import type { CalendarWeekOption, CalendarWeekDayNameType, CalendarWeekNames } from './CalendarWeek/CalendarWeek.svelte';
 import type { ComponentSize } from '../../../../../../types/size.js';
+import type { CreateDatesOfMonthSettings } from '../../utils/createDateOfMonth/createDateOfMonth.js';
 declare const CalendarDatesChart: import("svelte").Component<CalendarDatesChartProps, {}, "ref">;
 type CalendarDatesChart = ReturnType<typeof CalendarDatesChart>;
 export default CalendarDatesChart;

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.d.ts

@@ -0,0 +1,27 @@
+import type { DateOfMonth } from '../types.js';
+import type { CalendarWeekNames } from '../../../../../../index.js';
+/** Settings for generating calendar dates */
+export interface CreateDatesOfMonthSettings {
+    startOfWeek?: CalendarWeekNames;
+    showLastMonth?: boolean;
+    showNextMonth?: boolean;
+    today?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    excludeDates?: Date[];
+    includeDates?: Date[];
+    timezone?: string;
+    utc?: boolean;
+}
+export type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
+/**
+ * Generates a DateOfMonth object with metadata for a specific day, including
+ * whether it's part of the current month, disabled, or today.
+ *
+ * @param date - The day to convert.
+ * @param settings - Optional configuration settings.
+ * @param monthType - Specifies if the day belongs to the current, previous, or next month.
+ * @param manipulateDate - Optional function to customize the resulting date object.
+ * @returns A DateOfMonth object representing the day.
+ */
+export default function createDateOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, monthType?: CreateDateOfMonthType, manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth): DateOfMonth;

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js

@@ -0,0 +1,72 @@
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+/**
+ * Creates a moment object from a Date with optional timezone and UTC settings.
+ */
+function dateMoment(date, settings) {
+    return getMoment(date, undefined, {
+        timezone: settings?.timezone,
+        utc: settings?.utc,
+    });
+}
+/**
+ * Determines if the given day matches "today" (manual or actual).
+ */
+function getIsToday(dayMoment, todayDate, todayManual) {
+    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+    return todayManual === dayDateFormat || todayDate === dayDateFormat;
+}
+/**
+ * Determines if a date should be disabled based on limits and included/excluded lists.
+ */
+function getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates) {
+    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+    if (minDate?.isValid() && dayMoment.isBefore(minDate))
+        return true;
+    if (maxDate?.isValid() && dayMoment.isAfter(maxDate))
+        return true;
+    if (excludeDates?.includes(dayDateFormat))
+        return true;
+    if (includeDates && !includeDates.includes(dayDateFormat))
+        return true;
+    return false;
+}
+/**
+ * Generates a DateOfMonth object with metadata for a specific day, including
+ * whether it's part of the current month, disabled, or today.
+ *
+ * @param date - The day to convert.
+ * @param settings - Optional configuration settings.
+ * @param monthType - Specifies if the day belongs to the current, previous, or next month.
+ * @param manipulateDate - Optional function to customize the resulting date object.
+ * @returns A DateOfMonth object representing the day.
+ */
+export default function createDateOfMonth(date, settings, monthType = 'currentMonth', manipulateDate) {
+    const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
+    const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
+    const excludeDates = settings?.excludeDates?.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'));
+    const includeDates = settings?.includeDates?.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'));
+    const todayDate = dateMoment(undefined, settings).format('DD-MM-YYYY');
+    const todayManual = settings?.today
+        ? dateMoment(settings.today, settings).format('DD-MM-YYYY')
+        : undefined;
+    const dayMoment = dateMoment(date, settings);
+    let dataToExport = {
+        id: `${dayMoment.valueOf()}`,
+        date: dayMoment.toDate(),
+        isCurrentMonth: true,
+        disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
+        today: getIsToday(dayMoment, todayDate, todayManual),
+    };
+    if (monthType === 'lastMonth') {
+        dataToExport.isLastMonth = true;
+        dataToExport.isCurrentMonth = false;
+    }
+    else if (monthType === 'nextMonth') {
+        dataToExport.isNextMonth = true;
+        dataToExport.isCurrentMonth = false;
+    }
+    if (manipulateDate) {
+        dataToExport = manipulateDate(dataToExport, settings);
+    }
+    return dataToExport;
+}

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx

@@ -0,0 +1,121 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# `createDateOfMonth`
+
+`createDateOfMonth(date, settings, monthType?, manipulateDate?)` creates a single `DateOfMonth` object representing one calendar cell. This is typically used internally by `getDatesOfMonth` but can be useful for custom logic.
+
+## Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Manual usage for one day
+import { createDateOfMonth } from '@flightlesslabs/dodo-ui';
+
+const date = new Date();
+const dateObj = createDateOfMonth(date, {
+minDate: new Date('2025-01-01'),
+timezone: 'UTC',
+}, 'currentMonth');
+`}
+/>
+
+---
+
+# Types
+
+## `DateOfMonth`
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Represents a single calendar cell
+type DateOfMonth = {
+  id: string;
+  date: Date;
+  isCurrentMonth: boolean;
+  isLastMonth?: boolean;
+  isNextMonth?: boolean;
+  disabled?: boolean;
+  today?: boolean;
+};
+`}
+/>
+
+## `CreateDatesOfMonthSettings`
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Configuration for calendar generation
+interface CreateDatesOfMonthSettings {
+  startOfWeek?: 'SUN' | 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT';
+  showLastMonth?: boolean;
+  showNextMonth?: boolean;
+  today?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  excludeDates?: Date[];
+  includeDates?: Date[];
+  timezone?: string;
+  utc?: boolean;
+}
+`}
+/>
+
+## `CreateDateOfMonthType`
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Indicates the month context of the date
+type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
+`}
+/>
+
+## `DAYS_OF_WEEK` Enum
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Weekday constants (Sunday = 0)
+export const enum DAYS_OF_WEEK {
+  SUN,
+  MON,
+  TUE,
+  WED,
+  THU,
+  FRI,
+  SAT,
+}
+`}
+/>
+
+## `MONTHS` Enum
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Month constants (January = 0)
+export const enum MONTHS {
+  JAN,
+  FEB,
+  MAR,
+  APR,
+  MAY,
+  JUN,
+  JUL,
+  AUG,
+  SEP,
+  OCT,
+  NOV,
+  DEC,
+}
+`}
+/>

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.d.ts

@@ -0,0 +1,10 @@
+import { type CreateDatesOfMonthSettings, type DateOfMonth } from '../../../../../../index.js';
+/**
+ * Generates a calendar grid of dates for a given month.
+ *
+ * @param date - The base date for the month to generate.
+ * @param settings - Optional settings for formatting and display.
+ * @param manipulateDate - Optional function to modify each generated DateOfMonth.
+ * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
+ */
+export default function getDatesOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth): DateOfMonth[][] | null;

package/dist/stories/components/Info/Calendar/utils/{getDatesOfMonth.js → getDatesOfMonth/getDatesOfMonth.js}

@@ -1,13 +1,12 @@
-import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import { calendarWeekOptions } from '../../../../../index.js';
-import createDateOfMonth, {} from './createDateOfMonth.js';
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { calendarWeekOptions, createDateOfMonth, } from '../../../../../../index.js';
 /**
  * Divides an array into chunks of a given size.
  *
  * @template T - The type of elements in the array.
- * @param {T[]} arr - The array to be chunked.
- * @param {number} size - The chunk size.
- * @returns {T[][]} - An array of chunks.
+ * @param arr - The array to be chunked.
+ * @param size - The chunk size.
+ * @returns An array of chunks.
  */
 function chunkArray(arr, size) {
     const result = [];
@@ -16,6 +15,13 @@ function chunkArray(arr, size) {
     }
     return result;
 }
+/**
+ * Creates a moment object from a Date with optional timezone and UTC settings.
+ *
+ * @param date - The date to convert.
+ * @param settings - Optional settings for timezone and UTC.
+ * @returns A moment object with the applied settings.
+ */
 function dateMoment(date, settings) {
     return getMoment(date, undefined, {
         timezone: settings?.timezone,
@@ -25,11 +31,12 @@ function dateMoment(date, settings) {
 /**
  * Generates a calendar grid of dates for a given month.
  *
- * @param {Date} date - The base date for the month to generate.
- * @param {GetDatesOfMonthSettings} [settings] - Optional settings for formatting and display.
- * @returns {(DateOfMonth[][] | null)} - A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
+ * @param date - The base date for the month to generate.
+ * @param settings - Optional settings for formatting and display.
+ * @param manipulateDate - Optional function to modify each generated DateOfMonth.
+ * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
  */
-export default function getDatesOfMonth(date, settings) {
+export default function getDatesOfMonth(date, settings, manipulateDate) {
     if (!date) {
         return null;
     }
@@ -50,12 +57,12 @@ export default function getDatesOfMonth(date, settings) {
     if (showLastMonth) {
         for (let gap = 0; gap < startOfMonthDay; gap++) {
             const dayMoment = lastMonth.clone().add(gap, 'days');
-            dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth'));
+            dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth', manipulateDate));
         }
     }
     for (let day = 1; day <= daysInMonth; day++) {
         const dayMoment = monthMoment.clone().set('date', day);
-        dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth'));
+        dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth', manipulateDate));
     }
     const datesDivided = chunkArray(dates, 7);
     if (showNextMonth) {
@@ -65,7 +72,7 @@ export default function getDatesOfMonth(date, settings) {
             const nextMonthDates = [];
             for (let gap = 0; gap < nextMonthDaysRequired; gap++) {
                 const dayMoment = nextMonth.clone().add(gap, 'days');
-                nextMonthDates.push(createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth'));
+                nextMonthDates.push(createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth', manipulateDate));
             }
             datesDivided[datesDivided.length - 1] = [...lastRow, ...nextMonthDates];
         }

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx

@@ -0,0 +1,37 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# `getDatesOfMonth`
+
+`getDatesOfMonth(date, settings, manipulateDate)` generates a 2D array of weeks, each containing `DateOfMonth` objects. It supports options via `CreateDatesOfMonthSettings` and allows injecting custom logic per date.
+
+## Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+// Basic usage
+import { getDatesOfMonth, getMoment } from '@flightlesslabs/dodo-ui';
+
+const dates = getDatesOfMonth(new Date(), {
+showLastMonth: false,
+showNextMonth: false,
+});
+
+// Using a formatted date
+const dates2 = getDatesOfMonth(
+getMoment('01-02-2025', 'DD-MM-YYYY').toDate()
+);
+
+// With custom manipulation
+const dates3 = getDatesOfMonth(new Date(), {
+timezone: 'America/New_York',
+startOfWeek: 'MON',
+}, (date, settings) => {
+return {
+...date,
+disabled: true,
+};
+});
+`}
+/>

package/dist/stories/components/Info/Calendar/utils/types.d.ts

@@ -29,8 +29,4 @@ export type DateOfMonth = {
     isNextMonth?: boolean;
     disabled?: boolean;
     today?: boolean;
-    isRangeStart?: boolean;
-    isRangeEnd?: boolean;
-    inRange?: boolean;
 };
-export type DateRangeType = 'start' | 'end';

package/dist/stories/developer tools/components/Popper/Popper.stories.svelte

@@ -82,6 +82,7 @@ let open = $state(false);
   </Popper>
 </Story>
 
+<!-- Expand the Popper to full width -->
 <Story name="FullWidth" asChild>
   <Popper {open} fullWidth onClickOutside={() => (open = false)}>
     <Button onclick={() => (open = true)}>Click to see Popup</Button>
@@ -96,6 +97,21 @@ let open = $state(false);
   </Popper>
 </Story>
 
+<!-- Expand the Popper to full width but not the popup -->
+<Story name="PopupFullWidthFalse" asChild>
+  <Popper {open} fullWidth popupFullWidth={false} onClickOutside={() => (open = false)}>
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
 <Story
   name="CustomPopup"
   args={{

package/dist/stories/developer tools/components/Popper/Popper.svelte

@@ -3,19 +3,19 @@ import { clickOutside } from '../../directives/clickOutside/clickOutside.js';
 </script>
 
 <script lang="ts">"use strict";
-let { children, popupChildren, id, class: className = '', ref = $bindable(), open = false, popupRef = $bindable(), paperProps, popupMaxHeight, popupWidth, popupClass, popupPositionX, popupPositionY, popupOffsetX, popupOffsetY, onClickOutside = () => { }, customPopup, popperHeightForVerticalPosition, lockPoistions, fullWidth = false, } = $props();
+let { children, popupChildren, id, class: className = '', ref = $bindable(), open = false, popupRef = $bindable(), paperProps, popupMaxHeight, popupWidth, popupClass, popupPositionX, popupPositionY, popupOffsetX, popupOffsetY, onClickOutside = () => { }, customPopup, popperHeightForVerticalPosition, lockPoistions, fullWidth = false, popupFullWidth: popupFullWidthRaw, } = $props();
+const popupFullWidth = $derived(popupFullWidthRaw !== undefined ? popupFullWidthRaw : fullWidth);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customPopupTyped = customPopup;
-let popperContainerRef = $state();
 let popperLocation = $state();
 function capturePopperLocation() {
-    if (!popperContainerRef) {
+    if (!ref) {
         return;
     }
-    popperLocation = popperContainerRef.getBoundingClientRect();
+    popperLocation = ref.getBoundingClientRect();
 }
 $effect(() => {
-    if (!popperContainerRef) {
+    if (!ref) {
         return;
     }
     capturePopperLocation();
@@ -33,11 +33,9 @@ $effect(() => {
   {id}
   use:clickOutside={onClickOutside}
 >
-  <div class="PopperContainer" bind:this={popperContainerRef}>
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
+  {#if children}
+    {@render children()}
+  {/if}
 
   {#if customPopupTyped}
     {@render customPopupTyped(popperLocation)}
@@ -53,6 +51,7 @@ $effect(() => {
       {popupOffsetY}
       {popperHeightForVerticalPosition}
       {lockPoistions}
+      fullWidth={popupFullWidth}
       class={popupClass}
     >
       {#if popupChildren}
@@ -70,8 +69,5 @@ $effect(() => {
 .dodo-ui-Popper.fullWidth {
   display: flex;
   width: 100%;
-}
-.dodo-ui-Popper.fullWidth .PopperContainer {
-  display: block;
-  width: 100%;
+  flex-direction: column;
 }</style>

package/dist/stories/developer tools/components/Popper/Popper.svelte.d.ts

@@ -16,6 +16,8 @@ export interface PopperProps {
     open?: boolean;
     /** Full width Popper? */
     fullWidth?: boolean;
+    /** override Full width for Popup? */
+    popupFullWidth?: boolean;
     /** PopperPopup ref */
     popupRef?: HTMLDivElement;
     /** PopperPopup contents goes here */