@kaizen/components 1.28.0 → 1.29.0

package/dist/esm/index.mjs

@@ -5,8 +5,6 @@ export { Brand } from './Brand/Brand.mjs';
 export { BrandMoment } from './BrandMoment/BrandMoment.mjs';
 export { Button } from './Button/Button/Button.mjs';
 export { IconButton } from './Button/IconButton/IconButton.mjs';
-export { PaginationLink } from './Button/PaginationLink/PaginationLink.mjs';
-export { DirectionalLink } from './Button/DirectionalLink/DirectionalLink.mjs';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup.mjs';
 export { CalendarSingle } from './Calendar/CalendarSingle/CalendarSingle.mjs';
 export { CalendarRange } from './Calendar/CalendarRange/CalendarRange.mjs';
@@ -30,6 +28,8 @@ export { ClearButton } from './ClearButton/ClearButton.mjs';
 export { Collapsible } from './Collapsible/Collapsible/Collapsible.mjs';
 export { CollapsibleGroup } from './Collapsible/CollapsibleGroup/CollapsibleGroup.mjs';
 export { ExpertAdviceCollapsible } from './Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.mjs';
+export { Container } from './Container/Container.mjs';
+export { Content } from './Content/Content.mjs';
 export { DateInput } from './DateInput/DateInput/DateInput.mjs';
 export { DateInputDescription } from './DateInput/DateInputDescription/DateInputDescription.mjs';
 export { DateInputWithIconButton } from './DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs';
@@ -298,14 +298,23 @@ export { VisibleIcon } from './Icon/VisibleIcon.mjs';
 export { WritingIcon } from './Icon/WritingIcon.mjs';
 export { ZoomInIcon } from './Icon/ZoomInIcon.mjs';
 export { ZoomOutIcon } from './Icon/ZoomOutIcon.mjs';
+export { AccountBasics, Action, ActionPlans, AddImage, AddUser, Alarm, AmplifyOthers, Assertive, BCorp, BaselineSurvey, Behaviour, BenefitsSurvey, BlankSurvey, CalendarSync, CandidateSurvey, Cautionary, ChangeAgents, ChangeReadiness, ChangeSuccess, Coaching, Communications, Community, Company, CompanyDetails, Conversations, CustomOnboardSurvey, CustomSurvey, CustomUnattributedSurvey, DataVisualization, EmergencyResponse, EmployeeData, EndOfProbation, EngagementSurvey, EssentialProductivity, EssentialResilience, ExecutiveReportSharing, ExitSurvey, FastAction, Feedback, Fire, Fireworks, FullImport, Gdpr, GeneralOnboardSurvey, Goals, HaveTheCourageToBeVulnerable, HealthAndSafety, HrisImport, InclusionSurvey, Individual180, Individual360, InfluentialCommunication, Informative, Insights, InternSurvey, LeaderReportSharing, Leadership180, Leadership360, LeadingChange, LeadingThroughCrisis, Learn, LearnFasterThroughFeedback, London, Manager180, Manager360, ManagerLearning, ManagerReportSharing, MeetingVoices, Melbourne, Microphone, Negative, NewWaysOfWorking, NewYork, Objective, OneOnOne, PaperPen, PartialImport, PerformanceDiagnostics, PhasedWeek1OnboardSurvey, PhasedWeek5OnboardSurvey, Positive, PowerfulInsights, Privacy, Process, Productivity, PulseSurvey, QuickEngagementSurvey, ReOnboarding, ReadArticle, Recommendation, RemoteManager, RemoteOnboardSurvey, RemoteWorkQSet, ReportSharing, Resilience, Resources, Response, ReturnToWorkplace, SanFrancisco, ScienceBackedTools, ShareReport, SinglePointOnboardSurvey, SkillsDevelopment, SpreadsheetTemplate, Starburst, Stop, Strategy, TakeAim, Team1, Team2, TeamEffectiveness1, TeamEffectiveness2, Templates, Timezone, TrafficCone, Training1, Training2, Training3, Trophy, TrustOthersToMakeDecisions, UnderConstruction, ValueAdd, ValuesSurvey1, ValuesSurvey2, Video, ViewReports, WellbeingSurvey, WellbeingSurvey1, WellbeingSurvey2, WellbeingSurvey3, Workshop } from './Illustration/Spot/Spot.mjs';
 export { Input } from './Input/Input/Input.mjs';
 export { InputRange } from './Input/InputRange/InputRange.mjs';
 export { InputSearch } from './Input/InputSearch/InputSearch.mjs';
 export { KaizenProvider } from './KaizenProvider/KaizenProvider.mjs';
