@luscii-healthtech/web-ui 16.1.0 → 16.2.0

package/dist/components/Modal/FullPageModal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactModal from "react-modal";
 import { PrimaryButtonProps } from "../ButtonV2/ButtonProps.type";
 import { FullPageModalActions } from "./subcomponents/FullPageModalActions";
 export type FullPageModalProps = {
@@ -34,6 +35,7 @@ export type FullPageModalProps = {
 };
 interface StaticComponents {
     Actions: typeof FullPageModalActions;
+    setAppElement: typeof ReactModal.setAppElement;
 }
 export declare const FullPageModal: React.FC<FullPageModalProps> & StaticComponents;
 export {};

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
+import ReactModal from "react-modal";
 import { ModalBaseProps } from "./ModalBase";
 export type ModalProps = Omit<ModalBaseProps, "title" | "withExtraMarginTop"> & {
     title: string;
 };
-export declare const Modal: React.FC<ModalProps>;
+interface StaticProperties {
+    setAppElement: typeof ReactModal.setAppElement;
+}
+export declare const Modal: React.FC<ModalProps> & StaticProperties;
+export {};

package/dist/components/WeekdaysPicker/WeekdaysPicker.d.ts

@@ -1,6 +1,20 @@
 import React from "react";
 export declare const weekdayValues: readonly ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
 export type Weekday = (typeof weekdayValues)[number];
+/**
+ * The previous implementation of this component used the index of the
+ * weekday to indicate which days were selected. This function converts
+ * values from the new API to the old API, for ease of migration.
+ */
+declare function weekdayNameToIndex(weekday: Weekday): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+declare function weekdayNameToIndex(weekdays: Weekday[]): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * The previous implementation of this component used the index of the
+ * weekday to indicate which days were selected. This function converts
+ * values from the new API to the old API, for ease of migration.
+ */
+declare function indexToWeekdayName(index: number): Weekday;
+declare function indexToWeekdayName(indexes: number[]): Weekday[];
 export type Props = {
     /**
      * The locale in which the weekday letters are displayed. Also
@@ -14,9 +28,15 @@ export type Props = {
      */
     selectedOptions: Weekday[];
     onChange: (weekdayValues: Weekday[]) => void;
+    id?: string;
     className?: string;
 };
+type StaticProperties = {
+    weekdayNameToIndex: typeof weekdayNameToIndex;
+    indexToWeekdayName: typeof indexToWeekdayName;
+};
 /**
  * A component that allows the user to select multiple weekdays.
  */
-export declare const WeekdaysPicker: (props: Props) => React.JSX.Element;
+export declare const WeekdaysPicker: React.FC<Props> & StaticProperties;
+export {};

package/dist/index.development.js

@@ -1740,7 +1740,6 @@ const ModalFooter = (props) => {
 const ModalBase = (props) => {
   var _a;
   const { size = "medium", withContentPaddingY = true, isOpen = false } = props;
-  ReactModal__default.default.setAppElement("body");
   return React__namespace.default.createElement(
     "div",
     { "data-test-id": "clicking-propagation-preventer", onClick: (event) => {
@@ -1774,6 +1773,7 @@ const ModalBase = (props) => {
 const Modal = (props) => {
   return React__namespace.default.createElement(ModalBase, Object.assign({}, props));
 };
+Modal.setAppElement = ReactModal__default.default.setAppElement;
 
 var css_248z$f = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-avatar {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: center;\n  width: 64px;\n  box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container > .avatar-image {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n.cweb-avatar > .avatar-content-container > .avatar-initials-text {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 24px;\n  font-weight: 300;\n  line-height: 1;\n  color: #737373;\n  margin: 0;\n  pointer-events: none;\n}\n.cweb-avatar.size-large {\n  width: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container {\n  width: 128px;\n  height: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n  font-size: 48px;\n}\n.cweb-avatar.size-medium {\n  width: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container {\n  width: 64px;\n  height: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container > .avatar-initials-text {\n  font-size: 24px;\n}\n.cweb-avatar.size-small {\n  width: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container {\n  width: 36px;\n  height: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container > .avatar-initials-text {\n  font-size: 14px;\n}\n.cweb-avatar.type-editable {\n  cursor: pointer;\n}\n.cweb-avatar.type-editable > .avatar-content-container {\n  position: relative;\n  border-color: #0074dd;\n  background-color: #ffffff;\n}\n.cweb-avatar.type-editable > .avatar-content-container:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n  border-radius: 50%;\n  transition: 0.4s ease background-color;\n}\n.cweb-avatar.type-editable > .avatar-content-container:hover:after {\n  background-color: rgba(0, 116, 221, 0.1);\n}\n.cweb-avatar.type-editable > .avatar-content-container > .avatar-initials-text {\n  color: #0074dd;\n}\n.cweb-avatar.type-readonly > .avatar-content-container {\n  border-color: #cccccc;\n  background-color: #f1f5f9;\n}\n.cweb-avatar.type-readonly > .avatar-content-container > .avatar-initials-text {\n  color: #64748b;\n}\n@media (max-width: 767px) {\n  .cweb-avatar.size-large {\n    width: 64px;\n  }\n  .cweb-avatar.size-large > .avatar-content-container {\n    width: 64px;\n    height: 64px;\n  }\n  .cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n    font-size: 24px;\n  }\n  .cweb-avatar.size-large.display-initials > .avatar-content-container {\n    border-width: 0.5px;\n  }\n}";
 styleInject(css_248z$f);
@@ -5277,7 +5277,7 @@ const FullPageModalActions = (props) => {
   return React__namespace.default.createElement("div", { className: "ui-flex ui-flex-row ui-flex-wrap ui-justify-end ui-gap-3" }, props.children);
 };
 
-const FullPageModal = ({ children, dataTestId, isOpen, onCloseClick, primaryButtonProps, actions, title }) => {
+const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, primaryButtonProps, actions, title }) => {
   return React__namespace.default.createElement(
     ReactModal__default.default,
     { isOpen, contentLabel: title, overlayClassName: "ui-fixed ui-inset-0 ui-overflow-x-hidden ui-overflow-y-auto ui-z-20", onRequestClose: onCloseClick, shouldFocusAfterRender: false, className: "ui-h-full ui-w-full", data: { "test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "react-modal" } },
@@ -5290,6 +5290,7 @@ const FullPageModal = ({ children, dataTestId, isOpen, onCloseClick, primaryButt
   );
 };
 FullPageModal.Actions = FullPageModalActions;
+FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
 const Actions = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);