@medplum/react 0.9.25 → 0.9.28

package/dist/esm/Autocomplete.js

@@ -0,0 +1,280 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { killEvent } from './utils/dom.js';
+
+function Autocomplete(props) {
+    var _a, _b;
+    const inputRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [lastValue, setLastValue] = useState(undefined);
+    const [timer, setTimer] = useState();
+    const [dropDownVisible, setDropDownVisible] = useState(false);
+    const [values, setValues] = useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : []);
+    const [options, setOptions] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const [abortController, setAbortController] = useState();
+    const [autoSubmit, setAutoSubmit] = useState();
+    const lastValueRef = useRef();
+    lastValueRef.current = lastValue;
+    const timerRef = useRef();
+    timerRef.current = timer;
+    const abortControllerRef = useRef();
+    abortControllerRef.current = abortController;
+    const autoSubmitRef = useRef();
+    autoSubmitRef.current = autoSubmit;
+    useEffect(() => {
+        return () => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
+    }, []);
+    useEffect(() => {
+        var _a;
+        setValues((_a = props.defaultValue) !== null && _a !== void 0 ? _a : []);
+    }, [props.defaultValue]);
+    function setValuesWrapper(newValues) {
+        setValues(newValues);
+        if (props.onChange) {
+            props.onChange(newValues);
+        }
+    }
+    /**
+     * Adds an option to the list of selected options.
+     * @param option The option.
+     */
+    function addOption(option) {
+        const inputElement = inputRef.current;
+        inputElement.value = '';
+        const newValues = props.multiple ? [...values, option] : [option];
+        setFocused(true);
+        setDropDownVisible(false);
+        setLastValue('');
+        setOptions([]);
+        setSelectedIndex(-1);
+        setValuesWrapper(newValues);
+    }
+    function handleClick() {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleFocus() {
+        setFocused(true);
+        if (props.loadOnFocus) {
+            handleInput();
+        }
+    }
+    function handleBlur() {
+        setFocused(false);
+        dismissOnDelay();
+    }
+    /**
+     * Handles an input event.
+     * Clears existing timers.
+     * Schedules a timer to execute the search after a short delay.
+     */
+    function handleInput() {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            setAbortController(undefined);
+        }
+        if (timerRef.current !== undefined) {
+            window.clearTimeout(timerRef.current);
+        }
+        const newTimer = window.setTimeout(() => handleTimer(), 100);
+        setTimer(newTimer);
+    }
+    function handleKeyDown(e) {
+        switch (e.key) {
+            case 'Enter':
+            case 'Tab':
+                handleSelectKey(e);
+                break;
+            case 'ArrowUp':
+                moveSelection(-1);
+                killEvent(e);
+                break;
+            case 'ArrowDown':
+                moveSelection(1);
+                killEvent(e);
+                break;
+            case 'Backspace':
+                handleBackspaceKey(e);
+                break;
+            case ',':
+            case ';':
+                handleSeparatorKey(e);
+        }
+    }
+    /**
+     * Handles the "enter" or "tab" keys.  The enter key logic is:
+     * Try to add an option with tryAddOption.  On success, cancel event.
+     * Otherwise, let the browser handle the enter key normally.
+     *
+     * @param e The key down event.
+     */
+    function handleSelectKey(e) {
+        var _a;
+        if (!timerRef.current && !abortControllerRef.current && tryAddOption()) {
+            killEvent(e);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            // The user pressed enter, but we don't have results yet.
+            // We need to wait for the results to come in.
+            setAutoSubmit(true);
+        }
+    }
+    /**
+     * Handles the "backspace" key.  The backspace key logic is:
+     * If the input is empty and there is at least one item, delete the last item.
+     * Otherwise, let the browser handle the backspace key normally.
+     *
+     * @param e The key down event.
+     */
+    function handleBackspaceKey(e) {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+            // If there is still text in the input,
+            // then handle backspace as normal.
+            return;
+        }
+        if (values.length > 0) {
+            // If there are selected items,
+            // then delete the last item.
+            killEvent(e);
+            setValuesWrapper(values.slice(0, values.length - 1));
+        }
+    }
+    /**
+     * Handles a "separator" key (comma, semicolon, others?).
+     *
+     * The separator key logic is:
+     * If the drop down is visible and something is selected, choose that.
+     * If the drop down is visible but nothing is selected, choose the first.
+     * If there is content in the input, use that as a "gray" option.
+     * Otherwise, ignore.
+     *
+     * @param e The key down event.
+     */
+    function handleSeparatorKey(e) {
+        var _a;
+        tryAddOption();
+        killEvent(e);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Tries to capture the existing input as an option.
+     *
+     * @return True if captured an option; false otherwise.
+     */
+    function tryAddOption() {
+        var _a;
+        let option;
+        if (selectedIndex >= 0 && selectedIndex < options.length) {
+            // Currently highlighted row
+            option = options[selectedIndex];
+        }
+        else if (selectedIndex === -1 && options.length > 0) {
+            // Default to first row
+            option = options[0];
+        }
+        else if (props.buildUnstructured && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+            // Build semi-structured item
+            option = props.buildUnstructured(inputRef.current.value);
+        }
+        if (!option) {
+            return false;
+        }
+        addOption(option);
+        return true;
+    }
+    /**
+     * Handles a timer tick event.
+     * If the contents of the input have changed, sends xhr to the server
+     * for updated contents.
+     */
+    function handleTimer() {
+        var _a, _b;
+        setTimer(undefined);
+        const value = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+        if (value === lastValueRef.current) {
+            // Nothing has changed, move on
+            return;
+        }
+        setLastValue(value);
+        const newAbortController = new AbortController();
+        setAbortController(newAbortController);
+        props
+            .loadOptions(value, newAbortController.signal)
+            .then((newOptions) => {
+            if (!newAbortController.signal.aborted) {
+                setDropDownVisible(newOptions.length > 0);
+                setOptions(newOptions);
+                setAbortController(undefined);
+                if (autoSubmitRef.current) {
+                    addOption(newOptions[0]);
+                    setAutoSubmit(false);
+                }
+            }
+        })
+            .catch(console.log);
+    }
+    /**
+     * Moves the selected row.
+     * @param delta The amount to move the selection, up is negative.
+     */
+    function moveSelection(delta) {
+        let index = selectedIndex + delta;
+        if (index < 0) {
+            index = 0;
+        }
+        else if (index >= options.length) {
+            index = options.length - 1;
+        }
+        setSelectedIndex(index);
+    }
+    /**
+     * Handles a hover event.
+     * @param _e The mouse event.
+     * @param index The drop down option index.
+     */
+    function handleDropDownHover(_e, index) {
+        setSelectedIndex(index);
+    }
+    /**
+     * Handles a click event.
+     * @param e The mouse event.
+     * @param option The drop down option.
+     */
+    function handleDropDownClick(e, option) {
+        killEvent(e);
+        addOption(option);
+    }
+    /**
+     * Dismisses the drop down menu after a slight delay.
+     */
+    function dismissOnDelay() {
+        window.setTimeout(() => {
+            setDropDownVisible(false);
+        }, 200);
+    }
+    const baseClassName = (_b = props.className) !== null && _b !== void 0 ? _b : 'medplum-autocomplete-container';
+    return (React.createElement("div", { "data-testid": "autocomplete", className: baseClassName + (focused ? ' focused' : ''), onClick: () => handleClick() },
+        React.createElement("ul", { onClick: () => handleClick() },
+            values.map((value) => (React.createElement("li", { key: props.getId(value), "data-testid": "selected", className: "medplum-autocomplete-item choice" }, props.getDisplay(value)))),
+            React.createElement("li", { className: "medplum-autocomplete-item" },
+                React.createElement("input", { type: "text", autoFocus: props.autofocus, placeholder: values.length === 0 ? props.placeholder : undefined, autoComplete: "off", autoCapitalize: "off", spellCheck: "true", onFocus: () => handleFocus(), onBlur: () => handleBlur(), onChange: () => handleInput(), onInput: () => handleInput(), onKeyDown: (e) => handleKeyDown(e), ref: inputRef, "data-testid": "input-element" }))),
+        dropDownVisible && (React.createElement("div", { className: "medplum-autocomplete", "data-testid": "dropdown" },
+            options.map((option, index) => (React.createElement("div", { key: props.getId(option), className: index === selectedIndex
+                    ? 'medplum-autocomplete-row medplum-autocomplete-active'
+                    : 'medplum-autocomplete-row', onMouseOver: (e) => handleDropDownHover(e, index), onClick: (e) => handleDropDownClick(e, option) },
+                props.getIcon && React.createElement("div", { className: "medplum-autocomplete-icon" }, props.getIcon(option)),
+                React.createElement("div", { className: "medplum-autocomplete-label" },
+                    props.getDisplay(option),
+                    props.getHelpText && React.createElement("div", { className: "medplum-autocomplete-help-text" }, props.getHelpText(option)))))),
+            props.onCreateNew && (React.createElement("div", { className: "medplum-autocomplete-row", onClick: props.onCreateNew },
+                React.createElement("div", { className: "medplum-autocomplete-label" }, "Create new...")))))));
+}
+
+export { Autocomplete };
+//# sourceMappingURL=Autocomplete.js.map

