@luscii-healthtech/web-ui 60.1.0 → 60.2.1

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) => {
@@ -2500,10 +2511,25 @@ 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"]);
+  var { suffix, prefix, className, width = "full", height = "lg", icon, isError, isClearIconVisible, onClickClearField, clearButtonLabel = "Clear" } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "height", "icon", "isError", "isClearIconVisible", "onClickClearField", "clearButtonLabel"]);
+  const inputRef = React__namespace.default.useRef(null);
+  React__namespace.default.useImperativeHandle(ref, () => inputRef.current);
+  const handleClearClick = () => {
+    var _a2;
+    onClickClearField === null || onClickClearField === void 0 ? void 0 : onClickClearField();
+    (_a2 = inputRef.current) === null || _a2 === void 0 ? void 0 : _a2.focus();
+  };
   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,35 +2543,63 @@ 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 }, {
-    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
-    "ui:text-slate-800": !attributes.disabled,
-    "ui:border-input-border": !attributes.disabled && !isError,
-    "ui:hover:border-input-border-dark": !attributes.disabled,
-    "ui:border-red-700": isError,
-    "ui:focus:outline-negative": isError,
-    "ui:focus:border-primary": !isError,
-    "ui:focus:outline-primary": !isError,
-    "ui:bg-white": !attributes.disabled
-  }, heightClasses[height], "ui:p-2", "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
-    "ui:z-10": hasSuffix || hasPrefix,
-    // to make sure the ui:outline is displayed completely
-    "ui:rounded": hasNoExtraContent,
-    "ui:rounded-l": hasSuffix,
-    "ui:rounded-r": hasPrefix,
-    "ui:order-2": hasPrefix,
-    "ui:order-1": hasSuffix
-  }, "ui:shadow-default", className) }, attributes)), jsxRuntime.jsx("div", { className: "ui:absolute ui:right-0 ui:top-1/2", style: {
-    transform: "translateY(-50%)"
-  }, children: jsxRuntime.jsx(CrossIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:cursor-pointer ui:text-slate-300", {
-    "ui:block": isClearIconVisible,
-    "ui:hidden": !isClearIconVisible
-  }), onClick: onClickClearField }) })] })] });
+  }, 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,
+      "ui:hover:border-input-border-dark": !attributes.disabled,
+      "ui:border-red-700": isError,
+      "ui:focus:outline-negative": isError,
+      "ui:focus:border-primary": !isError,
+      "ui:focus:outline-primary": !isError,
+      "ui:bg-white": !attributes.disabled
+    },
+    heightClasses[height],
+    "ui:p-2",
+    "ui:border",
+    "ui:text-base ui:sm:text-sm",
+    "ui:placeholder-slate-500",
+    "ui:border-solid",
+    "ui:transition-colors",
+    "ui:duration-300",
+    {
+      "ui:z-10": hasSuffix || hasPrefix,
+      // to make sure the ui:outline is displayed completely
+      "ui:rounded": hasNoExtraContent,
+      "ui:rounded-l": hasSuffix,
+      "ui:rounded-r": hasPrefix,
+      "ui:order-2": hasPrefix,
+      "ui:order-1": hasSuffix
+    },
+    "ui:shadow-default",
+    // Safari keeps its native searchfield look for type="search" unless appearance is reset.
+    "ui:[&[type=search]]:appearance-none",
+    "ui:[&::-webkit-search-cancel-button]:appearance-none",
+    className
+  ) }, attributes)), jsxRuntime.jsx("button", {
+    type: "button",
+    "aria-label": clearButtonLabel,
+    onClick: handleClearClick,
+    // `display: none` keeps the hidden button out of the tab order and the accessibility tree.
+    className: classNames__default.default("ui:absolute ui:right-0 ui:top-1/2 ui:mr-3 ui:cursor-pointer ui:rounded ui:focus-visible:outline-primary", { "ui:hidden": !isClearIconVisible }),
+    style: {
+      transform: "translateY(-50%)"
+    },
+    children: jsxRuntime.jsx(CrossIcon, { className: "ui:block ui:h-6 ui:w-6 ui:text-slate-300" })
+  })] })] });
 });
 
 const Input = React__namespace.default.forwardRef((_a, ref) => {
@@ -2669,14 +2723,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) => {
@@ -4518,7 +4574,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) => {
@@ -4528,7 +4584,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) => {
@@ -4809,7 +4865,7 @@ ModalDialog.useModalDialog = useModalDialog;
 
 const SearchInput = React__namespace.default.forwardRef((props, ref) => {
   var _a;
-  return jsxRuntime.jsx(Input, Object.assign({}, props, { icon: "SearchIcon", type: "text", width: (_a = props.width) !== null && _a !== void 0 ? _a : "xl", clearable: true, ref }));
+  return jsxRuntime.jsx(Input, Object.assign({}, props, { icon: "SearchIcon", type: "search", width: (_a = props.width) !== null && _a !== void 0 ? _a : "xl", clearable: true, ref }));
 });
 
 const ImageCategory = (props) => {