-export { ThemeContext, ThemeProvider, useTheme } from './KaizenProvider/ThemeProvider/ThemeProvider.mjs';
-export { defaultTheme } from './KaizenProvider/ThemeProvider/themes/index.mjs';
 export { Label } from './Label/Label.mjs';
 export { LabelledMessage } from './LabelledMessage/LabelledMessage.mjs';
+export { LoadingGraphic } from './Loading/LoadingGraphic/LoadingGraphic.mjs';
+export { LoadingHeading } from './Loading/LoadingHeading/LoadingHeading.mjs';
+export { LoadingInput } from './Loading/LoadingInput/LoadingInput.mjs';
+export { LoadingParagraph } from './Loading/LoadingParagraph/LoadingParagraph.mjs';
+export { LoadingSpinner } from './Loading/LoadingSpinner/LoadingSpinner.mjs';
+export { Menu } from './Menu/Menu.mjs';
+export { MenuHeading } from './Menu/subcomponents/MenuHeading/MenuHeading.mjs';
+export { MenuItem } from './Menu/subcomponents/MenuItem/MenuItem.mjs';
+export { MenuList } from './Menu/subcomponents/MenuList/MenuList.mjs';
+export { StatelessMenu } from './Menu/subcomponents/StatelessMenu/StatelessMenu.mjs';
 export { ConfirmationModal } from './Modal/ConfirmationModal/ConfirmationModal.mjs';
 export { ContextModal } from './Modal/ContextModal/ContextModal.mjs';
 export { GenericModal } from './Modal/GenericModal/GenericModal.mjs';
@@ -318,15 +327,27 @@ export { ModalBody } from './Modal/GenericModal/subcomponents/ModalBody/ModalBod
 export { InputEditModal } from './Modal/InputEditModal/InputEditModal.mjs';
 export { InlineNotification } from './Notification/InlineNotification/InlineNotification.mjs';
 export { GlobalNotification } from './Notification/GlobalNotification/GlobalNotification.mjs';
+export { Pagination } from './Pagination/Pagination.mjs';
+export { DirectionalLink } from './Pagination/subcomponents/DirectionalLink/DirectionalLink.mjs';
+export { PaginationLink } from './Pagination/subcomponents/PaginationLink/PaginationLink.mjs';
+export { Popover, usePopover } from './Popover/Popover.mjs';
 export { Radio } from './Radio/Radio/Radio.mjs';
 export { RadioField } from './Radio/RadioField/RadioField.mjs';
 export { RadioGroup } from './Radio/RadioGroup/RadioGroup.mjs';
 export { SearchField } from './SearchField/SearchField.mjs';
+export { AsyncSelect, Select } from './Select/Select.mjs';
+export { Skirt } from './Skirt/Skirt.mjs';
 export { Slider } from './Slider/Slider.mjs';
+export { SplitButton } from './SplitButton/SplitButton.mjs';
+export { TableCard, TableContainer, TableHeader, TableHeaderRowCell, TableRow, TableRowCell } from './Table/Table.mjs';
 export { Text } from './Text/Text.mjs';
-export { Workflow } from './Workflow/Workflow.mjs';
 export { TextField } from './TextField/TextField.mjs';
 export { TextArea } from './TextArea/TextArea.mjs';
 export { TextAreaField } from './TextAreaField/TextAreaField.mjs';
-export { heartTheme } from './KaizenProvider/ThemeProvider/themes/heart.mjs';
+export { InformationTile } from './Tile/InformationTile/InformationTile.mjs';
+export { MultiActionTile } from './Tile/MultiActionTile/MultiActionTile.mjs';
+export { TileGrid } from './Tile/TileGrid/TileGrid.mjs';
+export { TimeField } from './TimeField/TimeField.mjs';
+export { Tooltip } from './Tooltip/Tooltip.mjs';
+export { Workflow } from './Workflow/Workflow.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/utils/useMediaQueries.mjs

@@ -1,6 +1,5 @@
 import { __assign } from 'tslib';
 import React, { useMemo, useState, useEffect } from 'react';
-import { useTheme } from '@kaizen/design-tokens';
 var subtractOnePixel = function (breakpoint) {
   return "".concat(parseInt(breakpoint, 10) - 1, "px");
 };
@@ -36,7 +35,11 @@ var useMediaQueries = function (propQueries) {
       }
     };
   }
-  var theme = useTheme();
+  // Ensure these match the tokens in @kaizen/design-tokens
+  var breakpoints = {
+    medium: "768px",
+    large: "1080px"
+  };
   // The `addEventListener` calls blow up legacy Edge (<= v18/pre chromium),
   // so we disable the functionality of updating after page load.
   var isLegacyEdge = navigator.userAgent.match(/Edge/);
