useMediaQueries causing errors in production for some safari users

If it’s a discussion, please start one here.

TypeError
a.addEventListener is not a function. (In 'a.addEventListener("change",e,!0)', 'a.addEventListener' is undefined)

Tracked down to: https://github.com/cultureamp/kaizen-design-system/blob/master/packages/responsive/src/useMediaQueries.tsx#L101

According to MediaQueryLists browser compatibility,

Before Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.

• Before opening this issue, I’ve searched open and closed issues for a fix.

Expected Behaviour

I’m not sure, either useMediaQueries should gracefully degrade (similar to how we check for Edge) or we should support older versions with addListener/removeListener.

Specifications (please add any other notable libs/details)

For performance-ui:

=> Found "@kaizen/responsive@1.2.1"
info Reasons this module exists
  - "@kaizen#brand-moment" depends on it
  - Hoisted from "@kaizen#brand-moment#@kaizen#responsive"
  - Hoisted from "@kaizen#draft-title-block-zen#@kaizen#responsive"

Not sure about others.

Labelling

1. If related to a component, please add a label like so component:mycomponent.
2. Then label with bug, enhancement/feature* or documentation.

* A feature is a new component or piece of functionality and an enhancement is an improvement to an existing component or piece of functionality.

No Sensitive Information

As this is a public repo, please do not include screenshots that may share sensitive information about our customers.

[OliBridgman]

@sentience 45 instances of the error in performance-ui for the past 2 weeks. Not sure how many users you can relate that to (and I don’t think you can with sentry set up the way it is atm) but if you trust the URL there’s at least 9 distinct companies over that time.

[dougmacknz]

Yeah, the downgraded experience is that it will not respond to window changes after page load, so it’s not too bad. There’s already some code in this component to do that for legacy Edge, so I’d just add legacy Safari to that.