@react-fabric/core 1.0.0-beta.14 → 1.0.0-beta.17

package/css/index.js

@@ -63,7 +63,7 @@ module.exports = plugin(
       ".scroll-hide": {},
       ...Object.fromEntries(
         Object.entries(theme("spacing")).map(([key, size]) => [
-          `.gap-${key}`,
+          `.gap-${key.replace(".", "\\.")}`,
           { gap: size, "--gutter": size },
         ]),
       ),

package/dist/cjs/components/button/ButtonGroup.js

@@ -2,6 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var Button_module = require('./Button.module.css');
@@ -25,7 +26,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     "data-ref": "buttonGroup",
     className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && Button_module.vertical, vertical && "flex-col items-stretch")
   }, aria), {}, {
-    children: react.Children.map(children, function (child) {
+    children: utilities.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread({
         color: color,
         size: size,

package/dist/cjs/components/button/ToggleButtonGroup.js

@@ -48,7 +48,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && Button_module.vertical, vertical && "flex-col")
   }, aria), {}, {
-    children: react.Children.map(children, function (child) {
+    children: utilities.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread(_objectSpread({
         color: color,
         size: size,

package/dist/cjs/components/menu/Menu.js

@@ -168,20 +168,18 @@ var MenuComponent = function MenuComponent(_ref) {
             onClick: isNested ? undefined : handleClick
           })), {}, {
             style: !isNested ? rest.style : floatingStyles,
-            children: react$1.Children.map(children, function (child, index) {
-              if (child) {
-                labelsRef.current[index] = child.props.label;
-                return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
-                  minimal: !isNested && minimal,
-                  "data-focus": activeIndex === index,
-                  ref: function ref(el) {
-                    return elementsRef.current[index] = el;
-                  }
-                }, getItemProps({
-                  onClick: child.props.onClick,
-                  tabIndex: activeIndex === index ? 0 : -1
-                })) : {});
-              }
+            children: utilities.cloneChildren(children, function (child, index) {
+              labelsRef.current[index] = child.props.label;
+              return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
+                minimal: !isNested && minimal,
+                "data-focus": activeIndex === index,
+                ref: function ref(el) {
+                  return elementsRef.current[index] = el;
+                }
+              }, getItemProps({
+                onClick: child.props.onClick,
+                tabIndex: activeIndex === index ? 0 : -1
+              })) : {});
             })
           }))
         })]

package/dist/esm/components/button/ButtonGroup.js

@@ -2,8 +2,9 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { cloneChildren } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { Children, cloneElement } from 'react';
+import { cloneElement } from 'react';
 import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
 