@@ -45,14 +48,14 @@ var useMediaQueries = function (propQueries) {
   // Create Kaizen breakpoint matches for initial state
   // ---------------------------------------
   var smallMatchMedia = useMemo(function () {
-    return window.matchMedia("(max-width: ".concat(subtractOnePixel(theme.layout.breakpoints.medium), ")"));
-  }, [theme.layout.breakpoints.medium]);
+    return window.matchMedia("(max-width: ".concat(subtractOnePixel(breakpoints.medium), ")"));
+  }, [breakpoints.medium]);
   var mediumMatchMedia = useMemo(function () {
-    return window.matchMedia("(min-width: ".concat(theme.layout.breakpoints.medium, ") and (max-width: ").concat(subtractOnePixel(theme.layout.breakpoints.large), ")"));
-  }, [theme.layout.breakpoints.large]);
+    return window.matchMedia("(min-width: ".concat(breakpoints.medium, ") and (max-width: ").concat(subtractOnePixel(breakpoints.large), ")"));
+  }, [breakpoints.large]);
   var largeMatchMedia = useMemo(function () {
-    return window.matchMedia("(min-width: ".concat(theme.layout.breakpoints.large, ")"));
-  }, [theme.layout.breakpoints.large]);
+    return window.matchMedia("(min-width: ".concat(breakpoints.large, ")"));
+  }, [breakpoints.large]);
   var isSmall = smallMatchMedia.matches || false;
   var isMedium = mediumMatchMedia.matches || false;
   var isLarge = largeMatchMedia.matches || false;

