@devtools-ui/object-inspector 0.2.0 → 0.2.1-next.0

package/dist/cjs/index.cjs

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ObjectInspector: () => ObjectInspector,
+  ObjectInspector: () => ObjectInspector2,
   ObjectInspectorComponent: () => ObjectInspectorComponent,
   objectInspectorTransform: () => objectInspectorTransform
 });
@@ -41,9 +41,68 @@ var import_react = __toESM(require("react"));
 var import_react2 = require("@chakra-ui/react");
 var import_object_inspector = require("@devtools-ds/object-inspector");
 var import_react3 = require("@player-ui/react");
-var ObjectInspectorComponent = (props) => {
-  const { data, label, id } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label && /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label }), data ? /* @__PURE__ */ import_react.default.createElement(
+var isObject = (value) => {
+  return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
+};
+var getPathvalue = (object, path) => {
+  const keys = path.split(".");
+  let result = object;
+  for (const key of keys) {
+    const arrayIndex = key.search(/\[\d+\]$/);
+    if (result[key] === void 0 && arrayIndex === -1)
+      return "No result for the given path";
+    if (arrayIndex > -1) {
+      const subkey = key.substring(0, arrayIndex);
+      const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
+      result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
+      if (result === void 0)
+        return "No result for the given index";
+    } else {
+      result = result[key];
+    }
+  }
+  return result;
+};
+var FilterObjectInspector = (props) => {
+  const { data, id } = props;
+  const [filterCriteria, setFilterCriteria] = (0, import_react.useState)("");
+  const [resultData, setResultData] = (0, import_react.useState)(data);
+  const onChangeHandler = (e) => {
+    setFilterCriteria(e.target.value);
+    const result = getPathvalue(data, e.target.value);
+    setResultData(e.target.value.length ? result : data);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: "16px" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_react2.Input,
+    {
+      placeholder: "Search path...",
+      value: filterCriteria,
+      onChange: onChangeHandler
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        border: "1px solid #e0e0e0",
+        borderRadius: "8px",
+        padding: "8px"
+      }
+    },
+    !isObject(resultData) ? /* @__PURE__ */ import_react.default.createElement(import_react2.Text, { style: { padding: "0 16px", color: "#EE8956" } }, resultData) : null,
+    isObject(resultData) ? /* @__PURE__ */ import_react.default.createElement(
+      import_object_inspector.ObjectInspector,
+      {
+        data: resultData,
+        includePrototypes: false,
+        expandLevel: 3,
+        id: `filter-${id}`
+      }
+    ) : null
+  ));
+};
+var ObjectInspector = (props) => {
+  const { data, id } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
     import_object_inspector.ObjectInspector,
     {
       data,
@@ -51,7 +110,11 @@ var ObjectInspectorComponent = (props) => {
       expandLevel: 7,
       id
     }
-  ) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
+  );
+};
+var ObjectInspectorComponent = (props) => {
+  const { filter, data, label } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label && /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label }), data ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, filter ? /* @__PURE__ */ import_react.default.createElement(FilterObjectInspector, { ...props }) : /* @__PURE__ */ import_react.default.createElement(ObjectInspector, { ...props })) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
 };
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
@@ -59,14 +122,14 @@ var import_react4 = __toESM(require("react"));
 var import_dsl = require("@player-tools/dsl");
 var import_text = require("@devtools-ui/text");
 var import_collection = require("@devtools-ui/collection");
-var ObjectInspector = (props) => {
+var ObjectInspector2 = (props) => {
   const { children, binding, ...rest } = props;
   return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ import_react4.default.createElement("property", { name: "binding" }, binding.toValue()), children);
 };
 var CollectionComp = (props) => {
   return /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection, null, /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection.Values, null, props.children));
 };
