@ark-ui/react 3.11.0 → 3.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,47 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
5
|
|
|
6
|
+
const highlightWord = require('@zag-js/highlight-word');
|
|
6
7
|
const react = require('react');
|
|
7
8
|
|
|
8
|
-
const escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
|
|
9
|
-
const buildRegex = (queryProp, flags) => {
|
|
10
|
-
const query = queryProp.filter(Boolean).map((text) => escapeRegexp(text));
|
|
11
|
-
return new RegExp(`(${query.join("|")})`, flags);
|
|
12
|
-
};
|
|
13
|
-
const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? "i" : ""}${matchAll ? "g" : ""}`;
|
|
14
|
-
const normalizeSpan = (spans, len) => {
|
|
15
|
-
const result = [];
|
|
16
|
-
const append = (start, end, match) => {
|
|
17
|
-
if (end - start > 0) result.push({ start, end, match });
|
|
18
|
-
};
|
|
19
|
-
if (spans.length === 0) {
|
|
20
|
-
append(0, len, false);
|
|
21
|
-
} else {
|
|
22
|
-
let lastIndex = 0;
|
|
23
|
-
for (const chunk of spans) {
|
|
24
|
-
append(lastIndex, chunk.start, false);
|
|
25
|
-
append(chunk.start, chunk.end, true);
|
|
26
|
-
lastIndex = chunk.end;
|
|
27
|
-
}
|
|
28
|
-
append(lastIndex, len, false);
|
|
29
|
-
}
|
|
30
|
-
return result;
|
|
31
|
-
};
|
|
32
|
-
const highlightWords = (props) => {
|
|
33
|
-
const flags = getRegexFlags(props.ignoreCase, props.matchAll);
|
|
34
|
-
const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
|
|
35
|
-
const spans = [...props.text.matchAll(regex)].map((match) => ({
|
|
36
|
-
start: match.index || 0,
|
|
37
|
-
end: (match.index || 0) + match[0].length
|
|
38
|
-
}));
|
|
39
|
-
return normalizeSpan(spans, props.text.length).map((chunk) => ({
|
|
40
|
-
text: props.text.slice(chunk.start, chunk.end),
|
|
41
|
-
match: !!chunk.match
|
|
42
|
-
}));
|
|
43
|
-
};
|
|
44
9
|
const useHighlight = (props) => {
|
|
45
|
-
|
|
46
|
-
return react.useMemo(() => highlightWords({ text, query }), [text, query]);
|
|
10
|
+
return react.useMemo(() => highlightWord.highlightWord(props), [props]);
|
|
47
11
|
};
|
|
48
12
|
|
|
49
13
|
exports.useHighlight = useHighlight;
|
|
@@ -1,30 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
* Whether to ignore case while matching
|
|
4
|
-
*/
|
|
5
|
-
ignoreCase?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* Whether to match multiple instances of the query
|
|
8
|
-
*/
|
|
9
|
-
matchAll?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export interface UseHighlightProps extends RegexOptions {
|
|
12
|
-
/**
|
|
13
|
-
* The text to highlight
|
|
14
|
-
*/
|
|
15
|
-
text: string;
|
|
16
|
-
/**
|
|
17
|
-
* The query to highlight in the text
|
|
18
|
-
*/
|
|
19
|
-
query: string | string[];
|
|
20
|
-
}
|
|
21
|
-
export interface HighlightChunk {
|
|
22
|
-
text: string;
|
|
23
|
-
match: boolean;
|
|
24
|
-
}
|
|
25
|
-
export interface HighlightSpan {
|
|
26
|
-
start: number;
|
|
27
|
-
end: number;
|
|
28
|
-
match?: boolean;
|
|
1
|
+
import { HighlightChunk, HighlightWordProps } from '@zag-js/highlight-word';
|
|
2
|
+
export interface UseHighlightProps extends HighlightWordProps {
|
|
29
3
|
}
|
|
30
4
|
export declare const useHighlight: (props: UseHighlightProps) => HighlightChunk[];
|
|
5
|
+
export type { HighlightChunk };
|
|
@@ -1,30 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
* Whether to ignore case while matching
|
|
4
|
-
*/
|
|
5
|
-
ignoreCase?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* Whether to match multiple instances of the query
|
|
8
|
-
*/
|
|
9
|
-
matchAll?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export interface UseHighlightProps extends RegexOptions {
|
|
12
|
-
/**
|
|
13
|
-
* The text to highlight
|
|
14
|
-
*/
|
|
15
|
-
text: string;
|
|
16
|
-
/**
|
|
17
|
-
* The query to highlight in the text
|
|
18
|
-
*/
|
|
19
|
-
query: string | string[];
|
|
20
|
-
}
|
|
21
|
-
export interface HighlightChunk {
|
|
22
|
-
text: string;
|
|
23
|
-
match: boolean;
|
|
24
|
-
}
|
|
25
|
-
export interface HighlightSpan {
|
|
26
|
-
start: number;
|
|
27
|
-
end: number;
|
|
28
|
-
match?: boolean;
|
|
1
|
+
import { HighlightChunk, HighlightWordProps } from '@zag-js/highlight-word';
|
|
2
|
+
export interface UseHighlightProps extends HighlightWordProps {
|
|
29
3
|
}
|
|
30
4
|
export declare const useHighlight: (props: UseHighlightProps) => HighlightChunk[];
|
|
5
|
+
export type { HighlightChunk };
|
|
@@ -1,45 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { highlightWord } from '@zag-js/highlight-word';
|
|
2
3
|
import { useMemo } from 'react';
|
|
3
4
|
|
|
4
|
-
const escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
|
|
5
|
-
const buildRegex = (queryProp, flags) => {
|
|
6
|
-
const query = queryProp.filter(Boolean).map((text) => escapeRegexp(text));
|
|
7
|
-
return new RegExp(`(${query.join("|")})`, flags);
|
|
8
|
-
};
|
|
9
|
-
const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? "i" : ""}${matchAll ? "g" : ""}`;
|
|
10
|
-
const normalizeSpan = (spans, len) => {
|
|
11
|
-
const result = [];
|
|
12
|
-
const append = (start, end, match) => {
|
|
13
|
-
if (end - start > 0) result.push({ start, end, match });
|
|
14
|
-
};
|
|
15
|
-
if (spans.length === 0) {
|
|
16
|
-
append(0, len, false);
|
|
17
|
-
} else {
|
|
18
|
-
let lastIndex = 0;
|
|
19
|
-
for (const chunk of spans) {
|
|
20
|
-
append(lastIndex, chunk.start, false);
|
|
21
|
-
append(chunk.start, chunk.end, true);
|
|
22
|
-
lastIndex = chunk.end;
|
|
23
|
-
}
|
|
24
|
-
append(lastIndex, len, false);
|
|
25
|
-
}
|
|
26
|
-
return result;
|
|
27
|
-
};
|
|
28
|
-
const highlightWords = (props) => {
|
|
29
|
-
const flags = getRegexFlags(props.ignoreCase, props.matchAll);
|
|
30
|
-
const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
|
|
31
|
-
const spans = [...props.text.matchAll(regex)].map((match) => ({
|
|
32
|
-
start: match.index || 0,
|
|
33
|
-
end: (match.index || 0) + match[0].length
|
|
34
|
-
}));
|
|
35
|
-
return normalizeSpan(spans, props.text.length).map((chunk) => ({
|
|
36
|
-
text: props.text.slice(chunk.start, chunk.end),
|
|
37
|
-
match: !!chunk.match
|
|
38
|
-
}));
|
|
39
|
-
};
|
|
40
5
|
const useHighlight = (props) => {
|
|
41
|
-
|
|
42
|
-
return useMemo(() => highlightWords({ text, query }), [text, query]);
|
|
6
|
+
return useMemo(() => highlightWord(props), [props]);
|
|
43
7
|
};
|
|
44
8
|
|
|
45
9
|
export { useHighlight };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ark-ui/react",
|
|
3
|
-
"version": "3.11.
|
|
3
|
+
"version": "3.11.1",
|
|
4
4
|
"description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accordion",
|
|
@@ -131,52 +131,53 @@
|
|
|
131
131
|
"sideEffects": false,
|
|
132
132
|
"dependencies": {
|
|
133
133
|
"@internationalized/date": "3.5.5",
|
|
134
|
-
"@zag-js/accordion": "0.
|
|
135
|
-
"@zag-js/anatomy": "0.
|
|
136
|
-
"@zag-js/avatar": "0.
|
|
137
|
-
"@zag-js/carousel": "0.
|
|
138
|
-
"@zag-js/checkbox": "0.
|
|
139
|
-
"@zag-js/clipboard": "0.
|
|
140
|
-
"@zag-js/collapsible": "0.
|
|
141
|
-
"@zag-js/color-picker": "0.
|
|
142
|
-
"@zag-js/color-utils": "0.
|
|
143
|
-
"@zag-js/combobox": "0.
|
|
144
|
-
"@zag-js/core": "0.
|
|
145
|
-
"@zag-js/date-picker": "0.
|
|
146
|
-
"@zag-js/date-utils": "0.
|
|
147
|
-
"@zag-js/dialog": "0.
|
|
148
|
-
"@zag-js/dom-query": "0.
|
|
149
|
-
"@zag-js/editable": "0.
|
|
150
|
-
"@zag-js/file-upload": "0.
|
|
151
|
-
"@zag-js/file-utils": "0.
|
|
152
|
-
"@zag-js/
|
|
153
|
-
"@zag-js/
|
|
154
|
-
"@zag-js/
|
|
155
|
-
"@zag-js/
|
|
156
|
-
"@zag-js/
|
|
157
|
-
"@zag-js/
|
|
158
|
-
"@zag-js/
|
|
159
|
-
"@zag-js/
|
|
160
|
-
"@zag-js/
|
|
161
|
-
"@zag-js/
|
|
162
|
-
"@zag-js/
|
|
163
|
-
"@zag-js/
|
|
164
|
-
"@zag-js/
|
|
165
|
-
"@zag-js/
|
|
166
|
-
"@zag-js/
|
|
167
|
-
"@zag-js/
|
|
168
|
-
"@zag-js/
|
|
169
|
-
"@zag-js/
|
|
170
|
-
"@zag-js/
|
|
171
|
-
"@zag-js/
|
|
172
|
-
"@zag-js/
|
|
173
|
-
"@zag-js/
|
|
174
|
-
"@zag-js/
|
|
175
|
-
"@zag-js/
|
|
176
|
-
"@zag-js/
|
|
177
|
-
"@zag-js/
|
|
178
|
-
"@zag-js/
|
|
179
|
-
"@zag-js/
|
|
134
|
+
"@zag-js/accordion": "0.67.0",
|
|
135
|
+
"@zag-js/anatomy": "0.67.0",
|
|
136
|
+
"@zag-js/avatar": "0.67.0",
|
|
137
|
+
"@zag-js/carousel": "0.67.0",
|
|
138
|
+
"@zag-js/checkbox": "0.67.0",
|
|
139
|
+
"@zag-js/clipboard": "0.67.0",
|
|
140
|
+
"@zag-js/collapsible": "0.67.0",
|
|
141
|
+
"@zag-js/color-picker": "0.67.0",
|
|
142
|
+
"@zag-js/color-utils": "0.67.0",
|
|
143
|
+
"@zag-js/combobox": "0.67.0",
|
|
144
|
+
"@zag-js/core": "0.67.0",
|
|
145
|
+
"@zag-js/date-picker": "0.67.0",
|
|
146
|
+
"@zag-js/date-utils": "0.67.0",
|
|
147
|
+
"@zag-js/dialog": "0.67.0",
|
|
148
|
+
"@zag-js/dom-query": "0.67.0",
|
|
149
|
+
"@zag-js/editable": "0.67.0",
|
|
150
|
+
"@zag-js/file-upload": "0.67.0",
|
|
151
|
+
"@zag-js/file-utils": "0.67.0",
|
|
152
|
+
"@zag-js/highlight-word": "0.67.0",
|
|
153
|
+
"@zag-js/hover-card": "0.67.0",
|
|
154
|
+
"@zag-js/i18n-utils": "0.67.0",
|
|
155
|
+
"@zag-js/menu": "0.67.0",
|
|
156
|
+
"@zag-js/number-input": "0.67.0",
|
|
157
|
+
"@zag-js/pagination": "0.67.0",
|
|
158
|
+
"@zag-js/pin-input": "0.67.0",
|
|
159
|
+
"@zag-js/popover": "0.67.0",
|
|
160
|
+
"@zag-js/presence": "0.67.0",
|
|
161
|
+
"@zag-js/progress": "0.67.0",
|
|
162
|
+
"@zag-js/qr-code": "0.67.0",
|
|
163
|
+
"@zag-js/radio-group": "0.67.0",
|
|
164
|
+
"@zag-js/rating-group": "0.67.0",
|
|
165
|
+
"@zag-js/react": "0.67.0",
|
|
166
|
+
"@zag-js/select": "0.67.0",
|
|
167
|
+
"@zag-js/signature-pad": "0.67.0",
|
|
168
|
+
"@zag-js/slider": "0.67.0",
|
|
169
|
+
"@zag-js/splitter": "0.67.0",
|
|
170
|
+
"@zag-js/steps": "0.67.0",
|
|
171
|
+
"@zag-js/switch": "0.67.0",
|
|
172
|
+
"@zag-js/tabs": "0.67.0",
|
|
173
|
+
"@zag-js/tags-input": "0.67.0",
|
|
174
|
+
"@zag-js/time-picker": "0.67.0",
|
|
175
|
+
"@zag-js/timer": "0.67.0",
|
|
176
|
+
"@zag-js/toast": "0.67.0",
|
|
177
|
+
"@zag-js/toggle-group": "0.67.0",
|
|
178
|
+
"@zag-js/tooltip": "0.67.0",
|
|
179
|
+
"@zag-js/tree-view": "0.67.0",
|
|
180
|
+
"@zag-js/types": "0.67.0"
|
|
180
181
|
},
|
|
181
182
|
"devDependencies": {
|
|
182
183
|
"@biomejs/biome": "1.8.3",
|
|
@@ -193,7 +194,7 @@
|
|
|
193
194
|
"@types/react": "18.3.5",
|
|
194
195
|
"@types/react-dom": "18.3.0",
|
|
195
196
|
"@vitejs/plugin-react": "4.3.1",
|
|
196
|
-
"@zag-js/stringify-state": "0.
|
|
197
|
+
"@zag-js/stringify-state": "0.67.0",
|
|
197
198
|
"globby": "14.0.2",
|
|
198
199
|
"jsdom": "25.0.0",
|
|
199
200
|
"lucide-react": "0.439.0",
|