diff --git a/CHANGELOG.md b/CHANGELOG.md index 78ef66032d..e819b9ba3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Open `Popup` on `contextmenu` @jurokapsiar ([#1524](https://github.com/stardust-ui/react/pull/1524)) - Add `align` prop for `Text` component @Bugaa92 ([#1668](https://github.com/stardust-ui/react/pull/1668)) - Add `size` prop for `Button` component @layershifter ([#1716](https://github.com/stardust-ui/react/pull/1716)) +- Add `target` prop on `Provider`, allows to specify a `document` where styles should be renderer @layershifter ([#1252](https://github.com/stardust-ui/react/pull/1252)) ### Fixes - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637)) diff --git a/build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts b/build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts index 46cbb99e98..e2ddb9203f 100644 --- a/build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts +++ b/build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts @@ -1,3 +1,5 @@ +import { getPackageName } from './utils/packageNameUtils' + export default [ '@babel/runtime@7.1.2', '@babel/runtime@7.4.5', @@ -64,6 +66,6 @@ export default [ 'webpack@4.25.1', ] -export const isIgnored = (packageId): boolean => { - return packageId.startsWith('@stardust-ui/') +export const isIgnored = (packageId: string): boolean => { + return packageId.startsWith('@stardust-ui/') || getPackageName(packageId) === 'fela' } diff --git a/build/dangerjs/detectNonApprovedDependencies/utils/getVersionConstrains.ts b/build/dangerjs/detectNonApprovedDependencies/utils/getVersionConstrains.ts index 85a90d5fac..202f79339d 100644 --- a/build/dangerjs/detectNonApprovedDependencies/utils/getVersionConstrains.ts +++ b/build/dangerjs/detectNonApprovedDependencies/utils/getVersionConstrains.ts @@ -3,6 +3,7 @@ import * as fs from 'fs' import * as readPackageJson from 'read-package-json' import { getPackageName, getPackageVersion } from './packageNameUtils' +import { isIgnored } from '../approvedPackages' type PackageJson = { dependencies?: string[] @@ -75,18 +76,22 @@ export const getDependenciesVersionConstraints = async ( let detectedConstraints: Constraints = {} const dependenciesWithConstraints = (await parsePackageJson(packageJsonPath)).dependencies - const pendingTasks = dependenciesWithConstraints.map(async dependency => { - detectedConstraints[dependency] = dependencyChain - const dependencyPackageJson = findPackageJsonOf(dependency, path.dirname(basePath)) + const pendingTasks = dependenciesWithConstraints.map(async dependencyPackageId => { + if (isIgnored(dependencyPackageId)) { + return + } + + detectedConstraints[dependencyPackageId] = dependencyChain + const dependencyPackageJson = findPackageJsonOf(dependencyPackageId, basePath) if (!dependencyPackageJson) { throw new Error( - `Package.json wasn't found for the following dependency: ${dependency} in ${packageJsonPath}`, + `Package.json wasn't found for the following dependency: ${dependencyPackageId} in ${packageJsonPath}`, ) } const newDepChain = [...dependencyChain] - newDepChain.push(dependency) + newDepChain.push(dependencyPackageId) const newConstraints = await getDependenciesVersionConstraints( dependencyPackageJson, diff --git a/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx b/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx index cdff7c5790..7c6c14a4f7 100644 --- a/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx +++ b/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx @@ -2,7 +2,7 @@ import * as Stardust from '@stardust-ui/react' import * as _ from 'lodash' import * as React from 'react' // @ts-ignore -import { ThemeContext } from 'react-fela' +import { ThemeContext } from '@stardust-ui/react-fela' import { ComponentInfo } from 'docs/src/types' import componentInfoContext from 'docs/src/utils/componentInfoContext' diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts index caea23896c..9d878b5516 100644 --- a/docs/src/components/Playground/renderConfig.ts +++ b/docs/src/components/Playground/renderConfig.ts @@ -1,9 +1,9 @@ import * as DocsComponent from '@stardust-ui/docs-components' import * as Stardust from '@stardust-ui/react' +import * as ReactFela from '@stardust-ui/react-fela' import * as _ from 'lodash' import * as React from 'react' import * as ReactDOM from 'react-dom' -import * as ReactFela from 'react-fela' import * as Classnames from 'classnames' export const babelConfig = { diff --git a/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx b/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx new file mode 100644 index 0000000000..04d6e84971 --- /dev/null +++ b/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx @@ -0,0 +1,58 @@ +import * as React from 'react' +import * as ReactDOM from 'react-dom' +import { Attachment, Button, Provider, themes } from '@stardust-ui/react' + +type PortalWindowProps = { + children: (externalDocument: Document) => React.ReactElement + onClose?: () => void +} + +const PortalWindow: React.FunctionComponent = ({ children, onClose }) => { + const externalContainer = React.useRef(null) + const externalWindow = React.useRef(null) + const [mounted, setMounted] = React.useState(false) + + React.useEffect(() => { + externalWindow.current = window.open('', '', 'width=600,height=400,left=200,top=200') + + externalContainer.current = externalWindow.current.document.createElement('div') + + externalWindow.current.document.body.appendChild(externalContainer.current) + if (onClose) externalWindow.current.onbeforeunload = onClose + + setMounted(true) + + return () => { + externalWindow.current.close() + } + }, []) + + return ( + mounted && + ReactDOM.createPortal( + children(externalContainer.current.ownerDocument), + externalContainer.current, + ) + ) +} + +const ProviderExampleTarget = () => { + const [open, setOpen] = React.useState(false) + + return ( + <> + + {open && ( + setOpen(false)}> + {externalDocument => ( + + + + )} + + )} + + ) +} + +export default ProviderExampleTarget diff --git a/docs/src/examples/components/Provider/Usage/index.tsx b/docs/src/examples/components/Provider/Usage/index.tsx new file mode 100644 index 0000000000..a51dcfaf5c --- /dev/null +++ b/docs/src/examples/components/Provider/Usage/index.tsx @@ -0,0 +1,16 @@ +import * as React from 'react' + +import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' + +const Usage = () => ( + + + +) + +export default Usage diff --git a/docs/src/examples/components/Provider/index.tsx b/docs/src/examples/components/Provider/index.tsx index bb4e2aaa06..21105833cf 100644 --- a/docs/src/examples/components/Provider/index.tsx +++ b/docs/src/examples/components/Provider/index.tsx @@ -1,10 +1,13 @@ import * as React from 'react' + import Types from './Types' +import Usage from './Usage' const ProviderExamples = () => ( -
+ <> -
+ + ) export default ProviderExamples diff --git a/packages/react/package.json b/packages/react/package.json index 140bdaac10..193705a789 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -6,14 +6,15 @@ "bugs": "https://github.com/stardust-ui/react/issues", "dependencies": { "@babel/runtime": "^7.1.2", + "@stardust-ui/fela": "^10.6.1", "@stardust-ui/react-component-event-listener": "^0.34.0", "@stardust-ui/react-component-nesting-registry": "^0.34.0", "@stardust-ui/react-component-ref": "^0.34.0", + "@stardust-ui/react-fela": "^10.6.2", "@stardust-ui/react-proptypes": "^0.34.0", "classnames": "^2.2.5", "downshift": "^3.2.10", "fast-memoize": "^2.5.1", - "fela": "^10.5.0", "fela-plugin-embedded": "^10.5.0", "fela-plugin-fallback-value": "^10.5.0", "fela-plugin-placeholder-prefixer": "^10.5.0", @@ -23,7 +24,6 @@ "lodash": "^4.17.11", "popper.js": "^1.15.0", "prop-types": "^15.6.1", - "react-fela": "^10.5.0", "react-is": "^16.6.3" }, "devDependencies": { diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx index a31fe969d3..1f32b8797d 100644 --- a/packages/react/src/components/Provider/Provider.tsx +++ b/packages/react/src/components/Provider/Provider.tsx @@ -1,9 +1,9 @@ -import { IStyle } from 'fela' +import { IStyle } from '@stardust-ui/fela' import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' // @ts-ignore -import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela' +import { RendererProvider, ThemeProvider, ThemeContext } from '@stardust-ui/react-fela' import * as customPropTypes from '@stardust-ui/react-proptypes' import { felaRenderer, ChildrenComponentProps } from '../../lib' @@ -34,6 +34,7 @@ export interface ProviderProps extends ChildrenComponentProps { renderer?: Renderer rtl?: boolean disableAnimations?: boolean + target?: Document theme?: ThemeInput variables?: ComponentVariablesInput } @@ -74,6 +75,7 @@ class Provider extends React.Component> { rtl: PropTypes.bool, disableAnimations: PropTypes.bool, children: PropTypes.node.isRequired, + target: PropTypes.object, } static defaultProps = { @@ -145,6 +147,7 @@ class Provider extends React.Component> { renderer, variables, children, + target, ...unhandledProps } = this.props const inputContext: ProviderContextInput = { @@ -169,7 +172,11 @@ class Provider extends React.Component> { } return ( - + {children} diff --git a/packages/react/src/components/Provider/ProviderConsumer.tsx b/packages/react/src/components/Provider/ProviderConsumer.tsx index 0aa886d416..7c9efe9310 100644 --- a/packages/react/src/components/Provider/ProviderConsumer.tsx +++ b/packages/react/src/components/Provider/ProviderConsumer.tsx @@ -1,6 +1,6 @@ import * as PropTypes from 'prop-types' import * as React from 'react' -import { FelaTheme } from 'react-fela' +import { FelaTheme } from '@stardust-ui/react-fela' import { ThemePrepared } from '../../themes/types' import { ProviderContextPrepared } from '../../types' diff --git a/packages/react/src/lib/UIComponent.tsx b/packages/react/src/lib/UIComponent.tsx index 17a1d52b6b..c7dd65f6fc 100644 --- a/packages/react/src/lib/UIComponent.tsx +++ b/packages/react/src/lib/UIComponent.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import * as _ from 'lodash' // @ts-ignore We have this export in package, but it is not present in typings -import { ThemeContext } from 'react-fela' +import { ThemeContext } from '@stardust-ui/react-fela' import renderComponent, { RenderResultConfig } from './renderComponent' import { AccessibilityActionHandlers } from './accessibility/reactTypes' diff --git a/packages/react/src/lib/createComponent.tsx b/packages/react/src/lib/createComponent.tsx index 4e8a407161..846472b94b 100644 --- a/packages/react/src/lib/createComponent.tsx +++ b/packages/react/src/lib/createComponent.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import * as _ from 'lodash' // @ts-ignore -import { ThemeContext } from 'react-fela' +import { ThemeContext } from '@stardust-ui/react-fela' import renderComponent, { RenderResultConfig } from './renderComponent' import { AccessibilityActionHandlers } from './accessibility/reactTypes' diff --git a/packages/react/src/lib/felaRenderer.tsx b/packages/react/src/lib/felaRenderer.tsx index 3643736818..f583cb8d34 100644 --- a/packages/react/src/lib/felaRenderer.tsx +++ b/packages/react/src/lib/felaRenderer.tsx @@ -1,4 +1,4 @@ -import { createRenderer } from 'fela' +import { createRenderer } from '@stardust-ui/fela' import felaPluginEmbedded from 'fela-plugin-embedded' import felaPluginFallbackValue from 'fela-plugin-fallback-value' import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer' diff --git a/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts b/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts index eb4009b87b..46e1102a8c 100644 --- a/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts +++ b/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts @@ -1,7 +1,8 @@ import { debugRoot } from '../../../../styles/debugStyles' +import { ICSSInJSStyle } from '../../../types' const itemLayoutStyles = { - root: ({ props, variables }) => { + root: ({ props, variables }): ICSSInJSStyle => { const { debugLayout } = props return { ...(debugLayout && debugRoot()), diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 65fd5118f6..59e2dd4599 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -1,5 +1,5 @@ import * as CSSType from 'csstype' -import { IRenderer as FelaRenderer } from 'fela' +import { IRenderer as FelaRenderer } from '@stardust-ui/fela' import * as React from 'react' import { Extendable, ObjectOf, ObjectOrFunc, Omit } from '../types' import { AccordionContentProps } from '../components/Accordion/AccordionContent' diff --git a/packages/react/test/utils/withProvider.tsx b/packages/react/test/utils/withProvider.tsx index a191995c3a..7b47426d4d 100644 --- a/packages/react/test/utils/withProvider.tsx +++ b/packages/react/test/utils/withProvider.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { mount } from 'enzyme' -import { ThemeProvider } from 'react-fela' +import { ThemeProvider } from '@stardust-ui/react-fela' import { felaRenderer } from 'src/lib' import { ThemeInput } from 'src/themes/types' diff --git a/yarn.lock b/yarn.lock index d1dc0faf96..65e5d771c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1677,6 +1677,56 @@ resolved "https://registry.yarnpkg.com/@snyk/gemfile/-/gemfile-1.1.0.tgz#8c254dfc7739b2e8513c44c976fc41872d5f6af0" integrity sha512-mLwF+ccuvRZMS0SxUAxA3dAp8mB3m2FxIsBIUWFTYvzxl+E4XTZb8uFrUqXHbcxhZH1Z8taHohNTbzXZn3M8ag== +"@stardust-ui/fela-bindings@^10.6.2": + version "10.6.2" + resolved "https://registry.yarnpkg.com/@stardust-ui/fela-bindings/-/fela-bindings-10.6.2.tgz#eb16bcf4492bbe8cf84e54819f10f231ed79e260" + integrity sha512-DlctTgTG3F0K/djugvvr/7o2g4q9laI1Ks8DA+x/SgyObYzlNJHfEHZeOc2ARNgZE1ulVc6oJSYXrPjkiLWpew== + dependencies: + "@stardust-ui/fela-dom" "^10.6.2" + "@stardust-ui/fela-tools" "^10.6.2" + fast-loops "^1.0.0" + react-addons-shallow-compare "^15.6.2" + shallow-equal "^1.0.0" + +"@stardust-ui/fela-dom@^10.6.2": + version "10.6.2" + resolved "https://registry.yarnpkg.com/@stardust-ui/fela-dom/-/fela-dom-10.6.2.tgz#6aa9a98aac518b604a7e2a697256d817f1e68a76" + integrity sha512-JruOJTlfEB5SjVEiPv1YMQyGf3O2lYk02mHQBsAAd4S7q9PottDdVT1tZXWIXuq2kIYOWOuwT8eFTDb08pwhtw== + dependencies: + css-in-js-utils "^3.0.0" + fast-loops "^1.0.1" + fela-utils "^10.5.0" + +"@stardust-ui/fela-tools@^10.6.2": + version "10.6.2" + resolved "https://registry.yarnpkg.com/@stardust-ui/fela-tools/-/fela-tools-10.6.2.tgz#ef91b44b4ba36c6b0c5022141eef85f836c87825" + integrity sha512-TyZxcqirytt4QFSKND+lflw+VLFHiZQdawPfzkrraZcnofa72sQ2JGu5oTO5kw0/TnDEDgcQHfYhpq3QjxWgqA== + dependencies: + "@stardust-ui/fela" "^10.6.1" + css-in-js-utils "^3.0.0" + fast-loops "^1.0.0" + fela-utils "^10.5.0" + +"@stardust-ui/fela@^10.6.1": + version "10.6.1" + resolved "https://registry.yarnpkg.com/@stardust-ui/fela/-/fela-10.6.1.tgz#bb96a30a25d14c7f797b8a5db13811464de09a9a" + integrity sha512-RMI8Z/pDzXKp7W02Fc/V3fF6f7bc0RSELAZS16Qu0/HLPImvAVdMKkTpLsWAGTOPcH2bHDFvweML6Y9Y//zeqw== + dependencies: + css-in-js-utils "^3.0.0" + csstype "^2.5.5" + fast-loops "^1.0.0" + fela-utils "^10.5.0" + isobject "^3.0.1" + +"@stardust-ui/react-fela@^10.6.2": + version "10.6.2" + resolved "https://registry.yarnpkg.com/@stardust-ui/react-fela/-/react-fela-10.6.2.tgz#e282f632c9a16eaceb244d1bb144f6b733db665f" + integrity sha512-cD6qjfV+Y66P+8yRt7fiXjE2l+h1L9VtXTaYzxfWq8mVdmXhcu6lBlQt4amOliARvAA5k4N2jMNeXnAWS9qKGw== + dependencies: + "@stardust-ui/fela-bindings" "^10.6.2" + "@stardust-ui/fela-dom" "^10.6.2" + prop-types "^15.5.8" + "@types/babel__core@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.0.tgz#710f2487dda4dcfd010ca6abb2b4dc7394365c51" @@ -5893,26 +5943,6 @@ fd-slicer@~1.0.1: dependencies: pend "~1.2.0" -fela-bindings@^10.5.0: - version "10.5.0" - resolved "https://registry.yarnpkg.com/fela-bindings/-/fela-bindings-10.5.0.tgz#b9c18c236333303827aa107db4a6954a1b5044d5" - integrity sha512-Shfea8Cp5uIOGaxOcYKMXkQi3t4vjTuMkrQHAesIb57kH8kQjHo17PMinWFd1HrlNIbF1CN/V40htdVHniha+A== - dependencies: - fast-loops "^1.0.0" - fela-dom "^10.5.0" - fela-tools "^10.5.0" - react-addons-shallow-compare "^15.6.2" - shallow-equal "^1.0.0" - -fela-dom@^10.5.0: - version "10.5.0" - resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-10.5.0.tgz#2f42c962ea1f6123f9a7ae4ec240728506f158ea" - integrity sha512-UrECLCy6lnOWxqbO3Z8SdsXd6blu4frKcDujtc9cVUNpvNs89qtxrlj5iyt6qBFDrPCD+R0Ff4m+744Nu52RDQ== - dependencies: - css-in-js-utils "^3.0.0" - fast-loops "^1.0.1" - fela-utils "^10.5.0" - fela-plugin-custom-property@^10.5.0: version "10.5.0" resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-10.5.0.tgz#cda6c247c1c8cbe0602a1334ff0259a16e8c8f39" @@ -5963,16 +5993,6 @@ fela-plugin-rtl@^10.5.0: dependencies: rtl-css-js "^1.1.3" -fela-tools@^10.5.0: - version "10.5.0" - resolved "https://registry.yarnpkg.com/fela-tools/-/fela-tools-10.5.0.tgz#cb1cfc27e2e1f8142be4768af45730e9532c4e39" - integrity sha512-O7YJVZlvK1r3WcrMAll7X43sVuYK/tXnpXrgSPscjce5I4DS/y2MI8HNFp+Ib7dKm3LDFfXN8TOUiO3ZTXKlIQ== - dependencies: - css-in-js-utils "^3.0.0" - fast-loops "^1.0.0" - fela "^10.5.0" - fela-utils "^10.5.0" - fela-utils@^10.5.0: version "10.5.0" resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-10.5.0.tgz#29ddce082c52639b6e3789741b187cab0da8d886" @@ -5981,17 +6001,6 @@ fela-utils@^10.5.0: css-in-js-utils "^3.0.0" fast-loops "^1.0.0" -fela@^10.5.0: - version "10.5.0" - resolved "https://registry.yarnpkg.com/fela/-/fela-10.5.0.tgz#32f49e7d680be9d7a20b71f7be900c2122d3c3e2" - integrity sha512-lSWkHOEkN5LIbLst/2PT0QK+g5QRsvNey6H89hcmiahaNDkRUxDmjIStfpVL94GfSZYHKyVlicH3DFT9Efne9A== - dependencies: - css-in-js-utils "^3.0.0" - csstype "^2.5.5" - fast-loops "^1.0.0" - fela-utils "^10.5.0" - isobject "^3.0.1" - figgy-pudding@^3.4.1, figgy-pudding@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" @@ -11948,15 +11957,6 @@ react-fast-compare@^2.0.4: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-fela@^10.5.0: - version "10.5.0" - resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-10.5.0.tgz#0196f138bc1f5478767fa1e5b6f1d2bbd136f38c" - integrity sha512-/7AMhuglq5bH7VKNRPGLvG4dV3syoHrBmB7Cp1X0rNnZRhNi1r+iQW8OyN/9pQrkgIetP3RzBKFk9PgxUxO73g== - dependencies: - fela-bindings "^10.5.0" - fela-dom "^10.5.0" - prop-types "^15.5.8" - react-hot-loader@^4.8.2: version "4.8.7" resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.8.7.tgz#8bcec3105d4e0e3cba52aa59800568fc9fb3322d"