@charcoal-ui/react 6.1.0-beta.6 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Notification/NotificationRegion.cjs +3 -2
- package/dist/components/Notification/NotificationRegion.cjs.map +1 -1
- package/dist/components/Notification/NotificationRegion.d.ts.map +1 -1
- package/dist/components/Notification/NotificationRegion.js +3 -2
- package/dist/components/Notification/NotificationRegion.js.map +1 -1
- package/dist/components/Notification/types.d.ts +5 -0
- package/dist/components/Notification/types.d.ts.map +1 -1
- package/dist/components/TextField/index.d.ts +0 -2
- package/dist/components/TextField/index.d.ts.map +1 -1
- package/dist/components/TextField/index2.cjs.map +1 -1
- package/dist/components/TextField/index2.js.map +1 -1
- package/dist/index.css +1130 -1135
- package/dist/layered.css +1130 -1135
- package/dist/layered.css.map +1 -1
- package/package.json +3 -3
- package/src/components/Notification/NotificationRegion.browser.test.tsx +120 -0
- package/src/components/Notification/NotificationRegion.tsx +3 -2
- package/src/components/Notification/Snackbar/__snapshots__/index.css.snap +3 -6
- package/src/components/Notification/Snackbar/index.css +5 -6
- package/src/components/Notification/Snackbar/index.story.tsx +0 -1
- package/src/components/Notification/Toast/__snapshots__/index.css.snap +3 -5
- package/src/components/Notification/Toast/index.css +5 -5
- package/src/components/Notification/Toast/index.story.tsx +0 -1
- package/src/components/Notification/types.ts +5 -0
- package/src/components/TextField/index.tsx +0 -1
|
@@ -27,6 +27,7 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
|
|
|
27
27
|
}
|
|
28
28
|
}, regionRef);
|
|
29
29
|
const classNames = require_useClassNames.useClassNames("charcoal-notification-region", className);
|
|
30
|
+
const effectiveOffset = Math.max(offset, DEFAULT_OFFSET);
|
|
30
31
|
if (state.visibleToasts.length === 0) return null;
|
|
31
32
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.Overlay, {
|
|
32
33
|
disableFocusManagement: true,
|
|
@@ -37,10 +38,10 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
|
|
|
37
38
|
className: classNames,
|
|
38
39
|
style: {
|
|
39
40
|
zIndex,
|
|
40
|
-
[`--charcoal-${name}-offset`]: `${
|
|
41
|
+
[`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
|
|
41
42
|
justifyContent: position === "top" ? "flex-start" : "flex-end"
|
|
42
43
|
},
|
|
43
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { height:
|
|
44
|
+
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", {
|
|
44
45
|
"data-position": position,
|
|
45
46
|
className: `charcoal-${name}-region`,
|
|
46
47
|
children
|
|
@@ -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`]: `${
|
|
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"}
|
|
@@ -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,
|
|
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"}
|
|
@@ -27,6 +27,7 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
|
|
|
27
27
|
}
|
|
28
28
|
}, regionRef);
|
|
29
29
|
const classNames = useClassNames("charcoal-notification-region", className);
|
|
30
|
+
const effectiveOffset = Math.max(offset, DEFAULT_OFFSET);
|
|
30
31
|
if (state.visibleToasts.length === 0) return null;
|
|
31
32
|
return /* @__PURE__ */ jsx(Overlay, {
|
|
32
33
|
disableFocusManagement: true,
|
|
@@ -37,10 +38,10 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, he
|
|
|
37
38
|
className: classNames,
|
|
38
39
|
style: {
|
|
39
40
|
zIndex,
|
|
40
|
-
[`--charcoal-${name}-offset`]: `${
|
|
41
|
+
[`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
|
|
41
42
|
justifyContent: position === "top" ? "flex-start" : "flex-end"
|
|
42
43
|
},
|
|
43
|
-
children: [/* @__PURE__ */ jsx("div", { style: { height:
|
|
44
|
+
children: [/* @__PURE__ */ jsx("div", { style: { height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))` } }), /* @__PURE__ */ jsx("div", {
|
|
44
45
|
"data-position": position,
|
|
45
46
|
className: `charcoal-${name}-region`,
|
|
46
47
|
children
|
|
@@ -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`]: `${
|
|
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"}
|
|
@@ -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"}
|
|
@@ -14,7 +14,6 @@ export type TextFieldProps = {
|
|
|
14
14
|
requiredText?: string;
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
subLabel?: React.ReactNode;
|
|
17
|
-
rdfaPrefix?: string;
|
|
18
17
|
getCount?: (value: string) => number;
|
|
19
18
|
} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>;
|
|
20
19
|
declare const TextField: React.ForwardRefExoticComponent<{
|
|
@@ -30,7 +29,6 @@ declare const TextField: React.ForwardRefExoticComponent<{
|
|
|
30
29
|
requiredText?: string;
|
|
31
30
|
disabled?: boolean;
|
|
32
31
|
subLabel?: React.ReactNode;
|
|
33
|
-
rdfaPrefix?: string;
|
|
34
32
|
getCount?: (value: string) => number;
|
|
35
33
|
} & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "prefix"> & React.RefAttributes<HTMLInputElement>>;
|
|
36
34
|
export default TextField;
|
|
@@ -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;
|
|
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"}
|
|
@@ -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
|
|
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"}
|
|
@@ -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
|
|
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"}
|