@agilant/toga-blox 1.0.318-beta.13 → 1.0.318-beta.15

package/dist/components/AdvancedSelect/AdvancedSelect.js

@@ -239,7 +239,7 @@ function AdvancedSelect(props) {
                                 }, onFocus: openMenu, onKeyDown: onKeyDown })] }), _jsxs("div", { className: classes.indicators, children: [hasAnyValue && (_jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
                                     e.stopPropagation();
                                     clearAll();
-                                }, "aria-label": "Clear", children: getFontAwesomeIcon("xmark", "regular") })), _jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
+                                }, "aria-label": "Clear", children: _jsx("span", { className: classes.clearSingleInput, children: getFontAwesomeIcon("xmark", "regular") }) })), _jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
                                     e.stopPropagation();
                                     if (open)
                                         closeMenu();

package/dist/components/AdvancedSelect/AdvancedSelect.module.css

@@ -27,6 +27,7 @@
 
 	&.multi {
 		min-height: var(--advancedSelect-row-min-height);
+		padding: var(--advancedSelect-row-padding);
 	}
 
 	&:hover {
@@ -161,7 +162,7 @@
 
 .input::placeholder {
 	color: var(--baseInput-placeholder-text-default);
-	font-size: var(--baseInput-font-size-small, 0.875rem);
+	font-size: var(--baseInput-font-size-default, 0.875rem);
 }
 
 .chip {
@@ -172,8 +173,12 @@
 	border-radius: var(--baseInputMultiSelect-border-radius, 0.25rem);
 	background: var(--baseInputMultiSelect-bg-default);
 	color: var(--baseInputMultiSelect-text-default);
-	font-size: var(--baseInput-font-size-small, 0.875rem);
+	font-size: var(--baseInput-font-size-default, 0.875rem);
 	line-height: 1.2;
+
+	&:hover {
+		background: var(--baseInputMultiSelect-bg-hover);
+	}
 }
 
 .chipRemove {
@@ -182,18 +187,9 @@
 	justify-content: center;
 	background: transparent;
 	border: none;
-	padding: 0;
+	padding: 1px;
 	cursor: pointer;
 	color: inherit;
-	opacity: 0.7;
-
-	svg {
-		color: #FFF;
-	}
-}
-
-.chipRemove:hover {
-	opacity: 1;
 }
 
 .indicators {
@@ -210,16 +206,20 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	color: var(--baseInput-dropdownIndicator-default);
+	color: var(--baseInput-dropdownIndicator-text-default);
 	line-height: 1;
-
-	svg {
-		color: #677FD5;
+	
+	&:hover {
+		color: var(--baseInput-dropdownIndicator-text-focusAndHover);
 	}
 }
 
-.indicatorBtn:hover {
-	color: var(--baseInput-dropdownIndicator-text-focusAndHover);
+.clearSingleInput {
+	color: var(--baseInput-clearIndicator-text-default);
+
+	&:hover {
+		color: var(--baseInput-clearIndicator-text-hover);
+	}
 }
 
 .indicatorBtn:disabled {
@@ -298,6 +298,7 @@
 		border-radius: var(--baseInputOptionCheckbox-border-radius);
 		border: var(--baseInputOptionCheckbox-border);
 		padding: var(--baseInputOptionCheckbox-padding);
+		flex-shrink: 0;
 		cursor: pointer;
 	}
 

package/dist/components/BaseAddress/BaseAddress.module.css

@@ -2,8 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--address-line-gap, 0.125rem);
-}
+ }
 
 .addressee {
 	font-size: var(--address-line-font-size, 0.875rem);

package/dist/components/BaseDetailField/BaseDetailField.js

@@ -5,10 +5,10 @@ import renderBaseDetailFieldLabel from "./renderBaseDetailFieldLabel.js";
 import styles from "./BaseDetailField.module.css";
 const IconWrapper = ({ icon, weight, }) => (_jsx("div", { className: styles.icon, children: getFontAwesomeIcon(icon, weight ?? "regular") }));
 const ValueImage = ({ src, alt }) => (_jsx("div", { className: styles.valueImage, children: _jsx("img", { src: src, alt: alt || "" }) }));
-const BaseDetailField = ({ dataItem, field, allFields, allData, iconStyle = "solid", isDisabled, dataTestId, currencyCharacter, labelSuffixValue, showSecondValue, }) => {
+const BaseDetailField = ({ dataItem, field, allFields, allData, iconStyle = "solid", isDisabled, dataTestId, currencyCharacter, labelSuffixValue, showSecondValue, dtLabelClassName }) => {
     if (!field)
         return null;
     const { uuid, hasBottomBorder, hasTopBorder, hideLabel, hasValueLeftIconOne, valueIconOneWeight, hasValueLeftIconTwo, valueIconTwoWeight, hasValueImage, valueImageAlt, hasValueRightIcon, valueType, colSpan, } = field;
-    return (_jsx("div", { className: styles.container, style: { "--field-col-span": colSpan ?? 1 }, "data-testid": dataTestId ?? "base-detail-field", "data-disabled": isDisabled || undefined, "data-has-bottom-border": hasBottomBorder || undefined, "data-has-top-border": hasTopBorder || undefined, children: _jsxs("dl", { className: styles.inner, children: [_jsx("dt", { className: hideLabel ? styles.labelHidden : styles.label, children: renderBaseDetailFieldLabel(field, labelSuffixValue) }), _jsxs("dd", { className: styles.value, children: [hasValueLeftIconOne && (_jsx(IconWrapper, { icon: hasValueLeftIconOne, weight: valueIconOneWeight })), hasValueLeftIconTwo && (_jsx(IconWrapper, { icon: hasValueLeftIconTwo, weight: valueIconTwoWeight })), hasValueImage && dataItem !== "—" && (_jsx(ValueImage, { src: hasValueImage, alt: valueImageAlt })), renderBaseDetailFieldValue(field, dataItem, isDisabled, allFields, allData, currencyCharacter, showSecondValue), hasValueRightIcon && (_jsx(IconWrapper, { icon: hasValueRightIcon, weight: iconStyle }))] })] }) }, uuid));
+    return (_jsx("div", { className: styles.container, style: { "--field-col-span": colSpan ?? 1 }, "data-testid": dataTestId ?? "base-detail-field", "data-disabled": isDisabled || undefined, "data-has-bottom-border": hasBottomBorder || undefined, "data-has-top-border": hasTopBorder || undefined, children: _jsxs("dl", { className: styles.inner, children: [_jsx("dt", { className: hideLabel ? styles.labelHidden : styles.label, children: renderBaseDetailFieldLabel(field, labelSuffixValue, dtLabelClassName) }), _jsxs("dd", { className: styles.value, children: [hasValueLeftIconOne && (_jsx(IconWrapper, { icon: hasValueLeftIconOne, weight: valueIconOneWeight })), hasValueLeftIconTwo && (_jsx(IconWrapper, { icon: hasValueLeftIconTwo, weight: valueIconTwoWeight })), hasValueImage && dataItem !== "—" && (_jsx(ValueImage, { src: hasValueImage, alt: valueImageAlt })), renderBaseDetailFieldValue(field, dataItem, isDisabled, allFields, allData, currencyCharacter, showSecondValue), hasValueRightIcon && (_jsx(IconWrapper, { icon: hasValueRightIcon, weight: iconStyle }))] })] }) }, uuid));
 };
 export default BaseDetailField;

package/dist/components/BaseDetailField/BaseDetailField.module.css

@@ -7,7 +7,7 @@
 
 .inner {
 	display: flex;
-	gap: 0.5rem;
+	gap: var(--field-label-gap, 2px);
 	width: 100%;
 	flex-wrap: wrap;
 	flex-direction: var(--field-flex-direction, row);
@@ -29,7 +29,7 @@
 	white-space: var(--field-label-white-space, nowrap);
 	color: var(--field-label-color, inherit);
 	font-size: var(--field-label-font-size, 0.875rem);
-	font-family: var(--field-label-fontFamily-default, inherit)
+	font-family: var(--field-label-fontFamily-default, inherit);
 }
 
 .labelHidden {
@@ -126,7 +126,6 @@
 	pointer-events: none;
 }
 
-
 .labelWithBadge {
 	display: flex;
 	align-items: center;

package/dist/components/BaseDetailField/renderBaseDetailFieldLabel.d.ts

@@ -1,3 +1,3 @@
 import { FieldConfig } from "../DetailSection/types.js";
-declare const renderBaseDetailFieldLabel: (field: FieldConfig, labelSuffixValue?: string) => import("react/jsx-runtime").JSX.Element;
+declare const renderBaseDetailFieldLabel: (field: FieldConfig, labelSuffixValue?: string, dtLabelClassName?: string) => import("react/jsx-runtime").JSX.Element;
 export default renderBaseDetailFieldLabel;

package/dist/components/BaseDetailField/renderBaseDetailFieldLabel.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// renderBaseDetailFieldLabel.tsx
+import clsx from "clsx";
 import { BaseToolTip } from "../index.js";
 // import { renderBadge } from "../../utils/index.js";
 import styles from "./BaseDetailField.module.css";
-const renderBaseDetailFieldLabel = (field, labelSuffixValue) => {
+const renderBaseDetailFieldLabel = (field, labelSuffixValue, dtLabelClassName) => {
     const { label, labelSuffix, labelTooltip } = field || {};
     const labelHasBadge = labelSuffix?.type === "badge" && labelSuffixValue;
     if (!label)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: labelHasBadge ? styles.labelWithBadge : styles.label, children: label }), labelTooltip && (_jsx(BaseToolTip, { message: labelTooltip, icon: "circleInfo", toolTipPlacement: "right" }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(labelHasBadge ? styles.labelWithBadge : styles.label, dtLabelClassName), children: label }), labelTooltip && (_jsx(BaseToolTip, { message: labelTooltip, icon: "circleInfo", toolTipPlacement: "right" }))] }));
 };
 export default renderBaseDetailFieldLabel;

