Add default as prop type for when as= is not provided

2022-02-09 15:44:38 -08:00
parent 42d792e72c
commit d7f6a58753
33 changed files with 63 additions and 54 deletions
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -41,7 +41,7 @@
  type TDialogProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    open?: boolean;
    initialFocus?: HTMLElement | null;
    static?: boolean;
--- a/src/lib/components/dialog/DialogOverlay.svelte
+++ b/src/lib/components/dialog/DialogOverlay.svelte
@@ -2,7 +2,7 @@
  type TDialogOverlayProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/dialog/DialogTitle.svelte
+++ b/src/lib/components/dialog/DialogTitle.svelte
@@ -2,7 +2,7 @@
  type TDialogTitleProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "h2"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/disclosure/Disclosure.svelte
+++ b/src/lib/components/disclosure/Disclosure.svelte
@@ -44,7 +44,7 @@
  type TDisclosureProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    defaultOpen?: boolean;
  };
 </script>
--- a/src/lib/components/disclosure/DisclosureButton.svelte
+++ b/src/lib/components/disclosure/DisclosureButton.svelte
@@ -2,7 +2,7 @@
  type TDisclosureButtonProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
    disabled?: boolean;
  };
 </script>
--- a/src/lib/components/disclosure/DisclosurePanel.svelte
+++ b/src/lib/components/disclosure/DisclosurePanel.svelte
@@ -8,7 +8,7 @@
  type TDisclosurePanelProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    unmount?: boolean;
    static?: boolean;
  };
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -53,7 +53,7 @@
  type TListboxProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    disabled?: boolean;
    horizontal?: boolean;
    value?: StateDefinition["value"];
--- a/src/lib/components/listbox/ListboxButton.svelte
+++ b/src/lib/components/listbox/ListboxButton.svelte
@@ -2,7 +2,7 @@
  type TListboxButtonProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/listbox/ListboxLabel.svelte
+++ b/src/lib/components/listbox/ListboxLabel.svelte
@@ -2,7 +2,7 @@
  type TListboxLabelProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "label"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/listbox/ListboxOption.svelte
+++ b/src/lib/components/listbox/ListboxOption.svelte
@@ -2,7 +2,7 @@
  type TListboxOptionProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "li"> & {
    value: unknown;
    disabled?: boolean;
  };
--- a/src/lib/components/listbox/ListboxOptions.svelte
+++ b/src/lib/components/listbox/ListboxOptions.svelte
@@ -2,7 +2,7 @@
  type TListboxOptionsProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "ul"> & {
    unmount?: boolean;
    static?: boolean;
  };
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -57,7 +57,7 @@
  type TMenuProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/menu/MenuButton.svelte
+++ b/src/lib/components/menu/MenuButton.svelte
@@ -2,7 +2,7 @@
  type TMenuButtonProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
    disabled?: boolean;
  };
 </script>
--- a/src/lib/components/menu/MenuItem.svelte
+++ b/src/lib/components/menu/MenuItem.svelte
@@ -2,7 +2,7 @@
  type TMenuItemProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "a"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/menu/MenuItems.svelte
+++ b/src/lib/components/menu/MenuItems.svelte
@@ -2,7 +2,7 @@
  type TMenuItemsProps<
    TSlotProp extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProp, TAsProp> & {
+  > = TPassThroughProps<TSlotProp, TAsProp, "div"> & {
    static?: boolean;
    unmount?: boolean;
  };
--- a/src/lib/components/popover/Popover.svelte
+++ b/src/lib/components/popover/Popover.svelte
@@ -42,7 +42,7 @@
  type TPopoverProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/popover/PopoverButton.svelte
+++ b/src/lib/components/popover/PopoverButton.svelte
@@ -2,7 +2,7 @@
  type TPopoverButtonProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
    disabled?: boolean;
  };
 </script>
--- a/src/lib/components/popover/PopoverGroup.svelte
+++ b/src/lib/components/popover/PopoverGroup.svelte
@@ -14,7 +14,7 @@
  type TPopoverGroupProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/src/lib/components/popover/PopoverOverlay.svelte
@@ -2,7 +2,7 @@
  type TPopoverOverlayProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/src/lib/components/popover/PopoverPanel.svelte
@@ -11,7 +11,7 @@
  type TPopoverPanelProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    focus?: boolean;
    static?: boolean;
    unmount?: boolean;
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -47,7 +47,7 @@
  type TRadioGroupProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    value: StateDefinition["value"];
    disabled?: boolean;
  };
--- a/src/lib/components/radio-group/RadioGroupOption.svelte
+++ b/src/lib/components/radio-group/RadioGroupOption.svelte
@@ -2,7 +2,7 @@
  type TRadioGroupOptionProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    value: unknown;
    disabled?: boolean;
  };
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -2,7 +2,7 @@
  type TSwitchProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
    checked: boolean;
  };
 </script>
