[{"_1":2,"_441":-5,"_442":-5},"loaderData",{"_3":4,"_42":-7,"_43":44,"_207":208},"root",{"_5":6,"_7":8,"_29":30},"lang","en","menu",[9,14,17,20,23,26],{"_10":11,"_12":13},"name","navigation.fundamentals","href","/en/fundamentals",{"_10":15,"_12":16},"navigation.best-practices","/en/best-practices",{"_10":18,"_12":19},"navigation.patterns","/en/patterns",{"_10":21,"_12":22},"navigation.blog","/en/blog",{"_10":24,"_12":25},"navigation.components","/en/components",{"_10":27,"_12":28},"navigation.theme-builder","https://theme.designsystemet.no/en","centerLinks",[31,36,39],{"_32":33,"_34":35},"text","footer.about","url","en/fundamentals/introduction/about-the-design-system",{"_32":37,"_34":38},"footer.privacy","en/fundamentals/privacy-policy",{"_32":40,"_34":41},"footer.accessibility","https://uustatus.no/nb/erklaringer/publisert/faeb324d-9b3f-40b0-b715-92cac356a916","layouts/root/layout","layouts/components/layout",{"_5":6,"_45":46,"_204":205},"cats",{"_47":48,"_63":64,"_170":171,"_184":185},"getStarted",[49,55,59],{"_50":51,"_34":52,"_53":54},"title","Changelog","/en/components/changelog","order",1,{"_50":56,"_34":57,"_53":58},"React","/en/components/get-started/react",40,{"_50":60,"_34":61,"_53":62},"CSS","/en/components/get-started/css",50,"components",[65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164,167],{"_50":66,"_34":67},"Alert","/en/components/docs/alert",{"_50":69,"_34":70},"Avatar","/en/components/docs/avatar",{"_50":72,"_34":73},"Badge","/en/components/docs/badge",{"_50":75,"_34":76},"Breadcrumbs","/en/components/docs/breadcrumbs",{"_50":78,"_34":79},"Button","/en/components/docs/button",{"_50":81,"_34":82},"Card","/en/components/docs/card",{"_50":84,"_34":85},"Checkbox","/en/components/docs/checkbox",{"_50":87,"_34":88},"Chip","/en/components/docs/chip",{"_50":90,"_34":91},"Details","/en/components/docs/details",{"_50":93,"_34":94},"Dialog","/en/components/docs/dialog",{"_50":96,"_34":97},"Divider","/en/components/docs/divider",{"_50":99,"_34":100},"Dropdown","/en/components/docs/dropdown",{"_50":102,"_34":103},"ErrorSummary","/en/components/docs/error-summary",{"_50":105,"_34":106},"Field","/en/components/docs/field",{"_50":108,"_34":109},"Fieldset","/en/components/docs/fieldset",{"_50":111,"_34":112},"Input","/en/components/docs/input",{"_50":114,"_34":115},"Link","/en/components/docs/link",{"_50":117,"_34":118},"List","/en/components/docs/list",{"_50":120,"_34":121},"Pagination","/en/components/docs/pagination",{"_50":123,"_34":124},"Popover","/en/components/docs/popover",{"_50":126,"_34":127},"Radio","/en/components/docs/radio",{"_50":129,"_34":130},"Search","/en/components/docs/search",{"_50":132,"_34":133},"Select","/en/components/docs/select",{"_50":135,"_34":136},"Skeleton","/en/components/docs/skeleton",{"_50":138,"_34":139},"SkipLink","/en/components/docs/skip-link",{"_50":141,"_34":142},"Spinner","/en/components/docs/spinner",{"_50":144,"_34":145},"Suggestion","/en/components/docs/suggestion",{"_50":147,"_34":148},"Switch","/en/components/docs/switch",{"_50":150,"_34":151},"Table","/en/components/docs/table",{"_50":153,"_34":154},"Tabs","/en/components/docs/tabs",{"_50":156,"_34":157},"Tag","/en/components/docs/tag",{"_50":159,"_34":160},"Textarea","/en/components/docs/textarea",{"_50":162,"_34":163},"Textfield","/en/components/docs/textfield",{"_50":165,"_34":166},"ToggleGroup","/en/components/docs/toggle-group",{"_50":168,"_34":169},"Tooltip","/en/components/docs/tooltip","typography",[172,175,178,181],{"_50":173,"_34":174},"Heading","/en/components/docs/heading",{"_50":176,"_34":177},"Label","/en/components/docs/label",{"_50":179,"_34":180},"Paragraph","/en/components/docs/paragraph",{"_50":182,"_34":183},"ValidationMessage","/en/components/docs/validation-message","utilities",[186,190,194,198,201],{"_50":187,"_34":188,"_53":189},"RovingFocus","/en/components/utilities/roving-focus",10,{"_50":191,"_34":192,"_53":193},"useCheckboxGroup","/en/components/utilities/use-checkbox-group",20,{"_50":195,"_34":196,"_53":197},"useRadioGroup","/en/components/utilities/use-radio-group",30,{"_50":199,"_34":200,"_53":58},"usePagination","/en/components/utilities/use-pagination",{"_50":202,"_34":203,"_53":62},"useSynchronizedAnimation","/en/components/utilities/use-synchronized-animation","sidebarSuffix",{"_63":206,"_170":206},"/accessibility","components-page",{"_209":210,"_211":212,"_234":235,"_236":237,"_238":239,"_244":245,"_272":273,"_274":275,"_301":302,"_305":306,"_313":314,"_431":432,"_439":440},"component","dialog","stories",[213,219,222,225,228,231],{"_10":214,"_215":216,"_217":218},"Preview","code","const Preview = () => {\n return (\n \n Open Dialog\n \n \n );\n};","file","dialog.stories.tsx",{"_10":220,"_215":221,"_217":218},"WithRef","const WithRef = () => {\n const dialogRef = useRef(null);\n\n return (\n <>\n \n \n \n );\n};",{"_10":223,"_215":224,"_217":218},"WithForm","const WithForm = () => {\n const dialogRef = useRef(null);\n const [input, setInput] = useState('');\n\n return (\n \n Open Dialog\n \n \n );\n};",{"_10":226,"_215":227,"_217":218},"WithFormEn","const WithFormEn = () => {\n const dialogRef = useRef(null);\n const [input, setInput] = useState('');\n\n return (\n \n Open dialog\n \n \n );\n};",{"_10":229,"_215":230,"_217":218},"WithBlocks","const WithBlocks = () => {\n return (\n \n Open Dialog\n \n \n );\n};",{"_10":232,"_215":233,"_217":218},"CloseWithClickOutside","const CloseWithClickOutside = () => {\n return (\n \n Open Dialog\n \n \n );\n};","dodont",[],"mdxCode","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!g.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=m(e,i))||s.enumerable});return t};var y=(t,e,o)=>(o=t!=null?u(f(t)):{},a(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>a(r({},\"__esModule\",{value:!0}),t);var d=b((M,c)=>{c.exports=_jsx_runtime});var v={};x(v,{default:()=>h,frontmatter:()=>k});var n=y(d()),k=void 0;function l(t){let e={a:\"a\",h3:\"h3\",li:\"li\",p:\"p\",span:\"span\",ul:\"ul\",...t.components},{Alert:o}=e;return o||j(\"Alert\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{\"data-color\":\"info\",children:(0,n.jsxs)(e.p,{children:[\"We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on \",(0,n.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})}),`\n`,(0,n.jsxs)(e.h3,{id:\"keyboard-navigation\",children:[\"Keyboard navigation\",(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#keyboard-navigation\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})})]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Esc\"}),\" closes the dialog (focus returns to the trigger)\"]}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(v);})();\n;return Component;","metadata",{"_50":93,"_240":241,"_242":243},"subtitle","var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var o in n)d(e,o,{get:n[o],enumerable:!0})},a=(e,n,o,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of f(n))!p.call(e,c)&&c!==o&&d(e,c,{get:()=>n[c],enumerable:!(r=x(n,c))||r.enumerable});return e};var M=(e,n,o)=>(o=e!=null?u(h(e)):{},a(n||!e||!e.__esModule?d(o,\"default\",{value:e,enumerable:!0}):o,e)),g=e=>a(d({},\"__esModule\",{value:!0}),e);var l=_((y,s)=>{s.exports=_jsx_runtime});var b={};j(b,{default:()=>m,frontmatter:()=>D});var t=M(l()),D=void 0;function i(e){let n={code:\"code\",p:\"p\",...e.components};return(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:\"Dialog\"}),\" allows you to create both modal and non-modal dialogs based on the HTML \",(0,t.jsx)(n.code,{children:\"dialog\"}),\" element.\"]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(i,{...e})}):i(e)}return g(b);})();\n;return Component;","image","Dialog.svg","linkMetadata",[246,248,252,256,258,260,263,265,267,270],{"_50":247},"Dialog - Designsystemet",{"_10":249,"_250":251},"description","content","`Dialog` allows you to create both modal and non-modal dialogs based on the HTML `dialog` element.",{"_253":254,"_250":255},"property","og:image","/img/designsystemet-meta.png",{"_253":257,"_250":93},"og:title",{"_253":259,"_250":251},"og:description",{"_253":261,"_250":262},"og:url","https://designsystemet.no",{"_253":264,"_250":93},"twitter:title",{"_253":266,"_250":251},"twitter:description",{"_253":268,"_250":269},"twitter:card","summary_large_image",{"_253":271,"_250":255},"twitter:image","cssSource",".ds-dialog{--dsc-dialog-backdrop-background:rgba(0,0,0,.5);--dsc-dialog-background:var(--ds-color-neutral-surface-default);--dsc-dialog-icon-spacing:var(--ds-size-3);--dsc-dialog-icon-url:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E\");--dsc-dialog-color:var(--ds-color-neutral-text-default);--dsc-dialog-divider-border-width:var(--ds-border-width-default);--dsc-dialog-divider-border-style:solid;--dsc-dialog-divider-border-color:var(--ds-color-neutral-border-subtle);--dsc-dialog-border-width:var(--ds-border-width-default);--dsc-dialog-border-style:solid;--dsc-dialog-border-color:var(--ds-color-neutral-border-subtle);--dsc-dialog-max-height:80vh;--dsc-dialog-max-width:40rem;--dsc-dialog-spacing:var(--ds-size-6);--_dsc-dialog-icon-top-right-margin:calc(var(--dsc-dialog-spacing)*-1 + var(--dsc-dialog-icon-spacing));animation:ds-dialog-fade-in .2s forwards;background:var(--dsc-dialog-background);border-color:var(--dsc-dialog-border-color);border-radius:var(--ds-border-radius-lg);border-style:var(--dsc-dialog-border-style);border-width:var(--dsc-dialog-border-width);bottom:auto;box-shadow:var(--ds-shadow-xl);box-sizing:border-box;color:var(--dsc-dialog-color);left:50%;margin:0;max-height:var(--dsc-dialog-max-height);max-width:var(--dsc-dialog-max-width);overflow:auto;padding:var(--dsc-dialog-spacing);position:fixed;right:auto;top:50%;transform:translate(-50%,-50%);width:100%}.ds-dialog::backdrop{animation:ds-dialog-fade-in .3s ease-in-out;background:var(--dsc-dialog-backdrop-background,rgba(0,0,0,.5))}.ds-dialog[open]{animation:ds-dialog-slide-in .3s ease-in-out,ds-dialog-fade-in .3s ease-in-out}.ds-dialog:has(>.ds-dialog__block){--_dsc-dialog-icon-top-right-margin:var(--dsc-dialog-icon-spacing);padding:0}@media (prefers-reduced-motion:reduce){.ds-dialog::backdrop,.ds-dialog[open]{animation:none}}@media (max-width:40rem){.ds-dialog{border-radius:0;max-width:100%;min-width:100%}}.ds-dialog button[data-command=close]:empty:before{background:currentcolor;content:\"\";height:var(--ds-size-6);-webkit-mask:center/contain no-repeat var(--dsc-dialog-icon-url);mask:center/contain no-repeat var(--dsc-dialog-icon-url);width:var(--ds-size-6)}@media (forced-colors:active){.ds-dialog button[data-command=close]:empty:before{background:ButtonText}}.ds-dialog>button[data-command=close]:first-child{color:inherit;float:inline-end;-webkit-margin-after:var(--dsc-dialog-icon-spacing);margin-block-end:var(--dsc-dialog-icon-spacing);-webkit-margin-before:var(--_dsc-dialog-icon-top-right-margin);margin-block-start:var(--_dsc-dialog-icon-top-right-margin);-webkit-margin-end:var(--_dsc-dialog-icon-top-right-margin);margin-inline-end:var(--_dsc-dialog-icon-top-right-margin);-webkit-margin-start:var(--dsc-dialog-icon-spacing);margin-inline-start:var(--dsc-dialog-icon-spacing)}.ds-dialog>form[method=dialog]:first-child>button:only-child{color:inherit;float:inline-end;-webkit-margin-after:var(--dsc-dialog-icon-spacing);margin-block-end:var(--dsc-dialog-icon-spacing);-webkit-margin-before:var(--_dsc-dialog-icon-top-right-margin);margin-block-start:var(--_dsc-dialog-icon-top-right-margin);-webkit-margin-end:var(--_dsc-dialog-icon-top-right-margin);margin-inline-end:var(--_dsc-dialog-icon-top-right-margin);-webkit-margin-start:var(--dsc-dialog-icon-spacing);margin-inline-start:var(--dsc-dialog-icon-spacing)}:is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before{background:currentcolor;content:\"\";height:var(--ds-size-6);-webkit-mask:center/contain no-repeat var(--dsc-dialog-icon-url);mask:center/contain no-repeat var(--dsc-dialog-icon-url);width:var(--ds-size-6)}@media (forced-colors:active){:is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before{background:ButtonText}}.ds-dialog__block{padding:var(--dsc-dialog-spacing)}.ds-dialog__block+.ds-dialog__block{border-top:var(--dsc-dialog-divider-border-width) var(--dsc-dialog-divider-border-style) var(--dsc-dialog-divider-border-color)}body:has(.ds-dialog:modal){overflow:hidden}@keyframes ds-dialog-slide-in{0%{translate:0 3rem}}@keyframes ds-dialog-fade-in{0%{opacity:0}}","cssVars",{"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":287,"_293":289,"_294":291,"_295":296,"_297":298,"_299":300},"--dsc-dialog-backdrop-background","rgba(0,0,0,.5)","--dsc-dialog-background","var(--ds-color-neutral-surface-default)","--dsc-dialog-icon-spacing","var(--ds-size-3)","--dsc-dialog-icon-url","url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E\")","--dsc-dialog-color","var(--ds-color-neutral-text-default)","--dsc-dialog-divider-border-width","var(--ds-border-width-default)","--dsc-dialog-divider-border-style","solid","--dsc-dialog-divider-border-color","var(--ds-color-neutral-border-subtle)","--dsc-dialog-border-width","--dsc-dialog-border-style","--dsc-dialog-border-color","--dsc-dialog-max-height","80vh","--dsc-dialog-max-width","40rem","--dsc-dialog-spacing","var(--ds-size-6)","cssAttrs",{"_303":304},"command","close","toc",[307],{"_50":308,"_309":310,"_311":312},"Keyboard navigation","id","keyboard-navigation","level",3,"componentDocs",[315,395,410,417,424],{"_316":317,"_320":321,"_249":322,"_323":93,"_324":325,"_326":327},"tags",{"_318":319},"example","with TriggerContext\n\nOpen Dialog\n\n\nwithout TriggerContext\nconst dialogRef = useRef(null);\n\n...\n\n\n","filePath","/usr/src/app/packages/react/src/components/dialog/dialog.tsx","Dialog component, used to display a dialog dialog.","displayName","methods",[],"props",{"_328":329,"_347":348,"_365":366,"_374":375,"_380":381,"_387":388},"closeButton",{"_330":331,"_249":334,"_10":328,"_335":-7,"_336":337,"_342":343,"_344":345},"defaultValue",{"_332":333},"value","Lukk dialogvindu","Screen reader label of close button. Set false to hide the close button.","parent","declarations",[338],{"_339":340,"_10":341},"fileName","app/packages/react/src/components/dialog/dialog.tsx","TypeLiteral","required",false,"type",{"_10":346},"string | false","closedby",{"_330":349,"_249":351,"_10":347,"_335":-7,"_336":352,"_342":343,"_344":354},{"_332":350},"closerequest","Light dismiss behavior, allowing to close on backdrop click by setting `closedby=\"any\"`.\n@see [mdn closedBy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy)",[353],{"_339":340,"_10":341},{"_10":355,"_356":357,"_332":358},"enum","raw","\"none\" | \"closerequest\" | \"any\"",[359,361,363],{"_332":360},"\"none\"",{"_332":362},"\"closerequest\"",{"_332":364},"\"any\"","modal",{"_330":367,"_249":369,"_10":365,"_335":-7,"_336":370,"_342":343,"_344":372},{"_332":368},"true","Toogle modal and non-modal dialog.\n@see [mdn modal dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#creating_a_modal_dialog)",[371],{"_339":340,"_10":341},{"_10":373},"boolean","open",{"_330":-5,"_249":376,"_10":374,"_335":-7,"_336":377,"_342":343,"_344":379},"@note Unlike standard html, where the open attribute always opens a non-modal dialog, Dialog's open prop uses the `modal` prop to determine whether the Dialog is modal or non-modal",[378],{"_339":340,"_10":341},{"_10":373},"onClose",{"_330":-5,"_249":382,"_10":380,"_335":-7,"_336":383,"_342":343,"_344":385},"Callback that is called when the dialog is closed.",[384],{"_339":340,"_10":341},{"_10":386},"(event: Event) => void","asChild",{"_330":389,"_249":391,"_10":387,"_335":-7,"_336":392,"_342":343,"_344":394},{"_332":390},"false","Change the default rendered element for the one passed as a child, merging their props and behavior.\n@deprecated Will be removed in the next major version. Should always be a `