@pzerelles/headlessui-svelte 2.1.2-next.8 → 2.1.2-next.9

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 (14) hide show
  1. package/dist/checkbox/Checkbox.svelte +2 -2
  2. package/dist/checkbox/Checkbox.svelte.d.ts +4 -6
  3. package/dist/field/Field.svelte +0 -1
  4. package/dist/input/Input.svelte +2 -2
  5. package/dist/label/Label.svelte +3 -2
  6. package/dist/listbox/ListboxButton.svelte +2 -2
  7. package/dist/listbox/ListboxButton.svelte.d.ts +4 -6
  8. package/dist/switch/Switch.svelte +1 -1
  9. package/dist/textarea/Textarea.svelte +2 -2
  10. package/dist/utils/id.d.ts +1 -1
  11. package/dist/utils/id.js +1 -1
  12. package/package.json +12 -12
  13. package/dist/internal/id.d.ts +0 -8
  14. package/dist/internal/id.js +0 -11
package/dist/checkbox/Checkbox.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  <script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">import { tick } from "svelte";
5
5
  import { attemptSubmit } from "../utils/form.js";
6
- import { getIdContext, htmlid } from "../utils/id.js";
6
+ import { useProvidedId, htmlid } from "../utils/id.js";
7
7
  import { useActivePress } from "../hooks/use-active-press.svelte.js";
8
8
  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
9
9
  import FormFields from "../internal/FormFields.svelte";
@@ -15,7 +15,7 @@ import { mergeProps } from "../utils/render.js";
15
15
  import ElementOrComponent from "../utils/ElementOrComponent.svelte";
16
16
  import { useControllable } from "../hooks/use-controllable.svelte.js";
17
17
  const internalId = htmlid();
18
- const providedId = getIdContext();
18
+ const providedId = useProvidedId();
19
19
  const providedDisabled = useDisabled();
20
20
  let {
21
21
  ref = $bindable(),
package/dist/checkbox/Checkbox.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ElementType, Props } from "../utils/types.js";
1
+ import type { ElementType, Props, PropsOf } from "../utils/types.js";
2
2
  declare let DEFAULT_CHECKBOX_TAG: "span";