package/dist/esm/utils/useMediaQueries.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQueries.mjs","sources":["../../../src/utils/useMediaQueries.tsx"],"sourcesContent":["import React, { useEffect, useState, ReactNode, useMemo } from \"react\"\nimport { useTheme } from \"@kaizen/design-tokens\"\n\ntype Props = { [key: string]: string }\ntype GenericChildrenType = { children?: ReactNode }\n\nexport const subtractOnePixel = (breakpoint: string): string =>\n  `${parseInt(breakpoint, 10) - 1}px`\n\nexport const useMediaQueries = (\n  propQueries: Props = {}\n): {\n  queries: {\n    [key: string]: boolean\n    isSmall: boolean\n    isMedium: boolean\n    isLarge: boolean\n    isMediumOrSmaller: boolean\n    isMediumOrLarger: boolean\n  }\n  components: {\n    [key: string]: (props: GenericChildrenType) => JSX.Element\n    SmallOnly: (props: GenericChildrenType) => JSX.Element\n    MediumOnly: (props: GenericChildrenType) => JSX.Element\n    LargeOnly: (props: GenericChildrenType) => JSX.Element\n    MediumOrSmaller: (props: GenericChildrenType) => JSX.Element\n    MediumOrLarger: (props: GenericChildrenType) => JSX.Element\n  }\n} => {\n  if (typeof window === \"undefined\") {\n    return {\n      queries: {\n        isSmall: false,\n        isMedium: false,\n        isLarge: false,\n        isMediumOrSmaller: false,\n        isMediumOrLarger: true,\n      },\n      components: {\n        SmallOnly: () => <></>,\n        MediumOnly: () => <></>,\n        LargeOnly: () => <></>,\n        MediumOrSmaller: () => <></>,\n        MediumOrLarger: (props: HelperComponentProps) => <>{props.children}</>,\n      },\n    }\n  }\n  const theme = useTheme()\n\n  // The `addEventListener` calls blow up legacy Edge (<= v18/pre chromium),\n  // so we disable the functionality of updating after page load.\n  const isLegacyEdge = navigator.userAgent.match(/Edge/)\n  const isUnsupportedSafari =\n    window.matchMedia(\"\").addEventListener === undefined\n\n  // ---------------------------------------\n  // Create Kaizen breakpoint matches for initial state\n  // ---------------------------------------\n  const smallMatchMedia = useMemo(\n    () =>\n      window.matchMedia(\n        `(max-width: ${subtractOnePixel(theme.layout.breakpoints.medium)})`\n      ),\n    [theme.layout.breakpoints.medium]\n  )\n\n  const mediumMatchMedia = useMemo(\n    () =>\n      window.matchMedia(\n        `(min-width: ${\n          theme.layout.breakpoints.medium\n        }) and (max-width: ${subtractOnePixel(theme.layout.breakpoints.large)})`\n      ),\n    [theme.layout.breakpoints.large]\n  )\n  const largeMatchMedia = useMemo(\n    () => window.matchMedia(`(min-width: ${theme.layout.breakpoints.large})`),\n    [theme.layout.breakpoints.large]\n  )\n\n  const isSmall = smallMatchMedia.matches || false\n  const isMedium = mediumMatchMedia.matches || false\n  const isLarge = largeMatchMedia.matches || false\n\n  const [kaizenMatches, setKaizenMatches] = useState<{\n    isSmall: boolean\n    isMedium: boolean\n    isLarge: boolean\n    isMediumOrSmaller: boolean\n    isMediumOrLarger: boolean\n  }>({\n    isSmall,\n    isMedium,\n    isLarge,\n    isMediumOrSmaller: !isLarge,\n    isMediumOrLarger: !isSmall,\n    // Note: ^the last two will need an adjustment in logic if/when we add more breakpoints\n  })\n\n  // ---------------------------------------\n  // Create an event listener based on the medium breakpoint and update state whenever it changes\n  // ---------------------------------------\n  useEffect(() => {\n    if (isLegacyEdge || isUnsupportedSafari) {\n      return\n    }\n\n    const updateMatches = (): void => {\n      const isSmallAfterUpdate = smallMatchMedia.matches || false\n      const isMediumAfterUpdate = mediumMatchMedia.matches || false\n      const isLargeAfterUpdate = largeMatchMedia.matches || false\n\n      setKaizenMatches({\n        isSmall: isSmallAfterUpdate,\n        isMedium: isMediumAfterUpdate,\n        isLarge: isLargeAfterUpdate,\n        isMediumOrSmaller: !isLargeAfterUpdate,\n        isMediumOrLarger: !isSmallAfterUpdate,\n      })\n    }\n\n    mediumMatchMedia.addEventListener(\"change\", updateMatches, true)\n\n    return () => {\n      mediumMatchMedia.removeEventListener(\"change\", updateMatches)\n    }\n  }, [])\n\n  // ---------------------------------------\n  // Create custom queries matches for initial state\n  // ---------------------------------------\n  const customQueryMatchMedias = new Map()\n  const customQueryMatches: Record<string, boolean> = {}\n  new Map(Object.entries(propQueries)).forEach((queryString, queryName) => {\n    const matchMedia = window.matchMedia(queryString)\n    customQueryMatches[queryName] = matchMedia.matches || false\n\n    // Store this matchMedia so that we can loop over it later and add event listeners\n    customQueryMatchMedias.set(queryName, matchMedia)\n  })\n\n  const [customMatches, setCustomMatches] =\n    useState<Record<string, boolean>>(customQueryMatches)\n\n  // ---------------------------------------\n  // Create an event listener for each custom query\n  // ---------------------------------------\n  useEffect(() => {\n    if (isLegacyEdge || isUnsupportedSafari) {\n      return\n    }\n\n    const updateCustomMatches = (\n      matchMedia: MediaQueryList,\n      queryName: string\n    ): void =>\n      setCustomMatches({\n        ...customQueryMatches,\n        [queryName]: matchMedia.matches || false,\n      })\n\n    const allEventListeners = new Map()\n    customQueryMatchMedias.forEach((matchMedia, queryName) => {\n      // Store this method so that we can reference it in the cleanup function below\n      const updateCustomMatchesForQuery = (): void => {\n        updateCustomMatches(matchMedia, queryName)\n      }\n      allEventListeners.set(matchMedia, updateCustomMatchesForQuery)\n\n      // Add the event listener\n      matchMedia.addEventListener(\"change\", updateCustomMatchesForQuery, true)\n    })\n\n    return () => {\n      allEventListeners.forEach((eventListener, matchMedia) => {\n        matchMedia.removeEventListener(\"change\", eventListener)\n      })\n    }\n  }, [])\n\n  // ---------------------------------------\n  // Create Kaizen helper components\n  // ---------------------------------------\n  type HelperComponentProps = {\n    children?: ReactNode\n  }\n\n  const kaizenComponents = {\n    SmallOnly: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isSmall && props.children}</>\n    ),\n    MediumOnly: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isMedium && props.children}</>\n    ),\n    LargeOnly: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isLarge && props.children}</>\n    ),\n    MediumOrSmaller: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isMediumOrSmaller && props.children}</>\n    ),\n    MediumOrLarger: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isMediumOrLarger && props.children}</>\n    ),\n  }\n\n  // ---------------------------------------\n  // Create custom query helper components\n  // ---------------------------------------\n  const customComponents: Record<\n    string,\n    (props: GenericChildrenType) => JSX.Element\n  > = {}\n  Object.keys(propQueries).map(key => {\n    const componentName = key.charAt(0).toUpperCase() + key.slice(1)\n    customComponents[componentName] = (\n      props: HelperComponentProps\n    ): JSX.Element => <>{customMatches[key] && props.children}</>\n  })\n\n  return {\n    queries: { ...kaizenMatches, ...customQueryMatches },\n    components: { ...kaizenComponents, ...customComponents },\n  }\n}\n"],"names":["subtractOnePixel","breakpoint","concat","parseInt","useMediaQueries","propQueries","window","queries","isSmall","isMedium","isLarge","isMediumOrSmaller","isMediumOrLarger","components","SmallOnly","React","createElement","Fragment","MediumOnly","LargeOnly","MediumOrSmaller","MediumOrLarger","props","children","theme","useTheme","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","matchMedia","addEventListener","undefined","smallMatchMedia","useMemo","layout","breakpoints","medium","mediumMatchMedia","large","largeMatchMedia","matches","_a","useState","kaizenMatches","setKaizenMatches","useEffect","updateMatches","isSmallAfterUpdate","isMediumAfterUpdate","isLargeAfterUpdate","removeEventListener","customQueryMatchMedias","Map","customQueryMatches","Object","entries","forEach","queryString","queryName","set","_b","customMatches","setCustomMatches","updateCustomMatches","__assign","allEventListeners","updateCustomMatchesForQuery","eventListener","kaizenComponents","customComponents","keys","map","key","componentName","charAt","toUpperCase","slice"],"mappings":"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"}
+{"version":3,"file":"useMediaQueries.mjs","sources":["../../../src/utils/useMediaQueries.tsx"],"sourcesContent":["import React, { useEffect, useState, ReactNode, useMemo } from \"react\"\n\ntype Props = { [key: string]: string }\ntype GenericChildrenType = { children?: ReactNode }\n\nexport const subtractOnePixel = (breakpoint: string): string =>\n  `${parseInt(breakpoint, 10) - 1}px`\n\nexport const useMediaQueries = (\n  propQueries: Props = {}\n): {\n  queries: {\n    [key: string]: boolean\n    isSmall: boolean\n    isMedium: boolean\n    isLarge: boolean\n    isMediumOrSmaller: boolean\n    isMediumOrLarger: boolean\n  }\n  components: {\n    [key: string]: (props: GenericChildrenType) => JSX.Element\n    SmallOnly: (props: GenericChildrenType) => JSX.Element\n    MediumOnly: (props: GenericChildrenType) => JSX.Element\n    LargeOnly: (props: GenericChildrenType) => JSX.Element\n    MediumOrSmaller: (props: GenericChildrenType) => JSX.Element\n    MediumOrLarger: (props: GenericChildrenType) => JSX.Element\n  }\n} => {\n  if (typeof window === \"undefined\") {\n    return {\n      queries: {\n        isSmall: false,\n        isMedium: false,\n        isLarge: false,\n        isMediumOrSmaller: false,\n        isMediumOrLarger: true,\n      },\n      components: {\n        SmallOnly: () => <></>,\n        MediumOnly: () => <></>,\n        LargeOnly: () => <></>,\n        MediumOrSmaller: () => <></>,\n        MediumOrLarger: (props: HelperComponentProps) => <>{props.children}</>,\n      },\n    }\n  }\n\n  // Ensure these match the tokens in @kaizen/design-tokens\n  const breakpoints = { medium: \"768px\", large: \"1080px\" }\n\n  // The `addEventListener` calls blow up legacy Edge (<= v18/pre chromium),\n  // so we disable the functionality of updating after page load.\n  const isLegacyEdge = navigator.userAgent.match(/Edge/)\n  const isUnsupportedSafari =\n    window.matchMedia(\"\").addEventListener === undefined\n\n  // ---------------------------------------\n  // Create Kaizen breakpoint matches for initial state\n  // ---------------------------------------\n  const smallMatchMedia = useMemo(\n    () =>\n      window.matchMedia(`(max-width: ${subtractOnePixel(breakpoints.medium)})`),\n    [breakpoints.medium]\n  )\n\n  const mediumMatchMedia = useMemo(\n    () =>\n      window.matchMedia(\n        `(min-width: ${breakpoints.medium}) and (max-width: ${subtractOnePixel(\n          breakpoints.large\n        )})`\n      ),\n    [breakpoints.large]\n  )\n  const largeMatchMedia = useMemo(\n    () => window.matchMedia(`(min-width: ${breakpoints.large})`),\n    [breakpoints.large]\n  )\n\n  const isSmall = smallMatchMedia.matches || false\n  const isMedium = mediumMatchMedia.matches || false\n  const isLarge = largeMatchMedia.matches || false\n\n  const [kaizenMatches, setKaizenMatches] = useState<{\n    isSmall: boolean\n    isMedium: boolean\n    isLarge: boolean\n    isMediumOrSmaller: boolean\n    isMediumOrLarger: boolean\n  }>({\n    isSmall,\n    isMedium,\n    isLarge,\n    isMediumOrSmaller: !isLarge,\n    isMediumOrLarger: !isSmall,\n    // Note: ^the last two will need an adjustment in logic if/when we add more breakpoints\n  })\n\n  // ---------------------------------------\n  // Create an event listener based on the medium breakpoint and update state whenever it changes\n  // ---------------------------------------\n  useEffect(() => {\n    if (isLegacyEdge || isUnsupportedSafari) {\n      return\n    }\n\n    const updateMatches = (): void => {\n      const isSmallAfterUpdate = smallMatchMedia.matches || false\n      const isMediumAfterUpdate = mediumMatchMedia.matches || false\n      const isLargeAfterUpdate = largeMatchMedia.matches || false\n\n      setKaizenMatches({\n        isSmall: isSmallAfterUpdate,\n        isMedium: isMediumAfterUpdate,\n        isLarge: isLargeAfterUpdate,\n        isMediumOrSmaller: !isLargeAfterUpdate,\n        isMediumOrLarger: !isSmallAfterUpdate,\n      })\n    }\n\n    mediumMatchMedia.addEventListener(\"change\", updateMatches, true)\n\n    return () => {\n      mediumMatchMedia.removeEventListener(\"change\", updateMatches)\n    }\n  }, [])\n\n  // ---------------------------------------\n  // Create custom queries matches for initial state\n  // ---------------------------------------\n  const customQueryMatchMedias = new Map()\n  const customQueryMatches: Record<string, boolean> = {}\n  new Map(Object.entries(propQueries)).forEach((queryString, queryName) => {\n    const matchMedia = window.matchMedia(queryString)\n    customQueryMatches[queryName] = matchMedia.matches || false\n\n    // Store this matchMedia so that we can loop over it later and add event listeners\n    customQueryMatchMedias.set(queryName, matchMedia)\n  })\n\n  const [customMatches, setCustomMatches] =\n    useState<Record<string, boolean>>(customQueryMatches)\n\n  // ---------------------------------------\n  // Create an event listener for each custom query\n  // ---------------------------------------\n  useEffect(() => {\n    if (isLegacyEdge || isUnsupportedSafari) {\n      return\n    }\n\n    const updateCustomMatches = (\n      matchMedia: MediaQueryList,\n      queryName: string\n    ): void =>\n      setCustomMatches({\n        ...customQueryMatches,\n        [queryName]: matchMedia.matches || false,\n      })\n\n    const allEventListeners = new Map()\n    customQueryMatchMedias.forEach((matchMedia, queryName) => {\n      // Store this method so that we can reference it in the cleanup function below\n      const updateCustomMatchesForQuery = (): void => {\n        updateCustomMatches(matchMedia, queryName)\n      }\n      allEventListeners.set(matchMedia, updateCustomMatchesForQuery)\n\n      // Add the event listener\n      matchMedia.addEventListener(\"change\", updateCustomMatchesForQuery, true)\n    })\n\n    return () => {\n      allEventListeners.forEach((eventListener, matchMedia) => {\n        matchMedia.removeEventListener(\"change\", eventListener)\n      })\n    }\n  }, [])\n\n  // ---------------------------------------\n  // Create Kaizen helper components\n  // ---------------------------------------\n  type HelperComponentProps = {\n    children?: ReactNode\n  }\n\n  const kaizenComponents = {\n    SmallOnly: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isSmall && props.children}</>\n    ),\n    MediumOnly: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isMedium && props.children}</>\n    ),\n    LargeOnly: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isLarge && props.children}</>\n    ),\n    MediumOrSmaller: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isMediumOrSmaller && props.children}</>\n    ),\n    MediumOrLarger: (props: HelperComponentProps) => (\n      <>{kaizenMatches.isMediumOrLarger && props.children}</>\n    ),\n  }\n\n  // ---------------------------------------\n  // Create custom query helper components\n  // ---------------------------------------\n  const customComponents: Record<\n    string,\n    (props: GenericChildrenType) => JSX.Element\n  > = {}\n  Object.keys(propQueries).map(key => {\n    const componentName = key.charAt(0).toUpperCase() + key.slice(1)\n    customComponents[componentName] = (\n      props: HelperComponentProps\n    ): JSX.Element => <>{customMatches[key] && props.children}</>\n  })\n\n  return {\n    queries: { ...kaizenMatches, ...customQueryMatches },\n    components: { ...kaizenComponents, ...customComponents },\n  }\n}\n"],"names":["subtractOnePixel","breakpoint","concat","parseInt","useMediaQueries","propQueries","window","queries","isSmall","isMedium","isLarge","isMediumOrSmaller","isMediumOrLarger","components","SmallOnly","React","createElement","Fragment","MediumOnly","LargeOnly","MediumOrSmaller","MediumOrLarger","props","children","breakpoints","medium","large","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","matchMedia","addEventListener","undefined","smallMatchMedia","useMemo","mediumMatchMedia","largeMatchMedia","matches","_a","useState","kaizenMatches","setKaizenMatches","useEffect","updateMatches","isSmallAfterUpdate","isMediumAfterUpdate","isLargeAfterUpdate","removeEventListener","customQueryMatchMedias","Map","customQueryMatches","Object","entries","forEach","queryString","queryName","set","_b","customMatches","setCustomMatches","updateCustomMatches","__assign","allEventListeners","updateCustomMatchesForQuery","eventListener","kaizenComponents","customComponents","keys","map","key","componentName","charAt","toUpperCase","slice"],"mappings":"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"}

