@react-fabric/core 1.0.0-beta.45 → 1.0.0-beta.47

package/css/reset/_theme.css

@@ -21,7 +21,45 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer theme {
+ @layer theme {
+  :root {
+    /* app default primary */
+    --color-primary: var(--color-denim-500);
+    --color-accent: var(--color-jade-500);
+    --color-tint: var(--color-silver-500);
+
+    /* default rounding */
+    --rounding: 0.25rem;
+    --rounding-cap: 0.25rem;
+    --gutter: 0.5rem;
+
+    /* z levels */
+    --z-overlay-mask: 25;
+    --z-overlay: 30;
+    --z-popover-mask: 45;
+    --z-popover: 50;
+    --z-tooltip: 60;
+    --z-notifications: 60;
+  }
+
+  [data-rounding="sm"] {
+    /* default rounding */
+    --rounding: 2px;
+    --rounding-cap: 2px;
+  }
+
+  [data-rounding="md"] {
+    /* default rounding */
+    --rounding: 0.5rem;
+    --rounding-cap: 0.5rem;
+  }
+
+  [data-rounding="full"] {
+    /* default rounding */
+    --rounding: 9999px;
+    --rounding-cap: 0.5rem;
+  }
+
   [data-color-scheme="light"] {
     --fabric-bg: var(--color-white);
     --fabric-text: var(--color-black);
@@ -43,27 +81,7 @@
   }
 }
 
-@layer base {
-  :root {
-    /* app default primary */
-    --color-primary: var(--color-denim-500);
-    --color-accent: var(--color-jade-500);
-    --color-tint: var(--color-silver-500);
-
-    /* default rounding */
-    --rounding: 0.25rem;
-    --rounding-cap: 0.25rem;
-    --gutter: 0.5rem;
-
-    /* z levels */
-    --z-overlay-mask: 25;
-    --z-overlay: 30;
-    --z-popover-mask: 45;
-    --z-popover: 50;
-    --z-tooltip: 60;
-    --z-notifications: 60;
-  }
-
+@layer theme {
   [data-color-scheme] {
     /* primary */
     --color-primary-50: color-mix(in oklab, var(--color-primary) 10%, var(--fabric-bg));
@@ -366,28 +384,6 @@
     --border-color-light: color-mix(in oklab, var(--color-white) 75%, var(--color-tint));
 
     color: color-mix(in lab, var(--fabric-text) 95%, var(--color-tint));
-    background-color: color-mix(
-      in lab,
-      var(--fabric-bg) 92%,
-      var(--color-tint)
-    );
+    background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--color-tint));
   }
-
-  [data-rounding="sm"] {
-    /* default rounding */
-    --rounding: 2px;
-    --rounding-cap: 2px;
-  }
-
-  [data-rounding="md"] {
-    /* default rounding */
-    --rounding: 0.5rem;
-    --rounding-cap: 0.5rem;
-  }
-
-  [data-rounding="full"] {
-    /* default rounding */
-    --rounding: 9999px;
-    --rounding-cap: 0.5rem;
-  }
-}
+}

package/css/theme/_utilities.css

@@ -81,6 +81,10 @@
   unicode-bidi: plaintext;
 }
 
+@utility flex-auto {
+  flex: 0 0 auto;
+}
+
 @utility flex-full {
   flex: 1 1 100%;
 }
@@ -223,7 +227,7 @@
   background-color: var(--bg-color-invert);
 }
 
-@utility text-base {
+@utility text-reset {
   color: var(--text-color-base);
 }
 

package/dist/cjs/components/dropdown/Dropdown.js

@@ -123,11 +123,7 @@ var DropdownElement = function DropdownElement(_ref) {
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-          ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
-          },
+          ref: refs.setFloating,
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"

package/dist/cjs/components/empty/EmptyContent.js

@@ -73,13 +73,13 @@ var EmptyContent = function EmptyContent(_ref) {
       children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         icon: icon
       }), /*#__PURE__*/react.isValidElement(icon) && icon, !icon && /*#__PURE__*/jsxRuntime.jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsxRuntime.jsx("p", {
+    }), title && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
         fontSize: "1.5em"
       },
       children: title
-    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"

package/dist/cjs/context/Global.js

