@react-spectrum/buttongroup 3.5.3-nightly.3698 → 3.5.3-nightly.3709

package/dist/import.mjs

@@ -0,0 +1,136 @@
+import "./main.css";
+import {useSlotProps as $3Yfv0$useSlotProps, useStyleProps as $3Yfv0$useStyleProps, useDOMRef as $3Yfv0$useDOMRef, useResizeObserver as $3Yfv0$useResizeObserver, classNames as $3Yfv0$classNames, SlotProvider as $3Yfv0$SlotProvider} from "@react-spectrum/utils";
+import {useValueEffect as $3Yfv0$useValueEffect, useLayoutEffect as $3Yfv0$useLayoutEffect, filterDOMProps as $3Yfv0$filterDOMProps} from "@react-aria/utils";
+import {useProvider as $3Yfv0$useProvider, useProviderProps as $3Yfv0$useProviderProps, Provider as $3Yfv0$Provider} from "@react-spectrum/provider";
+import $3Yfv0$react, {useCallback as $3Yfv0$useCallback, useRef as $3Yfv0$useRef} from "react";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+var $fddc5368d2db28a6$exports = {};
+
+$parcel$export($fddc5368d2db28a6$exports, "spectrum-ButtonGroup", () => $fddc5368d2db28a6$export$a92faf51352ac608, (v) => $fddc5368d2db28a6$export$a92faf51352ac608 = v);
+$parcel$export($fddc5368d2db28a6$exports, "spectrum-ButtonGroup-Button", () => $fddc5368d2db28a6$export$7184de2337c1927f, (v) => $fddc5368d2db28a6$export$7184de2337c1927f = v);
+$parcel$export($fddc5368d2db28a6$exports, "spectrum-ButtonGroup--alignEnd", () => $fddc5368d2db28a6$export$30e96c53d7beca11, (v) => $fddc5368d2db28a6$export$30e96c53d7beca11 = v);
+$parcel$export($fddc5368d2db28a6$exports, "spectrum-ButtonGroup--alignCenter", () => $fddc5368d2db28a6$export$252bc7c4ae05757, (v) => $fddc5368d2db28a6$export$252bc7c4ae05757 = v);
+$parcel$export($fddc5368d2db28a6$exports, "spectrum-ButtonGroup--vertical", () => $fddc5368d2db28a6$export$84d9c0e1917a4eaf, (v) => $fddc5368d2db28a6$export$84d9c0e1917a4eaf = v);
+var $fddc5368d2db28a6$export$a92faf51352ac608;
+var $fddc5368d2db28a6$export$7184de2337c1927f;
+var $fddc5368d2db28a6$export$30e96c53d7beca11;
+var $fddc5368d2db28a6$export$252bc7c4ae05757;
+var $fddc5368d2db28a6$export$84d9c0e1917a4eaf;
+$fddc5368d2db28a6$export$a92faf51352ac608 = "spectrum-ButtonGroup_b10c2f";
+$fddc5368d2db28a6$export$7184de2337c1927f = "spectrum-ButtonGroup-Button_b10c2f";
+$fddc5368d2db28a6$export$30e96c53d7beca11 = "spectrum-ButtonGroup--alignEnd_b10c2f";
+$fddc5368d2db28a6$export$252bc7c4ae05757 = "spectrum-ButtonGroup--alignCenter_b10c2f";
+$fddc5368d2db28a6$export$84d9c0e1917a4eaf = "spectrum-ButtonGroup--vertical_b10c2f";
+
+
+function $bd4bfa55854eb3bf$var$ButtonGroup(props, ref) {
+    let { scale: scale  } = (0, $3Yfv0$useProvider)();
+    props = (0, $3Yfv0$useProviderProps)(props);
+    props = (0, $3Yfv0$useSlotProps)(props, "buttonGroup");
+    let { children: children , orientation: orientation = "horizontal" , isDisabled: isDisabled , align: align = "start" , ...otherProps } = props;
+    let { styleProps: styleProps  } = (0, $3Yfv0$useStyleProps)(otherProps);
+    let domRef = (0, $3Yfv0$useDOMRef)(ref);
+    let [hasOverflow, setHasOverflow] = (0, $3Yfv0$useValueEffect)(false);
+    let checkForOverflow = (0, $3Yfv0$useCallback)(()=>{
+        let computeHasOverflow = ()=>{
+            if (domRef.current && orientation === "horizontal") {
+                let buttonGroupChildren = Array.from(domRef.current.children);
+                let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors
+                // If any buttons have negative X positions (align="end") or extend beyond
+                // the width of the button group (align="start"), then switch to vertical.
+                if (buttonGroupChildren.some((child)=>child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) return true;
+                return false;
+            }
+        };
+        if (orientation === "horizontal") setHasOverflow(function*() {
+            // Force to horizontal for measurement.
+            yield false;
+            // Measure, and update if there is overflow.
+            yield computeHasOverflow();
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        domRef,
+        orientation,
+        scale,
+        setHasOverflow,
+        children
+    ]);
+    // There are two main reasons we need to remeasure:
+    // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)
+    (0, $3Yfv0$useLayoutEffect)(()=>{
+        checkForOverflow();
+    }, [
+        checkForOverflow
+    ]);
+    // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure
+    let parent = (0, $3Yfv0$useRef)();
+    (0, $3Yfv0$useLayoutEffect)(()=>{
+        if (domRef.current) parent.current = domRef.current.parentElement;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        domRef.current
+    ]);
+    (0, $3Yfv0$useResizeObserver)({
+        ref: parent,
+        onResize: checkForOverflow
+    });
+    return /*#__PURE__*/ (0, $3Yfv0$react).createElement("div", {
+        ...(0, $3Yfv0$filterDOMProps)(otherProps),
+        ...styleProps,
+        ref: domRef,
+        className: (0, $3Yfv0$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($fddc5368d2db28a6$exports))), "spectrum-ButtonGroup", {
+            "spectrum-ButtonGroup--vertical": orientation === "vertical" || hasOverflow,
+            "spectrum-ButtonGroup--alignEnd": align === "end",
+            "spectrum-ButtonGroup--alignCenter": align === "center"
+        }, styleProps.className)
+    }, /*#__PURE__*/ (0, $3Yfv0$react).createElement((0, $3Yfv0$SlotProvider), {
+        slots: {
+            button: {
+                UNSAFE_className: (0, $3Yfv0$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($fddc5368d2db28a6$exports))), "spectrum-ButtonGroup-Button")
+            }
+        }
+    }, /*#__PURE__*/ (0, $3Yfv0$react).createElement((0, $3Yfv0$Provider), {
+        isDisabled: isDisabled
+    }, children)));
+}
+/**
+ * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
+ */ let $bd4bfa55854eb3bf$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $3Yfv0$react).forwardRef($bd4bfa55854eb3bf$var$ButtonGroup);
+
+
+
+
+export {$bd4bfa55854eb3bf$export$69b1032f2ecdf404 as ButtonGroup};
+//# sourceMappingURL=module.js.map

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/buttongroup",
-  "version": "3.5.3-nightly.3698+72ee92f6d",
+  "version": "3.5.3-nightly.3709+0f953cac8",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,17 +36,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/utils": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-spectrum/button": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-spectrum/text": "3.3.5-nightly.3698+72ee92f6d",
-    "@react-spectrum/utils": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-types/buttongroup": "3.2.6-nightly.3698+72ee92f6d",
-    "@react-types/shared": "3.0.0-nightly.1998+72ee92f6d",
+    "@react-aria/utils": "3.0.0-nightly.2009+0f953cac8",
+    "@react-spectrum/button": "3.0.0-nightly.2009+0f953cac8",
+    "@react-spectrum/text": "3.3.5-nightly.3709+0f953cac8",
+    "@react-spectrum/utils": "3.0.0-nightly.2009+0f953cac8",
+    "@react-types/buttongroup": "3.2.6-nightly.3709+0f953cac8",
+    "@react-types/shared": "3.0.0-nightly.2009+0f953cac8",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.1998+72ee92f6d",
-    "@spectrum-icons/workflow": "3.0.0-nightly.1998+72ee92f6d"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2009+0f953cac8",
+    "@spectrum-icons/workflow": "3.0.0-nightly.2009+0f953cac8"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -50,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "72ee92f6d497163468a80642ccb96576f822f365"
+  "gitHead": "0f953cac84f98cdff29f2348c120ce541ebb6da8"
 }