@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/button.js

@@ -0,0 +1,252 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Button.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, dom } from "./utils.js";
+import { ProgressBarContext } from "./progress-bar.js";
+import { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createEffect, createUniqueId, merge, omit, untrack } from "solid-js";
+import { memo, mergeProps as mergeProps$1 } from "@solidjs/web";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createButton } from "@solid2-aria/core/button/create-button";
+import { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { announce } from "@solid2-aria/core/live-announcer/live-announcer";
+import { readProperty } from "@solid2-aria/core/utils/read-property";
+// src/button.tsx
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _m$4 = Symbol();
+var _m$5 = Symbol();
+var _m$6 = Symbol();
+var _m$7 = Symbol();
+var _m$8 = Symbol();
+var _m$9 = Symbol();
+var _d$ = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p, _p2) {
+	this[_m$] = _p;
+	this.value = _p2;
+	Object.defineProperty(this, "children", _d$);
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		const aria = this[_m$];
+		const id = this[_m$2];
+		return aria.buttonProps.id ?? id;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$3 = {
+	get() {
+		const props = this[_m$3];
+		return memo(() => {
+			return !!(props.isPending === true && props.type === "submit");
+		})() ? "button" : props.type ?? "button";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$4 = {
+	get() {
+		const label = this[_m$4];
+		return label();
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		const props = this[_m$3];
+		const aria = this[_m$];
+		return memo(() => {
+			return props.isPending === true;
+		})() ? "true" : aria.buttonProps["aria-disabled"];
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$6 = {
+	get() {
+		return this[_m$3].slot ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$7 = {
+	get() {
+		return this[_m$3].isDisabled ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$8 = {
+	get() {
+		return this[_m$3].isPending ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$9 = {
+	get() {
+		return this[_m$5].isPressed || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$10 = {
+	get() {
+		return this[_m$6].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$11 = {
+	get() {
+		return this[_m$7].isHovered || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$12 = {
+	get() {
+		return this[_m$6].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$13 = {
+	get() {
+		const render = this[_m$8];
+		const progressId = this[_m$9];
+		return ProgressBarContext(new _P$(render, { id: progressId }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p3, _p4, _p5, _p6, _p7, _p8, _p9, _p0, _p1, _p10) {
+	this[_m$] = _p3;
+	this[_m$2] = _p4;
+	this[_m$3] = _p5;
+	this[_m$4] = _p6;
+	this[_m$5] = _p7;
+	this[_m$6] = _p8;
+	this[_m$7] = _p9;
+	this[_m$8] = _p0;
+	this[_m$9] = _p1;
+	Object.defineProperty(this, "id", _d$2);
+	Object.defineProperty(this, "type", _d$3);
+	this.ref = _p10;
+	Object.defineProperty(this, "aria-labelledby", _d$4);
+	Object.defineProperty(this, "aria-disabled", _d$5);
+	Object.defineProperty(this, "slot", _d$6);
+	Object.defineProperty(this, "data-disabled", _d$7);
+	Object.defineProperty(this, "data-pending", _d$8);
+	Object.defineProperty(this, "data-pressed", _d$9);
+	Object.defineProperty(this, "data-focused", _d$10);
+	Object.defineProperty(this, "data-hovered", _d$11);
+	Object.defineProperty(this, "data-focus-visible", _d$12);
+	Object.defineProperty(this, "children", _d$13);
+}
+_P$2.prototype = Object.prototype;
+const ButtonContext = createContext(null);
+function Button(input) {
+	if (createIsHidden()) return null;
+	const [props, ref, setRef] = createContextProps(input, untrack(() => input.ref), ButtonContext);
+	const aria = createButton(props, ref);
+	const focus = createFocusRing(props);
+	const hover = createHover(mergeProps(props, { get isDisabled() {
+		return props.isDisabled === true || props.isPending === true;
+	} }));
+	const values = {
+		get isDisabled() {
+			return props.isDisabled === true;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPending() {
+			return props.isPending === true;
+		},
+		get isPressed() {
+			return (props.isPressed === true || aria.isPressed) && !(props.isPending === true);
+		}
+	};
+	const render = createRenderProps(mergeProps(props, {
+		defaultClass: "solid2-aria-Button",
+		values
+	}));
+	const id = createUniqueId();
+	const progressId = createUniqueId();
+	const label = () => {
+		const labelledBy = aria.buttonProps["aria-labelledby"];
+		if (props.isPending !== true) return labelledBy;
+		if (isTruthy(labelledBy)) return `${labelledBy} ${progressId}`;
+		return isTruthy(aria.buttonProps["aria-label"]) ? `${aria.buttonProps.id ?? id} ${progressId}` : void 0;
+	};
+	createEffect(() => ({
+		focused: focus.isFocused,
+		label: label(),
+		pending: props.isPending
+	}), (next, prev) => {
+		if (prev && next.pending !== prev.pending && next.focused) {
+			const buttonId = typeof aria.buttonProps.id === "string" ? aria.buttonProps.id : id;
+			const labelledBy = typeof next.label === "string" && next.label.length > 0 ? next.label : buttonId;
+			announce({ "aria-labelledby": labelledBy }, "assertive");
+		}
+	});
+	const interaction = new Proxy({}, {
+		get(target, key) {
+			if (props.isPending === true && typeof key === "string" && key.startsWith("on") && !/Focus|Blur|Hover|Pointer(?:Enter|Leave|Over|Out)|Mouse(?:Enter|Leave|Over|Out)/u.test(key)) return;
+			return readProperty(aria.buttonProps, key);
+		},
+		getOwnPropertyDescriptor() {
+			return {
+				configurable: true,
+				enumerable: true
+			};
+		},
+		has(_target, key) {
+			return key in aria.buttonProps;
+		},
+		ownKeys() {
+			return Reflect.ownKeys(aria.buttonProps);
+		}
+	});
+	return dom.button(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "onClick"), interaction, merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, new _P$2(aria, id, props, label, values, focus, hover, render, progressId, (element) => {
+		setRef(element);
+	})));
+}
+export { Button, ButtonContext };
+
+//# sourceMappingURL=button.js.map

package/dist/server/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["props.isPending === true && props.type === \"submit\"\n          ? \"button\"\n          : (props.type ?? \"button\")","props.isPending === true ? \"true\" : aria.buttonProps[\"aria-disabled\"]","dom.button","<dom.button\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"onClick\"),\n        interaction,\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        render\n      )}\n      id={aria.buttonProps.id ?? id}\n      type={\n        props.isPending === true && props.type === \"submit\"\n          ? \"button\"\n          : (props.type ?? \"button\")\n      }\n      ref={(element: HTMLButtonElement) => {\n        setRef(element);\n      }}\n      aria-labelledby={label()}\n      aria-disabled={\n        props.isPending === true ? \"true\" : aria.buttonProps[\"aria-disabled\"]\n      }\n      slot={props.slot ?? undefined}\n      data-disabled={props.isDisabled ?? undefined}\n      data-pending={props.isPending ?? undefined}\n      data-pressed={values.isPressed || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <ProgressBarContext value={{ id: progressId }}>\n        {render.children}\n      </ProgressBarContext>\n    </dom.button>","_$memo","_$mergeProps"],"sources":["../../src/button.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/Button.tsx.\n * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createButton } from \"@solid2-aria/core/button/create-button\";\nimport type { AriaButtonProps } from \"@solid2-aria/core/button/create-button\";\nimport { createIsHidden } from \"@solid2-aria/core/collections/hidden\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { announce } from \"@solid2-aria/core/live-announcer/live-announcer\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { readProperty } from \"@solid2-aria/core/utils/read-property\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport type { HoverEvents } from \"@solid2-aria/types-shared\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  untrack,\n  createContext,\n  createEffect,\n  createUniqueId,\n  omit,\n} from \"solid-js\";\n\nimport { ProgressBarContext } from \"./progress-bar\";\nimport { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type { Ref, ContextValue, SlotProps, RenderProps } from \"./utils\";\n\nexport interface ButtonRenderProps {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isPending: boolean;\n}\n\nexport interface ButtonProps\n  extends\n    Omit<AriaButtonProps, \"children\" | \"elementType\">,\n    HoverEvents,\n    SlotProps,\n    RenderProps<ButtonRenderProps, \"button\"> {\n  isPending?: boolean;\n  isPressed?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport const ButtonContext =\n  createContext<ContextValue<ButtonProps, HTMLButtonElement>>(null);\n\nexport function Button(input: ButtonProps): JSX.Element {\n  if (createIsHidden()) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return null;\n  }\n\n  const [props, ref, setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ButtonContext\n  );\n\n  const aria = createButton(props, ref);\n  const focus = createFocusRing(props);\n\n  const hover = createHover(\n    mergeProps(props, {\n      get isDisabled() {\n        return props.isDisabled === true || props.isPending === true;\n      },\n    })\n  );\n\n  const values: ButtonRenderProps = {\n    get isDisabled() {\n      return props.isDisabled === true;\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isHovered() {\n      return hover.isHovered;\n    },\n    get isPending() {\n      return props.isPending === true;\n    },\n    get isPressed() {\n      return (\n        (props.isPressed === true || aria.isPressed) &&\n        !(props.isPending === true)\n      );\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-Button\", values })\n  );\n\n  const id = createUniqueId();\n  const progressId = createUniqueId();\n\n  const label = () => {\n    const labelledBy = aria.buttonProps[\"aria-labelledby\"];\n\n    if (props.isPending !== true) {\n      return labelledBy;\n    }\n\n    if (isTruthy(labelledBy)) {\n      return `${labelledBy} ${progressId}`;\n    }\n\n    return isTruthy(aria.buttonProps[\"aria-label\"])\n      ? `${aria.buttonProps.id ?? id} ${progressId}`\n      : undefined;\n  };\n\n  createEffect(\n    () => ({\n      focused: focus.isFocused,\n      label: label(),\n      pending: props.isPending,\n    }),\n    (next, prev) => {\n      if (prev && next.pending !== prev.pending && next.focused) {\n        const buttonId =\n          typeof aria.buttonProps.id === \"string\" ? aria.buttonProps.id : id;\n\n        const labelledBy =\n          typeof next.label === \"string\" && next.label.length > 0\n            ? next.label\n            : buttonId;\n\n        announce({ \"aria-labelledby\": labelledBy }, \"assertive\");\n      }\n    }\n  );\n\n  const interaction = new Proxy(\n    {},\n    {\n      get(target, key): ReturnType<typeof readProperty> {\n        if (\n          props.isPending === true &&\n          typeof key === \"string\" &&\n          key.startsWith(\"on\") &&\n          !/Focus|Blur|Hover|Pointer(?:Enter|Leave|Over|Out)|Mouse(?:Enter|Leave|Over|Out)/u.test(\n            key\n          )\n        ) {\n          return undefined;\n        }\n\n        return readProperty(aria.buttonProps, key);\n      },\n      getOwnPropertyDescriptor() {\n        return { configurable: true, enumerable: true };\n      },\n      has(_target, key) {\n        return key in aria.buttonProps;\n      },\n      ownKeys() {\n        return Reflect.ownKeys(aria.buttonProps);\n      },\n    }\n  );\n\n  return (\n    <dom.button\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"onClick\"),\n        interaction,\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        render\n      )}\n      id={aria.buttonProps.id ?? id}\n      type={\n        props.isPending === true && props.type === \"submit\"\n          ? \"button\"\n          : (props.type ?? \"button\")\n      }\n      ref={(element: HTMLButtonElement) => {\n        setRef(element);\n      }}\n      aria-labelledby={label()}\n      aria-disabled={\n        props.isPending === true ? \"true\" : aria.buttonProps[\"aria-disabled\"]\n      }\n      slot={props.slot ?? undefined}\n      data-disabled={props.isDisabled ?? undefined}\n      data-pending={props.isPending ?? undefined}\n      data-pressed={values.isPressed || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <ProgressBarContext value={{ id: progressId }}>\n        {render.children}\n      </ProgressBarContext>\n    </dom.button>\n  );\n}\n"],"mappings":"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"}