@@ -68,6 +68,9 @@ var ApplicationProvider = function ApplicationProvider(_ref3) {
     _useState8 = _slicedToArray(_useState7, 2),
     locale = _useState8[0],
     setLocale = _useState8[1];
+  react.useEffect(function () {
+    defaultColorScheme && setColorScheme(defaultColorScheme);
+  }, [defaultColorScheme]);
 
   /** ***************** set initial theme and locale dir  *******************/
   react.useEffect(function () {

package/dist/cjs/core/theme/ThemeProvider.js

@@ -3,6 +3,7 @@
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
+var Global = require('../../context/Global.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -39,6 +40,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
     rounding = _ref.rounding;
+  var _useApplicationContex = Global.useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = react.useMemo(function () {
     var ret = {};
     if (primaryColor && utilities.isColor(primaryColor)) {
@@ -63,7 +66,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, [primaryColor, accentColor, tintColor]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: styles,
-    "data-color-scheme": colorScheme,
+    "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
     className: classNames("fabric-themeProvider", "contents theme-base", branding),
     children: children

package/dist/cjs/hooks/useResizeObserver.js

@@ -22,7 +22,7 @@ var useResizeObserver = function useResizeObserver(onResize) {
         });
       }
     });
-  }, [onResize]);
+  }, [onResize], 0);
   react.useEffect(function () {
     if (ref.current != null) {
       var ob = new ResizeObserver(callbackResize);

package/dist/cjs/typography/Abbr.js

@@ -21,9 +21,9 @@ var AbbrText = function AbbrText(_ref) {
     return tooltip ? Tooltip.Tooltip : react.Fragment;
   }, [tooltip]);
   var tooltipProps = react.useMemo(function () {
-    return _objectSpread(_objectSpread({}, Tooltip.getTooltipProps(tooltip)), {}, {
+    return tooltip ? _objectSpread(_objectSpread({}, Tooltip.getTooltipProps(tooltip)), {}, {
       copyContent: content
-    });
+    }) : {};
   }, [tooltip, content]);
   return /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("abbr", {

package/dist/esm/components/dropdown/Dropdown.js

@@ -123,11 +123,7 @@ var DropdownElement = function DropdownElement(_ref) {
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-          ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
-          },
+          ref: refs.setFloating,
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"

package/dist/esm/components/empty/EmptyContent.js

@@ -73,13 +73,13 @@ var EmptyContent = function EmptyContent(_ref) {
       children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
         icon: icon
       }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsx("p", {
+    }), title && /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
         fontSize: "1.5em"
       },
       children: title
-    }), /*#__PURE__*/jsx("p", {
+    }), /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"

package/dist/esm/context/Global.js

@@ -68,6 +68,9 @@ var ApplicationProvider = function ApplicationProvider(_ref3) {
     _useState8 = _slicedToArray(_useState7, 2),
     locale = _useState8[0],
     setLocale = _useState8[1];
+  useEffect(function () {
+    defaultColorScheme && setColorScheme(defaultColorScheme);
+  }, [defaultColorScheme]);
 
   /** ***************** set initial theme and locale dir  *******************/
   useEffect(function () {

package/dist/esm/core/theme/ThemeProvider.js

@@ -3,6 +3,7 @@
 import { isColor } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import { useApplicationContext } from '../../context/Global.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -39,6 +40,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
     rounding = _ref.rounding;
+  var _useApplicationContex = useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = useMemo(function () {
     var ret = {};
     if (primaryColor && isColor(primaryColor)) {
@@ -63,7 +66,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, [primaryColor, accentColor, tintColor]);
   return /*#__PURE__*/jsx("div", {
     style: styles,
-    "data-color-scheme": colorScheme,
+    "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
     className: classNames("fabric-themeProvider", "contents theme-base", branding),
     children: children

package/dist/esm/hooks/useResizeObserver.js

@@ -22,7 +22,7 @@ var useResizeObserver = function useResizeObserver(onResize) {
         });
       }
     });
-  }, [onResize]);
+  }, [onResize], 0);
   useEffect(function () {
     if (ref.current != null) {
       var ob = new ResizeObserver(callbackResize);

package/dist/esm/typography/Abbr.js

@@ -21,9 +21,9 @@ var AbbrText = function AbbrText(_ref) {
     return tooltip ? Tooltip : Fragment;
   }, [tooltip]);
   var tooltipProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, getTooltipProps(tooltip)), {}, {
+    return tooltip ? _objectSpread(_objectSpread({}, getTooltipProps(tooltip)), {}, {
       copyContent: content
-    });
+    }) : {};
   }, [tooltip, content]);
   return /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsx("abbr", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.45",
+  "version": "1.0.0-beta.47",
   "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.45",
+    "@react-fabric/utilities": "^1.0.0-beta.47",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "37d7cbcd99da40553f4ac775c3332d5281565936"
+  "gitHead": "832a1bce055337127ba17c505731f419248cc15e"
 }