package/dist/components/BaseDetailField/types.d.ts

@@ -10,4 +10,5 @@ export type BaseDetailFieldProps<TData = any> = {
     labelSuffixValue?: string;
     dataTestId?: string;
     showSecondValue?: boolean;
+    dtLabelClassName?: string;
 };

package/dist/components/BaseInput/BaseCheckbox.d.ts

@@ -2,6 +2,7 @@ interface BaseCheckboxProps {
     control: any;
     valueKey: string;
     defaultValue: boolean;
+    isDisabled?: boolean;
 }
 declare const BaseCheckbox: React.FC<BaseCheckboxProps>;
 export default BaseCheckbox;

package/dist/components/BaseInput/BaseCheckbox.js

@@ -1,46 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import React from "react";
 import { Controller } from "react-hook-form";
 import styles from "./BaseInput.module.css";
 import clsx from "clsx";
 const BaseCheckbox = (props) => {
-    const { control, valueKey, defaultValue, } = props;
-    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsxs("div", { className: styles.checkboxWrapper, children: [_jsx("input", { type: "checkbox", className: clsx(styles.checkbox), id: valueKey, checked: field.value, onChange: (e) => {
+    const { control, valueKey, defaultValue, isDisabled, } = props;
+    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsxs("div", { className: styles.checkboxWrapper, children: [_jsx("input", { type: "checkbox", className: clsx(styles.checkbox), disabled: isDisabled, id: valueKey, checked: field.value, onChange: (e) => {
                         field.onChange(e.target.checked);
                     } }), _jsx("span", { className: styles.checkboxIconWrapper, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.5 w-3.5", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] })) }));
 };
-// v2
-// interface CheckboxProps {
-// 	control: any;
-// 	defaultValue: boolean;
-// 	valueKey: string;
-// 	className?: string;
-// }
-// const BaseCheckbox = ({
-// 	control,
-// 	defaultValue,
-// 	valueKey,
-// 	className,
-// 	...props
-// }: CheckboxProps) => {
-// 	return (
-// 		<Controller
-// 			name={valueKey}
-// 			control={control}
-// 			defaultValue={defaultValue}
-// 			render={({ field }) => (
-// 				<div className={clsx(styles.checkbox, className)}>
-// 					<input
-// 						id={valueKey}
-// 						name={valueKey}
-// 						checked={field.value ?? false}
-// 						type="checkbox"
-// 						className={clsx(styles.box, className)}
-// 						onChange={(e) => field.onChange(e.target.checked)}
-// 						{...props}
-// 					/>
-// 				</div>
-// 			)} />
-// 	);
-// };
 export default BaseCheckbox;

package/dist/components/BaseInput/BaseInput.js

@@ -10,14 +10,9 @@ import BaseRadioInput from "./BaseRadio.js";
 import clsx from "clsx";
 import styles from "./BaseInput.module.css";
 import BaseTextInput from "./BaseTextInput.js";
-const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, onBlur, menuPlacement, valueKey, requireUuidField, afterInputTextClasses, afterInputText, disabledSelectText = "Not Editable", colSpan, onSearchChange, toggleTextPosition = "right", toggleAdditionalClasses, toggleHasDivider = false, toggleActiveLabel = "Yes", toggleInactiveLabel = "No", }) => {
+const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, onBlur, valueKey, requireUuidField, afterInputTextClasses, afterInputText, disabledSelectText = "Not Editable", colSpan, toggleTextPosition = "right", toggleAdditionalClasses, toggleHasDivider = false, toggleActiveLabel = "Yes", toggleInactiveLabel = "No", disabled }) => {
     const input = field;
-    const { register, control, watch, getValues, formState: { errors, dirtyFields }, setValue, } = useFormContext();
-    const handleInputChange = (inputValue) => {
-        if (onSearchChange) {
-            onSearchChange(inputValue);
-        }
-    };
+    const { control, watch, getValues, formState: { errors, dirtyFields }, } = useFormContext();
     const getDefaultValue = (dynamicDefaultValue, valueKey) => {
         const value = dynamicDefaultValue ?? getValues(valueKey);
         if (value === undefined || value === null) {
@@ -61,20 +56,20 @@ const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, o
         return (_jsxs("div", { className: clsx(styles.inputAndLabelWrapper, colSpan && getColSpanClass(colSpan)), children: [_jsxs("label", { htmlFor: input.valueKey, className: clsx(styles.label), children: [input.inputLabel, input.isRequired && input.showRequiredIndicator && (_jsx("span", { className: styles.requiredAsterisk, children: "*" }))] }), (() => {
                     switch (input.inputType) {
                         case "text":
-                            return (_jsx(BaseTextInput, { uuid: input.uuid, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), control: control, onBlur: onBlur, inputHasLeftIcon: input.inputHasLeftIcon, isRequired: input.isRequired, showRequiredIndicator: input.showRequiredIndicator, valueType: input.valueType, valueKey: input.valueKey, requireUuidField: input.requireUuidField, hasTypeCheck: input.hasTypeCheck, placeholder: input.placeholder, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError }));
+                            return (_jsx(BaseTextInput, { uuid: input.uuid, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), control: control, onBlur: onBlur, inputHasLeftIcon: input.inputHasLeftIcon, isRequired: input.isRequired, showRequiredIndicator: input.showRequiredIndicator, valueType: input.valueType, valueKey: input.valueKey, requireUuidField: input.requireUuidField, hasTypeCheck: input.hasTypeCheck, placeholder: input.placeholder, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, isDisabled: disabled }));
                         case "toggle":
                             return (_jsx(BaseToggle, { control: control, valueKey: input.valueKey, defaultValue: dataItem
                                     ? dataItem[input.valueKey]
-                                    : "", toggleTextPosition: toggleTextPosition, toggleAdditionalClasses: toggleAdditionalClasses, toggleHasDivider: toggleHasDivider, toggleActiveLabel: toggleActiveLabel, toggleInactiveLabel: toggleInactiveLabel }));
+                                    : "", toggleTextPosition: toggleTextPosition, toggleAdditionalClasses: toggleAdditionalClasses, toggleHasDivider: toggleHasDivider, toggleActiveLabel: toggleActiveLabel, toggleInactiveLabel: toggleInactiveLabel, isDisabled: disabled }));
                         case "textArea":
-                            return (_jsx(BaseTextareaInput, { watch: watch, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), valueKey: input.valueKey, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, placeholder: input.placeholder, characterLimit: input.characterLimit }));
+                            return (_jsx(BaseTextareaInput, { watch: watch, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), valueKey: input.valueKey, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, placeholder: input.placeholder, characterLimit: input.characterLimit, isDisabled: disabled }));
                         case "disabledSelect":
                             return (_jsx(DisabledSelect, { disabledSelectText: disabledSelectText, labelTextClasses: styles.label }));
                         case "checkbox":
-                            return (_jsx(BaseCheckbox, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey) }));
+                            return (_jsx(BaseCheckbox, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), isDisabled: disabled }));
                         case "advancedSelect":
                         case "advancedMultiSelect":
-                            return (_jsx(Controller, { control: control, name: input.valueKey, render: ({ field: rhfField }) => (_jsx(AdvancedSelect, { isFieldDirty: isFieldDirty, isFieldError: isFieldError, mode: input.inputType ===
+                            return (_jsx(Controller, { control: control, name: input.valueKey, render: ({ field: rhfField }) => (_jsx(AdvancedSelect, { isFieldDirty: isFieldDirty, isFieldError: isFieldError, disabled: disabled, mode: input.inputType ===
                                         "advancedMultiSelect"
                                         ? "multi"
                                         : "single", data: input.data ??
@@ -87,11 +82,11 @@ const BaseInput = ({ dataItem, field, uuid, dynamicDefaultValue, isArrayValue, o
                                             i?.label ??
                                             String(i)), hasMorePages: input.hasMorePages, isFetchingMore: input.isFetchingMore, fetchMoreData: input.fetchMoreData, findSpecificValue: input.findSpecificValue, placeholder: input.placeholder, valueKey: input.valueKey })) }));
                         case "radio":
-                            return (_jsx(BaseRadioInput, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), options: input.options }));
+                            return (_jsx(BaseRadioInput, { control: control, valueKey: input.valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, input.valueKey), options: input.options, isDisabled: disabled }));
                         default:
                             return null;
                     }
-                })(), input.afterInputText && (_jsx("div", { className: "flex items-center ml-2 text-nowrap", children: _jsx("p", { className: `${afterInputTextClasses}`, children: afterInputText }) }))] }, input.uuid));
+                })(), input.afterInputText && (_jsx("div", { className: styles.afterInputText, children: _jsx("p", { className: `${afterInputTextClasses}`, children: afterInputText }) }))] }, input.uuid));
     };
     return input && _jsx(_Fragment, { children: getInput(input) });
 };