-ObjectInspector.Label = (0, import_dsl.createSlot)({
+ObjectInspector2.Label = (0, import_dsl.createSlot)({
   name: "label",
   TextComp: import_text.Text,
   CollectionComp,

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./types\";\nexport * from \"./transformer\";\n","import React from \"react\";\nimport { Text } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n  const { data, label, id } = props;\n\n  return (\n    <>\n      {label && <ReactAsset {...label} />}\n      {data ? (\n        <ObjectorInspectorDS\n          data={data}\n          includePrototypes={false}\n          expandLevel={7}\n          id={id}\n        />\n      ) : (\n        <Text>No data available</Text>\n      )}\n    </>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n  props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n    /** The binding */\n    binding?: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"object-inspector\" {...rest}>\n      {binding && <property name=\"binding\">{binding.toValue()}</property>}\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nObjectInspector.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n  ObjectInspectorAsset,\n  TransformedObjectInspector\n> = (asset, options) => {\n  return {\n    ...asset,\n    data:\n      asset.binding === undefined\n        ? undefined\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: false,\n          }),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,gBAAqB;AACrB,8BAAuD;AACvD,IAAAA,gBAA2B;AAGpB,IAAM,2BAA2B,CAAC,UAAgC;AACvE,QAAM,EAAE,MAAM,OAAO,GAAG,IAAI;AAE5B,SACE,6BAAAC,QAAA,2BAAAA,QAAA,gBACG,SAAS,6BAAAA,QAAA,cAAC,4BAAY,GAAG,OAAO,GAChC,OACC,6BAAAA,QAAA;AAAA,IAAC,wBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb;AAAA;AAAA,EACF,IAEA,6BAAAD,QAAA,cAAC,0BAAK,mBAAiB,CAE3B;AAEJ;;;ACxBA,IAAAE,gBAAkB;AAClB,iBAKO;AAEP,kBAAqB;AACrB,wBAA2B;AAGpB,IAAM,kBAAkB,CAC7B,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,oBAAoB,GAAG,QAChC,WAAW,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GACvD,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,8BAAAA,QAAA,cAAC,oCACC,8BAAAA,QAAA,cAAC,6BAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,gBAAgB,YAAQ,uBAAW;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;;;ACpCM,IAAM,2BAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,SACA,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC;AAAA,EACT;AACF;","names":["import_react","React","ObjectorInspectorDS","import_react","React"]}
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./types\";\nexport * from \"./transformer\";\n","import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const isObject = (value: any): boolean => {\n  return (\n    value != null &&\n    (value.constructor === Object ||\n      (!value.constructor && typeof value === \"object\") ||\n      Array.isArray(value))\n  );\n};\n\nexport const getPathvalue = (object: object, path: string) => {\n  const keys = path.split(\".\");\n  let result: any = object;\n  for (const key of keys) {\n    const arrayIndex = key.search(/\\[\\d+\\]$/);\n\n    if (result[key] === undefined && arrayIndex === -1)\n      return \"No result for the given path\";\n\n    // If key has a numeric index, e.g. for Multi-copy and/or array values.\n    if (arrayIndex > -1) {\n      const subkey = key.substring(0, arrayIndex);\n      const subIndexMatch = key.match(/(?<=\\[)\\d+(?=\\])/);\n\n      result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];\n      if (result === undefined) return \"No result for the given index\";\n    } else {\n      result = result[key];\n    }\n  }\n  return result;\n};\n\nconst FilterObjectInspector = (props: ObjectInspectorAsset) => {\n  const { data, id } = props;\n\n  const [filterCriteria, setFilterCriteria] = useState(\"\");\n  const [resultData, setResultData] = useState(data);\n\n  const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setFilterCriteria(e.target.value);\n\n    const result = getPathvalue(data as Flow, e.target.value);\n    setResultData(e.target.value.length ? result : data);\n  };\n\n  return (\n    <div style={{ margin: \"16px\" }}>\n      <Input\n        placeholder=\"Search path...\"\n        value={filterCriteria}\n        onChange={onChangeHandler}\n      />\n      <div\n        style={{\n          border: \"1px solid #e0e0e0\",\n          borderRadius: \"8px\",\n          padding: \"8px\",\n        }}\n      >\n        {!isObject(resultData) ? (\n          <Text style={{ padding: \"0 16px\", color: \"#EE8956\" }}>\n            {resultData as any}\n          </Text>\n        ) : null}\n\n        {isObject(resultData) ? (\n          <ObjectorInspectorDS\n            data={resultData as Flow}\n            includePrototypes={false}\n            expandLevel={3}\n            id={`filter-${id}`}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nconst ObjectInspector = (props: ObjectInspectorAsset) => {\n  const { data, id } = props;\n\n  return (\n    <ObjectorInspectorDS\n      data={data as Flow}\n      includePrototypes={false}\n      expandLevel={7}\n      id={id}\n    />\n  );\n};\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n  const { filter, data, label } = props;\n\n  return (\n    <>\n      {label && <ReactAsset {...label} />}\n      {data ? (\n        <>\n          {filter ? (\n            <FilterObjectInspector {...props} />\n          ) : (\n            <ObjectInspector {...props} />\n          )}\n        </>\n      ) : (\n        <Text>No data available</Text>\n      )}\n    </>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n  props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n    /** The binding */\n    binding?: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"object-inspector\" {...rest}>\n      {binding && <property name=\"binding\">{binding.toValue()}</property>}\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nObjectInspector.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n  ObjectInspectorAsset,\n  TransformedObjectInspector\n> = (asset, options) => {\n  return {\n    ...asset,\n    data:\n      asset.binding === undefined\n        ? undefined\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: false,\n          }),\n  };\n};\n"],"mappings":"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","names":["ObjectInspector","import_react","React","ObjectorInspectorDS","import_react","ObjectInspector","React"]}

package/dist/index.legacy-esm.js

@@ -1,11 +1,70 @@
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx
-import React from "react";
-import { Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { Text, Input } from "@chakra-ui/react";
 import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
 import { ReactAsset } from "@player-ui/react";
-var ObjectInspectorComponent = (props) => {
-  const { data, label, id } = props;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
+var isObject = (value) => {
+  return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
+};
+var getPathvalue = (object, path) => {
+  const keys = path.split(".");
+  let result = object;
+  for (const key of keys) {
+    const arrayIndex = key.search(/\[\d+\]$/);
+    if (result[key] === void 0 && arrayIndex === -1)
+      return "No result for the given path";
+    if (arrayIndex > -1) {
+      const subkey = key.substring(0, arrayIndex);
+      const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
+      result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
+      if (result === void 0)
+        return "No result for the given index";
+    } else {
+      result = result[key];
+    }
+  }
+  return result;
+};
+var FilterObjectInspector = (props) => {
+  const { data, id } = props;
+  const [filterCriteria, setFilterCriteria] = useState("");
+  const [resultData, setResultData] = useState(data);
+  const onChangeHandler = (e) => {
+    setFilterCriteria(e.target.value);
+    const result = getPathvalue(data, e.target.value);
+    setResultData(e.target.value.length ? result : data);
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: { margin: "16px" } }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      placeholder: "Search path...",
+      value: filterCriteria,
+      onChange: onChangeHandler
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        border: "1px solid #e0e0e0",
+        borderRadius: "8px",
+        padding: "8px"
+      }
+    },
+    !isObject(resultData) ? /* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px", color: "#EE8956" } }, resultData) : null,
+    isObject(resultData) ? /* @__PURE__ */ React.createElement(
+      ObjectorInspectorDS,
+      {
+        data: resultData,
+        includePrototypes: false,
+        expandLevel: 3,
+        id: `filter-${id}`
+      }
+    ) : null
+  ));
+};
+var ObjectInspector = (props) => {
+  const { data, id } = props;
+  return /* @__PURE__ */ React.createElement(
     ObjectorInspectorDS,
     {
       data,
@@ -13,7 +72,11 @@ var ObjectInspectorComponent = (props) => {
       expandLevel: 7,
       id
     }
-  ) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
+  );
+};
+var ObjectInspectorComponent = (props) => {
+  const { filter, data, label } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter ? /* @__PURE__ */ React.createElement(FilterObjectInspector, { ...props }) : /* @__PURE__ */ React.createElement(ObjectInspector, { ...props })) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
 };
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
@@ -24,14 +87,14 @@ import {
 } from "@player-tools/dsl";
 import { Text as Text2 } from "@devtools-ui/text";
 import { Collection } from "@devtools-ui/collection";
