@spaced-out/ui-design-system 0.1.98 → 0.1.100

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.100](https://github.com/spaced-out/ui-design-system/compare/v0.1.99...v0.1.100) (2024-06-13)
+
+
+### Bug Fixes
+
+* circular loader default color ([#227](https://github.com/spaced-out/ui-design-system/issues/227)) ([fdf816b](https://github.com/spaced-out/ui-design-system/commit/fdf816b96e80f07d2b1c34f9f5ea58e137fca364))
+* responsive secondary pagination controls ([#225](https://github.com/spaced-out/ui-design-system/issues/225)) ([43b8d4d](https://github.com/spaced-out/ui-design-system/commit/43b8d4da02793e85c9a453c25ded86aab2ebb605))
+
+### [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)
 
 

package/lib/components/CircularLoader/CircularLoader.js

@@ -16,7 +16,7 @@ const CircularLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
-    colorToken = 'colorFillPrimary',
+    colorToken = 'colorTextClickable',
     ariaLabel = 'Loading'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -24,7 +24,7 @@ export const CircularLoader: React$AbstractComponent<
     {
       size = 'medium',
       className,
-      colorToken = 'colorFillPrimary',
+      colorToken = 'colorTextClickable',
       ariaLabel = 'Loading',
     }: CircularLoaderProps,
     ref,

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/Pagination/Pagination.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pagination = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _usePagination = require("../../hooks/usePagination");
+var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
 var _Dropdown = require("../Dropdown");
@@ -16,7 +17,13 @@ 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 TABLET_SCREEN_SIZE = 640;
 const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
+  const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
   const {
     classNames,
     style = 'primary',
@@ -24,10 +31,11 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     currentPage = 1,
     totalPages = 1,
     onChange,
-    showFirstButton = style !== 'primary',
-    showLastButton = style !== 'primary',
+    showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
+    showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
     ...restPaginationProps
   } = props;
+  const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
   const {
     items
   } = (0, _usePagination.usePagination)({
@@ -39,6 +47,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(),
@@ -52,7 +63,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children)
   }, children), /*#__PURE__*/React.createElement("div", {
     className: _PaginationModule.default.paginatorSlots
-  }, style === 'secondary' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+  }, style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     size: "small",
     classNames: {
       wrapper: _PaginationModule.default.dropdownWrapper
@@ -63,7 +74,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

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import {usePagination} from '../../hooks/usePagination';
+import {useWindowSize} from '../../hooks/useWindowSize';
 import classify from '../../utils/classify';
 import {range} from '../../utils/helpers';
 import {Dropdown} from '../Dropdown';
@@ -57,11 +58,17 @@ export type PaginationItemProps = {
   type: PaginationItemType,
 };
 
+const LARGE_LIST_DROPDOWN_OPTIONS = 50;
+
+const TABLET_SCREEN_SIZE = 640;
+
 export const Pagination: React$AbstractComponent<
   PaginationProps,
   HTMLDivElement,
 > = React.forwardRef<PaginationProps, HTMLDivElement>(
   (props: PaginationProps, ref) => {
+    const {width} = useWindowSize();
+    const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
     const {
       classNames,
       style = 'primary',
@@ -69,10 +76,13 @@ export const Pagination: React$AbstractComponent<
       currentPage = 1,
       totalPages = 1,
       onChange,
-      showFirstButton = style !== 'primary',
-      showLastButton = style !== 'primary',
+      showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
+      showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
       ...restPaginationProps
     } = props;
+    const showPageSelectionDropDown =
+      style !== 'primary' && showExtraSecPaginationButtons;
+
     const {items} = usePagination({
       style,
       showFirstButton,
@@ -83,6 +93,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'
@@ -102,7 +116,7 @@ export const Pagination: React$AbstractComponent<
           {children}
         </div>
         <div className={css.paginatorSlots}>
-          {style === 'secondary' && (
+          {style === 'secondary' && showPageSelectionDropDown && (
             <>
               <Dropdown
                 size="small"
@@ -112,6 +126,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.98",
+  "version": "0.1.100",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {