@planningcenter/tapestry 3.0.0 → 3.0.1-rc.1
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 +7 -7
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/button/BaseButton.js +4 -4
- package/dist/components/button/BaseButton.js.map +1 -1
- package/dist/components/button/Button.js +2 -2
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/DropdownButton.js +3 -3
- package/dist/components/button/DropdownButton.js.map +1 -1
- package/dist/components/button/DropdownIconButton.js +2 -2
- package/dist/components/button/DropdownIconButton.js.map +1 -1
- package/dist/components/button/IconButton.js +2 -2
- package/dist/components/button/IconButton.js.map +1 -1
- package/dist/components/button/LoadingButton.js +2 -2
- package/dist/components/button/LoadingButton.js.map +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js +3 -3
- package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js +6 -6
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +5 -18
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-text-base/InputTextBase.d.ts +17 -0
- package/dist/components/input-text-base/InputTextBase.d.ts.map +1 -0
- package/dist/components/input-text-base/InputTextBase.js +26 -0
- package/dist/components/input-text-base/InputTextBase.js.map +1 -0
- package/dist/components/input-text-base/index.d.ts +4 -0
- package/dist/components/input-text-base/index.d.ts.map +1 -0
- package/dist/components/internal/LoadingSpinner.js +2 -2
- package/dist/components/internal/LoadingSpinner.js.map +1 -1
- package/dist/components/link/BaseLink.js +2 -2
- package/dist/components/link/BaseLink.js.map +1 -1
- package/dist/components/link/IconLink.js +2 -2
- package/dist/components/link/IconLink.js.map +1 -1
- package/dist/components/link/Link.js +2 -2
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/radio/Radio.js +5 -5
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/select/SelectNative.d.ts +18 -0
- package/dist/components/select/SelectNative.d.ts.map +1 -0
- package/dist/components/select/SelectOptions.d.ts +9 -0
- package/dist/components/select/SelectOptions.d.ts.map +1 -0
- package/dist/components/select/SelectPopover.d.ts +63 -0
- package/dist/components/select/SelectPopover.d.ts.map +1 -0
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.d.ts.map +1 -0
- package/dist/components/sidenav/index.js +1 -1
- package/dist/components/text-area/TextArea.d.ts.map +1 -0
- package/dist/components/text-area/TextArea.js +16 -0
- package/dist/components/text-area/TextArea.js.map +1 -0
- package/dist/components/text-area/index.d.ts.map +1 -0
- package/dist/components/toggle-switch/ToggleSwitch.js +6 -6
- package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -1
- package/dist/reactRender.css +497 -614
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +497 -614
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-reset.css +10 -2
- package/dist/tapestry-reset.css.map +1 -1
- package/dist/tapestry-wc/dist/components/{p-Bdkqq_Bn.js → p-BRwQlDDG.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-BRwQlDDG.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-DhuhrZb1.js → p-C-PZqWzP.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-C-PZqWzP.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-BF5btZ2U.js → p-D20wThHn.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-D20wThHn.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-gTgcP9lI.js → p-DJRiC7FI.js} +3 -3
- package/dist/tapestry-wc/dist/components/p-DJRiC7FI.js.map +1 -0
- package/dist/tapestry-wc/dist/components/{p-BO35mzk2.js → p-De9z2C7O.js} +2 -2
- package/dist/tapestry-wc/dist/components/p-De9z2C7O.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 +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/dist/unstable.css +91 -208
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +2 -1
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +1 -1
- package/dist/utilities/Icon.js +2 -2
- package/dist/utilities/Icon.js.map +1 -1
- package/dist/utilities/buttonLinkShared.js +4 -4
- package/dist/utilities/buttonLinkShared.js.map +1 -1
- package/dist/utilities/selectUtils.d.ts +15 -0
- package/dist/utilities/selectUtils.d.ts.map +1 -0
- package/package.json +8 -6
- package/dist/components/textarea/TextArea.d.ts.map +0 -1
- package/dist/components/textarea/TextArea.js +0 -27
- package/dist/components/textarea/TextArea.js.map +0 -1
- package/dist/components/textarea/index.d.ts.map +0 -1
- package/dist/tapestry-wc/dist/components/p-BF5btZ2U.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-BO35mzk2.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-Bdkqq_Bn.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-DhuhrZb1.js.map +0 -1
- package/dist/tapestry-wc/dist/components/p-gTgcP9lI.js.map +0 -1
- package/react-types/popover.d.ts +0 -7
- /package/dist/components/{textarea → text-area}/TextArea.d.ts +0 -0
- /package/dist/components/{textarea → text-area}/index.d.ts +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Icon from '../../utilities/Icon.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import React__default from 'react';
|
|
4
4
|
|
|
5
5
|
const ICONS = {
|
|
6
6
|
error: "general#exclamation-triangle",
|
|
@@ -21,12 +21,12 @@ const STATUSES = {
|
|
|
21
21
|
warning: "t-banner--status-warning",
|
|
22
22
|
};
|
|
23
23
|
const Banner = ({ children = "", size = "md", status = "neutral", title = "", }) => {
|
|
24
|
-
return (
|
|
25
|
-
ICONS[status] && (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
title &&
|
|
29
|
-
|
|
24
|
+
return (React__default.createElement("div", { className: classNames("t-banner", SIZES[size], STATUSES[status]) },
|
|
25
|
+
ICONS[status] && (React__default.createElement("span", { className: "t-banner-icon" },
|
|
26
|
+
React__default.createElement(Icon, { symbol: ICONS[status], "aria-hidden": true }))),
|
|
27
|
+
React__default.createElement("div", null,
|
|
28
|
+
title && React__default.createElement("span", { className: "t-banner-title" }, title),
|
|
29
|
+
React__default.createElement("div", { className: "t-banner-body" }, children))));
|
|
30
30
|
};
|
|
31
31
|
|
|
32
32
|
export { Banner };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import \"./Banner.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\ntype BannerProps = {\n /** The content to display in the banner */\n children: React.ReactNode\n\n /**\n * Set the size of the banner (adjusts padding)\n * @default \"md\"\n */\n size?: \"sm\" | \"md\"\n\n /**\n * Set the status of the banner\n * @default \"neutral\"\n */\n status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"\n\n /** Set the title of the banner */\n title?: string\n}\n\nconst ICONS = {\n error: \"general#exclamation-triangle\",\n info: \"general#info-circle\",\n neutral: null,\n success: \"general#check-circle\",\n warning: \"general#exclamation-triangle\",\n}\n\nconst SIZES = {\n md: \"\",\n sm: \"t-banner--sm\",\n}\n\nconst STATUSES = {\n error: \"t-banner--status-error\",\n info: \"t-banner--status-info\",\n neutral: \"t-banner--status-neutral\",\n success: \"t-banner--status-success\",\n warning: \"t-banner--status-warning\",\n}\n\nexport const Banner = ({\n children = \"\",\n size = \"md\",\n status = \"neutral\",\n title = \"\",\n}: BannerProps) => {\n return (\n <div className={classnames(\"t-banner\", SIZES[size], STATUSES[status])}>\n {ICONS[status] && (\n <span className=\"t-banner-icon\">\n <Icon symbol={ICONS[status]} aria-hidden />\n </span>\n )}\n <div>\n {title && <span className=\"t-banner-title\">{title}</span>}\n <div className=\"t-banner-body\">{children}</div>\n </div>\n </div>\n )\n}\n\nexport default Banner\n"],"names":["classnames"],"mappings":";;;;AA0BA,MAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,8BAA8B;CACxC;AAED,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,cAAc;CACnB;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,wBAAwB;AAC/B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;CACpC;MAEY,MAAM,GAAG,CAAC,EACrB,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,GACE,KAAI;AAChB,IAAA,
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import \"./Banner.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\ntype BannerProps = {\n /** The content to display in the banner */\n children: React.ReactNode\n\n /**\n * Set the size of the banner (adjusts padding)\n * @default \"md\"\n */\n size?: \"sm\" | \"md\"\n\n /**\n * Set the status of the banner\n * @default \"neutral\"\n */\n status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"\n\n /** Set the title of the banner */\n title?: string\n}\n\nconst ICONS = {\n error: \"general#exclamation-triangle\",\n info: \"general#info-circle\",\n neutral: null,\n success: \"general#check-circle\",\n warning: \"general#exclamation-triangle\",\n}\n\nconst SIZES = {\n md: \"\",\n sm: \"t-banner--sm\",\n}\n\nconst STATUSES = {\n error: \"t-banner--status-error\",\n info: \"t-banner--status-info\",\n neutral: \"t-banner--status-neutral\",\n success: \"t-banner--status-success\",\n warning: \"t-banner--status-warning\",\n}\n\nexport const Banner = ({\n children = \"\",\n size = \"md\",\n status = \"neutral\",\n title = \"\",\n}: BannerProps) => {\n return (\n <div className={classnames(\"t-banner\", SIZES[size], STATUSES[status])}>\n {ICONS[status] && (\n <span className=\"t-banner-icon\">\n <Icon symbol={ICONS[status]} aria-hidden />\n </span>\n )}\n <div>\n {title && <span className=\"t-banner-title\">{title}</span>}\n <div className=\"t-banner-body\">{children}</div>\n </div>\n </div>\n )\n}\n\nexport default Banner\n"],"names":["React","classnames"],"mappings":";;;;AA0BA,MAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,8BAA8B;CACxC;AAED,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,cAAc;CACnB;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,wBAAwB;AAC/B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;CACpC;MAEY,MAAM,GAAG,CAAC,EACrB,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,GACE,KAAI;AAChB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAA;QAClE,KAAK,CAAC,MAAM,CAAC,KACZD,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA;YAC7BA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAA,aAAA,EAAA,IAAA,EAAA,CAAgB,CACtC,CACR;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACG,YAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAQ;YACzDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CAC3C,CACF;AAEV;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import LoadingSpinner from '../internal/LoadingSpinner.js';
|
|
2
2
|
import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import
|
|
4
|
+
import React__default, { forwardRef } from 'react';
|
|
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);
|
|
@@ -17,10 +17,10 @@ const BaseButton = forwardRef(({ "aria-label": ariaLabel, className, disabled =
|
|
|
17
17
|
const prefixElement = enhanceElementWithClassName(prefix, "prefix");
|
|
18
18
|
const suffixElement = enhanceElementWithClassName(suffix, "suffix");
|
|
19
19
|
const isDisabled = disabled || loading;
|
|
20
|
-
return (
|
|
21
|
-
loading &&
|
|
20
|
+
return (React__default.createElement("button", { type: "button", className: combinedClassName, ref: ref, ...restProps, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
|
|
21
|
+
loading && React__default.createElement(LoadingSpinner, null),
|
|
22
22
|
prefixElement,
|
|
23
|
-
loading ?
|
|
23
|
+
loading ? React__default.createElement("span", null, label) : label,
|
|
24
24
|
suffixElement));
|
|
25
25
|
});
|
|
26
26
|
BaseButton.displayName = "BaseButton";
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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":["React"],"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,QACEA,cAAA,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,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,aAAa;QACb,OAAO,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
2
|
import { BaseButton } from './BaseButton.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -9,7 +9,7 @@ import { BaseButton } from './BaseButton.js';
|
|
|
9
9
|
* @component
|
|
10
10
|
*/
|
|
11
11
|
const Button = forwardRef((props, ref) => {
|
|
12
|
-
return
|
|
12
|
+
return React__default.createElement(BaseButton, { ...props, ref: ref });
|
|
13
13
|
});
|
|
14
14
|
Button.displayName = "Button";
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":[],"mappings":";;;AAUA;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":["React"],"mappings":";;;AAUA;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import Icon from '../../utilities/Icon.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import React__default, { forwardRef } from 'react';
|
|
4
4
|
import { BaseButton } from './BaseButton.js';
|
|
5
5
|
|
|
6
6
|
function dropdownProps({ className }) {
|
|
7
7
|
return {
|
|
8
8
|
className: classNames(className, "tds-btn--dropdown"),
|
|
9
|
-
suffix:
|
|
9
|
+
suffix: React__default.createElement(Icon, { symbol: "general#down-caret", "aria-hidden": true }),
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
12
|
const DropdownButton = forwardRef((props, ref) => {
|
|
13
|
-
return
|
|
13
|
+
return React__default.createElement(BaseButton, { ref: ref, ...props, ...dropdownProps(props) });
|
|
14
14
|
});
|
|
15
15
|
DropdownButton.displayName = "DropdownButton";
|
|
16
16
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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":["React"],"mappings":";;;;;AAcM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAEA,cAAA,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,OAAOA,cAAA,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;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
2
|
import { dropdownProps } from './DropdownButton.js';
|
|
3
3
|
import { IconButton } from './IconButton.js';
|
|
4
4
|
|
|
5
5
|
const DropdownIconButton = forwardRef((props, ref) => {
|
|
6
|
-
return
|
|
6
|
+
return React__default.createElement(IconButton, { ref: ref, ...props, ...dropdownProps(props) });
|
|
7
7
|
});
|
|
8
8
|
DropdownIconButton.displayName = "DropdownIconButton";
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,
|
|
1
|
+
{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":["React"],"mappings":";;;;AAKO,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
3
|
import { BaseButton } from './BaseButton.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -10,7 +10,7 @@ import { BaseButton } from './BaseButton.js';
|
|
|
10
10
|
*/
|
|
11
11
|
const IconButton = forwardRef(({ className, icon, ...restProps }, ref) => {
|
|
12
12
|
const iconOnlyClassName = classNames("tds-btn--icononly", className);
|
|
13
|
-
return (
|
|
13
|
+
return (React__default.createElement(BaseButton, { ...restProps, label: icon, className: iconOnlyClassName, ref: ref }));
|
|
14
14
|
});
|
|
15
15
|
IconButton.displayName = "IconButton";
|
|
16
16
|
|
|
@@ -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 ({ 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,
|
|
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":["React"],"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,QACEA,cAAA,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,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
2
|
import { BaseButton } from './BaseButton.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -18,7 +18,7 @@ import { BaseButton } from './BaseButton.js';
|
|
|
18
18
|
* @component
|
|
19
19
|
*/
|
|
20
20
|
const LoadingButton = forwardRef((props, ref) => {
|
|
21
|
-
return
|
|
21
|
+
return React__default.createElement(BaseButton, { ...props, ref: ref });
|
|
22
22
|
});
|
|
23
23
|
LoadingButton.displayName = "LoadingButton";
|
|
24
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n loading?: boolean\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,
|
|
1
|
+
{"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n loading?: boolean\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":["React"],"mappings":";;;AAcA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAOA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
3
|
import { DropdownButton } from './DropdownButton.js';
|
|
4
4
|
|
|
5
5
|
function needsAttentionProps({ className, needsAttention, }) {
|
|
6
6
|
return needsAttention
|
|
7
7
|
? {
|
|
8
8
|
className: classNames(className, "tds-btn--attention"),
|
|
9
|
-
prefix: (
|
|
9
|
+
prefix: (React__default.createElement("span", { className: "attention-icon", "aria-label": "Needs attention!" })),
|
|
10
10
|
}
|
|
11
11
|
: {
|
|
12
12
|
className,
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
15
|
const PageHeaderActionsDropdownButton = forwardRef(({ className, needsAttention, ...props }, ref) => {
|
|
16
|
-
return (
|
|
16
|
+
return (React__default.createElement(DropdownButton, { ref: ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
|
|
17
17
|
});
|
|
18
18
|
PageHeaderActionsDropdownButton.displayName = "PageHeaderActionsDropdownButton";
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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":["React"],"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,GACJA,cAAA,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,QACEA,cAAA,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,7 +1,7 @@
|
|
|
1
1
|
import Icon from '../../utilities/Icon.js';
|
|
2
2
|
import { useId } from '../../utilities/useId.js';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import
|
|
4
|
+
import React__default, { forwardRef, useCallback } from 'react';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* A checkbox component that renders as a checkbox input with label.
|
|
@@ -33,11 +33,11 @@ const Checkbox = forwardRef(({ className, description, id, indeterminate = false
|
|
|
33
33
|
const combinedClassName = classNames("tds-checkbox", size && size === "sm" && `tds-checkbox--sm`, invalid && "tds-checkbox--invalid", className);
|
|
34
34
|
const stableId = useId();
|
|
35
35
|
const checkboxId = id || `tds-checkbox-${stableId}`;
|
|
36
|
-
return (
|
|
37
|
-
|
|
38
|
-
label &&
|
|
39
|
-
description && (
|
|
40
|
-
|
|
36
|
+
return (React__default.createElement("div", { className: combinedClassName },
|
|
37
|
+
React__default.createElement("input", { ...restProps, "aria-describedby": description ? `${checkboxId}-description` : undefined, "aria-invalid": invalid, id: checkboxId, ref: callbackRef, type: "checkbox" }),
|
|
38
|
+
label && React__default.createElement("label", { htmlFor: checkboxId }, label),
|
|
39
|
+
description && (React__default.createElement("p", { id: `${checkboxId}-description`, className: "tds-checkbox-description" },
|
|
40
|
+
React__default.createElement(Icon, { className: "tds-checkbox-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
|
|
41
41
|
description))));
|
|
42
42
|
});
|
|
43
43
|
Checkbox.displayName = "Checkbox";
|
|
@@ -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 { 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,
|
|
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":["React"],"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,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,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,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QACpD,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA;YAEpCA,cAAA,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":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,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,4FA2EjB,CAAA"}
|
|
@@ -1,17 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useId } from '../../utilities/useId.js';
|
|
1
|
+
import { InputTextBase } from '../input-text-base/InputTextBase.js';
|
|
3
2
|
import classNames from 'classnames';
|
|
4
|
-
import
|
|
3
|
+
import React__default, { forwardRef } from 'react';
|
|
5
4
|
|
|
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;
|
|
5
|
+
const Input = forwardRef(function Input({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, autoWidth, className, description, hideLabel, id, invalid, label, onFocus, selectTextOnFocus, size = "md", type = "text", ...restProps }, ref) {
|
|
15
6
|
const autoCompleteBlockingProps = autoComplete === "off"
|
|
16
7
|
? {
|
|
17
8
|
"data-1p-ignore": true,
|
|
@@ -31,12 +22,8 @@ const Input = forwardRef(function Input({ "aria-label": ariaLabel, autoComplete,
|
|
|
31
22
|
onFocus?.(event);
|
|
32
23
|
}
|
|
33
24
|
: onFocus;
|
|
34
|
-
|
|
35
|
-
|
|
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))));
|
|
25
|
+
const wrapperClassName = classNames({ "tds-input--auto-width": autoWidth }, className);
|
|
26
|
+
return (React__default.createElement(InputTextBase, { className: wrapperClassName, description: description, hideLabel: hideLabel || !!ariaLabelledBy, id: id, invalid: invalid, label: label, size: size }, ({ descriptionId, inputId }) => (React__default.createElement("input", { ...restProps, ...autoCompleteBlockingProps, "aria-describedby": descriptionId, "aria-invalid": invalid || undefined, "aria-label": hideLabel ? ariaLabel || label : ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete: autoComplete, id: inputId, onFocus: handleFocus, ref: ref, type: type }))));
|
|
40
27
|
});
|
|
41
28
|
Input.displayName = "Input";
|
|
42
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { InputTextBase } from \"@components/input-text-base\"\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 \"aria-labelledby\": ariaLabelledBy,\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 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 const wrapperClassName = classNames(\n { \"tds-input--auto-width\": autoWidth },\n className\n )\n\n return (\n <InputTextBase\n className={wrapperClassName}\n description={description}\n hideLabel={hideLabel || !!ariaLabelledBy}\n id={id}\n invalid={invalid}\n label={label}\n size={size}\n >\n {({ descriptionId, inputId }) => (\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 aria-labelledby={ariaLabelledBy}\n autoComplete={autoComplete}\n id={inputId}\n onFocus={handleFocus}\n ref={ref}\n type={type}\n />\n )}\n </InputTextBase>\n )\n }\n)\n\nInput.displayName = \"Input\"\n"],"names":["React"],"mappings":";;;;MAmEa,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,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,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,MAAM,gBAAgB,GAAG,UAAU,CACjC,EAAE,uBAAuB,EAAE,SAAS,EAAE,EACtC,SAAS,CACV;IAED,QACEA,6BAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,cAAc,EACxC,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EAAA,EAET,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAC1BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,GACT,yBAAyB,sBACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,gBACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,qBACjD,cAAc,EAC/B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACa;AAEpB,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface InputTextBaseProps {
|
|
3
|
+
children: (props: {
|
|
4
|
+
descriptionId?: string;
|
|
5
|
+
inputId: string;
|
|
6
|
+
}) => React.ReactNode;
|
|
7
|
+
description?: string;
|
|
8
|
+
hideLabel?: boolean;
|
|
9
|
+
id?: string;
|
|
10
|
+
invalid?: boolean;
|
|
11
|
+
label?: React.ReactNode;
|
|
12
|
+
size?: "sm" | "md" | "lg";
|
|
13
|
+
}
|
|
14
|
+
export type InputTextBaseElementProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof InputTextBaseProps> & InputTextBaseProps;
|
|
15
|
+
export declare function InputTextBase({ children, className, description, hideLabel, id, label, invalid, size, }: InputTextBaseElementProps): React.JSX.Element;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=InputTextBase.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputTextBase.d.ts","sourceRoot":"","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,OAAO,EAAE,MAAM,CAAA;KAChB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAEpB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE,yBAAyB,qBA6B3B"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import Icon from '../../utilities/Icon.js';
|
|
2
|
+
import { useId } from '../../utilities/useId.js';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
|
|
6
|
+
function InputTextBase({ children, className, description, hideLabel, id, label, invalid, size, }) {
|
|
7
|
+
const combinedClassName = classNames("tds-input", className, {
|
|
8
|
+
"tds-input--invalid": invalid,
|
|
9
|
+
"tds-input--lg": size === "lg",
|
|
10
|
+
});
|
|
11
|
+
const stableId = useId();
|
|
12
|
+
const inputId = id || `tds-input-${stableId}`;
|
|
13
|
+
const descriptionId = description ? `${inputId}-description` : undefined;
|
|
14
|
+
return (React.createElement("div", { className: combinedClassName },
|
|
15
|
+
!hideLabel && label ? React.createElement("label", { htmlFor: inputId }, label) : null,
|
|
16
|
+
children({
|
|
17
|
+
descriptionId,
|
|
18
|
+
inputId,
|
|
19
|
+
}),
|
|
20
|
+
description && (React.createElement("p", { id: descriptionId, className: "tds-input-description" },
|
|
21
|
+
React.createElement(Icon, { className: "tds-input-description-invalid-icon", symbol: "general#exclamation-triangle", "aria-hidden": true }),
|
|
22
|
+
description))));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { InputTextBase };
|
|
26
|
+
//# sourceMappingURL=InputTextBase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputTextBase.js","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport * as React from \"react\"\n\ninterface InputTextBaseProps {\n children: (props: {\n descriptionId?: string\n inputId: string\n }) => React.ReactNode\n description?: string\n hideLabel?: boolean\n id?: string\n invalid?: boolean\n label?: React.ReactNode\n size?: \"sm\" | \"md\" | \"lg\"\n}\n\nexport type InputTextBaseElementProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n keyof InputTextBaseProps\n> &\n InputTextBaseProps\n\nexport function InputTextBase({\n children,\n className,\n description,\n hideLabel,\n id,\n label,\n invalid,\n size,\n}: InputTextBaseElementProps) {\n const combinedClassName = classNames(\"tds-input\", className, {\n \"tds-input--invalid\": invalid,\n \"tds-input--lg\": size === \"lg\",\n })\n\n const stableId = useId()\n const inputId = id || `tds-input-${stableId}`\n const descriptionId = description ? `${inputId}-description` : undefined\n\n return (\n <div className={combinedClassName}>\n {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n {children({\n descriptionId,\n inputId,\n })}\n {description && (\n <p id={descriptionId} className=\"tds-input-description\">\n <Icon\n className=\"tds-input-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;SAwBgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACsB,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;AAC3D,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;AAC/B,KAAA,CAAC;AAEF,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,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;AACrE,QAAA,QAAQ,CAAC;YACR,aAAa;YACb,OAAO;SACR,CAAC;QACD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,uBAAuB,EAAA;YACrD,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input-text-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default from 'react';
|
|
2
2
|
|
|
3
3
|
function LoadingSpinner() {
|
|
4
|
-
return
|
|
4
|
+
return React__default.createElement("div", { className: "tds-loading-spinner" });
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
export { LoadingSpinner as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n return <div className=\"tds-loading-spinner\" />\n}\n"],"names":[],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n return <div className=\"tds-loading-spinner\" />\n}\n"],"names":["React"],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,GAAG;AAChD;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import React__default, { forwardRef } from 'react';
|
|
4
4
|
|
|
5
5
|
const buildComponentClassName = (size, kind, fullWidth, className) => {
|
|
6
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);
|
|
@@ -12,7 +12,7 @@ const BaseLink = forwardRef(({ children, className, external = false, fullWidth,
|
|
|
12
12
|
const externalProps = external
|
|
13
13
|
? { rel: "noopener noreferrer", target: "_blank" }
|
|
14
14
|
: {};
|
|
15
|
-
return (
|
|
15
|
+
return (React__default.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 {\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,
|
|
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":["React"],"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,QACEA,cAAA,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,10 +1,10 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
3
|
import { BaseLink } from './BaseLink.js';
|
|
4
4
|
|
|
5
5
|
const IconLink = forwardRef(({ className, href, icon, ...restProps }, ref) => {
|
|
6
6
|
const iconOnlyClassName = classNames("tds-btn--icononly", className);
|
|
7
|
-
return (
|
|
7
|
+
return (React__default.createElement(BaseLink, { href: href, label: icon, className: iconOnlyClassName, ref: ref, ...restProps }));
|
|
8
8
|
});
|
|
9
9
|
IconLink.displayName = "IconLink";
|
|
10
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":[],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,
|
|
1
|
+
{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
2
|
import { BaseLink } from './BaseLink.js';
|
|
3
3
|
|
|
4
4
|
const Link = forwardRef(({ href, ...restProps }, ref) => {
|
|
5
|
-
return
|
|
5
|
+
return React__default.createElement(BaseLink, { href: href, ref: ref, ...restProps });
|
|
6
6
|
});
|
|
7
7
|
Link.displayName = "Link";
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type LinkProps = Omit<BaseLinkElementProps, \"label\"> & {\n children?: React.ReactNode\n label?: string\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ href, ...restProps }: LinkProps, ref) => {\n return <BaseLink href={href} ref={ref} {...restProps} />\n }\n)\n\nLink.displayName = \"Link\"\n"],"names":[],"mappings":";;;AAWO,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAa,EAAE,GAAG,KAAI;AACzC,IAAA,
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type LinkProps = Omit<BaseLinkElementProps, \"label\"> & {\n children?: React.ReactNode\n label?: string\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ href, ...restProps }: LinkProps, ref) => {\n return <BaseLink href={href} ref={ref} {...restProps} />\n }\n)\n\nLink.displayName = \"Link\"\n"],"names":["React"],"mappings":";;;AAWO,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAa,EAAE,GAAG,KAAI;AACzC,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,SAAS,GAAI;AAC1D,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../tapestry-wc/dist/components/p-
|
|
1
|
+
import '../../tapestry-wc/dist/components/p-De9z2C7O.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
|
|