@vicinae/api 0.20.14 → 0.21.0

package/dist/api/components/form.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = exports.DatePickerType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const use_imperative_form_handle_1 = require("../hooks/use-imperative-form-handle");
+const use_event_counted_1 = require("../hooks/use-event-counted");
 const image_1 = require("../image");
 const dropdown_1 = require("./dropdown");
 const wrapFormItemProps = (props) => {
@@ -29,13 +30,15 @@ const FormRoot = ({ enableDrafts = false, actions, children, isLoading = false,
         //@ts-ignore
         enableDrafts: enableDrafts, isLoading: isLoading, navigationTitle: navigationTitle, children: [searchBarAccessory, children, actions] }));
 };
-const TextField = ({ ref, ...props }) => {
+const TextField = ({ ref, value, onChange, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
-    return (0, jsx_runtime_1.jsx)("text-field", { ...wrapFormItemProps(props) });
+    const [countedValue, wrappedOnChange] = (0, use_event_counted_1.useEventCounted)(value, onChange);
+    return (0, jsx_runtime_1.jsx)("text-field", { ...wrapFormItemProps(props), value: countedValue, onChange: wrappedOnChange });
 };
-const PasswordField = ({ ref, ...props }) => {
+const PasswordField = ({ ref, value, onChange, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
-    return (0, jsx_runtime_1.jsx)("password-field", { ...props });
+    const [countedValue, wrappedOnChange] = (0, use_event_counted_1.useEventCounted)(value, onChange);
+    return (0, jsx_runtime_1.jsx)("password-field", { ...props, value: countedValue, onChange: wrappedOnChange });
 };
 var DatePickerType;
 (function (DatePickerType) {
@@ -88,9 +91,10 @@ const TagPickerItem = ({ icon, ...props }) => {
 const TagPicker = Object.assign(TagPickerRoot, {
     Item: TagPickerItem,
 });
-const TextArea = ({ ref, ...props }) => {
+const TextArea = ({ ref, value, onChange, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
-    return (0, jsx_runtime_1.jsx)("text-area-field", { ...wrapFormItemProps(props) });
+    const [countedValue, wrappedOnChange] = (0, use_event_counted_1.useEventCounted)(value, onChange);
+    return (0, jsx_runtime_1.jsx)("text-area-field", { ...wrapFormItemProps(props), value: countedValue, onChange: wrappedOnChange });
 };
 const FilePicker = ({ ref, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);

package/dist/api/components/grid.js

@@ -8,6 +8,7 @@ const crypto_1 = require("crypto");
 const empty_view_1 = require("./empty-view");
 const color_1 = require("../color");
 const dropdown_1 = require("./dropdown");
+const use_event_counted_1 = require("../hooks/use-event-counted");
 var GridInset;
 (function (GridInset) {
     GridInset["Zero"] = "zero";
@@ -52,7 +53,7 @@ var GridFit;
      */
     GridFit["Fill"] = "fill";
 })(GridFit || (GridFit = {}));
-const GridRoot = ({ searchBarAccessory, children, actions, inset, itemSize, fit = GridFit.Contain, aspectRatio = "1", ...props }) => {
+const GridRoot = ({ searchBarAccessory, children, actions, inset, itemSize, fit = GridFit.Contain, aspectRatio = "1", searchText, onSearchTextChange, ...props }) => {
     if (typeof props.enableFiltering === "boolean" &&
         typeof props.filtering === "undefined") {
         props.filtering = props.enableFiltering;
@@ -64,7 +65,8 @@ const GridRoot = ({ searchBarAccessory, children, actions, inset, itemSize, fit
             [GridItemSize.Large]: 3,
         }[itemSize];
     }
-    return ((0, jsx_runtime_1.jsxs)("grid", { fit: fit, inset: inset, aspectRatio: aspectRatioMap[aspectRatio], ...props, children: [searchBarAccessory, children, actions] }));
+    const [countedSearchText, wrappedOnSearchTextChange] = (0, use_event_counted_1.useEventCounted)(searchText, onSearchTextChange);
+    return ((0, jsx_runtime_1.jsxs)("grid", { fit: fit, inset: inset, aspectRatio: aspectRatioMap[aspectRatio], searchText: countedSearchText, onSearchTextChange: wrappedOnSearchTextChange, ...props, children: [searchBarAccessory, children, actions] }));
 };
 const GridItem = ({ detail, actions, content, accessory, ...props }) => {
     const id = (0, react_1.useRef)(props.id ?? (0, crypto_1.randomUUID)());

package/dist/api/components/list.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_event_counted_1 = require("../hooks/use-event-counted");
 const image_1 = require("../image");
 const node_crypto_1 = require("node:crypto");
 const metadata_1 = require("./metadata");
@@ -41,12 +42,13 @@ function serializeText(text) {
         return { color, value };
     }
 }
-const ListRoot = ({ searchBarAccessory, children, actions, ...props }) => {
+const ListRoot = ({ searchBarAccessory, children, actions, searchText, onSearchTextChange, ...props }) => {
     if (typeof props.enableFiltering === "boolean" &&
         typeof props.filtering === "undefined") {
         props.filtering = props.enableFiltering;
     }
-    return ((0, jsx_runtime_1.jsxs)("list", { ...props, children: [searchBarAccessory, children, actions] }));
+    const [countedSearchText, wrappedOnSearchTextChange] = (0, use_event_counted_1.useEventCounted)(searchText, onSearchTextChange);
+    return ((0, jsx_runtime_1.jsxs)("list", { ...props, searchText: countedSearchText, onSearchTextChange: wrappedOnSearchTextChange, children: [searchBarAccessory, children, actions] }));
 };
 const ListItem = ({ detail, actions, icon, accessories, ...props }) => {
     const id = (0, react_1.useRef)(props.id ?? (0, node_crypto_1.randomUUID)());

package/dist/api/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from "./use-event-counted";
 export * from "./use-navigation";

package/dist/api/hooks/index.js

@@ -14,4 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-event-counted"), exports);
 __exportStar(require("./use-navigation"), exports);

package/dist/api/hooks/use-event-counted.d.ts

@@ -0,0 +1,5 @@
+export type EventCounted<T> = {
+    value: T;
+    eventCount: number;
+};
+export declare function useEventCounted<T>(value: T | undefined, onChange?: (value: T) => void): [EventCounted<T> | undefined, ((...args: any[]) => void) | undefined];

package/dist/api/hooks/use-event-counted.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEventCounted = useEventCounted;
+const react_1 = require("react");
+function useEventCounted(value, onChange) {
+    const ref = (0, react_1.useRef)(0);
+    const handler = (0, react_1.useCallback)((...args) => {
+        if (typeof args[1] === "number")
+            ref.current = args[1];
+        onChange?.(args[0]);
+    }, [onChange]);
+    const counted = value != null ? { value, eventCount: ref.current } : undefined;
+    return [counted, onChange ? handler : undefined];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vicinae/api",
-	"version": "0.20.14",
+	"version": "0.21.0",
 	"description": "TypeScript SDK to build Vicinae extensions",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

package/types/jsx.d.ts

@@ -1,6 +1,7 @@
 import type * as React from "react";
 import type {
 	DatePickerType,
+	EventCounted,
 	Grid,
 	Keyboard,
 	List,
@@ -13,6 +14,7 @@ type BaseFormField = {
 	onBlur?: Function;
 	onFocus?: Function;
 	onChange?: Function;
+	value?: any;
 };
 
 declare module "react" {
@@ -30,9 +32,10 @@ declare module "react" {
 				filtering?: boolean;
 				isLoading?: boolean;
 				isShowingDetail?: boolean;
+				searchText?: EventCounted<string>;
 				searchBarPlaceholder?: string;
 				navigationTitle?: string;
-				onSearchTextChange?: (text: string) => void;
+				onSearchTextChange?: (...args: any[]) => void;
 				onSelectionChange?: (selectedItemId: string) => void;
 			};
 			"list-section": {
@@ -67,9 +70,10 @@ declare module "react" {
 				filtering?: boolean;
 				isLoading?: boolean;
 				isShowingDetail?: boolean;
+				searchText?: EventCounted<string>;
 				searchBarPlaceholder?: string;
 				navigationTitle?: string;
-				onSearchTextChange?: (text: string) => void;
+				onSearchTextChange?: (...args: any[]) => void;
 				onSelectionChange?: (selectedItemId: string) => void;
 			};
 			"grid-section": {
@@ -193,7 +197,7 @@ declare module "react" {
 				type?: DatePickerType;
 			};
 			"checkbox-field": BaseFormField & {};
-			"password-field": {};
+			"password-field": BaseFormField & {};
 			"textarea-field": {};
 
 			dropdown: {