@luscii-healthtech/web-ui 8.3.1 → 9.0.0

package/dist/components/CheckboxList/CheckboxGroup.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckboxGroupProps } from "./CheckboxList.types";
-export declare const CheckboxGroup: ({ title, items, onChange, className, hasDividers, isCollapsed, collapsible, }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: ({ title, items, onChange, className, isCollapsed, collapsible, }: CheckboxGroupProps) => JSX.Element;

package/dist/components/CheckboxList/CheckboxList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CheckboxListProps } from "./CheckboxList.types";
 export { CheckboxListProps };
-export declare const CheckboxList: ({ groups, onChange, className, hasDividers, }: CheckboxListProps) => JSX.Element;
+export declare const CheckboxList: ({ groups, onChange, className, }: CheckboxListProps) => JSX.Element;
 export default CheckboxList;

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

@@ -29,10 +29,6 @@ export interface CheckboxListProps {
      */
     groups: CheckboxGroup[];
     onChange: (event: CheckboxChangeEvent) => void;
-    /**
-     * Renders dividers between each item, including groups and inside of groups.
-     */
-    hasDividers?: boolean;
     className?: string;
 }
 type WithCollapsible = {
@@ -45,7 +41,6 @@ type WithCollapsible = {
 };
 export type CheckboxGroupProps = CheckboxGroup & {
     onChange: (event: CheckboxChangeEvent) => void;
-    hasDividers?: boolean;
     className?: string;
 } & WithCollapsible;
 export interface CheckboxGroupItemProps extends CheckboxListItem {

package/dist/components/Form/form.types.d.ts

@@ -6,7 +6,6 @@ import { SelectProps } from "../Select/Select";
 import { ImagePickerProps } from "../MediaPicker/MediaPicker";
 import { PartialProperties } from "../../types/general.types";
 import { CheckboxProps } from "../Checkbox/Checkbox";
-import { CheckboxListProps } from "../CheckboxList/CheckboxList.types";
 import { TextareaProps } from "../Textarea/Textarea";
 import { TitleProps } from "../Title/Title";
 export type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
@@ -74,7 +73,9 @@ export interface FieldCheckboxConfiguration extends FormFieldBaseConfiguration<O
  * Omiting `groups` and `onChange` here because these will be handled by
  * the `Control` component from react-hook-form.
  */
-export interface FieldCheckboxListConfiguration extends FormFieldBaseConfiguration<Pick<CheckboxListProps, "hasDividers" | "className">> {
+export interface FieldCheckboxListConfiguration extends FormFieldBaseConfiguration<{
+    className?: string;
+}> {
     type: "checkboxlist";
 }
 /**

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/**
+ * Source for the typing of the `as` prop:  https://stackoverflow.com/a/66568474
+ */
+type Props<E extends React.ElementType> = React.PropsWithChildren<{
+    /**
+     * Provide a custom component tag name to render instead of the default `a` tag.
+     *
+     * @default "a"
+     * @example "button"
+     */
+    as?: E;
+}>;
+/**
+ * A bare-bones wrapper around an <a> tag, containing only our preferred styling. This is component
+ * can be used for any link and not just text links.
+ */
+export declare function Link<T extends React.ElementType = "a">(props: Props<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof Props<T>>): React.JSX.Element;
+export {};

package/dist/components/TextLink/TextLink.d.ts

@@ -8,4 +8,7 @@ export interface TextLinkProps {
     onClick?: () => void;
     className?: string;
 }
+/**
+ * @deprecated Use `Link`.
+ */
 export declare const TextLink: (props: TextLinkProps) => JSX.Element;

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export { default as TagGroup } from "./components/Tag/TagGroup";
 export { Textarea, TextareaProps, ResizeTypes, } from "./components/Textarea/Textarea";
 export { TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
+export { Link } from "./components/Link/Link";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
 export { Title, TitleStyle } from "./components/Title/Title";
 export { Timeline } from "./components/Timeline/Timeline";

package/dist/index.development.js

@@ -3545,7 +3545,7 @@ var CheckboxState;
   CheckboxState2["UNCHECKED"] = "unchecked";
 })(CheckboxState || (CheckboxState = {}));
 
-const CheckboxGroup = ({ title, items, onChange, className, hasDividers = false, isCollapsed = true, collapsible = true }) => {
+const CheckboxGroup = ({ title, items, onChange, className, isCollapsed = true, collapsible = true }) => {
   const [groupCheckboxState, setGroupCheckboxState] = React.useState(CheckboxState.UNCHECKED);
   const [collapsed, setCollapsed] = React.useState(collapsible ? isCollapsed : false);
   const [isDisabled, setIsDisabled] = React.useState(false);
@@ -3586,20 +3586,13 @@ const CheckboxGroup = ({ title, items, onChange, className, hasDividers = false,
   };
   const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
   const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
-  const itemClassName = hasDividers ? "ui-py-3 last:ui-border-b-0 ui-border-b ui-border-slate-200" : "ui-my-1";
   const CollapseStateChevron = collapsed ? ChevronRightIcon : ChevronDownIcon;
   return React__namespace.default.createElement(
     "div",
-    { className: classNames__default.default("ui-flex ui-flex-col ", className, {
-      "ui-border-b ui-border-slate-200 last:ui-border-b-0": hasDividers && isCollapsed,
-      "ui-border-b-0": hasDividers && !isCollapsed
-    }) },
+    { className: classNames__default.default("ui-flex ui-flex-col ", className) },
     title && React__namespace.default.createElement(
       "div",
-      { className: classNames__default.default("ui-space-between ui-flex ui-w-full ui-flex-row ui-items-center", {
-        "ui-border-b ui-border-slate-200 ui-py-3": hasDividers,
-        "ui-my-1": !hasDividers
-      }, { "last:ui-border-b-0": hasDividers && isCollapsed }) },
+      { className: classNames__default.default("ui-space-between ui-flex ui-w-full ui-flex-row ui-items-center", "ui-my-1") },
       React__namespace.default.createElement(
         "div",
         { className: "ui-mr-auto ui-flex ui-h-6 ui-cursor-pointer ui-flex-row ui-items-center ui-text-slate-300 ui-transition ui-duration-300 hover:ui-text-slate-500", onClick: handleGroupCollapse },
@@ -3615,17 +3608,16 @@ const CheckboxGroup = ({ title, items, onChange, className, hasDividers = false,
     !collapsed && items.map((item) => React__namespace.default.createElement(CheckboxListItem, { key: item.id, id: item.id, label: item.label, onChange, isChecked: item.isChecked, isDisabled: item.isDisabled, className: classNames__default.default({
       "ui-ml-10": collapsible,
       "ui-ml-5": !collapsible
-    }, itemClassName) }))
+    }, "ui-my-1") }))
   );
 };
 
-const CheckboxList = ({ groups, onChange, className, hasDividers = false }) => {
-  const itemClassName = hasDividers ? "ui-py-3 ui-border-b ui-border-slate-200 last:ui-border-b-0" : "ui-my-1";
-  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-col", className) }, (groups === null || groups === void 0 ? void 0 : groups.length) > 0 && groups.map((group) => {
+const CheckboxList = ({ groups, onChange, className }) => {
+  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-col", className) }, groups.map((group) => {
     if (group.title) {
-      return React__namespace.default.createElement(CheckboxGroup, { key: group.title, items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange, hasDividers });
+      return React__namespace.default.createElement(CheckboxGroup, { key: group.title, items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange });
     } else {
-      return group.items.map((item) => React__namespace.default.createElement(CheckboxListItem, { key: item.id, id: item.id, label: item.label, onChange, isChecked: item.isChecked, isDisabled: item.isDisabled, className: itemClassName }));
+      return group.items.map((item) => React__namespace.default.createElement(CheckboxListItem, { key: item.id, id: item.id, label: item.label, onChange, isChecked: item.isChecked, isDisabled: item.isDisabled, className: "ui-my-1" }));
     }
   }));
 };
@@ -4942,6 +4934,16 @@ const TextEditorV2 = ({ defaultValue, onValueChange, locale }) => {
   ));
 };
 
