@flightlesslabs/dodo-ui 0.11.0 → 0.11.1

package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte

@@ -0,0 +1,140 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { Menu, MenuItem, Popper } from '$lib/index.js';
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import { positionXArray, positionYArray } from '$lib/types/position.js';
+
+  export const storyPopperArgTypes: StoryBookArgTypes = {
+    popupPositionX: {
+      control: { type: 'select' },
+      options: positionXArray,
+    },
+    popupPositionY: {
+      control: { type: 'select' },
+      options: positionYArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Popper,
+    tags: ['autodocs'],
+    argTypes: storyPopperArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '200px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let open = $state(false);
+</script>
+
+<Story name="Default" args={{ open, onClickOutside: () => (open = false) }} asChild>
+  <Popper {open} 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="MenuOpen" args={{ open: true }} asChild>
+  <Popper open>
+    Hello! how are you doing?
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story
+  name="CustomPaperProps"
+  args={{
+    open: true,
+    paperProps: {
+      color: 'primary',
+    },
+  }}
+  asChild
+>
+  <Popper
+    open
+    paperProps={{
+      color: 'primary',
+    }}
+  >
+    Hello! how are you doing?
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </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>
+
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </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={{
+    open,
+    onClickOutside: () => (open = false),
+  }}
+  asChild
+>
+  <Popper {open} onClickOutside={() => (open = false)}>
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+
+    {#snippet customPopup(popperLocation)}
+      {#if open}
+        <Menu>
+          <MenuItem>{popperLocation?.height}</MenuItem>
+          <MenuItem>{popperLocation?.width}</MenuItem>
+        </Menu>
+      {/if}
+    {/snippet}
+  </Popper>
+</Story>

package/src/lib/stories/developer tools/components/Popper/Popper.svelte

@@ -20,6 +20,8 @@
     open?: boolean;
     /** Full width Popper? */
     fullWidth?: boolean;
+    /** override Full width for Popup? */
+    popupFullWidth?: boolean;
     /** PopperPopup ref */
     popupRef?: HTMLDivElement;
     /** PopperPopup contents goes here */
@@ -73,24 +75,26 @@
     popperHeightForVerticalPosition,
     lockPoistions,
     fullWidth = false,
+    popupFullWidth: popupFullWidthRaw,
   }: PopperProps = $props();
 
+  const popupFullWidth = $derived(popupFullWidthRaw !== undefined ? popupFullWidthRaw : fullWidth);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let customPopupTyped = customPopup as any;
 
-  let popperContainerRef = $state<HTMLDivElement>();
   let popperLocation = $state<DOMRect>();
 
   function capturePopperLocation() {
-    if (!popperContainerRef) {
+    if (!ref) {
       return;
     }
 
-    popperLocation = popperContainerRef.getBoundingClientRect();
+    popperLocation = ref.getBoundingClientRect();
   }
 
   $effect(() => {
-    if (!popperContainerRef) {
+    if (!ref) {
       return;
     }
 
@@ -111,11 +115,9 @@
   {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)}
@@ -131,6 +133,7 @@
       {popupOffsetY}
       {popperHeightForVerticalPosition}
       {lockPoistions}
+      fullWidth={popupFullWidth}
       class={popupClass}
     >
       {#if popupChildren}
@@ -149,11 +152,7 @@
     &.fullWidth {
       display: flex;
       width: 100%;
-
-      .PopperContainer {
-        display: block;
-        width: 100%;
-      }
+      flex-direction: column;
     }
   }
 </style>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { Menu, MenuItem, PopperPopup } from '$lib/index.js';
+  import { positionXArray, positionYArray } from '$lib/types/position.js';
+
+  export const storyPopperPopupArgTypes: StoryBookArgTypes = {
+    popupPositionX: {
+      control: { type: 'select' },
+      options: positionXArray,
+    },
+    popupPositionY: {
+      control: { type: 'select' },
+      options: positionYArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: PopperPopup,
+    tags: ['autodocs'],
+    argTypes: storyPopperPopupArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '200px',
+          inline: false,
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default" asChild>
+  <PopperPopup>
+    <Menu>
+      <MenuItem>One</MenuItem>
+      <MenuItem>Two</MenuItem>
+      <MenuItem>Three</MenuItem>
+    </Menu>
+  </PopperPopup>
+</Story>
+
+<Story
+  name="CustomPaperProps"
+  args={{
+    paperProps: {
+      color: 'primary',
+    },
+  }}
+  asChild
+>
+  <PopperPopup
+    paperProps={{
+      color: 'primary',
+    }}
+  >
+    <Menu>
+      <MenuItem>One</MenuItem>
+      <MenuItem>Two</MenuItem>
+      <MenuItem>Three</MenuItem>
+    </Menu>
+  </PopperPopup>
+</Story>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte

@@ -32,6 +32,8 @@
     lockPoistions?: boolean;
     /** Popper Height For Vertical Position, default 300 */
     popperHeightForVerticalPosition?: number;
+    /** Full width Popper? */
+    fullWidth?: boolean;
   }
 </script>
 
@@ -50,9 +52,15 @@
     popupOffsetY: offsetY = 12,
     popperHeightForVerticalPosition = 100,
     lockPoistions = false,
+    fullWidth = false,
   }: PopperPopupProps = $props();
 
-  const popperWidth = $derived(width || '100%');
+  let popupLocation = $state<DOMRect>();
+
+  const fullWidthInPixels = $derived(
+    fullWidth && popperLocation?.width ? `${popperLocation?.width}px` : '',
+  );
+  const popperWidth = $derived(width || fullWidthInPixels);
   const popupMaxHeight = $derived(maxHeight || '400px');
 
   let left = $state<number | null>(null);
@@ -60,20 +68,39 @@
   let top = $state<number | null>(null);
   let bottom = $state<number | null>(null);
 
+  function capturePopupLocation() {
+    if (!ref) {
+      return;
+    }
+
+    popupLocation = ref.getBoundingClientRect();
+  }
+
+  $effect(() => {
+    if (!ref) {
+      return;
+    }
+
+    capturePopupLocation();
+
+    window.addEventListener('resize', capturePopupLocation);
+
+    return () => {
+      window.removeEventListener('resize', capturePopupLocation);
+    };
+  });
+
   $effect(() => {
     const values = getPopupPosition({
       positionX,
       positionY,
-      height: popperLocation?.height || 0,
-      width: popperLocation?.width || 0,
-      top: popperLocation?.top || 0,
-      bottom: popperLocation?.bottom || 0,
-      left: popperLocation?.left || 0,
-      right: popperLocation?.right || 0,
       offsetX: offsetX,
       offsetY: offsetY,
       popperHeight: popperHeightForVerticalPosition,
       lockPoistions,
+      popperLocation,
+      popupLocation,
+      fullWidth,
     });
 
     left = values.left;
@@ -91,12 +118,11 @@
     className,
   ].join(' ')}
   bind:this={ref}
-  style={`width: ${popperWidth};
+  style={`${popperWidth ? `width: ${popperWidth};` : ''}
   ${left !== null ? `left: ${left}px;` : ''}
   ${right !== null ? `right: ${right}px;` : ''}
   ${top !== null ? `top: ${top}px;` : ''}
   ${bottom !== null ? `bottom: ${bottom}px;` : ''}
-  ${positionX === 'center' ? `margin: auto;` : ''}
   `}
 >
   <Paper shadow={3} {...paperProps}>
@@ -110,7 +136,7 @@
 
 <style lang="scss">
   .dodo-ui-PopperPopup {
-    position: absolute;
+    position: fixed;
     z-index: var(--dodo-ui-z-index-4);
 
     section {

package/src/lib/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.ts

@@ -4,16 +4,13 @@ import type { PositionX, PositionY } from '$lib/types/position.js';
 export interface GetPopupPositionProps {
   positionX: PositionX;
   positionY: PositionY;
-  height: number;
-  width: number;
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
   offsetX?: number;
   offsetY?: number;
   popperHeight: number;
   lockPoistions: boolean;
+  popperLocation?: DOMRect;
+  popupLocation?: DOMRect;
+  fullWidth?: boolean;
 }
 
 export function getPopupPosition(props: GetPopupPositionProps) {
@@ -32,52 +29,69 @@ export function getPopupPosition(props: GetPopupPositionProps) {
     };
   }
 
-  const innerHeight = window.innerHeight;
-
-  const gapBottom = innerHeight - props.bottom;
-  const popperHeight = props.popperHeight;
+  const POPPER_LEFT = props.popperLocation?.left || 0;
+  const POPPER_TOP = props.popperLocation?.top || 0;
+  const POPPER_BOTTOM = props.popperLocation?.bottom || 0;
+  const POPPER_HEIGHT = props.popperLocation?.height || 0;
+  const POPPER_WIDTH = props.popperLocation?.width || 0;
 
   const offsetX = props.offsetX ? props.offsetX : 0;
   const offsetY = props.offsetY ? props.offsetY : 0;
 
-  const positionX = props.positionX;
+  const POPUP_WIDTH = props.popupLocation?.width || 0;
+
+  const WIDTH_DIFF = POPPER_WIDTH - POPUP_WIDTH;
+
+  const innerHeight = window.innerHeight;
+  const gapBottom = innerHeight - POPPER_BOTTOM;
+
   let positionY = props.positionY;
 
+  // Adjust position if there is not enough space to draw it.
   if (!props.lockPoistions) {
-    if (positionY === 'top' && props.top < popperHeight + offsetY) {
+    if (positionY === 'top' && POPPER_TOP < POPPER_HEIGHT + offsetY) {
       positionY = 'bottom';
-    } else if (positionY === 'bottom' && gapBottom < popperHeight + offsetY) {
+    } else if (positionY === 'bottom' && gapBottom < POPPER_HEIGHT + offsetY) {
       positionY = 'top';
     }
   }
 
-  switch (positionX) {
-    case 'left':
-      left = offsetX;
-      right = null;
-      break;
-    case 'center':
-      left = 0;
-      right = 0;
-      break;
-    case 'right':
-      left = null;
-      right = offsetX;
-      break;
-  }
-
   switch (positionY) {
     case 'top':
-    case 'middle':
       top = null;
-      bottom = props.height + offsetY;
+      bottom = POPPER_TOP + POPPER_HEIGHT + offsetY;
       break;
     case 'bottom':
-      top = props.height + offsetY;
+      top = POPPER_TOP + POPPER_HEIGHT + offsetY;
       bottom = null;
       break;
   }
 
+  if (props.fullWidth) {
+    // If Full Width
+    left = POPPER_LEFT;
+    right = null;
+  } else if (WIDTH_DIFF < 0) {
+    // If Popup is bigger than the Popper Container
+    left = POPPER_LEFT;
+    right = null;
+  } else {
+    switch (props.positionX) {
+      case 'left':
+        left = POPPER_LEFT + offsetX;
+        right = null;
+        break;
+      case 'center':
+        left = POPPER_LEFT + offsetX + WIDTH_DIFF / 2;
+        right = null;
+        break;
+      case 'right':
+        left = POPPER_LEFT + offsetX + WIDTH_DIFF;
+        right = null;
+        break;
+    }
+  }
+
   return {
     left,
     right,

package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -0,0 +1,92 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Menu, MenuItem, Popper } from '$lib/index.js';
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import { storyPopperArgTypes } from '../../Popper.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Popper,
+    tags: ['autodocs'],
+    argTypes: storyPopperArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '200px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let open = $state(false);
+</script>
+
+<!-- Positions will auto adjust depending on the space on top and bottom -->
+<Story
+  name="PositionAutoAdjust"
+  args={{ open, onClickOutside: () => (open = false), popupPositionY: 'top' }}
+  asChild
+>
+  <Popper {open} onClickOutside={() => (open = false)} popupPositionY="top">
+    <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>
+
+<!-- Positions will not auto adjust if you use `lockPoistions` -->
+<Story
+  name="LockPoistions"
+  args={{
+    open,
+    onClickOutside: () => (open = false),
+    popupPositionY: 'top',
+    lockPoistions: true,
+  }}
+  asChild
+>
+  <Popper {open} lockPoistions onClickOutside={() => (open = false)} popupPositionY="top">
+    <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>
+
+<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
+<Story
+  name="HeightForVerticalPosition"
+  args={{
+    open,
+    onClickOutside: () => (open = false),
+    popupPositionY: 'top',
+    popperHeightForVerticalPosition: 3,
+  }}
+  asChild
+>
+  <Popper
+    {open}
+    onClickOutside={() => (open = false)}
+    popupPositionY="top"
+    popperHeightForVerticalPosition={3}
+  >
+    <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>

package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte

@@ -0,0 +1,114 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Menu, MenuItem, Popper } from '$lib/index.js';
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import { storyPopperArgTypes } from '../Popper.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Popper,
+    tags: ['autodocs'],
+    argTypes: storyPopperArgTypes,
+    parameters: {
+      layout: 'centered',
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let open = $state(false);
+</script>
+
+<Story name="BottomLeft" asChild>
+  <Popper {open} onClickOutside={() => (open = false)} popupWidth="100px">
+    <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="BottomCenter" asChild>
+  <Popper {open} popupPositionX="center" onClickOutside={() => (open = false)} popupWidth="100px">
+    <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="BottomRight" asChild>
+  <Popper {open} popupPositionX="right" onClickOutside={() => (open = false)} popupWidth="100px">
+    <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="TopLeft" asChild>
+  <Popper {open} popupPositionY="top" onClickOutside={() => (open = false)} popupWidth="100px">
+    <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="TopCenter" asChild>
+  <Popper
+    {open}
+    popupPositionY="top"
+    popupPositionX="center"
+    onClickOutside={() => (open = false)}
+    popupWidth="100px"
+  >
+    <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="TopRight" asChild>
+  <Popper
+    {open}
+    popupPositionY="top"
+    popupPositionX="right"
+    onClickOutside={() => (open = false)}
+    popupWidth="100px"
+  >
+    <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>