jaci-ui 0.9.2 → 0.9.3
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.
- package/CHANGELOG.md +7 -0
- package/README.md +3 -0
- package/dist/components/button/button.cjs +8 -4
- package/dist/components/button/button.cjs.map +1 -1
- package/dist/components/button/button.d.cts +1 -0
- package/dist/components/button/button.d.ts +1 -0
- package/dist/components/button/button.js +8 -4
- package/dist/components/button/button.js.map +1 -1
- package/dist/styles.css +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.9.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- caa17c1: Allow Button links composed with `render={<a />}` to render safely from Next.js server components.
|
|
8
|
+
- 3efbbee: Keep Accordion roots at a stable responsive width when all panels are collapsed.
|
|
9
|
+
|
|
3
10
|
## 0.9.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -38,6 +38,9 @@ export function Example() {
|
|
|
38
38
|
<Stack gap="md">
|
|
39
39
|
<Button variant="solid">Continue</Button>
|
|
40
40
|
|
|
41
|
+
{/* Button links also work in a Next App Router Server Component. */}
|
|
42
|
+
<Button variant="outline" render={<a href="/docs" />}>Read the docs</Button>
|
|
43
|
+
|
|
41
44
|
<ColorPicker.Root defaultValue="#2563eb" name="brand-color">
|
|
42
45
|
<ColorPicker.Label>Brand color</ColorPicker.Label>
|
|
43
46
|
<ColorPicker.Control>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
const require_cx = require("../../styled-system/css/cx.cjs");
|
|
3
2
|
const require_button = require("../../styled-system/recipes/button.cjs");
|
|
4
3
|
const require_index = require("../layout/index.cjs");
|
|
@@ -26,10 +25,11 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
|
|
|
26
25
|
if (render) {
|
|
27
26
|
const renderedProps = render.props ?? {};
|
|
28
27
|
const renderedOnClick = renderedProps.onClick;
|
|
29
|
-
const handleRenderedClick = disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
28
|
+
const handleRenderedClick = renderedOnClick || buttonOnClick ? disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
30
29
|
renderedOnClick?.(event);
|
|
31
30
|
if (!event.defaultPrevented) buttonOnClick?.(event);
|
|
32
|
-
};
|
|
31
|
+
} : void 0;
|
|
32
|
+
const renderedHref = disabled || loading ? render.type === "a" ? void 0 : renderedProps.href : renderedProps.href;
|
|
33
33
|
return (0, react.cloneElement)(render, {
|
|
34
34
|
...props,
|
|
35
35
|
"aria-busy": loading || void 0,
|
|
@@ -38,7 +38,11 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
|
|
|
38
38
|
"data-jaci-component": "button",
|
|
39
39
|
"data-slot": "button",
|
|
40
40
|
children: childrenWithIcons,
|
|
41
|
-
onClick: handleRenderedClick
|
|
41
|
+
onClick: handleRenderedClick,
|
|
42
|
+
...render.type === "a" && (disabled || loading) ? {
|
|
43
|
+
href: renderedHref,
|
|
44
|
+
tabIndex: -1
|
|
45
|
+
} : {}
|
|
42
46
|
});
|
|
43
47
|
}
|
|
44
48
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs","names":["Spinner","cx","button"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"button.cjs","names":["Spinner","cx","button"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { cloneElement, forwardRef } from \"react\";\nimport type {\n ComponentPropsWithoutRef,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n children?: ReactNode | undefined;\n className?: string | undefined;\n href?: string | undefined;\n onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n children?: ReactNode;\n variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n size?: \"sm\" | \"md\" | \"lg\";\n fullWidth?: boolean;\n loading?: boolean;\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n return (\n <>\n {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n {children}\n {!loading ? endIcon : undefined}\n </>\n );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n className,\n variant = \"outline\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n startIcon,\n endIcon,\n disabled,\n onClick: buttonOnClick,\n render,\n type = \"button\",\n ...props\n },\n ref,\n) {\n const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n if (render) {\n // Keep the render path tolerant of framework-rendered elements and avoid\n // adding a synthetic client handler when the composed element has none.\n const renderedProps = render.props ?? {};\n const renderedOnClick = renderedProps.onClick as MouseEventHandler<HTMLElement> | undefined;\n const handleRenderedClick: MouseEventHandler<HTMLElement> | undefined =\n renderedOnClick || buttonOnClick\n ? disabled || loading\n ? (event) => event.preventDefault()\n : (event) => {\n renderedOnClick?.(event);\n if (!event.defaultPrevented) {\n buttonOnClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n }\n }\n : undefined;\n\n // A server component can compose Button with a native anchor. Remove its\n // href while disabled/loading instead of attaching a client-only event\n // handler during the server render.\n const renderedHref =\n disabled || loading\n ? render.type === \"a\"\n ? undefined\n : renderedProps.href\n : renderedProps.href;\n\n return cloneElement(render, {\n ...props,\n \"aria-busy\": loading || undefined,\n \"aria-disabled\": disabled || loading || undefined,\n className: cx(buttonClassName, renderedProps.className),\n \"data-jaci-component\": \"button\",\n \"data-slot\": \"button\",\n children: childrenWithIcons,\n onClick: handleRenderedClick,\n ...(render.type === \"a\" && (disabled || loading) ? { href: renderedHref, tabIndex: -1 } : {}),\n });\n }\n\n return (\n <button\n {...props}\n aria-busy={loading || undefined}\n className={buttonClassName}\n data-jaci-component=\"button\"\n data-slot=\"button\"\n disabled={disabled || loading}\n onClick={buttonOnClick}\n ref={ref}\n type={type}\n >\n {childrenWithIcons}\n </button>\n );\n});\n"],"mappings":";;;;;;AAgCA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,UAAA,GAAA,MAAA,WAAA,CAAoD,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,SAAS,eACT,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkBC,WAAAA,GAAGC,eAAAA,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EAGV,MAAM,gBAAgB,OAAO,SAAS,CAAC;EACvC,MAAM,kBAAkB,cAAc;EACtC,MAAM,sBACJ,mBAAmB,gBACf,YAAY,WACT,UAAU,MAAM,eAAe,KAC/B,UAAU;GACT,kBAAkB,KAAK;GACvB,IAAI,CAAC,MAAM,kBACT,gBAAgB,KAAiD;EAErE,IACF,KAAA;EAKN,MAAM,eACJ,YAAY,UACR,OAAO,SAAS,MACd,KAAA,IACA,cAAc,OAChB,cAAc;EAEpB,QAAA,GAAA,MAAA,aAAA,CAAoB,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAWD,WAAAA,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS;GACT,GAAI,OAAO,SAAS,QAAQ,YAAY,WAAW;IAAE,MAAM;IAAc,UAAU;GAAG,IAAI,CAAC;EAC7F,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACtB,SAAS;EACJ;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode }
|
|
|
3
3
|
type RenderableButtonProps = Record<string, unknown> & {
|
|
4
4
|
children?: ReactNode | undefined;
|
|
5
5
|
className?: string | undefined;
|
|
6
|
+
href?: string | undefined;
|
|
6
7
|
onClick?: MouseEventHandler<HTMLElement> | undefined;
|
|
7
8
|
};
|
|
8
9
|
interface ButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "color" | "children"> {
|
|
@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode }
|
|
|
3
3
|
type RenderableButtonProps = Record<string, unknown> & {
|
|
4
4
|
children?: ReactNode | undefined;
|
|
5
5
|
className?: string | undefined;
|
|
6
|
+
href?: string | undefined;
|
|
6
7
|
onClick?: MouseEventHandler<HTMLElement> | undefined;
|
|
7
8
|
};
|
|
8
9
|
interface ButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "color" | "children"> {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { cx } from "../../styled-system/css/cx.js";
|
|
3
2
|
import { button } from "../../styled-system/recipes/button.js";
|
|
4
3
|
import { Spinner } from "../layout/index.js";
|
|
@@ -26,10 +25,11 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
|
|
|
26
25
|
if (render) {
|
|
27
26
|
const renderedProps = render.props ?? {};
|
|
28
27
|
const renderedOnClick = renderedProps.onClick;
|
|
29
|
-
const handleRenderedClick = disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
28
|
+
const handleRenderedClick = renderedOnClick || buttonOnClick ? disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
30
29
|
renderedOnClick?.(event);
|
|
31
30
|
if (!event.defaultPrevented) buttonOnClick?.(event);
|
|
32
|
-
};
|
|
31
|
+
} : void 0;
|
|
32
|
+
const renderedHref = disabled || loading ? render.type === "a" ? void 0 : renderedProps.href : renderedProps.href;
|
|
33
33
|
return cloneElement(render, {
|
|
34
34
|
...props,
|
|
35
35
|
"aria-busy": loading || void 0,
|
|
@@ -38,7 +38,11 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
|
|
|
38
38
|
"data-jaci-component": "button",
|
|
39
39
|
"data-slot": "button",
|
|
40
40
|
children: childrenWithIcons,
|
|
41
|
-
onClick: handleRenderedClick
|
|
41
|
+
onClick: handleRenderedClick,
|
|
42
|
+
...render.type === "a" && (disabled || loading) ? {
|
|
43
|
+
href: renderedHref,
|
|
44
|
+
tabIndex: -1
|
|
45
|
+
} : {}
|
|
42
46
|
});
|
|
43
47
|
}
|
|
44
48
|
return /* @__PURE__ */ jsx("button", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { cloneElement, forwardRef } from \"react\";\nimport type {\n ComponentPropsWithoutRef,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n children?: ReactNode | undefined;\n className?: string | undefined;\n href?: string | undefined;\n onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n children?: ReactNode;\n variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n size?: \"sm\" | \"md\" | \"lg\";\n fullWidth?: boolean;\n loading?: boolean;\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n return (\n <>\n {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n {children}\n {!loading ? endIcon : undefined}\n </>\n );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n className,\n variant = \"outline\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n startIcon,\n endIcon,\n disabled,\n onClick: buttonOnClick,\n render,\n type = \"button\",\n ...props\n },\n ref,\n) {\n const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n if (render) {\n // Keep the render path tolerant of framework-rendered elements and avoid\n // adding a synthetic client handler when the composed element has none.\n const renderedProps = render.props ?? {};\n const renderedOnClick = renderedProps.onClick as MouseEventHandler<HTMLElement> | undefined;\n const handleRenderedClick: MouseEventHandler<HTMLElement> | undefined =\n renderedOnClick || buttonOnClick\n ? disabled || loading\n ? (event) => event.preventDefault()\n : (event) => {\n renderedOnClick?.(event);\n if (!event.defaultPrevented) {\n buttonOnClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n }\n }\n : undefined;\n\n // A server component can compose Button with a native anchor. Remove its\n // href while disabled/loading instead of attaching a client-only event\n // handler during the server render.\n const renderedHref =\n disabled || loading\n ? render.type === \"a\"\n ? undefined\n : renderedProps.href\n : renderedProps.href;\n\n return cloneElement(render, {\n ...props,\n \"aria-busy\": loading || undefined,\n \"aria-disabled\": disabled || loading || undefined,\n className: cx(buttonClassName, renderedProps.className),\n \"data-jaci-component\": \"button\",\n \"data-slot\": \"button\",\n children: childrenWithIcons,\n onClick: handleRenderedClick,\n ...(render.type === \"a\" && (disabled || loading) ? { href: renderedHref, tabIndex: -1 } : {}),\n });\n }\n\n return (\n <button\n {...props}\n aria-busy={loading || undefined}\n className={buttonClassName}\n data-jaci-component=\"button\"\n data-slot=\"button\"\n disabled={disabled || loading}\n onClick={buttonOnClick}\n ref={ref}\n type={type}\n >\n {childrenWithIcons}\n </button>\n );\n});\n"],"mappings":";;;;;;AAgCA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,UAAU,oBAAC,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,SAAS,WAA2C,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,SAAS,eACT,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkB,GAAG,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EAGV,MAAM,gBAAgB,OAAO,SAAS,CAAC;EACvC,MAAM,kBAAkB,cAAc;EACtC,MAAM,sBACJ,mBAAmB,gBACf,YAAY,WACT,UAAU,MAAM,eAAe,KAC/B,UAAU;GACT,kBAAkB,KAAK;GACvB,IAAI,CAAC,MAAM,kBACT,gBAAgB,KAAiD;EAErE,IACF,KAAA;EAKN,MAAM,eACJ,YAAY,UACR,OAAO,SAAS,MACd,KAAA,IACA,cAAc,OAChB,cAAc;EAEpB,OAAO,aAAa,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAW,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS;GACT,GAAI,OAAO,SAAS,QAAQ,YAAY,WAAW;IAAE,MAAM;IAAc,UAAU;GAAG,IAAI,CAAC;EAC7F,CAAC;CACH;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACtB,SAAS;EACJ;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}
|
package/dist/styles.css
CHANGED