@spaced-out/ui-design-system 0.1.49 → 0.1.51

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.51](https://github.com/spaced-out/ui-design-system/compare/v0.1.50...v0.1.51) (2023-09-20)
+
+
+### Features
+
+* new table actions ([#144](https://github.com/spaced-out/ui-design-system/issues/144)) ([d28c032](https://github.com/spaced-out/ui-design-system/commit/d28c0321fff272694e2363fd0a634c6a9030b50a))
+
+### [0.1.50](https://github.com/spaced-out/ui-design-system/compare/v0.1.49...v0.1.50) (2023-09-15)
+
+
+### Features
+
+* external file deletion support for file upload ([32cf857](https://github.com/spaced-out/ui-design-system/commit/32cf857a9688c2a20b1214381caccde699c192c4))
+
 ### [0.1.49](https://github.com/spaced-out/ui-design-system/compare/v0.1.48...v0.1.49) (2023-09-15)
 
 

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

@@ -18,7 +18,7 @@ type ClassNames = $ReadOnly<{
 export type FileBlockProps = {
   classNames?: ClassNames,
   fileObject: FileObject,
-  onFileRefreshClick?: (file: FileObject) => void,
+  onFileRefreshClick?: (file: FileObject) => mixed,
   handleFileClear?: (id: string) => mixed,
 };
 

package/lib/components/FileUpload/FileUpload.js

@@ -31,7 +31,8 @@ const FileUploadBase = (props, ref) => {
     onRejectedFilesDrop,
     onFileClear,
     onFileRefreshClick,
-    maxFiles = 1
+    maxFiles = 1,
+    handleFileDeletionExternally
   } = props;
 
   // Get file upload state from useFileUpload hook
@@ -62,6 +63,7 @@ const FileUploadBase = (props, ref) => {
     moveFileToProgress,
     moveFileToSuccess,
     moveFileToReject,
+    handleFileClear,
     setShowReUpload,
     validFiles,
     rejectedFiles,
@@ -95,7 +97,7 @@ const FileUploadBase = (props, ref) => {
   }, /*#__PURE__*/React.createElement(_FileBlock.FileBlock, {
     fileObject: fileObject,
     onFileRefreshClick: onFileRefreshClick,
-    handleFileClear: handleFileClear
+    handleFileClear: handleFileDeletionExternally ? onFileClear : handleFileClear
   })))));
 };
 const FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);

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

@@ -23,8 +23,15 @@ type ClassNames = $ReadOnly<{
 
 export type FileProgress = number | 'indeterminate';
 
+type LocalFileProps = {
+  name?: string,
+  type?: string,
+  size?: number,
+  ...
+};
+
 export type FileObject = {
-  file: File,
+  file: File | LocalFileProps,
   id: string,
   reject?: boolean,
   rejectReason?: string,
@@ -53,6 +60,7 @@ export type FileUploadRef = {
   moveFileToSuccess: (id: string, successMessage?: string) => mixed,
   moveFileToReject: (id: string, rejectReason?: string) => mixed,
   setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
+  handleFileClear: (id: string) => mixed,
   validFiles: Array<FileObject>,
   rejectedFiles: Array<FileObject>,
   files: Array<FileObject>,
@@ -66,12 +74,12 @@ export type FileUploadBaseProps = {
   disabled?: boolean,
 
   // File drop callbacks
-  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => void,
-  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => void,
+  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => mixed,
+  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => mixed,
 
   // File clear callbacks
-  onFileClear?: (id: string) => void,
-  onClear?: () => void,
+  onFileClear?: (id: string) => mixed,
+  onClear?: () => mixed,
 };
 
 export type FileUploadProps = {
@@ -83,9 +91,10 @@ export type FileUploadProps = {
   draggingInstruction?: React.Node,
   secondaryInstruction?: React.Node,
   required?: boolean,
+  handleFileDeletionExternally?: boolean,
 
   // File refresh callback
-  onFileRefreshClick?: (file: FileObject) => void,
+  onFileRefreshClick?: (file: FileObject) => mixed,
 };
 
 const FileUploadBase = (props: FileUploadProps, ref) => {
@@ -105,6 +114,7 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
     onFileClear,
     onFileRefreshClick,
     maxFiles = 1,
+    handleFileDeletionExternally,
   } = props;
 
   // Get file upload state from useFileUpload hook
@@ -135,6 +145,7 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
     moveFileToProgress,
     moveFileToSuccess,
     moveFileToReject,
+    handleFileClear,
     setShowReUpload,
     validFiles,
     rejectedFiles,
@@ -183,7 +194,9 @@ const FileUploadBase = (props: FileUploadProps, ref) => {
               <FileBlock
                 fileObject={fileObject}
                 onFileRefreshClick={onFileRefreshClick}
-                handleFileClear={handleFileClear}
+                handleFileClear={
+                  handleFileDeletionExternally ? onFileClear : handleFileClear
+                }
               />
             </React.Fragment>
           ))}

package/lib/components/Table/DefaultTableHeader.js

@@ -63,7 +63,8 @@ function DefaultTableHeader(props) {
     sortDirection = 'original',
     handleCheckboxClick,
     checked,
-    disabled
+    disabled,
+    stickyHeader
   } = props;
   const tableHeaderCells = () => /*#__PURE__*/React.createElement(React.Fragment, null, columns.map((columnData, index) => {
     const {
@@ -130,7 +131,9 @@ function DefaultTableHeader(props) {
     }, filterIcon))));
   }));
   return /*#__PURE__*/React.createElement(BasicTableHead, {
-    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, className)
+    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, {
+      [_TableModule.default.stickyHeader]: stickyHeader
+    }, className)
   }, /*#__PURE__*/React.createElement(_DefaultRow.BasicRow, {
     className: _TableModule.default.defaultHeaderRow
   }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {

package/lib/components/Table/DefaultTableHeader.js.flow

@@ -56,6 +56,7 @@ export type TableHeaderProps<T, U> = {
   checked?: 'true' | 'false' | 'mixed',
   handleCheckboxClick?: ({value: string, checked: boolean}) => mixed,
   disabled?: boolean,
+  stickyHeader?: boolean,
 };
 
 const SortIcon = ({
@@ -113,6 +114,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
     handleCheckboxClick,
     checked,
     disabled,
+    stickyHeader,
   } = props;
 
   const tableHeaderCells = () => (
@@ -208,7 +210,13 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
   );
 
   return (
-    <BasicTableHead className={classify(css.tableHeaderSortable, className)}>
+    <BasicTableHead
+      className={classify(
+        css.tableHeaderSortable,
+        {[css.stickyHeader]: stickyHeader},
+        className,
+      )}
+    >
       <BasicRow className={css.defaultHeaderRow}>
         {handleCheckboxClick && (
           <BasicHeadCell scope="col">

package/lib/components/Table/StaticTable.js

@@ -55,7 +55,8 @@ function StaticTable(props) {
     emptyText,
     disabled,
     customLoader,
-    borderRadius
+    borderRadius,
+    stickyHeader
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -86,7 +87,9 @@ function StaticTable(props) {
     }
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",
-    className: (0, _classify.classify)(className, classNames?.table)
+    className: (0, _classify.classify)(className, {
+      [_TableModule.default.fullHeightTable]: isLoading || !entries.length && !!emptyText
+    }, classNames?.table)
   }, showHeader && /*#__PURE__*/React.createElement(_DefaultTableHeader.DefaultTableHeader, {
     className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
     sortable: sortable,
@@ -96,6 +99,7 @@ function StaticTable(props) {
     sortDirection: sortDirection,
     disabled: disabled,
     handleCheckboxClick: handleHeaderCheckboxClick,
+    stickyHeader: stickyHeader,
     checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
   }), /*#__PURE__*/React.createElement(BasicTableBody, {
     className: classNames?.tableBody

package/lib/components/Table/StaticTable.js.flow

@@ -65,6 +65,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     disabled,
     customLoader,
     borderRadius,
+    stickyHeader,
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -102,7 +103,14 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     >
       <BasicTable
         data-id="basic-table"
-        className={classify(className, classNames?.table)}
+        className={classify(
+          className,
+          {
+            [css.fullHeightTable]:
+              isLoading || (!entries.length && !!emptyText),
+          },
+          classNames?.table,
+        )}
       >
         {showHeader && (
           <DefaultTableHeader
@@ -114,6 +122,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
             sortDirection={sortDirection}
             disabled={disabled}
             handleCheckboxClick={handleHeaderCheckboxClick}
+            stickyHeader={stickyHeader}
             checked={
               selectedKeys == null || selectedKeys.length === 0
                 ? 'false'

package/lib/components/Table/Table.js.flow

@@ -52,6 +52,9 @@ export type TableProps<T, U> = {
   disabled?: boolean,
   customLoader?: React.Node,
   borderRadius?: string,
+
+  // For this to work the table wrapper should be scrollable
+  stickyHeader?: boolean,
 };
 
 /**

package/lib/components/Table/Table.module.css

@@ -11,8 +11,8 @@
   colorGrayLightest
 ) from '../../styles/variables/_color.css';
 @value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
-@value (sizeFluid, size48, size60, size240, size300) from '../../styles/variables/_size.css';
-@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (sizeFluid, size2, size48, size60, size240, size300) from '../../styles/variables/_size.css';
+@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium, borderWidthSecondary) from '../../styles/variables/_border.css';
 @value (fontLineHeight170) from '../../styles/variables/_font.css';
 @value (elevationCard) from '../../styles/variables/_elevation.css';
 
@@ -40,6 +40,9 @@
   table-layout: fixed;
   white-space: nowrap;
 }
+.fullHeightTable {
+  height: sizeFluid;
+}
 .defaultTableBody {
   flex-flow: column;
   border-radius: borderRadiusNone borderRadiusNone var(--border-radius)
@@ -121,7 +124,7 @@
 .stickyCell {
   position: sticky;
   left: spaceNone;
-  z-index: elevationCard;
+  z-index: calc(elevationCard / 2);
 }
 
 .stickyHeaderCell {
@@ -254,3 +257,19 @@
 .selectedSortArrow {
   color: colorTextPrimary;
 }
+
+.stickyHeader {
+  position: sticky;
+  top: spaceNone;
+  z-index: elevationCard;
+}
+
+.stickyHeader::after {
+  content: '';
+  position: absolute;
+  bottom: calc(borderWidthSecondary * -1);
+  left: spaceNone;
+  width: sizeFluid;
+  height: calc(size2 / 2);
+  background: colorBorderPrimary;
+}

package/lib/components/Table/TableBar.module.css

@@ -1,7 +1,7 @@
 @value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (size2, size22, size48, size60, size240, size300, sizeFluid) from '../../styles/variables/_size.css';
+@value (size2, size22, size48, size50, size60, size240, size300, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusMedium, borderRadiusNone) from '../../styles/variables/_border.css';
-@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (colorBackgroundTertiary, colorFillPrimary) from '../../styles/variables/_color.css';
 @value (elevationMenu) from '../../styles/variables/_elevation.css';
 
 .tableBar {
@@ -30,19 +30,12 @@
 }
 
 .tableActionBar {
-  composes: borderPrimary from '../../styles/border.module.css';
-  composes: boxShadow4 from '../../styles/shadow.module.css';
-  position: absolute;
-  left: spaceHalfFluid;
-  z-index: elevationMenu;
-  transform: translateX(spaceNegHalfFluid);
-  bottom: calc(spaceMedium * -1);
   display: flex;
+  height: size50;
+  background-color: colorFillPrimary;
+  composes: boxShadow3 from '../../styles/shadow.module.css';
   align-items: center;
-  min-height: calc(size60 - size2);
-  width: fit-content;
-  padding: spaceSmall;
-  background-color: colorBackgroundTertiary;
-  border-radius: borderRadiusMedium;
-  width: max-content;
+  justify-content: space-between;
+  width: sizeFluid;
+  padding: spaceXSmall spaceSmall spaceXSmall spaceMedium;
 }

package/lib/utils/helpers/helpers.js

@@ -21,7 +21,8 @@ const range = (start, end) => {
   }, (_, i) => start + i);
 };
 exports.range = range;
-const convertFileSize = fileSize => {
+const convertFileSize = function () {
+  let fileSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   let sizeInBytes = fileSize;
   // Check if the file size is less than 1024
   if (sizeInBytes < 0) {

package/lib/utils/helpers/helpers.js.flow

@@ -15,7 +15,7 @@ export const range = (start: number, end: number): Array<number> => {
   return Array.from({length}, (_, i) => start + i);
 };
 
-export const convertFileSize = (fileSize: number): string => {
+export const convertFileSize = (fileSize: number = 0): string => {
   let sizeInBytes = fileSize;
   // Check if the file size is less than 1024
   if (sizeInBytes < 0) {

package/package.json

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