--- a/src/lib/components/switch/SwitchGroup.svelte
+++ b/src/lib/components/switch/SwitchGroup.svelte
@@ -11,7 +11,7 @@
  type TSwitchGroupProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/tabs/Tab.svelte
+++ b/src/lib/components/tabs/Tab.svelte
@@ -2,7 +2,7 @@
  type TTabProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
    disabled?: boolean;
  };
 </script>
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -40,7 +40,7 @@
  type TTabGroupProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
    defaultIndex?: number;
    vertical?: boolean;
    manual?: boolean;
--- a/src/lib/components/tabs/TabList.svelte
+++ b/src/lib/components/tabs/TabList.svelte
@@ -2,7 +2,7 @@
  type TTabListProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/tabs/TabPanel.svelte
+++ b/src/lib/components/tabs/TabPanel.svelte
@@ -2,7 +2,7 @@
  type TTabPanelProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/tabs/TabPanels.svelte
+++ b/src/lib/components/tabs/TabPanels.svelte
@@ -2,7 +2,7 @@
  type TTabPanelsProps<
    TSlotProps extends {},
    TAsProp extends SupportedAs
-  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
 </script>

 <script lang="ts">
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -1,16 +1,18 @@
 <script lang="ts" context="module">
-  export type TTransitionChildProps<TAsProp extends SupportedAs> =
-    TPassThroughProps<{}, TAsProp> & {
-      enter?: string;
-      enterFrom?: string;
-      enterTo?: string;
-      entered?: string;
-      leave?: string;
-      leaveFrom?: string;
-      leaveTo?: string;
-      unmount?: boolean;
-      class?: string;
-    };
+  export type TTransitionChildProps<
+    TAsProp extends SupportedAs,
+    TDefaultAs
+  > = TPassThroughProps<{}, TAsProp, TDefaultAs> & {
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    entered?: string;
+    leave?: string;
+    leaveFrom?: string;
+    leaveTo?: string;
+    unmount?: boolean;
+    class?: string;
+  };
 </script>

 <script lang="ts">
@@ -41,7 +43,7 @@

  /***** Props *****/
  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TTransitionChildProps<TAsProp>;
+  type $$Props = TTransitionChildProps<TAsProp, "div">;

  export let as: SupportedAs = "div";
  export let use: HTMLActionArray = [];
--- a/src/lib/components/transitions/TransitionChildWrapper.svelte
+++ b/src/lib/components/transitions/TransitionChildWrapper.svelte
@@ -19,7 +19,7 @@
  /***** Props *****/

  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TTransitionRootProps<TAsProp>;
+  type $$Props = TTransitionRootProps<TAsProp, "div">;

  export let as: SupportedAs = "div";
  export let use: HTMLActionArray = [];
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -1,9 +1,11 @@
 <script lang="ts" context="module">
-  export type TTransitionRootProps<TAsProp extends SupportedAs> =
-    TTransitionChildProps<TAsProp> & {
-      show?: boolean;
-      appear?: boolean;
-    };
+  export type TTransitionRootProps<
+    TAsProp extends SupportedAs,
+    TDefaultAs
+  > = TTransitionChildProps<TAsProp, TDefaultAs> & {
+    show?: boolean;
+    appear?: boolean;
+  };
 </script>

 <script lang="ts">
@@ -38,7 +40,7 @@

  /***** Props *****/
  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TTransitionRootProps<TAsProp>;
+  type $$Props = TTransitionRootProps<TAsProp, "div">;

  export let as: SupportedAs = "div";
  export let use: HTMLActionArray = [];
--- a/src/lib/utils/Render.svelte
+++ b/src/lib/utils/Render.svelte
@@ -35,10 +35,14 @@
      >
    : {};

+  type TResolveAs<TAsProp, TDefaultAs> = SupportedAs extends TAsProp
+    ? TDefaultAs
+    : TAsProp;
  type TRenderProps<
    TSlotProps extends {},
-    TAsProp extends SupportedAs
-  > = TRestProps<TAsProp> & {
+    TAsProp extends SupportedAs,
+    TDefaultAs
+  > = TRestProps<TResolveAs<TAsProp, TDefaultAs>> & {
    name: string;
    as: TAsProp;
    slotProps: TSlotProps;
@@ -56,9 +60,10 @@

  export type TPassThroughProps<
    TSlotProps extends {},
-    TAsProp extends SupportedAs
+    TAsProp extends SupportedAs,
+    TDefaultAs
  > = Omit<
-    TRenderProps<TSlotProps, TAsProp>,
+    TRenderProps<TSlotProps, TAsProp, TDefaultAs>,
    TInternalProps | "as" | "static" | "unmount"
  > & {
    as?: TAsProp;
@@ -72,7 +77,7 @@

  type TSlotProps = $$Generic<{}>;
  type TAsProp = $$Generic<SupportedAs>;
-  type $$Props = TRenderProps<TSlotProps, TAsProp>;
+  type $$Props = TRenderProps<TSlotProps, TAsProp, TAsProp>;

  export let name: string;
  export let as: TAsProp;