{"action":"created","issue":{"url":"https://api.github.com/repos/theKashey/react-focus-lock/issues/44","repository_url":"https://api.github.com/repos/theKashey/react-focus-lock","labels_url":"https://api.github.com/repos/theKashey/react-focus-lock/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/theKashey/react-focus-lock/issues/44/comments","events_url":"https://api.github.com/repos/theKashey/react-focus-lock/issues/44/events","html_url":"https://github.com/theKashey/react-focus-lock/issues/44","id":364570750,"node_id":"MDU6SXNzdWUzNjQ1NzA3NTA=","number":44,"title":"Pass all the rest props to Lock div","user":{"login":"klimashkin","id":576077,"node_id":"MDQ6VXNlcjU3NjA3Nw==","avatar_url":"https://avatars1.githubusercontent.com/u/576077?v=4","gravatar_id":"","url":"https://api.github.com/users/klimashkin","html_url":"https://github.com/klimashkin","followers_url":"https://api.github.com/users/klimashkin/followers","following_url":"https://api.github.com/users/klimashkin/following{/other_user}","gists_url":"https://api.github.com/users/klimashkin/gists{/gist_id}","starred_url":"https://api.github.com/users/klimashkin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/klimashkin/subscriptions","organizations_url":"https://api.github.com/users/klimashkin/orgs","repos_url":"https://api.github.com/users/klimashkin/repos","events_url":"https://api.github.com/users/klimashkin/events{/privacy}","received_events_url":"https://api.github.com/users/klimashkin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-09-27T17:08:10Z","updated_at":"2018-09-28T11:37:17Z","closed_at":null,"author_association":"NONE","body":"Hi! I want to use react-focus-lock for creating Modal with animation, but I don't want to produce more divs than necessary.\r\n\r\nWould be great if `lockProps` in `FocusLock` could be created using rest operator from own props. In that case you don't need to manually pass className from parent to div like you do now.\r\nLike\r\n```js\r\nconst {\r\n      children,\r\n      disabled,\r\n      noFocusGuards,\r\n      persistentFocus,\r\n      autoFocus,\r\n      allowTextSelection,\r\n      group,\r\n      whiteList,\r\n      ...lockProps\r\n} = this.props;\r\n\r\nconst { observed } = this.state;\r\n\r\nif (typeof allowTextSelection !== 'undefined') {\r\n   // eslint-disable-next-line no-console\r\n  console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');\r\n}\r\n\r\nlockProps.ref = this.setObserveNode;\r\nlockProps.onBlur = onBlur;\r\nlockProps.onFocus = onFocus;\r\nlockProps[constants.FOCUS_GROUP] = group;\r\nlockProps[constants.FOCUS_DISABLED] = disabled && 'disabled';\r\n\r\nreturn (\r\n      <Fragment>\r\n        {!noFocusGuards && [\r\n          <div key=\"guard-first\" data-focus-guard tabIndex={disabled ? -1 : 0} style={hidden} />, // nearest focus guard\r\n          <div key=\"guard-nearest\" data-focus-guard tabIndex={disabled ? -1 : 1} style={hidden} />, // first tabbed element guard\r\n        ]}\r\n        <div {...lockProps}>\r\n        ....\r\n```\r\nThe point is to take out of props object all own props and pass down all the rest as is. In that case I can pass any valid `div` props to `FocusLock`. In my case I want to wait for transitionEnd on modal animation, like `<FocusLock className={...} onTransitionEnd={...} onClick={...}>`.\r\nAs you also might have noticed I assign other specific props directly to `lockProps` and just write `<div {...lockProps}>` that would be transformed to `createElement('div', lockProps, ..)`, to avoid one more spread operator on jsx (that could be useful if focus-lock is being rendered inside spring transitions, like in react-motions, react-spring).\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/theKashey/react-focus-lock/issues/comments/425408427","html_url":"https://github.com/theKashey/react-focus-lock/issues/44#issuecomment-425408427","issue_url":"https://api.github.com/repos/theKashey/react-focus-lock/issues/44","id":425408427,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNTQwODQyNw==","user":{"login":"theKashey","id":582410,"node_id":"MDQ6VXNlcjU4MjQxMA==","avatar_url":"https://avatars0.githubusercontent.com/u/582410?v=4","gravatar_id":"","url":"https://api.github.com/users/theKashey","html_url":"https://github.com/theKashey","followers_url":"https://api.github.com/users/theKashey/followers","following_url":"https://api.github.com/users/theKashey/following{/other_user}","gists_url":"https://api.github.com/users/theKashey/gists{/gist_id}","starred_url":"https://api.github.com/users/theKashey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/theKashey/subscriptions","organizations_url":"https://api.github.com/users/theKashey/orgs","repos_url":"https://api.github.com/users/theKashey/repos","events_url":"https://api.github.com/users/theKashey/events{/privacy}","received_events_url":"https://api.github.com/users/theKashey/received_events","type":"User","site_admin":false},"created_at":"2018-09-28T11:37:17Z","updated_at":"2018-09-28T11:37:17Z","author_association":"OWNER","body":"v.1.14.0"}}
{"actor":{"display_login":"theKashey"}}