npm - @charcoal-ui/react - Versions diffs - 6.1.0-beta.6 → 8.1.1-beta.0 - Mend

@charcoal-ui/react 6.1.0-beta.6 → 8.1.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/components/DropdownSelector/Popover/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,~~EAAE~~,SAAS,~~EAAiC~~,SAAS,~~EAAE~~,MAAM,OAAO,CAAA;~~AAM3E~~,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAID;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,~~kDAuElD~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,SAAS,EAIT,SAAS,EAEV,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAID;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,kDA0HlD"}

package/dist/components/DropdownSelector/Popover/index2.cjs CHANGED Viewed

@@ -17,6 +17,9 @@ const _empty = () => null;
 */
 function Popover(props) {
 	const defaultPopoverRef = (0, react.useRef)(null);
+	const underlayRef = (0, react.useRef)(null);
+	const underlayPointerDownRef = (0, react.useRef)(false);
+	const underlayPointerTypeRef = (0, react.useRef)("");
 	const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
 	const { popoverProps, underlayProps } = (0, react_aria_usePopover.usePopover)({
 		triggerRef: props.triggerRef,
@@ -30,6 +33,17 @@ function Popover(props) {
 		toggle: _empty
 	});
 	require_usePreventScroll.usePreventScroll((0, react.useContext)(require_ModalBackgroundContext.ModalBackgroundContext), props.isOpen);
+	(0, react.useEffect)(() => {
+		const underlay = underlayRef.current;
+		if (!props.isOpen || !props.inertWorkaround || underlay === null) return;
+		const handleTouchStart = (e) => {
+			if (underlayPointerTypeRef.current === "pen") e.preventDefault();
+		};
+		underlay.addEventListener("touchstart", handleTouchStart, { passive: false });
+		return () => {
+			underlay.removeEventListener("touchstart", handleTouchStart);
+		};
+	}, [props.isOpen, props.inertWorkaround]);
 	const { isOpen, onClose } = props;
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
@@ -48,14 +62,31 @@ function Popover(props) {
 		onClose,
 		finalPopoverRef
 	]);
+	const handleUnderlayPointerDown = (e) => {
+		underlayPointerDownRef.current = true;
+		underlayPointerTypeRef.current = e.pointerType;
+	};
+	const handleUnderlayPointerCancel = () => {
+		underlayPointerDownRef.current = false;
+		underlayPointerTypeRef.current = "";
+	};
+	const handleUnderlayClick = () => {
+		const startedOnUnderlay = underlayPointerDownRef.current;
+		underlayPointerDownRef.current = false;
+		underlayPointerTypeRef.current = "";
+		if (startedOnUnderlay) props.onClose();
+	};
 	if (!props.isOpen) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_Overlay.Overlay, {
 		portalContainer: document.body,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...underlayProps,
+			ref: underlayRef,
 			...props.inertWorkaround ? {
 				"data-react-aria-top-layer": true,
-				onClick: props.onClose
+				onPointerDown: handleUnderlayPointerDown,
+				onPointerCancel: handleUnderlayPointerCancel,
+				onClick: handleUnderlayClick
 			} : {},
 			style: {
 				position: "fixed",

package/dist/components/DropdownSelector/Popover/index2.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { RefObject, useContext, useEffect, useRef, ReactNode } from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n isOpen: boolean\n onClose: () => void\n children: ReactNode\n triggerRef: RefObject<Element \| null>\n popoverRef?: RefObject<HTMLDivElement \| null>\n /*\n A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n * This may become default at next major.\n * https://github.com/adobe/react-spectrum/pull/8796\n * https://github.com/adobe/react-spectrum/issues/8784\n \n @default false\n /\n inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/\n 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n \n triggerRefの付近に画面内に収まるように表示される\n /\nexport default function Popover(props: PopoverProps) {\n const defaultPopoverRef = useRef<HTMLDivElement>(null)\n const finalPopoverRef =\n props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n const { popoverProps, underlayProps } = usePopover(\n {\n triggerRef: props.triggerRef,\n popoverRef: finalPopoverRef,\n containerPadding: 16,\n },\n {\n close: props.onClose,\n isOpen: props.isOpen,\n // never used\n open: _empty,\n setOpen: _empty,\n toggle: _empty,\n },\n )\n\n const modalBackground = useContext(ModalBackgroundContext)\n usePreventScroll(modalBackground, props.isOpen)\n\n // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n // click に依存する react-aria の外側判定ではペンで閉じられない。\n // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n // underlay 自身がイベントを受け取らなくなる。\n const { isOpen, onClose } = props\n useEffect(() => {\n if (!isOpen) return\n const handlePointerUp = (e: PointerEvent) => {\n if (e.pointerType !== 'pen') return\n const popover = finalPopoverRef.current\n if (popover !== null && e.composedPath().includes(popover)) return\n onClose()\n }\n document.addEventListener('pointerup', handlePointerUp, true)\n return () => {\n document.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [isOpen, onClose, finalPopoverRef])\n\n if (!props.isOpen) return null\n\n return (\n <Overlay portalContainer={document.body}>\n <div\n {...underlayProps}\n // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n {...(props.inertWorkaround\n ? { 'data-react-aria-top-layer': true, onClick: ~~props.onClose~~ }\n : {})}\n style={{\n position: 'fixed',\n zIndex:\n typeof popoverProps.style?.zIndex === 'number'\n ? popoverProps.style.zIndex - 1\n : 99999,\n inset: 0,\n }}\n />\n {/ @ts-expect-error react types we use does not support react 19 types yet */}\n <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n <DismissButton onDismiss={() => props.onClose()} />\n <div tabIndex={0} onFocus={props.onClose} />\n {props.children}\n <div tabIndex={0} onFocus={props.onClose} />\n <DismissButton onDismiss={() => props.onClose()} />\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;;;~~AAyBA~~,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,sCAA2C,IAAI;CACrD,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,wDACpB;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,gEADmC,qDAClB,GAAiB,MAAM,MAAM;~~CAM9C~~,MAAM,EAAE,QAAQ,YAAY;CAC5B,2BAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,4CAAC,4BAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,2CAAC,OAAD;GACE,GAAI;~~GAEJ~~,GAAK,MAAM,kBACP;~~IAAE~~,6BAA6B;~~IAAM~~,~~SAAS~~,~~MAAM~~;~~GAAQ~~,~~IAC5D~~,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,4CAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}
1	+ {"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n RefObject,\n useContext,\n useEffect,\n useRef,\n ReactNode,\n type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n isOpen: boolean\n onClose: () => void\n children: ReactNode\n triggerRef: RefObject<Element \| null>\n popoverRef?: RefObject<HTMLDivElement \| null>\n /*\n A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n * This may become default at next major.\n * https://github.com/adobe/react-spectrum/pull/8796\n * https://github.com/adobe/react-spectrum/issues/8784\n \n @default false\n /\n inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/\n 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n \n triggerRefの付近に画面内に収まるように表示される\n /\nexport default function Popover(props: PopoverProps) {\n const defaultPopoverRef = useRef<HTMLDivElement>(null)\n const underlayRef = useRef<HTMLDivElement>(null)\n const underlayPointerDownRef = useRef(false)\n const underlayPointerTypeRef = useRef('')\n const finalPopoverRef =\n props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n const { popoverProps, underlayProps } = usePopover(\n {\n triggerRef: props.triggerRef,\n popoverRef: finalPopoverRef,\n containerPadding: 16,\n },\n {\n close: props.onClose,\n isOpen: props.isOpen,\n // never used\n open: _empty,\n setOpen: _empty,\n toggle: _empty,\n },\n )\n\n const modalBackground = useContext(ModalBackgroundContext)\n usePreventScroll(modalBackground, props.isOpen)\n\n // React の touchstart listener は passive なので、ペン由来の互換 click を\n // 抑止するため underlay に non-passive listener を直接登録する。\n useEffect(() => {\n const underlay = underlayRef.current\n if (!props.isOpen \|\| !props.inertWorkaround \|\| underlay === null) return\n\n const handleTouchStart = (e: TouchEvent) => {\n if (underlayPointerTypeRef.current === 'pen') {\n e.preventDefault()\n }\n }\n underlay.addEventListener('touchstart', handleTouchStart, {\n passive: false,\n })\n return () => {\n underlay.removeEventListener('touchstart', handleTouchStart)\n }\n }, [props.isOpen, props.inertWorkaround])\n\n // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n // click に依存する react-aria の外側判定ではペンで閉じられない。\n // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n // underlay 自身がイベントを受け取らなくなる。\n const { isOpen, onClose } = props\n useEffect(() => {\n if (!isOpen) return\n const handlePointerUp = (e: PointerEvent) => {\n if (e.pointerType !== 'pen') return\n const popover = finalPopoverRef.current\n if (popover !== null && e.composedPath().includes(popover)) return\n onClose()\n }\n document.addEventListener('pointerup', handlePointerUp, true)\n return () => {\n document.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [isOpen, onClose, finalPopoverRef])\n\n const handleUnderlayPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n underlayPointerDownRef.current = true\n underlayPointerTypeRef.current = e.pointerType\n }\n\n const handleUnderlayPointerCancel = () => {\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n }\n\n const handleUnderlayClick = () => {\n const startedOnUnderlay = underlayPointerDownRef.current\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n\n // Android Chrome はペンの pointerup で Popover が開いた後、同じ入力の\n // 互換 click を新しく追加された underlay に送る。この click には\n // underlay 上の pointerdown がないため、外側操作として扱わない。\n if (startedOnUnderlay) {\n props.onClose()\n }\n }\n\n if (!props.isOpen) return null\n\n return (\n <Overlay portalContainer={document.body}>\n <div\n {...underlayProps}\n ref={underlayRef}\n // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n {...(props.inertWorkaround\n ? {\n 'data-react-aria-top-layer': true,\n onPointerDown: handleUnderlayPointerDown,\n onPointerCancel: handleUnderlayPointerCancel,\n onClick: handleUnderlayClick,\n }\n : {})}\n style={{\n position: 'fixed',\n zIndex:\n typeof popoverProps.style?.zIndex === 'number'\n ? popoverProps.style.zIndex - 1\n : 99999,\n inset: 0,\n }}\n />\n {/ @ts-expect-error react types we use does not support react 19 types yet */}\n <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n <DismissButton onDismiss={() => props.onClose()} />\n <div tabIndex={0} onFocus={props.onClose} />\n {props.children}\n <div tabIndex={0} onFocus={props.onClose} />\n <DismissButton onDismiss={() => props.onClose()} />\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,sCAA2C,IAAI;CACrD,MAAM,gCAAqC,IAAI;CAC/C,MAAM,2CAAgC,KAAK;CAC3C,MAAM,2CAAgC,EAAE;CACxC,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,wDACpB;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,gEADmC,qDAClB,GAAiB,MAAM,MAAM;CAI9C,2BAAgB;EACd,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,mBAAmB,aAAa,MAAM;EAElE,MAAM,oBAAoB,MAAkB;GAC1C,IAAI,uBAAuB,YAAY,OACrC,EAAE,eAAe;EAErB;EACA,SAAS,iBAAiB,cAAc,kBAAkB,EACxD,SAAS,MACX,CAAC;EACD,aAAa;GACX,SAAS,oBAAoB,cAAc,gBAAgB;EAC7D;CACF,GAAG,CAAC,MAAM,QAAQ,MAAM,eAAe,CAAC;CAMxC,MAAM,EAAE,QAAQ,YAAY;CAC5B,2BAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,MAAM,6BAA6B,MAAyC;EAC1E,uBAAuB,UAAU;EACjC,uBAAuB,UAAU,EAAE;CACrC;CAEA,MAAM,oCAAoC;EACxC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC;CAEA,MAAM,4BAA4B;EAChC,MAAM,oBAAoB,uBAAuB;EACjD,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAKjC,IAAI,mBACF,MAAM,QAAQ;CAElB;CAEA,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,4CAAC,4BAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,2CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GAEL,GAAK,MAAM,kBACP;IACE,6BAA6B;IAC7B,eAAe;IACf,iBAAiB;IACjB,SAAS;GACX,IACA,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,4CAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}

package/dist/components/DropdownSelector/Popover/index2.js CHANGED Viewed

@@ -17,6 +17,9 @@ const _empty = () => null;
 */
 function Popover(props) {
 	const defaultPopoverRef = useRef(null);
+	const underlayRef = useRef(null);
+	const underlayPointerDownRef = useRef(false);
+	const underlayPointerTypeRef = useRef("");
 	const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
 	const { popoverProps, underlayProps } = usePopover({
 		triggerRef: props.triggerRef,
@@ -30,6 +33,17 @@ function Popover(props) {
 		toggle: _empty
 	});
 	usePreventScroll(useContext(ModalBackgroundContext), props.isOpen);
+	useEffect(() => {
+		const underlay = underlayRef.current;
+		if (!props.isOpen || !props.inertWorkaround || underlay === null) return;
+		const handleTouchStart = (e) => {
+			if (underlayPointerTypeRef.current === "pen") e.preventDefault();
+		};
+		underlay.addEventListener("touchstart", handleTouchStart, { passive: false });
+		return () => {
+			underlay.removeEventListener("touchstart", handleTouchStart);
+		};
+	}, [props.isOpen, props.inertWorkaround]);
 	const { isOpen, onClose } = props;
 	useEffect(() => {
 		if (!isOpen) return;
@@ -48,14 +62,31 @@ function Popover(props) {
 		onClose,
 		finalPopoverRef
 	]);
+	const handleUnderlayPointerDown = (e) => {
+		underlayPointerDownRef.current = true;
+		underlayPointerTypeRef.current = e.pointerType;
+	};
+	const handleUnderlayPointerCancel = () => {
+		underlayPointerDownRef.current = false;
+		underlayPointerTypeRef.current = "";
+	};
+	const handleUnderlayClick = () => {
+		const startedOnUnderlay = underlayPointerDownRef.current;
+		underlayPointerDownRef.current = false;
+		underlayPointerTypeRef.current = "";
+		if (startedOnUnderlay) props.onClose();
+	};
 	if (!props.isOpen) return null;
 	return /* @__PURE__ */ jsxs(Overlay, {
 		portalContainer: document.body,
 		children: [/* @__PURE__ */ jsx("div", {
 			...underlayProps,
+			ref: underlayRef,
 			...props.inertWorkaround ? {
 				"data-react-aria-top-layer": true,
-				onClick: props.onClose
+				onPointerDown: handleUnderlayPointerDown,
+				onPointerCancel: handleUnderlayPointerCancel,
+				onClick: handleUnderlayClick
 			} : {},
 			style: {
 				position: "fixed",

package/dist/components/DropdownSelector/Popover/index2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { RefObject, useContext, useEffect, useRef, ReactNode } from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n isOpen: boolean\n onClose: () => void\n children: ReactNode\n triggerRef: RefObject<Element \| null>\n popoverRef?: RefObject<HTMLDivElement \| null>\n /*\n A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n * This may become default at next major.\n * https://github.com/adobe/react-spectrum/pull/8796\n * https://github.com/adobe/react-spectrum/issues/8784\n \n @default false\n /\n inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/\n 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n \n triggerRefの付近に画面内に収まるように表示される\n /\nexport default function Popover(props: PopoverProps) {\n const defaultPopoverRef = useRef<HTMLDivElement>(null)\n const finalPopoverRef =\n props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n const { popoverProps, underlayProps } = usePopover(\n {\n triggerRef: props.triggerRef,\n popoverRef: finalPopoverRef,\n containerPadding: 16,\n },\n {\n close: props.onClose,\n isOpen: props.isOpen,\n // never used\n open: _empty,\n setOpen: _empty,\n toggle: _empty,\n },\n )\n\n const modalBackground = useContext(ModalBackgroundContext)\n usePreventScroll(modalBackground, props.isOpen)\n\n // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n // click に依存する react-aria の外側判定ではペンで閉じられない。\n // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n // underlay 自身がイベントを受け取らなくなる。\n const { isOpen, onClose } = props\n useEffect(() => {\n if (!isOpen) return\n const handlePointerUp = (e: PointerEvent) => {\n if (e.pointerType !== 'pen') return\n const popover = finalPopoverRef.current\n if (popover !== null && e.composedPath().includes(popover)) return\n onClose()\n }\n document.addEventListener('pointerup', handlePointerUp, true)\n return () => {\n document.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [isOpen, onClose, finalPopoverRef])\n\n if (!props.isOpen) return null\n\n return (\n <Overlay portalContainer={document.body}>\n <div\n {...underlayProps}\n // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n {...(props.inertWorkaround\n ? { 'data-react-aria-top-layer': true, onClick: ~~props.onClose~~ }\n : {})}\n style={{\n position: 'fixed',\n zIndex:\n typeof popoverProps.style?.zIndex === 'number'\n ? popoverProps.style.zIndex - 1\n : 99999,\n inset: 0,\n }}\n />\n {/ @ts-expect-error react types we use does not support react 19 types yet */}\n <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n <DismissButton onDismiss={() => props.onClose()} />\n <div tabIndex={0} onFocus={props.onClose} />\n {props.children}\n <div tabIndex={0} onFocus={props.onClose} />\n <DismissButton onDismiss={() => props.onClose()} />\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;;;~~AAyBA~~,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,kBAAkB,WACtC;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,iBADwB,WAAW,sBAClB,GAAiB,MAAM,MAAM;~~CAM9C~~,MAAM,EAAE,QAAQ,YAAY;CAC5B,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,qBAAC,SAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,oBAAC,OAAD;GACE,GAAI;~~GAEJ~~,GAAK,MAAM,kBACP;~~IAAE~~,6BAA6B;~~IAAM~~,~~SAAS~~,~~MAAM~~;~~GAAQ~~,~~IAC5D~~,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,qBAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}
1	+ {"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n RefObject,\n useContext,\n useEffect,\n useRef,\n ReactNode,\n type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n isOpen: boolean\n onClose: () => void\n children: ReactNode\n triggerRef: RefObject<Element \| null>\n popoverRef?: RefObject<HTMLDivElement \| null>\n /*\n A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n * This may become default at next major.\n * https://github.com/adobe/react-spectrum/pull/8796\n * https://github.com/adobe/react-spectrum/issues/8784\n \n @default false\n /\n inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/\n 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n \n triggerRefの付近に画面内に収まるように表示される\n /\nexport default function Popover(props: PopoverProps) {\n const defaultPopoverRef = useRef<HTMLDivElement>(null)\n const underlayRef = useRef<HTMLDivElement>(null)\n const underlayPointerDownRef = useRef(false)\n const underlayPointerTypeRef = useRef('')\n const finalPopoverRef =\n props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n const { popoverProps, underlayProps } = usePopover(\n {\n triggerRef: props.triggerRef,\n popoverRef: finalPopoverRef,\n containerPadding: 16,\n },\n {\n close: props.onClose,\n isOpen: props.isOpen,\n // never used\n open: _empty,\n setOpen: _empty,\n toggle: _empty,\n },\n )\n\n const modalBackground = useContext(ModalBackgroundContext)\n usePreventScroll(modalBackground, props.isOpen)\n\n // React の touchstart listener は passive なので、ペン由来の互換 click を\n // 抑止するため underlay に non-passive listener を直接登録する。\n useEffect(() => {\n const underlay = underlayRef.current\n if (!props.isOpen \|\| !props.inertWorkaround \|\| underlay === null) return\n\n const handleTouchStart = (e: TouchEvent) => {\n if (underlayPointerTypeRef.current === 'pen') {\n e.preventDefault()\n }\n }\n underlay.addEventListener('touchstart', handleTouchStart, {\n passive: false,\n })\n return () => {\n underlay.removeEventListener('touchstart', handleTouchStart)\n }\n }, [props.isOpen, props.inertWorkaround])\n\n // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n // click に依存する react-aria の外側判定ではペンで閉じられない。\n // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n // underlay 自身がイベントを受け取らなくなる。\n const { isOpen, onClose } = props\n useEffect(() => {\n if (!isOpen) return\n const handlePointerUp = (e: PointerEvent) => {\n if (e.pointerType !== 'pen') return\n const popover = finalPopoverRef.current\n if (popover !== null && e.composedPath().includes(popover)) return\n onClose()\n }\n document.addEventListener('pointerup', handlePointerUp, true)\n return () => {\n document.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [isOpen, onClose, finalPopoverRef])\n\n const handleUnderlayPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n underlayPointerDownRef.current = true\n underlayPointerTypeRef.current = e.pointerType\n }\n\n const handleUnderlayPointerCancel = () => {\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n }\n\n const handleUnderlayClick = () => {\n const startedOnUnderlay = underlayPointerDownRef.current\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n\n // Android Chrome はペンの pointerup で Popover が開いた後、同じ入力の\n // 互換 click を新しく追加された underlay に送る。この click には\n // underlay 上の pointerdown がないため、外側操作として扱わない。\n if (startedOnUnderlay) {\n props.onClose()\n }\n }\n\n if (!props.isOpen) return null\n\n return (\n <Overlay portalContainer={document.body}>\n <div\n {...underlayProps}\n ref={underlayRef}\n // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n {...(props.inertWorkaround\n ? {\n 'data-react-aria-top-layer': true,\n onPointerDown: handleUnderlayPointerDown,\n onPointerCancel: handleUnderlayPointerCancel,\n onClick: handleUnderlayClick,\n }\n : {})}\n style={{\n position: 'fixed',\n zIndex:\n typeof popoverProps.style?.zIndex === 'number'\n ? popoverProps.style.zIndex - 1\n : 99999,\n inset: 0,\n }}\n />\n {/ @ts-expect-error react types we use does not support react 19 types yet */}\n <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n <DismissButton onDismiss={() => props.onClose()} />\n <div tabIndex={0} onFocus={props.onClose} />\n {props.children}\n <div tabIndex={0} onFocus={props.onClose} />\n <DismissButton onDismiss={() => props.onClose()} />\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,yBAAyB,OAAO,KAAK;CAC3C,MAAM,yBAAyB,OAAO,EAAE;CACxC,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,kBAAkB,WACtC;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,iBADwB,WAAW,sBAClB,GAAiB,MAAM,MAAM;CAI9C,gBAAgB;EACd,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,mBAAmB,aAAa,MAAM;EAElE,MAAM,oBAAoB,MAAkB;GAC1C,IAAI,uBAAuB,YAAY,OACrC,EAAE,eAAe;EAErB;EACA,SAAS,iBAAiB,cAAc,kBAAkB,EACxD,SAAS,MACX,CAAC;EACD,aAAa;GACX,SAAS,oBAAoB,cAAc,gBAAgB;EAC7D;CACF,GAAG,CAAC,MAAM,QAAQ,MAAM,eAAe,CAAC;CAMxC,MAAM,EAAE,QAAQ,YAAY;CAC5B,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,MAAM,6BAA6B,MAAyC;EAC1E,uBAAuB,UAAU;EACjC,uBAAuB,UAAU,EAAE;CACrC;CAEA,MAAM,oCAAoC;EACxC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC;CAEA,MAAM,4BAA4B;EAChC,MAAM,oBAAoB,uBAAuB;EACjD,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAKjC,IAAI,mBACF,MAAM,QAAQ;CAElB;CAEA,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,qBAAC,SAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GAEL,GAAK,MAAM,kBACP;IACE,6BAA6B;IAC7B,eAAe;IACf,iBAAiB;IACjB,SAAS;GACX,IACA,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,qBAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}

package/dist/components/Notification/NotificationRegion.cjs CHANGED Viewed

@@ -27,6 +27,7 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
 		}
 	}, regionRef);
 	const classNames = require_useClassNames.useClassNames("charcoal-notification-region", className);
+	const effectiveOffset = Math.max(offset, DEFAULT_OFFSET);
 	if (state.visibleToasts.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.Overlay, {
 		disableFocusManagement: true,
@@ -37,10 +38,10 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
 			className: classNames,
 			style: {
 				zIndex,
-				[`--charcoal-${name}-offset`]: `${offset}px`,
+				[`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
 				justifyContent: position === "top" ? "flex-start" : "flex-end"
 			},
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { height: `${headerOffset}px` } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))` } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-position": position,
 				className: `charcoal-${name}-region`,
 				children

package/dist/components/Notification/NotificationRegion.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationRegion.cjs","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n name,\n state,\n position,\n offset = DEFAULT_OFFSET,\n headerOffset = 0,\n zIndex = DEFAULT_Z_INDEX,\n portalContainer,\n className,\n children,\n}: {\n name: NotificationName\n state: ToastState<TContent>\n position: Position\n offset?: number\n headerOffset?: number\n zIndex?: number\n portalContainer?: HTMLElement\n className?: string\n children: ReactNode\n}) {\n const regionRef = useRef<HTMLDivElement>(null)\n const pausedByFocusRef = useRef(false)\n const timerState: ToastState<TContent> = {\n ...state,\n pauseAll() {\n if (regionRef.current?.contains(document.activeElement)) {\n pausedByFocusRef.current = true\n state.pauseAll()\n }\n },\n resumeAll() {\n if (pausedByFocusRef.current) {\n pausedByFocusRef.current = false\n state.resumeAll()\n }\n },\n }\n const { regionProps } = useToastRegion({}, timerState, regionRef)\n const classNames = useClassNames('charcoal-notification-region', className)\n\n if (state.visibleToasts.length === 0) {\n return null\n }\n\n return (\n <Overlay disableFocusManagement portalContainer={portalContainer}>\n <div\n {...regionProps}\n ref={regionRef}\n className={classNames}\n style={\n {\n zIndex,\n [`--charcoal-${name}-offset`]: `${~~offset~~}px`,\n justifyContent: position === 'top' ? 'flex-start' : 'flex-end',\n } as CSSProperties\n }\n >\n <div\n style={{\n height: `${headerOffset}px`,\n }}\n />\n <div data-position={position} className={`charcoal-${name}-region`}>\n {children}\n </div>\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,eAAe,GACf,SAAS,iBACT,iBACA,WACA,YAWC;CACD,MAAM,8BAAmC,IAAI;CAC7C,MAAM,qCAA0B,KAAK;CAgBrC,MAAM,EAAE,wDAA+B,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,oCAAc,gCAAgC,SAAS;~~CAE1E~~,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,2CAAC,4BAAD;EAAS;EAAwC;YAC/C,4CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,~~OAAM~~;~~IACxC~~,gBAAgB,aAAa,QAAQ,eAAe;GACtD;aATJ,CAYE,2CAAC,OAAD,EACE,OAAO,EACL,QAAQ,~~GAAG~~,aAAY,~~IACzB~~,EAAE,IAEJ,2CAAC,OAAD;IAAK,iBAAe;IAAU,WAAW,YAAY,KAAI;IACtD;GACE,EACF;;CACE;AAEb"}
1	+ {"version":3,"file":"NotificationRegion.cjs","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n name,\n state,\n position,\n offset = DEFAULT_OFFSET,\n headerOffset = 0,\n zIndex = DEFAULT_Z_INDEX,\n portalContainer,\n className,\n children,\n}: {\n name: NotificationName\n state: ToastState<TContent>\n position: Position\n offset?: number\n headerOffset?: number\n zIndex?: number\n portalContainer?: HTMLElement\n className?: string\n children: ReactNode\n}) {\n const regionRef = useRef<HTMLDivElement>(null)\n const pausedByFocusRef = useRef(false)\n const timerState: ToastState<TContent> = {\n ...state,\n pauseAll() {\n if (regionRef.current?.contains(document.activeElement)) {\n pausedByFocusRef.current = true\n state.pauseAll()\n }\n },\n resumeAll() {\n if (pausedByFocusRef.current) {\n pausedByFocusRef.current = false\n state.resumeAll()\n }\n },\n }\n const { regionProps } = useToastRegion({}, timerState, regionRef)\n const classNames = useClassNames('charcoal-notification-region', className)\n const effectiveOffset = Math.max(offset, DEFAULT_OFFSET)\n\n if (state.visibleToasts.length === 0) {\n return null\n }\n\n return (\n <Overlay disableFocusManagement portalContainer={portalContainer}>\n <div\n {...regionProps}\n ref={regionRef}\n className={classNames}\n style={\n {\n zIndex,\n [`--charcoal-${name}-offset`]: `${effectiveOffset}px`,\n justifyContent: position === 'top' ? 'flex-start' : 'flex-end',\n } as CSSProperties\n }\n >\n <div\n style={{\n height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))`,\n }}\n />\n <div data-position={position} className={`charcoal-${name}-region`}>\n {children}\n </div>\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,eAAe,GACf,SAAS,iBACT,iBACA,WACA,YAWC;CACD,MAAM,8BAAmC,IAAI;CAC7C,MAAM,qCAA0B,KAAK;CAgBrC,MAAM,EAAE,wDAA+B,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,oCAAc,gCAAgC,SAAS;CAC1E,MAAM,kBAAkB,KAAK,IAAI,QAAQ,cAAc;CAEvD,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,2CAAC,4BAAD;EAAS;EAAwC;YAC/C,4CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,gBAAe;IACjD,gBAAgB,aAAa,QAAQ,eAAe;GACtD;aATJ,CAYE,2CAAC,OAAD,EACE,OAAO,EACL,QAAQ,QAAQ,aAAY,sDAAuD,KAAI,WACzF,EAAE,IAEJ,2CAAC,OAAD;IAAK,iBAAe;IAAU,WAAW,YAAY,KAAI;IACtD;GACE,EACF;;CACE;AAEb"}

package/dist/components/Notification/NotificationRegion.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationRegion.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAKzD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,EAC3C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAuB,EACvB,YAAgB,EAChB,MAAwB,EACxB,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,~~kDAkDA~~"}
1	+ {"version":3,"file":"NotificationRegion.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAKzD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,EAC3C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAuB,EACvB,YAAgB,EAChB,MAAwB,EACxB,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,kDAmDA"}

package/dist/components/Notification/NotificationRegion.js CHANGED Viewed

@@ -27,6 +27,7 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
 		}
 	}, regionRef);
 	const classNames = useClassNames("charcoal-notification-region", className);
+	const effectiveOffset = Math.max(offset, DEFAULT_OFFSET);
 	if (state.visibleToasts.length === 0) return null;
 	return /* @__PURE__ */ jsx(Overlay, {
 		disableFocusManagement: true,
@@ -37,10 +38,10 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
 			className: classNames,
 			style: {
 				zIndex,
-				[`--charcoal-${name}-offset`]: `${offset}px`,
+				[`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
 				justifyContent: position === "top" ? "flex-start" : "flex-end"
 			},
-			children: [/* @__PURE__ */ jsx("div", { style: { height: `${headerOffset}px` } }), /* @__PURE__ */ jsx("div", {
+			children: [/* @__PURE__ */ jsx("div", { style: { height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))` } }), /* @__PURE__ */ jsx("div", {
 				"data-position": position,
 				className: `charcoal-${name}-region`,
 				children

package/dist/components/Notification/NotificationRegion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationRegion.js","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n name,\n state,\n position,\n offset = DEFAULT_OFFSET,\n headerOffset = 0,\n zIndex = DEFAULT_Z_INDEX,\n portalContainer,\n className,\n children,\n}: {\n name: NotificationName\n state: ToastState<TContent>\n position: Position\n offset?: number\n headerOffset?: number\n zIndex?: number\n portalContainer?: HTMLElement\n className?: string\n children: ReactNode\n}) {\n const regionRef = useRef<HTMLDivElement>(null)\n const pausedByFocusRef = useRef(false)\n const timerState: ToastState<TContent> = {\n ...state,\n pauseAll() {\n if (regionRef.current?.contains(document.activeElement)) {\n pausedByFocusRef.current = true\n state.pauseAll()\n }\n },\n resumeAll() {\n if (pausedByFocusRef.current) {\n pausedByFocusRef.current = false\n state.resumeAll()\n }\n },\n }\n const { regionProps } = useToastRegion({}, timerState, regionRef)\n const classNames = useClassNames('charcoal-notification-region', className)\n\n if (state.visibleToasts.length === 0) {\n return null\n }\n\n return (\n <Overlay disableFocusManagement portalContainer={portalContainer}>\n <div\n {...regionProps}\n ref={regionRef}\n className={classNames}\n style={\n {\n zIndex,\n [`--charcoal-${name}-offset`]: `${~~offset~~}px`,\n justifyContent: position === 'top' ? 'flex-start' : 'flex-end',\n } as CSSProperties\n }\n >\n <div\n style={{\n height: `${headerOffset}px`,\n }}\n />\n <div data-position={position} className={`charcoal-${name}-region`}>\n {children}\n </div>\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,eAAe,GACf,SAAS,iBACT,iBACA,WACA,YAWC;CACD,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,mBAAmB,OAAO,KAAK;CAgBrC,MAAM,EAAE,gBAAgB,eAAe,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,cAAc,gCAAgC,SAAS;~~CAE1E~~,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,oBAAC,SAAD;EAAS;EAAwC;YAC/C,qBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,~~OAAM~~;~~IACxC~~,gBAAgB,aAAa,QAAQ,eAAe;GACtD;aATJ,CAYE,oBAAC,OAAD,EACE,OAAO,EACL,QAAQ,~~GAAG~~,aAAY,~~IACzB~~,EAAE,IAEJ,oBAAC,OAAD;IAAK,iBAAe;IAAU,WAAW,YAAY,KAAI;IACtD;GACE,EACF;;CACE;AAEb"}
1	+ {"version":3,"file":"NotificationRegion.js","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n name,\n state,\n position,\n offset = DEFAULT_OFFSET,\n headerOffset = 0,\n zIndex = DEFAULT_Z_INDEX,\n portalContainer,\n className,\n children,\n}: {\n name: NotificationName\n state: ToastState<TContent>\n position: Position\n offset?: number\n headerOffset?: number\n zIndex?: number\n portalContainer?: HTMLElement\n className?: string\n children: ReactNode\n}) {\n const regionRef = useRef<HTMLDivElement>(null)\n const pausedByFocusRef = useRef(false)\n const timerState: ToastState<TContent> = {\n ...state,\n pauseAll() {\n if (regionRef.current?.contains(document.activeElement)) {\n pausedByFocusRef.current = true\n state.pauseAll()\n }\n },\n resumeAll() {\n if (pausedByFocusRef.current) {\n pausedByFocusRef.current = false\n state.resumeAll()\n }\n },\n }\n const { regionProps } = useToastRegion({}, timerState, regionRef)\n const classNames = useClassNames('charcoal-notification-region', className)\n const effectiveOffset = Math.max(offset, DEFAULT_OFFSET)\n\n if (state.visibleToasts.length === 0) {\n return null\n }\n\n return (\n <Overlay disableFocusManagement portalContainer={portalContainer}>\n <div\n {...regionProps}\n ref={regionRef}\n className={classNames}\n style={\n {\n zIndex,\n [`--charcoal-${name}-offset`]: `${effectiveOffset}px`,\n justifyContent: position === 'top' ? 'flex-start' : 'flex-end',\n } as CSSProperties\n }\n >\n <div\n style={{\n height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))`,\n }}\n />\n <div data-position={position} className={`charcoal-${name}-region`}>\n {children}\n </div>\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,eAAe,GACf,SAAS,iBACT,iBACA,WACA,YAWC;CACD,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,mBAAmB,OAAO,KAAK;CAgBrC,MAAM,EAAE,gBAAgB,eAAe,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,cAAc,gCAAgC,SAAS;CAC1E,MAAM,kBAAkB,KAAK,IAAI,QAAQ,cAAc;CAEvD,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,oBAAC,SAAD;EAAS;EAAwC;YAC/C,qBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,gBAAe;IACjD,gBAAgB,aAAa,QAAQ,eAAe;GACtD;aATJ,CAYE,oBAAC,OAAD,EACE,OAAO,EACL,QAAQ,QAAQ,aAAY,sDAAuD,KAAI,WACzF,EAAE,IAEJ,oBAAC,OAAD;IAAK,iBAAe;IAAU,WAAW,YAAY,KAAI;IACtD;GACE,EACF;;CACE;AAEb"}

package/dist/components/Notification/types.d.ts CHANGED Viewed

@@ -8,6 +8,11 @@ export type UseNotificationOptions = {
      * @default 16
      */
     offset?: number;
+    /**
+     * スクロールに追従しないヘッダーの高さを指定する
+     * @default 0
+     */
+    headerOffset?: number;
     /**
      * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
      * @default 5000

package/dist/components/Notification/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AACvC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GAAG;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AACvC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GAAG;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

package/dist/components/TextField/index.d.ts CHANGED Viewed

@@ -14,7 +14,6 @@ export type TextFieldProps = {
     requiredText?: string;
     disabled?: boolean;
     subLabel?: React.ReactNode;
-    rdfaPrefix?: string;
     getCount?: (value: string) => number;
 } & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>;
 declare const TextField: React.ForwardRefExoticComponent<{
@@ -30,7 +29,6 @@ declare const TextField: React.ForwardRefExoticComponent<{
     requiredText?: string;
     disabled?: boolean;
     subLabel?: React.ReactNode;
-    rdfaPrefix?: string;
     getCount?: (value: string) => number;
 } & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "prefix"> & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/components/TextField/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;~~IAC1B~~,~~UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,~~QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACrC,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAExE,QAAA,MAAM,SAAS;~~aApBJ~~,SAAS;aACT,SAAS;YAEV,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBAEtB,OAAO;gBACP,OAAO;oBACH,MAAM;cACZ,OAAO;YAET,MAAM;mBACC,MAAM;eACV,OAAO;eACP,KAAK,CAAC,SAAS;~~iBACb~~,~~MAAM;eAER,~~CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6KAqHrC,CAAA;eAEc,SAAS"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACrC,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAExE,QAAA,MAAM,SAAS;aAnBJ,SAAS;aACT,SAAS;YAEV,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBAEtB,OAAO;gBACP,OAAO;oBACH,MAAM;cACZ,OAAO;YAET,MAAM;mBACC,MAAM;eACV,OAAO;eACP,KAAK,CAAC,SAAS;eAEf,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6KAqHrC,CAAA;eAEc,SAAS"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index2.cjs","names":[],"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,YAAY,MAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yCACX,GAAG,SAEL,YACA;CACA,MAAM,6BAAoC,IAAI;CAE9C,MAAM,EAAE,yEAA0C;CAElD,MAAM,CAAC,OAAO,gCAAqB,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,uCACH,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,2BAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,iCAAsB,IAAI;CAEhC,4CAAkB,cAAc,QAAQ;CAExC,MAAM,sCAAgB,MAAM,EAAE;CAC9B,MAAM,4CAAsB;CAC5B,MAAM,2CAAqB;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,4CAAC,OAAD;EAAK,WAHY,oCAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,2CAAC,yBAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,4CAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,2CAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,2CAAC,OAAD;MAAK,WAAU;gBACb,2CAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,0BAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,4CAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,2CAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,2CAAC,+BAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}
1	+ {"version":3,"file":"index2.cjs","names":[],"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\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":";;;;;;;;;;;;;;;AAgCA,MAAM,YAAY,MAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yCACX,GAAG,SAEL,YACA;CACA,MAAM,6BAAoC,IAAI;CAE9C,MAAM,EAAE,yEAA0C;CAElD,MAAM,CAAC,OAAO,gCAAqB,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,uCACH,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,2BAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,iCAAsB,IAAI;CAEhC,4CAAkB,cAAc,QAAQ;CAExC,MAAM,sCAAgB,MAAM,EAAE;CAC9B,MAAM,4CAAsB;CAC5B,MAAM,2CAAqB;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,4CAAC,OAAD;EAAK,WAHY,oCAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,2CAAC,yBAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,4CAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,2CAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,2CAAC,OAAD;MAAK,WAAU;gBACb,2CAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,0BAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,4CAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,2CAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,2CAAC,+BAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index2.js","names":[],"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,YAAY,QAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yBACX,GAAG,SAEL,YACA;CACA,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,gBAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,eAAe,OAAO,IAAI;CAEhC,kBAAkB,cAAc,QAAQ;CAExC,MAAM,UAAU,MAAM,MAAM,EAAE;CAC9B,MAAM,gBAAgB,MAAM;CAC5B,MAAM,eAAe,MAAM;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,qBAAC,OAAD;EAAK,WAHY,cAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,oBAAC,YAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,qBAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,UAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,oBAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,oBAAC,eAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}
1	+ {"version":3,"file":"index2.js","names":[],"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\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":";;;;;;;;;;;;;;AAgCA,MAAM,YAAY,QAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yBACX,GAAG,SAEL,YACA;CACA,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,gBAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,eAAe,OAAO,IAAI;CAEhC,kBAAkB,cAAc,QAAQ;CAExC,MAAM,UAAU,MAAM,MAAM,EAAE;CAC9B,MAAM,gBAAgB,MAAM;CAC5B,MAAM,eAAe,MAAM;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,qBAAC,OAAD;EAAK,WAHY,cAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,oBAAC,YAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,qBAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,UAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,oBAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,oBAAC,eAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}