@spaced-out/ui-design-system 0.1.97 → 0.1.99

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.99](https://github.com/spaced-out/ui-design-system/compare/v0.1.98...v0.1.99) (2024-06-03)
+
+
+### Bug Fixes
+
+* minor enhancements in fileupload, search input and pagination components ([#223](https://github.com/spaced-out/ui-design-system/issues/223)) ([902a55d](https://github.com/spaced-out/ui-design-system/commit/902a55d7d968d545cda0a1addc5c915160c59561))
+
+### [0.1.98](https://github.com/spaced-out/ui-design-system/compare/v0.1.97...v0.1.98) (2024-05-31)
+
+
+### Features
+
+* removing grid-row fixed height and width ([#222](https://github.com/spaced-out/ui-design-system/issues/222)) ([4644961](https://github.com/spaced-out/ui-design-system/commit/46449611a3925d755c665c874bf766deb80f5c5b))
+
 ### [0.1.97](https://github.com/spaced-out/ui-design-system/compare/v0.1.96...v0.1.97) (2024-05-30)
 
 

package/lib/components/FileUpload/FileUpload.js

@@ -85,7 +85,7 @@ const FileUploadBase = (props, ref) => {
       [_FileUploadModule.default.disabled]: disabled || !shouldAcceptFiles,
       [_FileUploadModule.default.dragActive]: isDragActive,
       [_FileUploadModule.default.error]: error
-    })
+    }, classNames?.dropZone)
   }), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_FileUploadModule.default.instruction, classNames?.instruction)
   }, isDragActive ? draggingInstruction : instruction), /*#__PURE__*/React.createElement("div", {
@@ -97,7 +97,10 @@ const FileUploadBase = (props, ref) => {
   }, /*#__PURE__*/React.createElement(_FileBlock.FileBlock, {
     fileObject: fileObject,
     onFileRefreshClick: onFileRefreshClick,
-    handleFileClear: handleFileDeletionExternally ? onFileClear : handleFileClear
+    handleFileClear: handleFileDeletionExternally ? onFileClear : handleFileClear,
+    classNames: {
+      wrapper: classNames?.files
+    }
   })))));
 };
 const FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);

package/lib/components/FileUpload/FileUpload.js.flow

@@ -19,6 +19,8 @@ type ClassNames = $ReadOnly<{
   wrapper?: string,
   instruction?: string,
   secondaryInstruction?: string,
+  dropZone?: string,
+  files?: string,
 }>;
 
 export type FileProgress = number | 'indeterminate';
@@ -160,11 +162,15 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
       <UnstyledButton
         disabled={disabled || !shouldAcceptFiles}
         {...getRootProps()}
-        className={classify(css.dropzone, {
-          [css.disabled]: disabled || !shouldAcceptFiles,
-          [css.dragActive]: isDragActive,
-          [css.error]: error,
-        })}
+        className={classify(
+          css.dropzone,
+          {
+            [css.disabled]: disabled || !shouldAcceptFiles,
+            [css.dragActive]: isDragActive,
+            [css.error]: error,
+          },
+          classNames?.dropZone,
+        )}
       >
         <input {...getInputProps()} />
         <div className={classify(css.instruction, classNames?.instruction)}>
@@ -190,6 +196,7 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
                 handleFileClear={
                   handleFileDeletionExternally ? onFileClear : handleFileClear
                 }
+                classNames={{wrapper: classNames?.files}}
               />
             </React.Fragment>
           ))}

package/lib/components/Grid/Grid.module.css

@@ -4,18 +4,11 @@
   spaceLarge
 ) from '../../styles/variables/_space.css';
 
-@value (
-  size960,
-  sizeFluid
-) from '../../styles/variables/_size.css';
-
 .gridRow {
   --grid-repeat-count: 12;
   --repeat-tracks: 1fr;
   display: grid !important;
   grid-template-columns: repeat(var(--grid-repeat-count), var(--repeat-tracks));
-  width: sizeFluid;
-  height: sizeFluid;
   gap: spaceMedium;
   padding: spaceNone spaceLarge;
   grid-auto-flow: row;

package/lib/components/Pagination/Pagination.js

@@ -16,6 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const LARGE_LIST_DROPDOWN_OPTIONS = 50;
 const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
@@ -39,6 +40,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     onChange,
     ...restPaginationProps
   });
+  const menuVirtualization = {
+    enable: totalPages > LARGE_LIST_DROPDOWN_OPTIONS ? true : false
+  };
   const allPages = (0, _helpers.range)(1, totalPages);
   const options = style !== 'secondary' ? [] : allPages.map(page => ({
     key: page.toString(),
@@ -63,7 +67,8 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
       classNames: {
         wrapper: _PaginationModule.default.menuWrapper
       },
-      selectedKeys: currentPage ? [currentPage.toString()] : []
+      selectedKeys: currentPage ? [currentPage.toString()] : [],
+      virtualization: menuVirtualization
     },
     dropdownInputText: currentPage.toString(),
     onChange: option => onChange?.(parseInt(option.key))

package/lib/components/Pagination/Pagination.js.flow

@@ -57,6 +57,8 @@ export type PaginationItemProps = {
   type: PaginationItemType,
 };
 
+const LARGE_LIST_DROPDOWN_OPTIONS = 50;
+
 export const Pagination: React$AbstractComponent<
   PaginationProps,
   HTMLDivElement,
@@ -83,6 +85,10 @@ export const Pagination: React$AbstractComponent<
       ...restPaginationProps,
     });
 
+    const menuVirtualization = {
+      enable: totalPages > LARGE_LIST_DROPDOWN_OPTIONS ? true : false,
+    };
+
     const allPages = range(1, totalPages);
     const options =
       style !== 'secondary'
@@ -112,6 +118,7 @@ export const Pagination: React$AbstractComponent<
                   isFluid: true,
                   classNames: {wrapper: css.menuWrapper},
                   selectedKeys: currentPage ? [currentPage.toString()] : [],
+                  virtualization: menuVirtualization,
                 }}
                 dropdownInputText={currentPage.toString()}
                 onChange={(option) => onChange?.(parseInt(option.key))}

package/lib/components/SearchInput/SearchInput.js

@@ -27,7 +27,9 @@ const SearchInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...searchInputProps
   } = _ref;
   const handleClearClick = () => {
-    onClear?.();
+    if (value && !(disabled || locked)) {
+      onClear?.();
+    }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SearchInputModule.default.searchInputWrapper, classNames?.wrapper)

package/lib/components/SearchInput/SearchInput.js.flow

@@ -44,7 +44,9 @@ export const SearchInput: React$AbstractComponent<
     ref,
   ): React.Node => {
     const handleClearClick = () => {
-      onClear?.();
+      if (value && !(disabled || locked)) {
+        onClear?.();
+      }
     };
 
     return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {