@react-spectrum/tabs - npm Package Compare versions

Comparing version 3.0.0-nightly.2457 to 3.0.0-nightly.2464

dist/main.js

 var {
+  useTabsState
+} = require("@react-stately/tabs");
+
+var {
   useTab,
@@ -23,6 +27,2 @@ useTabs
 
-var {
-  useSingleSelectListState
-} = require("@react-stately/list");
-
 var _react2 = require("react");
@@ -41,2 +41,3 @@
   mergeProps,
+  useId,
   useLayoutEffect,
@@ -109,3 +110,2 @@ useResizeObserver
     orientation = 'horizontal',
-    onSelectionChange,
     isDisabled,
@@ -116,9 +116,7 @@ isQuiet,
   } = props,
-      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["orientation", "onSelectionChange", "isDisabled", "isQuiet", "density", "children"]);
+      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["orientation", "isDisabled", "isQuiet", "density", "children"]);
 
   let ref = useRef();
   let wrapperRef = useRef();
-  let state = useSingleSelectListState(_babelRuntimeHelpersExtends({}, props, {
-    onSelectionChange
-  }));
+  let state = useTabsState(props);
   let {
@@ -137,11 +135,4 @@ direction
   useEffect(() => {
-    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-    if (state.selectionManager.isEmpty || !state.collection.getItem(state.selectedKey)) {
-      state.selectionManager.replaceSelection(state.collection.getFirstKey());
-    }
-  }, [state.selectionManager, state.selectedKey, state.collection]);
-  useEffect(() => {
     if (ref.current) {
-      let tabs = Array.from(ref.current.querySelectorAll('.' + $a221257d7bd2e9d0c131cda7c75f4f5$$interop$default['spectrum-Tabs-item']));
-      let selectedTab = tabs.find(tab => tab.dataset.key === state.selectedKey);
+      let selectedTab = ref.current.querySelector("[data-key=\"" + state.selectedKey + "\"]");
 
@@ -158,5 +149,4 @@ if (selectedTab != null) {
         let tabsComponent = wrapperRef.current;
-        let tabs = Array.from(ref.current.children); // The last child is the TabLine so we look at the second to last child for the last Tab
-
-        let lastTab = tabs[tabs.length - 2];
+        let tabs = ref.current.querySelectorAll('[role="tab"]');
+        let lastTab = tabs[tabs.length - 1];
         let end = direction === 'rtl' ? 'left' : 'right';
@@ -185,5 +175,13 @@ let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
     onResize: checkShouldCollapse
-  });
+  }); // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
 
-  let tablist = /*#__PURE__*/_react.createElement($a016f96d614f365ec6ad3cd2df19b52$var$TabList, _babelRuntimeHelpersExtends({}, tabListProps, {
+  let collapsibleTabListId = useId();
+
+  if (collapse && orientation !== 'vertical') {
+    tabPanelProps['aria-labelledby'] = collapsibleTabListId;
+  }
+
+  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, styleProps, {
+    className: classNames($a221257d7bd2e9d0c131cda7c75f4f5$$interop$default, 'spectrum-TabsPanel', "spectrum-TabsPanel--" + orientation, styleProps.className)
+  }), orientation === 'vertical' && /*#__PURE__*/_react.createElement($a016f96d614f365ec6ad3cd2df19b52$var$TabList, _babelRuntimeHelpersExtends({}, tabListProps, {
     ref: ref,
@@ -196,8 +194,4 @@ orientation: orientation,
     selectedTab: selectedTab
-  }));
-
-  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, styleProps, {
-    className: classNames($a221257d7bd2e9d0c131cda7c75f4f5$$interop$default, 'spectrum-TabsPanel', "spectrum-TabsPanel--" + orientation, styleProps.className)
-  }), orientation === 'vertical' && tablist, orientation !== 'vertical' && /*#__PURE__*/_react.createElement($a016f96d614f365ec6ad3cd2df19b52$var$CollapsibleTabList, _babelRuntimeHelpersExtends({}, props, {
-    tabListclassName: classNames($a221257d7bd2e9d0c131cda7c75f4f5$$interop$default, 'spectrum-TabsPanel-tabs'),
+  })), orientation !== 'vertical' && /*#__PURE__*/_react.createElement($a016f96d614f365ec6ad3cd2df19b52$var$CollapsibleTabList, _babelRuntimeHelpersExtends({}, props, {
+    id: collapsibleTabListId,
     wrapperRef: wrapperRef,
@@ -318,5 +312,5 @@ collapse: collapse,
     wrapperRef,
-    collapse,
-    tabListclassName
+    collapse
   } = props;
+  let tabListclassName = classNames($a221257d7bd2e9d0c131cda7c75f4f5$$interop$default, 'spectrum-TabsPanel-tabs');
   return /*#__PURE__*/_react.createElement("div", {
@@ -377,3 +371,4 @@ ref: wrapperRef,
     density,
-    className
+    className,
+    id
   } = props;
@@ -404,6 +399,7 @@ let ref = useRef();
       button: {
-        focusRingStyles: $a221257d7bd2e9d0c131cda7c75f4f5$$interop$default
+        focusRingClass: classNames($a221257d7bd2e9d0c131cda7c75f4f5$$interop$default, 'focus-ring')
       }
     }
   }, /*#__PURE__*/_react.createElement(Picker, _babelRuntimeHelpersExtends({}, pickerProps, {
+    id: id,
     items: items,
@@ -410,0 +406,0 @@ ref: ref,

dist/module.js

@@ -0,1 +1,2 @@
+import { useTabsState } from "@react-stately/tabs";
 import { useTab, useTabs } from "@react-aria/tabs";
@@ -6,5 +7,4 @@ import { useProvider, useProviderProps } from "@react-spectrum/provider";
 import { Text } from "@react-spectrum/text";
-import { useSingleSelectListState } from "@react-stately/list";
 import _react, { useCallback, useEffect, useRef, useState } from "react";
-import { mergeProps, useLayoutEffect, useResizeObserver } from "@react-aria/utils";
+import { mergeProps, useId, useLayoutEffect, useResizeObserver } from "@react-aria/utils";
 import { Item as _Item, Picker } from "@react-spectrum/picker";
@@ -52,3 +52,2 @@ import { FocusRing } from "@react-aria/focus";
     orientation = 'horizontal',
-    onSelectionChange,
     isDisabled,
@@ -59,9 +58,7 @@ isQuiet,
   } = props,
-      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["orientation", "onSelectionChange", "isDisabled", "isQuiet", "density", "children"]);
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["orientation", "isDisabled", "isQuiet", "density", "children"]);
 
   let ref = useRef();
   let wrapperRef = useRef();
-  let state = useSingleSelectListState(_babelRuntimeHelpersEsmExtends({}, props, {
-    onSelectionChange
-  }));
+  let state = useTabsState(props);
   let {
@@ -80,11 +77,4 @@ direction
   useEffect(() => {
-    // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-    if (state.selectionManager.isEmpty || !state.collection.getItem(state.selectedKey)) {
-      state.selectionManager.replaceSelection(state.collection.getFirstKey());
-    }
-  }, [state.selectionManager, state.selectedKey, state.collection]);
-  useEffect(() => {
     if (ref.current) {
-      let tabs = Array.from(ref.current.querySelectorAll('.' + $d8728aa9d94f6b7dd1d3f754a952088$$interop$default['spectrum-Tabs-item']));
-      let selectedTab = tabs.find(tab => tab.dataset.key === state.selectedKey);
+      let selectedTab = ref.current.querySelector("[data-key=\"" + state.selectedKey + "\"]");
 
@@ -101,5 +91,4 @@ if (selectedTab != null) {
         let tabsComponent = wrapperRef.current;
-        let tabs = Array.from(ref.current.children); // The last child is the TabLine so we look at the second to last child for the last Tab
-
-        let lastTab = tabs[tabs.length - 2];
+        let tabs = ref.current.querySelectorAll('[role="tab"]');
+        let lastTab = tabs[tabs.length - 1];
         let end = direction === 'rtl' ? 'left' : 'right';
@@ -128,5 +117,13 @@ let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
     onResize: checkShouldCollapse
-  });
+  }); // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
 
-  let tablist = /*#__PURE__*/_react.createElement($f4a414b256968d66045841d53c86a275$var$TabList, _babelRuntimeHelpersEsmExtends({}, tabListProps, {
+  let collapsibleTabListId = useId();
+
+  if (collapse && orientation !== 'vertical') {
+    tabPanelProps['aria-labelledby'] = collapsibleTabListId;
+  }
+
+  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, styleProps, {
+    className: classNames($d8728aa9d94f6b7dd1d3f754a952088$$interop$default, 'spectrum-TabsPanel', "spectrum-TabsPanel--" + orientation, styleProps.className)
+  }), orientation === 'vertical' && /*#__PURE__*/_react.createElement($f4a414b256968d66045841d53c86a275$var$TabList, _babelRuntimeHelpersEsmExtends({}, tabListProps, {
     ref: ref,
@@ -139,8 +136,4 @@ orientation: orientation,
     selectedTab: selectedTab
-  }));
-
-  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, styleProps, {
-    className: classNames($d8728aa9d94f6b7dd1d3f754a952088$$interop$default, 'spectrum-TabsPanel', "spectrum-TabsPanel--" + orientation, styleProps.className)
-  }), orientation === 'vertical' && tablist, orientation !== 'vertical' && /*#__PURE__*/_react.createElement($f4a414b256968d66045841d53c86a275$var$CollapsibleTabList, _babelRuntimeHelpersEsmExtends({}, props, {
-    tabListclassName: classNames($d8728aa9d94f6b7dd1d3f754a952088$$interop$default, 'spectrum-TabsPanel-tabs'),
+  })), orientation !== 'vertical' && /*#__PURE__*/_react.createElement($f4a414b256968d66045841d53c86a275$var$CollapsibleTabList, _babelRuntimeHelpersEsmExtends({}, props, {
+    id: collapsibleTabListId,
     wrapperRef: wrapperRef,
@@ -256,5 +249,5 @@ collapse: collapse,
     wrapperRef,
-    collapse,
-    tabListclassName
+    collapse
   } = props;
+  let tabListclassName = classNames($d8728aa9d94f6b7dd1d3f754a952088$$interop$default, 'spectrum-TabsPanel-tabs');
   return /*#__PURE__*/_react.createElement("div", {
@@ -315,3 +308,4 @@ ref: wrapperRef,
     density,
-    className
+    className,
+    id
   } = props;
@@ -342,6 +336,7 @@ let ref = useRef();
       button: {
-        focusRingStyles: $d8728aa9d94f6b7dd1d3f754a952088$$interop$default
+        focusRingClass: classNames($d8728aa9d94f6b7dd1d3f754a952088$$interop$default, 'focus-ring')
       }
     }
   }, /*#__PURE__*/_react.createElement(Picker, _babelRuntimeHelpersEsmExtends({}, pickerProps, {
+    id: id,
     items: items,
@@ -348,0 +343,0 @@ ref: ref,

package.json

 {
   "name": "@react-spectrum/tabs",
-  "version": "3.0.0-nightly.2457+d7547a9c",
+  "version": "3.0.0-nightly.2464+d80334eb",
   "description": "Spectrum UI components in React",
@@ -34,23 +34,24 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@adobe/react-spectrum": "3.0.0-nightly.779+d7547a9c",
+    "@adobe/react-spectrum": "3.0.0-nightly.786+d80334eb",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.779+d7547a9c",
-    "@react-aria/i18n": "3.0.0-nightly.779+d7547a9c",
-    "@react-aria/interactions": "3.0.0-nightly.779+d7547a9c",
-    "@react-aria/tabs": "3.0.0-nightly.779+d7547a9c",
-    "@react-aria/utils": "3.0.0-nightly.779+d7547a9c",
-    "@react-spectrum/button": "3.0.0-nightly.779+d7547a9c",
-    "@react-spectrum/menu": "3.2.2-nightly.2457+d7547a9c",
-    "@react-spectrum/picker": "3.2.2-nightly.2457+d7547a9c",
-    "@react-spectrum/text": "3.1.2-nightly.2457+d7547a9c",
-    "@react-spectrum/utils": "3.0.0-nightly.779+d7547a9c",
-    "@react-stately/collections": "3.0.0-nightly.779+d7547a9c",
-    "@react-stately/list": "3.2.2-nightly.2457+d7547a9c",
-    "@react-types/select": "3.1.2-nightly.2457+d7547a9c",
-    "@react-types/shared": "3.0.0-nightly.779+d7547a9c",
-    "@react-types/tabs": "3.0.0-nightly.2457+d7547a9c",
-    "@spectrum-icons/workflow": "3.0.0-nightly.779+d7547a9c"
+    "@react-aria/focus": "3.0.0-nightly.786+d80334eb",
+    "@react-aria/i18n": "3.0.0-nightly.786+d80334eb",
+    "@react-aria/interactions": "3.0.0-nightly.786+d80334eb",
+    "@react-aria/tabs": "3.0.0-nightly.786+d80334eb",
+    "@react-aria/utils": "3.0.0-nightly.786+d80334eb",
+    "@react-spectrum/button": "3.0.0-nightly.786+d80334eb",
+    "@react-spectrum/menu": "3.2.2-nightly.2464+d80334eb",
+    "@react-spectrum/picker": "3.2.2-nightly.2464+d80334eb",
+    "@react-spectrum/text": "3.1.2-nightly.2464+d80334eb",
+    "@react-spectrum/utils": "3.0.0-nightly.786+d80334eb",
+    "@react-stately/collections": "3.0.0-nightly.786+d80334eb",
+    "@react-stately/list": "3.2.2-nightly.2464+d80334eb",
+    "@react-stately/tabs": "3.0.0-nightly.786+d80334eb",
+    "@react-types/select": "3.1.2-nightly.2464+d80334eb",
+    "@react-types/shared": "3.0.0-nightly.786+d80334eb",
+    "@react-types/tabs": "3.0.0-nightly.2464+d80334eb",
+    "@spectrum-icons/workflow": "3.0.0-nightly.786+d80334eb"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.779+d7547a9c"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.786+d80334eb"
   },
@@ -64,3 +65,3 @@ "peerDependencies": {
   },
-  "gitHead": "d7547a9c2a763b47479883b4893db99f8035ff0d"
+  "gitHead": "d80334eba4d7a44d282ccbd3736a80708112d0a2"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

129957

decreased by-2.07%

Dependency count

21

increased by5%

Lines of code

1132

decreased by-1.48%

Dependency changes

• + Added@react-stately/tabs@3.0.0-nightly.786+d80334eb

• Updated@adobe/react-spectrum@3.0.0-nightly.786+d80334eb

• Updated@react-aria/focus@3.0.0-nightly.786+d80334eb

• Updated@react-aria/i18n@3.0.0-nightly.786+d80334eb

• Updated@react-aria/interactions@3.0.0-nightly.786+d80334eb

• Updated@react-aria/tabs@3.0.0-nightly.786+d80334eb

• Updated@react-aria/utils@3.0.0-nightly.786+d80334eb

• Updated@react-spectrum/button@3.0.0-nightly.786+d80334eb

• Updated@react-spectrum/menu@3.2.2-nightly.2464+d80334eb

• Updated@react-spectrum/picker@3.2.2-nightly.2464+d80334eb

• Updated@react-spectrum/text@3.1.2-nightly.2464+d80334eb

• Updated@react-spectrum/utils@3.0.0-nightly.786+d80334eb

• Updated@react-stately/collections@3.0.0-nightly.786+d80334eb

• Updated@react-stately/list@3.2.2-nightly.2464+d80334eb

• Updated@react-types/select@3.1.2-nightly.2464+d80334eb

• Updated@react-types/shared@3.0.0-nightly.786+d80334eb

• Updated@react-types/tabs@3.0.0-nightly.2464+d80334eb

• Updated@spectrum-icons/workflow@3.0.0-nightly.786+d80334eb