3
3
  type CheckboxRenderPropArg = {
4
4
  checked: boolean;
@@ -12,7 +12,6 @@ type CheckboxRenderPropArg = {
12
12
  };
13
13
  type CheckboxPropsWeControl = "aria-checked" | "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex";
14
14
  export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<TTag, CheckboxRenderPropArg, CheckboxPropsWeControl, {
15
- id?: string;
16
15
  value?: TType;
17
16
  disabled?: boolean;
18
17
  indeterminate?: boolean;
@@ -26,13 +25,12 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
26
25
  declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
27
26
  props(): {
28
27
  as?: TTag | undefined;
29
- } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "id" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
28
+ } & (Exclude<keyof PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
30
29
  children?: import("../utils/types.js").Children<CheckboxRenderPropArg> | undefined;
31
30
  ref?: HTMLElement;
32
- } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
33
- class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: CheckboxRenderPropArg) => string) | undefined;
31
+ } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
32
+ class?: PropsOf<TTag>["class"] | ((bag: CheckboxRenderPropArg) => string) | undefined;
34
33
  } : {}) & {
35
- id?: string;
36
34
  value?: TType | undefined;
37
35
  disabled?: boolean;
38
36
  indeterminate?: boolean;
package/dist/field/Field.svelte CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
5
5
  import { createIdContext } from "../utils/id.js";
6
- import { stateFromSlot } from "../utils/state.js";
7
6
  import { nanoid } from "nanoid";
8
7
  import { setContext } from "svelte";
9
8
  import { useLabels } from "../label/context.svelte.js";
package/dist/input/Input.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">import { htmlid } from "../utils/id.js";
5
5
  import { useDisabled } from "../hooks/use-disabled.js";
6
- import { useProvidedId } from "../internal/id.js";
6
+ import { useProvidedId } from "../utils/id.js";
7
7
  import { useLabelledBy } from "../label/context.svelte.js";
8
8
  import { useDescribedBy } from "../description/context.svelte.js";
9
9
  import { useHover } from "../hooks/use-hover.svelte.js";
@@ -16,7 +16,7 @@ const providedDisabled = useDisabled();
16
16
  let {
17
17
  ref = $bindable(),
18
18
  value = $bindable(),
19
- id = providedId?.value || `headlessui-input-${internalId}`,
19
+ id = providedId || `headlessui-input-${internalId}`,
20
20
  disabled: theirDisabled = false,
21
21
  autofocus = false,
22
22
  invalid = false,
package/dist/label/Label.svelte CHANGED
@@ -2,14 +2,14 @@
2
2
  </script>
3
3
 
4
4
  <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
5
- import { getIdContext, htmlid } from "../utils/id.js";
5
+ import { useProvidedId, htmlid } from "../utils/id.js";
6
6
  import { useDisabled } from "../hooks/use-disabled.js";
7
7
  import { stateFromSlot } from "../utils/state.js";
8
8
  import ElementOrComponent from "../utils/ElementOrComponent.svelte";
9
9
  import { useLabelContext } from "./context.svelte.js";
10
10
  const internalId = htmlid();
11
11
  const context = useLabelContext();
12
- const providedHtmlFor = getIdContext();
12
+ const providedHtmlFor = useProvidedId();
13
13
  const providedDisabled = useDisabled();
14
14
  let {
15
15
  ref = $bindable(),
@@ -26,6 +26,7 @@ let handleClick = (e) => {
26
26
  if (current instanceof HTMLLabelElement) {
27
27
  e.preventDefault();
28
28
  }
29
+ console.log("click", providedHtmlFor);
29
30
  if (current instanceof HTMLLabelElement) {
30
31
  let target = document.getElementById(current.getAttribute("for") ?? "");
31
32
  if (target) {
package/dist/listbox/ListboxButton.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>import { useId } from "../hooks/use-id.js";
2
- import { getIdContext } from "../utils/id.js";
2
+ import { useProvidedId } from "../utils/id.js";
3
3
  import { ListboxStates, useActions, useData } from "./Listbox.svelte";
4
4
  import { attemptSubmit } from "../utils/form.js";
5
5
  import { Focus } from "../utils/calculate-active-index.js";
@@ -19,7 +19,7 @@ const DEFAULT_BUTTON_TAG = "button";
19
19
  <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const data = useData("ListboxButton");
20
20
  const actions = useActions("ListboxButton");
21
21
  const internalId = useId();
22
- const providedId = getIdContext();
22
+ const providedId = useProvidedId();
23
23
  let {
24
24
  as = DEFAULT_BUTTON_TAG,
25
25
  ref = $bindable(),
package/dist/listbox/ListboxButton.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ElementType, Props } from "../utils/types.js";
1
+ import type { ElementType, Props, PropsOf } from "../utils/types.js";
2
2
  import type { Snippet } from "svelte";
3
3
  declare const DEFAULT_BUTTON_TAG: "button";
4
4
  type ButtonRenderPropArg = {
@@ -13,7 +13,6 @@ type ButtonRenderPropArg = {
13
13
  };
14
14
  type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-labelledby" | "disabled";
15
15
  export type ListboxButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
16
- id?: string;
17
16
  autofocus?: boolean;
18
17
  disabled?: boolean;
19
18
  }>;
@@ -21,13 +20,12 @@ export type ListboxButtonChildren = Snippet<[ButtonRenderPropArg]>;
21
20
  declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
22
21
  props(): {
23
22
  as?: TTag | undefined;
24
- } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "id" | ButtonPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
23
+ } & (Exclude<keyof PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | ButtonPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
25
24
  children?: import("../utils/types.js").Children<ButtonRenderPropArg> | undefined;
26
25
  ref?: HTMLElement;
27
- } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
28
- class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: ButtonRenderPropArg) => string) | undefined;
26
+ } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
27
+ class?: PropsOf<TTag>["class"] | ((bag: ButtonRenderPropArg) => string) | undefined;
29
28
  } : {}) & {
30
- id?: string;
31
29
  autofocus?: boolean;
32
30
  disabled?: boolean;
33
31
  };
package/dist/switch/Switch.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SWITCH_TAG">import { useId } from "../hooks/use-id.js";
5
5
  import { useDisabled } from "../hooks/use-disabled.js";
6
- import { useProvidedId } from "../internal/id.js";
6
+ import { useProvidedId } from "../utils/id.js";
7
7
  import { getContext, tick } from "svelte";
8
8
  import { attemptSubmit } from "../utils/form.js";
9
9
  import { useLabelledBy } from "../label/context.svelte.js";
package/dist/textarea/Textarea.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG, TValue = string">import { htmlid } from "../utils/id.js";
5
5
  import { useDisabled } from "../hooks/use-disabled.js";
6
- import { useProvidedId } from "../internal/id.js";
6
+ import { useProvidedId } from "../utils/id.js";
7
7
  import { useLabelledBy } from "../label/context.svelte.js";
8
8
  import { useDescribedBy } from "../description/context.svelte.js";
9
9
  import { useHover } from "../hooks/use-hover.svelte.js";
