@charcoal-ui/react 6.0.0-rc.7 → 6.0.0-rc.8

package/dist/components/TextEllipsis/helper.cjs

@@ -0,0 +1,31 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/TextEllipsis/helper.ts
+const getFinalTitle = (showTooltip, title, children) => {
+	if (!showTooltip) return;
+	const resolvedTitle = title ?? onlyText(children);
+	if (!resolvedTitle) return;
+	return resolvedTitle;
+};
+const hasChildren = (element) => (0, react.isValidElement)(element) && Boolean(element.props.children);
+const childToString = (child) => {
+	if (typeof child === "undefined" || child === null || typeof child === "boolean") return "";
+	if (JSON.stringify(child) === "{}") return "";
+	return child.toString();
+};
+const onlyText = (children) => {
+	if (!Array.isArray(children) && !(0, react.isValidElement)(children)) return childToString(children);
+	return react.Children.toArray(children).reduce((text, child) => {
+		let newText = "";
+		if ((0, react.isValidElement)(child) && hasChildren(child)) newText = onlyText(child.props.children);
+		else if ((0, react.isValidElement)(child) && !hasChildren(child)) newText = "";
+		else newText = childToString(child);
+		return text.concat(newText);
+	}, "");
+};
+
+//#endregion
+exports.getFinalTitle = getFinalTitle;
+//# sourceMappingURL=helper.cjs.map

package/dist/components/TextEllipsis/helper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.cjs","names":["Children","isValidElement","ReactElement","ReactNode","getFinalTitle","showTooltip","title","children","undefined","resolvedTitle","onlyText","hasChildren","element","Boolean","props","childToString","child","JSON","stringify","toString","Array","isArray","toArray","reduce","text","newText","concat"],"sources":["../../../src/components/TextEllipsis/helper.ts"],"sourcesContent":["// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts\n\nimport { Children, isValidElement, ReactElement, ReactNode } from 'react'\n\nexport const getFinalTitle = (\n  showTooltip: boolean,\n  title?: string,\n  children?: ReactNode,\n): string | undefined => {\n  // 1. 表示フラグが false なら即終了\n  if (!showTooltip) {\n    return undefined\n  }\n\n  // 2. タイトルの候補を取得\n  const resolvedTitle = title ?? onlyText(children)\n\n  // 3. resolvedTitle が falsy (undefined, null, \"\") なら終了\n  if (!resolvedTitle) {\n    return undefined\n  }\n\n  // 4. 有効な文字列のみを返す\n  return resolvedTitle\n}\n\nconst hasChildren = (\n  element: ReactNode,\n): element is ReactElement<{ children: ReactNode[] }> =>\n  isValidElement<{ children?: ReactNode[] }>(element) &&\n  Boolean(element.props.children)\n\nexport const childToString = (\n  child?: number | string | boolean | {} | null,\n): string => {\n  if (\n    typeof child === 'undefined' ||\n    child === null ||\n    typeof child === 'boolean'\n  ) {\n    return ''\n  }\n\n  if (JSON.stringify(child) === '{}') {\n    return ''\n  }\n\n  return (child as string | number).toString()\n}\n\nexport const onlyText = (children: ReactNode): string => {\n  if (!Array.isArray(children) && !isValidElement(children)) {\n    return childToString(children)\n  }\n\n  return Children.toArray(children).reduce(\n    (text: string, child: ReactNode): string => {\n      let newText = ''\n\n      if (isValidElement(child) && hasChildren(child)) {\n        newText = onlyText(child.props.children)\n      } else if (isValidElement(child) && !hasChildren(child)) {\n        newText = ''\n      } else {\n        newText = childToString(child)\n      }\n\n      return text.concat(newText)\n    },\n    '',\n  )\n}\n"],"mappings":";;;;;AAIA,MAAaI,iBACXC,aACAC,OACAC,aACuB;CAEvB,IAAI,CAACF,aACH;CAIF,MAAMI,gBAAgBH,SAASI,SAASH,SAAS;CAGjD,IAAI,CAACE,eACH;CAIF,OAAOA;;AAGT,MAAME,eACJC,sCAE2CA,QAAQ,IACnDC,QAAQD,QAAQE,MAAMP,SAAS;AAEjC,MAAaQ,iBACXC,UACW;CACX,IACE,OAAOA,UAAU,eACjBA,UAAU,QACV,OAAOA,UAAU,WAEjB,OAAO;CAGT,IAAIC,KAAKC,UAAUF,MAAM,KAAK,MAC5B,OAAO;CAGT,OAAQA,MAA0BG,UAAU;;AAG9C,MAAaT,YAAYH,aAAgC;CACvD,IAAI,CAACa,MAAMC,QAAQd,SAAS,IAAI,2BAAgBA,SAAS,EACvD,OAAOQ,cAAcR,SAAS;CAGhC,OAAOP,eAASsB,QAAQf,SAAS,CAACgB,QAC/BC,MAAcR,UAA6B;EAC1C,IAAIS,UAAU;EAEd,8BAAmBT,MAAM,IAAIL,YAAYK,MAAM,EAC7CS,UAAUf,SAASM,MAAMF,MAAMP,SAAS;OACnC,8BAAmBS,MAAM,IAAI,CAACL,YAAYK,MAAM,EACrDS,UAAU;OAEVA,UAAUV,cAAcC,MAAM;EAGhC,OAAOQ,KAAKE,OAAOD,QAAQ;IAE7B,GACD"}

package/dist/components/TextEllipsis/helper.js

@@ -0,0 +1,30 @@
+"use client";
+import { Children, isValidElement } from "react";
+
+//#region src/components/TextEllipsis/helper.ts
+const getFinalTitle = (showTooltip, title, children) => {
+	if (!showTooltip) return;
+	const resolvedTitle = title ?? onlyText(children);
+	if (!resolvedTitle) return;
+	return resolvedTitle;
+};
+const hasChildren = (element) => isValidElement(element) && Boolean(element.props.children);
+const childToString = (child) => {
+	if (typeof child === "undefined" || child === null || typeof child === "boolean") return "";
+	if (JSON.stringify(child) === "{}") return "";
+	return child.toString();
+};
+const onlyText = (children) => {
+	if (!Array.isArray(children) && !isValidElement(children)) return childToString(children);
+	return Children.toArray(children).reduce((text, child) => {
+		let newText = "";
+		if (isValidElement(child) && hasChildren(child)) newText = onlyText(child.props.children);
+		else if (isValidElement(child) && !hasChildren(child)) newText = "";
+		else newText = childToString(child);
+		return text.concat(newText);
+	}, "");
+};
+
+//#endregion
+export { getFinalTitle };
+//# sourceMappingURL=helper.js.map