+function Link(props) {
+  const { as: Element = "a", className } = props, rest = __rest(props, ["as", "className"]);
+  const ownClasses = ["ui-cursor-pointer ui-focus:ui-outline-primary"];
+  if (typeof props.children === "string") {
+    ownClasses.push("ui-text-blue-800", "hover:ui-underline", "hover:ui-text-blue-900");
+  }
+  const classes = classNames__default.default(ownClasses, className);
+  return React__namespace.default.createElement(Element, Object.assign({ className: classes }, rest));
+}
+
 const TimelineStep = React__namespace.default.forwardRef(({ content, type = "base", dataTestId, title }, ref) => {
   const isWideStep = type === "wide";
   const borderClassNames = "ui-ml-4 ui-pl-6 ui-border-blue-800 ui-border-l-2";
@@ -5150,12 +5152,12 @@ const FormFieldCheckboxList = ({ control, name, rules, fieldErrors, fieldRequire
     FormFieldLabeler,
     { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
     React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: ({ onChange, value }) => {
-      const { className, hasDividers } = fieldProps;
+      const { className } = fieldProps;
       const [checkboxListValues, setCheckboxListValues] = React.useState(value);
       React.useEffect(() => {
         setCheckboxListValues(value);
       }, [value]);
-      return React__namespace.default.createElement(CheckboxList, { groups: checkboxListValues, hasDividers, className, onChange: (event) => {
+      return React__namespace.default.createElement(CheckboxList, { groups: checkboxListValues, className, onChange: (event) => {
         setCheckboxListValues((previousState) => {
           const newState = previousState.map((group) => {
             const newItems = group.items.map((item) => {
@@ -5579,6 +5581,7 @@ exports.Input = Input;
 exports.LeftArrowIcon = LeftArrowIcon;
 exports.LightBulbIcon = LightBulbIcon;
 exports.Line = Line;
+exports.Link = Link;
 exports.LinkIcon = LinkIcon;
 exports.List = List;
 exports.ListItem = ListItem;