@bsky.app/sift 0.2.10 → 0.2.11
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/CHANGELOG.md +6 -0
- package/build/useSift.d.ts +2 -1
- package/build/useSift.d.ts.map +1 -1
- package/build/useSift.js +2 -2
- package/build/useSift.js.map +1 -1
- package/package.json +1 -1
- package/src/useSift.ts +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @bsky.app/sift
|
|
2
2
|
|
|
3
|
+
## 0.2.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`612788d`](https://github.com/bluesky-social/toolbox/commit/612788d5c256fb647a096b0dfc63f37f6e612dff) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Allow passing in an anchorRef to useSift
|
|
8
|
+
|
|
3
9
|
## 0.2.10
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/build/useSift.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ViewStyle } from 'react-native';
|
|
2
2
|
export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
|
|
3
3
|
export type UseSiftReturn = ReturnType<typeof useSift>;
|
|
4
|
-
export declare function useSift({ offset: offsetValue, placement, dynamicWidth, insets, }?: {
|
|
4
|
+
export declare function useSift({ offset: offsetValue, placement, dynamicWidth, insets, anchorRef: externalAnchorRef, }?: {
|
|
5
5
|
offset?: number;
|
|
6
6
|
placement?: Placement;
|
|
7
7
|
dynamicWidth?: boolean;
|
|
@@ -9,6 +9,7 @@ export declare function useSift({ offset: offsetValue, placement, dynamicWidth,
|
|
|
9
9
|
top: number;
|
|
10
10
|
bottom: number;
|
|
11
11
|
};
|
|
12
|
+
anchorRef?: React.RefObject<any>;
|
|
12
13
|
}): {
|
|
13
14
|
id: string;
|
|
14
15
|
refs: {
|
package/build/useSift.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSift.d.ts","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAK3C,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CAAA;AAEhB,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAA;AAEtD,wBAAgB,OAAO,CAAC,EACtB,MAAM,EAAE,WAAe,EACvB,SAAoB,EACpB,YAAoB,EACpB,MAAM,
|
|
1
|
+
{"version":3,"file":"useSift.d.ts","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAK3C,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CAAA;AAEhB,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAA;AAEtD,wBAAgB,OAAO,CAAC,EACtB,MAAM,EAAE,WAAe,EACvB,SAAoB,EACpB,YAAoB,EACpB,MAAM,EACN,SAAS,EAAE,iBAAiB,GAC7B,GAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;IACtC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;CAC5B;;;2BAmDK,GAAG;0BAaH,GAAG;;;;;;;;;;oBAnB8B,GAAG;;;;;;EAiD9C"}
|
package/build/useSift.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useCallback, useId, useRef, useState } from 'react';
|
|
2
2
|
import { computeStyles } from './computeStyles';
|
|
3
3
|
const DEFAULT_POPOVER_STYLES = { position: 'absolute' };
|
|
4
|
-
export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamicWidth = false, insets, } = {}) {
|
|
4
|
+
export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamicWidth = false, insets, anchorRef: externalAnchorRef, } = {}) {
|
|
5
5
|
const id = useId();
|
|
6
6
|
/*
|
|
7
7
|
* These are reactive values and need to remain in state
|
|
@@ -15,7 +15,7 @@ export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamic
|
|
|
15
15
|
*/
|
|
16
16
|
const inputRef = useRef(null);
|
|
17
17
|
const popoverRef = useRef(null);
|
|
18
|
-
const anchorRef = useRef(null);
|
|
18
|
+
const anchorRef = useRef(externalAnchorRef?.current || null);
|
|
19
19
|
const options = useRef({
|
|
20
20
|
offset: offsetValue,
|
|
21
21
|
placement,
|
package/build/useSift.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSift.js","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAA;AAE7C,MAAM,sBAAsB,GAAc,EAAC,QAAQ,EAAE,UAAU,EAAC,CAAA;AAYhE,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,EAAE,WAAW,GAAG,CAAC,EACvB,SAAS,GAAG,QAAQ,EACpB,YAAY,GAAG,KAAK,EACpB,MAAM,
|
|
1
|
+
{"version":3,"file":"useSift.js","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAA;AAE7C,MAAM,sBAAsB,GAAc,EAAC,QAAQ,EAAE,UAAU,EAAC,CAAA;AAYhE,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,EAAE,WAAW,GAAG,CAAC,EACvB,SAAS,GAAG,QAAQ,EACpB,YAAY,GAAG,KAAK,EACpB,MAAM,EACN,SAAS,EAAE,iBAAiB,MAO1B,EAAE;IACJ,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAElB;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAM,IAAI,CAAC,CAAA;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAM,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,sBAAsB,CACvB,CAAA;IAED;;;OAGG;IACH,MAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAA;IAClC,MAAM,UAAU,GAAG,MAAM,CAAM,IAAI,CAAC,CAAA;IACpC,MAAM,SAAS,GAAG,MAAM,CAAM,iBAAiB,EAAE,OAAO,IAAI,IAAI,CAAC,CAAA;IACjE,MAAM,OAAO,GAAG,MAAM,CAAC;QACrB,MAAM,EAAE,WAAW;QACnB,SAAS;QACT,YAAY;QACZ,MAAM;KACP,CAAC,CAAA;IACF,OAAO,CAAC,OAAO,GAAG;QAChB,MAAM,EAAE,WAAW;QACnB,SAAS;QACT,YAAY;QACZ,MAAM;KACP,CAAA;IAED,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpC,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAM;QACpD,MAAM,MAAM,GAAG,MAAM,aAAa,CAChC;YACE,MAAM,EAAE,SAAS,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO;YAC7C,KAAK,EAAE,QAAQ,CAAC,OAAO;YACvB,OAAO,EAAE,UAAU,CAAC,OAAO;SAC5B,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;QACD,IAAI,MAAM;YAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,IAAS,EAAE,EAAE;QAC/C,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;QACvB,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAS,EAAE,EAAE;QACZ,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;QACzB,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,EAAE,CAAA;QACV,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,sBAAsB,CAAC,CAAA;QAC1C,CAAC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,IAAS,EAAE,EAAE;QACZ,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;QACxB,IAAI,IAAI;YAAE,MAAM,EAAE,CAAA;IACpB,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IAED,OAAO;QACL,EAAE;QACF,IAAI,EAAE;YACJ,UAAU,EAAE,gBAAgB;YAC5B,SAAS,EAAE,eAAe;SAC3B;QACD,QAAQ,EAAE;YACR,KAAK;YACL,OAAO;SACR;QACD,QAAQ;YACN,OAAO,CAAC,CAAC,OAAO,CAAA;QAClB,CAAC;QACD,aAAa;QACb,cAAc,EAAE,MAAM;QACtB,WAAW,EAAE;YACX,GAAG,EAAE,cAAc;YACnB,IAAI,EAAE,UAAmB;YACzB,eAAe,EAAE,EAAE;YACnB,eAAe,EAAE,CAAC,CAAC,OAAO;YAC1B,mBAAmB,EAAE,MAAe;SACrC;KACF,CAAA;AACH,CAAC","sourcesContent":["import {useCallback, useId, useRef, useState} from 'react'\nimport {type ViewStyle} from 'react-native'\nimport {computeStyles} from './computeStyles'\n\nconst DEFAULT_POPOVER_STYLES: ViewStyle = {position: 'absolute'}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n\nexport type UseSiftReturn = ReturnType<typeof useSift>\n\nexport function useSift({\n offset: offsetValue = 0,\n placement = 'bottom',\n dynamicWidth = false,\n insets,\n anchorRef: externalAnchorRef,\n}: {\n offset?: number\n placement?: Placement\n dynamicWidth?: boolean\n insets?: {top: number; bottom: number}\n anchorRef?: React.RefObject<any>\n} = {}) {\n const id = useId()\n\n /*\n * These are reactive values and need to remain in state\n */\n const [input, setInput] = useState<any>(null)\n const [popover, setPopover] = useState<any>(null)\n const [popoverStyles, setPopoverStyles] = useState<ViewStyle>(\n DEFAULT_POPOVER_STYLES,\n )\n\n /*\n * These are non-reactive values that we want to persist across renders\n * without causing re-renders when they change, so we store them in refs.\n */\n const inputRef = useRef<any>(null)\n const popoverRef = useRef<any>(null)\n const anchorRef = useRef<any>(externalAnchorRef?.current || null)\n const options = useRef({\n offset: offsetValue,\n placement,\n dynamicWidth,\n insets,\n })\n options.current = {\n offset: offsetValue,\n placement,\n dynamicWidth,\n insets,\n }\n\n const update = useCallback(async () => {\n if (!inputRef.current || !popoverRef.current) return\n const styles = await computeStyles(\n {\n anchor: anchorRef.current || inputRef.current,\n input: inputRef.current,\n popover: popoverRef.current,\n },\n options.current,\n )\n if (styles) setPopoverStyles(styles)\n }, [])\n\n const handleSetInput = useCallback((node: any) => {\n inputRef.current = node\n setInput(node)\n }, [])\n\n const handleSetPopover = useCallback(\n (node: any) => {\n popoverRef.current = node\n setPopover(node)\n if (node) {\n update()\n } else {\n setPopoverStyles(DEFAULT_POPOVER_STYLES)\n }\n },\n [update],\n )\n\n const handleSetAnchor = useCallback(\n (node: any) => {\n anchorRef.current = node\n if (node) update()\n },\n [update],\n )\n\n return {\n id,\n refs: {\n setPopover: handleSetPopover,\n setAnchor: handleSetAnchor,\n },\n elements: {\n input,\n popover,\n },\n isActive() {\n return !!popover\n },\n popoverStyles,\n updatePosition: update,\n targetProps: {\n ref: handleSetInput,\n role: 'combobox' as const,\n 'aria-controls': id,\n 'aria-expanded': !!popover,\n 'aria-autocomplete': 'list' as const,\n },\n }\n}\n"]}
|
package/package.json
CHANGED
package/src/useSift.ts
CHANGED
|
@@ -19,11 +19,13 @@ export function useSift({
|
|
|
19
19
|
placement = 'bottom',
|
|
20
20
|
dynamicWidth = false,
|
|
21
21
|
insets,
|
|
22
|
+
anchorRef: externalAnchorRef,
|
|
22
23
|
}: {
|
|
23
24
|
offset?: number
|
|
24
25
|
placement?: Placement
|
|
25
26
|
dynamicWidth?: boolean
|
|
26
27
|
insets?: {top: number; bottom: number}
|
|
28
|
+
anchorRef?: React.RefObject<any>
|
|
27
29
|
} = {}) {
|
|
28
30
|
const id = useId()
|
|
29
31
|
|
|
@@ -42,7 +44,7 @@ export function useSift({
|
|
|
42
44
|
*/
|
|
43
45
|
const inputRef = useRef<any>(null)
|
|
44
46
|
const popoverRef = useRef<any>(null)
|
|
45
|
-
const anchorRef = useRef<any>(null)
|
|
47
|
+
const anchorRef = useRef<any>(externalAnchorRef?.current || null)
|
|
46
48
|
const options = useRef({
|
|
47
49
|
offset: offsetValue,
|
|
48
50
|
placement,
|