[{"_1":2,"_441":-5,"_442":-5},"loaderData",{"_3":4,"_42":-7,"_43":44,"_207":208},"root",{"_5":6,"_7":8,"_29":30},"lang","no","menu",[9,14,17,20,23,26],{"_10":11,"_12":13},"name","navigation.fundamentals","href","/no/fundamentals",{"_10":15,"_12":16},"navigation.best-practices","/no/best-practices",{"_10":18,"_12":19},"navigation.patterns","/no/patterns",{"_10":21,"_12":22},"navigation.blog","/no/blog",{"_10":24,"_12":25},"navigation.components","/no/components",{"_10":27,"_12":28},"navigation.theme-builder","https://theme.designsystemet.no/no","centerLinks",[31,36,39],{"_32":33,"_34":35},"text","footer.about","url","no/fundamentals/introduction/about-the-design-system",{"_32":37,"_34":38},"footer.privacy","no/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","Endringslogg","/no/components/changelog","order",1,{"_50":56,"_34":57,"_53":58},"React","/no/components/get-started/react",40,{"_50":60,"_34":61,"_53":62},"CSS","/no/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","/no/components/docs/alert",{"_50":69,"_34":70},"Avatar","/no/components/docs/avatar",{"_50":72,"_34":73},"Badge","/no/components/docs/badge",{"_50":75,"_34":76},"Breadcrumbs","/no/components/docs/breadcrumbs",{"_50":78,"_34":79},"Button","/no/components/docs/button",{"_50":81,"_34":82},"Card","/no/components/docs/card",{"_50":84,"_34":85},"Checkbox","/no/components/docs/checkbox",{"_50":87,"_34":88},"Chip","/no/components/docs/chip",{"_50":90,"_34":91},"Details","/no/components/docs/details",{"_50":93,"_34":94},"Dialog","/no/components/docs/dialog",{"_50":96,"_34":97},"Divider","/no/components/docs/divider",{"_50":99,"_34":100},"Dropdown","/no/components/docs/dropdown",{"_50":102,"_34":103},"ErrorSummary","/no/components/docs/error-summary",{"_50":105,"_34":106},"Field","/no/components/docs/field",{"_50":108,"_34":109},"Fieldset","/no/components/docs/fieldset",{"_50":111,"_34":112},"Input","/no/components/docs/input",{"_50":114,"_34":115},"Link","/no/components/docs/link",{"_50":117,"_34":118},"List","/no/components/docs/list",{"_50":120,"_34":121},"Pagination","/no/components/docs/pagination",{"_50":123,"_34":124},"Popover","/no/components/docs/popover",{"_50":126,"_34":127},"Radio","/no/components/docs/radio",{"_50":129,"_34":130},"Search","/no/components/docs/search",{"_50":132,"_34":133},"Select","/no/components/docs/select",{"_50":135,"_34":136},"Skeleton","/no/components/docs/skeleton",{"_50":138,"_34":139},"SkipLink","/no/components/docs/skip-link",{"_50":141,"_34":142},"Spinner","/no/components/docs/spinner",{"_50":144,"_34":145},"Suggestion","/no/components/docs/suggestion",{"_50":147,"_34":148},"Switch","/no/components/docs/switch",{"_50":150,"_34":151},"Table","/no/components/docs/table",{"_50":153,"_34":154},"Tabs","/no/components/docs/tabs",{"_50":156,"_34":157},"Tag","/no/components/docs/tag",{"_50":159,"_34":160},"Textarea","/no/components/docs/textarea",{"_50":162,"_34":163},"Textfield","/no/components/docs/textfield",{"_50":165,"_34":166},"ToggleGroup","/no/components/docs/toggle-group",{"_50":168,"_34":169},"Tooltip","/no/components/docs/tooltip","typography",[172,175,178,181],{"_50":173,"_34":174},"Heading","/no/components/docs/heading",{"_50":176,"_34":177},"Label","/no/components/docs/label",{"_50":179,"_34":180},"Paragraph","/no/components/docs/paragraph",{"_50":182,"_34":183},"ValidationMessage","/no/components/docs/validation-message","utilities",[186,190,194,198,201],{"_50":187,"_34":188,"_53":189},"RovingFocus","/no/components/utilities/roving-focus",10,{"_50":191,"_34":192,"_53":193},"useCheckboxGroup","/no/components/utilities/use-checkbox-group",20,{"_50":195,"_34":196,"_53":197},"useRadioGroup","/no/components/utilities/use-radio-group",30,{"_50":199,"_34":200,"_53":58},"usePagination","/no/components/utilities/use-pagination",{"_50":202,"_34":203,"_53":62},"useSynchronizedAnimation","/no/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 h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return n};var x=(n,e,r)=>(r=n!=null?h(f(n)):{},a(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),b=n=>a(i({},\"__esModule\",{value:!0}),n);var d=j((M,l)=>{l.exports=_jsx_runtime});var v={};k(v,{default:()=>u,frontmatter:()=>_});var t=x(d()),_=void 0;function c(n){let e={a:\"a\",h3:\"h3\",li:\"li\",p:\"p\",span:\"span\",ul:\"ul\",...n.components},{Alert:r}=e;return r||y(\"Alert\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r,{\"data-color\":\"info\",children:(0,t.jsxs)(e.p,{children:[\"Vi jobber med \\xE5 forbedre dokumentasjonen for tilgjengelighet p\\xE5 denne komponenten. Har du sp\\xF8rsm\\xE5l eller ser noe som b\\xF8r prioriteres, ta gjerne kontakt med oss p\\xE5 \",(0,t.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" eller \",(0,t.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})}),`\n`,(0,t.jsxs)(e.h3,{id:\"tastaturnavigasjon\",children:[\"Tastaturnavigasjon\",(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#tastaturnavigasjon\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})})]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(\"kbd\",{children:\"Esc\"}),\" lukker dialogen (fokus returnerer til utl\\xF8ser)\"]}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(c,{...n})}):c(n)}function y(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(v);})();\n;return Component;","metadata",{"_50":93,"_240":241,"_242":243},"subtitle","var Component=(()=>{var x=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var t in n)c(e,t,{get:n[t],enumerable:!0})},a=(e,n,t,d)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of p(n))!g.call(e,r)&&r!==t&&c(e,r,{get:()=>n[r],enumerable:!(d=u(n,r))||d.enumerable});return e};var h=(e,n,t)=>(t=e!=null?x(f(e)):{},a(n||!e||!e.__esModule?c(t,\"default\",{value:e,enumerable:!0}):t,e)),M=e=>a(c({},\"__esModule\",{value:!0}),e);var i=_((L,s)=>{s.exports=_jsx_runtime});var k={};j(k,{default:()=>m,frontmatter:()=>D});var o=h(i()),D=void 0;function l(e){let n={code:\"code\",p:\"p\",...e.components};return(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:\"Dialog\"}),\" lar deg lage modale og ikke-modale dialoger basert p\\xE5 HTML-elementet \",(0,o.jsx)(n.code,{children:\"dialog\"}),\".\"]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}return M(k);})();\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` lar deg lage modale og ikke-modale dialoger basert på HTML-elementet `dialog`.",{"_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},"Tastaturnavigasjon","id","tastaturnavigasjon","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 `