-var ObjectInspector = (props) => {
+var ObjectInspector2 = (props) => {
   const { children, binding, ...rest } = props;
   return /* @__PURE__ */ React2.createElement(Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
 };
 var CollectionComp = (props) => {
   return /* @__PURE__ */ React2.createElement(Collection, null, /* @__PURE__ */ React2.createElement(Collection.Values, null, props.children));
 };
-ObjectInspector.Label = createSlot({
+ObjectInspector2.Label = createSlot({
   name: "label",
   TextComp: Text2,
   CollectionComp,
@@ -50,7 +113,7 @@ var objectInspectorTransform = (asset, options) => {
   };
 };
 export {
-  ObjectInspector,
+  ObjectInspector2 as ObjectInspector,
   ObjectInspectorComponent,
   objectInspectorTransform
 };

package/dist/index.mjs

@@ -1,11 +1,70 @@
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx
-import React from "react";
-import { Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { Text, Input } from "@chakra-ui/react";
 import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
 import { ReactAsset } from "@player-ui/react";
-var ObjectInspectorComponent = (props) => {
-  const { data, label, id } = props;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
+var isObject = (value) => {
+  return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
+};
+var getPathvalue = (object, path) => {
+  const keys = path.split(".");
+  let result = object;
+  for (const key of keys) {
+    const arrayIndex = key.search(/\[\d+\]$/);
+    if (result[key] === void 0 && arrayIndex === -1)
+      return "No result for the given path";
+    if (arrayIndex > -1) {
+      const subkey = key.substring(0, arrayIndex);
+      const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
+      result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
+      if (result === void 0)
+        return "No result for the given index";
+    } else {
+      result = result[key];
+    }
+  }
+  return result;
+};
+var FilterObjectInspector = (props) => {
+  const { data, id } = props;
+  const [filterCriteria, setFilterCriteria] = useState("");
+  const [resultData, setResultData] = useState(data);
+  const onChangeHandler = (e) => {
+    setFilterCriteria(e.target.value);
+    const result = getPathvalue(data, e.target.value);
+    setResultData(e.target.value.length ? result : data);
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: { margin: "16px" } }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      placeholder: "Search path...",
+      value: filterCriteria,
+      onChange: onChangeHandler
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        border: "1px solid #e0e0e0",
+        borderRadius: "8px",
+        padding: "8px"
+      }
+    },
+    !isObject(resultData) ? /* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px", color: "#EE8956" } }, resultData) : null,
+    isObject(resultData) ? /* @__PURE__ */ React.createElement(
+      ObjectorInspectorDS,
+      {
+        data: resultData,
+        includePrototypes: false,
+        expandLevel: 3,
+        id: `filter-${id}`
+      }
+    ) : null
+  ));
+};
+var ObjectInspector = (props) => {
+  const { data, id } = props;
+  return /* @__PURE__ */ React.createElement(
     ObjectorInspectorDS,
     {
       data,
@@ -13,7 +72,11 @@ var ObjectInspectorComponent = (props) => {
       expandLevel: 7,
       id
     }
-  ) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
+  );
+};
+var ObjectInspectorComponent = (props) => {
+  const { filter, data, label } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter ? /* @__PURE__ */ React.createElement(FilterObjectInspector, { ...props }) : /* @__PURE__ */ React.createElement(ObjectInspector, { ...props })) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
 };
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
@@ -24,14 +87,14 @@ import {
 } from "@player-tools/dsl";
 import { Text as Text2 } from "@devtools-ui/text";
 import { Collection } from "@devtools-ui/collection";
-var ObjectInspector = (props) => {
+var ObjectInspector2 = (props) => {
   const { children, binding, ...rest } = props;
   return /* @__PURE__ */ React2.createElement(Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
 };
 var CollectionComp = (props) => {
   return /* @__PURE__ */ React2.createElement(Collection, null, /* @__PURE__ */ React2.createElement(Collection.Values, null, props.children));
 };
-ObjectInspector.Label = createSlot({
+ObjectInspector2.Label = createSlot({
   name: "label",
   TextComp: Text2,
   CollectionComp,
@@ -50,7 +113,7 @@ var objectInspectorTransform = (asset, options) => {
   };
 };
 export {
-  ObjectInspector,
+  ObjectInspector2 as ObjectInspector,
   ObjectInspectorComponent,
   objectInspectorTransform
 };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n  const { data, label, id } = props;\n\n  return (\n    <>\n      {label && <ReactAsset {...label} />}\n      {data ? (\n        <ObjectorInspectorDS\n          data={data}\n          includePrototypes={false}\n          expandLevel={7}\n          id={id}\n        />\n      ) : (\n        <Text>No data available</Text>\n      )}\n    </>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n  props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n    /** The binding */\n    binding?: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"object-inspector\" {...rest}>\n      {binding && <property name=\"binding\">{binding.toValue()}</property>}\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nObjectInspector.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n  ObjectInspectorAsset,\n  TransformedObjectInspector\n> = (asset, options) => {\n  return {\n    ...asset,\n    data:\n      asset.binding === undefined\n        ? undefined\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: false,\n          }),\n  };\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,kBAAkB;AAGpB,IAAM,2BAA2B,CAAC,UAAgC;AACvE,QAAM,EAAE,MAAM,OAAO,GAAG,IAAI;AAE5B,SACE,0DACG,SAAS,oCAAC,cAAY,GAAG,OAAO,GAChC,OACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb;AAAA;AAAA,EACF,IAEA,oCAAC,YAAK,mBAAiB,CAE3B;AAEJ;;;ACxBA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,QAAAC,aAAY;AACrB,SAAS,kBAAkB;AAGpB,IAAM,kBAAkB,CAC7B,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,gBAAAD,OAAA,cAAC,SAAM,MAAK,oBAAoB,GAAG,QAChC,WAAW,gBAAAA,OAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GACvD,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,gBAAAA,OAAA,cAAC,kBACC,gBAAAA,OAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,gBAAgB,QAAQ,WAAW;AAAA,EACjC,MAAM;AAAA,EACN,UAAUC;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;;;ACpCM,IAAM,2BAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,SACA,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC;AAAA,EACT;AACF;","names":["React","Text"]}
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const isObject = (value: any): boolean => {\n  return (\n    value != null &&\n    (value.constructor === Object ||\n      (!value.constructor && typeof value === \"object\") ||\n      Array.isArray(value))\n  );\n};\n\nexport const getPathvalue = (object: object, path: string) => {\n  const keys = path.split(\".\");\n  let result: any = object;\n  for (const key of keys) {\n    const arrayIndex = key.search(/\\[\\d+\\]$/);\n\n    if (result[key] === undefined && arrayIndex === -1)\n      return \"No result for the given path\";\n\n    // If key has a numeric index, e.g. for Multi-copy and/or array values.\n    if (arrayIndex > -1) {\n      const subkey = key.substring(0, arrayIndex);\n      const subIndexMatch = key.match(/(?<=\\[)\\d+(?=\\])/);\n\n      result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];\n      if (result === undefined) return \"No result for the given index\";\n    } else {\n      result = result[key];\n    }\n  }\n  return result;\n};\n\nconst FilterObjectInspector = (props: ObjectInspectorAsset) => {\n  const { data, id } = props;\n\n  const [filterCriteria, setFilterCriteria] = useState(\"\");\n  const [resultData, setResultData] = useState(data);\n\n  const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setFilterCriteria(e.target.value);\n\n    const result = getPathvalue(data as Flow, e.target.value);\n    setResultData(e.target.value.length ? result : data);\n  };\n\n  return (\n    <div style={{ margin: \"16px\" }}>\n      <Input\n        placeholder=\"Search path...\"\n        value={filterCriteria}\n        onChange={onChangeHandler}\n      />\n      <div\n        style={{\n          border: \"1px solid #e0e0e0\",\n          borderRadius: \"8px\",\n          padding: \"8px\",\n        }}\n      >\n        {!isObject(resultData) ? (\n          <Text style={{ padding: \"0 16px\", color: \"#EE8956\" }}>\n            {resultData as any}\n          </Text>\n        ) : null}\n\n        {isObject(resultData) ? (\n          <ObjectorInspectorDS\n            data={resultData as Flow}\n            includePrototypes={false}\n            expandLevel={3}\n            id={`filter-${id}`}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nconst ObjectInspector = (props: ObjectInspectorAsset) => {\n  const { data, id } = props;\n\n  return (\n    <ObjectorInspectorDS\n      data={data as Flow}\n      includePrototypes={false}\n      expandLevel={7}\n      id={id}\n    />\n  );\n};\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n  const { filter, data, label } = props;\n\n  return (\n    <>\n      {label && <ReactAsset {...label} />}\n      {data ? (\n        <>\n          {filter ? (\n            <FilterObjectInspector {...props} />\n          ) : (\n            <ObjectInspector {...props} />\n          )}\n        </>\n      ) : (\n        <Text>No data available</Text>\n      )}\n    </>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n  props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n    /** The binding */\n    binding?: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"object-inspector\" {...rest}>\n      {binding && <property name=\"binding\">{binding.toValue()}</property>}\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nObjectInspector.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n  ObjectInspectorAsset,\n  TransformedObjectInspector\n> = (asset, options) => {\n  return {\n    ...asset,\n    data:\n      asset.binding === undefined\n        ? undefined\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: false,\n          }),\n  };\n};\n"],"mappings":"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","names":["React","Text","ObjectInspector"]}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@devtools-ui/object-inspector",
-  "version": "0.2.0",
+  "version": "0.2.1-next.0",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@devtools-ui/collection": "0.2.0",
-    "@devtools-ui/text": "0.2.0",
+    "@devtools-ui/collection": "0.2.1-next.0",
+    "@devtools-ui/text": "0.2.1-next.0",
     "@types/react": "^18.2.51",
     "react": "^18.2.0",
     "@devtools-ds/object-inspector": "^1.1.2",

package/src/components/ObjectInspectorComponent.tsx

@@ -1,22 +1,115 @@
-import React from "react";
-import { Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { Text, Input } from "@chakra-ui/react";
 import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
 import { ReactAsset } from "@player-ui/react";
+import { Flow } from "@player-ui/types";
 import { ObjectInspectorAsset } from "../types";
 
+export const isObject = (value: any): boolean => {
+  return (
+    value != null &&
+    (value.constructor === Object ||
+      (!value.constructor && typeof value === "object") ||
+      Array.isArray(value))
+  );
+};
+
+export const getPathvalue = (object: object, path: string) => {
+  const keys = path.split(".");
+  let result: any = object;
+  for (const key of keys) {
+    const arrayIndex = key.search(/\[\d+\]$/);
+
+    if (result[key] === undefined && arrayIndex === -1)
+      return "No result for the given path";
+
+    // If key has a numeric index, e.g. for Multi-copy and/or array values.
+    if (arrayIndex > -1) {
+      const subkey = key.substring(0, arrayIndex);
+      const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
+
+      result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
+      if (result === undefined) return "No result for the given index";
+    } else {
+      result = result[key];
+    }
+  }
+  return result;
+};
+
+const FilterObjectInspector = (props: ObjectInspectorAsset) => {
+  const { data, id } = props;
+
+  const [filterCriteria, setFilterCriteria] = useState("");
+  const [resultData, setResultData] = useState(data);
+
+  const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setFilterCriteria(e.target.value);
+
+    const result = getPathvalue(data as Flow, e.target.value);
+    setResultData(e.target.value.length ? result : data);
+  };
+
+  return (
+    <div style={{ margin: "16px" }}>
+      <Input
+        placeholder="Search path..."
+        value={filterCriteria}
+        onChange={onChangeHandler}
+      />
+      <div
+        style={{
+          border: "1px solid #e0e0e0",
+          borderRadius: "8px",
+          padding: "8px",
+        }}
+      >
+        {!isObject(resultData) ? (
+          <Text style={{ padding: "0 16px", color: "#EE8956" }}>
+            {resultData as any}
+          </Text>
+        ) : null}
+
+        {isObject(resultData) ? (
+          <ObjectorInspectorDS
+            data={resultData as Flow}
+            includePrototypes={false}
+            expandLevel={3}
+            id={`filter-${id}`}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const ObjectInspector = (props: ObjectInspectorAsset) => {
+  const { data, id } = props;
+
+  return (
+    <ObjectorInspectorDS
+      data={data as Flow}
+      includePrototypes={false}
+      expandLevel={7}
+      id={id}
+    />
+  );
+};
+
 export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
-  const { data, label, id } = props;
+  const { filter, data, label } = props;
 
   return (
     <>
       {label && <ReactAsset {...label} />}
       {data ? (
-        <ObjectorInspectorDS
-          data={data}
-          includePrototypes={false}
-          expandLevel={7}
-          id={id}
-        />
+        <>
+          {filter ? (
+            <FilterObjectInspector {...props} />
+          ) : (
+            <ObjectInspector {...props} />
+          )}
+        </>
       ) : (
         <Text>No data available</Text>
       )}

package/src/components/__tests__/object-inspector.test.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { ObjectInspectorComponent } from "../index";
+import { TransformedObjectInspector } from "../../types";
+
+describe("ObjectInspectorComponent test", () => {
+  const objectInspectorAssetPropsMock: TransformedObjectInspector = {
+    id: "default-objectIns",
+    type: "object-inspector",
+    data: { test: "test", b: { foo: "bar", arr: [{ prop1: "Arr prop" }] } },
+  };
+
+  const objectInspectorAssetFilterPropsMock: TransformedObjectInspector = {
+    ...objectInspectorAssetPropsMock,
+    id: "filterObjIns",
+    filter: true,
+  };
+
+  test("Renders default ObjectInspector asset", async () => {
+    const { findByText } = render(
+      <ObjectInspectorComponent {...objectInspectorAssetPropsMock} />
+    );
+
+    const testText = await findByText("test");
+
+    expect(testText).toBeDefined();
+  });
+
+  describe("Testing Object Inspecor with filter", () => {
+    test("Renders default ObjectInspector asset with filter", async () => {
+      const { findByPlaceholderText, findByText } = render(
+        <ObjectInspectorComponent {...objectInspectorAssetPropsMock} filter />
+      );
+
+      const filterInput = await findByPlaceholderText("Search path...");
+
+      const leafText = await findByText('"bar"');
+
+      expect(filterInput).toBeDefined();
+      expect(leafText).toBeDefined();
+    });
+
+    test("Filters data tree on path", async () => {
+      const { container, findByPlaceholderText, findByText, queryByText } =
+        render(
+          <ObjectInspectorComponent {...objectInspectorAssetFilterPropsMock} />
+        );
+
+      await findByPlaceholderText("Search path...");
+
+      const FilterInput = container.querySelector("input") as HTMLInputElement;
+
+      fireEvent.change(FilterInput, { target: { value: "b.foo" } });
+
+      const fooText = await findByText("bar");
+      const testText = queryByText("test");
+
+      expect(fooText).toBeDefined();
+      expect(testText).toBeNull();
+    });
+
+    test("Filters data tree on path with array index", async () => {
+      const { container, findByPlaceholderText, findByText, queryByText } =
+        render(
+          <ObjectInspectorComponent {...objectInspectorAssetFilterPropsMock} />
+        );
+
+      await findByPlaceholderText("Search path...");
+
+      const FilterInput = container.querySelector("input") as HTMLInputElement;
+
+      fireEvent.change(FilterInput, { target: { value: "b.arr[0]" } });
+
+      const fooText = await findByText("prop1");
+      const testText = queryByText("test");
+
+      expect(fooText).toBeDefined();
+      expect(testText).toBeNull();
+    });
+
+    test("Shows 'no path result' message", async () => {
+      const { container, findByPlaceholderText, findByText, queryByText } =
+        render(
+          <ObjectInspectorComponent {...objectInspectorAssetFilterPropsMock} />
+        );
+
+      await findByPlaceholderText("Search path...");
+
+      const FilterInput = container.querySelector("input") as HTMLInputElement;
+
+      fireEvent.change(FilterInput, { target: { value: "whatever" } });
+
+      const noResultText = await findByText("No result for the given path");
+
+      expect(noResultText).toBeDefined();
+    });
+
+    test("Shows 'no given index found' message", async () => {
+      const { container, findByPlaceholderText, findByText, queryByText } =
+        render(
+          <ObjectInspectorComponent {...objectInspectorAssetFilterPropsMock} />
+        );
+
+      await findByPlaceholderText("Search path...");
+
+      const FilterInput = container.querySelector("input") as HTMLInputElement;
+
+      fireEvent.change(FilterInput, { target: { value: "b.arr[1]" } });
+
+      const noResultIndexText = await findByText(
+        "No result for the given index"
+      );
+
+      expect(noResultIndexText).toBeDefined();
+    });
+  });
+});

package/src/components/__tests__/pureFunctions.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "vitest";
+import { isObject, getPathvalue } from "../ObjectInspectorComponent";
+
+describe("Testing the isObject pure utility function", () => {
+  test("It verifies correct item values as objects", () => {
+    expect(isObject({ some: "prop" })).toBe(true);
+    expect(isObject([{ arr: "prop" }])).toBe(true);
+  });
+  test("It verifies incorrect item values as no objects", () => {
+    expect(isObject("prop")).toBe(false);
+    expect(isObject(20)).toBe(false);
+  });
+});
+
+describe("Testing the getPathvalue pure utility function", () => {
+  const testObject = {
+    mainProp: "Some value",
+    arrProp: [
+      {
+        someProp: "foo",
+        booleanProp: "false",
+      },
+    ],
+  };
+  test("It verifies regular path in object", () => {
+    expect(getPathvalue(testObject, "mainProp")).toBe(testObject.mainProp);
+    expect(getPathvalue(testObject, "something")).toBe(
+      "No result for the given path"
+    );
+  });
+  test("It verifies path with array index", () => {
+    expect(getPathvalue(testObject, "arrProp[0].someProp")).toBe("foo");
+    expect(getPathvalue(testObject, "arrProp[1].someProp")).toBe(
+      "No result for the given index"
+    );
+  });
+});

package/src/dsl/__tests__/ObjectInspector.test.tsx

@@ -24,4 +24,26 @@ describe("DSL: Object Inspector", () => {
       },
     });
   });
+
+  test("with filter", async () => {
+    const rendered = await render(
+      <ObjectInspector binding={b`foo`} filter>
+        <ObjectInspector.Label>With Filter</ObjectInspector.Label>
+      </ObjectInspector>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "object-inspector",
+      binding: "foo",
+      filter: true,
+      label: {
+        asset: {
+          id: "label",
+          type: "text",
+          value: "With Filter",
+        },
+      },
+    });
+  });
 });

package/src/types/index.ts

@@ -7,6 +7,9 @@ export interface ObjectInspectorAsset<AnyTextAsset extends Asset = Asset>
 
   /** A text-like asset for the action's label */
   label?: AssetWrapper<AnyTextAsset>;
+
+  /** Flag if a path-to-prop filter is to get included */
+  filter?: boolean;
 }
 
 export interface TransformedObjectInspector extends ObjectInspectorAsset {

package/types/components/ObjectInspectorComponent.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
 import { ObjectInspectorAsset } from "../types";
+export declare const isObject: (value: any) => boolean;
+export declare const getPathvalue: (object: object, path: string) => any;
 export declare const ObjectInspectorComponent: (props: ObjectInspectorAsset) => React.JSX.Element;
 //# sourceMappingURL=ObjectInspectorComponent.d.ts.map

package/types/types/index.d.ts

@@ -4,6 +4,8 @@ export interface ObjectInspectorAsset<AnyTextAsset extends Asset = Asset> extend
     binding?: string;
     /** A text-like asset for the action's label */
     label?: AssetWrapper<AnyTextAsset>;
+    /** Flag if a path-to-prop filter is to get included */
+    filter?: boolean;
 }
 export interface TransformedObjectInspector extends ObjectInspectorAsset {
     /** A stateful instance of an action */