@onehat/ui 0.4.101 → 0.4.103

package/src/Components/Grid/Grid.js

@@ -147,6 +147,7 @@ function GridComponent(props) {
 			showHeaders = true,
 			showHovers = true,
 			showSelectHandle = true,
+			isRowTextSelectable, // if false, user can't select text in rows (e.g. to copy/paste)
 			isRowSelectable = true,
 			isRowHoverable = true,
 			isDisabled = false,
@@ -295,6 +296,11 @@ function GridComponent(props) {
 		footerToolbarRef = useRef(null),
 		rowRefs = useRef([]),
 		previousEntitiesLength = useRef(0),
+		paginationSelectionGuardRef = useRef({
+			source: null,
+			pending: new Set(),
+			expiresAt: 0,
+		}),
 		hasRemeasuredAfterRowsAppeared = useRef(false),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
@@ -304,20 +310,6 @@ function GridComponent(props) {
 		showRowHandle = showSelectHandle || areRowsDragSource || (canRowsReorder && isReorderMode),
 		rowLongPressDelay = rowLongPressDelayMs ?? ((areRowsDragSource || canRowsReorder) ? 800 : undefined),
 		[lastMeasuredContainerHeight, setLastMeasuredContainerHeight] = useState(0),
-		getMeasurementPhase = () => {
-			return measurementPhaseRaw.current;
-		},
-		setMeasurementPhase = (phase) => {
-			measurementPhaseRaw.current = phase;
-			forceUpdate();
-		},
-		getMeasuredRowHeight = () => {
-			return measuredRowHeightRaw.current;
-		},
-		setMeasuredRowHeight = (height) => {
-			measuredRowHeightRaw.current = height;
-			forceUpdate();
-		},
 		getIsExpanded = (index) => {
 			return !!expandedRowsRef.current[index];
 		},
@@ -426,13 +418,15 @@ function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			// Process additionalToolbarButtons to evaluate functions
 			const processedButtons = _.map(additionalToolbarButtons, (config) => {
 				const processedConfig = { ...config };
-				// If the button has an getIsButtonDisabled function, evaluate it with current selection
 				if (_.isFunction(config.getIsButtonDisabled)) {
 					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
 				}
+				if (_.isFunction(config.getText)) {
+					processedConfig.text = config.getText(selection);
+				}
 				return processedConfig;
 			});
 			const items = _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
@@ -789,6 +783,7 @@ function GridComponent(props) {
 									areCellsScrollable={areCellsScrollable}
 									showHovers={showHovers}
 									showRowHandle={showRowHandle}
+									isRowTextSelectable={isRowTextSelectable}
 									rowCanSelect={rowCanSelect}
 									rowCanDrag={rowCanDrag}
 									index={index}
@@ -1016,6 +1011,151 @@ function GridComponent(props) {
 			marker.remove();
 			cachedDragElements.current = null;
 		},
+		applySelectorSelected = () => {
+			if (disableSelectorSelected || !selectorId) {
+				return
+			}
+
+			if (previousSelectorId.current && selectorId !== previousSelectorId.current) {
+				Repository.pauseEvents();
+				Repository.clearFilters(previousSelectorId.current);
+				Repository.resumeEvents();
+			}
+			previousSelectorId.current = selectorId;
+
+			let value = null;
+			if (selectorSelected) {
+				value = selectorSelected[selectorSelectedField];
+			}
+			if (noSelectorMeansNoResults && _.isEmpty(selectorSelected)) {
+				value = 'NO_MATCHES';
+			}
+
+			Repository.filter(selectorId, value, false); // false so it doesn't clear existing filters
+		},
+		onGridKeyDown = (e) => {
+			if (isInlineEditorShown) {
+				return;
+			}
+			if (disableWithSelection) {
+				return;
+			}
+			const {
+					shiftKey = false,
+				} = e;
+			if (selectionMode === SELECTION_MODE_MULTI && shiftKey) {
+				switch(e.key) {
+					case 'ArrowDown':
+						e.preventDefault();
+						addNextToSelection();
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						addPrevToSelection();
+						break;
+				}
+			} else {
+				// selectionMode is SELECTION_MODE_SINGLE
+				switch(e.key) {
+					case 'Enter':
+						// NOTE: This is never being reached.
+						// The event is getting captured somwhere else,
+						// but I can't find where.
+						// e.preventDefault();
+						
+						// launch inline or windowed editor
+						// const p = props;
+						// debugger;
+						break;
+					case 'ArrowDown':
+						e.preventDefault();
+						selectNext();
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						selectPrev();
+						break;
+				}
+			}
+		},
+		showColumnsSelector = () => {
+			const
+				modalItems = _.map(localColumnsConfig, (config, ix) => {
+					return {
+						name: config.id,
+						label: config.header,
+						type: config.isHidable ? 'Checkbox' : 'Text',
+						isEditable: config.isHidable ?? false,
+					};
+				}),
+				startingValues = (() => {
+					const startingValues = {};
+					_.each(localColumnsConfig, (config) => {
+						const value = !config.isHidden; // checkbox implies to show it, so flip the polarity
+						startingValues[config.id] = config.isHidable ? value : 'Always shown';
+					});
+					return startingValues;
+				})();
+			
+			showModal({
+				title: 'Column Selector',
+				includeReset: true,
+				includeCancel: true,
+				h: 800,
+				w: styles.FORM_STACK_ROW_THRESHOLD + 10,
+				body: <Form
+							editorType={EDITOR_TYPE__PLAIN}
+							columnDefaults={{
+								labelWidth: '250px',
+							}}
+							items={[
+								{
+									name: 'instructions',
+									type: 'DisplayField',
+									text: 'Please select which columns to show in the grid.',
+									className: 'mb-3',
+								},
+								{
+									type: 'FieldSet',
+									title: 'Columns',
+									reference: 'columns',
+									showToggleAllCheckbox: true,
+									items: [
+										...modalItems,
+									],
+								}
+							]}
+							startingValues={startingValues}
+							onSave={(values)=> {
+								hideModal();
+
+								const newColumnsConfig = _.cloneDeep(localColumnsConfig);
+								_.each(newColumnsConfig, (config, ix) => {
+									if (config.isHidable) {
+										newColumnsConfig[ix].isHidden = !values[config.id]; // checkbox implies to show it, so flip the polarity
+									}
+								});
+								setLocalColumnsConfig(newColumnsConfig);
+							}}
+						/>,
+			});
+		},
+
+		// These methods relate to auto-pageSize measurement and adjustment:
+		getMeasurementPhase = () => {
+			return measurementPhaseRaw.current;
+		},
+		setMeasurementPhase = (phase) => {
+			measurementPhaseRaw.current = phase;
+			forceUpdate();
+		},
+		getMeasuredRowHeight = () => {
+			return measuredRowHeightRaw.current;
+		},
+		setMeasuredRowHeight = (height) => {
+			measuredRowHeightRaw.current = height;
+			forceUpdate();
+		},
 		calculatePageSize = (containerHeight, useActualMeasurements = false) => {
 			if (DEBUG) {
 				console.log(`${getMeasurementPhase()}, calculatePageSize A containerHeight=${containerHeight}, useActualMeasurements=${useActualMeasurements}, measuredRowHeight=${getMeasuredRowHeight()}`);
@@ -1200,6 +1340,7 @@ function GridComponent(props) {
 						if (DEBUG) {
 							console.log(`${getMeasurementPhase()}, applyMeasuredRowHeight B Repository.setPageSize(${newPageSize})`);
 						}
+						startAutoPageSizeSelectionGuard();
 						Repository.setPageSize(newPageSize);
 					}
 				}
@@ -1259,6 +1400,7 @@ function GridComponent(props) {
 						if (DEBUG) {
 							console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight D Repository.setPageSize(${pageSize})`);
 						}
+						startAutoPageSizeSelectionGuard();
 						Repository.setPageSize(pageSize);
 					}
 				}
@@ -1277,136 +1419,51 @@ function GridComponent(props) {
 			}
 		},
 		debouncedAdjustPageSizeToHeight = useCallback(_.debounce(adjustPageSizeToHeight, 200), []),
-		applySelectorSelected = () => {
-			if (disableSelectorSelected || !selectorId) {
-				return
-			}
-
-			if (previousSelectorId.current && selectorId !== previousSelectorId.current) {
-				Repository.pauseEvents();
-				Repository.clearFilters(previousSelectorId.current);
-				Repository.resumeEvents();
-			}
-			previousSelectorId.current = selectorId;
 
-			let value = null;
-			if (selectorSelected) {
-				value = selectorSelected[selectorSelectedField];
-			}
-			if (noSelectorMeansNoResults && _.isEmpty(selectorSelected)) {
-				value = 'NO_MATCHES';
-			}
-
-			Repository.filter(selectorId, value, false); // false so it doesn't clear existing filters
+		// These methods guard for selection/pagination interaction
+		// (If user makes a selection during the auto-pageSize adjustment, 
+		// we don't want to clear the selection if the current selection 
+		// would still be valid with the new page size):
+		clearPaginationSelectionGuard = () => {
+			paginationSelectionGuardRef.current = {
+				source: null,
+				pending: new Set(),
+				expiresAt: 0,
+			};
 		},
-		onGridKeyDown = (e) => {
-			if (isInlineEditorShown) {
+		startAutoPageSizeSelectionGuard = () => {
+			if (disableWithSelection || !deselectAll) {
 				return;
 			}
-			if (disableWithSelection) {
-				return;
+			paginationSelectionGuardRef.current = {
+				source: 'autoPageSize',
+				pending: new Set(['changePage', 'changePageSize',]),
+				expiresAt: Date.now() + 5000,
+			};
+		},
+		consumePaginationSelectionGuard = (eventType) => {
+			const guard = paginationSelectionGuardRef.current;
+			if (guard.source !== 'autoPageSize') {
+				return false;
 			}
-			const {
-					shiftKey = false,
-				} = e;
-			if (selectionMode === SELECTION_MODE_MULTI && shiftKey) {
-				switch(e.key) {
-					case 'ArrowDown':
-						e.preventDefault();
-						addNextToSelection();
-						break;
-					case 'ArrowUp':
-						e.preventDefault();
-						addPrevToSelection();
-						break;
-				}
-			} else {
-				// selectionMode is SELECTION_MODE_SINGLE
-				switch(e.key) {
-					case 'Enter':
-						// NOTE: This is never being reached.
-						// The event is getting captured somwhere else,
-						// but I can't find where.
-						// e.preventDefault();
-						
-						// launch inline or windowed editor
-						// const p = props;
-						// debugger;
-						break;
-					case 'ArrowDown':
-						e.preventDefault();
-						selectNext();
-						break;
-					case 'ArrowUp':
-						e.preventDefault();
-						selectPrev();
-						break;
-				}
+			if (Date.now() > guard.expiresAt) {
+				clearPaginationSelectionGuard();
+				return false;
+			}
+			if (!guard.pending.has(eventType)) {
+				return false;
 			}
-		},
-		showColumnsSelector = () => {
-			const
-				modalItems = _.map(localColumnsConfig, (config, ix) => {
-					return {
-						name: config.id,
-						label: config.header,
-						type: config.isHidable ? 'Checkbox' : 'Text',
-						isEditable: config.isHidable ?? false,
-					};
-				}),
-				startingValues = (() => {
-					const startingValues = {};
-					_.each(localColumnsConfig, (config) => {
-						const value = !config.isHidden; // checkbox implies to show it, so flip the polarity
-						startingValues[config.id] = config.isHidable ? value : 'Always shown';
-					});
-					return startingValues;
-				})();
-			
-			showModal({
-				title: 'Column Selector',
-				includeReset: true,
-				includeCancel: true,
-				h: 800,
-				w: styles.FORM_STACK_ROW_THRESHOLD + 10,
-				body: <Form
-							editorType={EDITOR_TYPE__PLAIN}
-							columnDefaults={{
-								labelWidth: '250px',
-							}}
-							items={[
-								{
-									name: 'instructions',
-									type: 'DisplayField',
-									text: 'Please select which columns to show in the grid.',
-									className: 'mb-3',
-								},
-								{
-									type: 'FieldSet',
-									title: 'Columns',
-									reference: 'columns',
-									showToggleAllCheckbox: true,
-									items: [
-										...modalItems,
-									],
-								}
-							]}
-							startingValues={startingValues}
-							onSave={(values)=> {
-								hideModal();
 
-								const newColumnsConfig = _.cloneDeep(localColumnsConfig);
-								_.each(newColumnsConfig, (config, ix) => {
-									if (config.isHidable) {
-										newColumnsConfig[ix].isHidden = !values[config.id]; // checkbox implies to show it, so flip the polarity
-									}
-								});
-								setLocalColumnsConfig(newColumnsConfig);
-							}}
-						/>,
-			});
+			guard.pending.delete(eventType);
+
+			if (!guard.pending.size) {
+				clearPaginationSelectionGuard();
+			}
+
+			return true;
 		};
 
+
 	if (forceLoadOnRender && disableLoadOnRender) {
 		throw new Error('incompatible config! forceLoadOnRender and disableLoadOnRender cannot both be true');
 	}
@@ -1529,7 +1586,27 @@ function GridComponent(props) {
 		// set up @onehat/data repository
 		const
 			setTrue = () => setIsLoading(true),
-			setFalse = () => setIsLoading(false),
+			setFalse = () => {
+				setIsLoading(false);
+				clearPaginationSelectionGuard();
+			},
+			onPaginationEvent = (eventType) => {
+				if (consumePaginationSelectionGuard(eventType)) {
+					return;
+				}
+				if (!disableWithSelection && deselectAll) {
+					deselectAll();
+				}
+				if (eventType === 'changePage' && showRowExpander) {
+					expandedRowsRef.current = {}; // clear expanded rows
+				}
+			},
+			onChangePageSize = () => {
+				if (disableWithSelection || !deselectAll) {
+					return;
+				}
+				onPaginationEvent('changePageSize');
+			},
 			onChangeFilters = () => {
 				if (DEBUG) {
 					console.log('onChangeFilters, reload and re-measure');
@@ -1544,20 +1621,16 @@ function GridComponent(props) {
 				}
 			},
 			onChangePage = () => {
-				if (showRowExpander) {
-					expandedRowsRef.current = {}; // clear expanded rows
-				}
+				onPaginationEvent('changePage');
 			};
 
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
-		if (!disableWithSelection) {
-			Repository.ons(['changePage', 'changePageSize',], deselectAll);
-		}
+		Repository.on('changePage', onChangePage);
+		Repository.on('changePageSize', onChangePageSize);
 		Repository.ons(['changeData', 'change'], forceUpdate);
 		Repository.on('changeFilters', onChangeFilters);
 		Repository.on('changeSorters', onChangeSorters);
-		Repository.on('changePage', onChangePage);
 
 		applySelectorSelected();
 
@@ -1576,13 +1649,11 @@ function GridComponent(props) {
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
-			if (!disableWithSelection) {
-				Repository.offs(['changePage', 'changePageSize',], deselectAll);
-			}
+			Repository.off('changePage', onChangePage);
+			Repository.off('changePageSize', onChangePageSize);
 			Repository.offs(['changeData', 'change'], forceUpdate);
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);
-			Repository.off('changePage', onChangePage);
 		};
 	}, [isInited]);
 
@@ -1598,8 +1669,8 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
-	// Effect to trigger row height measurement after render
 	useEffect(() => {
+		// trigger row height measurement after render
 		if (getMeasurementPhase() === PHASES__MEASURING) {
 			// Small delay to ensure elements are fully rendered
 			const timer = setTimeout(async () => {
@@ -1635,13 +1706,13 @@ function GridComponent(props) {
 		}
 	}, [autoAdjustPageSizeToHeight]);
 
-	// Reset measurement when rows were first empty then became populated
 	useEffect(() => {
+		// Reset measurement when rows were first empty then became populated
 		const
 			currentLength = entities?.length || 0,
 			wasEmpty = previousEntitiesLength.current === 0,
 			isNowPopulated = currentLength > 0,
-			hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+			hasPhantomRecord = entities?.some(entity => !entity.isDestroyed && entity?.isPhantom);
 			
 		// NOTE: The Repository was reloading when a phantom record was added,
 		// and this broke the Editor because selection was being reset to zero.
@@ -1672,6 +1743,15 @@ function GridComponent(props) {
 		previousEntitiesLength.current = currentLength;
 	}, [entities?.length, autoAdjustPageSizeToHeight]);
 
+	
+	// Memoize footer toolbar items to avoid unnecessary re-renders, but only if they don't have dynamic properties
+	const
+		hasDynamicFooterToolbarItems = useMemo(() => _.some(additionalToolbarButtons, (config) => {
+			return _.isFunction(config.getIsButtonDisabled) || _.isFunction(config.getText);
+		}), [additionalToolbarButtons]),
+		memoizedFooterToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isReorderMode]),
+		footerToolbarItemComponents = hasDynamicFooterToolbarItems ? getFooterToolbarItems() : memoizedFooterToolbarItemComponents;
+
 	if (canUser && !canUser('view')) {
 		return <Unauthorized />;
 	}
@@ -1683,8 +1763,6 @@ function GridComponent(props) {
 
 	isAddingRaw.current = isAdding;
 
-	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isReorderMode]);
-
 	if (!isInited) {
 		// first time through, render a placeholder so we can get container dimensions
 		return <VStackNative

package/src/Components/Grid/GridRow.js

@@ -38,6 +38,7 @@ const GridRow = forwardRef((props, ref) => {
 			rowProps,
 			hideNavColumn,
 			showRowHandle,
+			isRowTextSelectable,
 			areCellsScrollable,
 			rowCanSelect,
 			rowCanDrag,
@@ -126,6 +127,8 @@ const GridRow = forwardRef((props, ref) => {
 		const
 			visibleColumns = _.filter(columnsConfig, (config) => !config.isHidden),
 			isOnlyOneVisibleColumn = visibleColumns.length === 1,
+			canSelectTextOnRow = isRowTextSelectable === false ? false : isDragFromHandleOnly,
+			shouldUseTextCursor = showRowHandle && canSelectTextOnRow,
 			rowShouldHaveDragRef = !isDragFromHandleOnly && (isDragSource || isDraggable) && !!dragSourceRef;
 		const setRowRef = (node) => {
 			if (typeof ref === 'function') {
@@ -152,7 +155,7 @@ const GridRow = forwardRef((props, ref) => {
 					const
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
-						whichCursor = showRowHandle && isDragFromHandleOnly ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
+						whichCursor = shouldUseTextCursor ? 'cursor-text' : 'cursor-pointer';
 					let colClassName = clsx(
 						'GridRow-column',
 						'p-1',
@@ -160,7 +163,7 @@ const GridRow = forwardRef((props, ref) => {
 						'border-r-black-100',
 						'block',
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
-						isDragFromHandleOnly ? null : 'select-none',
+						canSelectTextOnRow ? null : 'select-none',
 						whichCursor,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
@@ -465,7 +468,7 @@ const GridRow = forwardRef((props, ref) => {
 		let rowClassName = clsx(
 			'GridRow-HStackNative',
 			'items-center',
-			isDragFromHandleOnly ? null : 'select-none',
+			canSelectTextOnRow ? null : 'select-none',
 		);
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
@@ -514,6 +517,7 @@ const GridRow = forwardRef((props, ref) => {
 		dragPreviewRef,
 		dropTargetRef,
 		showRowHandle,
+		isRowTextSelectable,
 		rowCanSelect,
 		rowCanDrag,
 		isDragFromHandleOnly,

package/src/Components/Hoc/withPresetButtons.js

@@ -39,7 +39,7 @@ const presetButtons = [
 	DOWNLOAD,
 ];
 
-export default function withPresetButtons(WrappedComponent, isGrid = false) {
+export default function withPresetButtons(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
 		if (props.disablePresetButtons || props.alreadyHasWithPresetButtons) {
@@ -64,7 +64,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			{
 				// extract and pass down
 				isEditor = false,
-				isTree = false,
+				isTree = false, // from withWindowedEditor or withSideEditor in Tree
 				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
@@ -74,10 +74,10 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,
-				disableView = !isGrid,
-				disableCopy = !isGrid,
+				disableView = isTree,
+				disableCopy = isTree,
 				disableDuplicate = !isEditor,
-				disablePrint = !isGrid,
+				disablePrint = isTree,
 				protectedValues, // records with these values cannot be edited or deleted
 				addDisplayMsg,
 				editDisplayMsg,
@@ -434,6 +434,18 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				}
 			},
 			onUploadDownload = () => {
+				const onUploadDecorator = async () => {
+					if (onUpload) {
+						await onUpload();
+					}
+					if (Repository && !Repository.isDestroyed) {
+						if (Repository.loadRootNodes) {
+							await Repository.loadRootNodes(1);
+						} else {
+							await Repository.reload();
+						}
+					}
+				};
 				showModal({
 					body: <UploadsDownloadsWindow
 								reference="uploadsDownloads"
@@ -442,7 +454,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 								columnsConfig={props.columnsConfig}
 								uploadHeaders={uploadHeaders}
 								uploadParams={uploadParams}
-								onUpload={onUpload}
+								onUpload={onUploadDecorator}
 								downloadHeaders={downloadHeaders}
 								downloadParams={downloadParams}
 							/>,

package/src/Components/Icons/ArrowsLeftRight.js

@@ -0,0 +1,10 @@
+import { createIcon } from "../Gluestack/icon";
+import Svg, { Path } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 512 512',
+	path: <Path d="M406.6 374.6l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l41.4 41.4H109.2l41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288h293.5l-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" />,
+});
+
+export default SvgComponent

package/src/Components/Icons/Bar.js

@@ -0,0 +1,10 @@
+import { createIcon } from "../Gluestack/icon";
+import Svg, { Path } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 228.6 32.7',
+	path: <Path d="M212.2 32.7c9 0 16.3-7.3 16.3-16.3S221.2.1 212.2.1H16.3C7.3 0 0 7.3 0 16.3s7.3 16.3 16.3 16.3h195.9z" />,
+});
+
+export default SvgComponent

package/src/Components/Icons/Box.js

@@ -0,0 +1,11 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import { createIcon } from "../Gluestack/icon";
+import Svg, { Path } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 448 512',
+	path: <Path d="M50.7 58.5L0 160h208V32H93.7c-18.2 0-34.8 10.3-43 26.5zM240 160h208L397.3 58.5c-8.2-16.2-24.8-26.5-43-26.5H240v128zm208 32H0v224c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V192z" />,
+});
+
+export default SvgComponent

package/src/Components/Icons/BoxOpen.js

@@ -0,0 +1,11 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import { createIcon } from "../Gluestack/icon";
+import Svg, { Path } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 640 512',
+	path: <Path d="M58.9 42.1c3-6.1 9.6-9.6 16.3-8.7L320 64l244.8-30.6c6.7-.8 13.3 2.7 16.3 8.7l41.7 83.4c9 17.9-.6 39.6-19.8 45.1l-163.4 46.7c-13.9 4-28.8-1.9-36.2-14.3L320 64l-83.4 139c-7.4 12.4-22.3 18.3-36.2 14.3L37.1 170.6c-19.3-5.5-28.8-27.2-19.8-45.1l41.6-83.4zM321.1 128l54.9 91.4c14.9 24.8 44.6 36.6 72.5 28.6L576 211.6v167c0 22-15 41.2-36.4 46.6l-204.1 51c-10.2 2.6-20.9 2.6-31 0l-204.1-51C79 419.7 64 400.5 64 378.5v-167L191.6 248c27.8 8 57.6-3.8 72.5-28.6l54.8-91.4h2.2z" />,
+});
+
+export default SvgComponent

package/src/Components/Icons/Bucket.js

@@ -0,0 +1,10 @@
+import { createIcon } from "../Gluestack/icon";
+import Svg, { Path } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 448 512',
+	path: <Path d="M96 152v8H48v-8C48 68.1 116.1 0 200 0h48c83.9 0 152 68.1 152 152v8h-48v-8c0-57.4-46.6-104-104-104h-48C142.6 48 96 94.6 96 152zM0 224c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32h-5.1l-22.4 213c-2.6 24.4-23.2 43-47.7 43H107.2c-24.6 0-45.2-18.5-47.7-43L37.1 256H32c-17.7 0-32-14.3-32-32z" />,
+});
+
+export default SvgComponent