onekijs-ui 0.19.22 → 0.19.23

package/dist/components/properties/typings.d.ts

@@ -16,6 +16,7 @@ export type PropertiesProps = {
 export type PropertyProps = {
     value: ReactNode;
     name: string;
+    help?: ReactNode;
     ErrorBoundaryComponent?: ComponentType<PropsWithChildren<PropertyProps>>;
 };
 export type PropertiesContext = {
@@ -25,4 +26,4 @@ export type PropertiesContext = {
     lg?: GridSize;
     xl?: GridSize;
 };
-export type PropertiesList = AnonymousObject<ReactNode>;
+export type PropertiesList = AnonymousObject<ReactNode | Partial<PropertyProps>>;

package/dist/index.js

@@ -1838,7 +1838,7 @@ const AlertComponent = ({ kind = 'info', icon = true, IconComponent, className,
     if (IconComponent === undefined) {
         IconComponent = getDefautltIconComponent(kind);
     }
-    return (React.createElement("div", { className: addClassname(`g-alert g-alert-${kind}`, className) },
+    return (React.createElement("div", { className: addClassname(`o-alert o-alert-${kind}`, className) },
         icon && React.createElement(IconComponent, { width: getIconSize(size), height: getIconSize(size), marginRight: '20px', marginLeft: '20px' }),
         React.createElement("div", null, children)));
 };
@@ -6203,13 +6203,24 @@ const Property = React.memo((props) => {
             nameSize === undefined ? undefined : (nameSize === 12 ? 12 : 12 - nameSize);
     });
     return (React.createElement(Row, { className: "o-property", gapX: "10px", gapY: "0px" },
-        React.createElement(Col, { size: nameSize, sm: context.sm, md: context.md, lg: context.lg, xl: context.xl, className: "o-property-name" }, name),
+        React.createElement(Col, { size: nameSize, sm: context.sm, md: context.md, lg: context.lg, xl: context.xl, className: "o-property-key" },
+            React.createElement("span", { className: "o-property-name" }, name),
+            props.help && (React.createElement(Tooltip, { content: props.help, placement: "top" },
+                React.createElement(HelpIcon, null)))),
         React.createElement(Col, { size: valueSize, sm: variantValueSize.sm, md: variantValueSize.md, lg: variantValueSize.lg, xl: variantValueSize.xl, className: "o-property-value" },
             ErrorBoundaryComponent && React.createElement(ErrorBoundaryComponent, { ...props }, value),
             !ErrorBoundaryComponent && React.createElement(React.Fragment, null, value))));
 });
 Property.displayName = 'Property';
 
+const isReactNode = (value) => {
+    if (value === null || value === undefined)
+        return true;
+    if (Object.keys(value).includes('value')) {
+        return false;
+    }
+    return true;
+};
 const PropertiesComponent = ({ className, properties, PropertyComponent = Property, ErrorBoundaryComponent, order = false, size, sm, md, lg, xl, }) => {
     const classNames = addClassname('o-properties', className);
     const keys = Object.keys(properties);
@@ -6226,7 +6237,13 @@ const PropertiesComponent = ({ className, properties, PropertyComponent = Proper
         };
     }, [size, sm, md, lg, xl]);
     return (React.createElement(DefaultPropertiesContext.Provider, { value: context },
-        React.createElement("div", { className: classNames }, keys.map((key) => (React.createElement(PropertyComponent, { key: key, name: key, value: properties[key], ErrorBoundaryComponent: ErrorBoundaryComponent }))))));
+        React.createElement("div", { className: classNames }, keys.map((key) => {
+            const property = properties[key];
+            const value = isReactNode(property) ? property : property.value;
+            const help = isReactNode(property) ? undefined : property.help;
+            const name = isReactNode(property) ? key : property.name ?? key;
+            return React.createElement(PropertyComponent, { key: key, name: name, value: value, help: help, ErrorBoundaryComponent: ErrorBoundaryComponent });
+        }))));
 };
 
 const propertiesStyle = ({ theme }) => {
@@ -6239,6 +6256,24 @@ const propertiesStyle = ({ theme }) => {
     .o-property-name {
       ${fontWeight(t.fontWeight)}
     }
+    .o-property-help {
+      ${textDecoration('underline')}
+      ${textDecorationStyle('dashed')}
+      ${textUnderlineOffset('0.25rem')}
+      ${cursor('help')}
+    }
+    .o-property-key {
+      ${display('flex')}
+      ${alignItems('center')}
+    }
+
+    .o-tooltip {
+      ${cursor('pointer')}
+      ${width(5)}
+      ${marginBottom('2px')}
+      ${color('pink')}
+      ${marginLeft('xs')}
+    }
   `;
 };
 
@@ -9867,7 +9902,12 @@ const tableStyle = ({ theme, fit = true }) => {
       .o-table-header-title-container {
         ${borderBottomWidth(0)}
         ${paddingBottom(0)}
+        .o-helper-icon {
+          ${marginLeft('xs')}
+          ${marginTop('-2px')}
+        }
       }
+
     }
 
     .o-table-header-row-title, .o-table-header-row-filter {