package/dist/esm/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../src/Autocomplete.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './Autocomplete.css';\nimport { killEvent } from './utils/dom';\n\nexport interface AutocompleteProps<T> {\n  name: string;\n  multiple?: boolean;\n  autofocus?: boolean;\n  defaultValue?: T[];\n  className?: string;\n  placeholder?: string;\n  loadOnFocus?: boolean;\n  loadOptions: (input: string, signal: AbortSignal) => Promise<T[]>;\n  buildUnstructured?: (input: string) => T;\n  getId: (item: T) => string;\n  getIcon?: (item: T) => JSX.Element;\n  getDisplay: (item: T) => JSX.Element;\n  getHelpText?: (item: T) => string | undefined;\n  onChange?: (values: T[]) => void;\n  onCreateNew?: () => void;\n}\n\nexport function Autocomplete<T>(props: AutocompleteProps<T>): JSX.Element {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [focused, setFocused] = useState(false);\n  const [lastValue, setLastValue] = useState<string | undefined>(undefined);\n  const [timer, setTimer] = useState<number>();\n  const [dropDownVisible, setDropDownVisible] = useState(false);\n  const [values, setValues] = useState(props.defaultValue ?? []);\n  const [options, setOptions] = useState<T[]>([]);\n  const [selectedIndex, setSelectedIndex] = useState(-1);\n  const [abortController, setAbortController] = useState<AbortController>();\n  const [autoSubmit, setAutoSubmit] = useState<boolean>();\n\n  const lastValueRef = useRef<string>();\n  lastValueRef.current = lastValue;\n\n  const timerRef = useRef<number>();\n  timerRef.current = timer;\n\n  const abortControllerRef = useRef<AbortController>();\n  abortControllerRef.current = abortController;\n\n  const autoSubmitRef = useRef<boolean>();\n  autoSubmitRef.current = autoSubmit;\n\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    setValues(props.defaultValue ?? []);\n  }, [props.defaultValue]);\n\n  function setValuesWrapper(newValues: T[]): void {\n    setValues(newValues);\n    if (props.onChange) {\n      props.onChange(newValues);\n    }\n  }\n\n  /**\n   * Adds an option to the list of selected options.\n   * @param option The option.\n   */\n  function addOption(option: T): void {\n    const inputElement = inputRef.current as HTMLInputElement;\n    inputElement.value = '';\n\n    const newValues = props.multiple ? [...values, option] : [option];\n    setFocused(true);\n    setDropDownVisible(false);\n    setLastValue('');\n    setOptions([]);\n    setSelectedIndex(-1);\n    setValuesWrapper(newValues);\n  }\n\n  function handleClick(): void {\n    inputRef.current?.focus();\n  }\n\n  function handleFocus(): void {\n    setFocused(true);\n    if (props.loadOnFocus) {\n      handleInput();\n    }\n  }\n\n  function handleBlur(): void {\n    setFocused(false);\n    dismissOnDelay();\n  }\n\n  /**\n   * Handles an input event.\n   * Clears existing timers.\n   * Schedules a timer to execute the search after a short delay.\n   */\n  function handleInput(): void {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      setAbortController(undefined);\n    }\n\n    if (timerRef.current !== undefined) {\n      window.clearTimeout(timerRef.current);\n    }\n\n    const newTimer = window.setTimeout(() => handleTimer(), 100);\n    setTimer(newTimer);\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent): void {\n    switch (e.key) {\n      case 'Enter':\n      case 'Tab':\n        handleSelectKey(e);\n        break;\n\n      case 'ArrowUp':\n        moveSelection(-1);\n        killEvent(e);\n        break;\n\n      case 'ArrowDown':\n        moveSelection(1);\n        killEvent(e);\n        break;\n\n      case 'Backspace':\n        handleBackspaceKey(e);\n        break;\n\n      case ',':\n      case ';':\n        handleSeparatorKey(e);\n    }\n  }\n\n  /**\n   * Handles the \"enter\" or \"tab\" keys.  The enter key logic is:\n   * Try to add an option with tryAddOption.  On success, cancel event.\n   * Otherwise, let the browser handle the enter key normally.\n   *\n   * @param e The key down event.\n   */\n  function handleSelectKey(e: React.KeyboardEvent): void {\n    if (!timerRef.current && !abortControllerRef.current && tryAddOption()) {\n      killEvent(e);\n      inputRef.current?.focus();\n    } else {\n      // The user pressed enter, but we don't have results yet.\n      // We need to wait for the results to come in.\n      setAutoSubmit(true);\n    }\n  }\n\n  /**\n   * Handles the \"backspace\" key.  The backspace key logic is:\n   * If the input is empty and there is at least one item, delete the last item.\n   * Otherwise, let the browser handle the backspace key normally.\n   *\n   * @param e The key down event.\n   */\n  function handleBackspaceKey(e: React.KeyboardEvent): void {\n    if (inputRef.current?.value) {\n      // If there is still text in the input,\n      // then handle backspace as normal.\n      return;\n    }\n\n    if (values.length > 0) {\n      // If there are selected items,\n      // then delete the last item.\n      killEvent(e);\n      setValuesWrapper(values.slice(0, values.length - 1));\n    }\n  }\n\n  /**\n   * Handles a \"separator\" key (comma, semicolon, others?).\n   *\n   * The separator key logic is:\n   * If the drop down is visible and something is selected, choose that.\n   * If the drop down is visible but nothing is selected, choose the first.\n   * If there is content in the input, use that as a \"gray\" option.\n   * Otherwise, ignore.\n   *\n   * @param e The key down event.\n   */\n  function handleSeparatorKey(e: React.KeyboardEvent): void {\n    tryAddOption();\n    killEvent(e);\n    inputRef.current?.focus();\n  }\n\n  /**\n   * Tries to capture the existing input as an option.\n   *\n   * @return True if captured an option; false otherwise.\n   */\n  function tryAddOption(): boolean {\n    let option: T | undefined;\n\n    if (selectedIndex >= 0 && selectedIndex < options.length) {\n      // Currently highlighted row\n      option = options[selectedIndex];\n    } else if (selectedIndex === -1 && options.length > 0) {\n      // Default to first row\n      option = options[0];\n    } else if (props.buildUnstructured && inputRef.current?.value) {\n      // Build semi-structured item\n      option = props.buildUnstructured(inputRef.current.value);\n    }\n\n    if (!option) {\n      return false;\n    }\n\n    addOption(option);\n    return true;\n  }\n\n  /**\n   * Handles a timer tick event.\n   * If the contents of the input have changed, sends xhr to the server\n   * for updated contents.\n   */\n  function handleTimer(): void {\n    setTimer(undefined);\n\n    const value = inputRef.current?.value?.trim() || '';\n    if (value === lastValueRef.current) {\n      // Nothing has changed, move on\n      return;\n    }\n\n    setLastValue(value);\n\n    const newAbortController = new AbortController();\n    setAbortController(newAbortController);\n\n    props\n      .loadOptions(value, newAbortController.signal)\n      .then((newOptions: T[]) => {\n        if (!newAbortController.signal.aborted) {\n          setDropDownVisible(newOptions.length > 0);\n          setOptions(newOptions);\n          setAbortController(undefined);\n          if (autoSubmitRef.current) {\n            addOption(newOptions[0]);\n            setAutoSubmit(false);\n          }\n        }\n      })\n      .catch(console.log);\n  }\n\n  /**\n   * Moves the selected row.\n   * @param delta The amount to move the selection, up is negative.\n   */\n  function moveSelection(delta: number): void {\n    let index = selectedIndex + delta;\n\n    if (index < 0) {\n      index = 0;\n    } else if (index >= options.length) {\n      index = options.length - 1;\n    }\n\n    setSelectedIndex(index);\n  }\n\n  /**\n   * Handles a hover event.\n   * @param _e The mouse event.\n   * @param index The drop down option index.\n   */\n  function handleDropDownHover(_e: React.MouseEvent, index: number): void {\n    setSelectedIndex(index);\n  }\n\n  /**\n   * Handles a click event.\n   * @param e The mouse event.\n   * @param option The drop down option.\n   */\n  function handleDropDownClick(e: React.MouseEvent, option: T): void {\n    killEvent(e);\n    addOption(option);\n  }\n\n  /**\n   * Dismisses the drop down menu after a slight delay.\n   */\n  function dismissOnDelay(): void {\n    window.setTimeout(() => {\n      setDropDownVisible(false);\n    }, 200);\n  }\n\n  const baseClassName = props.className ?? 'medplum-autocomplete-container';\n\n  return (\n    <div\n      data-testid=\"autocomplete\"\n      className={baseClassName + (focused ? ' focused' : '')}\n      onClick={() => handleClick()}\n    >\n      <ul onClick={() => handleClick()}>\n        {values.map((value) => (\n          <li key={props.getId(value)} data-testid=\"selected\" className=\"medplum-autocomplete-item choice\">\n            {props.getDisplay(value)}\n          </li>\n        ))}\n        <li className=\"medplum-autocomplete-item\">\n          <input\n            type=\"text\"\n            autoFocus={props.autofocus}\n            placeholder={values.length === 0 ? props.placeholder : undefined}\n            autoComplete=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck=\"true\"\n            onFocus={() => handleFocus()}\n            onBlur={() => handleBlur()}\n            onChange={() => handleInput()}\n            onInput={() => handleInput()}\n            onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e)}\n            ref={inputRef}\n            data-testid=\"input-element\"\n          />\n        </li>\n      </ul>\n      {dropDownVisible && (\n        <div className=\"medplum-autocomplete\" data-testid=\"dropdown\">\n          {options.map((option, index) => (\n            <div\n              key={props.getId(option)}\n              className={\n                index === selectedIndex\n                  ? 'medplum-autocomplete-row medplum-autocomplete-active'\n                  : 'medplum-autocomplete-row'\n              }\n              onMouseOver={(e) => handleDropDownHover(e, index)}\n              onClick={(e) => handleDropDownClick(e, option)}\n            >\n              {props.getIcon && <div className=\"medplum-autocomplete-icon\">{props.getIcon(option)}</div>}\n              <div className=\"medplum-autocomplete-label\">\n                {props.getDisplay(option)}\n                {props.getHelpText && <div className=\"medplum-autocomplete-help-text\">{props.getHelpText(option)}</div>}\n              </div>\n            </div>\n          ))}\n          {props.onCreateNew && (\n            <div className=\"medplum-autocomplete-row\" onClick={props.onCreateNew}>\n              <div className=\"medplum-autocomplete-label\">Create new...</div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Avatar.js

@@ -0,0 +1,24 @@
+import { getDisplayString, getImageSrc } from '@medplum/core';
+import React from 'react';
+import { MedplumLink } from './MedplumLink.js';
+import { useResource } from './useResource.js';
+
+function Avatar(props) {
+    var _a, _b;
+    const resource = useResource(props.value);
+    const className = props.size ? 'medplum-avatar ' + props.size : 'medplum-avatar';
+    const text = resource ? getDisplayString(resource) : (_a = props.alt) !== null && _a !== void 0 ? _a : '';
+    const initials = text && getInitials(text);
+    const imageUrl = (_b = (resource && getImageSrc(resource))) !== null && _b !== void 0 ? _b : props.src;
+    const innerContent = imageUrl ? React.createElement("img", { src: imageUrl, alt: text }) : initials;
+    return (React.createElement("div", { className: className, style: { backgroundColor: props.color }, "data-testid": "avatar" }, props.link && resource ? React.createElement(MedplumLink, { to: resource }, innerContent) : innerContent));
+}
+function getInitials(text) {
+    return text
+        .split(' ')
+        .map((n) => n[0])
+        .join('');
+}
+
+export { Avatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/Avatar.tsx"],"sourcesContent":["import { getDisplayString, getImageSrc } from '@medplum/core';\nimport { Reference, Resource } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { MedplumLink } from './MedplumLink';\nimport { useResource } from './useResource';\nimport './Avatar.css';\n\nexport interface AvatarProps {\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  value?: Reference | Resource;\n  src?: string;\n  alt?: string;\n  color?: string;\n  link?: boolean;\n}\n\nexport function Avatar(props: AvatarProps): JSX.Element {\n  const resource = useResource(props.value);\n  const className = props.size ? 'medplum-avatar ' + props.size : 'medplum-avatar';\n  const text = resource ? getDisplayString(resource) : props.alt ?? '';\n  const initials = text && getInitials(text);\n  const imageUrl = (resource && getImageSrc(resource)) ?? props.src;\n  const innerContent = imageUrl ? <img src={imageUrl} alt={text} /> : initials;\n  return (\n    <div className={className} style={{ backgroundColor: props.color }} data-testid=\"avatar\">\n      {props.link && resource ? <MedplumLink to={resource}>{innerContent}</MedplumLink> : innerContent}\n    </div>\n  );\n}\n\nfunction getInitials(text: string): string {\n  return text\n    .split(' ')\n    .map((n) => n[0])\n    .join('');\n}\n"],"names":[],"mappings":";;;;;AAgBM,SAAU,MAAM,CAAC,KAAkB,EAAA;;IACvC,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,GAAG,iBAAiB,GAAG,KAAK,CAAC,IAAI,GAAG,gBAAgB,CAAC;AACjF,IAAA,MAAM,IAAI,GAAG,QAAQ,GAAG,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAC;IACrE,MAAM,QAAQ,GAAG,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC;AAC3C,IAAA,MAAM,QAAQ,GAAG,CAAA,EAAA,IAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,KAAK,CAAC,GAAG,CAAC;AAClE,IAAA,MAAM,YAAY,GAAG,QAAQ,GAAG,6BAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAA,CAAI,GAAG,QAAQ,CAAC;AAC7E,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,KAAK,EAAE,EAAc,aAAA,EAAA,QAAQ,IACrF,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,WAAW,IAAC,EAAE,EAAE,QAAQ,EAAG,EAAA,YAAY,CAAe,GAAG,YAAY,CAC5F,EACN;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,IAAY,EAAA;AAC/B,IAAA,OAAO,IAAI;SACR,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAChB,IAAI,CAAC,EAAE,CAAC,CAAC;AACd;;;;"}

package/dist/esm/BackboneElementDisplay.js

@@ -0,0 +1,43 @@
+import { globalSchema, getPropertyDisplayName } from '@medplum/core';
+import React from 'react';
+import { DEFAULT_IGNORED_PROPERTIES } from './constants.js';
+import { DescriptionList, DescriptionListEntry } from './DescriptionList.js';
+import { getValueAndType, ResourcePropertyDisplay } from './ResourcePropertyDisplay.js';
+
+function BackboneElementDisplay(props) {
+    const typedValue = props.value;
+    const value = typedValue.value;
+    if (!value) {
+        return null;
+    }
+    const typeName = typedValue.type;
+    const typeSchema = globalSchema.types[typeName];
+    if (!typeSchema) {
+        return React.createElement("div", null,
+            typeName,
+            "\u00A0not implemented");
+    }
+    if (typeof value === 'object' && 'name' in value && Object.keys(value).length === 1) {
+        // Special case for common BackboneElement pattern
+        // Where there is an object with a single property 'name'
+        // Just display the name value.
+        return React.createElement("div", null, value.name);
+    }
+    return (React.createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
+        const key = entry[0];
+        if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
+            return null;
+        }
+        const property = entry[1];
+        const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+        if (props.ignoreMissingValues &&
+            (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
+            return null;
+        }
+        return (React.createElement(DescriptionListEntry, { key: key, term: getPropertyDisplayName(key) },
+            React.createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
+    })));
+}
+
+export { BackboneElementDisplay };
+//# sourceMappingURL=BackboneElementDisplay.js.map

package/dist/esm/BackboneElementDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackboneElementDisplay.js","sources":["../../src/BackboneElementDisplay.tsx"],"sourcesContent":["import { getPropertyDisplayName, globalSchema, TypedValue } from '@medplum/core';\nimport React from 'react';\nimport { DEFAULT_IGNORED_PROPERTIES } from './constants';\nimport { DescriptionList, DescriptionListEntry } from './DescriptionList';\nimport { getValueAndType, ResourcePropertyDisplay } from './ResourcePropertyDisplay';\n\nexport interface BackboneElementDisplayProps {\n  value: TypedValue;\n  compact?: boolean;\n  ignoreMissingValues?: boolean;\n  link?: boolean;\n}\n\nexport function BackboneElementDisplay(props: BackboneElementDisplayProps): JSX.Element | null {\n  const typedValue = props.value;\n  const value = typedValue.value;\n  if (!value) {\n    return null;\n  }\n\n  const typeName = typedValue.type;\n  const typeSchema = globalSchema.types[typeName];\n  if (!typeSchema) {\n    return <div>{typeName}&nbsp;not implemented</div>;\n  }\n\n  if (typeof value === 'object' && 'name' in value && Object.keys(value).length === 1) {\n    // Special case for common BackboneElement pattern\n    // Where there is an object with a single property 'name'\n    // Just display the name value.\n    return <div>{value.name}</div>;\n  }\n\n  return (\n    <DescriptionList compact={props.compact}>\n      {Object.entries(typeSchema.properties).map((entry) => {\n        const key = entry[0];\n        if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {\n          return null;\n        }\n        const property = entry[1];\n        const [propertyValue, propertyType] = getValueAndType(typedValue, key);\n        if (\n          props.ignoreMissingValues &&\n          (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))\n        ) {\n          return null;\n        }\n        return (\n          <DescriptionListEntry key={key} term={getPropertyDisplayName(key)}>\n            <ResourcePropertyDisplay\n              property={property}\n              propertyType={propertyType}\n              value={propertyValue}\n              ignoreMissingValues={props.ignoreMissingValues}\n              link={props.link}\n            />\n          </DescriptionListEntry>\n        );\n      })}\n    </DescriptionList>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAaM,SAAU,sBAAsB,CAAC,KAAkC,EAAA;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;AAC/B,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AAED,IAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC;IACjC,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YAAM,QAAQ;oCAA4B,CAAC;AACnD,KAAA;AAED,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;;;;AAInF,QAAA,OAAO,KAAM,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,KAAK,CAAC,IAAI,CAAO,CAAC;AAChC,KAAA;IAED,QACE,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,EACpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACnD,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACrB,IAAI,0BAA0B,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAChD,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAC1B,QAAA,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACvE,IACE,KAAK,CAAC,mBAAmB;AACzB,aAAC,CAAC,aAAa,KAAK,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,EAChF;AACA,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,QACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,sBAAsB,CAAC,GAAG,CAAC,EAAA;AAC/D,YAAA,KAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,EACtB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,aAAa,EACpB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,IAAI,EAAE,KAAK,CAAC,IAAI,EAAA,CAChB,CACmB,EACvB;KACH,CAAC,CACc,EAClB;AACJ;;;;"}

package/dist/esm/BackboneElementInput.js

@@ -0,0 +1,51 @@
+import { globalSchema, getPropertyDisplayName } from '@medplum/core';
+import React, { useState } from 'react';
+import { CheckboxFormSection } from './CheckboxFormSection.js';
+import { DEFAULT_IGNORED_PROPERTIES } from './constants.js';
+import { FormSection } from './FormSection.js';
+import { setPropertyValue } from './ResourceForm.js';
+import { getValueAndType } from './ResourcePropertyDisplay.js';
+import { ResourcePropertyInput } from './ResourcePropertyInput.js';
+
+function BackboneElementInput(props) {
+    var _a;
+    const [value, setValue] = useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : {});
+    function setValueWrapper(newValue) {
+        setValue(newValue);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    }
+    const typeName = props.typeName;
+    const typeSchema = globalSchema.types[typeName];
+    if (!typeSchema) {
+        return React.createElement("div", null,
+            typeName,
+            "\u00A0not implemented");
+    }
+    const typedValue = { type: typeName, value };
+    return (React.createElement(React.Fragment, null, Object.entries(typeSchema.properties).map((entry) => {
+        const key = entry[0];
+        if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
+            return null;
+        }
+        const property = entry[1];
+        if (!property.type) {
+            return null;
+        }
+        const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+        if (property.type.length === 1 && property.type[0].code === 'boolean') {
+            return (React.createElement(CheckboxFormSection, { key: key, title: getPropertyDisplayName(key), description: property.definition, htmlFor: key },
+                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                        setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                    } })));
+        }
+        return (React.createElement(FormSection, { key: key, title: getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
+            React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                    setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                } })));
+    })));
+}
+
+export { BackboneElementInput };
+//# sourceMappingURL=BackboneElementInput.js.map