package/src/components/dropdown/Dropdown.tsx

@@ -237,12 +237,7 @@ const DropdownElement = ({
           <FloatingOverlay />
           <FloatingFocusManager context={context} modal>
             <div
-              ref={(el) => {
-                refs.setFloating(el);
-                el
-                  ?.querySelector<HTMLElement>("input,textarea,button")
-                  ?.focus();
-              }}
+              ref={refs.setFloating}
               style={{
                 minWidth,
                 zIndex: "var(--z-popover)",

package/src/components/empty/EmptyContent.tsx

@@ -137,19 +137,19 @@ export const EmptyContent = ({
         {!icon && <DefaultIcon />}
       </div>
       {title && (
-        <p
+        <div
           className="font-medium text-center text-dimmed"
           style={{ fontSize: "1.5em" }}
         >
           {title}
-        </p>
+        </div>
       )}
-      <p
+      <div
         className="font-medium text-center text-muted"
         style={{ fontSize: "0.875em" }}
       >
         {message}
-      </p>
+      </div>
       <div className="flex gap-1 pt-6">{children}</div>
     </div>
   );

package/src/context/Global.tsx

@@ -146,6 +146,10 @@ export const ApplicationProvider: FC<GlobalProps> = ({
     defaultLocale ?? systemLocale(),
   );
 
+  useEffect(() => {
+    defaultColorScheme && setColorScheme(defaultColorScheme);
+  }, [defaultColorScheme]);
+
   /** ***************** set initial theme and locale dir  *******************/
   useEffect(() => {
     document.documentElement.lang = locale;

package/src/core/theme/ThemeProvider.tsx

@@ -25,6 +25,7 @@ import { isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { type ChildrenProp } from "../../types";
+import { useApplicationContext } from "../../context/Global";
 
 export interface ThemeProps {
   /**
@@ -71,6 +72,7 @@ export const ThemeProvider = ({
   colorScheme,
   rounding,
 }: ThemeProps & ChildrenProp) => {
+  const { currentColorScheme } = useApplicationContext();
   const styles = useMemo(() => {
     const ret: KeyValue = {};
     if (primaryColor && isColor(primaryColor)) {
@@ -97,7 +99,7 @@ export const ThemeProvider = ({
   return (
     <div
       style={styles}
-      data-color-scheme={colorScheme}
+      data-color-scheme={colorScheme ?? currentColorScheme}
       data-rounding={rounding}
       className={classNames(
         "fabric-themeProvider",

package/src/hooks/useResizeObserver.ts

@@ -32,14 +32,18 @@ export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
   const ref = useRef<T>(null);
   const [, startTransition] = useTransition();
 
-  const callbackResize = useDebounce(() => {
-    startTransition(() => {
-      if (onResize && ref.current != null) {
-        const { offsetWidth: width, offsetHeight: height } = ref.current;
-        onResize?.({ width, height });
-      }
-    });
-  }, [onResize]);
+  const callbackResize = useDebounce(
+    () => {
+      startTransition(() => {
+        if (onResize && ref.current != null) {
+          const { offsetWidth: width, offsetHeight: height } = ref.current;
+          onResize?.({ width, height });
+        }
+      });
+    },
+    [onResize],
+    0,
+  );
 
   useEffect(() => {
     if (ref.current != null) {

package/src/typography/Abbr.tsx

@@ -47,7 +47,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
     [tooltip],
   );
   const tooltipProps = useMemo(() => {
-    return { ...getTooltipProps(tooltip), copyContent: content };
+    return tooltip ? { ...getTooltipProps(tooltip), copyContent: content } : {};
   }, [tooltip, content]);
 
   return (