@backstage/ui 0.7.1-next.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @backstage/ui
 
+## 0.7.1
+
+### Patch Changes
+
+- 7307930: Add missing class for flex: baseline
+- 89da341: Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility.
+- 0ffa4c7: Removed the need to mock `window.matchMedia` in tests, falling back to default breakpoint values instead.
+
 ## 0.7.1-next.0
 
 ### Patch Changes

package/dist/hooks/useMediaQuery.esm.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-const IS_SERVER = typeof window === "undefined";
+const IS_SERVER = typeof window === "undefined" || typeof window.matchMedia === "undefined";
 function useMediaQuery(query, {
   defaultValue = false,
   initializeWithValue = true
@@ -22,6 +22,9 @@ function useMediaQuery(query, {
     setMatches(getMatches(query));
   }
   useIsomorphicLayoutEffect(() => {
+    if (IS_SERVER) {
+      return;
+    }
     const matchMedia = window.matchMedia(query);
     handleChange();
     if (matchMedia.addListener) {

package/dist/hooks/useMediaQuery.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.esm.js","sources":["../../src/hooks/useMediaQuery.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState } from 'react';\n\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype UseMediaQueryOptions = {\n  defaultValue?: boolean;\n  initializeWithValue?: boolean;\n};\n\nconst IS_SERVER = typeof window === 'undefined';\n\nexport function useMediaQuery(\n  query: string,\n  {\n    defaultValue = false,\n    initializeWithValue = true,\n  }: UseMediaQueryOptions = {},\n): boolean {\n  const getMatches = (query: string): boolean => {\n    if (IS_SERVER) {\n      return defaultValue;\n    }\n    return window.matchMedia(query).matches;\n  };\n\n  const [matches, setMatches] = useState<boolean>(() => {\n    if (initializeWithValue) {\n      return getMatches(query);\n    }\n    return defaultValue;\n  });\n\n  // Handles the change event of the media query.\n  function handleChange() {\n    setMatches(getMatches(query));\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const matchMedia = window.matchMedia(query);\n\n    // Triggered at the first client-side load and if query changes\n    handleChange();\n\n    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener('change', handleChange);\n    }\n\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener('change', handleChange);\n      }\n    };\n  }, [query]);\n\n  return matches;\n}\n"],"names":["query"],"mappings":";;;AAwBA,MAAM,SAAA,GAAY,OAAO,MAAA,KAAW,WAAA;AAE7B,SAAS,cACd,KAAA,EACA;AAAA,EACE,YAAA,GAAe,KAAA;AAAA,EACf,mBAAA,GAAsB;AACxB,CAAA,GAA0B,EAAC,EAClB;AACT,EAAA,MAAM,UAAA,GAAa,CAACA,MAAAA,KAA2B;AAC7C,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAO,YAAA;AAAA,IACT;AACA,IAAA,OAAO,MAAA,CAAO,UAAA,CAAWA,MAAK,CAAA,CAAE,OAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,MAAM;AACpD,IAAA,IAAI,mBAAA,EAAqB;AACvB,MAAA,OAAO,WAAW,KAAK,CAAA;AAAA,IACzB;AACA,IAAA,OAAO,YAAA;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,SAAS,YAAA,GAAe;AACtB,IAAA,UAAA,CAAW,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,EAC9B;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAG1C,IAAA,YAAA,EAAa;AAGb,IAAA,IAAI,WAAW,WAAA,EAAa;AAC1B,MAAA,UAAA,CAAW,YAAY,YAAY,CAAA;AAAA,IACrC,CAAA,MAAO;AACL,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAAA,IACpD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,cAAA,EAAgB;AAC7B,QAAA,UAAA,CAAW,eAAe,YAAY,CAAA;AAAA,MACxC,CAAA,MAAO;AACL,QAAA,UAAA,CAAW,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,MACvD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,OAAA;AACT;;;;"}
+{"version":3,"file":"useMediaQuery.esm.js","sources":["../../src/hooks/useMediaQuery.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState } from 'react';\n\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\ntype UseMediaQueryOptions = {\n  defaultValue?: boolean;\n  initializeWithValue?: boolean;\n};\n\nconst IS_SERVER =\n  typeof window === 'undefined' || typeof window.matchMedia === 'undefined';\n\nexport function useMediaQuery(\n  query: string,\n  {\n    defaultValue = false,\n    initializeWithValue = true,\n  }: UseMediaQueryOptions = {},\n): boolean {\n  const getMatches = (query: string): boolean => {\n    if (IS_SERVER) {\n      return defaultValue;\n    }\n    return window.matchMedia(query).matches;\n  };\n\n  const [matches, setMatches] = useState<boolean>(() => {\n    if (initializeWithValue) {\n      return getMatches(query);\n    }\n    return defaultValue;\n  });\n\n  // Handles the change event of the media query.\n  function handleChange() {\n    setMatches(getMatches(query));\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    if (IS_SERVER) {\n      return;\n    }\n    const matchMedia = window.matchMedia(query);\n\n    // Triggered at the first client-side load and if query changes\n    handleChange();\n\n    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)\n    if (matchMedia.addListener) {\n      matchMedia.addListener(handleChange);\n    } else {\n      matchMedia.addEventListener('change', handleChange);\n    }\n\n    return () => {\n      if (matchMedia.removeListener) {\n        matchMedia.removeListener(handleChange);\n      } else {\n        matchMedia.removeEventListener('change', handleChange);\n      }\n    };\n  }, [query]);\n\n  return matches;\n}\n"],"names":["query"],"mappings":";;;AAwBA,MAAM,YACJ,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,OAAO,UAAA,KAAe,WAAA;AAEzD,SAAS,cACd,KAAA,EACA;AAAA,EACE,YAAA,GAAe,KAAA;AAAA,EACf,mBAAA,GAAsB;AACxB,CAAA,GAA0B,EAAC,EAClB;AACT,EAAA,MAAM,UAAA,GAAa,CAACA,MAAAA,KAA2B;AAC7C,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAO,YAAA;AAAA,IACT;AACA,IAAA,OAAO,MAAA,CAAO,UAAA,CAAWA,MAAK,CAAA,CAAE,OAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,MAAM;AACpD,IAAA,IAAI,mBAAA,EAAqB;AACvB,MAAA,OAAO,WAAW,KAAK,CAAA;AAAA,IACzB;AACA,IAAA,OAAO,YAAA;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,SAAS,YAAA,GAAe;AACtB,IAAA,UAAA,CAAW,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,EAC9B;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,SAAA,EAAW;AACb,MAAA;AAAA,IACF;AACA,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAG1C,IAAA,YAAA,EAAa;AAGb,IAAA,IAAI,WAAW,WAAA,EAAa;AAC1B,MAAA,UAAA,CAAW,YAAY,YAAY,CAAA;AAAA,IACrC,CAAA,MAAO;AACL,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAAA,IACpD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,cAAA,EAAgB;AAC7B,QAAA,UAAA,CAAW,eAAe,YAAY,CAAA;AAAA,MACxC,CAAA,MAAO;AACL,QAAA,UAAA,CAAW,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,MACvD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,OAAA;AACT;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.7.1-next.0",
+  "version": "0.7.1",
   "backstage": {
     "role": "web-library"
   },
@@ -40,18 +40,16 @@
   "dependencies": {
     "@base-ui-components/react": "1.0.0-alpha.7",
     "@remixicon/react": "^4.6.0",
-    "@storybook/test": "^8.6.12",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
-    "@backstage/cli": "0.34.2-next.2",
-    "@storybook/react": "^8.6.12",
+    "@backstage/cli": "^0.34.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.1.5",
     "glob": "^11.0.1",
     "globals": "^15.11.0",
     "lightningcss": "^1.29.1",
@@ -59,7 +57,7 @@
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^8.6.12"
+    "storybook": "^9.1.5"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",