package/dist/components/TextEllipsis/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","names":["Children","isValidElement","ReactElement","ReactNode","getFinalTitle","showTooltip","title","children","undefined","resolvedTitle","onlyText","hasChildren","element","Boolean","props","childToString","child","JSON","stringify","toString","Array","isArray","toArray","reduce","text","newText","concat"],"sources":["../../../src/components/TextEllipsis/helper.ts"],"sourcesContent":["// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts\n\nimport { Children, isValidElement, ReactElement, ReactNode } from 'react'\n\nexport const getFinalTitle = (\n  showTooltip: boolean,\n  title?: string,\n  children?: ReactNode,\n): string | undefined => {\n  // 1. 表示フラグが false なら即終了\n  if (!showTooltip) {\n    return undefined\n  }\n\n  // 2. タイトルの候補を取得\n  const resolvedTitle = title ?? onlyText(children)\n\n  // 3. resolvedTitle が falsy (undefined, null, \"\") なら終了\n  if (!resolvedTitle) {\n    return undefined\n  }\n\n  // 4. 有効な文字列のみを返す\n  return resolvedTitle\n}\n\nconst hasChildren = (\n  element: ReactNode,\n): element is ReactElement<{ children: ReactNode[] }> =>\n  isValidElement<{ children?: ReactNode[] }>(element) &&\n  Boolean(element.props.children)\n\nexport const childToString = (\n  child?: number | string | boolean | {} | null,\n): string => {\n  if (\n    typeof child === 'undefined' ||\n    child === null ||\n    typeof child === 'boolean'\n  ) {\n    return ''\n  }\n\n  if (JSON.stringify(child) === '{}') {\n    return ''\n  }\n\n  return (child as string | number).toString()\n}\n\nexport const onlyText = (children: ReactNode): string => {\n  if (!Array.isArray(children) && !isValidElement(children)) {\n    return childToString(children)\n  }\n\n  return Children.toArray(children).reduce(\n    (text: string, child: ReactNode): string => {\n      let newText = ''\n\n      if (isValidElement(child) && hasChildren(child)) {\n        newText = onlyText(child.props.children)\n      } else if (isValidElement(child) && !hasChildren(child)) {\n        newText = ''\n      } else {\n        newText = childToString(child)\n      }\n\n      return text.concat(newText)\n    },\n    '',\n  )\n}\n"],"mappings":";;;;AAIA,MAAaI,iBACXC,aACAC,OACAC,aACuB;CAEvB,IAAI,CAACF,aACH;CAIF,MAAMI,gBAAgBH,SAASI,SAASH,SAAS;CAGjD,IAAI,CAACE,eACH;CAIF,OAAOA;;AAGT,MAAME,eACJC,YAEAX,eAA2CW,QAAQ,IACnDC,QAAQD,QAAQE,MAAMP,SAAS;AAEjC,MAAaQ,iBACXC,UACW;CACX,IACE,OAAOA,UAAU,eACjBA,UAAU,QACV,OAAOA,UAAU,WAEjB,OAAO;CAGT,IAAIC,KAAKC,UAAUF,MAAM,KAAK,MAC5B,OAAO;CAGT,OAAQA,MAA0BG,UAAU;;AAG9C,MAAaT,YAAYH,aAAgC;CACvD,IAAI,CAACa,MAAMC,QAAQd,SAAS,IAAI,CAACN,eAAeM,SAAS,EACvD,OAAOQ,cAAcR,SAAS;CAGhC,OAAOP,SAASsB,QAAQf,SAAS,CAACgB,QAC/BC,MAAcR,UAA6B;EAC1C,IAAIS,UAAU;EAEd,IAAIxB,eAAee,MAAM,IAAIL,YAAYK,MAAM,EAC7CS,UAAUf,SAASM,MAAMF,MAAMP,SAAS;OACnC,IAAIN,eAAee,MAAM,IAAI,CAACL,YAAYK,MAAM,EACrDS,UAAU;OAEVA,UAAUV,cAAcC,MAAM;EAGhC,OAAOQ,KAAKE,OAAOD,QAAQ;IAE7B,GACD"}

package/dist/components/TextEllipsis/index2.cjs

