@onehat/ui 0.4.71 → 0.4.73

package/src/Components/Gluestack/icon/createIcon.js

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { Path, G } from 'react-native-svg';
+const ChildPath = ({ element, fill, stroke: pathStroke }) => {
+    const pathStrokeColor = pathStroke || '';
+    const fillColor = fill || '';
+    if (!element) {
+        return null;
+    }
+    if (element.type === React.Fragment) {
+        return element;
+    }
+    return React.cloneElement(element, {
+        fill: fillColor ? fillColor : 'currentColor',
+        stroke: pathStrokeColor,
+    });
+};
+export function createIcon({ Root, path, d, ...initialProps }) {
+    const IconTemp = forwardRef((props, ref) => {
+        let children = path;
+        if (d && (!path || Object.keys(path).length === 0)) {
+            children = <Path fill="currentColor" d={d}/>;
+        }
+        const finalProps = {
+            ...initialProps,
+            ...props,
+        };
+        const {
+			stroke = 'currentColor',
+			// BEGIN SKOTE MOD
+			fill,
+			// END SKOTE MOD
+			color,
+			role = 'img',
+			...resolvedProps
+		} = finalProps;
+        let type = resolvedProps.type;
+        if (type === undefined) {
+            type = 'svg';
+        }
+        let colorProps = {};
+        if (color) {
+            colorProps = { ...colorProps, color: color };
+        }
+        if (stroke) {
+            colorProps = { ...colorProps, stroke: stroke };
+        }
+        let sizeProps = {};
+        let sizeStyle = {};
+        if (type === 'font') {
+            if (resolvedProps.sx) {
+                sizeProps = { ...sizeProps, fontSize: resolvedProps?.sx?.h };
+            }
+            if (resolvedProps.size) {
+                // sizeProps = { ...sizeProps, fontSize: resolvedProps?.size };
+            }
+        }
+        return (<Root {...resolvedProps} {...colorProps} role={role} ref={ref} {...sizeProps} {...sizeStyle}>
+        {React.Children.count(children) > 0 ? (<G>
+            {React.Children.map(children, (child, i) => (
+				<ChildPath
+					key={child?.key ?? i}
+					element={child}
+					{...child?.props}
+					// BEGIN SKOTE MOD
+					fill={fill || child?.props?.fill}
+					// END SKOTE MOD
+				/>
+			))}
+          </G>) : null}
+      </Root>);
+    });
+    const Icon = IconTemp;
+    return Icon;
+}

package/src/Components/Gluestack/icon/index.tsx

@@ -1,75 +1,29 @@
 'use client';
