@planningcenter/tapestry 2.8.0-rc.12 → 2.8.0-rc.14
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/dist/components/checkbox/Checkbox.d.ts +0 -3
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +6 -12
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/sidenav/index.js +1 -1
- package/dist/reactRender.css +390 -390
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +390 -390
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-wc/dist/components/{p-DCsSkabe.js → p-CBau5xFW.js} +3 -3
- package/dist/tapestry-wc/dist/components/{p-DCsSkabe.js.map → p-CBau5xFW.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-C-DiXomr.js → p-Cp4MhTnK.js} +2 -2
- package/dist/tapestry-wc/dist/components/{p-C-DiXomr.js.map → p-Cp4MhTnK.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-Bm3Yv5DQ.js → p-DJnIdNGu.js} +3 -3
- package/dist/tapestry-wc/dist/components/{p-Bm3Yv5DQ.js.map → p-DJnIdNGu.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-CD7Hye-R.js → p-DVTRHNRc.js} +3 -3
- package/dist/tapestry-wc/dist/components/{p-CD7Hye-R.js.map → p-DVTRHNRc.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-Bhu9KZar.js → p-oMMs7x2c.js} +2 -2
- package/dist/tapestry-wc/dist/components/{p-Bhu9KZar.js.map → p-oMMs7x2c.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
- package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/package.json +4 -4
|
@@ -3,12 +3,9 @@ import React, { InputHTMLAttributes } from "react";
|
|
|
3
3
|
export type CheckboxSize = "md" | "sm";
|
|
4
4
|
export interface CheckboxProps {
|
|
5
5
|
description?: string;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
id?: string;
|
|
8
6
|
indeterminate?: boolean;
|
|
9
7
|
invalid?: boolean;
|
|
10
8
|
label: string;
|
|
11
|
-
required?: boolean;
|
|
12
9
|
size?: CheckboxSize;
|
|
13
10
|
}
|
|
14
11
|
export type CheckboxElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxProps | "type"> & CheckboxProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAEf;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,0KAqEpB,CAAA"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import Icon from '../../utilities/Icon.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import React, { forwardRef, useCallback } from 'react';
|
|
4
|
+
import { useId } from '../../utilities/useId.js';
|
|
4
5
|
|
|
5
|
-
let idCounter = 0;
|
|
6
|
-
const buildCheckboxClassName = ({ className, invalid, size, }) => {
|
|
7
|
-
return classNames("tds-checkbox", size && size !== "md" && `tds-checkbox--${size}`, invalid && "tds-checkbox--invalid", className);
|
|
8
|
-
};
|
|
9
6
|
/**
|
|
10
7
|
* A checkbox component that renders as a checkbox input with label.
|
|
11
8
|
* Supports various sizes, error states, and disabled states.
|
|
@@ -13,7 +10,7 @@ const buildCheckboxClassName = ({ className, invalid, size, }) => {
|
|
|
13
10
|
*
|
|
14
11
|
* @component
|
|
15
12
|
*/
|
|
16
|
-
const Checkbox = forwardRef(({ className, description,
|
|
13
|
+
const Checkbox = forwardRef(({ className, description, id, indeterminate = false, invalid, label, size = "md", ...restProps }, ref) => {
|
|
17
14
|
const callbackRef = useCallback((element) => {
|
|
18
15
|
if (element) {
|
|
19
16
|
element.indeterminate = indeterminate;
|
|
@@ -26,14 +23,11 @@ const Checkbox = forwardRef(({ className, description, disabled, id, indetermina
|
|
|
26
23
|
ref.current = element;
|
|
27
24
|
}
|
|
28
25
|
}, [ref, indeterminate]);
|
|
29
|
-
const combinedClassName =
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
size,
|
|
33
|
-
});
|
|
34
|
-
const checkboxId = id || `tds-checkbox-${idCounter++}`;
|
|
26
|
+
const combinedClassName = classNames("tds-checkbox", size && size === "sm" && `tds-checkbox--sm`, invalid && "tds-checkbox--invalid", className);
|
|
27
|
+
const stableId = useId();
|
|
28
|
+
const checkboxId = id || `tds-checkbox-${stableId}`;
|
|
35
29
|
return (React.createElement("div", { className: combinedClassName },
|
|
36
|
-
React.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid,
|
|
30
|
+
React.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid, id: checkboxId, ref: callbackRef, type: "checkbox" }),
|
|
37
31
|
React.createElement("label", { htmlFor: checkboxId }, label),
|
|
38
32
|
description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" },
|
|
39
33
|
React.createElement(Icon, { className: "tds-checkbox-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\nexport interface CheckboxProps {\n description?: string\n
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\nexport interface CheckboxProps {\n description?: string\n indeterminate?: boolean\n invalid?: boolean\n label: string\n size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const callbackRef = useCallback(\n (element: HTMLInputElement | null) => {\n if (element) {\n element.indeterminate = indeterminate\n }\n\n // Handle the forwarded ref\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref && typeof ref === \"object\") {\n ref.current = element\n }\n },\n [ref, indeterminate]\n )\n\n const combinedClassName = classNames(\n \"tds-checkbox\",\n size && size === \"sm\" && `tds-checkbox--sm`,\n invalid && \"tds-checkbox--invalid\",\n className\n )\n\n const stableId = useId()\n const checkboxId = id || `tds-checkbox-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n <label htmlFor={checkboxId}>{label}</label>\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n <Icon\n className=\"tds-checkbox-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;;;AAwBA;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,OAAgC,KAAI;QACnC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,aAAa,GAAG,aAAa;QACvC;;AAGA,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC;QACd;AAAO,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO;QACvB;AACF,IAAA,CAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB;IAED,MAAM,iBAAiB,GAAG,UAAU,CAClC,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,gBAAA,CAAkB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,EAAE,IAAI,CAAA,aAAA,EAAgB,QAAQ,EAAE;AAEnD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,GAAG,SAAS,EAAA,cAAA,EAEzC,OAAO,EACrB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EAAA,CACf;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QAC1C,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA;YAEpC,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,uCAAuC,EACjD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../tapestry-wc/dist/components/p-
|
|
1
|
+
import '../../tapestry-wc/dist/components/p-Cp4MhTnK.js';
|
|
2
2
|
import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
|
|
3
3
|
import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../tapestry-wc/dist/components/p-
|
|
1
|
+
import '../../tapestry-wc/dist/components/p-Cp4MhTnK.js';
|
|
2
2
|
import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
|
|
3
3
|
import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
|
|
4
4
|
import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';
|