@availity/mui-favorites 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.5](https://github.com/Availity/element/compare/@availity/mui-favorites@0.2.4...@availity/mui-favorites@0.2.5) (2025-01-13)
+
+## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-favorites@0.2.3...@availity/mui-favorites@0.2.4) (2025-01-10)
+
 ## [0.2.3](https://github.com/Availity/element/compare/@availity/mui-favorites@0.2.2...@availity/mui-favorites@0.2.3) (2025-01-06)
 
 ### Dependency Updates

package/README.md

@@ -10,7 +10,7 @@
 
 Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-favorites-introduction--docs)
 
-Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)
 
 ## Installation
 

package/dist/index.d.mts

@@ -5,9 +5,12 @@ type Favorite = {
     pos: number;
 };
 
-declare const FavoritesProvider: ({ children, onFavoritesChange, }: {
+type StatusUnion = 'idle' | 'error' | 'loading' | 'reloading' | 'success';
+declare const FavoritesProvider: ({ children, onFavoritesChange, settingsFavorites, settingsStatus, }: {
     children: React.ReactNode;
     onFavoritesChange?: (favorites: Favorite[]) => void;
+    settingsFavorites?: Favorite[];
+    settingsStatus?: StatusUnion;
 }) => JSX.Element;
 type MergedStatusUnion = 'initLoading' | 'reloading' | 'error' | 'success';
 declare const useFavorites: (id: string) => {
@@ -30,7 +33,9 @@ type FavoriteHeartProps = {
      * @default false
      */
     disabled?: boolean;
+    /** The size of the icon in rem or px, minimum size is 1.5rem / 24px  */
+    customSize?: string;
 };
-declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, }: FavoriteHeartProps) => JSX.Element;
+declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, customSize, }: FavoriteHeartProps) => JSX.Element;
 
 export { FavoriteHeart, FavoritesProvider, useFavorites };

package/dist/index.d.ts

@@ -5,9 +5,12 @@ type Favorite = {
     pos: number;
 };
 
-declare const FavoritesProvider: ({ children, onFavoritesChange, }: {
+type StatusUnion = 'idle' | 'error' | 'loading' | 'reloading' | 'success';
+declare const FavoritesProvider: ({ children, onFavoritesChange, settingsFavorites, settingsStatus, }: {
     children: React.ReactNode;
     onFavoritesChange?: (favorites: Favorite[]) => void;
+    settingsFavorites?: Favorite[];
+    settingsStatus?: StatusUnion;
 }) => JSX.Element;
 type MergedStatusUnion = 'initLoading' | 'reloading' | 'error' | 'success';
 declare const useFavorites: (id: string) => {
@@ -30,7 +33,9 @@ type FavoriteHeartProps = {
      * @default false
      */
     disabled?: boolean;
+    /** The size of the icon in rem or px, minimum size is 1.5rem / 24px  */
+    customSize?: string;
 };
-declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, }: FavoriteHeartProps) => JSX.Element;
+declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, customSize, }: FavoriteHeartProps) => JSX.Element;
 
 export { FavoriteHeart, FavoritesProvider, useFavorites };

package/dist/index.js

@@ -119,7 +119,7 @@ var getFavorites = () => __async(void 0, null, function* () {
   const validatedFavorites = validateFavorites(unvalidatedFavorites);
   return validatedFavorites;
 });
