1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[207],{58860:(e,t,n)=>{n.d(t,{xA:()=>c,yg:()=>y});var r=n(37953);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},g=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),g=a,y=d["".concat(s,".").concat(g)]||d[g]||u[g]||o;return n?r.createElement(y,i(i({ref:t},c),{},{components:n})):r.createElement(y,i({ref:t},c))}));function y(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=g;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:a,i[1]=l;for(var p=2;p<o;p++)i[p]=n[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}g.displayName="MDXCreateElement"},56988:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>V,contentTitle:()=>W,default:()=>_,frontMatter:()=>E,metadata:()=>M,toc:()=>H});n(37953);var r=n(58860);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}const l={toc:[]},s="wrapper";function p(e){var{components:t}=e,n=i(e,["components"]);return(0,r.yg)(s,o(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){a(e,t,n[t])}))}return e}({},l,n),{components:t,mdxType:"MDXLayout"}),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live url=http://localhost:3000 previewHeight=300px",live:!0,url:"http://localhost:3000",previewHeight:"300px"},'setInitialRoutes(["/posts/create"]);\n// visible-block-start\nimport { useSelect } from "@refinedev/mantine";\nimport { Select } from "@mantine/core";\n\ninterface ICategory {\n id: number;\n title: string;\n}\n\nconst ProductCreate: React.FC = () => {\n const { selectProps } = useSelect<ICategory>({\n resource: "categories",\n });\n\n return (\n <Select\n label="Category"\n placeholder="Select a category"\n withinPortal\n {...selectProps}\n />\n );\n};\n// visible-block-end\nsetRefineProps({\n resources: [\n {\n name: "posts",\n create: ProductCreate,\n },\n ],\n});\nrender(<RefineMantineDemo />);\n')))}
1function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function u(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}p.isMDXComponent=!0;const g={toc:[]},y="wrapper";function m(e){var{components:t}=e,n=u(e,["components"]);return(0,r.yg)(y,d(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){c(e,t,n[t])}))}return e}({},g,n),{components:t,mdxType:"MDXLayout"}),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live url=http://localhost:3000 previewHeight=300px",live:!0,url:"http://localhost:3000",previewHeight:"300px"},'setInitialRoutes(["/posts/create"]);\n// visible-block-start\nimport { useSelect } from "@refinedev/mantine";\nimport { Select } from "@mantine/core";\n\ninterface ICategory {\n id: number;\n title: string;\n}\n\nconst ProductCreate: React.FC = () => {\n const { selectProps } = useSelect<ICategory>({\n resource: "categories",\n // highlight-start\n onSearch: (value) => [\n {\n field: "title",\n operator: "contains",\n value,\n },\n ],\n // highlight-end\n });\n\n return (\n <Select\n label="Category"\n placeholder="Select a category"\n withinPortal\n {...selectProps}\n />\n );\n};\n// visible-block-end\nsetRefineProps({\n resources: [\n {\n name: "posts",\n create: ProductCreate,\n },\n ],\n});\nrender(<RefineMantineDemo />);\n')))}function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function b(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}m.isMDXComponent=!0;const v={toc:[]},N="wrapper";function w(e){var{components:t}=e,n=b(e,["components"]);return(0,r.yg)(N,f(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){h(e,t,n[t])}))}return e}({},v,n),{components:t,mdxType:"MDXLayout"}),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live url=http://localhost:3000 previewHeight=300px",live:!0,url:"http://localhost:3000",previewHeight:"300px"},'setInitialRoutes(["/posts/create"]);
1\n// visible-block-start\nimport { useSelect } from "@refinedev/mantine";\nimport { Select, Button } from "@mantine/core";\n\ninterface ICategory {\n id: number;\n title: string;\n}\n\nconst ProductCreate: React.FC = () => {\n const [order, setOrder] = React.useState<"asc" | "desc">("asc");\n\n const { selectProps } = useSelect<ICategory>({\n resource: "categories",\n // highlight-start\n sorters: [\n {\n field: "title",\n order,\n },\n ],\n // highlight-end\n });\n\n return (\n <>\n <Button onClick={() => setOrder(order === "asc" ? "desc" : "asc")}>\n Toggle Order\n </Button>\n <Select\n label="Category"\n placeholder="Select a category"\n withinPortal\n {...selectProps}\n />\n </>\n );\n};\n// visible-block-end\nsetRefineProps({\n resources: [\n {\n name: "posts",\n create: ProductCreate,\n },\n ],\n});\nrender(<RefineMantineDemo />);\n')))}function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function C(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function P(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}w.isMDXComponent=!0;const x={toc:[]},S="wrapper";function k(e){var{components:t}=e,n=P(e,["components"]);return(0,r.yg)(S,C(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){O(e,t,n[t])}))}return e}({},x,n),{components:t,mdxType:"MDXLayout"}),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live url=http://localhost:3000 previewHeight=300px",live:!0,url:"http://localhost:3000",previewHeight:"300px"},'setInitialRoutes(["/posts/create"]);\n// visible-block-start\nimport { useSelect } from "@refinedev/mantine";\nimport { Select, Button } from "@mantine/core";\n\ninterface ICategory {\n id: number;\n title: string;\n}\n\nconst ProductCreate: React.FC = () => {\n const { selectProps } = useSelect<ICategory>({\n resource: "categories",\n // highlight-next-line\n defaultValue: 11,\n });\n\n return (\n <>\n <Select\n label="Category"\n placeholder="Select a category"\n withinPortal\n {...selectProps}\n />\n </>\n );\n};\n// visible-block-end\nsetRefineProps({\n resources: [\n {\n name: "posts",\n create: ProductCreate,\n },\n ],\n});\nrender(<RefineMantineDemo />);\n')))}function D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function T(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function j(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}k.isMDXComponent=!0;const q={toc:[]},I="wrapper";function F(e){var{components:t}=e,n=j(e,["components"]);return(0,r.yg)(I,T(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){D(e,t,n[t])}))}return e}({},q,n),{components:t,mdxType:"MDXLayout"}),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live url=http://localhost:3000 previewHeight=300px",live:!0,url:"http://localhost:3000",previewHeight:"300px"},'setInitialRoutes(["/posts/create"]);\n// visible-block-start\nimport { Create, useForm, useSelect } from "@refinedev/mantine";\nimport { Select } from "@mantine/core";\n\ninterface ICategory {\n id: number;\n title: string;\n}\n\nconst ProductCreate: React.FC = () => {\n const { saveButtonProps, getInputProps, errors } = useForm({\n initialValues: {\n category: {\n id: "",\n },\n },\n });\n\n const { selectProps } = useSelect<ICategory>({\n resource: "categories",\n });\n\n return (\n <Create saveButtonProps={saveButtonProps}>\n <form>\n <Select\n mt={8}\n label="Category"\n placeholder="Select a category"\n {...getInputProps("category.id")}\n {...selectProps}\n />\n </form>\n </Create>\n );\n};\n// visible-block-end\nsetRefineProps({\n resources: [\n {\n name: "posts",\n create: ProductCreate,\n },\n ],\n});\nrender(<RefineMantineDemo />);\n')))}function R(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function U(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}
1(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function L(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}F.isMDXComponent=!0;const E={title:"useSelect Hook | Mantine & Refine v4 Relational Data",display_title:"useSelect",sidebar_label:"useSelect",description:"Effortlessly populate Mantine Select components. Learn how to fetch and filter relational data with Refine v4's useSelect hook.",source:"https://github.com/refinedev/refine/blob/main/packages/mantine/src/hooks/useSelect/index.ts"},W=void 0,M={unversionedId:"ui-integrations/mantine/hooks/use-select/index",id:"version-4.xx.xx/ui-integrations/mantine/hooks/use-select/index",title:"useSelect Hook | Mantine & Refine v4 Relational Data",description:"Effortlessly populate Mantine Select components. Learn how to fetch and filter relational data with Refine v4's useSelect hook.",source:"@site/versioned_docs/version-4.xx.xx/ui-integrations/mantine/hooks/use-select/index.md",sourceDirName:"ui-integrations/mantine/hooks/use-select",slug:"/ui-integrations/mantine/hooks/use-select/",permalink:"/core/docs/4.xx.xx/ui-integrations/mantine/hooks/use-select/",draft:!1,editUrl:"https://github.com/refinedev/refine/tree/main/documentation/versioned_docs/version-4.xx.xx/ui-integrations/mantine/hooks/use-select/index.md",tags:[],version:"4.xx.xx",lastUpdatedBy:"Alican Erdurmaz",lastUpdatedAt:1768983368,formattedLastUpdatedAt:"Jan 21, 2026",frontMatter:{title:"useSelect Hook | Mantine & Refine v4 Relational Data",display_title:"useSelect",sidebar_label:"useSelect",description:"Effortlessly populate Mantine Select components. Learn how to fetch and filter relational data with Refine v4's useSelect hook.",source:"https://github.com/refinedev/refine/blob/main/packages/mantine/src/hooks/useSelect/index.ts"},sidebar:"mainSidebar",previous:{title:"useStepsForm",permalink:"/core/docs/4.xx.xx/ui-integrations/mantine/hooks/use-steps-form/"},next:{title:"Authentication",permalink:"/core/docs/4.xx.xx/examples/authentication/mantine"}},V={},H=[{value:"Usage",id:"usage",level:2},{value:"Realtime Updates",id:"realtime-updates",level:2},{value:"Properties",id:"properties",level:2},{value:"resource <PropTag required />",id:"resource-",level:3},{value:"optionLabel and optionValue",id:"optionlabel-and-optionvalue",level:3},{value:"searchField",id:"searchfield",level:3},{value:"sorters",id:"sorters",level:3},{value:"filters",id:"filters",level:3},{value:"defaultValue",id:"defaultvalue",level:3},{value:"selectedOptionsOrder",id:"selectedoptionsorder",level:3},{value:"debounce",id:"debounce",level:3},{value:"queryOptions",id:"queryoptions",level:3},{value:"pagination",id:"pagination",level:3},{value:"current",id:"current",level:4},{value:"pageSize",id:"pagesize",level:4},{value:"mode",id:"mode",level:4},{value:"defaultValueQueryOptions",id:"defaultvaluequeryoptions",level:3},{value:"onSearch",id:"onsearch",level:3},{value:"Client-side filtering",id:"client-side-filtering",level:4},{value:"meta",id:"meta",level:3},{value:"dataProviderName",id:"dataprovidername",level:3},{value:"successNotification",id:"successnotification",level:3},{value:"errorNotification",id:"errornotification",level:3},{value:"liveMode",id:"livemode",level:3},{value:"onLiveEvent",id:"onliveevent",level:3},{value:"liveParams",id:"liveparams",level:3},{value:"overtimeOptions",id:"overtimeoptions",level:3},{value:"<del>sort</del> <PropTag deprecated />",id:"sort-",level:3},{value:"<del>hasPagination</del> <PropTag deprecated />",id:"haspagination-",level:3},{value:"FAQ",id:"faq",level:2},{value:"How to add search to options (Autocomplete)?",id:"how-to-add-search-to-options-autocomplete",level:3},{value:"How to ensure <code>defaultValue</code> is included in the options?",id:"how-to-ensure-defaultvalue-is-included-in-the-options",level:3},{value:"How to change the <code>label</code> and <code>value</code> properties in options?",id:"how-to-change-the-label-and-value-properties-in-options",level:3},{value:"Can I create the options manually?",id:"can-i-create-the-options-manually",level:3},{value:"How do I use it with <code>CRUD</code> components and <code>useForm</code>?",id:"how-do-i-use-it-with-crud-components-and-useform",level:3},{value:"API Reference",id:"api-reference",level:2},{value:"Properties",id:"properties-1",level:3},{value:"Type Parameters",id:"type-parameters",level:3},{value:"Return values",id:"return-values",level:3},{value:"Example",id:"example",level:2}],A=e=>function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.yg)("div",t)},Q=A("DocThumbsUpDownFeedbackWidget"),B=A("PropTag"),X=A("PropsTable"),z=A("CodeSandboxExample"),J={toc:H},$="wrapper";function _(e){var{components:t}=e,n=L(e,["components"]);return(0,r.yg)($,U(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){R(e,t,n[t])}))}return e}({},J,n),{components:t,mdxType:"MDXLayout"}),(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"useSelect")," hook allows you to manage Mantine's ",(0,r.yg)("a",{parentName:"p",href:"https://mantine.dev/core/select/"},(0,r.yg)("inlineCode",{parentName:"a"},"<Select>"))," component when records in a resource needs to be used as select options."),(0,r.yg)("p",null,"This hook uses the ",(0,r.yg)("inlineCode",{parentName:"p"},"useList")," hook for fetching data. ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/data/hooks/use-list"},"Refer to useList hook documentation for details. \u2192")),(0,r.yg)("h2",{id:"usage"},"Usage"),(0,r.yg)(Q,{id:"usage",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Here is a basic example of how to use ",(0,r.yg)("inlineCode",{parentName:"p"},"useSelect")," hook."),(0,r.yg)(p,{mdxType:"BasicUsageLivePreview"})),(0,r.yg)("h2",{id:"realtime-updates"},"Realtime Updates"),(0,r.yg)(Q,{id:"realtime-updates",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},(0,r.yg)("a",{parentName:"p",href:"/core/docs/realtime/live-provider"},(0,r.yg)("inlineCode",{parentName:"a"},"LiveProvider"))," is required for this prop to work.")),(0,r.yg)("p",null,"When ",(0,r.yg)("inlineCode",{parentName:"p"},"useSelect")," hook is mounted, it passes some parameters (",(0,r.yg)("inlineCode",{parentName:"p"},"channel"),", ",(0,r.yg)("inlineCode",{parentName:"p"},"resource")," etc.) to the ",(0,r.yg)("inlineCode",{parentName:"p"},"subscribe")," method from the ",(0,r.yg)("inlineCode",{parentName:"p"},"liveProvider"),".\nIt is useful when you want to subscribe to the live updates.")),(0,r.yg)("h2",{id:"properties"},"Properties"),(0,r.yg)("h3",{id:"resource-"},"resource ",(0,r.yg)(B,{required:!0,mdxType:"PropTag"})),(0,r.yg)(Q,{id:"resource-",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"It will be passed to the ",(0,r.yg)("inlineCode",{parentName:"p"},"getList")," method from the ",(0,r.yg)("inlineCode",{parentName:"p"},"dataProvider")," as parameter via the ",(0,r.yg)("inlineCode",{parentName:"p"},"useList")," hook. The parameter is usually used as an API endpoint path. It all depends on how to handle the ",(0,r.yg)("inlineCode",{parentName:"p"},"resource")," in the ",(0,r.yg)("inlineCode",{parentName:"p"},"getList")," method. See the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/data/data-provider#creating-a-data-provider"},"creating a data provider")," section for an example of how resources are handled."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n resource: "categories",\n});\n')),(0,r.yg)("p",null,"If you have multiple resources with the same name, you can pass the ",(0,r.yg)("inlineCode",{parentName:"p"},"identifier")," instead of the ",(0,r.yg)("inlineCode",{parentName:"p"},"name")," of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the ",(0,r.yg)("inlineCode",{parentName:"p"},"name")," of the resource defined in the ",(0,r.yg)("inlineCode",{parentName:"p"},"<Refine/>")," component."),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/core/refine-component#identifier"},(0,r.yg)("inlineCode",{parentName:"a"},"identifier")," section of the ",(0,r.yg)("inlineCode",{parentName:"a"},"<Refine/>")," component documentation ","\u2192")))),(0,r.yg)("h3",{id:"optionlabel-and-optionvalue"},"optionLabel and optionValue"),(0,r.yg)(Q,{id:"optionlabel-and-optionvalue",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Allows you to change the ",(0,r.yg)("inlineCode",{parentName:"p"},"value")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"label")," of your options.\nDefault values are ",(0,r.yg)("inlineCode",{parentName:"p"},'optionLabel = "title"')," and ",(0,r.yg)("inlineCode",{parentName:"p"},'optionValue = "id"')),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect<ICategory>({\n resource: "products",\n optionLabel: "name"\n optionValue: "productId"\n});\n')),(0,r.yg)("p",null,"These properties also support nested properties via ",(0,r.yg)("a",{parentName:"p",href:"https://lodash.com/docs/4.17.15#get"},"Object path")," syntax."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'const { options } = useSelect({\n resource: "categories",\n optionLabel: "nested.title",\n optionValue: "nested.id",\n});\n')),(0,r.yg)("p",null,"It's also possible to pass function to these props. These functions will receive ",(0,r.yg)("inlineCode",{parentName:"p"},"item")," argument."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"const { options } = useSelect({\n optionLabel: (item) => `${item.firstName} ${item.lastName}`,\n optionValue: (item) => item.id,\n});\n"))),(0,r.yg)("h3",{id:"searchfield"},"searchField"),(0,r.yg)(Q,{id:"searchfield",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Can be used to specify which field will be searched with value given to ",(0,r.yg)("inlineCode",{parentName:"p"},"onSearch")," function."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'const { onSearch } = useSelect({ searchField: "name" });\n\nonSearch("John"); // Searches by `name` field with value John.\n')),(0,r.yg)("p",null,"By default, it uses ",(0,r.yg)("inlineCode",{parentName:"p"},"optionLabel"),"'s value, if ",(0,r.yg)("inlineCode",{parentName:"p"},"optionLabel")," is a string. Uses ",(0,r.yg)("inlineCode",{parentName:"p"},"title")," field otherwise."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'// When `optionLabel` is string.\nconst { onSearch } = useSelect({ optionLabel: "name" });\n\nonSearch("John"); // Searches by `name` field with value John.\n\n// When `optionLabel` is function.\nconst { onSearch } = useSelect({\n optionLabel: (item) => `${item.id} - ${item.name}`,\n});\n\nonSearch("John"); // Searches by `title` field with value John.\n'))),(0,r.yg)("h3",{id:"sorters"},"sorters"),(0,r.yg)(Q,{id:"sorters",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"It allows to show the options in the desired order. ",(0,r.yg)("inlineCode",{parentName:"p"},"sorters")," will be passed to the ",(0,r.yg)("inlineCode",{parentName:"p"},"getList")," method from the ",(0,r.yg)("inlineCode",{parentName:"p"},"dataProvider")," as parameter via the ",(0,r.yg)("inlineCode",{parentName:"p"},"useList")," hook. It is used to send sort query parameters to the API."),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/core/interface-references#crudsorting"},(0,r.yg)("inlineCode",{parentName:"a"},"CrudSorting")," interface documentation ","\u2192"))),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n sorters: [\n {\n field: "title",\n order: "asc",\n },\n ],\n});\n')),(0,r.yg)(w,{mdxType:"SortLivePreview"})),(0,r.yg)("h3",{id:"filters"},"filters"),(0,r.yg)(Q,{id:"filters",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"It is used to show options by filtering them. ",(0,r.yg)("inlineCode",{parentName:"p"},"filters")," will be passed to the ",(0,r.yg)("inlineCode",{parentName:"p"},"getList")," method from the ",(0,r.yg)("inlineCode",{parentName:"p"},"dataProvider")," as parameter via the ",(0,r.yg)("inlineCode",{parentName:"p"},"useList")," hook. It is used to send filter query parameters to the API."),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/core/interface-references#crudfilters"},(0,r.yg)("inlineCode",{parentName:"a"},"CrudFilters")," interface documentation ","\u2192"))),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n filters: [\n {\n field: "isActive",\n operator: "eq",\n value: true,\n },\n ],\n});\n'))),(0,r.yg)("h3",{id:"defaultvalue"},"defaultValue"),(0,r.yg)(Q,{id:"defaultvalue",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"defaultValue")," allows you to make options selected by default and adds extra options to ",(0,r.yg)("inlineCode",{parentName:"p"},"<select>")," component. In some cases, like if there are too many entries for the ",(0,r.yg)("inlineCode",{parentName:"p"},"<select>")," and pagination is required, ",(0,r.yg)("inlineCode",{parentName:"p"},"defaultValue")," may not be present in the current visible options and this can break the ",(0,r.yg)("inlineCode",{parentName:"p"},"<select>")," component. To avoid such cases, A separate ",(0,r.yg)("inlineCode",{parentName:"p"},"useMany")," query is sent to the backend with the ",(0,r.yg)("inlineCode",{parentName:"p"},"defaultValue")," and appended to the options of ",(0,r.yg)("inlineCode",{parentName:"p"},"<select>"),", ensuring the default values exist in the current options array. Since it uses ",(0,r.yg)("inlineCode",{parentName:"p"},"useMany")," to query the necessary data, the ",(0,r.yg)("inlineCode",{parentName:"p"}
1,"defaultValue")," can be a single value or an array of values like the following:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"useSelect({\n defaultValue: 1, // or [1, 2]\n});\n")),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/data/hooks/use-many"},(0,r.yg)("inlineCode",{parentName:"a"},"useMany")," documentation ","\u2192")))),(0,r.yg)("h3",{id:"selectedoptionsorder"},"selectedOptionsOrder"),(0,r.yg)(Q,{id:"selectedoptionsorder",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"selectedOptionsOrder")," allows us to sort ",(0,r.yg)("inlineCode",{parentName:"p"},"selectedOptions")," on ",(0,r.yg)("inlineCode",{parentName:"p"},"defaultValue"),". It can be:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},'"in-place"'),": sort ",(0,r.yg)("inlineCode",{parentName:"li"},"selectedOptions")," at the bottom. It is by default."),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},'"selected-first"'),": sort ",(0,r.yg)("inlineCode",{parentName:"li"},"selectedOptions")," at the top.")),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n defaultValue: 1, // or [1, 2]\n selectedOptionsOrder: "selected-first", // in-place | selected-first\n});\n'))),(0,r.yg)("h3",{id:"debounce"},"debounce"),(0,r.yg)(Q,{id:"debounce",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"debounce")," allows us to ",(0,r.yg)("inlineCode",{parentName:"p"},"debounce")," the ",(0,r.yg)("inlineCode",{parentName:"p"},"onSearch")," function."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"useSelect({\n debounce: 500,\n});\n"))),(0,r.yg)("h3",{id:"queryoptions"},"queryOptions"),(0,r.yg)(Q,{id:"queryoptions",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)(Q,{id:"selectpropstype",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"queryOptions")," is used to pass additional options to the ",(0,r.yg)("inlineCode",{parentName:"p"},"useQuery")," hook. It is useful when you want to pass additional options to the ",(0,r.yg)("inlineCode",{parentName:"p"},"useQuery")," hook."),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"https://tanstack.com/query/v4/docs/react/reference/useQuery"},(0,r.yg)("inlineCode",{parentName:"a"},"useQuery")," documentation ","\u2192"))),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"useSelect({\n queryOptions: {\n retry: 3,\n },\n});\n"))),(0,r.yg)("h3",{id:"pagination"},"pagination"),(0,r.yg)(Q,{id:"pagination",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"pagination")," will be passed to the ",(0,r.yg)("inlineCode",{parentName:"p"},"getList")," method from the ",(0,r.yg)("inlineCode",{parentName:"p"},"dataProvider")," as parameter. It is used to send pagination query parameters to the API.")),(0,r.yg)("h4",{id:"current"},"current"),(0,r.yg)(Q,{id:"current",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"You can pass the ",(0,r.yg)("inlineCode",{parentName:"p"},"current")," page number to the ",(0,r.yg)("inlineCode",{parentName:"p"},"pagination")," property."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"useSelect({\n pagination: {\n current: 2,\n },\n});\n"))),(0,r.yg)("h4",{id:"pagesize"},"pageSize"),(0,r.yg)(Q,{id:"pagesize",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"You can pass the ",(0,r.yg)("inlineCode",{parentName:"p"},"pageSize")," to the ",(0,r.yg)("inlineCode",{parentName:"p"},"pagination")," property."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"useSelect({\n pagination: {\n pageSize: 20,\n },\n});\n"))),(0,r.yg)("h4",{id:"mode"},"mode"),(0,r.yg)(Q,{id:"mode",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"It can be ",(0,r.yg)("inlineCode",{parentName:"p"},'"off"'),", ",(0,r.yg)("inlineCode",{parentName:"p"},'"client"')," or ",(0,r.yg)("inlineCode",{parentName:"p"},'"server"'),". It is used to determine whether to use server-side pagination or not."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n pagination: {\n mode: "off",\n },\n});\n'))),(0,r.yg)("h3",{id:"defaultvaluequeryoptions"},"defaultValueQueryOptions"),(0,r.yg)(Q,{id:"defaultvaluequeryoptions",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"When the ",(0,r.yg)("inlineCode",{parentName:"p"},"defaultValue")," property is given, the ",(0,r.yg)("inlineCode",{parentName:"p"},"useMany")," data hook is called for the selected records. With this property, you can change the options of this query. If not given, the values g
1iven in ",(0,r.yg)("inlineCode",{parentName:"p"},"queryOptions")," will be used."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'const { options } = useSelect({\n defaultValueQueryOptions: {\n onSuccess: (data) => {\n console.log("triggers when on query return on success");\n },\n },\n});\n'))),(0,r.yg)("h3",{id:"onsearch"},"onSearch"),(0,r.yg)(Q,{id:"onsearch",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"onSearch")," allows us to ",(0,r.yg)("inlineCode",{parentName:"p"},"AutoComplete")," the ",(0,r.yg)("inlineCode",{parentName:"p"},"options"),"."),(0,r.yg)(m,{mdxType:"OnSearchLivePreview"}),(0,r.yg)("p",null,"If ",(0,r.yg)("inlineCode",{parentName:"p"},"onSearch")," is used, it will override the existing ",(0,r.yg)("inlineCode",{parentName:"p"},"filters"),"."),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/core/interface-references#crudfilters"},(0,r.yg)("inlineCode",{parentName:"a"},"CrudFilters")," interface documentation ","\u2192")))),(0,r.yg)("h4",{id:"client-side-filtering"},"Client-side filtering"),(0,r.yg)(Q,{id:"client-side-filtering",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Sometimes, you may want to filter the options on the client-side. You can do this by passing the ",(0,r.yg)("inlineCode",{parentName:"p"},"onSearch")," function as ",(0,r.yg)("inlineCode",{parentName:"p"},"undefined"),". This will disable the server-side filtering and will filter the options on the client-side. Set the ",(0,r.yg)("inlineCode",{parentName:"p"},"searchValue")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"onSearchChange")," properties to enable the search input."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'const { selectProps } = useSelect({\n resource: "categories",\n});\n\n// highlight-next-line\nconst [searchValue, onSearchChange] = useState("");\n\n<Select\n {...selectProps}\n // highlight-start\n onSearch={undefined}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n // highlight-end\n/>;\n'))),(0,r.yg)("h3",{id:"meta"},"meta"),(0,r.yg)(Q,{id:"meta",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("inlineCode",{parentName:"p"},"meta")," is a special property that can be used to pass additional information to data provider methods for the following purposes:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},"Customizing the data provider methods for specific use cases."),(0,r.yg)("li",{parentName:"ul"},"Generating GraphQL queries using plain JavaScript Objects (JSON).")),(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},"For more information, refer to the ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/guides-concepts/general-concepts/#meta-concept"},(0,r.yg)("inlineCode",{parentName:"a"},"meta")," section of the General Concepts documentation ","\u2192"))),(0,r.yg)("p",null,"In the following example, we pass the ",(0,r.yg)("inlineCode",{parentName:"p"},"headers")," property in the ",(0,r.yg)("inlineCode",{parentName:"p"},"meta")," object to the ",(0,r.yg)("inlineCode",{parentName:"p"},"create")," method. With similar logic, you can pass any properties to specifically handle the data provider methods."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n // highlight-start\n meta: {\n headers: { "x-meta-data": "true" },\n },\n // highlight-end\n});\n\nconst myDataProvider = {\n //...\n getList: async ({\n resource,\n pagination,\n sorters,\n filters,\n // highlight-next-line\n meta,\n }) => {\n // highlight-next-line\n const headers = meta?.headers ?? {};\n const url = `${apiUrl}/${resource}`;\n //...\n //...\n // highlight-next-line\n const { data, headers } = await httpClient.get(`${url}`, { headers });\n return {\n data,\n };\n },\n //...\n};\n'))),(0,r.yg)("h3",{id:"dataprovidername"},"dataProviderName"),(0,r.yg)(Q,{id:"dataprovidername",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"If there is more than one ",(0,r.yg)("inlineCode",{parentName:"p"},"dataProvider"),", you can specify which one to use by passing the ",(0,r.yg)("inlineCode",{parentName:"p"},"dataProviderName")," prop. It is useful when you have a different data provider for different resources."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n dataProviderName: "second-data-provider",\n});\n'))),(0,r.yg)("h3",{id:"successnotification"},"successNotification"),(0,r.yg)(Q,{id:"successnotification",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},(0,r.yg)("a",{parentName:"p",href:"/core/docs/notification/notification-provider"},(0,r.yg)("inlineCode",{parentName:"a"},"NotificationProvider"))," is required for this prop to work.")),(0,r.yg)("p",null,"After data is fetched successfully, ",(0,r.yg)("inlineCode",{parentName:"p"},"useSelect")," can call ",(0,r.yg)("inlineCode",{parentName:"p"},"open")," function from ",(0,r.yg)("inlineCode",{parentName:"p"},"NotificationProvider")," to show a success notification. With this prop, you can customize the success notification."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n successNotification: (data, values, resource) => {\n return {\n message: `${data.title} Successfully fetched.`,\n description: "Success with no errors",\n type: "success",\n };\n },\n});\n'))),(0,r.yg)("h3",{id:"errornotification"},"errorNotification"),(0,r.yg)(Q,{id:"errornotification",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},(0,r.yg)("a",{parentName:"p",href:"/core/docs/notification/notification-provider"},(0,r.yg)("inlineCode",{parentName:"a"},"NotificationProvider"))," is required for this prop to work.")),(0,r.yg)("p",null,"After data fetching is failed, ",(0,r.yg)("inlineCode",{parentName:"p"},"useSelect")," will call ",(0,r.yg)("inlineCode",{parentName:"p"},"open")," function from ",(0,r.yg)("inlineCode",{parentName:"p"},"NotificationProvider")," to show a error notification. With this prop, you can customize the error notification."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n errorNotification: (data, values, resource) => {\n return {\n message: `Something went wrong when getting ${data.id}`,\n description: "Error",\n type: "error",\n };\n },\n});\n'))),(0,r.yg)("h3",{id:"livemode"},"liveMode"),(0,r.yg)(Q,{id:"livemode",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},(0,r.yg)("a",{parentName:"p",href:"/core/docs/realtime/live-provider"},(0,r.yg)("inlineCode",{parentName:"a"},"LiveProvider"))," is required for this prop to work.")),(0,r.yg)("p",null,'Determines whether to update data automatically ("auto") or not ("manual") if a related live event is received. It can be used to update and show data in Realtime throughout your app.'),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n liveMode: "auto",\n});\n'))),(0,r.yg)("h3",{id:"onliveevent"},"onLiveEvent"),(0,r.yg)(Q,{id:"onliveevent",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},(0,r.yg)("a",{parentName:"p",href:"/core/docs/realtime/live-provider"},(0,r.yg)("inlineCode",{parentName:"a"},"LiveProvider"))," is required for this prop to work.")),(0,r.yg)("p",null,"The callback function that is executed when new events from a subscription are arrived."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"useSelect({\n onLiveEvent: (event) => {\n console.log(event);\n },\n});\n"))),(0,r.yg)("h3",{id:"liveparams"},"liveParams"),(0,r.yg)(Q,{id:"liveparams",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("blockquote",null,(0,r.yg)("p",{parentName:"blockquote"},(0,r.yg)("a",{parentName:"p",href:"/core/docs/realtime/live-provider"},(0,r.yg)("inlineCode",{parentName:"a"},"LiveProvider"))," is required for this prop to work.")),(0,r.yg)("p",null,"Params to pass to liveProvider's ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/realtime/live-provider#subscribe"},"subscribe")," method.")),(0,r.yg)("h3",{id:"overtimeoptions"},"overtimeOptions"),(0,r.yg)(Q,{id:"overtimeoptions",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"If you want loading overtime for the request, you can pass the ",(0,r.yg)("inlineCode",{parentName:"p"},"overtimeOptions")," prop to the this hook. It is useful when you want to show a loading indicator when the request takes too long.\n",(0,r.yg)("inlineCode",{parentName:"p"},"interval")," is the time interval in milliseconds while ",(0,r.yg)("inlineCode",{parentName:"p"},"onInterval")," is the function that will be called on each interval."),(0,r.yg)("p",null,"Return ",(0,r.yg)("inlineCode",{parentName:"p"},"overtime")," object from this hook. ",(0,r.yg)("inlineCode",{parentName:"p"},"elapsedTime")," is the elapsed time in milliseconds. It becomes ",(0,r.yg)("inlineCode",{parentName:"p"},"undefined")," when the request is completed."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"const { overtime } = useSelect({\n //...\n overtimeOptions: {\n interval: 1000,\n onInterval(elapsedInterval) {\n console.log(elapsedInterval);\n },\n },\n});\n\nconsole.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...\n\n// You can use it like this:\n{\n elapsedTime >= 4000 && <div>this takes a bit longer than expected</div>;\n}
1\n"))),(0,r.yg)("h3",{id:"sort-"},(0,r.yg)("del",{parentName:"h3"},"sort")," ",(0,r.yg)(B,{deprecated:!0,mdxType:"PropTag"})),(0,r.yg)(Q,{id:"sort-",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Use ",(0,r.yg)("inlineCode",{parentName:"p"},"sorters")," instead.")),(0,r.yg)("h3",{id:"haspagination-"},(0,r.yg)("del",{parentName:"h3"},"hasPagination")," ",(0,r.yg)(B,{deprecated:!0,mdxType:"PropTag"})),(0,r.yg)(Q,{id:"haspagination-",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Use ",(0,r.yg)("inlineCode",{parentName:"p"},"pagination.mode")," instead.")),(0,r.yg)("h2",{id:"faq"},"FAQ"),(0,r.yg)("h3",{id:"how-to-add-search-to-options-autocomplete"},"How to add search to options (Autocomplete)?"),(0,r.yg)(Q,{id:"how-to-add-search-to-options-autocomplete",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("a",{parentName:"p",href:"/core/docs/data/hooks/use-select#onsearch"},(0,r.yg)("inlineCode",{parentName:"a"},"onSearch"))," is a function that is used to set the search value. It is useful when you want to search for a specific value. A simple example of this is shown below."),(0,r.yg)(m,{mdxType:"OnSearchLivePreview"})),(0,r.yg)("h3",{id:"how-to-ensure-defaultvalue-is-included-in-the-options"},"How to ensure ",(0,r.yg)("inlineCode",{parentName:"h3"},"defaultValue")," is included in the options?"),(0,r.yg)(Q,{id:"how-to-ensure-defaultvalue-is-included-in-the-options",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"In some cases we only have ",(0,r.yg)("inlineCode",{parentName:"p"},"id"),", it may be necessary to show it selected in the selection box. This hook sends the request via ",(0,r.yg)("a",{parentName:"p",href:"/core/docs/data/hooks/use-many"},(0,r.yg)("inlineCode",{parentName:"a"},"useMany")),", gets the data and mark as selected."),(0,r.yg)(k,{mdxType:"DefaultValueLivePreview"})),(0,r.yg)("h3",{id:"how-to-change-the-label-and-value-properties-in-options"},"How to change the ",(0,r.yg)("inlineCode",{parentName:"h3"},"label")," and ",(0,r.yg)("inlineCode",{parentName:"h3"},"value")," properties in options?"),(0,r.yg)(Q,{id:"how-to-change-the-label-and-value-properties-in-options",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,(0,r.yg)("a",{parentName:"p",href:"/core/docs/data/hooks/use-select#optionlabel-and-optionvalue"},(0,r.yg)("inlineCode",{parentName:"a"},"optionLabel")," and ",(0,r.yg)("inlineCode",{parentName:"a"},"optionValue"))," are used to change the value of your options.\nThe default values are ",(0,r.yg)("inlineCode",{parentName:"p"},'optionsLabel="title"')," and ",(0,r.yg)("inlineCode",{parentName:"p"},'optionsValue="id"'),"."),(0,r.yg)("p",null,"To change to ",(0,r.yg)("inlineCode",{parentName:"p"},"name")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"categoryId"),";"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'useSelect({\n optionLabel: "name",\n optionValue: "categoryId",\n});\n'))),(0,r.yg)("h3",{id:"can-i-create-the-options-manually"},"Can I create the options manually?"),(0,r.yg)(Q,{id:"can-i-create-the-options-manually",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Sometimes it may not be enough to create ",(0,r.yg)("inlineCode",{parentName:"p"},"optionLabel")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"optionValue")," options. In this case we create options with ",(0,r.yg)("inlineCode",{parentName:"p"},"query"),"."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},"const { query } = useSelect();\n\nconst options = query.data?.data.map((item) => ({\n label: item.title,\n value: item.id,\n}));\n\nreturn <Select options={options} />;\n"))),(0,r.yg)("h3",{id:"how-do-i-use-it-with-crud-components-and-useform"},"How do I use it with ",(0,r.yg)("inlineCode",{parentName:"h3"},"CRUD")," components and ",(0,r.yg)("inlineCode",{parentName:"h3"},"useForm"),"?"),(0,r.yg)(Q,{id:"how-do-i-use-it-with-crud-components-and-useform",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)(F,{mdxType:"CrudLivePreview"})),(0,r.yg)("h2",{id:"api-reference"},"API Reference"),(0,r.yg)("h3",{id:"properties-1"},"Properties"),(0,r.yg)(Q,{id:"properties-1",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)(X,{module:"@refinedev/mantine/useSelect",mdxType:"PropsTable"})),(0,r.yg)("h3",{id:"type-parameters"},"Type Parameters"),(0,r.yg)(Q,{id:"type-parameters",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("table",null,(0,r.yg)("thead",{parentName:"table"},(0,r.yg)("tr",{parentName:"thead"},(0,r.yg)("th",{parentName:"tr",align:null},"Property"),(0,r.yg)("th",{parentName:"tr",align:null},"Description"),(0,r.yg)("th",{parentName:"tr",align:null},"Type"),(0,r.yg)("th",{parentName:"tr",align:null},"Default"))),(0,r.yg)("tbody",{parentName:"table"},(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"TQueryFnData"),(0,r.yg)("td",{parentName:"tr",align:null},"Result data returned by the query function. Extends ",(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#baserecord"}
1,(0,r.yg)("inlineCode",{parentName:"a"},"BaseRecord"))),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#baserecord"},(0,r.yg)("inlineCode",{parentName:"a"},"BaseRecord"))),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#baserecord"},(0,r.yg)("inlineCode",{parentName:"a"},"BaseRecord")))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"TError"),(0,r.yg)("td",{parentName:"tr",align:null},"Custom error object that extends ",(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#httperror"},(0,r.yg)("inlineCode",{parentName:"a"},"HttpError"))),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#httperror"},(0,r.yg)("inlineCode",{parentName:"a"},"HttpError"))),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#httperror"},(0,r.yg)("inlineCode",{parentName:"a"},"HttpError")))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"TData"),(0,r.yg)("td",{parentName:"tr",align:null},"Result data returned by the ",(0,r.yg)("inlineCode",{parentName:"td"},"select")," function. Extends ",(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#baserecord"},(0,r.yg)("inlineCode",{parentName:"a"},"BaseRecord")),". If not specified, the value of ",(0,r.yg)("inlineCode",{parentName:"td"},"TQueryFnData")," will be used as the default value."),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"/core/docs/core/interface-references#baserecord"},(0,r.yg)("inlineCode",{parentName:"a"},"BaseRecord"))),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"TQueryFnData")))))),(0,r.yg)("h3",{id:"return-values"},"Return values"),(0,r.yg)("table",null,(0,r.yg)("thead",{parentName:"table"},(0,r.yg)("tr",{parentName:"thead"},(0,r.yg)("th",{parentName:"tr",align:null},"Property"),(0,r.yg)("th",{parentName:"tr",align:null},"Description"),(0,r.yg)("th",{parentName:"tr",align:null},"Type"))),(0,r.yg)("tbody",{parentName:"table"},(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"selectProps"),(0,r.yg)("td",{parentName:"tr",align:null},"Mantine Select props"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"#selectpropstype"},(0,r.yg)("inlineCode",{parentName:"a"},"SelectPropsType")))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"query"),(0,r.yg)("td",{parentName:"tr",align:null},"Result of the query of a record"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"https://react-query.tanstack.com/reference/useQuery"},(0,r.yg)("inlineCode",{parentName:"a"},"QueryObserverResult<{ data: TData }>")))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"defaultValueQuery"),(0,r.yg)("td",{parentName:"tr",align:null},"Result of the query of a ",(0,r.yg)("inlineCode",{parentName:"td"},"defaultValue")," record"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("a",{parentName:"td",href:"https://react-query.tanstack.com/reference/useQuery"},(0,r.yg)("inlineCode",{parentName:"a"},"QueryObserverResult<{ data: TData }>")))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"defaultValueQueryOnSuccess"),(0,r.yg)("td",{parentName:"tr",align:null},"Default value onSuccess method"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"() => void"))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"overtime"),(0,r.yg)("td",{parentName:"tr",align:null},"Overtime loading props"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"{ elapsedTime?: number }"))))),(0,r.yg)("blockquote",null,(0,r.yg)("h4",{parentName:"blockquote",id:"selectpropstype"},"SelectPropsType"),(0,r.yg)("table",{parentName:"blockquote"},(0,r.yg)("thead",{parentName:"table"},(0,r.yg)("tr",{parentName:"thead"},(0,r.yg)("th",{parentName:"tr",align:null},"Property"),(0,r.yg)("th",{parentName:"tr",align:null},"Description"),(0,r.yg)("th",{parentName:"tr",align:null},"Type"))),(0,r.yg)("tbody",{parentName:"table"},(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"data"),(0,r.yg)("td",{parentName:"tr",align:null},"Select data used to renderer items in dropdown"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"(string \\| SelectItem)[]"))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"searchable"),(0,r.yg)("td",{parentName:"tr",align:null},"Set to true to enable search"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"boolean"))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"onSearchChange"),(0,r.yg)("td",{parentName:"tr",align:null},"Called each time search value changes"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"(query: string) => void"))),(0,r.yg)("tr",{parentName:"tbody"},(0,r.yg)("td",{parentName:"tr",align:null},"filterDataOnExactSearchMatch"),(0,r.yg)("td",{parentName:"tr",align:null},"Should data be filtered when search value exactly matches selected item"),(0,r.yg)("td",{parentName:"tr",align:null},(0,r.yg)("inlineCode",{parentName:"td"},"boolean"))))))),(0,r.yg)("h2",{id:"example"},"Example"),(0,r.yg)(Q,{id:"example",mdxType:"DocThumbsUpDownFeedbackWidget"}
1,(0,r.yg)(z,{path:"base-mantine",mdxType:"CodeSandboxExample"})))}_.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.