wojtekmaj/react-fit

Fit a popover element on the screen.

react-fit's Issues

it doesnt works for ts?

Window undefined on Gatsby build time

When using react-time-picker, react-fit is doing a check against window however it is undefined. This is because Gatsby is rendering (at build time) in Node, not in a browser.

In the meantime, I am setting this up to bypass the error.

`<Fit />'s child needed to have its height decreased to 0px` console warning in tests

I'm using react-date-picker and while executing jest tests for components wrapping react-date-picker I see a lot of console warnings like this:

console.warn
  <Fit />'s child needed to have its height decreased to 0px

      at consoleOnDev (node_modules/react-fit/dist/umd/shared/utils.js:23:34)
      at warnOnDev (node_modules/react-fit/dist/umd/shared/utils.js:32:23)
      at shrinkToSize (node_modules/react-fit/dist/umd/Fit.js:161:28)
      at displayWhereverShrinkedFits (node_modules/react-fit/dist/umd/Fit.js:169:7)
      at alignAxis (node_modules/react-fit/dist/umd/Fit.js:183:5)
      at alignMainAxis (node_modules/react-fit/dist/umd/Fit.js:188:3)
      at alignBothAxis (node_modules/react-fit/dist/umd/Fit.js:203:3)

While I understand that those warnings might be important in the context of a browser, I don't find them to be useful when executed in the context of a node process.

Is there a way to silence them?

TypeError: CSS.supports is not a function in test

I'm using react-date-picker, after updating to the latest version I got the error in tests.

For tests, I'm using react-create-library with jest.

my packege.json is:

"dependencies": {
    "@reach/router": "^1.2.1",
    "jwt-decode": "^2.2.0",
    "keyboardjs": "^2.5.1",
    "password-validator": "^4.1.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^0.2.0",
    "react-aria-menubutton": "^6.1.0",
    "react-date-picker": "^7.5.0",
    "react-dom": "^16.8.6",
    "react-flexbox-grid": "^2.1.2",
    "react-icons": "^3.5.0",
    "react-intl": "^2.8.0",
    "react-modal": "^3.8.1",
    "react-scripts": "2.1.8",
    "react-transition-group": "^2.7.1",
    "react-use": "^7.3.1",
    "rebound": "^0.1.0",
    "rxjs": "^6.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "storybook-build": "build-storybook -c .storybook -o .out"
  },
  "devDependencies": {
    "@babel/runtime": "^7.4.2",
    "@sambego/storybook-state": "^1.3.4",
    "@storybook/addon-a11y": "^5.0.6",
    "@storybook/addon-actions": "^5.0.6",
    "@storybook/addon-info": "^5.0.6",
    "@storybook/addon-knobs": "^5.0.6",
    "@storybook/addon-links": "^5.0.6",
    "@storybook/addon-viewport": "^5.0.6",
    "@storybook/addons": "^5.0.6",
    "@storybook/client-logger": "^5.0.6",
    "@storybook/react": "^5.0.6",
    "@types/jest": "^24.0.11",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^11.12.2",
    "@types/reach__router": "^1.2.3",
    "@types/react": "^16.8.10",
    "@types/react-aria-menubutton": "^6.2.0",
    "@types/react-dom": "^16.8.3",
    "@types/react-intl": "^2.3.17",
    "@types/react-modal": "^3.8.1",
    "@types/react-test-renderer": "^16.8.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-knobs": "^4.0.4",
    "@types/storybook__react": "^4.0.1",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "cssom": "^0.3.4",
    "hyperform": "^0.9.23",
    "jest-dom": "^3.1.3",
    "jest-fetch-mock": "^2.1.1",
    "jest-localstorage-mock": "^2.4.0",
    "prettier": "^1.16.4",
    "react-docgen-typescript-loader": "^3.0.1",
    "react-testing-library": "^6.0.3",
    "storybook-addon-intl": "^2.4.1",
    "stylelint": "^9.10.1",
    "stylelint-order": "^2.1.0",
    "tslint": "^5.14.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^4.0.0",
    "tslint-react-hooks": "^2.0.0",
    "typescript": "^3.4.1",
    "xhr-mock": "^2.4.1"
  },

My temporary fix:
global.CSS = { supports: jest.fn() };