import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Solid supports custom directives through the ", jsx(_components.code, {
        children: "use:"
      }), " namespace. This is just a syntactic sugar over ", jsx(_components.code, {
        children: "ref"
      }), ", but is useful in that it resembles typical bindings and there can be multiple bindings on the same element without conflict. This makes it a better tool for reusable DOM element behavior."]
    }), "\n", jsxs(_components.p, {
      children: ["A custom directive is a function taking arguments ", jsx(_components.code, {
        children: "(element, valueAccesor)"
      }), ", where ", jsx(_components.code, {
        children: "element"
      }), " is the DOM element with the ", jsx(_components.code, {
        children: "use:"
      }), " attribute, and ", jsx(_components.code, {
        children: "valueAccessor"
      }), " is a getter function for the value assigned to the attribute. As long as the function is imported in scope, you can use it with ", jsx(_components.code, {
        children: "use:"
      }), "."]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["Important: ", jsx(_components.code, {
          children: "use:"
        }), " is detected by the compiler to be transformed, and the function is required to be in scope, so it cannot be part of spreads or applied to a component."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["In the example, we are going to make a wrapper for basic click-outside behavior to close a popup or modal. First we need to import and use our ", jsx(_components.code, {
        children: "clickOutside"
      }), " directive on our element:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<div ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"modal\""
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "use"
        }), ":clickOutside={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setShow"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ")}>\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Some"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Modal"
        }), "\n</div>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Open ", jsx(_components.code, {
        children: "click-outside.tsx"
      }), ", where we will be defining our custom directive. This directive defines a click handler that we bind to the body and cleanup when it is time:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "el, accessor"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onClick"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "e"
        }), ") => !el.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "contains"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ") && ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "accessor"
        }), "()?.();\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick);\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick));\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Now you should be able to go back and forth between opening and closing the modal."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-a87c2b9b.js.map