@@ -0,0 +1,119 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+require('./index.cjs');
+const require_helper = require('./helper.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_compiler_runtime = require("react-compiler-runtime");
+
+//#region src/components/TextEllipsis/index.tsx
+/**
+* 複数行のテキストに表示行数制限を設けて`...`で省略する
+*/
+function TextEllipsis(t0) {
+	"use memo";
+	const $ = (0, react_compiler_runtime.c)(33);
+	if ($[0] !== "036f4b6fed1710575a7949f10872bec1708da86dc7f9ef6c9320b0b274640dca") {
+		for (let $i = 0; $i < 33; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "036f4b6fed1710575a7949f10872bec1708da86dc7f9ef6c9320b0b274640dca";
+	}
+	let children;
+	let lineHeight;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let title;
+	if ($[1] !== t0) {
+		({lineHeight, lineLimit: t1, children, title, hyphens: t2, showTooltip: t3, useNowrap: t4, ...props} = t0);
+		$[1] = t0;
+		$[2] = children;
+		$[3] = lineHeight;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = title;
+	} else {
+		children = $[2];
+		lineHeight = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		title = $[9];
+	}
+	const lineLimit = t1 === void 0 ? 1 : t1;
+	const hyphens = t2 === void 0 ? "auto" : t2;
+	const showTooltip = t3 === void 0 ? true : t3;
+	const useNowrap = t4 === void 0 ? false : t4;
+	let t5;
+	if ($[10] !== children || $[11] !== showTooltip || $[12] !== title) {
+		t5 = require_helper.getFinalTitle(showTooltip, title, children);
+		$[10] = children;
+		$[11] = showTooltip;
+		$[12] = title;
+		$[13] = t5;
+	} else t5 = $[13];
+	const finalTitle = t5;
+	const classNames = require_useClassNames.useClassNames("charcoal-text-ellipsis", props.className);
+	const hasLineHeight = lineHeight !== void 0;
+	let t6;
+	if ($[14] !== useNowrap) {
+		t6 = useNowrap ? { "data-use-nowrap": useNowrap } : {};
+		$[14] = useNowrap;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== hasLineHeight || $[17] !== lineHeight) {
+		t7 = hasLineHeight && { "--charcoal-text-ellipsis-line-height": `${lineHeight}px` };
+		$[16] = hasLineHeight;
+		$[17] = lineHeight;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== hyphens || $[20] !== lineLimit || $[21] !== props.style || $[22] !== t7) {
+		t8 = {
+			...t7,
+			"--charcoal-text-ellipsis-line-limit": lineLimit,
+			hyphens,
+			...props.style
+		};
+		$[19] = hyphens;
+		$[20] = lineLimit;
+		$[21] = props.style;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	const t9 = t8;
+	let t10;
+	if ($[24] !== children || $[25] !== classNames || $[26] !== finalTitle || $[27] !== hasLineHeight || $[28] !== lineLimit || $[29] !== props || $[30] !== t6 || $[31] !== t9) {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...props,
+			className: classNames,
+			"data-line-limit": lineLimit,
+			"data-has-line-height": hasLineHeight,
+			...t6,
+			style: t9,
+			title: finalTitle,
+			children
+		});
+		$[24] = children;
+		$[25] = classNames;
+		$[26] = finalTitle;
+		$[27] = hasLineHeight;
+		$[28] = lineLimit;
+		$[29] = props;
+		$[30] = t6;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	return t10;
+}
+
+//#endregion
+exports.default = TextEllipsis;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/TextEllipsis/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["getFinalTitle","useClassNames","CSSProperties","TextEllipsisProps","lineHeight","lineLimit","hyphens","showTooltip","useNowrap","React","ComponentPropsWithoutRef","TextEllipsis","t0","$","_c","$i","Symbol","for","children","props","t1","t2","t3","t4","title","undefined","t5","finalTitle","classNames","className","hasLineHeight","t6","t7","t8","style","t9","t10"],"sources":["../../../src/components/TextEllipsis/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { getFinalTitle } from './helper'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { CSSProperties } from 'react'\n\nexport type TextEllipsisProps = {\n  lineHeight?: number\n  lineLimit?: number\n  /**\n   * @default 'auto'\n   */\n  hyphens?: CSSProperties['hyphens']\n  /**\n   * html title属性を付与。false のときは付与せず、空文字のときは表示しない\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   *\n   * @default false\n   * true: use white-space: nowrap if lineLimit is 1\n   * false: use -webkit-line-clamp if lineLimit is 1\n   */\n  useNowrap?: boolean\n} & React.ComponentPropsWithoutRef<'div'>\n\n/**\n * 複数行のテキストに表示行数制限を設けて`...`で省略する\n */\nexport default function TextEllipsis({\n  lineHeight,\n  lineLimit = 1,\n  children,\n  title,\n  hyphens = 'auto',\n  showTooltip = true,\n  useNowrap = false,\n  ...props\n}: TextEllipsisProps) {\n  'use memo'\n  const finalTitle = getFinalTitle(showTooltip, title, children)\n\n  const classNames = useClassNames('charcoal-text-ellipsis', props.className)\n  const hasLineHeight = lineHeight !== undefined\n\n  return (\n    <div\n      {...props}\n      className={classNames}\n      data-line-limit={lineLimit}\n      data-has-line-height={hasLineHeight}\n      {...(useNowrap ? { 'data-use-nowrap': useNowrap } : {})}\n      style={\n        {\n          ...(hasLineHeight && {\n            '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,\n          }),\n          '--charcoal-text-ellipsis-line-limit': lineLimit,\n          hyphens,\n          ...props.style,\n        } satisfies React.CSSProperties\n      }\n      title={finalTitle}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/TextEllipsis/index2.js

@@ -0,0 +1,114 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+/* empty css      */
+import { getFinalTitle } from "./helper.js";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+
+//#region src/components/TextEllipsis/index.tsx
+/**
+* 複数行のテキストに表示行数制限を設けて`...`で省略する
+*/
+function TextEllipsis(t0) {
+	"use memo";
+	const $ = c(32);
+	let children;
+	let lineHeight;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let title;
+	if ($[0] !== t0) {
+		({lineHeight, lineLimit: t1, children, title, hyphens: t2, showTooltip: t3, useNowrap: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = lineHeight;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = title;
+	} else {
+		children = $[1];
+		lineHeight = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		title = $[8];
+	}
+	const lineLimit = t1 === void 0 ? 1 : t1;
+	const hyphens = t2 === void 0 ? "auto" : t2;
+	const showTooltip = t3 === void 0 ? true : t3;
+	const useNowrap = t4 === void 0 ? false : t4;
+	let t5;
+	if ($[9] !== children || $[10] !== showTooltip || $[11] !== title) {
+		t5 = getFinalTitle(showTooltip, title, children);
+		$[9] = children;
+		$[10] = showTooltip;
+		$[11] = title;
+		$[12] = t5;
+	} else t5 = $[12];
+	const finalTitle = t5;
+	const classNames = useClassNames("charcoal-text-ellipsis", props.className);
+	const hasLineHeight = lineHeight !== void 0;
+	let t6;
+	if ($[13] !== useNowrap) {
+		t6 = useNowrap ? { "data-use-nowrap": useNowrap } : {};
+		$[13] = useNowrap;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== hasLineHeight || $[16] !== lineHeight) {
+		t7 = hasLineHeight && { "--charcoal-text-ellipsis-line-height": `${lineHeight}px` };
+		$[15] = hasLineHeight;
+		$[16] = lineHeight;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== hyphens || $[19] !== lineLimit || $[20] !== props.style || $[21] !== t7) {
+		t8 = {
+			...t7,
+			"--charcoal-text-ellipsis-line-limit": lineLimit,
+			hyphens,
+			...props.style
+		};
+		$[18] = hyphens;
+		$[19] = lineLimit;
+		$[20] = props.style;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	const t9 = t8;
+	let t10;
+	if ($[23] !== children || $[24] !== classNames || $[25] !== finalTitle || $[26] !== hasLineHeight || $[27] !== lineLimit || $[28] !== props || $[29] !== t6 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			...props,
+			className: classNames,
+			"data-line-limit": lineLimit,
+			"data-has-line-height": hasLineHeight,
+			...t6,
+			style: t9,
+			title: finalTitle,
+			children
+		});
+		$[23] = children;
+		$[24] = classNames;
+		$[25] = finalTitle;
+		$[26] = hasLineHeight;
+		$[27] = lineLimit;
+		$[28] = props;
+		$[29] = t6;
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
+}
+
+//#endregion
+export { TextEllipsis as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/TextEllipsis/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["getFinalTitle","useClassNames","CSSProperties","TextEllipsisProps","lineHeight","lineLimit","hyphens","showTooltip","useNowrap","React","ComponentPropsWithoutRef","TextEllipsis","t0","$","_c","children","props","t1","t2","t3","t4","title","undefined","t5","finalTitle","classNames","className","hasLineHeight","t6","t7","t8","style","t9","t10"],"sources":["../../../src/components/TextEllipsis/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { getFinalTitle } from './helper'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { CSSProperties } from 'react'\n\nexport type TextEllipsisProps = {\n  lineHeight?: number\n  lineLimit?: number\n  /**\n   * @default 'auto'\n   */\n  hyphens?: CSSProperties['hyphens']\n  /**\n   * html title属性を付与。false のときは付与せず、空文字のときは表示しない\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   *\n   * @default false\n   * true: use white-space: nowrap if lineLimit is 1\n   * false: use -webkit-line-clamp if lineLimit is 1\n   */\n  useNowrap?: boolean\n} & React.ComponentPropsWithoutRef<'div'>\n\n/**\n * 複数行のテキストに表示行数制限を設けて`...`で省略する\n */\nexport default function TextEllipsis({\n  lineHeight,\n  lineLimit = 1,\n  children,\n  title,\n  hyphens = 'auto',\n  showTooltip = true,\n  useNowrap = false,\n  ...props\n}: TextEllipsisProps) {\n  'use memo'\n  const finalTitle = getFinalTitle(showTooltip, title, children)\n\n  const classNames = useClassNames('charcoal-text-ellipsis', props.className)\n  const hasLineHeight = lineHeight !== undefined\n\n  return (\n    <div\n      {...props}\n      className={classNames}\n      data-line-limit={lineLimit}\n      data-has-line-height={hasLineHeight}\n      {...(useNowrap ? { 'data-use-nowrap': useNowrap } : {})}\n      style={\n        {\n          ...(hasLineHeight && {\n            '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,\n          }),\n          '--charcoal-text-ellipsis-line-limit': lineLimit,\n          hyphens,\n          ...props.style,\n        } satisfies React.CSSProperties\n      }\n      title={finalTitle}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA8BA,SAAeW,aAAAC,IAAA;AAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAX;CAAA,IAAAY;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAR,EAAA,OAAAD,IAAA;EAAsB,CAAA,CAAAR,YAAAC,WAAAY,IAAAF,UAAAM,OAAAf,SAAAY,IAAAX,aAAAY,IAAAX,WAAAY,OAAAJ,SAAAJ;EASjBC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAT;EAAAS,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;QAAA;EAAAN,WAAAF,EAAA;EAAAT,aAAAS,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,QAAAR,EAAA;;CAPlB,MAAAR,YAAAY,OAAAK,SAAA,IAAAL;CAGA,MAAAX,UAAAY,OAAAI,SAAA,SAAAJ;CACA,MAAAX,cAAAY,OAAAG,SAAA,OAAAH;CACA,MAAAX,YAAAY,OAAAE,SAAA,QAAAF;CAAiB,IAAAG;CAAA,IAAAV,EAAA,OAAAE,YAAAF,EAAA,QAAAN,eAAAM,EAAA,QAAAQ,OAAA;EAIEE,KAAAvB,cAAcO,aAAac,OAAON,SAAS;EAAAF,EAAA,KAAAE;EAAAF,EAAA,MAAAN;EAAAM,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;QAAAA,KAAAV,EAAA;CAA9D,MAAAW,aAAmBD;CAEnB,MAAAE,aAAmBxB,cAAc,0BAA0Be,MAAKU,UAAW;CAC3E,MAAAC,gBAAsBvB,eAAekB;CAAS,IAAAM;CAAA,IAAAf,EAAA,QAAAL,WAAA;EAQrCoB,KAAApB,YAAA,EAAA,mBAAiCA,WAAgB,GAAjD,EAAiD;EAAAK,EAAA,MAAAL;EAAAK,EAAA,MAAAe;QAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAc,iBAAAd,EAAA,QAAAT,YAAA;EAG9CyB,KAAAF,iBAAA,EAAA,wCACsC,GAAGvB,WAAU,KACtD;EAAAS,EAAA,MAAAc;EAAAd,EAAA,MAAAT;EAAAS,EAAA,MAAAgB;QAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAP,WAAAO,EAAA,QAAAR,aAAAQ,EAAA,QAAAG,MAAAe,SAAAlB,EAAA,QAAAgB,IAAA;EAHHC,KAAA;GAAA,GACMD;GAEH,uCACsCxB;GAASC;GAAA,GAE7CU,MAAKe;GACT;EAAAlB,EAAA,MAAAP;EAAAO,EAAA,MAAAR;EAAAQ,EAAA,MAAAG,MAAAe;EAAAlB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;QAAAA,KAAAjB,EAAA;CAPD,MAAAmB,KAAAF;CAO+B,IAAAG;CAAA,IAAApB,EAAA,QAAAE,YAAAF,EAAA,QAAAY,cAAAZ,EAAA,QAAAW,cAAAX,EAAA,QAAAc,iBAAAd,EAAA,QAAAR,aAAAQ,EAAA,QAAAG,SAAAH,EAAA,QAAAe,MAAAf,EAAA,QAAAmB,IAAA;EAdnCC,MAAA,oBAAA,OAAA;GAmBM,GAlBAjB;GACOS,WAAAA;GACMpB,mBAAAA;GACKsB,wBAAAA;GAAa,GAC9BC;GAEH,OAAAI;GASKR,OAAAA;GAENT;GACG;EAAAF,EAAA,MAAAE;EAAAF,EAAA,MAAAY;EAAAZ,EAAA,MAAAW;EAAAX,EAAA,MAAAc;EAAAd,EAAA,MAAAR;EAAAQ,EAAA,MAAAG;EAAAH,EAAA,MAAAe;EAAAf,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;QAAAA,MAAApB,EAAA;CAAA,OAnBNoB"}

package/dist/components/TextField/AssistiveText/index2.cjs

@@ -0,0 +1,10 @@
+"use client";
+const require_createDivComponent = require('../../../_lib/createDivComponent.cjs');
+require('./index.cjs');
+
+//#region src/components/TextField/AssistiveText/index.tsx
+const AssistiveText = require_createDivComponent.createDivComponent("charcoal-text-field-assistive-text");
+
+//#endregion
+exports.AssistiveText = AssistiveText;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/TextField/AssistiveText/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["createDivComponent","AssistiveText"],"sources":["../../../../src/components/TextField/AssistiveText/index.tsx"],"sourcesContent":["import { createDivComponent } from '../../../_lib/createDivComponent'\nimport './index.css'\n\nexport const AssistiveText = createDivComponent(\n  'charcoal-text-field-assistive-text',\n)\n"],"mappings":";;;;;AAGA,MAAaC,gBAAgBD,8CAC3B,qCACD"}

package/dist/components/TextField/AssistiveText/index2.js

@@ -0,0 +1,10 @@
+"use client";
+import { createDivComponent } from "../../../_lib/createDivComponent.js";
+/* empty css      */
+
+//#region src/components/TextField/AssistiveText/index.tsx
+const AssistiveText = createDivComponent("charcoal-text-field-assistive-text");
+
+//#endregion
+export { AssistiveText };
+//# sourceMappingURL=index2.js.map

package/dist/components/TextField/AssistiveText/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["createDivComponent","AssistiveText"],"sources":["../../../../src/components/TextField/AssistiveText/index.tsx"],"sourcesContent":["import { createDivComponent } from '../../../_lib/createDivComponent'\nimport './index.css'\n\nexport const AssistiveText = createDivComponent(\n  'charcoal-text-field-assistive-text',\n)\n"],"mappings":";;;;;AAGA,MAAaC,gBAAgBD,mBAC3B,qCACD"}

package/dist/components/TextField/index2.cjs

@@ -0,0 +1,101 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+require('./index.cjs');
+const require_index$1 = require('../FieldLabel/index2.cjs');
+const require_index$2 = require('../../_lib/index.cjs');
+const require_useFocusWithClick = require('./useFocusWithClick.cjs');
+const require_index$3 = require('./AssistiveText/index2.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useId = require("react-aria/useId");
+let react_aria_VisuallyHidden = require("react-aria/VisuallyHidden");
+
+//#region src/components/TextField/index.tsx
+const TextField = react.forwardRef(function SingleLineTextFieldInner({ assistiveText, className, disabled = false, label = "", maxLength, onChange, prefix = null, required, requiredText, showCount = false, showLabel = false, subLabel, suffix = null, type = "text", invalid, value, getCount = require_index$2.countCodePointsInString, ...props }, forwardRef) {
+	const inputRef = (0, react.useRef)(null);
+	const { visuallyHiddenProps } = (0, react_aria_VisuallyHidden.useVisuallyHidden)();
+	const [count, setCount] = (0, react.useState)(getCount(value ?? ""));
+	const handleChange = (0, react.useCallback)((e) => {
+		const value = e.target.value;
+		const count = getCount(value);
+		if (maxLength !== void 0 && count > maxLength) return;
+		setCount(count);
+		onChange?.(value);
+	}, [
+		getCount,
+		maxLength,
+		onChange
+	]);
+	(0, react.useEffect)(() => {
+		setCount(getCount(value ?? ""));
+	}, [getCount, value]);
+	const containerRef = (0, react.useRef)(null);
+	require_useFocusWithClick.useFocusWithClick(containerRef, inputRef);
+	const inputId = (0, react_aria_useId.useId)(props.id);
+	const describedbyId = (0, react_aria_useId.useId)();
+	const labelledbyId = (0, react_aria_useId.useId)();
+	const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_useClassNames.useClassNames("charcoal-text-field-root", className),
+		"aria-disabled": disabled,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+				htmlFor: inputId,
+				id: labelledbyId,
+				label,
+				required,
+				requiredText,
+				subLabel,
+				...!showLabel ? visuallyHiddenProps : {}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "charcoal-text-field-container",
+				"aria-disabled": disabled === true ? true : void 0,
+				"data-invalid": invalid === true,
+				ref: containerRef,
+				children: [
+					prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "charcoal-text-field-prefix",
+						children: prefix
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "charcoal-text-field-input-root",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "charcoal-text-field-input",
+							"aria-describedby": showAssistiveText ? describedbyId : void 0,
+							"aria-invalid": invalid,
+							"aria-labelledby": labelledbyId,
+							id: inputId,
+							"data-invalid": invalid === true,
+							maxLength,
+							onChange: handleChange,
+							disabled,
+							ref: require_index$2.mergeRefs(forwardRef, inputRef),
+							type,
+							value,
+							...props
+						})
+					}),
+					(suffix || showCount) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "charcoal-text-field-suffix",
+						children: [suffix, showCount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "charcoal-text-field-line-counter",
+							children: maxLength !== void 0 ? `${count}/${maxLength}` : count
+						})]
+					})
+				]
+			}),
+			showAssistiveText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.AssistiveText, {
+				"data-invalid": invalid === true,
+				id: describedbyId,
+				children: assistiveText
+			})
+		]
+	});
+});
+
+//#endregion
+exports.default = TextField;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/TextField/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["ReactNode","useCallback","useEffect","useRef","useState","React","FieldLabel","countCodePointsInString","mergeRefs","useFocusWithClick","AssistiveText","useClassNames","useVisuallyHidden","useId","TextFieldProps","prefix","suffix","value","onChange","showCount","showLabel","assistiveText","invalid","label","requiredText","disabled","subLabel","rdfaPrefix","getCount","Omit","ComponentPropsWithoutRef","TextField","forwardRef","HTMLInputElement","SingleLineTextFieldInner","className","maxLength","required","type","props","inputRef","visuallyHiddenProps","count","setCount","handleChange","e","ChangeEvent","target","undefined","containerRef","inputId","id","describedbyId","labelledbyId","showAssistiveText","length","classNames"],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { AssistiveText } from './AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type TextFieldProps = {\n  prefix?: ReactNode\n  suffix?: ReactNode\n\n  value?: string\n  onChange?: (value: string) => void\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n  rdfaPrefix?: string\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner(\n    {\n      assistiveText,\n      className,\n      disabled = false,\n      label = '',\n      maxLength,\n      onChange,\n      prefix = null,\n      required,\n      requiredText,\n      showCount = false,\n      showLabel = false,\n      subLabel,\n      suffix = null,\n      type = 'text',\n      invalid,\n      value,\n      getCount = countCodePointsInString,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const [count, setCount] = useState(getCount(value ?? ''))\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        setCount(count)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange],\n    )\n\n    useEffect(() => {\n      setCount(getCount(value ?? ''))\n    }, [getCount, value])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, inputRef)\n\n    const inputId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const classNames = useClassNames('charcoal-text-field-root', className)\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={inputId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-field-container\"\n          aria-disabled={disabled === true ? true : undefined}\n          data-invalid={invalid === true}\n          ref={containerRef}\n        >\n          {prefix && <div className=\"charcoal-text-field-prefix\">{prefix}</div>}\n          <div className=\"charcoal-text-field-input-root\">\n            <input\n              className=\"charcoal-text-field-input\"\n              aria-describedby={showAssistiveText ? describedbyId : undefined}\n              aria-invalid={invalid}\n              aria-labelledby={labelledbyId}\n              id={inputId}\n              data-invalid={invalid === true}\n              maxLength={maxLength}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={mergeRefs(forwardRef, inputRef)}\n              type={type}\n              value={value}\n              {...props}\n            />\n          </div>\n          {(suffix || showCount) && (\n            <div className=\"charcoal-text-field-suffix\">\n              {suffix}\n              {showCount && (\n                <span className=\"charcoal-text-field-line-counter\">\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAM+B,YAAY1B,MAAM2B,WACtB,SAASE,yBACP,EACEb,eACAc,WACAV,WAAW,OACXF,QAAQ,IACRa,WACAlB,UACAH,SAAS,MACTsB,UACAb,cACAL,YAAY,OACZC,YAAY,OACZM,UACAV,SAAS,MACTsB,OAAO,QACPhB,SACAL,OACAW,WAAWrB,yCACX,GAAGgC,SAELP,YACA;CACA,MAAMQ,6BAAoC,KAAK;CAE/C,MAAM,EAAEC,0EAA2C;CAEnD,MAAM,CAACC,OAAOC,gCAAqBf,SAASX,SAAS,GAAG,CAAC;CAEzD,MAAM2B,uCACHC,MAA2C;EAC1C,MAAM5B,QAAQ4B,EAAEE,OAAO9B;EACvB,MAAMyB,QAAQd,SAASX,MAAM;EAC7B,IAAImB,cAAcY,UAAaN,QAAQN,WACrC;EAEFO,SAASD,MAAM;EACfxB,WAAWD,MAAM;IAEnB;EAACW;EAAUQ;EAAWlB;EACxB,CAAC;CAEDhB,2BAAgB;EACdyC,SAASf,SAASX,SAAS,GAAG,CAAC;IAC9B,CAACW,UAAUX,MAAM,CAAC;CAErB,MAAMgC,iCAAsB,KAAK;CAEjCxC,4CAAkBwC,cAAcT,SAAS;CAEzC,MAAMU,sCAAgBX,MAAMY,GAAG;CAC/B,MAAMC,6CAAuB;CAC7B,MAAMC,4CAAsB;CAE5B,MAAMC,oBACJjC,iBAAiB,QAAQA,cAAckC,WAAW;CAIpD,OACE,4CAAC,OAAD;EAAK,WAHY5C,oCAAc,4BAA4BwB,UAGjC;EAAE,iBAAeV;YAA3C;GACE,2CAAC,yBAAD;IACE,SAASyB;IACT,IAAIG;IACG9B;IACGc;IACIb;IACJE;IACV,GAAK,CAACN,YAAYqB,sBAAsB,EAAG;IAAC;GAE9C,4CAAC,OAAD;IACE,WAAU;IACV,iBAAehB,aAAa,OAAO,OAAOuB;IAC1C,gBAAc1B,YAAY;IAC1B,KAAK2B;cAJP;KAMGlC,UAAU,2CAAC,OAAD;MAAK,WAAU;gBAA8BA;MAAa;KACrE,2CAAC,OAAD;MAAK,WAAU;gBACb,2CAAC,SAAD;OACE,WAAU;OACV,oBAAkBuC,oBAAoBF,gBAAgBJ;OACtD,gBAAc1B;OACd,mBAAiB+B;OACjB,IAAIH;OACJ,gBAAc5B,YAAY;OACfc;OACX,UAAUQ;OACAnB;OACV,KAAKjB,0BAAUwB,YAAYQ,SAAS;OAC9BF;OACCrB;OACP,GAAIsB;OAAM;MAET;MACHvB,UAAUG,cACV,4CAAC,OAAD;MAAK,WAAU;gBAAf,CACGH,QACAG,aACC,2CAAC,QAAD;OAAM,WAAU;iBACbiB,cAAcY,SAAY,GAAGN,MAAK,GAAIN,cAAcM;OAExD,EAEJ;;KACE;;GACJY,qBACC,2CAAC,+BAAD;IAAe,gBAAchC,YAAY;IAAM,IAAI8B;cAChD/B;IAEJ;GACG;;EAGX"}

