@luscii-healthtech/web-ui 18.0.1 → 18.1.0

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

@@ -0,0 +1,42 @@
+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
+ * the `Weekday` value from the new API to the `number` value of 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
+ * the `number` value from the old API to the `Weekday` value of the
+ * new API, for ease of migration.
+ */
+declare function indexToWeekdayName(index: number): Weekday;
+declare function indexToWeekdayName(indexes: number[]): Weekday[];
+export type Props = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The locale in which the weekday letters are displayed. Also
+     * affects the screen reader text.
+     */
+    locale: string;
+    /**
+     * This component is controlled, so it needs to be fed in
+     * state. The result of `onChange` can be passed back in here
+     * to make the component function as a controlled component.
+     */
+    selectedOptions: Weekday[];
+    onChange: (weekdayValues: Weekday[]) => void;
+};
+type StaticProperties = {
+    weekdayNameToIndex: typeof weekdayNameToIndex;
+    indexToWeekdayName: typeof indexToWeekdayName;
+};
+/**
+ * A component that allows the user to select multiple weekdays.
+ */
+export declare const WeekdaysPicker: React.FC<Props> & StaticProperties;
+export {};

package/dist/index.d.ts

@@ -78,4 +78,5 @@ export { FullPageModal } from "./components/Modal/FullPageModal";
 export { Card, type Props as CardProps } from "./components/Card/Card";
 export { Dropzone, DropzoneProps } from "./components/Dropzone";
 export { FilterBar, FilterBarUtils } from "./components/FilterBar";
+export { type Weekday, WeekdaysPicker, } from "./components/WeekdaysPicker/WeekdaysPicker";
 export { default as DragHandle, DragHandleProps, } from "./components/DragHandle";

package/dist/index.development.js

@@ -25,6 +25,7 @@ var pick = require('lodash/pick');
 var index_ie11 = require('react-hook-form/dist/index.ie11');
 var react = require('@headlessui/react');
 var solid = require('@heroicons/react/20/solid');
+var ToggleGroup = require('@radix-ui/react-toggle-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -60,6 +61,7 @@ var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var ReactQuill__default = /*#__PURE__*/_interopDefault(ReactQuill);
 var pick__default = /*#__PURE__*/_interopDefault(pick);
+var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -5610,6 +5612,100 @@ var FilterBar_utils = /*#__PURE__*/Object.freeze({
     getFilterGroups: getFilterGroups
 });
 
+const getLocalizedWeekdays = (args) => {
+  const dates = [
+    new Date(Date.UTC(2e3, 4, 1)),
+    new Date(Date.UTC(2e3, 4, 2)),
+    new Date(Date.UTC(2e3, 4, 3)),
+    new Date(Date.UTC(2e3, 4, 4)),
+    new Date(Date.UTC(2e3, 4, 5)),
+    new Date(Date.UTC(2e3, 4, 6)),
+    new Date(Date.UTC(2e3, 4, 7))
+    // sunday
+  ];
+  const formatDayToEnglishName = (date) => new Intl.DateTimeFormat("en-US", { weekday: "long" }).format(date);
+  const formatDateToLocalizedWeekdayLetter = (date) => new Intl.DateTimeFormat(args.locale, { weekday: "narrow" }).format(date);
+  const formatDateToLocalizedFullWeekdayName = (date) => new Intl.DateTimeFormat(args.locale, { weekday: "long" }).format(date);
+  return dates.map((date) => ({
+    /**
+     * The en-US name of the weekday. We'll use this as the value of the checkbox.
+     */
+    englishName: formatDayToEnglishName(date).toLowerCase(),
+    /**
+     * The localized name of the weekday. We'll use this for the screen reader.
+     */
+    localizedFullWeekdayName: formatDateToLocalizedFullWeekdayName(date),
+    /**
+     * The localized single letter indicator of the weekday. We'll use this for the visual indicator.
+     */
+    localizedWeekdayLetter: formatDateToLocalizedWeekdayLetter(date)
+  }));
+};
+const oldApiDayToIndexMapping = {
+  sunday: 0,
+  monday: 1,
+  tuesday: 2,
+  wednesday: 3,
+  thursday: 4,
+  friday: 5,
+  saturday: 6
+};
+const oldApiIndexToDayMapping = {
+  0: "sunday",
+  1: "monday",
+  2: "tuesday",
+  3: "wednesday",
+  4: "thursday",
+  5: "friday",
+  6: "saturday"
+};
+function weekdayNameToIndex(w) {
+  if (Array.isArray(w)) {
+    return w.map((weekday) => oldApiDayToIndexMapping[weekday]);
+  } else {
+    return oldApiDayToIndexMapping[w];
+  }
+}
+function indexToWeekdayName(idx) {
+  if (Array.isArray(idx)) {
+    return idx.map((index) => oldApiIndexToDayMapping[index]);
+  } else {
+    return oldApiIndexToDayMapping[idx];
+  }
+}
+const WeekdaysPicker = (props) => {
+  const {
+    locale,
+    selectedOptions,
+    onChange,
+    className,
+    id,
+    /**
+     * Filter out some attributes of `div` that are incompatible with
+     * the type of `ToggleGroup.Root`.
+     */
+    children: _,
+    defaultValue: __,
+    dir: ___
+  } = props, rest = __rest(props, ["locale", "selectedOptions", "onChange", "className", "id", "children", "defaultValue", "dir"]);
+  const options = getLocalizedWeekdays({ locale });
+  return React__namespace.default.createElement(ToggleGroup__namespace.Root, Object.assign({}, rest, { id, className: classNames__default.default("ui-flex ui-gap-2", className), type: "multiple", value: selectedOptions, onValueChange: onChange }), options.map(({ englishName, localizedFullWeekdayName, localizedWeekdayLetter }) => {
+    return React__namespace.default.createElement(ToggleGroup__namespace.Item, { key: englishName, value: englishName, "aria-label": localizedFullWeekdayName, className: classNames__default.default(
+      "ui-transition-[color,background_color,border-color,transform] ui-duration-150 ui-ease-out",
+      "ui-flex ui-h-11 ui-w-11 ui-select-none ui-items-center ui-justify-center ui-rounded-full",
+      /**
+       * Only keyboard users will see this. Black is properly visible
+       * on both selected/unselected states.
+       **/
+      "ui-outline-1 ui-outline-black",
+      "ui-bg-slate-200 hover:ui-bg-slate-300 active:ui-scale-95",
+      "data-[state=on]:ui-bg-blue-800 data-[state=on]:ui-text-white data-[state=on]:hover:ui-bg-blue-900"
+    ) }, localizedWeekdayLetter);
+  }));
+};
+WeekdaysPicker.weekdayNameToIndex = weekdayNameToIndex;
+WeekdaysPicker.indexToWeekdayName = indexToWeekdayName;
+
 exports.AccordionList = AccordionList;
 exports.AddIcon = AddIcon;
 exports.AlertsIcon = AlertsIcon;
@@ -5738,6 +5834,7 @@ exports.UList = UnorderedList;
 exports.UnorderedList = UnorderedList;
 exports.ViewItem = ViewItem;
 exports.WarningIcon = WarningIcon;
+exports.WeekdaysPicker = WeekdaysPicker;
 exports.getDndListItemProps = getDndListItemProps;
 exports.toast = toast;
 //# sourceMappingURL=index.development.js.map