-import React, { useMemo } from 'react';
-import { createIcon } from '@gluestack-ui/icon';
-import { Path, Svg } from 'react-native-svg';
+import React from 'react';
+// BEGIN SKOTE MOD
+// See my comment here: https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+// import { createIcon } from '@gluestack-ui/icon';
+import { createIcon } from './createIcon.js';
+// END SKOTE MOD
+import { Path } from 'react-native-svg';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from 'nativewind';
 import { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-type IPrimitiveIcon = {
-  height?: number | string;
-  width?: number | string;
-  fill?: string;
-  color?: string;
-  size?: number | string;
-  stroke?: string;
-  as?: React.ElementType;
-  className?: string;
-  classNameColor?: string;
-};
-
-const PrimitiveIcon = React.forwardRef<
-  React.ElementRef<typeof Svg>,
-  IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      classNameColor,
-      size,
-      stroke,
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    color = color ?? classNameColor;
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    let colorProps = {};
-    if (fill) {
-      colorProps = { ...colorProps, fill: fill };
-    }
-    if (stroke !== 'currentColor') {
-      colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === 'currentColor' && color !== undefined) {
-      colorProps = { ...colorProps, stroke: color };
-    }
-
-    if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
-    }
-    return (
-      <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
-    );
-  }
-);
+import { PrimitiveIcon, IPrimitiveIcon, Svg } from '@gluestack-ui/icon';
 
 export const UIIcon = createIcon({
   Root: PrimitiveIcon,
-});
+}) as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+    React.RefAttributes<React.ComponentRef<typeof Svg>>
+>;
 
 const iconStyle = tva({
-  base: 'text-typography-950 fill-none pointer-events-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-typography-950 fill-none pointer-events-none',
+  base: 'text-typography-950 fill-black pointer-events-none',
+// END SKOTE MOD
   variants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -82,7 +36,6 @@ const iconStyle = tva({
   },
 });
 
-// @ts-expect-error
 cssInterop(UIIcon, {
   className: {
     target: 'style',
@@ -100,8 +53,8 @@ type IIConProps = IPrimitiveIcon &
   VariantProps<typeof iconStyle> &
   React.ComponentPropsWithoutRef<typeof UIIcon>;
 
-export const Icon = React.forwardRef<React.ElementRef<typeof Svg>, IIConProps>(
-  ({ size = 'md', className, ...props }, ref) => {
+const Icon = React.forwardRef<React.ComponentRef<typeof UIIcon>, IIConProps>(
+  function Icon({ size = 'md', className, ...props }, ref) {
     if (typeof size === 'number') {
       return (
         <UIIcon
@@ -133,31 +86,36 @@ export const Icon = React.forwardRef<React.ElementRef<typeof Svg>, IIConProps>(
   }
 );
 
+export { Icon };
+
 type ParameterTypes = Omit<Parameters<typeof createIcon>[0], 'Root'>;
 
 const createIconUI = ({ ...props }: ParameterTypes) => {
-  const UIIconCreateIcon = createIcon({ Root: Svg, ...props });
-
-  return React.forwardRef<React.ElementRef<typeof Svg>>(
-    (
-      {
-        className,
-        size,
-        ...props
-      }: VariantProps<typeof iconStyle> &
-        React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
-      ref
-    ) => {
-      return (
-        <UIIconCreateIcon
-          // @ts-ignore
-          ref={ref}
-          {...props}
-          className={iconStyle({ size, class: className })}
-        />
-      );
-    }
-  );
+  const UIIconCreateIcon = createIcon({
+    Root: Svg,
+    ...props,
+  }) as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+      React.RefAttributes<React.ComponentRef<typeof Svg>>
+  >;
+
+  return React.forwardRef<React.ComponentRef<typeof Svg>>(function UIIcon(
+    {
+      className,
+      size,
+      ...inComingProps
+    }: VariantProps<typeof iconStyle> &
+      React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
+    ref
+  ) {
+    return (
+      <UIIconCreateIcon
+        ref={ref}
+        {...inComingProps}
+        className={iconStyle({ size, class: className })}
+      />
+    );
+  });
 };
 export { createIconUI as createIcon };
 // All Icons

package/src/Components/Gluestack/input/index.tsx

@@ -115,7 +115,11 @@ const inputStyle = tva({
 });
 
 const inputIconStyle = tva({
-  base: 'justify-center items-center text-typography-400 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'justify-center items-center text-typography-400 fill-none',
+  base: 'justify-center items-center text-typography-400 fill-black',
+// END SKOTE MOD
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/select/index.tsx

@@ -33,7 +33,11 @@ const SelectTriggerWrapper = React.forwardRef<
 });
 
 const selectIconStyle = tva({
-  base: 'text-background-500 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-background-500 fill-none',
+  base: 'text-background-500 fill-black',
+// END SKOTE MOD
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Grid/Grid.js

@@ -35,7 +35,6 @@ import {
 	hasFlex,
 } from '../../Functions/tailwindFunctions.js';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
-import Inflector from 'inflector-js';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
@@ -113,11 +112,15 @@ function GridComponent(props) {
 			columnProps = {},
 			defaultHiddenColumns = [],
 			getRowProps = (item) => {
+				let className = clsx(
+					'border-bottom-1',
+					'border-bottom-grey-500',
+				);
+				if (CURRENT_MODE === UI_MODE_NATIVE) {
+					className += ' py-4';
+				}
 				return {
-					className: clsx(
-						'border-bottom-1',
-						'border-bottom-grey-500',
-					),
+					className,
 				};
 			},
 			flatListProps = {},
@@ -171,6 +174,7 @@ function GridComponent(props) {
 
 			// DND
 			canRowsReorder = false,
+			canRowDrag, // optional fn to customize whether each row can be dragged
 			canRowAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
 			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
 			dragPreviewOptions, // optional object for drag preview positioning options
@@ -540,6 +544,7 @@ function GridComponent(props) {
 									rowReorderProps.dragSourceItem = {
 										id: item.id,
 										getSelection,
+										isInSelection,
 										onDrag: (dragState) => {
 											onRowReorderDrag(dragState, dragIx);
 										},
@@ -547,20 +552,30 @@ function GridComponent(props) {
 									rowReorderProps.onDragEnd = onRowReorderEnd;
 								} else {
 									// Don't allow drag/drop from withDnd while reordering
-									if (areRowsDragSource) {
+									if (areRowsDragSource && (!canRowDrag || canRowDrag(item))) {
 										WhichRow = DragSourceGridRow;
 										rowDragProps.isDragSource = true;
 										rowDragProps.dragSourceType = rowDragSourceType;
 										if (getRowDragSourceItem) {
-											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, rowDragSourceType);
+											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, isInSelection, rowDragSourceType);
 										} else {
 											rowDragProps.dragSourceItem = {
 												id: item.id,
 												item,
 												getSelection,
+												isInSelection,
 												type: rowDragSourceType,
 											};
 										}
+										rowDragProps.dragSourceItem.onDragStart = () => {
+											if (!isInSelection(item)) { // get updated isSelected (will be stale if using one in closure)
+												// reset the selection to just this one node if it's not already selected
+												setSelection([item]);
+											}
+										};
+										if (canRowDrag) {
+											rowDragProps.canDrag = () => canRowDrag(item, rowDragProps.dragSourceItem);
+										}
 										
 										// Add custom drag preview options
 										if (dragPreviewOptions) {
@@ -697,8 +712,7 @@ function GridComponent(props) {
 			};
 		},
 		buildCachedDragElements = (dragState) => {
-			const
-				{
+			const {
 					canDrag,
 					isDragging,
 					clientOffset,
@@ -747,8 +761,7 @@ function GridComponent(props) {
 				cachedDragElements.current = buildCachedDragElements(dragState);
 			}
 
-			const
-				{
+			const {
 					canDrag,
 					isDragging,
 					clientOffset,

package/src/Components/Grid/GridHeaderRow.js

@@ -15,6 +15,7 @@ import {
 	HORIZONTAL,
 } from '../../Constants/Directions.js';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -280,7 +281,7 @@ export default function GridHeaderRow(props) {
 		}
 	}, [columnsConfig]);
 	
-	if (UiGlobals.mode !== UI_MODE_WEB) {
+	if (CURRENT_MODE !== UI_MODE_WEB) {
 		canColumnsReorder = false;
 		canColumnsResize = false;
 	}
@@ -407,7 +408,7 @@ export default function GridHeaderRow(props) {
 										'overflow-hidden',
 										'text-ellipsis',
 										'px-2',
-										py-3,
+										'py-3',
 										styles.GRID_HEADER_CLASSNAME,
 									)}
 								>{header}</TextNative>
@@ -425,7 +426,7 @@ export default function GridHeaderRow(props) {
 										)}
 									/>}
 								
-								{isOver && UiGlobals.mode === UI_MODE_WEB && // only works for web for now 
+								{isOver && CURRENT_MODE === UI_MODE_WEB && // only works for web for now 
 										<HeaderColumnSelectorHandle
 											key="HeaderColumnSelectorHandle"
 											showColumnsSelector={showColumnsSelector}

package/src/Components/Grid/GridRow.js

@@ -20,9 +20,8 @@ import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import testProps from '../../Functions/testProps.js';
 import Loading from '../Messages/Loading.js';
 import AngleRight from '../Icons/AngleRight.js';
-import RowDragHandle from './RowDragHandle.js';
-import RowSelectHandle from './RowSelectHandle.js';
-import useAsyncRenderers from '../../Hooks/useAsyncRenderers.js';
+import RowHandle from './RowHandle.js';
+import useAsyncRenderers from './useAsyncRenderers.js';
 import _ from 'lodash';
 
 // Conditional import for web only
@@ -45,7 +44,6 @@ function GridRow(props) {
 			rowProps,
 			hideNavColumn,
 			showSelectHandle,
-			isRowSelectable,
 			isRowHoverable,
 			isSelected,
 			isHovered,
@@ -102,7 +100,7 @@ function GridRow(props) {
 			actualCanDrop = validateDrop(draggedItem);
 		}
 
-		if (isRowSelectable && isSelected) {
+		if (isSelected) {
 			if (showHovers && isHovered) {
 				mixWith = styles.GRID_ROW_SELECTED_BG_HOVER;
 			} else {
@@ -198,13 +196,33 @@ function GridRow(props) {
 							};
 
 							let content = null;
+							let textClassName = clsx(
+								'GridRow-TextNative',
+								'self-center',
+								'overflow-hidden',
+								colClassName,
+								styles.GRID_CELL_CLASSNAME,
+								styles.GRID_ROW_MAX_HEIGHT_EXTRA,
+							);
+							if (config.className) {
+								textClassName += ' ' + config.className;
+							}
+							const rendererProps = {
+								...testProps('rendererCol-' + config.fieldName),
+								className: textClassName,
+								...propsToPass,
+								...extraProps,
+								style: colStyle,
+							};
 							if (config.isAsync) {
+								// TODO: Figure out how to pass the rendererProps to the async renderer function
+								throw Error('Not yet working correctly!');
 								// Async renderer
 								if (isLoading) {
 									content = <Loading />;
 								} else if (asyncResult) {
 									if (asyncResult.error) {
-										content = <Text>Render Error: {asyncResult.error.message || String(asyncResult.error)}</Text>;
+										content = <Text key={key}>Render Error: {asyncResult.error.message || String(asyncResult.error)}</Text>;
 									} else {
 										content = asyncResult.result;
 									}
@@ -212,24 +230,17 @@ function GridRow(props) {
 							} else {
 								// Synchronous renderer
 								try {
-									const result = config.renderer(item);
+									const result = config.renderer(item, config.fieldName, rendererProps, key);
 									if (result && typeof result.then === 'function') {
-										content = <Text>Error: Async renderer not properly configured</Text>;
+										content = <Text key={key}>Error: Async renderer not properly configured</Text>;
 									} else {
 										content = result;
 									}
 								} catch (error) {
-									content = <Text>Render Error: {error}</Text>;
+									content = <Text key={key}>Render Error: {error}</Text>;
 								}
 							}
-							return <HStackNative
-										key={key}
-										{...testProps('rendererCol-' + key)}
-										className={colClassName}
-										{...propsToPass}
-										{...extraProps}
-										style={colStyle}
-									>{content}</HStackNative>;
+							return content;
 						}
 						if (config.fieldName) {
 
@@ -342,8 +353,13 @@ function GridRow(props) {
 		};
 
 		let rowContents = <>
-							{(isDragSource || isDraggable) && <RowDragHandle />}
-							{showSelectHandle && <RowSelectHandle />}
+							{(isDragSource || isDraggable || showSelectHandle) &&
+								<RowHandle
+									ref={dragSourceRef}
+									isDragSource={isDragSource}
+									isDraggable={isDraggable}
+									showSelectHandle={showSelectHandle}
+								/>}
 							
 							{isPhantom && 
 								<Box
@@ -373,21 +389,6 @@ function GridRow(props) {
 									)}
 								/>}
 						</>;
-
-		if (dragSourceRef) {
-			rowContents = <HStack
-								ref={dragSourceRef}
-								className={clsx(
-									'GridRow-dragSourceRef',
-									'w-full',
-									'flex-1',
-									'grow-1',
-								)}
-								style={{
-									backgroundColor: bg,
-								}}
-							>{rowContents}</HStack>;
-		}
 		if (dropTargetRef) {
 			rowContents = <HStack
 								ref={dropTargetRef}

package/src/Components/Grid/RowDragHandle.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	Icon,
 	VStack,
@@ -6,15 +7,29 @@ import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function RowDragHandle(props) {	return <VStack
-			style={styles.ewResize}
-			className="RowDragHandle bg-grey-100 w-[7px] items-center justify-center select-none"
-		>
-				<Icon
-					as={GripVertical}
-					size="xs"
-					className="handle w-full h-full text-[#ccc]" />
-			</VStack>;
-}
+const RowDragHandle = forwardRef(function(props, ref) {
+	let className = clsx(
+		'RowDragHandle',
+		'bg-grey-100',
+		'w-[17px]',
+		'items-center',
+		'justify-center',
+		'select-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <VStack
+				{...props}
+				ref={ref}
+				style={styles.ewResize}
+				className={className}
+			>
+					<Icon
+						as={GripVertical}
+						size="xs"
+						className="handle w-full h-full text-[#ccc]" />
+				</VStack>;
+});
 
 export default RowDragHandle;

package/src/Components/Grid/RowHandle.js

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import {
+	Icon,
+	VStack,
+} from '@project-components/Gluestack';
+import withTooltip from '@onehat/ui/src/Components/Hoc/withTooltip';
+import clsx from 'clsx';
+import Arcs from '../Icons/Arcs.js';
+
+const RowHandle = forwardRef(function RowHandle(props, ref) {
+	const {
+			isDragSource,
+			isDraggable
+		} = props;
+	let className = clsx(
+		'RowHandle',
+		'h-full',
+		'w-[40px]',
+		'px-2',
+		'items-center',
+		'justify-center',
+		'select-none',
+		'cursor-pointer'
+	);
+	return <VStack
+				ref={isDragSource || isDraggable ? ref : undefined}
+				className={className}
+			>
+				<Icon as={Arcs} size="xs" className="w-full h-full text-[#ddd]" />
+			</VStack>;
+});
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		const {
+				showSelectHandle,
+				isDragSource,
+				isDraggable
+			} = props;
+		let tooltipParts = [];
+		if (showSelectHandle) {
+			tooltipParts.push('Select');
+		}
+		if (isDragSource || isDraggable) {
+			tooltipParts.push('Drag');
+		}
+		const tooltip = tooltipParts.length === 2 ? tooltipParts.join(' or ') : tooltipParts[0];
+		return <WrappedComponent
+					tooltip={tooltip}
+					{...props}
+				/>;
+	};
+}
+
+export default withAdditionalProps(withTooltip(RowHandle));

package/src/{Hooks → Components/Grid}/useAsyncRenderers.js

@@ -7,7 +7,7 @@ export default function useAsyncRenderers(columnsConfig, item) {
 
 	useEffect(() => {
 		const asyncConfigs = columnsConfig.filter(config => 
-			config.renderer && typeof config.renderer === 'function'
+			config.isAsync && config.renderer && typeof config.renderer === 'function'
 		);
 
 		if (asyncConfigs.length === 0) {

package/src/Components/Hoc/Secondary/withSecondaryData.js

@@ -8,7 +8,7 @@ import _ from 'lodash';
 export default function withSecondaryData(WrappedComponent) {
 	return (props) => {
 
-		if (props.secondaryDisableWithData) {
+		if (props.secondaryDisableWithData || props.secondaryAlreadyHasWithData) {
 			return <WrappedComponent {...props} />;
 		}
 		
@@ -104,6 +104,7 @@ export default function withSecondaryData(WrappedComponent) {
 		return <WrappedComponent
 					{...propsToPass}
 					secondaryDisableWithData={false}
+					secondaryAlreadyHasWithData={true}
 					SecondaryRepository={LocalSecondaryRepository}
 					secondaryModel={secondaryModel}
 					secondaryData={secondaryData}

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -24,7 +24,7 @@ import _ from 'lodash';
 export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.secondaryDisableWithEditor) {
+		if (props.secondaryDisableWithEditor || props.secondaryAlreadyHasWithEditor) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
@@ -643,8 +643,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					secondaryDisableWithEditor={false}
+					secondaryAlreadyHasWithEditor={true}
+					ref={ref}
 					secondaryCurrentRecord={secondaryCurrentRecord}
 					secondarySetCurrentRecord={secondarySetCurrentRecord}
 					secondaryIsEditorShown={secondaryIsEditorShown}