-var useFavoritesQuery = () => (0, import_react_query.useQuery)(["favorites"], getFavorites);
+var useFavoritesQuery = (enabled) => (0, import_react_query.useQuery)(["favorites"], getFavorites, { enabled });
 var useSubmitFavorites = ({ onMutationStart }) => {
   const queryClient = (0, import_react_query.useQueryClient)();
   const _a = (0, import_react_query.useMutation)(submit, {
@@ -142,11 +142,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var FavoritesContext = (0, import_react.createContext)(null);
 var FavoritesProvider = ({
   children,
-  onFavoritesChange
+  onFavoritesChange,
+  settingsFavorites,
+  settingsStatus
 }) => {
   const [lastClickedFavoriteId, setLastClickedFavoriteId] = (0, import_react.useState)("");
   const queryClient = (0, import_react_query2.useQueryClient)();
-  const { data: favorites, status: queryStatus } = useFavoritesQuery();
+  const { data: favoritesData, status: favoritesDataStatus } = useFavoritesQuery(!settingsStatus);
+  const favorites = settingsStatus ? settingsFavorites : favoritesData;
+  const queryStatus = settingsStatus ? settingsStatus : favoritesDataStatus;
   const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
     onMutationStart(targetFavoriteId) {
       setLastClickedFavoriteId(targetFavoriteId);
@@ -242,6 +246,8 @@ var useFavorites = (id) => {
   let status = "initLoading";
   if (queryStatus === "loading")
     status = "initLoading";
+  if (queryStatus === "reloading")
+    status = "reloading";
   if (mutationStatus === "loading")
     status = "reloading";
   if (queryStatus === "error" || mutationStatus === "error")
@@ -270,21 +276,59 @@ var icons = {
   favoritedHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartIcon, { "aria-hidden": true, color: "error" }),
   unfavoritedHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartEmptyIcon, { "aria-hidden": true, color: "secondary" })
 };
-var FavoriteHeartContainer = (0, import_styles.styled)("div", { name: "AvFavoriteHeart", slot: "root" })({});
+var DEFAULT_SIZE = "2.5rem";
+var FavoriteHeartContainer = (0, import_styles.styled)("div", {
+  name: "AvFavoriteHeart",
+  slot: "Root"
+})(({ customSize }) => ({
+  height: customSize,
+  width: customSize
+}));
 var FavoriteInput = (0, import_styles.styled)("input", {
   name: "AvFavoriteHeart",
   slot: "input"
-})({});
+})(({ customSize }) => ({
+  height: customSize,
+  width: customSize,
+  minHeight: customSize,
+  minWidth: customSize
+}));
+var fontSize = (size = DEFAULT_SIZE) => {
+  const match = size.match(/^(\d*\.?\d+)(px|rem)$/);
+  if (!match) {
+    throw new Error("Invalid size format. Must be in 'px' or 'rem'.");
+  }
+  const [, number, unit] = match;
+  const halvedNumber = parseFloat(number) / 2;
+  return `${halvedNumber}${unit}`;
+};
 var FavoriteIcon = (0, import_styles.styled)("div", {
   name: "AvFavoriteHeart",
   slot: "icon"
-})({});
+})(({ customSize }) => ({
+  fontSize: fontSize(customSize)
+}));
+var validateSize = (size) => {
+  const match = size.match(/^(\d*\.?\d+)(px|rem)$/);
+  if (!match) {
+    return false;
+  }
+  const [, number, unit] = match;
+  const value = parseFloat(number);
+  if (unit === "rem" && value >= 1.5) {
+    return true;
+  } else if (unit === "px" && value >= 24) {
+    return true;
+  }
+  return false;
+};
 var FavoriteHeart = ({
   id,
   name,
   onChange,
   onMouseDown,
-  disabled = false
+  disabled = false,
+  customSize = DEFAULT_SIZE
 }) => {
   const { isFavorited, isLastClickedFavorite, status, toggleFavorite } = useFavorites(id);
   const handleChange = (event) => {
@@ -325,8 +369,9 @@ var FavoriteHeart = ({
     onMouseDown,
     style: { cursor }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(FavoriteHeartContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteIcon, { children: icons[iconKey] }),
+  const validSize = validateSize(customSize) ? customSize : DEFAULT_SIZE;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(FavoriteHeartContainer, { customSize: validSize, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteIcon, { customSize: validSize, children: icons[iconKey] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "span",
       {
@@ -345,7 +390,7 @@ var FavoriteHeart = ({
         children: isLastClickedFavorite && status === "reloading" ? "Loading..." : isLastClickedFavorite && status === "error" ? "An error has occurred. Please try again." : ""
       }
     ),
-    disabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteInput, __spreadValues({}, favoriteInputProps)) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_tooltip.Tooltip, { title: tooltipContent, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteInput, __spreadValues({}, favoriteInputProps)) })
+    disabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteInput, __spreadValues({ customSize: validSize }, favoriteInputProps)) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_tooltip.Tooltip, { title: tooltipContent, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteInput, __spreadValues({ customSize: validSize }, favoriteInputProps)) })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -84,7 +84,7 @@ var getFavorites = () => __async(void 0, null, function* () {
   const validatedFavorites = validateFavorites(unvalidatedFavorites);
   return validatedFavorites;
 });
-var useFavoritesQuery = () => useQuery(["favorites"], getFavorites);
+var useFavoritesQuery = (enabled) => useQuery(["favorites"], getFavorites, { enabled });
 var useSubmitFavorites = ({ onMutationStart }) => {
   const queryClient = useQueryClient();
   const _a = useMutation(submit, {
@@ -107,11 +107,15 @@ import { jsx } from "react/jsx-runtime";
 var FavoritesContext = createContext(null);
 var FavoritesProvider = ({
   children,
-  onFavoritesChange
+  onFavoritesChange,
+  settingsFavorites,
+  settingsStatus
 }) => {
   const [lastClickedFavoriteId, setLastClickedFavoriteId] = useState("");
   const queryClient = useQueryClient2();
-  const { data: favorites, status: queryStatus } = useFavoritesQuery();
+  const { data: favoritesData, status: favoritesDataStatus } = useFavoritesQuery(!settingsStatus);
+  const favorites = settingsStatus ? settingsFavorites : favoritesData;
+  const queryStatus = settingsStatus ? settingsStatus : favoritesDataStatus;
   const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
     onMutationStart(targetFavoriteId) {
       setLastClickedFavoriteId(targetFavoriteId);
@@ -207,6 +211,8 @@ var useFavorites = (id) => {
   let status = "initLoading";
   if (queryStatus === "loading")
     status = "initLoading";
+  if (queryStatus === "reloading")
+    status = "reloading";
   if (mutationStatus === "loading")
     status = "reloading";
   if (queryStatus === "error" || mutationStatus === "error")
@@ -235,21 +241,59 @@ var icons = {
   favoritedHeart: /* @__PURE__ */ jsx2(HeartIcon, { "aria-hidden": true, color: "error" }),
   unfavoritedHeart: /* @__PURE__ */ jsx2(HeartEmptyIcon, { "aria-hidden": true, color: "secondary" })
 };
-var FavoriteHeartContainer = styled("div", { name: "AvFavoriteHeart", slot: "root" })({});
+var DEFAULT_SIZE = "2.5rem";
+var FavoriteHeartContainer = styled("div", {
+  name: "AvFavoriteHeart",
+  slot: "Root"
+})(({ customSize }) => ({
+  height: customSize,
+  width: customSize
+}));
 var FavoriteInput = styled("input", {
   name: "AvFavoriteHeart",
   slot: "input"
-})({});
+})(({ customSize }) => ({
+  height: customSize,
+  width: customSize,
+  minHeight: customSize,
+  minWidth: customSize
+}));
+var fontSize = (size = DEFAULT_SIZE) => {
+  const match = size.match(/^(\d*\.?\d+)(px|rem)$/);
+  if (!match) {
+    throw new Error("Invalid size format. Must be in 'px' or 'rem'.");
+  }
+  const [, number, unit] = match;
+  const halvedNumber = parseFloat(number) / 2;
+  return `${halvedNumber}${unit}`;
+};
 var FavoriteIcon = styled("div", {
   name: "AvFavoriteHeart",
   slot: "icon"
-})({});
+})(({ customSize }) => ({
+  fontSize: fontSize(customSize)
+}));
+var validateSize = (size) => {
+  const match = size.match(/^(\d*\.?\d+)(px|rem)$/);
+  if (!match) {
+    return false;
+  }
+  const [, number, unit] = match;
+  const value = parseFloat(number);
+  if (unit === "rem" && value >= 1.5) {
+    return true;
+  } else if (unit === "px" && value >= 24) {
+    return true;
+  }
+  return false;
+};
 var FavoriteHeart = ({
   id,
   name,
   onChange,
   onMouseDown,
-  disabled = false
+  disabled = false,
+  customSize = DEFAULT_SIZE
 }) => {
   const { isFavorited, isLastClickedFavorite, status, toggleFavorite } = useFavorites(id);
   const handleChange = (event) => {
@@ -290,8 +334,9 @@ var FavoriteHeart = ({
     onMouseDown,
     style: { cursor }
   };
-  return /* @__PURE__ */ jsxs(FavoriteHeartContainer, { children: [
-    /* @__PURE__ */ jsx2(FavoriteIcon, { children: icons[iconKey] }),
+  const validSize = validateSize(customSize) ? customSize : DEFAULT_SIZE;
+  return /* @__PURE__ */ jsxs(FavoriteHeartContainer, { customSize: validSize, children: [
+    /* @__PURE__ */ jsx2(FavoriteIcon, { customSize: validSize, children: icons[iconKey] }),
     /* @__PURE__ */ jsx2(
       "span",
       {
@@ -310,7 +355,7 @@ var FavoriteHeart = ({
         children: isLastClickedFavorite && status === "reloading" ? "Loading..." : isLastClickedFavorite && status === "error" ? "An error has occurred. Please try again." : ""
       }
     ),
-    disabled ? /* @__PURE__ */ jsx2(FavoriteInput, __spreadValues({}, favoriteInputProps)) : /* @__PURE__ */ jsx2(Tooltip, { title: tooltipContent, placement: "top", children: /* @__PURE__ */ jsx2(FavoriteInput, __spreadValues({}, favoriteInputProps)) })
+    disabled ? /* @__PURE__ */ jsx2(FavoriteInput, __spreadValues({ customSize: validSize }, favoriteInputProps)) : /* @__PURE__ */ jsx2(Tooltip, { title: tooltipContent, placement: "top", children: /* @__PURE__ */ jsx2(FavoriteInput, __spreadValues({ customSize: validSize }, favoriteInputProps)) })
   ] });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-favorites",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Availity MUI Favorites Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/FavoriteHeart.tsx

@@ -14,16 +14,73 @@ const icons = {
   unfavoritedHeart: <HeartEmptyIcon aria-hidden color="secondary" />,
 };
 
-const FavoriteHeartContainer = styled('div', { name: 'AvFavoriteHeart', slot: 'root' })({});
+const DEFAULT_SIZE = '2.5rem';
+
+interface SizableHeartProps {
+  customSize?: string
+}
+
+const FavoriteHeartContainer = styled('div', {
+  name: 'AvFavoriteHeart',
+  slot: 'Root',
+})<SizableHeartProps>(({ customSize }) => ({
+  height: customSize,
+  width: customSize,
+}));
+
 const FavoriteInput = styled('input', {
   name: 'AvFavoriteHeart',
   slot: 'input',
-})({});
+})<SizableHeartProps>(({ customSize }) => ({
+  height: customSize,
+  width: customSize,
+  minHeight: customSize,
+  minWidth: customSize,
+}));
+
+const fontSize = (size = DEFAULT_SIZE) => {
+  // Match the number and unit in the size string
+  const match = size.match(/^(\d*\.?\d+)(px|rem)$/);
+
+  if (!match) {
+    throw new Error("Invalid size format. Must be in 'px' or 'rem'.");
+  }
+
+  const [, number, unit] = match;
+
+  // Parse the number, halve it, and return the new size string
+  const halvedNumber = parseFloat(number) / 2;
+  return `${halvedNumber}${unit}`;
+}
 
 const FavoriteIcon = styled('div', {
   name: 'AvFavoriteHeart',
   slot: 'icon',
-})({});
+})<SizableHeartProps>(({ customSize }) => ({
+  fontSize: fontSize(customSize),
+}));
+
+// validates the size input is the correct format and at least 24px or 1.5rem
+const validateSize = (size: string) => {
+  // Match the number and unit in the size string
+  const match = size.match(/^(\d*\.?\d+)(px|rem)$/);
+
+  if (!match) {
+    return false; // Invalid format
+  }
+
+  const [, number, unit] = match;
+  const value = parseFloat(number);
+
+  // Validate the size based on the unit
+  if (unit === 'rem' && value >= 1.5) {
+    return true;
+  } else if (unit === 'px' && value >= 24) {
+    return true;
+  }
+
+  return false;
+}
 
 type FavoriteHeartProps = {
   /** The configuration's id */
@@ -41,6 +98,8 @@ type FavoriteHeartProps = {
    * @default false
    */
   disabled?: boolean;
+  /** The size of the icon in rem or px, minimum size is 1.5rem / 24px  */
+  customSize?: string;
 };
 
 export const FavoriteHeart = ({
@@ -49,6 +108,7 @@ export const FavoriteHeart = ({
   onChange,
   onMouseDown,
   disabled = false,
+  customSize = DEFAULT_SIZE,
 }: FavoriteHeartProps): JSX.Element => {
   const { isFavorited, isLastClickedFavorite, status, toggleFavorite } = useFavorites(id);
 
@@ -97,9 +157,11 @@ export const FavoriteHeart = ({
     style: { cursor },
   };
 
+  const validSize = validateSize(customSize) ? customSize : DEFAULT_SIZE;
+
   return (
-    <FavoriteHeartContainer>
-      <FavoriteIcon>{icons[iconKey]}</FavoriteIcon>
+    <FavoriteHeartContainer customSize={validSize}>
+      <FavoriteIcon customSize={validSize}>{icons[iconKey]}</FavoriteIcon>
       <span
         style={{
           position: 'absolute',
@@ -122,10 +184,10 @@ export const FavoriteHeart = ({
       </span>
 
       {disabled ? (
-        <FavoriteInput {...favoriteInputProps} />
+        <FavoriteInput customSize={validSize} {...favoriteInputProps} />
       ) : (
         <Tooltip title={tooltipContent} placement="top">
-          <FavoriteInput {...favoriteInputProps} />
+          <FavoriteInput customSize={validSize} {...favoriteInputProps} />
         </Tooltip>
       )}
     </FavoriteHeartContainer>

package/src/lib/Favorites.tsx

@@ -5,7 +5,7 @@ import type { Favorite } from './utils';
 import { useFavoritesQuery, useSubmitFavorites, sendUpdateMessage, openMaxModal } from './utils';
 import { AV_INTERNAL_GLOBALS, MAX_FAVORITES } from './constants';
 
-type StatusUnion = 'idle' | 'error' | 'loading' | 'success';
+type StatusUnion = 'idle' | 'error' | 'loading' | 'reloading' | 'success';
 
 type FavoritesContextType = {
   favorites?: Favorite[];
@@ -21,14 +21,20 @@ const FavoritesContext = createContext<FavoritesContextType | null>(null);
 export const FavoritesProvider = ({
   children,
   onFavoritesChange,
+  settingsFavorites,
+  settingsStatus,
 }: {
   children: React.ReactNode;
   onFavoritesChange?: (favorites: Favorite[]) => void;
+  settingsFavorites?: Favorite[];
+  settingsStatus?: StatusUnion;
 }): JSX.Element => {
   const [lastClickedFavoriteId, setLastClickedFavoriteId] = useState<string>('');
 
   const queryClient = useQueryClient();
-  const { data: favorites, status: queryStatus } = useFavoritesQuery();
+  const { data: favoritesData, status: favoritesDataStatus } = useFavoritesQuery(!settingsStatus);
+  const favorites = settingsStatus ? settingsFavorites : favoritesData;
+  const queryStatus = settingsStatus ? settingsStatus : favoritesDataStatus;
 
   const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
     onMutationStart(targetFavoriteId) {
@@ -155,6 +161,7 @@ export const useFavorites = (
 
   let status: MergedStatusUnion = 'initLoading';
   if (queryStatus === 'loading') status = 'initLoading';
+  if (queryStatus === 'reloading') status = 'reloading';
   if (mutationStatus === 'loading') status = 'reloading';
   if (queryStatus === 'error' || mutationStatus === 'error') status = 'error';
   if (queryStatus === 'success' && (mutationStatus === 'success' || mutationStatus === 'idle')) status = 'success';

package/src/lib/utils.ts

@@ -35,7 +35,7 @@ const getFavorites = async () => {
   return validatedFavorites;
 };
 
-export const useFavoritesQuery = (): UseQueryResult<Favorite[], unknown> => useQuery(['favorites'], getFavorites);
+export const useFavoritesQuery = (enabled: boolean): UseQueryResult<Favorite[], unknown> => useQuery(['favorites'], getFavorites, { enabled });
 
 type MutationOptions = {
   onMutationStart?: (targetFavoriteId: string) => void;