package/dist/esm/utils/useResizeObserver.mjs

@@ -0,0 +1,56 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+var defaultCallback = function (entry) {
+  return entry;
+};
+/**
+ * Hook for observing changes to a DOM element via ResizeObserver.
+ *
+ * @param {resolveEntryCallback} resolveEntry - Callback for resolving the
+ * desired value from each ResizeObserverEntry emitted by ResizeObserver
+ * @return {Array} An array containing a ref for binding to the observed DOM
+ * element, and the current value of the callback-resolved ResizeObserverEntry
+ * @callback resolveEntryCallback
+ */
+var useResizeObserver = function (resolveEntry) {
+  if (resolveEntry === void 0) {
+    resolveEntry = defaultCallback;
+  }
+  var destroyResizeObserverRef = useRef(undefined);
+  var _a = useState(undefined),
+    dimensions = _a[0],
+    setDimensions = _a[1];
+  var resolveEntryRef = useRef(resolveEntry);
+  var ref = useCallback(function (node) {
+    if (node) {
+      var resizeObserver_1 = new ResizeObserver(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+          var entry = entries_1[_i];
+          var value = resolveEntryRef.current(entry);
+          if (value) {
+            setDimensions(value);
+          }
+        }
+      });
+      resizeObserver_1.observe(node);
+      destroyResizeObserverRef.current = function () {
+        resizeObserver_1.disconnect();
+      };
+    }
+  }, [destroyResizeObserverRef, setDimensions, resolveEntryRef]);
+  // Ensure the resolveEntryRef has the latest value
+  useEffect(function () {
+    resolveEntryRef.current = resolveEntry;
+  }, [resolveEntry]);
+  // Destroy the observer on unmount
+  useEffect(function () {
+    return function () {
+      if (destroyResizeObserverRef.current) {
+        destroyResizeObserverRef.current();
+      }
+    };
+  }, []);
+  return [ref, dimensions];
+};
+export { useResizeObserver };
+//# sourceMappingURL=useResizeObserver.mjs.map

