@luscii-healthtech/web-ui 60.0.0 → 60.2.0

package/dist/index.development.js

@@ -2030,7 +2030,7 @@ const HelperAndErrorText = (props) => {
   if (showHelperText) {
     return jsxRuntime.jsx(Box, { id: props.describingId, children: jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", containsDangerousHtml: typeof props.helperText === "string", className: linkClasses, children: props.helperText }) });
   }
-  return jsxRuntime.jsx(Box, { id: props.describingId, children: props.errorText && jsxRuntime.jsx(Text, { variant: "sm", color: "red", children: props.errorText }) });
+  return jsxRuntime.jsx(Box, { id: props.describingId, className: "ui:empty:hidden", children: props.errorText && jsxRuntime.jsx(Text, { variant: "sm", color: "red", children: props.errorText }) });
 };
 
 const LabelText = (props) => {
@@ -2131,16 +2131,27 @@ const LabeledCheckboxCard = React__namespace.default.forwardRef((props, ref) =>
   return jsxRuntime.jsx(LabeledCheckboxBase, Object.assign({}, props, { ref, variant: "card" }));
 });
 
+const FieldsetLegend = ({ children }) => jsxRuntime.jsx("legend", { className: "ui:contents", children: renderLegendContent(children) });
+const renderLegendContent = (children) => {
+  if (typeof children === "string") {
+    return jsxRuntime.jsx(Text, { as: "span", className: "ui:block", children });
+  }
+  if (React__namespace.default.isValidElement(children) && children.type !== React__namespace.default.Fragment) {
+    return children;
+  }
+  return jsxRuntime.jsx("span", { className: "ui:block", children });
+};
+
 const LabeledCheckboxGroup = (props) => {
   const { children, title, className } = props;
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "base", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, { _gap: "l", children }), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
+  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "base", children: [title && jsxRuntime.jsx(FieldsetLegend, { children: title }), jsxRuntime.jsx(Stack, { _gap: "l", children }), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
 };
 
 const LabeledCheckboxCardGroup = (props) => {
   const { children, title, className, columns = 2, stretch = false, helperText, errorText } = props, attributes = __rest(props, ["children", "title", "className", "columns", "stretch", "helperText", "errorText"]);
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default({ "ui:w-full": stretch }, className), _gap: "base", align: stretch ? "stretch" : "start" }, attributes, { children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx("div", { className: classNames__default.default("ui:grid ui:gap-x-m ui:gap-y-xs ui:items-start", {
+  return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default({ "ui:w-full": stretch }, className), _gap: "base", align: stretch ? "stretch" : "start" }, attributes, { children: [title && jsxRuntime.jsx(FieldsetLegend, { children: title }), jsxRuntime.jsx("div", { className: classNames__default.default("ui:grid ui:gap-x-m ui:gap-y-xs ui:items-start", {
     "ui:grid-cols-1": columns === 1,
     "ui:grid-cols-2": columns === 2,
     "ui:grid-cols-3": columns === 3,
@@ -2206,7 +2217,7 @@ LabeledRadioCard.displayName = "LabeledRadioCard";
 const LabeledRadioCardGroup = (props) => {
   const { children, title, className, columns = 2, helperText, errorText } = props, attributes = __rest(props, ["children", "title", "className", "columns", "helperText", "errorText"]);
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className, _gap: "xs", width: "full" }, attributes, { children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx("div", { className: classNames__default.default("ui:grid ui:gap-x-m ui:gap-y-xs ui:items-start ui:w-full", {
+  return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className, _gap: "base", width: "full" }, attributes, { children: [title && jsxRuntime.jsx(FieldsetLegend, { children: title }), jsxRuntime.jsx("div", { className: classNames__default.default("ui:grid ui:gap-x-m ui:gap-y-xs ui:items-start ui:w-full", {
     "ui:grid-cols-1": columns === 1,
     "ui:grid-cols-2": columns === 2,
     "ui:grid-cols-3": columns === 3,
@@ -2319,7 +2330,7 @@ const LabeledRadioGroup = (props) => {
     axis: "y",
     _gap: "base"
   };
-  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "s", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, Object.assign({}, orientationProps, { children })), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
+  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "base", children: [title && jsxRuntime.jsx(FieldsetLegend, { children: title }), jsxRuntime.jsx(Stack, Object.assign({}, orientationProps, { children })), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
 };
 
 const ConfirmationDialogChoices = (props) => {
@@ -2501,9 +2512,19 @@ const calculateResponsiveGrowClasses = (size) => {
 
 const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
   var { suffix, prefix, className, width = "full", height = "lg", icon, isError, isClearIconVisible, onClickClearField } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "height", "icon", "isError", "isClearIconVisible", "onClickClearField"]);
+  const inputRef = React__namespace.default.useRef(null);
+  React__namespace.default.useImperativeHandle(ref, () => inputRef.current);
   const hasPrefix = !!prefix;
   const hasSuffix = !!suffix;
   const hasNoExtraContent = !hasPrefix && !hasSuffix;
+  const focusInput = (event) => {
+    var _a2;
+    if (attributes.disabled) {
+      return;
+    }
+    event.preventDefault();
+    (_a2 = inputRef.current) === null || _a2 === void 0 ? void 0 : _a2.focus();
+  };
   const heightClasses = {
     md: "ui:h-form-md",
     lg: "ui:h-form-lg"
@@ -2517,12 +2538,16 @@ const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
     "ui:order-1": hasSuffix,
     "ui:rounded-l ui:border-l": hasPrefix,
     "ui:rounded-r ui:border-r": hasSuffix
-  }, "ui:flex ui:flex-col ui:items-center", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", calculateResponsiveGrowClasses(width)), children: [icon && jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-4 ui:top-1/2", {
-    "ui:grow": width === "full"
-  }), style: {
+  }, "ui:flex ui:flex-col ui:items-center", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), onMouseDown: focusInput, children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", calculateResponsiveGrowClasses(width)), children: [icon && jsxRuntime.jsx("div", { className: classNames__default.default(
+    // Let clicks on the icon fall through to the input underneath
+    "ui:pointer-events-none ui:absolute ui:left-4 ui:top-1/2",
+    {
+      "ui:grow": width === "full"
+    }
+  ), style: {
     transform: "translateY(-50%)",
     zIndex: 20
-  }, children: jsxRuntime.jsx(IconComponentOrKey, { name: icon, className: "ui:h-6 ui:w-6 ui:text-slate-300" }) }), jsxRuntime.jsx("input", Object.assign({ ref, className: classNames__default.default("ui:block", calculateResponsiveWidthClasses(width), { "ui:pl-12": icon }, {
+  }, children: jsxRuntime.jsx(IconComponentOrKey, { name: icon, className: "ui:h-6 ui:w-6 ui:text-slate-300" }) }), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, className: classNames__default.default("ui:block", calculateResponsiveWidthClasses(width), { "ui:pl-12": icon }, {
     "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
     "ui:text-slate-800": !attributes.disabled,
     "ui:border-input-border": !attributes.disabled && !isError,
@@ -2669,14 +2694,16 @@ const LabeledDatePicker = (_a) => {
     "ui:!border-negative-border": isError,
     "ui:!focus:outline-negative": isError
   }, classNameFromProps);
-  return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fullWidth ? "stretch" : void 0, children: [label && jsxRuntime.jsx(LabelText, { children: label }), jsxRuntime.jsx(DatePicker, Object.assign({}, props, { className: datePickerClassNames, "aria-describedby": helperErrorTextId })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
+  return jsxRuntime.jsxs(Stack, { as: "label", _gap: "base", align: fullWidth ? "stretch" : void 0, children: [label && jsxRuntime.jsx(LabelText, { as: "span", className: "ui:block", children: label }), jsxRuntime.jsx(DatePicker, Object.assign({}, props, { className: datePickerClassNames, "aria-describedby": helperErrorTextId })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
 };
 
 const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
-  const { className, helperText, errorText, label, width, fullWidth, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "width", "fullWidth", "aria-describedby"]);
+  const { className, helperText, errorText, label, width, fullWidth, id, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "width", "fullWidth", "id", "aria-describedby"]);
+  const generatedInputId = React__namespace.default.useId();
+  const inputId = id || generatedInputId;
   const helperErrorTextId = React__namespace.default.useId();
   const fieldWidth = width !== null && width !== void 0 ? width : fullWidth ? "full" : void 0;
-  return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { children: props.label }), jsxRuntime.jsx(StyledInput, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
+  return jsxRuntime.jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { as: "label", htmlFor: inputId, children: label }), jsxRuntime.jsx(StyledInput, Object.assign({}, rest, { id: inputId, ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
 });
 
 const Actions$1 = (props) => {
@@ -3515,7 +3542,7 @@ const TableFooter = (props) => {
   return jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "ui:rounded-b-2xl ui:border-x ui:border-b ui:border-neutral-border-high-contrast", colSpan: props.colSpan, children: jsxRuntime.jsx(PaginationMenu, Object.assign({ className: "ui:p-6" }, props.paginationMenuProps)) }) }) });
 };
 
-function Table(_a) {
+function DataGrid(_a) {
   var { items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading = false, showHeader = true, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories } = _a, otherAttributes = __rest(_a, ["items", "fieldConfigurations", "emptyRowsText", "emptyFieldContentText", "isLoading", "showHeader", "paginationMenuProps", "onRowClick", "className", "dataTestId", "isSelectable", "selectedItems", "onSelectedRowsChange", "rowSelectionHeaderAccessories"]);
   const [isPristine, setIsPristine] = React.useState(true);
   const selectAllCheckboxId = React.useId();
@@ -3586,6 +3613,7 @@ function Table(_a) {
     }
   ), showFooter ? jsxRuntime.jsx(TableFooter, { colSpan, paginationMenuProps }) : null] }));
 }
+const Table = DataGrid;
 
 const isPlainText = (node) => {
   return typeof node === "string" || typeof node === "number";
@@ -4517,7 +4545,7 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
 const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {
   const { className, helperText, errorText, label, fullWidth, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "fullWidth", "aria-describedby"]);
   const helperErrorTextId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(LabelText, { children: props.label }), jsxRuntime.jsx(StyledSelect, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
+  return jsxRuntime.jsxs(Stack, { as: "label", _gap: "base", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(LabelText, { as: "span", className: "ui:block", children: props.label }), jsxRuntime.jsx(StyledSelect, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
 });
 
 const LabeledSelectSearchable = React__namespace.default.forwardRef((props, ref) => {
@@ -4527,7 +4555,7 @@ const LabeledSelectSearchable = React__namespace.default.forwardRef((props, ref)
   const errorMessageId = React__namespace.default.useId();
   const hasError = Boolean(errorText);
   const labelledBy = [ariaLabelledBy, label ? labelId : void 0].filter(Boolean).join(" ") || void 0;
-  return jsxRuntime.jsxs(Stack, { _gap: "s", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(Box, { id: labelId, children: jsxRuntime.jsx(LabelText, { children: label }) }), jsxRuntime.jsx(Select, Object.assign({}, rest, { ref, isError: hasError, "aria-labelledby": labelledBy, "aria-invalid": hasError || void 0, "aria-errormessage": hasError ? errorMessageId : void 0 })), jsxRuntime.jsx("div", { id: errorMessageId, "aria-live": "polite", children: jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId }) })] });
+  return jsxRuntime.jsxs(Stack, { _gap: "base", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(Box, { id: labelId, children: jsxRuntime.jsx(LabelText, { as: "span", className: "ui:block", children: label }) }), jsxRuntime.jsx(Select, Object.assign({}, rest, { ref, isError: hasError, "aria-labelledby": labelledBy, "aria-invalid": hasError || void 0, "aria-errormessage": hasError ? errorMessageId : void 0 })), jsxRuntime.jsx("div", { id: errorMessageId, "aria-live": "polite", className: classNames__default.default({ "ui:sr-only": !helperText && !errorText }), children: jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId }) })] });
 });
 
 const useOutsideClick = (ref, callback) => {
@@ -7389,6 +7417,7 @@ exports.CrossIcon = CrossIcon;
 exports.CrossInCircleIcon = CrossInCircleIcon;
 exports.CrossInFilledCircleIcon = CrossInFilledCircleIcon;
 exports.DashboardIcon = DashboardIcon;
+exports.DataGrid = DataGrid;
 exports.DatabaseIcon = DatabaseIcon;
 exports.DatePicker = DatePicker;
 exports.DatePickerV2 = DatePicker;