@react-fabric/data 1.0.0-beta.17 → 1.0.0-beta.18

package/dist/cjs/virtual/Gallery.js

@@ -12,7 +12,7 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "children", "columns", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createItemList = memoizeOne(function (items) {
@@ -23,6 +23,9 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var items = _ref.items,
     children = _ref.children,
     columns = _ref.columns,
+    fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$defaultHeight = _ref.defaultHeight,
@@ -177,7 +180,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        className: classNames("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
             height: virtualizer.getTotalSize()
@@ -191,7 +198,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               index = _ref3.index,
               measureElement = _ref3.measureElement;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex",
+              className: "flex justify-center",
               "data-index": index,
               ref: measureElement,
               children: columnMap.map(function (col) {

package/dist/cjs/virtual/List.js

@@ -12,7 +12,7 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "children", "fullWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+var _excluded = ["items", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createItemList = memoizeOne(function (items) {
@@ -23,6 +23,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var items = _ref.items,
     children = _ref.children,
     fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$orientation = _ref.orientation,
@@ -169,6 +171,10 @@ var _VirtualList = function _VirtualList(_ref) {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           style: orientation === "vertical" ? {
             height: virtualizer.getTotalSize()

package/dist/esm/virtual/Gallery.js

@@ -12,7 +12,7 @@ import { useDeferredValue, useMemo, useRef, useState, useEffect, useCallback, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["items", "children", "columns", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createItemList = memoizeOne(function (items) {
@@ -23,6 +23,9 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var items = _ref.items,
     children = _ref.children,
     columns = _ref.columns,
+    fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$defaultHeight = _ref.defaultHeight,
@@ -177,7 +180,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        className: classNames("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: /*#__PURE__*/jsxs("div", {
           style: {
             height: virtualizer.getTotalSize()
@@ -191,7 +198,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               index = _ref3.index,
               measureElement = _ref3.measureElement;
             return /*#__PURE__*/jsx("div", {
-              className: "flex",
+              className: "flex justify-center",
               "data-index": index,
               ref: measureElement,
               children: columnMap.map(function (col) {

package/dist/esm/virtual/List.js

@@ -12,7 +12,7 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["items", "children", "fullWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+var _excluded = ["items", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createItemList = memoizeOne(function (items) {
@@ -23,6 +23,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var items = _ref.items,
     children = _ref.children,
     fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$orientation = _ref.orientation,
@@ -169,6 +171,10 @@ var _VirtualList = function _VirtualList(_ref) {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxs("div", {
         className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: [/*#__PURE__*/jsxs("div", {
           style: orientation === "vertical" ? {
             height: virtualizer.getTotalSize()

package/dist/types/virtual/Gallery.d.ts

@@ -24,6 +24,12 @@ export interface VirtualGalleryProps<T> extends TestProps {
      * default item width
      */
     defaultWidth?: number;
+    /**
+     * full width list
+     */
+    fullWidth?: boolean;
+    maxWidth?: string | number;
+    minWidth?: string | number;
     /**
      * padding
      */
@@ -51,6 +57,6 @@ export interface VirtualGalleryProps<T> extends TestProps {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualGallery: {
-    <T extends KeyValue<any>>({ items, children, columns, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, columns, fullWidth, maxWidth, minWidth, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/virtual/List.d.ts

@@ -24,6 +24,8 @@ export interface VirtualListProps<T> extends TestProps {
      * full width list
      */
     fullWidth?: boolean;
+    maxWidth?: string | number;
+    minWidth?: string | number;
     /**
      * padding
      */
@@ -55,6 +57,6 @@ export interface VirtualListProps<T> extends TestProps {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualList: {
-    <T extends KeyValue<any>>({ items, children, fullWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, fullWidth, maxWidth, minWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.17",
-    "@react-fabric/date": "^1.0.0-beta.17",
-    "@react-fabric/form": "^1.0.0-beta.17",
-    "@react-fabric/utilities": "^1.0.0-beta.17",
+    "@react-fabric/core": "^1.0.0-beta.18",
+    "@react-fabric/date": "^1.0.0-beta.18",
+    "@react-fabric/form": "^1.0.0-beta.18",
+    "@react-fabric/utilities": "^1.0.0-beta.18",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -52,5 +52,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a2a0f20255da48d1cbcbcfe100fd3fbd4d13da67"
+  "gitHead": "4795fee60aa3e7411934a688f7c53e42ca3297ed"
 }

package/src/virtual/Gallery.tsx

@@ -67,6 +67,12 @@ export interface VirtualGalleryProps<T> extends TestProps {
    * default item width
    */
   defaultWidth?: number;
+  /**
+   * full width list
+   */
+  fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -100,6 +106,9 @@ const _VirtualGallery = <T extends KeyValue>({
   items,
   children,
   columns,
+  fullWidth,
+  maxWidth,
+  minWidth,
   padding = "md",
   defaultHeight: height = 48,
   defaultWidth: width = 48,
@@ -287,10 +296,15 @@ const _VirtualGallery = <T extends KeyValue>({
         <div
           className={classNames(
             "box-content",
+            fullWidth && "flex-1",
             padding === "sm" && "p-1",
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={{
@@ -300,7 +314,7 @@ const _VirtualGallery = <T extends KeyValue>({
             <div style={{ height: virtualItems[0]?.start }} />
             {virtualItems.map(({ key, index, measureElement }) => (
               <div
-                className="flex"
+                className="flex justify-center"
                 key={key}
                 data-index={index}
                 ref={measureElement}

package/src/virtual/List.tsx

@@ -74,6 +74,8 @@ export interface VirtualListProps<T> extends TestProps {
    * full width list
    */
   fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -111,6 +113,8 @@ const _VirtualList = <T extends KeyValue>({
   items,
   children,
   fullWidth,
+  maxWidth,
+  minWidth,
   padding = "md",
   orientation = "vertical",
   defaultHeight: height = 48,
@@ -278,6 +282,10 @@ const _VirtualList = <T extends KeyValue>({
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={