package/dist/esm/utils/useResizeObserver.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.mjs","sources":["../../../src/utils/useResizeObserver.ts"],"sourcesContent":["import React, { Ref, useCallback, useEffect, useRef, useState } from \"react\"\nimport ResizeObserver from \"resize-observer-polyfill\"\n\nconst defaultCallback = (entry: ResizeObserverEntry): ResizeObserverEntry =>\n  entry\n\nexport interface DOMRectReadOnly {\n  readonly x: number\n  readonly y: number\n  readonly width: number\n  readonly height: number\n  readonly top: number\n  readonly right: number\n  readonly bottom: number\n  readonly left: number\n}\n\n/**\n * Hook for observing changes to a DOM element via ResizeObserver.\n *\n * @param {resolveEntryCallback} resolveEntry - Callback for resolving the\n * desired value from each ResizeObserverEntry emitted by ResizeObserver\n * @return {Array} An array containing a ref for binding to the observed DOM\n * element, and the current value of the callback-resolved ResizeObserverEntry\n * @callback resolveEntryCallback\n */\nexport const useResizeObserver = <T, E extends Element = HTMLElement>(\n  resolveEntry: (entry: ResizeObserverEntry) => any = defaultCallback\n): [Ref<E>, T | undefined] => {\n  const destroyResizeObserverRef: React.MutableRefObject<\n    undefined | (() => void)\n  > = useRef(undefined)\n  const [dimensions, setDimensions] = useState<T | undefined>(undefined)\n  const resolveEntryRef: React.MutableRefObject<\n    (entry: ResizeObserverEntry) => any\n  > = useRef(resolveEntry)\n\n  const ref: Ref<E> = useCallback(\n    (node: E) => {\n      if (node) {\n        const resizeObserver = new ResizeObserver(\n          (entries: ResizeObserverEntry[]) => {\n            for (const entry of entries) {\n              const value = resolveEntryRef.current(entry)\n              if (value) {\n                setDimensions(value)\n              }\n            }\n          }\n        )\n        resizeObserver.observe(node)\n        destroyResizeObserverRef.current = (): void => {\n          resizeObserver.disconnect()\n        }\n      }\n    },\n    [destroyResizeObserverRef, setDimensions, resolveEntryRef]\n  )\n\n  // Ensure the resolveEntryRef has the latest value\n  useEffect(() => {\n    resolveEntryRef.current = resolveEntry\n  }, [resolveEntry])\n\n  // Destroy the observer on unmount\n  useEffect(\n    () => () => {\n      if (destroyResizeObserverRef.current) {\n        destroyResizeObserverRef.current()\n      }\n    },\n    []\n  )\n  return [ref, dimensions]\n}\n"],"names":["defaultCallback","entry","useResizeObserver","resolveEntry","destroyResizeObserverRef","useRef","undefined","_a","useState","dimensions","setDimensions","resolveEntryRef","ref","useCallback","node","resizeObserver_1","ResizeObserver","entries","entries_1","_i","length","value","current","observe","disconnect","useEffect"],"mappings":";;AAGA,IAAMA,eAAe,GAAG,SAAAA,CAACC,KAA0B,EAAA;EACjD,OAAAA,KAAK;AAAL,CAAK;AAaP;;;;;;;;AAQG;AACI,IAAMC,iBAAiB,GAAG,SAAAA,CAC/BC,YAAmE,EAAA;EAAnE,IAAAA,YAAA,KAAA,KAAA,CAAA,EAAA;IAAAA,YAAmE,GAAAH,eAAA;EAAA;EAEnE,IAAMI,wBAAwB,GAE1BC,MAAM,CAACC,SAAS,CAAC;EACf,IAAAC,EAAA,GAA8BC,QAAQ,CAAgBF,SAAS,CAAC;IAA/DG,UAAU,GAAAF,EAAA,CAAA,CAAA,CAAA;IAAEG,aAAa,GAAAH,EAAA,CAAA,CAAA,CAAsC;EACtE,IAAMI,eAAe,GAEjBN,MAAM,CAACF,YAAY,CAAC;EAExB,IAAMS,GAAG,GAAWC,WAAW,CAC7B,UAACC,IAAO,EAAA;IACN,IAAIA,IAAI,EAAE;MACR,IAAMC,gBAAc,GAAG,IAAIC,cAAc,CACvC,UAACC,OAA8B,EAAA;QAC7B,KAAoB,UAAO,EAAPC,SAAA,GAAAD,OAAO,EAAPE,EAAO,GAAAD,SAAA,CAAAE,MAAA,EAAPD,IAAO,EAAE;UAAxB,IAAMlB,KAAK,GAAAiB,SAAA,CAAAC,EAAA,CAAA;UACd,IAAME,KAAK,GAAGV,eAAe,CAACW,OAAO,CAACrB,KAAK,CAAC;UAC5C,IAAIoB,KAAK,EAAE;YACTX,aAAa,CAACW,KAAK,CAAC;UACrB;QACF;MACH,CAAC,CACF;MACDN,gBAAc,CAACQ,OAAO,CAACT,IAAI,CAAC;MAC5BV,wBAAwB,CAACkB,OAAO,GAAG,YAAA;QACjCP,gBAAc,CAACS,UAAU,CAAA,CAAE;MAC7B,CAAC;IACF;EACF,CAAA,EACD,CAACpB,wBAAwB,EAAEM,aAAa,EAAEC,eAAe,CAAC,CAC3D;;EAGDc,SAAS,CAAC,YAAA;IACRd,eAAe,CAACW,OAAO,GAAGnB,YAAY;EACxC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;;EAGlBsB,SAAS,CACP;IAAM,OAAA,YAAA;MACJ,IAAIrB,wBAAwB,CAACkB,OAAO,EAAE;QACpClB,wBAAwB,CAACkB,OAAO,CAAA,CAAE;MACnC;IACH,CAAC;EAJK,CAIL,EACD,EAAE,CACH;EACD,OAAO,CAACV,GAAG,EAAEH,UAAU,CAAC;AAC1B,CAAA;"}