@planningcenter/tapestry 3.0.0-rc.9 → 3.0.0
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/Banner/Banner.js +1 -1
- package/dist/components/button/BaseButton.d.ts +1 -1
- package/dist/components/button/BaseButton.d.ts.map +1 -1
- package/dist/components/button/BaseButton.js +5 -4
- package/dist/components/button/BaseButton.js.map +1 -1
- package/dist/components/button/DropdownButton.d.ts +1 -0
- package/dist/components/button/DropdownButton.d.ts.map +1 -1
- package/dist/components/button/DropdownButton.js.map +1 -1
- package/dist/components/button/IconButton.js +1 -1
- package/dist/components/button/IconButton.js.map +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.d.ts +1 -0
- package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
- package/dist/components/button/index.d.ts +5 -0
- package/dist/components/button/index.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +27 -7
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +19 -16
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/input/Input.d.ts +44 -0
- package/dist/components/input/Input.d.ts.map +1 -0
- package/dist/components/input/Input.js +44 -0
- package/dist/components/input/Input.js.map +1 -0
- package/dist/components/input/index.d.ts +4 -0
- package/dist/components/input/index.d.ts.map +1 -0
- package/dist/components/internal/index.d.ts.map +1 -1
- package/dist/components/link/BaseLink.d.ts +1 -1
- package/dist/components/link/BaseLink.d.ts.map +1 -1
- package/dist/components/link/BaseLink.js +6 -6
- package/dist/components/link/BaseLink.js.map +1 -1
- package/dist/components/link/index.d.ts +2 -0
- package/dist/components/link/index.d.ts.map +1 -1
- package/dist/components/page-header/PageHeader.d.ts.map +1 -1
- package/dist/components/page-header/PageHeader.js +39 -7
- package/dist/components/page-header/PageHeader.js.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/radio/Radio.d.ts +42 -0
- package/dist/components/radio/Radio.d.ts.map +1 -0
- package/dist/components/radio/Radio.js +32 -0
- package/dist/components/radio/Radio.js.map +1 -0
- package/dist/components/radio/index.d.ts +4 -0
- package/dist/components/radio/index.d.ts.map +1 -0
- package/dist/components/radio-group/RadioGroup.d.ts +23 -0
- package/dist/components/radio-group/RadioGroup.d.ts.map +1 -0
- package/dist/components/radio-group/RadioGroup.js +29 -0
- package/dist/components/radio-group/RadioGroup.js.map +1 -0
- package/dist/components/radio-group/index.d.ts +4 -0
- package/dist/components/radio-group/index.d.ts.map +1 -0
- package/dist/components/sidenav/index.js +1 -1
- package/dist/components/textarea/TextArea.d.ts +38 -0
- package/dist/components/textarea/TextArea.d.ts.map +1 -0
- package/dist/components/textarea/TextArea.js +27 -0
- package/dist/components/textarea/TextArea.js.map +1 -0
- package/dist/components/textarea/index.d.ts +4 -0
- package/dist/components/textarea/index.d.ts.map +1 -0
- package/dist/components/toggle-switch/ToggleSwitch.d.ts +50 -0
- package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -0
- package/dist/components/toggle-switch/ToggleSwitch.js +31 -0
- package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -0
- package/dist/components/toggle-switch/index.d.ts +4 -0
- package/dist/components/toggle-switch/index.d.ts.map +1 -0
- package/dist/index.css +704 -221
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +6 -12
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/jsTokens.d.ts +1 -1
- package/dist/jsTokens.d.ts.map +1 -1
- package/dist/jsTokens.js +1 -1
- package/dist/jsTokens.js.map +1 -1
- package/dist/print-no-media-queries.css +2 -2
- package/dist/print.css +2 -2
- package/dist/reactRender.css +2337 -1650
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +2337 -1650
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-render/dist/{buildComponent-D0S78fIn.js → buildComponent-Dr2UOgFa.js} +20 -20
- package/dist/tapestry-render/dist/{buildComponent-D0S78fIn.js.map → buildComponent-Dr2UOgFa.js.map} +1 -1
- package/dist/tapestry-render/dist/index.js +1 -1
- package/dist/tapestry-render/dist/index.js.map +1 -1
- package/dist/tapestry-render/dist/legacy.js +6 -6
- package/dist/tapestry-render/dist/legacy.js.map +1 -1
- package/dist/tapestry-reset.css +186 -0
- package/dist/tapestry-reset.css.map +1 -0
- package/dist/tapestry-reset.js +3 -0
- package/dist/tapestry-wc/dist/components/{p-uw_SPrG0.js → p-BF5btZ2U.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-BF5btZ2U.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-DZ-15cqc.js → p-BO35mzk2.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-BO35mzk2.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-B8ftfzse.js → p-Bdkqq_Bn.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-Bdkqq_Bn.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-D1od_m1m.js → p-DhuhrZb1.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-DhuhrZb1.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-CCBOjvhG.js → p-gTgcP9lI.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-gTgcP9lI.js.map +1 -0
- 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 +5 -5
- 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 +6 -6
- package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/dist/tokens/tokens-deprecated.json +13 -166
- package/dist/tokens-dark.css +6 -4
- package/dist/tokens-dark.css.map +1 -1
- package/dist/tokens-dark.js +2 -0
- package/dist/tokens-deprecated.css +4 -102
- package/dist/tokens-deprecated.css.map +1 -1
- package/dist/tokens-deprecated.js +2 -0
- package/dist/tokens.css +35 -17
- package/dist/tokens.css.map +1 -1
- package/dist/tokens.js +2 -0
- package/dist/unstable.css +1149 -462
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +3 -3
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +10 -2
- package/dist/unstable.js.map +1 -1
- package/dist/utilities/Icon.d.ts.map +1 -1
- package/dist/utilities/Icon.js +12 -19
- package/dist/utilities/Icon.js.map +1 -1
- package/dist/utilities/useId.d.ts +2 -0
- package/dist/utilities/useId.d.ts.map +1 -0
- package/dist/utilities/useId.js +14 -0
- package/dist/utilities/useId.js.map +1 -0
- package/package.json +23 -19
- package/react-types/index.d.ts +8 -8
- package/react-types/popover.d.ts +7 -0
- package/dist/tapestry-wc/dist/components/p-B8ftfzse.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-CCBOjvhG.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-D1od_m1m.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-DZ-15cqc.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-uw_SPrG0.js.map +0 -1
- package/dist/tokens/ts/react-native-tokens.d.ts +0 -1765
- package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
- package/dist/tokens/ts/react-native-tokens.js +0 -455
- package/dist/tokens/ts/react-native-tokens.js.map +0 -1
- package/dist/tokens/ts/tokens.d.ts +0 -453
- package/dist/tokens/ts/tokens.d.ts.map +0 -1
- package/dist/tokens/ts/tokens.js +0 -455
- package/dist/tokens/ts/tokens.js.map +0 -1
- package/dist/tokens-deprecated.d.ts +0 -4
- package/dist/tokens-deprecated.d.ts.map +0 -1
- package/dist/tokens.d.ts +0 -4
- package/dist/tokens.d.ts.map +0 -1
|
@@ -29,5 +29,5 @@ const Banner = ({ children = "", size = "md", status = "neutral", title = "", })
|
|
|
29
29
|
React.createElement("div", { className: "t-banner-body" }, children))));
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
-
export { Banner
|
|
32
|
+
export { Banner };
|
|
33
33
|
//# sourceMappingURL=Banner.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./btn.css";
|
|
2
|
-
import React, { ButtonHTMLAttributes } from "react";
|
|
3
2
|
import { BaseComponentProps, ComponentKind } from "../../utilities/buttonLinkShared";
|
|
3
|
+
import React, { ButtonHTMLAttributes } from "react";
|
|
4
4
|
export interface BaseButtonProps extends Omit<BaseComponentProps, "kind"> {
|
|
5
5
|
kind?: ComponentKind;
|
|
6
6
|
label: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAyBjB,eAAO,MAAM,UAAU,qLAiDtB,CAAA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
+
import LoadingSpinner from '../internal/LoadingSpinner.js';
|
|
2
|
+
import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
|
|
1
3
|
import classNames from 'classnames';
|
|
2
4
|
import React, { forwardRef } from 'react';
|
|
3
|
-
import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
|
|
4
|
-
import LoadingSpinner from '../internal/LoadingSpinner.js';
|
|
5
5
|
|
|
6
6
|
const buildComponentClassName = ({ className, fullWidth, kind, loading, size, }) => {
|
|
7
7
|
return classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className);
|
|
8
8
|
};
|
|
9
|
-
const BaseButton = forwardRef(({
|
|
9
|
+
const BaseButton = forwardRef(({ "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
|
|
10
10
|
const combinedClassName = buildComponentClassName({
|
|
11
11
|
className,
|
|
12
12
|
fullWidth,
|
|
@@ -16,7 +16,8 @@ const BaseButton = forwardRef(({ size, prefix, suffix, kind = "secondary", label
|
|
|
16
16
|
});
|
|
17
17
|
const prefixElement = enhanceElementWithClassName(prefix, "prefix");
|
|
18
18
|
const suffixElement = enhanceElementWithClassName(suffix, "suffix");
|
|
19
|
-
|
|
19
|
+
const isDisabled = disabled || loading;
|
|
20
|
+
return (React.createElement("button", { type: "button", className: combinedClassName, ref: ref, ...restProps, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
|
|
20
21
|
loading && React.createElement(LoadingSpinner, null),
|
|
21
22
|
prefixElement,
|
|
22
23
|
loading ? React.createElement("span", null, label) : label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport
|
|
1
|
+
{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n \"aria-label\": ariaLabel,\n className,\n disabled = false,\n fullWidth,\n kind = \"secondary\",\n label,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n prefix,\n size,\n suffix,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n const isDisabled = disabled || loading\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n {...restProps}\n aria-busy={loading || undefined}\n aria-disabled={isDisabled || undefined}\n disabled={isDisabled}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA2BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV;AACH,CAAC;MAEY,UAAU,GAAG,UAAU,CAClC,CACE,EACE,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEnE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,eACF,OAAO,IAAI,SAAS,EAAA,eAAA,EAChB,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAIlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAKlE;AAED,eAAO,MAAM,cAAc,yPAKzB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n \"aria-controls\": string\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n \"aria-controls\": string\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;AAcM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAE,KAAA,CAAA,aAAA,CAAC,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KACzD;AACH;AAEO,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -8,7 +8,7 @@ import { BaseButton } from './BaseButton.js';
|
|
|
8
8
|
*
|
|
9
9
|
* @component
|
|
10
10
|
*/
|
|
11
|
-
const IconButton = forwardRef(({
|
|
11
|
+
const IconButton = forwardRef(({ className, icon, ...restProps }, ref) => {
|
|
12
12
|
const iconOnlyClassName = classNames("tds-btn--icononly", className);
|
|
13
13
|
return (React.createElement(BaseButton, { ...restProps, label: icon, className: iconOnlyClassName, ref: ref }));
|
|
14
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, icon, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderActionsDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageHeaderActionsDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtE,MAAM,MAAM,oCAAoC,GAAG,IAAI,CACrD,sBAAsB,EACtB,MAAM,CACP,GACC,mBAAmB,GAAG;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAEH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;;;;;;EAWA;AAED,eAAO,MAAM,+BAA+B;qBAtBvB,OAAO;2CA2C3B,CAAA"}
|
|
@@ -12,7 +12,7 @@ function needsAttentionProps({ className, needsAttention, }) {
|
|
|
12
12
|
className,
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
-
const PageHeaderActionsDropdownButton = forwardRef(({
|
|
15
|
+
const PageHeaderActionsDropdownButton = forwardRef(({ className, needsAttention, ...props }, ref) => {
|
|
16
16
|
return (React.createElement(DropdownButton, { ref: ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
|
|
17
17
|
});
|
|
18
18
|
PageHeaderActionsDropdownButton.displayName = "PageHeaderActionsDropdownButton";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n
|
|
1
|
+
{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n className,\n needsAttention,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAgBgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEO,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import "./btn.css";
|
|
2
|
+
export type { ButtonElementProps } from "./Button";
|
|
2
3
|
export { Button } from "./Button";
|
|
4
|
+
export type { DropdownButtonProps } from "./DropdownButton";
|
|
3
5
|
export { DropdownButton } from "./DropdownButton";
|
|
4
6
|
export { DropdownIconButton } from "./DropdownIconButton";
|
|
7
|
+
export type { IconButtonProps } from "./IconButton";
|
|
5
8
|
export { IconButton } from "./IconButton";
|
|
9
|
+
export type { LoadingButtonProps } from "./LoadingButton";
|
|
6
10
|
export { LoadingButton } from "./LoadingButton";
|
|
11
|
+
export type { PageHeaderActionsDropdownButtonProps } from "./PageHeaderActionsDropdownButton";
|
|
7
12
|
export { PageHeaderActionsDropdownButton } from "./PageHeaderActionsDropdownButton";
|
|
8
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,oCAAoC,EAAE,MAAM,mCAAmC,CAAA;AAC7F,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAA"}
|
|
@@ -1,22 +1,42 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
2
|
import React, { InputHTMLAttributes } from "react";
|
|
3
|
-
export type CheckboxSize = "md" | "sm"
|
|
4
|
-
|
|
3
|
+
export type CheckboxSize = "md" | "sm";
|
|
4
|
+
interface CheckboxBaseProps {
|
|
5
5
|
description?: string;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
id?: string;
|
|
8
6
|
indeterminate?: boolean;
|
|
9
7
|
invalid?: boolean;
|
|
10
|
-
label: string;
|
|
11
8
|
size?: CheckboxSize;
|
|
12
9
|
}
|
|
10
|
+
interface CheckboxWithLabel extends CheckboxBaseProps {
|
|
11
|
+
"aria-labelledby"?: never;
|
|
12
|
+
/**
|
|
13
|
+
* Label content for the checkbox. When using non-string content
|
|
14
|
+
* (e.g. JSX), it must not contain interactive elements. This
|
|
15
|
+
* includes native HTML elements such as `<a>` and `<button>`, as
|
|
16
|
+
* well as Tapestry or Tapestry-React interactive components.
|
|
17
|
+
*/
|
|
18
|
+
label: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
interface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {
|
|
21
|
+
"aria-labelledby": string;
|
|
22
|
+
label?: never;
|
|
23
|
+
}
|
|
24
|
+
export type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy;
|
|
13
25
|
export type CheckboxElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxProps | "type"> & CheckboxProps;
|
|
14
26
|
/**
|
|
15
27
|
* A checkbox component that renders as a checkbox input with label.
|
|
16
28
|
* Supports various sizes, error states, and disabled states.
|
|
17
|
-
*
|
|
29
|
+
*
|
|
30
|
+
* **Required:** You must provide either:
|
|
31
|
+
* - `label` - Label content for the checkbox
|
|
32
|
+
* - `aria-labelledby` - ID of an external element that provides the label
|
|
33
|
+
*
|
|
34
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
35
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
36
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
18
37
|
*
|
|
19
38
|
* @component
|
|
20
39
|
*/
|
|
21
|
-
export declare const Checkbox: React.ForwardRefExoticComponent<
|
|
40
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxElementProps & React.RefAttributes<HTMLInputElement>>;
|
|
41
|
+
export {};
|
|
22
42
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAE3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,0BAA2B,SAAQ,iBAAiB;IAC5D,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,0BAA0B,CAAA;AAE1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAEf;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,+FAqEpB,CAAA"}
|
|
@@ -1,18 +1,23 @@
|
|
|
1
|
+
import Icon from '../../utilities/Icon.js';
|
|
2
|
+
import { useId } from '../../utilities/useId.js';
|
|
1
3
|
import classNames from 'classnames';
|
|
2
4
|
import React, { forwardRef, useCallback } from 'react';
|
|
3
5
|
|
|
4
|
-
let idCounter = 0;
|
|
5
|
-
const buildCheckboxClassName = ({ className, invalid, indeterminate, size, }) => {
|
|
6
|
-
return classNames("tds-checkbox", size && size !== "md" && `tds-checkbox--${size}`, invalid && "tds-checkbox--invalid", indeterminate && "tds-checkbox--indeterminate", className);
|
|
7
|
-
};
|
|
8
6
|
/**
|
|
9
7
|
* A checkbox component that renders as a checkbox input with label.
|
|
10
8
|
* Supports various sizes, error states, and disabled states.
|
|
11
|
-
*
|
|
9
|
+
*
|
|
10
|
+
* **Required:** You must provide either:
|
|
11
|
+
* - `label` - Label content for the checkbox
|
|
12
|
+
* - `aria-labelledby` - ID of an external element that provides the label
|
|
13
|
+
*
|
|
14
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
15
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
16
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
12
17
|
*
|
|
13
18
|
* @component
|
|
14
19
|
*/
|
|
15
|
-
const Checkbox = forwardRef(({ className, description,
|
|
20
|
+
const Checkbox = forwardRef(({ className, description, id, indeterminate = false, invalid, label, size = "md", ...restProps }, ref) => {
|
|
16
21
|
const callbackRef = useCallback((element) => {
|
|
17
22
|
if (element) {
|
|
18
23
|
element.indeterminate = indeterminate;
|
|
@@ -25,17 +30,15 @@ const Checkbox = forwardRef(({ className, description, disabled, id, indetermina
|
|
|
25
30
|
ref.current = element;
|
|
26
31
|
}
|
|
27
32
|
}, [ref, indeterminate]);
|
|
28
|
-
const combinedClassName =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
invalid,
|
|
32
|
-
size,
|
|
33
|
-
});
|
|
34
|
-
const checkboxId = id || `tds-checkbox-${idCounter++}`;
|
|
33
|
+
const combinedClassName = classNames("tds-checkbox", size && size === "sm" && `tds-checkbox--sm`, invalid && "tds-checkbox--invalid", className);
|
|
34
|
+
const stableId = useId();
|
|
35
|
+
const checkboxId = id || `tds-checkbox-${stableId}`;
|
|
35
36
|
return (React.createElement("div", { className: combinedClassName },
|
|
36
|
-
React.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid,
|
|
37
|
-
React.createElement("label", { htmlFor: checkboxId }, label),
|
|
38
|
-
description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" },
|
|
37
|
+
React.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid, id: checkboxId, ref: callbackRef, type: "checkbox" }),
|
|
38
|
+
label && React.createElement("label", { htmlFor: checkboxId }, label),
|
|
39
|
+
description && (React.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" },
|
|
40
|
+
React.createElement(Icon, { className: "tds-checkbox-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
|
|
41
|
+
description))));
|
|
39
42
|
});
|
|
40
43
|
Checkbox.displayName = "Checkbox";
|
|
41
44
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\ninterface CheckboxBaseProps {\n description?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}\n\ninterface CheckboxWithLabel extends CheckboxBaseProps {\n \"aria-labelledby\"?: never\n /**\n * Label content for the checkbox. When using non-string content\n * (e.g. JSX), it must not contain interactive elements. This\n * includes native HTML elements such as `<a>` and `<button>`, as\n * well as Tapestry or Tapestry-React interactive components.\n */\n label: React.ReactNode\n}\n\ninterface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy\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 *\n * **Required:** You must provide either:\n * - `label` - Label content for the checkbox\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\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 && <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":";;;;;AAwCA;;;;;;;;;;;;;AAaG;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;AACD,QAAA,KAAK,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QACpD,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,oBAAoB,EACpB,aAAa,EACb,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import "./index.css";
|
|
2
|
+
import React, { type InputHTMLAttributes } from "react";
|
|
3
|
+
export type InputSize = "lg" | "md";
|
|
4
|
+
export type InputType = "email" | "number" | "password" | "search" | "tel" | "text" | "url";
|
|
5
|
+
interface InputBaseProps {
|
|
6
|
+
/** If true, the input width grows to fit content (inline editing) */
|
|
7
|
+
autoWidth?: boolean;
|
|
8
|
+
/** Helper text below the input. Red when invalid. */
|
|
9
|
+
description?: string;
|
|
10
|
+
/** Triggers invalid state (red border, red description) */
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
/** Highlights all text when the field receives focus */
|
|
13
|
+
selectTextOnFocus?: boolean;
|
|
14
|
+
/** Visual size of the input */
|
|
15
|
+
size?: InputSize;
|
|
16
|
+
/** Supported input types — defaults to 'text' */
|
|
17
|
+
type?: InputType;
|
|
18
|
+
}
|
|
19
|
+
interface InputWithVisibleLabel extends InputBaseProps {
|
|
20
|
+
/** If true, label is rendered as aria-label instead of visible label */
|
|
21
|
+
hideLabel?: false;
|
|
22
|
+
/** Label text displayed above the input */
|
|
23
|
+
label: React.ReactNode;
|
|
24
|
+
}
|
|
25
|
+
interface InputWithHiddenLabel extends InputBaseProps {
|
|
26
|
+
/** If true, label is rendered as aria-label instead of visible label */
|
|
27
|
+
hideLabel: true;
|
|
28
|
+
/** Label text used as aria-label (must be string when hidden) */
|
|
29
|
+
label: string;
|
|
30
|
+
}
|
|
31
|
+
interface InputWithAriaLabelledBy extends InputBaseProps {
|
|
32
|
+
"aria-labelledby": string;
|
|
33
|
+
hideLabel?: never;
|
|
34
|
+
label?: never;
|
|
35
|
+
}
|
|
36
|
+
export type InputProps = InputWithAriaLabelledBy | InputWithHiddenLabel | InputWithVisibleLabel;
|
|
37
|
+
/**
|
|
38
|
+
* Combines standard HTML input attributes with custom Input props.
|
|
39
|
+
* Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.
|
|
40
|
+
*/
|
|
41
|
+
export type InputElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputProps | "size" | "type"> & InputProps;
|
|
42
|
+
export declare const Input: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
|
|
43
|
+
export {};
|
|
44
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEnE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,CAAA;AAET,UAAU,cAAc;IACtB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,qBAAsB,SAAQ,cAAc;IACpD,wEAAwE;IACxE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,wEAAwE;IACxE,SAAS,EAAE,IAAI,CAAA;IACf,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAClB,uBAAuB,GACvB,oBAAoB,GACpB,qBAAqB,CAAA;AAEzB;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CACnC,GACC,UAAU,CAAA;AAEZ,eAAO,MAAM,KAAK,4FAmFjB,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import Icon from '../../utilities/Icon.js';
|
|
2
|
+
import { useId } from '../../utilities/useId.js';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import React, { forwardRef } from 'react';
|
|
5
|
+
|
|
6
|
+
const Input = forwardRef(function Input({ "aria-label": ariaLabel, autoComplete, autoWidth, className, description, hideLabel, id, invalid, label, onFocus, selectTextOnFocus, size = "md", type = "text", ...restProps }, ref) {
|
|
7
|
+
const combinedClassName = classNames("tds-input", {
|
|
8
|
+
"tds-input--auto-width": autoWidth,
|
|
9
|
+
"tds-input--invalid": invalid,
|
|
10
|
+
"tds-input--lg": size === "lg",
|
|
11
|
+
}, className);
|
|
12
|
+
const stableId = useId();
|
|
13
|
+
const inputId = id || `tds-input-${stableId}`;
|
|
14
|
+
const descriptionId = description ? `${inputId}-description` : undefined;
|
|
15
|
+
const autoCompleteBlockingProps = autoComplete === "off"
|
|
16
|
+
? {
|
|
17
|
+
"data-1p-ignore": true,
|
|
18
|
+
"data-bwignore": true,
|
|
19
|
+
"data-form-type": "other",
|
|
20
|
+
"data-lpignore": true,
|
|
21
|
+
}
|
|
22
|
+
: {};
|
|
23
|
+
const handleFocus = selectTextOnFocus
|
|
24
|
+
? (event) => {
|
|
25
|
+
try {
|
|
26
|
+
event.currentTarget.select();
|
|
27
|
+
}
|
|
28
|
+
catch {
|
|
29
|
+
// Some input types (e.g. number) do not support text selection.
|
|
30
|
+
}
|
|
31
|
+
onFocus?.(event);
|
|
32
|
+
}
|
|
33
|
+
: onFocus;
|
|
34
|
+
return (React.createElement("div", { className: combinedClassName },
|
|
35
|
+
!hideLabel && label ? React.createElement("label", { htmlFor: inputId }, label) : null,
|
|
36
|
+
React.createElement("input", { ...restProps, ...autoCompleteBlockingProps, "aria-describedby": descriptionId, "aria-invalid": invalid || undefined, "aria-label": hideLabel ? ariaLabel || label : ariaLabel, autoComplete: autoComplete, id: inputId, onFocus: handleFocus, ref: ref, type: type }),
|
|
37
|
+
description && (React.createElement("p", { className: "tds-input-description", id: descriptionId },
|
|
38
|
+
React.createElement(Icon, { "aria-hidden": true, className: "tds-input-description-invalid-icon", symbol: "general#exclamation-triangle" }),
|
|
39
|
+
description))));
|
|
40
|
+
});
|
|
41
|
+
Input.displayName = "Input";
|
|
42
|
+
|
|
43
|
+
export { Input };
|
|
44
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type InputHTMLAttributes } from \"react\"\n\nexport type InputSize = \"lg\" | \"md\"\n\nexport type InputType =\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"url\"\n\ninterface InputBaseProps {\n /** If true, the input width grows to fit content (inline editing) */\n autoWidth?: boolean\n /** Helper text below the input. Red when invalid. */\n description?: string\n /** Triggers invalid state (red border, red description) */\n invalid?: boolean\n /** Highlights all text when the field receives focus */\n selectTextOnFocus?: boolean\n /** Visual size of the input */\n size?: InputSize\n /** Supported input types — defaults to 'text' */\n type?: InputType\n}\n\ninterface InputWithVisibleLabel extends InputBaseProps {\n /** If true, label is rendered as aria-label instead of visible label */\n hideLabel?: false\n /** Label text displayed above the input */\n label: React.ReactNode\n}\n\ninterface InputWithHiddenLabel extends InputBaseProps {\n /** If true, label is rendered as aria-label instead of visible label */\n hideLabel: true\n /** Label text used as aria-label (must be string when hidden) */\n label: string\n}\n\ninterface InputWithAriaLabelledBy extends InputBaseProps {\n \"aria-labelledby\": string\n hideLabel?: never\n label?: never\n}\n\nexport type InputProps =\n | InputWithAriaLabelledBy\n | InputWithHiddenLabel\n | InputWithVisibleLabel\n\n/**\n * Combines standard HTML input attributes with custom Input props.\n * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.\n */\nexport type InputElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof InputProps | \"size\" | \"type\"\n> &\n InputProps\n\nexport const Input = forwardRef<HTMLInputElement, InputElementProps>(\n function Input(\n {\n \"aria-label\": ariaLabel,\n autoComplete,\n autoWidth,\n className,\n description,\n hideLabel,\n id,\n invalid,\n label,\n onFocus,\n selectTextOnFocus,\n size = \"md\",\n type = \"text\",\n ...restProps\n }: InputElementProps,\n ref\n ) {\n const combinedClassName = classNames(\n \"tds-input\",\n {\n \"tds-input--auto-width\": autoWidth,\n \"tds-input--invalid\": invalid,\n \"tds-input--lg\": size === \"lg\",\n },\n className\n )\n\n const stableId = useId()\n const inputId = id || `tds-input-${stableId}`\n const descriptionId = description ? `${inputId}-description` : undefined\n\n const autoCompleteBlockingProps =\n autoComplete === \"off\"\n ? {\n \"data-1p-ignore\": true,\n \"data-bwignore\": true,\n \"data-form-type\": \"other\",\n \"data-lpignore\": true,\n }\n : {}\n\n const handleFocus = selectTextOnFocus\n ? (event: React.FocusEvent<HTMLInputElement>) => {\n try {\n event.currentTarget.select()\n } catch {\n // Some input types (e.g. number) do not support text selection.\n }\n onFocus?.(event)\n }\n : onFocus\n\n return (\n <div className={combinedClassName}>\n {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n <input\n {...restProps}\n {...autoCompleteBlockingProps}\n aria-describedby={descriptionId}\n aria-invalid={invalid || undefined}\n aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n autoComplete={autoComplete}\n id={inputId}\n onFocus={handleFocus}\n ref={ref}\n type={type}\n />\n {description && (\n <p className=\"tds-input-description\" id={descriptionId}>\n <Icon\n aria-hidden\n className=\"tds-input-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nInput.displayName = \"Input\"\n"],"names":[],"mappings":";;;;;MAoEa,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX;AACE,QAAA,uBAAuB,EAAE,SAAS;AAClC,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;KAC/B,EACD,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS;AAExE,IAAA,MAAM,yBAAyB,GAC7B,YAAY,KAAK;AACf,UAAE;AACE,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,eAAe,EAAE,IAAI;AACtB;UACD,EAAE;IAER,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAyC,KAAI;AAC5C,YAAA,IAAI;AACF,gBAAA,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B;AAAE,YAAA,MAAM;;YAER;AACA,YAAA,OAAO,GAAG,KAAK,CAAC;QAClB;UACA,OAAO;AAEX,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,GAAG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,IAAG,KAAK,CAAS,GAAG,IAAI;AACtE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,GACT,yBAAyB,sBACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,EAClE,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV;QACD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,aAAa,EAAA;YACpD,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,SAAS,GACV,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/internal/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "../button/btn.css";
|
|
2
|
-
import React, { AnchorHTMLAttributes } from "react";
|
|
3
2
|
import { BaseComponentProps, ComponentKind } from "../../utilities/buttonLinkShared";
|
|
3
|
+
import React, { AnchorHTMLAttributes } from "react";
|
|
4
4
|
export interface BaseLinkElementProps extends BaseComponentProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseComponentProps | "children"> {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
external?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAiBD,eAAO,MAAM,QAAQ,gGA4CpB,CAAA"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
+
import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
|
|
1
2
|
import classNames from 'classnames';
|
|
2
3
|
import React, { forwardRef } from 'react';
|
|
3
|
-
import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
|
|
4
4
|
|
|
5
|
-
const buildComponentClassName = (size, kind, className) => {
|
|
6
|
-
return classNames("tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], className);
|
|
5
|
+
const buildComponentClassName = (size, kind, fullWidth, className) => {
|
|
6
|
+
return classNames("tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className);
|
|
7
7
|
};
|
|
8
|
-
const BaseLink = forwardRef(({
|
|
9
|
-
const combinedClassName = buildComponentClassName(size, kind, className);
|
|
8
|
+
const BaseLink = forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
|
|
9
|
+
const combinedClassName = buildComponentClassName(size, kind, fullWidth, className);
|
|
10
10
|
const prefixElement = enhanceElementWithClassName(prefix, "prefix");
|
|
11
11
|
const suffixElement = enhanceElementWithClassName(suffix, "suffix");
|
|
12
12
|
const externalProps = external
|
|
13
13
|
? { rel: "noopener noreferrer", target: "_blank" }
|
|
14
14
|
: {};
|
|
15
|
-
return (React.createElement("a", { href: href, className: combinedClassName, ref: ref, ...
|
|
15
|
+
return (React.createElement("a", { href: href, className: combinedClassName, ref: ref, ...restProps, ...externalProps },
|
|
16
16
|
prefixElement,
|
|
17
17
|
label || children,
|
|
18
18
|
suffixElement));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport
|
|
1
|
+
{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps | \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n fullWidth?: boolean,\n className?: string\n): string => {\n return classNames(\n \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n children,\n className,\n external = false,\n fullWidth,\n href,\n kind,\n label,\n prefix,\n size,\n suffix,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(\n size,\n kind,\n fullWidth,\n className\n )\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...restProps}\n {...externalProps}\n >\n {prefixElement}\n {label || children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA0BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAmB,EACnB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,SAAS,EACT,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,uBAAuB,CAC/C,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,SAAS,CACV;IAED,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,KACT,aAAa,EAAA;QAEhB,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAE1B,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBA+BA"}
|