@@ -25,7 +26,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     "data-ref": "buttonGroup",
     className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && classes.vertical, vertical && "flex-col items-stretch")
   }, aria), {}, {
-    children: Children.map(children, function (child) {
+    children: cloneChildren(children, function (child) {
       return /*#__PURE__*/cloneElement(child, _objectSpread({
         color: color,
         size: size,

package/dist/esm/components/button/ToggleButtonGroup.js

@@ -3,9 +3,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { isArray, EMPTY_ARRAY, cloneChildren } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, useCallback, Children, cloneElement } from 'react';
+import { useMemo, useCallback, cloneElement } from 'react';
 import { useControlledValue } from '../../hooks/useControlledValue.js';
 import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
@@ -48,7 +48,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && classes.vertical, vertical && "flex-col")
   }, aria), {}, {
-    children: Children.map(children, function (child) {
+    children: cloneChildren(children, function (child) {
       return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({
         color: color,
         size: size,

package/dist/esm/components/menu/Menu.js

@@ -4,9 +4,9 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloatingParentNodeId, FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { mergeRefs } from '@react-fabric/utilities';
+import { mergeRefs, cloneChildren } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useState, useRef, useEffect, useCallback, Children, cloneElement, Fragment } from 'react';
+import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
@@ -168,20 +168,18 @@ var MenuComponent = function MenuComponent(_ref) {
             onClick: isNested ? undefined : handleClick
           })), {}, {
             style: !isNested ? rest.style : floatingStyles,
-            children: Children.map(children, function (child, index) {
-              if (child) {
-                labelsRef.current[index] = child.props.label;
-                return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
-                  minimal: !isNested && minimal,
-                  "data-focus": activeIndex === index,
-                  ref: function ref(el) {
-                    return elementsRef.current[index] = el;
-                  }
-                }, getItemProps({
-                  onClick: child.props.onClick,
-                  tabIndex: activeIndex === index ? 0 : -1
-                })) : {});
-              }
+            children: cloneChildren(children, function (child, index) {
+              labelsRef.current[index] = child.props.label;
+              return /*#__PURE__*/cloneElement(child, nodeCheck(child, MenuItem, Menu, MenuComponent) ? _objectSpread({
+                minimal: !isNested && minimal,
+                "data-focus": activeIndex === index,
+                ref: function ref(el) {
+                  return elementsRef.current[index] = el;
+                }
+              }, getItemProps({
+                onClick: child.props.onClick,
+                tabIndex: activeIndex === index ? 0 : -1
+              })) : {});
             })
           }))
         })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.17",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.14",
+    "@react-fabric/utilities": "^1.0.0-beta.17",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "105e7af06bb2ef8f47e0bfbf29fa890c7856f7d8"
+  "gitHead": "a2a0f20255da48d1cbcbcfe100fd3fbd4d13da67"
 }

package/src/components/button/ButtonGroup.tsx

@@ -21,8 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import {
   type AriaProps,
   type ChildrenProp,
@@ -96,7 +97,7 @@ export const ButtonGroup = ({
       )}
       {...aria}
     >
-      {Children.map(children, (child: AnyObject) =>
+      {cloneChildren(children, (child: AnyObject) =>
         cloneElement(child, {
           color,
           size,

package/src/components/button/ToggleButtonGroup.tsx

@@ -21,9 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
+import { cloneChildren, EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Children, cloneElement, useCallback, useMemo } from "react";
+import { cloneElement, useCallback, useMemo } from "react";
 import { useControlledValue } from "../../hooks/useControlledValue";
 import {
   type AriaProps,
@@ -140,7 +140,7 @@ export const ToggleButtonGroup = ({
       )}
       {...aria}
     >
-      {Children.map(children, (child: AnyObject) =>
+      {cloneChildren(children, (child: AnyObject) =>
         cloneElement(child, {
           color,
           size,

package/src/components/menu/Menu.tsx

@@ -45,10 +45,9 @@ import {
   useRole,
   useTypeahead,
 } from "@floating-ui/react";
-import { mergeRefs } from "@react-fabric/utilities";
+import { cloneChildren, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Children,
   cloneElement,
   Fragment,
   useCallback,
@@ -231,25 +230,23 @@ const MenuComponent = ({
                 // @ts-expect-error ignore
                 {...{ style: !isNested ? rest.style : floatingStyles }}
               >
-                {Children.map(children, (child: AnyObject, index) => {
-                  if (child) {
-                    labelsRef.current[index] = child.props.label;
-                    return cloneElement(
-                      child,
-                      nodeCheck(child, MenuItem, Menu, MenuComponent)
-                        ? {
-                            minimal: !isNested && minimal,
-                            "data-focus": activeIndex === index,
-                            ref: (el: HTMLElement) =>
-                              (elementsRef.current[index] = el),
-                            ...getItemProps({
-                              onClick: child.props.onClick,
-                              tabIndex: activeIndex === index ? 0 : -1,
-                            }),
-                          }
-                        : {},
-                    );
-                  }
+                {cloneChildren(children, (child: AnyObject, index) => {
+                  labelsRef.current[index] = child.props.label;
+                  return cloneElement(
+                    child,
+                    nodeCheck(child, MenuItem, Menu, MenuComponent)
+                      ? {
+                          minimal: !isNested && minimal,
+                          "data-focus": activeIndex === index,
+                          ref: (el: HTMLElement) =>
+                            (elementsRef.current[index] = el),
+                          ...getItemProps({
+                            onClick: child.props.onClick,
+                            tabIndex: activeIndex === index ? 0 : -1,
+                          }),
+                        }
+                      : {},
+                  );
                 })}
               </div>
             </FloatingFocusManager>