@@ -16,7 +16,7 @@ const providedDisabled = useDisabled();
16
16
  let {
17
17
  ref = $bindable(),
18
18
  value = $bindable(),
19
- id = providedId?.value || `headlessui-input-${internalId}`,
19
+ id = providedId || `headlessui-input-${internalId}`,
20
20
  disabled: theirDisabled = false,
21
21
  autofocus = false,
22
22
  invalid = false,
package/dist/utils/id.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export declare const alphaid: (size?: number) => string;
2
2
  export declare const htmlid: (size?: number) => string;
3
- export declare const getIdContext: () => string | undefined;
3
+ export declare const useProvidedId: () => string | undefined;
4
4
  export declare const createIdContext: (id: string) => string | undefined;
package/dist/utils/id.js CHANGED
@@ -2,5 +2,5 @@ import { nanoid, customAlphabet } from "nanoid";
2
2
  import { getContext, setContext } from "svelte";
3
3
  export const alphaid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");
4
4
  export const htmlid = (size = 10) => alphaid(1) + nanoid(size - 1);
5
- export const getIdContext = () => getContext("Id");
5
+ export const useProvidedId = () => getContext("Id");
6
6
  export const createIdContext = (id) => setContext("Id", id);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pzerelles/headlessui-svelte",
3
- "version": "2.1.2-next.8",
3
+ "version": "2.1.2-next.9",
4
4
  "exports": {
5
5
  ".": {
6
6
  "types": "./dist/index.d.ts",
@@ -13,40 +13,40 @@
13
13
  "!dist/**/*.spec.*"
14
14
  ],
15
15
  "peerDependencies": {
16
- "svelte": "^5.0.0-next.242"
16
+ "svelte": "^5.0.0-next.244"
17
17
  },
18
18
  "devDependencies": {
19
- "@changesets/cli": "^2.27.7",
19
+ "@changesets/cli": "^2.27.8",
20
20
  "@changesets/types": "^6.0.0",
21
- "@playwright/test": "^1.46.1",
21
+ "@playwright/test": "^1.47.0",
22
22
  "@pzerelles/heroicons-svelte": "^2.1.5",
23
23
  "@sveltejs/adapter-auto": "^3.2.4",
24
- "@sveltejs/kit": "^2.5.25",
24
+ "@sveltejs/kit": "^2.5.26",
25
25
  "@sveltejs/package": "^2.3.4",
26
26
  "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
27
27
  "@testing-library/jest-dom": "^6.5.0",
28
28
  "@testing-library/svelte": "^5.2.1",
29
29
  "@types/eslint": "^9.6.1",
30
- "@types/node": "^20.16.3",
30
+ "@types/node": "^20.16.5",
31
31
  "autoprefixer": "^10.4.20",
32
- "eslint": "^9.9.1",
32
+ "eslint": "^9.10.0",
33
33
  "eslint-config-prettier": "^9.1.0",
34
34
  "eslint-plugin-svelte": "^2.43.0",
35
35
  "globals": "^15.9.0",
36
36
  "jsdom": "^24.1.3",
37
37
  "outdent": "^0.8.0",
38
- "postcss": "^8.4.44",
38
+ "postcss": "^8.4.45",
39
39
  "prettier": "^3.3.3",
40
40
  "prettier-plugin-svelte": "^3.2.6",
41
41
  "prettier-plugin-tailwindcss": "^0.6.6",
42
42
  "publint": "^0.2.10",
43
- "svelte": "^5.0.0-next.242",
43
+ "svelte": "^5.0.0-next.244",
44
44
  "svelte-check": "^3.8.6",
45
45
  "tailwindcss": "^3.4.10",
46
46
  "tslib": "^2.7.0",
47
- "typescript": "^5.5.4",
48
- "typescript-eslint": "^8.3.0",
49
- "vite": "^5.4.2",
47
+ "typescript": "^5.6.2",
48
+ "typescript-eslint": "^8.5.0",
49
+ "vite": "^5.4.4",
50
50
  "vitest": "^2.0.5"
51
51
  },
52
52
  "dependencies": {
package/dist/internal/id.d.ts DELETED
@@ -1,8 +0,0 @@
1
- type IdContext = {
2
- value?: string;
3
- };
4
- export declare function useProvidedId(): IdContext | undefined;
5
- export declare function useIdContext(options: {
6
- id?: string;
7
- }): void;
8
- export {};
package/dist/internal/id.js DELETED
@@ -1,11 +0,0 @@
1
- import { getContext, setContext } from "svelte";
2
- export function useProvidedId() {
3
- return getContext("IdContext");
4
- }
5
- export function useIdContext(options) {
6
- setContext("IdContext", {
7
- get value() {
8
- return options.id;
9
- },
10
- });
11
- }