@pzerelles/headlessui-svelte 2.1.2-next.29 → 2.1.2-next.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/button/Button.svelte +54 -84
  2. package/dist/checkbox/Checkbox.svelte +120 -173
  3. package/dist/checkbox/Checkbox.svelte.d.ts +1 -1
  4. package/dist/close-button/CloseButton.svelte +6 -12
  5. package/dist/combobox/Combobox.svelte +3 -50
  6. package/dist/data-interactive/DataInteractive.svelte +29 -55
  7. package/dist/description/Description.svelte +21 -31
  8. package/dist/dialog/Dialog.svelte +228 -320
  9. package/dist/dialog/DialogBackdrop.svelte +12 -29
  10. package/dist/dialog/DialogPanel.svelte +25 -48
  11. package/dist/dialog/DialogTitle.svelte +23 -38
  12. package/dist/field/Field.svelte +25 -47
  13. package/dist/fieldset/Fieldset.svelte +29 -50
  14. package/dist/focus-trap/FocusTrap.svelte +283 -419
  15. package/dist/input/Input.svelte +53 -84
  16. package/dist/internal/FloatingProvider.svelte +9 -14
  17. package/dist/internal/FocusSentinel.svelte +8 -16
  18. package/dist/internal/ForcePortalRoot.svelte +3 -7
  19. package/dist/internal/FormFields.svelte +34 -47
  20. package/dist/internal/FormFieldsProvider.svelte +5 -9
  21. package/dist/internal/FormResolver.svelte +15 -20
  22. package/dist/internal/Hidden.svelte +29 -50
  23. package/dist/internal/MainTreeProvider.svelte +36 -89
  24. package/dist/internal/Portal.svelte +14 -18
  25. package/dist/label/Label.svelte +58 -93
  26. package/dist/legend/Legend.svelte +3 -12
  27. package/dist/listbox/Listbox.svelte +387 -525
  28. package/dist/listbox/Listbox.svelte.d.ts +1 -1
  29. package/dist/listbox/ListboxButton.svelte +127 -173
  30. package/dist/listbox/ListboxOption.svelte +129 -170
  31. package/dist/listbox/ListboxOptions.svelte +304 -400
  32. package/dist/listbox/ListboxSelectedOption.svelte +15 -38
  33. package/dist/menu/Menu.svelte +51 -78
  34. package/dist/menu/MenuButton.svelte +117 -157
  35. package/dist/menu/MenuHeading.svelte +14 -32
  36. package/dist/menu/MenuItem.svelte +107 -142
  37. package/dist/menu/MenuItems.svelte +229 -301
  38. package/dist/menu/MenuSection.svelte +9 -24
  39. package/dist/menu/MenuSeparator.svelte +4 -17
  40. package/dist/popover/Popover.svelte +150 -216
  41. package/dist/popover/PopoverBackdrop.svelte +41 -67
  42. package/dist/popover/PopoverButton.svelte +212 -292
  43. package/dist/popover/PopoverGroup.svelte +35 -62
  44. package/dist/popover/PopoverPanel.svelte +229 -311
  45. package/dist/portal/InternalPortal.svelte +85 -141
  46. package/dist/portal/Portal.svelte +2 -5
  47. package/dist/portal/PortalGroup.svelte +9 -30
  48. package/dist/select/Select.svelte +68 -98
  49. package/dist/switch/Switch.svelte +132 -179
  50. package/dist/switch/SwitchGroup.svelte +31 -44
  51. package/dist/tabs/Tab.svelte +142 -194
  52. package/dist/tabs/TabGroup.svelte +56 -86
  53. package/dist/tabs/TabGroup.svelte.d.ts +1 -1
  54. package/dist/tabs/TabList.svelte +11 -31
  55. package/dist/tabs/TabPanel.svelte +42 -67
  56. package/dist/tabs/TabPanels.svelte +7 -18
  57. package/dist/textarea/Textarea.svelte +53 -84
  58. package/dist/transition/InternalTransitionChild.svelte +170 -259
  59. package/dist/transition/Transition.svelte +66 -96
  60. package/dist/transition/TransitionChild.svelte +11 -31
  61. package/dist/utils/DisabledProvider.svelte +3 -7
  62. package/dist/utils/ElementOrComponent.svelte +23 -43
  63. package/dist/utils/Generic.svelte +16 -27
  64. package/dist/utils/StableCollection.svelte +36 -54
  65. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +12 -27
  66. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +44 -88
  67. package/package.json +4 -4
@@ -1,101 +1,66 @@
1
- <script lang="ts" module>
2
- import type { ElementType, Props, PropsOf } from "../utils/types.js"
3
-
4
- let DEFAULT_LABEL_TAG = "label" as const
5
-
6
- export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
7
- passive?: boolean
8
- htmlFor?: string
9
- }
1
+ <script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
10
2
  </script>
11
3
 
