@trackunit/react-form-components 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js
CHANGED
|
@@ -1102,7 +1102,7 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
|
|
|
1102
1102
|
*/
|
|
1103
1103
|
const OptionCard = React.forwardRef(({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ...rest }, ref) => {
|
|
1104
1104
|
const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + sharedUtils.uuidv4();
|
|
1105
|
-
return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
|
|
1105
|
+
return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
|
|
1106
1106
|
? React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
|
|
1107
1107
|
: null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
|
|
1108
1108
|
});
|
|
@@ -2006,7 +2006,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
|
|
|
2006
2006
|
}) }));
|
|
2007
2007
|
},
|
|
2008
2008
|
SingleValue: props => {
|
|
2009
|
-
return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
|
|
2009
|
+
return (jsxRuntime.jsx(ReactSelect.components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxRuntime.jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
|
|
2010
2010
|
},
|
|
2011
2011
|
Menu: props => {
|
|
2012
2012
|
return (jsxRuntime.jsx(ReactSelect.components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
|
package/index.esm.js
CHANGED
|
@@ -1083,7 +1083,7 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
|
|
|
1083
1083
|
*/
|
|
1084
1084
|
const OptionCard = forwardRef(({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ...rest }, ref) => {
|
|
1085
1085
|
const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + uuidv4();
|
|
1086
|
-
return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
|
|
1086
|
+
return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
|
|
1087
1087
|
? cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
|
|
1088
1088
|
: null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
|
|
1089
1089
|
});
|
|
@@ -1987,7 +1987,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
|
|
|
1987
1987
|
}) }));
|
|
1988
1988
|
},
|
|
1989
1989
|
SingleValue: props => {
|
|
1990
|
-
return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
|
|
1990
|
+
return (jsx(components.SingleValue, { ...props, className: props.isDisabled ? "text-slate-700" : "", children: jsxs("div", { "data-testid": dataTestId + "-singleValue", children: [props.children, getOptionLabelDescription && getOptionLabelDescription(props.data) ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", getOptionLabelDescription(props.data), ")"] })) : null] }) }));
|
|
1991
1991
|
},
|
|
1992
1992
|
Menu: props => {
|
|
1993
1993
|
return (jsx(components.Menu, { ...props, className: cvaSelectMenuList({ menuIsOpen: props.selectProps.menuIsOpen }) }));
|
package/package.json
CHANGED
|
@@ -28,5 +28,5 @@ export declare const useCustomComponents: <Option, IsMulti extends boolean = fal
|
|
|
28
28
|
dropdownIcon?: JSX.Element;
|
|
29
29
|
prefix?: JSX.Element;
|
|
30
30
|
hasError?: boolean;
|
|
31
|
-
getOptionLabelDescription?: (option: Option) => string;
|
|
31
|
+
getOptionLabelDescription?: (option: Option) => string | undefined;
|
|
32
32
|
}) => Partial<SelectComponents<Option, IsMulti, Group>>;
|
|
@@ -127,7 +127,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
|
|
|
127
127
|
*
|
|
128
128
|
* @memberof SelectProps
|
|
129
129
|
*/
|
|
130
|
-
getOptionLabelDescription?: (option: Option) => string;
|
|
130
|
+
getOptionLabelDescription?: (option: Option) => string | undefined;
|
|
131
131
|
};
|
|
132
132
|
interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
|
|
133
133
|
customStyles: StylesConfig<Option, IsMulti, Group>;
|