package/dist/esm/BackboneElementInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackboneElementInput.js","sources":["../../src/BackboneElementInput.tsx"],"sourcesContent":["import { getPropertyDisplayName, globalSchema } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { CheckboxFormSection } from './CheckboxFormSection';\nimport { DEFAULT_IGNORED_PROPERTIES } from './constants';\nimport { FormSection } from './FormSection';\nimport { setPropertyValue } from './ResourceForm';\nimport { getValueAndType } from './ResourcePropertyDisplay';\nimport { ResourcePropertyInput } from './ResourcePropertyInput';\n\nexport interface BackboneElementInputProps {\n  typeName: string;\n  defaultValue?: any;\n  outcome?: OperationOutcome;\n  onChange?: (value: any) => void;\n}\n\nexport function BackboneElementInput(props: BackboneElementInputProps): JSX.Element {\n  const [value, setValue] = useState<any>(props.defaultValue ?? {});\n\n  function setValueWrapper(newValue: any): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  const typeName = props.typeName;\n  const typeSchema = globalSchema.types[typeName];\n  if (!typeSchema) {\n    return <div>{typeName}&nbsp;not implemented</div>;\n  }\n\n  const typedValue = { type: typeName, value };\n\n  return (\n    <>\n      {Object.entries(typeSchema.properties).map((entry) => {\n        const key = entry[0];\n        if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {\n          return null;\n        }\n        const property = entry[1];\n        if (!property.type) {\n          return null;\n        }\n\n        const [propertyValue, propertyType] = getValueAndType(typedValue, key);\n\n        if (property.type.length === 1 && property.type[0].code === 'boolean') {\n          return (\n            <CheckboxFormSection\n              key={key}\n              title={getPropertyDisplayName(key)}\n              description={property.definition}\n              htmlFor={key}\n            >\n              <ResourcePropertyInput\n                property={property}\n                name={key}\n                defaultValue={propertyValue}\n                defaultPropertyType={propertyType}\n                outcome={props.outcome}\n                onChange={(newValue: any, propName?: string) => {\n                  setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));\n                }}\n              />\n            </CheckboxFormSection>\n          );\n        }\n\n        return (\n          <FormSection\n            key={key}\n            title={getPropertyDisplayName(key)}\n            description={property.definition}\n            htmlFor={key}\n            outcome={props.outcome}\n          >\n            <ResourcePropertyInput\n              property={property}\n              name={key}\n              defaultValue={propertyValue}\n              defaultPropertyType={propertyType}\n              outcome={props.outcome}\n              onChange={(newValue: any, propName?: string) => {\n                setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));\n              }}\n            />\n          </FormSection>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Button(props) {
+    const className = 'medplum-button' +
+        (props.primary || props.type === 'submit' ? ' medplum-button-primary' : '') +
+        (props.danger ? ' medplum-button-danger' : '') +
+        (props.borderless ? ' medplum-button-borderless' : '') +
+        (props.size ? ' medplum-button-' + props.size : '');
+    return (React.createElement("button", { type: props.type || 'button', className: className, style: props.style, onClick: props.onClick, "aria-label": props.label, "data-testid": props.testid }, props.children));
+}
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/esm/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/Button.tsx"],"sourcesContent":["import React from 'react';\nimport './Button.css';\n\nexport interface ButtonProps {\n  type?: 'button' | 'submit';\n  style?: React.CSSProperties;\n  primary?: boolean;\n  danger?: boolean;\n  borderless?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  onClick?: (e: React.MouseEvent) => void;\n  children: React.ReactNode;\n  label?: string;\n  testid?: string;\n}\n\nexport function Button(props: ButtonProps): JSX.Element {\n  const className =\n    'medplum-button' +\n    (props.primary || props.type === 'submit' ? ' medplum-button-primary' : '') +\n    (props.danger ? ' medplum-button-danger' : '') +\n    (props.borderless ? ' medplum-button-borderless' : '') +\n    (props.size ? ' medplum-button-' + props.size : '');\n  return (\n    <button\n      type={props.type || 'button'}\n      className={className}\n      style={props.style}\n      onClick={props.onClick}\n      aria-label={props.label}\n      data-testid={props.testid}\n    >\n      {props.children}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;AAgBM,SAAU,MAAM,CAAC,KAAkB,EAAA;IACvC,MAAM,SAAS,GACb,gBAAgB;AAChB,SAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAC;SAC1E,KAAK,CAAC,MAAM,GAAG,wBAAwB,GAAG,EAAE,CAAC;SAC7C,KAAK,CAAC,UAAU,GAAG,4BAA4B,GAAG,EAAE,CAAC;AACtD,SAAC,KAAK,CAAC,IAAI,GAAG,kBAAkB,GAAG,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;AACtD,IAAA,QACE,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAC5B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACV,YAAA,EAAA,KAAK,CAAC,KAAK,EAAA,aAAA,EACV,KAAK,CAAC,MAAM,EAExB,EAAA,KAAK,CAAC,QAAQ,CACR,EACT;AACJ;;;;"}

package/dist/esm/CalendarInput.js

@@ -0,0 +1,96 @@
+import React, { useState, useMemo } from 'react';
+import { Button } from './Button.js';
+import { InputRow } from './InputRow.js';
+
+/**
+ * Returns a month display string (e.g. "January 2020").
+ * @param date Any date within the month.
+ * @returns The month display string (e.g. "January 2020")
+ */
+function getMonthString(date) {
+    return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
+}
+function CalendarInput(props) {
+    const [month, setMonth] = useState(getStartMonth);
+    function moveMonth(delta) {
+        setMonth((currMonth) => {
+            const prevMonth = new Date(currMonth.getTime());
+            prevMonth.setMonth(currMonth.getMonth() + delta);
+            return prevMonth;
+        });
+    }
+    const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
+    return (React.createElement("div", null,
+        React.createElement(InputRow, null,
+            React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+            React.createElement("p", null,
+                React.createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                React.createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+        React.createElement("table", { className: "medplum-calendar-table" },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "SUN"),
+                    React.createElement("th", null, "MON"),
+                    React.createElement("th", null, "TUE"),
+                    React.createElement("th", null, "WED"),
+                    React.createElement("th", null, "THU"),
+                    React.createElement("th", null, "FRI"),
+                    React.createElement("th", null, "SAT"))),
+            React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement("button", { disabled: !day.available, onClick: () => props.onClick(day.date) }, day.date.getDate()))))))))))));
+}
+function getStartMonth() {
+    const result = new Date();
+    result.setDate(1);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+function buildGrid(startDate, slots) {
+    const d = new Date(startDate.getFullYear(), startDate.getMonth());
+    const grid = [];
+    let row = [];
+    // Fill leading empty days
+    for (let i = 0; i < d.getDay(); i++) {
+        row.push(undefined);
+    }
+    while (d.getMonth() === startDate.getMonth()) {
+        row.push({
+            date: new Date(d.getTime()),
+            // available: isAvailable(d),
+            available: isDayAvailable(d, slots),
+        });
+        if (d.getDay() === 6) {
+            grid.push(row);
+            row = [];
+        }
+        d.setDate(d.getDate() + 1);
+    }
+    // Fill trailing empty days
+    if (d.getDay() !== 0) {
+        for (let i = d.getDay(); i < 7; i++) {
+            row.push(undefined);
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+/**
+ * Returns true if the given date is available for booking.
+ * @param day The day to check.
+ * @param slots The list of available slots.
+ * @returns True if there are any available slots for the day.
+ */
+function isDayAvailable(day, slots) {
+    // Note that slot start and end time may or may not be in UTC.
+    for (const slot of slots) {
+        const slotStart = new Date(slot.start);
+        if (slotStart.getFullYear() === day.getFullYear() &&
+            slotStart.getMonth() === day.getMonth() &&
+            slotStart.getDate() === day.getDate()) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export { CalendarInput, getMonthString, getStartMonth };
+//# sourceMappingURL=CalendarInput.js.map

package/dist/esm/CalendarInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarInput.js","sources":["../../src/CalendarInput.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { Button } from './Button';\nimport { InputRow } from './InputRow';\nimport { Slot } from '@medplum/fhirtypes';\nimport './CalendarInput.css';\n\nexport interface CalendarInputProps {\n  slots: Slot[];\n  onClick: (date: Date) => void;\n}\n\n/**\n * Returns a month display string (e.g. \"January 2020\").\n * @param date Any date within the month.\n * @returns The month display string (e.g. \"January 2020\")\n */\nexport function getMonthString(date: Date): string {\n  return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();\n}\n\ninterface CalendarCell {\n  date: Date;\n  available: boolean;\n}\n\ntype OptionalCalendarCell = CalendarCell | undefined;\n\nexport function CalendarInput(props: CalendarInputProps): JSX.Element {\n  const [month, setMonth] = useState<Date>(getStartMonth);\n\n  function moveMonth(delta: number): void {\n    setMonth((currMonth) => {\n      const prevMonth = new Date(currMonth.getTime());\n      prevMonth.setMonth(currMonth.getMonth() + delta);\n      return prevMonth;\n    });\n  }\n\n  const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);\n\n  return (\n    <div>\n      <InputRow>\n        <p style={{ flex: 1 }}>{getMonthString(month)}</p>\n        <p>\n          <Button label=\"Previous month\" onClick={() => moveMonth(-1)}>\n            &lt;\n          </Button>\n          <Button label=\"Next month\" onClick={() => moveMonth(1)}>\n            &gt;\n          </Button>\n        </p>\n      </InputRow>\n      <table className=\"medplum-calendar-table\">\n        <thead>\n          <tr>\n            <th>SUN</th>\n            <th>MON</th>\n            <th>TUE</th>\n            <th>WED</th>\n            <th>THU</th>\n            <th>FRI</th>\n            <th>SAT</th>\n          </tr>\n        </thead>\n        <tbody>\n          {grid.map((week, weekIndex) => (\n            <tr key={'week-' + weekIndex}>\n              {week.map((day, dayIndex) => (\n                <td key={'day-' + dayIndex}>\n                  {day && (\n                    <button disabled={!day.available} onClick={() => props.onClick(day.date)}>\n                      {day.date.getDate()}\n                    </button>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport function getStartMonth(): Date {\n  const result = new Date();\n  result.setDate(1);\n  result.setHours(0, 0, 0, 0);\n  return result;\n}\n\nfunction buildGrid(startDate: Date, slots: Slot[]): OptionalCalendarCell[][] {\n  const d = new Date(startDate.getFullYear(), startDate.getMonth());\n  const grid: OptionalCalendarCell[][] = [];\n  let row: OptionalCalendarCell[] = [];\n\n  // Fill leading empty days\n  for (let i = 0; i < d.getDay(); i++) {\n    row.push(undefined);\n  }\n\n  while (d.getMonth() === startDate.getMonth()) {\n    row.push({\n      date: new Date(d.getTime()),\n      // available: isAvailable(d),\n      available: isDayAvailable(d, slots),\n    });\n\n    if (d.getDay() === 6) {\n      grid.push(row);\n      row = [];\n    }\n\n    d.setDate(d.getDate() + 1);\n  }\n\n  // Fill trailing empty days\n  if (d.getDay() !== 0) {\n    for (let i = d.getDay(); i < 7; i++) {\n      row.push(undefined);\n    }\n    grid.push(row);\n  }\n\n  return grid;\n}\n\n/**\n * Returns true if the given date is available for booking.\n * @param day The day to check.\n * @param slots The list of available slots.\n * @returns True if there are any available slots for the day.\n */\nfunction isDayAvailable(day: Date, slots: Slot[]): boolean {\n  // Note that slot start and end time may or may not be in UTC.\n  for (const slot of slots) {\n    const slotStart = new Date(slot.start as string);\n    if (\n      slotStart.getFullYear() === day.getFullYear() &&\n      slotStart.getMonth() === day.getMonth() &&\n      slotStart.getDate() === day.getDate()\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":[],"mappings":"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"}