12
- <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">
13
- import { onMount } from "svelte"
14
- import { useProvidedId, htmlid } from "../utils/id.js"
15
- import { useDisabled } from "../hooks/use-disabled.js"
16
- import { stateFromSlot } from "../utils/state.js"
17
- import ElementOrComponent from "../utils/ElementOrComponent.svelte"
18
- import { useLabelContext } from "./context.svelte.js"
19
-
20
- const internalId = htmlid()
21
- const context = useLabelContext()
22
- const providedHtmlFor = useProvidedId()
23
- const providedDisabled = useDisabled()
24
-
25
- let {
26
- ref = $bindable(),
27
- id = `headlessui-label-${internalId}` as PropsOf<TTag>["id"],
28
- htmlFor = providedHtmlFor,
29
- passive = false,
30
- ...theirOriginalProps
31
- }: { as?: TTag } & LabelProps<TTag> = $props()
32
-
33
- onMount(() => {
34
- context.register(id)
35
- })
36
-
37
- let handleClick = (e: MouseEvent) => {
38
- let current = e.currentTarget
39
-
40
- // Labels connected to 'real' controls will already click the element. But we don't know that
41
- // ahead of time. This will prevent the default click, such that only a single click happens
42
- // instead of two. Otherwise this results in a visual no-op.
43
- if (current instanceof HTMLLabelElement) {
44
- e.preventDefault()
45
- }
46
-
47
- console.log("click", providedHtmlFor)
48
-
49
- if (current instanceof HTMLLabelElement) {
50
- let target = document.getElementById(current.getAttribute("for") ?? "")
51
- if (target) {
52
- // Bail if the target element is disabled
53
- let actuallyDisabled = target.getAttribute("disabled")
54
- if (actuallyDisabled === "true" || actuallyDisabled === "") {
55
- return
56
- }
57
-
58
- let ariaDisabled = target.getAttribute("aria-disabled")
59
- if (ariaDisabled === "true" || ariaDisabled === "") {
60
- return
61
- }
62
-
63
- // Ensure we click the element this label is bound to. This is necessary for elements that
64
- // immediately require state changes, e.g.: Radio & Checkbox inputs need to be checked (or
65
- // unchecked).
66
- if (
67
- (target instanceof HTMLInputElement && (target.type === "radio" || target.type === "checkbox")) ||
68
- target.role === "radio" ||
69
- target.role === "checkbox" ||
70
- target.role === "switch"
71
- ) {
72
- target.click()
73
- }
74
-
75
- // Move focus to the element, this allows you to start using keyboard shortcuts since the
76
- // bound element is now focused.
77
- target.focus({ preventScroll: true })
4
+ <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
5
+ import { useProvidedId, htmlid } from "../utils/id.js";
6
+ import { useDisabled } from "../hooks/use-disabled.js";
7
+ import { stateFromSlot } from "../utils/state.js";
8
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte";
9
+ import { useLabelContext } from "./context.svelte.js";
10
+ const internalId = htmlid();
11
+ const context = useLabelContext();
12
+ const providedHtmlFor = useProvidedId();
13
+ const providedDisabled = useDisabled();
14
+ let {
15
+ ref = $bindable(),
16
+ id = `headlessui-label-${internalId}`,
17
+ htmlFor = providedHtmlFor,
18
+ passive = false,
19
+ ...theirOriginalProps
20
+ } = $props();
21
+ onMount(() => {
22
+ context.register(id);
23
+ });
24
+ let handleClick = (e) => {
25
+ let current = e.currentTarget;
26
+ if (current instanceof HTMLLabelElement) {
27
+ e.preventDefault();
28
+ }
29
+ console.log("click", providedHtmlFor);
30
+ if (current instanceof HTMLLabelElement) {
31
+ let target = document.getElementById(current.getAttribute("for") ?? "");
32
+ if (target) {
33
+ let actuallyDisabled = target.getAttribute("disabled");
34
+ if (actuallyDisabled === "true" || actuallyDisabled === "") {
35
+ return;
36
+ }
37
+ let ariaDisabled = target.getAttribute("aria-disabled");
38
+ if (ariaDisabled === "true" || ariaDisabled === "") {
39
+ return;
78
40
  }
41
+ if (target instanceof HTMLInputElement && (target.type === "radio" || target.type === "checkbox") || target.role === "radio" || target.role === "checkbox" || target.role === "switch") {
42
+ target.click();
43
+ }
44
+ target.focus({ preventScroll: true });
79
45
  }
80
46
  }
81
-
82
- const disabled = $derived(providedDisabled.current ?? false)
83
- const slot = $derived({ disabled })
84
- const ourProps = $derived({
85
- id,
86
- for: passive ? undefined : htmlFor,
87
- onclick: passive ? undefined : handleClick,
88
- ...stateFromSlot(slot),
89
- })
90
-
91
- const theirProps = $derived.by(() => {
92
- if (passive) {
93
- const { onclick: _, ...props } = theirOriginalProps
94
- return props
95
- } else {
96
- return theirOriginalProps
97
- }
98
- })
47
+ };
48
+ const disabled = $derived(providedDisabled.current ?? false);
49
+ const slot = $derived({ disabled });
50
+ const ourProps = $derived({
51
+ id,
52
+ for: passive ? void 0 : htmlFor,
53
+ onclick: passive ? void 0 : handleClick,
54
+ ...stateFromSlot(slot)
55
+ });
56
+ const theirProps = $derived.by(() => {
57
+ if (passive) {
58
+ const { onclick: _, ...props } = theirOriginalProps;
59
+ return props;
60
+ } else {
61
+ return theirOriginalProps;
62
+ }
63
+ });
99
64
  </script>
100
65
 
101
66
  <ElementOrComponent
@@ -1,17 +1,8 @@
1
- <script lang="ts" module>
2
- import { Label } from "../index.js"
3
- import type { Props } from "../utils/types.js"
4
-
5
- const DEFAULT_LEGEND_TAG = "div" as const
6
-
7
- type LegendRenderPropArg = {}
8
- type LegendPropsWeControl = never
9
-
10
- export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, LegendRenderPropArg, LegendPropsWeControl, {}>
1
+ <script lang="ts" module>import { Label } from "../index.js";
2
+ const DEFAULT_LEGEND_TAG = "div";
11
3
  </script>
12
4
 
13
- <script lang="ts">
14
- let { ...props }: LegendProps = $props()
5
+ <script lang="ts">let { ...props } = $props();
15
6
  </script>
16
7
 
17
8
  <Label as="div" {...props} />