@luscii-healthtech/web-ui 38.4.1 → 38.4.3

package/dist/components/Title/Title.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLProps } from "react";
 import "./Title.scss";
 import { type TextColor } from "../Text/Text";
 export type TitleStyle = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
@@ -35,6 +35,6 @@ type WithTextProp = SharedProps & {
     text: string;
     children?: never;
 };
-export type TitleProps = WithChildrenProp | WithTextProp;
+export type TitleProps = (WithChildrenProp | WithTextProp) & HTMLProps<HTMLHeadingElement>;
 export declare const Title: (props: TitleProps) => React.JSX.Element;
 export {};

package/dist/index.development.js

@@ -1559,7 +1559,7 @@ var css_248z$g = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FI
 styleInject(css_248z$g);
 
 const Title = (props) => {
-  const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props;
+  const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props, rest = __rest(props, ["variant", "type", "className", "text", "children", "color", "level", "ref"]);
   const variant = type ? type : variantFromProps;
   const isSmallTitle = variant === "xs" || variant === "sm";
   const containerClassName = classNames__default.default("ui-font-bold ui-leading-inherit ui-antialiased", allowedColors[color !== null && color !== void 0 ? color : "base"], {
@@ -1598,7 +1598,7 @@ const Title = (props) => {
   if (level) {
     ContainerElement = `h${level}`;
   }
-  return React__namespace.default.createElement(ContainerElement, { className: containerClassName, ref }, text !== null && text !== void 0 ? text : children);
+  return React__namespace.default.createElement(ContainerElement, Object.assign({ className: containerClassName, ref }, rest), text !== null && text !== void 0 ? text : children);
 };
 
 const AccordionItem = ({ id, title, content, isCollapsedByDefault = false, onClosed, onOpened }) => {
@@ -6756,43 +6756,42 @@ const FilterMenu = (props) => {
     React__namespace.default.createElement(
       react.Transition,
       { enter: "ui-transition ui-ease-out ui-duration-100", enterFrom: "ui-transform ui-opacity-0 ui-scale-95", enterTo: "ui-transform ui-opacity-100 ui-scale-100", leave: "ui-transition ui-ease-in ui-duration-75", leaveFrom: "ui-transform ui-opacity-100 ui-scale-100", leaveTo: "ui-transform ui-opacity-0 ui-scale-95" },
-      React__namespace.default.createElement(
-        react.PopoverPanel,
-        { className: classNames__default.default("ui-min-w-58", "ui-absolute ui-z-10 ui-mt-2", "ui-rounded-2xl ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5", "focus:ui-outline-none", "ui-border ui-border-neutral-border-high-contrast", {
-          // Align popover to the left side of the button label
-          "ui-left-4 ui-origin-top-left": alignPopover === "left",
-          // Align popover to the right side of the chevron icon
-          "ui-right-3 ui-origin-top-right": alignPopover === "right"
-        }) },
-        React__namespace.default.createElement("form", { className: "ui-max-h-120 ui-overflow-y-auto" }, categorizedFilter.options.map((option) => React__namespace.default.createElement(
-          "label",
-          { key: `${option.id}`, className: classNames__default.default("first-of-type:ui-rounded-t-2xl", "last-of-type:ui-rounded-b-2xl", "ui-flex ui-items-center ui-p-3", "ui-cursor-pointer", "ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-primary-background"), htmlFor: `filter-${option.id}`, role: multiSelection ? "menuitemcheckbox" : "menuitem" },
-          React__namespace.default.createElement("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
-            props.onFilterOptionChange({
-              changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
-            });
-          }, className: classNames__default.default("ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary", {
-            "ui-hidden": singleSelection
-          }) }),
-          React__namespace.default.createElement(
-            "span",
-            { className: classNames__default.default({
-              "ui-pr-l": multiSelection,
-              "ui-ml-s": multiSelection
-            }) },
-            React__namespace.default.createElement(Text, { className: "ui-whitespace-nowrap ui-capitalize", variant: option.isChecked ? "strong" : "base" }, option.label)
-          ),
-          React__namespace.default.createElement(
-            "span",
-            { className: classNames__default.default("ui-ml-auto ui-pr-s", {
-              "ui-hidden": multiSelection,
-              "ui-text-primary": option.isChecked,
-              "ui-text-transparent": !option.isChecked
-            }) },
-            React__namespace.default.createElement(solid.CheckIcon, { className: "ui-ml-s ui-h-5 ui-w-5 ui-flex-shrink-0" })
-          )
-        )))
-      )
+      React__namespace.default.createElement(react.PopoverPanel, { className: classNames__default.default("ui-min-w-58", "ui-absolute ui-z-10 ui-mt-2", "ui-rounded-2xl ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5", "focus:ui-outline-none", "ui-border ui-border-neutral-border-high-contrast", {
+        // Align popover to the left side of the button label
+        "ui-left-4 ui-origin-top-left": alignPopover === "left",
+        // Align popover to the right side of the chevron icon
+        "ui-right-3 ui-origin-top-right": alignPopover === "right"
+      }) }, ({ close }) => React__namespace.default.createElement("form", { className: "ui-max-h-120 ui-overflow-y-auto" }, categorizedFilter.options.map((option) => React__namespace.default.createElement(
+        "label",
+        { key: `${option.id}`, className: classNames__default.default("first-of-type:ui-rounded-t-2xl", "last-of-type:ui-rounded-b-2xl", "ui-flex ui-items-center ui-p-3", "ui-cursor-pointer", "ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-primary-background"), htmlFor: `filter-${option.id}`, role: multiSelection ? "menuitemcheckbox" : "menuitem" },
+        React__namespace.default.createElement("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
+          props.onFilterOptionChange({
+            changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
+          });
+          if (singleSelection) {
+            close();
+          }
+        }, className: classNames__default.default("ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary", {
+          "ui-hidden": singleSelection
+        }) }),
+        React__namespace.default.createElement(
+          "span",
+          { className: classNames__default.default({
+            "ui-pr-l": multiSelection,
+            "ui-ml-s": multiSelection
+          }) },
+          React__namespace.default.createElement(Text, { className: "ui-whitespace-nowrap ui-capitalize", variant: option.isChecked ? "strong" : "base" }, option.label)
+        ),
+        React__namespace.default.createElement(
+          "span",
+          { className: classNames__default.default("ui-ml-auto ui-pr-s", {
+            "ui-hidden": multiSelection,
+            "ui-text-primary": option.isChecked,
+            "ui-text-transparent": !option.isChecked
+          }) },
+          React__namespace.default.createElement(solid.CheckIcon, { className: "ui-ml-s ui-h-5 ui-w-5 ui-flex-shrink-0" })
+        )
+      ))))
     )
   );
 };