@a-type/ui 6.0.9 → 6.0.10

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 (8) hide show
  1. package/dist/components/liveUpdateTextField/LiveUpdateTextField.d.ts +2 -1
  2. package/dist/components/liveUpdateTextField/LiveUpdateTextField.js.map +1 -1
  3. package/dist/components/typography/typography.d.ts +1 -0
  4. package/dist/components/typography/typography.js +5 -0
  5. package/dist/components/typography/typography.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx +135 -133
  8. package/src/components/typography/typography.tsx +6 -0
package/dist/components/liveUpdateTextField/LiveUpdateTextField.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FocusEvent, KeyboardEventHandler, MouseEventHandler, Ref } from 'react';
1
+ import { CSSProperties, FocusEvent, KeyboardEventHandler, MouseEventHandler, Ref } from 'react';
2
2
  import { InputProps } from '../input/Input.js';
3
3
  export type LiveUpdateTextFieldProps = {
4
4
  value: string;
@@ -6,6 +6,7 @@ export type LiveUpdateTextFieldProps = {
6
6
  onChange: (value: string) => void;
7
7
  textArea?: boolean;
8
8
  className?: string;
9
+ style?: CSSProperties;
9
10
  onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
10
11
  onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
11
12
  autoComplete?: InputProps['autoComplete'];
package/dist/components/liveUpdateTextField/LiveUpdateTextField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"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"}
package/dist/components/typography/typography.d.ts CHANGED
@@ -31,3 +31,4 @@ export declare const H4: (props: TypographyProps) => import("react/jsx-runtime")
31
31
  * @deprecated Use Heading with appropriate render and emphasis instead
32
32
  */
33
33
  export declare const H5: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
34
+ export declare const TextLink: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/typography/typography.js CHANGED
@@ -69,4 +69,9 @@ export const H5 = withProps(Heading, {
69
69
  render: _jsx("h5", {}),
70
70
  emphasis: 'ambient',
71
71
  });
72
+ export const TextLink = withProps(Text, {
73
+ render: _jsx("a", {}),
74
+ bold: true,
75
+ underline: true,
76
+ });
72
77
  //# sourceMappingURL=typography.js.map
package/dist/components/typography/typography.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAW1C,MAAM,UAAU,IAAI,CAAC,EAUH;QAVG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,OAEa,EADd,IAAI,cATa,2FAUpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;YACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACjC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACvC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC7B;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC"}
1
+ {"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAW1C,MAAM,UAAU,IAAI,CAAC,EAUH;QAVG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,OAEa,EADd,IAAI,cATa,2FAUpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;YACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACjC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACvC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC7B;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE;IACvC,MAAM,EAAE,aAAK;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;CACf,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.9",
3
+ "version": "6.0.10",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx CHANGED
@@ -1,133 +1,135 @@
1
- 'use client';
2
-
3
- import { debounce } from '@a-type/utils';
4
- import {
5
- FocusEvent,
6
- KeyboardEventHandler,
7
- MouseEventHandler,
8
- Ref,
9
- useCallback,
10
- useEffect,
11
- useMemo,
12
- useRef,
13
- useState,
14
- } from 'react';
15
- import { Input, InputProps } from '../input/Input.js';
16
- import { TextArea } from '../textArea/TextArea.js';
17
-
18
- export type LiveUpdateTextFieldProps = {
19
- value: string;
20
- debounceMs?: number;
21
- onChange: (value: string) => void;
22
- textArea?: boolean;
23
- className?: string;
24
- onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
25
- onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
26
- autoComplete?: InputProps['autoComplete'];
27
- autoFocus?: InputProps['autoFocus'];
28
- autoSelect?: InputProps['autoSelect'];
29
- required?: boolean;
30
- placeholder?: string;
31
- type?: InputProps['type'];
32
- id?: string;
33
- onKeyDown?: KeyboardEventHandler;
34
- onKeyUp?: KeyboardEventHandler;
35
- onClick?: MouseEventHandler;
36
- ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
37
- };
38
-
39
- /**
40
- * An extension of TextField which keeps a local realtime value in state and
41
- * periodically reports changes to the parent. Use this to connect
42
- * to the API and update a value from the field directly.
43
- *
44
- * This component is optimistic and will not respond to external changes while focused.
45
- */
46
- export const LiveUpdateTextField = function LiveUpdateTextField({
47
- ref,
48
- value,
49
- onChange,
50
- debounceMs = 500,
51
- onFocus,
52
- onBlur,
53
- textArea,
54
- type,
55
- ...rest
56
- }: LiveUpdateTextFieldProps) {
57
- const [displayValue, setDisplayValue] = useState(value || '');
58
- const ignoreUpdates = useRef(false);
59
- const didChange = useRef(false);
60
-
61
- const handleFocus = useCallback(
62
- (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
63
- onFocus?.(ev);
64
- ignoreUpdates.current = true;
65
- },
66
- [onFocus],
67
- );
68
-
69
- const handleBlur = useCallback(
70
- (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
71
- onBlur?.(ev);
72
- ignoreUpdates.current = false;
73
- // immediately send update if the user typed anything.
74
- // otherwise pull the latest remote value
75
- if (didChange.current) {
76
- onChange?.(displayValue);
77
- } else {
78
- setDisplayValue(value || '');
79
- }
80
- didChange.current = false;
81
- },
82
- [onBlur, displayValue, onChange, value],
83
- );
84
-
85
- useEffect(() => {
86
- if (ignoreUpdates.current) {
87
- return;
88
- }
89
- setDisplayValue(value || '');
90
- }, [value]);
91
-
92
- // every once in a while, send an update to parent
93
- const debouncedOnChange = useMemo(
94
- () => debounce(onChange || (() => {}), debounceMs),
95
- [onChange, debounceMs],
96
- );
97
-
98
- // update local state instantly and parent eventually
99
- const handleValueChange = useCallback(
100
- (value: string) => {
101
- setDisplayValue(value);
102
- debouncedOnChange(value);
103
- didChange.current = true;
104
- },
105
- [debouncedOnChange],
106
- );
107
-
108
- if (textArea) {
109
- return (
110
- <TextArea
111
- ref={ref as any}
112
- onFocus={handleFocus}
113
- onBlur={handleBlur}
114
- value={displayValue}
115
- onValueChange={handleValueChange}
116
- autoSize
117
- {...rest}
118
- />
119
- );
120
- } else {
121
- return (
122
- <Input
123
- ref={ref as any}
124
- onFocus={handleFocus}
125
- onBlur={handleBlur}
126
- value={displayValue}
127
- onValueChange={handleValueChange}
128
- type={type}
129
- {...rest}
130
- />
131
- );
132
- }
133
- };
1
+ 'use client';
2
+
3
+ import { debounce } from '@a-type/utils';
4
+ import {
5
+ CSSProperties,
6
+ FocusEvent,
7
+ KeyboardEventHandler,
8
+ MouseEventHandler,
9
+ Ref,
10
+ useCallback,
11
+ useEffect,
12
+ useMemo,
13
+ useRef,
14
+ useState,
15
+ } from 'react';
16
+ import { Input, InputProps } from '../input/Input.js';
17
+ import { TextArea } from '../textArea/TextArea.js';
18
+
19
+ export type LiveUpdateTextFieldProps = {
20
+ value: string;
21
+ debounceMs?: number;
22
+ onChange: (value: string) => void;
23
+ textArea?: boolean;
24
+ className?: string;
25
+ style?: CSSProperties;
26
+ onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
27
+ onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
28
+ autoComplete?: InputProps['autoComplete'];
29
+ autoFocus?: InputProps['autoFocus'];
30
+ autoSelect?: InputProps['autoSelect'];
31
+ required?: boolean;
32
+ placeholder?: string;
33
+ type?: InputProps['type'];
34
+ id?: string;
35
+ onKeyDown?: KeyboardEventHandler;
36
+ onKeyUp?: KeyboardEventHandler;
37
+ onClick?: MouseEventHandler;
38
+ ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
39
+ };
40
+
41
+ /**
42
+ * An extension of TextField which keeps a local realtime value in state and
43
+ * periodically reports changes to the parent. Use this to connect
44
+ * to the API and update a value from the field directly.
45
+ *
46
+ * This component is optimistic and will not respond to external changes while focused.
47
+ */
48
+ export const LiveUpdateTextField = function LiveUpdateTextField({
49
+ ref,
50
+ value,
51
+ onChange,
52
+ debounceMs = 500,
53
+ onFocus,
54
+ onBlur,
55
+ textArea,
56
+ type,
57
+ ...rest
58
+ }: LiveUpdateTextFieldProps) {
59
+ const [displayValue, setDisplayValue] = useState(value || '');
60
+ const ignoreUpdates = useRef(false);
61
+ const didChange = useRef(false);
62
+
63
+ const handleFocus = useCallback(
64
+ (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
65
+ onFocus?.(ev);
66
+ ignoreUpdates.current = true;
67
+ },
68
+ [onFocus],
69
+ );
70
+
71
+ const handleBlur = useCallback(
72
+ (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
73
+ onBlur?.(ev);
74
+ ignoreUpdates.current = false;
75
+ // immediately send update if the user typed anything.
76
+ // otherwise pull the latest remote value
77
+ if (didChange.current) {
78
+ onChange?.(displayValue);
79
+ } else {
80
+ setDisplayValue(value || '');
81
+ }
82
+ didChange.current = false;
83
+ },
84
+ [onBlur, displayValue, onChange, value],
85
+ );
86
+
87
+ useEffect(() => {
88
+ if (ignoreUpdates.current) {
89
+ return;
90
+ }
91
+ setDisplayValue(value || '');
92
+ }, [value]);
93
+
94
+ // every once in a while, send an update to parent
95
+ const debouncedOnChange = useMemo(
96
+ () => debounce(onChange || (() => {}), debounceMs),
97
+ [onChange, debounceMs],
98
+ );
99
+
100
+ // update local state instantly and parent eventually
101
+ const handleValueChange = useCallback(
102
+ (value: string) => {
103
+ setDisplayValue(value);
104
+ debouncedOnChange(value);
105
+ didChange.current = true;
106
+ },
107
+ [debouncedOnChange],
108
+ );
109
+
110
+ if (textArea) {
111
+ return (
112
+ <TextArea
113
+ ref={ref as any}
114
+ onFocus={handleFocus}
115
+ onBlur={handleBlur}
116
+ value={displayValue}
117
+ onValueChange={handleValueChange}
118
+ autoSize
119
+ {...rest}
120
+ />
121
+ );
122
+ } else {
123
+ return (
124
+ <Input
125
+ ref={ref as any}
126
+ onFocus={handleFocus}
127
+ onBlur={handleBlur}
128
+ value={displayValue}
129
+ onValueChange={handleValueChange}
130
+ type={type}
131
+ {...rest}
132
+ />
133
+ );
134
+ }
135
+ };
package/src/components/typography/typography.tsx CHANGED
@@ -81,3 +81,9 @@ export const H5 = withProps(Heading, {
81
81
  render: <h5 />,
82
82
  emphasis: 'ambient',
83
83
  });
84
+
85
+ export const TextLink = withProps(Text, {
86
+ render: <a />,
87
+ bold: true,
88
+ underline: true,
89
+ });