package/dist/components/TextField/index2.js

@@ -0,0 +1,100 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+/* empty css      */
+import FieldLabel from "../FieldLabel/index2.js";
+import { countCodePointsInString, mergeRefs } from "../../_lib/index.js";
+import { useFocusWithClick } from "./useFocusWithClick.js";
+import { AssistiveText } from "./AssistiveText/index2.js";
+import * as React$1 from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react-aria/useId";
+import { useVisuallyHidden } from "react-aria/VisuallyHidden";
+
+//#region src/components/TextField/index.tsx
+const TextField = React$1.forwardRef(function SingleLineTextFieldInner({ assistiveText, className, disabled = false, label = "", maxLength, onChange, prefix = null, required, requiredText, showCount = false, showLabel = false, subLabel, suffix = null, type = "text", invalid, value, getCount = countCodePointsInString, ...props }, forwardRef) {
+	const inputRef = useRef(null);
+	const { visuallyHiddenProps } = useVisuallyHidden();
+	const [count, setCount] = useState(getCount(value ?? ""));
+	const handleChange = useCallback((e) => {
+		const value = e.target.value;
+		const count = getCount(value);
+		if (maxLength !== void 0 && count > maxLength) return;
+		setCount(count);
+		onChange?.(value);
+	}, [
+		getCount,
+		maxLength,
+		onChange
+	]);
+	useEffect(() => {
+		setCount(getCount(value ?? ""));
+	}, [getCount, value]);
+	const containerRef = useRef(null);
+	useFocusWithClick(containerRef, inputRef);
+	const inputId = useId(props.id);
+	const describedbyId = useId();
+	const labelledbyId = useId();
+	const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: useClassNames("charcoal-text-field-root", className),
+		"aria-disabled": disabled,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: inputId,
+				id: labelledbyId,
+				label,
+				required,
+				requiredText,
+				subLabel,
+				...!showLabel ? visuallyHiddenProps : {}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "charcoal-text-field-container",
+				"aria-disabled": disabled === true ? true : void 0,
+				"data-invalid": invalid === true,
+				ref: containerRef,
+				children: [
+					prefix && /* @__PURE__ */ jsx("div", {
+						className: "charcoal-text-field-prefix",
+						children: prefix
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "charcoal-text-field-input-root",
+						children: /* @__PURE__ */ jsx("input", {
+							className: "charcoal-text-field-input",
+							"aria-describedby": showAssistiveText ? describedbyId : void 0,
+							"aria-invalid": invalid,
+							"aria-labelledby": labelledbyId,
+							id: inputId,
+							"data-invalid": invalid === true,
+							maxLength,
+							onChange: handleChange,
+							disabled,
+							ref: mergeRefs(forwardRef, inputRef),
+							type,
+							value,
+							...props
+						})
+					}),
+					(suffix || showCount) && /* @__PURE__ */ jsxs("div", {
+						className: "charcoal-text-field-suffix",
+						children: [suffix, showCount && /* @__PURE__ */ jsx("span", {
+							className: "charcoal-text-field-line-counter",
+							children: maxLength !== void 0 ? `${count}/${maxLength}` : count
+						})]
+					})
+				]
+			}),
+			showAssistiveText && /* @__PURE__ */ jsx(AssistiveText, {
+				"data-invalid": invalid === true,
+				id: describedbyId,
+				children: assistiveText
+			})
+		]
+	});
+});
+
+//#endregion
+export { TextField as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/TextField/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["ReactNode","useCallback","useEffect","useRef","useState","React","FieldLabel","countCodePointsInString","mergeRefs","useFocusWithClick","AssistiveText","useClassNames","useVisuallyHidden","useId","TextFieldProps","prefix","suffix","value","onChange","showCount","showLabel","assistiveText","invalid","label","requiredText","disabled","subLabel","rdfaPrefix","getCount","Omit","ComponentPropsWithoutRef","TextField","forwardRef","HTMLInputElement","SingleLineTextFieldInner","className","maxLength","required","type","props","inputRef","visuallyHiddenProps","count","setCount","handleChange","e","ChangeEvent","target","undefined","containerRef","inputId","id","describedbyId","labelledbyId","showAssistiveText","length","classNames"],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { AssistiveText } from './AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type TextFieldProps = {\n  prefix?: ReactNode\n  suffix?: ReactNode\n\n  value?: string\n  onChange?: (value: string) => void\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n  rdfaPrefix?: string\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner(\n    {\n      assistiveText,\n      className,\n      disabled = false,\n      label = '',\n      maxLength,\n      onChange,\n      prefix = null,\n      required,\n      requiredText,\n      showCount = false,\n      showLabel = false,\n      subLabel,\n      suffix = null,\n      type = 'text',\n      invalid,\n      value,\n      getCount = countCodePointsInString,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const [count, setCount] = useState(getCount(value ?? ''))\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        setCount(count)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange],\n    )\n\n    useEffect(() => {\n      setCount(getCount(value ?? ''))\n    }, [getCount, value])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, inputRef)\n\n    const inputId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const classNames = useClassNames('charcoal-text-field-root', className)\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={inputId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-field-container\"\n          aria-disabled={disabled === true ? true : undefined}\n          data-invalid={invalid === true}\n          ref={containerRef}\n        >\n          {prefix && <div className=\"charcoal-text-field-prefix\">{prefix}</div>}\n          <div className=\"charcoal-text-field-input-root\">\n            <input\n              className=\"charcoal-text-field-input\"\n              aria-describedby={showAssistiveText ? describedbyId : undefined}\n              aria-invalid={invalid}\n              aria-labelledby={labelledbyId}\n              id={inputId}\n              data-invalid={invalid === true}\n              maxLength={maxLength}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={mergeRefs(forwardRef, inputRef)}\n              type={type}\n              value={value}\n              {...props}\n            />\n          </div>\n          {(suffix || showCount) && (\n            <div className=\"charcoal-text-field-suffix\">\n              {suffix}\n              {showCount && (\n                <span className=\"charcoal-text-field-line-counter\">\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM+B,YAAY1B,QAAM2B,WACtB,SAASE,yBACP,EACEb,eACAc,WACAV,WAAW,OACXF,QAAQ,IACRa,WACAlB,UACAH,SAAS,MACTsB,UACAb,cACAL,YAAY,OACZC,YAAY,OACZM,UACAV,SAAS,MACTsB,OAAO,QACPhB,SACAL,OACAW,WAAWrB,yBACX,GAAGgC,SAELP,YACA;CACA,MAAMQ,WAAWrC,OAAyB,KAAK;CAE/C,MAAM,EAAEsC,wBAAwB7B,mBAAmB;CAEnD,MAAM,CAAC8B,OAAOC,YAAYvC,SAASwB,SAASX,SAAS,GAAG,CAAC;CAEzD,MAAM2B,eAAe3C,aAClB4C,MAA2C;EAC1C,MAAM5B,QAAQ4B,EAAEE,OAAO9B;EACvB,MAAMyB,QAAQd,SAASX,MAAM;EAC7B,IAAImB,cAAcY,UAAaN,QAAQN,WACrC;EAEFO,SAASD,MAAM;EACfxB,WAAWD,MAAM;IAEnB;EAACW;EAAUQ;EAAWlB;EACxB,CAAC;CAEDhB,gBAAgB;EACdyC,SAASf,SAASX,SAAS,GAAG,CAAC;IAC9B,CAACW,UAAUX,MAAM,CAAC;CAErB,MAAMgC,eAAe9C,OAAO,KAAK;CAEjCM,kBAAkBwC,cAAcT,SAAS;CAEzC,MAAMU,UAAUrC,MAAM0B,MAAMY,GAAG;CAC/B,MAAMC,gBAAgBvC,OAAO;CAC7B,MAAMwC,eAAexC,OAAO;CAE5B,MAAMyC,oBACJjC,iBAAiB,QAAQA,cAAckC,WAAW;CAIpD,OACE,qBAAC,OAAD;EAAK,WAHY5C,cAAc,4BAA4BwB,UAGjC;EAAE,iBAAeV;YAA3C;GACE,oBAAC,YAAD;IACE,SAASyB;IACT,IAAIG;IACG9B;IACGc;IACIb;IACJE;IACV,GAAK,CAACN,YAAYqB,sBAAsB,EAAG;IAAC;GAE9C,qBAAC,OAAD;IACE,WAAU;IACV,iBAAehB,aAAa,OAAO,OAAOuB;IAC1C,gBAAc1B,YAAY;IAC1B,KAAK2B;cAJP;KAMGlC,UAAU,oBAAC,OAAD;MAAK,WAAU;gBAA8BA;MAAa;KACrE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,SAAD;OACE,WAAU;OACV,oBAAkBuC,oBAAoBF,gBAAgBJ;OACtD,gBAAc1B;OACd,mBAAiB+B;OACjB,IAAIH;OACJ,gBAAc5B,YAAY;OACfc;OACX,UAAUQ;OACAnB;OACV,KAAKjB,UAAUwB,YAAYQ,SAAS;OAC9BF;OACCrB;OACP,GAAIsB;OAAM;MAET;MACHvB,UAAUG,cACV,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACGH,QACAG,aACC,oBAAC,QAAD;OAAM,WAAU;iBACbiB,cAAcY,SAAY,GAAGN,MAAK,GAAIN,cAAcM;OAExD,EAEJ;;KACE;;GACJY,qBACC,oBAAC,eAAD;IAAe,gBAAchC,YAAY;IAAM,IAAI8B;cAChD/B;IAEJ;GACG;;EAGX"}

package/dist/components/TextField/useFocusWithClick.cjs

@@ -0,0 +1,23 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/TextField/useFocusWithClick.tsx
+function useFocusWithClick(containerRef, inputRef) {
+	(0, react.useEffect)(() => {
+		const el = containerRef.current;
+		if (el) {
+			const handleDown = (e) => {
+				if (e.target !== inputRef.current) inputRef.current?.focus();
+			};
+			el.addEventListener("click", handleDown);
+			return () => {
+				el.removeEventListener("click", handleDown);
+			};
+		}
+	});
+}
+
+//#endregion
+exports.useFocusWithClick = useFocusWithClick;
+//# sourceMappingURL=useFocusWithClick.cjs.map

package/dist/components/TextField/useFocusWithClick.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithClick.cjs","names":["useEffect","React","useFocusWithClick","containerRef","RefObject","HTMLDivElement","inputRef","HTMLInputElement","HTMLTextAreaElement","el","current","handleDown","e","MouseEvent","target","focus","addEventListener","removeEventListener"],"sources":["../../../src/components/TextField/useFocusWithClick.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport * as React from 'react'\n\nexport function useFocusWithClick(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n) {\n  useEffect(() => {\n    const el = containerRef.current\n    if (el) {\n      const handleDown = (e: MouseEvent) => {\n        if (e.target !== inputRef.current) {\n          inputRef.current?.focus()\n        }\n      }\n      el.addEventListener('click', handleDown)\n      return () => {\n        el.removeEventListener('click', handleDown)\n      }\n    }\n  })\n}\n"],"mappings":";;;;;AAGA,SAAgBE,kBACdC,cACAG,UACA;CACAN,2BAAgB;EACd,MAAMS,KAAKN,aAAaO;EACxB,IAAID,IAAI;GACN,MAAME,cAAcC,MAAkB;IACpC,IAAIA,EAAEE,WAAWR,SAASI,SACxBJ,SAASI,SAASK,OAAO;;GAG7BN,GAAGO,iBAAiB,SAASL,WAAW;GACxC,aAAa;IACXF,GAAGQ,oBAAoB,SAASN,WAAW;;;GAG/C"}