@helsenorge/designsystem-react 10.6.2 → 10.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [10.6.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.6.1&targetVersion=GTv10.6.2) (2025-03-14)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Reverts
|
|
5
|
+
|
|
6
|
+
* tar i bruk sass use" ([b4fc044](https://github.com/helsenorge/designsystem/commit/b4fc044c68aee56fdbe4ad93f8397f87bae5a0c3))
|
|
7
|
+
|
|
1
8
|
## [10.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.6.0&targetVersion=GTv10.6.1) (2025-03-14)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -3,7 +3,7 @@ import React__default, { useState, useEffect, useRef } from "react";
|
|
|
3
3
|
import classNames from "classnames";
|
|
4
4
|
import { AnalyticsId } from "../../constants.js";
|
|
5
5
|
import { useExpand } from "../../hooks/useExpand.js";
|
|
6
|
-
import {
|
|
6
|
+
import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
|
|
7
7
|
import { useUuid } from "../../hooks/useUuid.js";
|
|
8
8
|
import { mergeRefs } from "../../utils/refs.js";
|
|
9
9
|
import { isElementInViewport } from "../../utils/viewport.js";
|
|
@@ -28,12 +28,12 @@ const Expander = React__default.forwardRef((props, ref) => {
|
|
|
28
28
|
onExpand,
|
|
29
29
|
renderChildrenWhenClosed,
|
|
30
30
|
variant = "line",
|
|
31
|
-
zIndex
|
|
31
|
+
zIndex = 0
|
|
32
32
|
} = props;
|
|
33
33
|
const [isExpanded] = useExpand(expanded, onExpand);
|
|
34
34
|
const expanderRef = useRef(null);
|
|
35
35
|
const triggerRef = useRef(null);
|
|
36
|
-
const { isHovered } =
|
|
36
|
+
const { isHovered, isFocused } = usePseudoClasses(triggerRef);
|
|
37
37
|
const isFill = variant === "fill";
|
|
38
38
|
const isFillNegative = variant === "fill-negative";
|
|
39
39
|
const isOutline = variant === "outline";
|
|
@@ -82,9 +82,16 @@ const Expander = React__default.forwardRef((props, ref) => {
|
|
|
82
82
|
ref: triggerRef,
|
|
83
83
|
"aria-expanded": isExpanded,
|
|
84
84
|
style: {
|
|
85
|
-
zIndex: zIndex
|
|
85
|
+
zIndex: isFocused ? zIndex + 1 : zIndex
|
|
86
86
|
},
|
|
87
|
-
children: renderListHeader(
|
|
87
|
+
children: renderListHeader(
|
|
88
|
+
title,
|
|
89
|
+
titleHtmlMarkup,
|
|
90
|
+
isHovered || isFocused,
|
|
91
|
+
large ? "large" : "medium",
|
|
92
|
+
isExpanded ? ChevronUp : ChevronDown,
|
|
93
|
+
icon
|
|
94
|
+
)
|
|
88
95
|
}
|
|
89
96
|
),
|
|
90
97
|
renderContent()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n /** Toggles accordion functionality for the expanders. */\n accordion?: boolean;\n /** Items in the ExpanderList */\n children: React.ReactNode;\n /** Toggles padding of child elements */\n childPadding?: boolean;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the colors of the list. */\n color?: ExpanderListColors;\n /** Changes the font size. */\n large?: boolean;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets visual priority */\n variant?: ExpanderListVariant;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n React.HTMLAttributes<HTMLButtonElement>,\n {\n id?: string;\n title: JSX.Element | string;\n /** Changes the underlying element of the title. Default: span*/\n titleHtmlMarkup?: TitleTags;\n children: React.ReactNode;\n className?: string;\n color?: ExpanderListColors;\n icon?: React.ReactElement;\n padding?: boolean;\n expanded?: boolean;\n large?: boolean;\n testId?: string;\n handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n }\n> &\n Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n const {\n id,\n children,\n padding = true,\n color = 'neutral',\n className = '',\n icon,\n large = false,\n title,\n titleHtmlMarkup = 'span',\n expanded = false,\n testId,\n handleExpanderClick,\n onExpand,\n renderChildrenWhenClosed,\n variant = 'line',\n zIndex,\n } = props;\n const [isExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLLIElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = useHover(triggerRef);\n\n const isFill = variant === 'fill';\n const isFillNegative = variant === 'fill-negative';\n const isOutline = variant === 'outline';\n const isLine = variant === 'line';\n\n const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n [expanderListStyles[`expander-list__item--fill`]]: isFill,\n [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n [expanderListStyles['expander-list__item--outline']]: isOutline,\n [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n [expanderListStyles['expander-list__item--line']]: isLine,\n [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n });\n\n const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n [expanderListStyles[`expander-list-link--fill`]]: isFill,\n [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n [expanderListStyles['expander-list-link--outline']]: isOutline,\n [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n [expanderListStyles['expander-list-link--open']]: isExpanded,\n [expanderListStyles['expander-list-link--large']]: large,\n });\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const mainContentClasses = classNames(\n expanderListStyles['expander-list-link__main-content'],\n isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n );\n\n return <div className={mainContentClasses}>{children}</div>;\n };\n\n return (\n <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n <button\n type=\"button\"\n id={id}\n onClick={handleExpanderClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.ExpanderListExpander}\n className={expanderClasses}\n ref={triggerRef}\n aria-expanded={isExpanded}\n style={{\n zIndex: zIndex ?? undefined,\n }}\n >\n {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n </button>\n {renderContent()}\n </li>\n );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n const {\n children,\n childPadding = true,\n large,\n renderChildrenWhenClosed = false,\n color,\n className = '',\n accordion = false,\n testId,\n variant,\n zIndex,\n } = props;\n const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n const uuid = useUuid();\n const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n setLatestExpander(event.currentTarget);\n }\n\n const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n useEffect(() => {\n if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n latestExpander.scrollIntoView();\n }\n }, [accordion, latestExpander]);\n\n useEffect(() => {\n const newActiveExpander = React.Children.map(children, child => {\n if (isExpanderComponent(child)) {\n return child;\n }\n })?.reduce((acc, child, index) => {\n // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n if (typeof child.props.expanded !== 'undefined') {\n acc[getExpanderId(index)] = child.props.expanded;\n }\n return acc;\n }, {} as ActiveExpander);\n\n setActiveExpander({ ...activeExpander, ...newActiveExpander });\n }, [children]);\n\n return (\n <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n {React.Children.map(children, (child, index) => {\n if (isExpanderComponent(child)) {\n const id = getExpanderId(index);\n const expanded = activeExpander?.[id];\n\n return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n id,\n key: index,\n expanded,\n padding: childPadding,\n color,\n large,\n 'aria-expanded': expanded,\n className: expanderListStyles['expander-list__item'],\n handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n renderChildrenWhenClosed,\n variant,\n zIndex: zIndex,\n });\n }\n return child;\n })}\n </ul>\n );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n /** Toggles accordion functionality for the expanders. */\n accordion?: boolean;\n /** Items in the ExpanderList */\n children: React.ReactNode;\n /** Toggles padding of child elements */\n childPadding?: boolean;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the colors of the list. */\n color?: ExpanderListColors;\n /** Changes the font size. */\n large?: boolean;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets visual priority */\n variant?: ExpanderListVariant;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n React.HTMLAttributes<HTMLButtonElement>,\n {\n id?: string;\n title: JSX.Element | string;\n /** Changes the underlying element of the title. Default: span*/\n titleHtmlMarkup?: TitleTags;\n children: React.ReactNode;\n className?: string;\n color?: ExpanderListColors;\n icon?: React.ReactElement;\n padding?: boolean;\n expanded?: boolean;\n large?: boolean;\n testId?: string;\n handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n }\n> &\n Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n const {\n id,\n children,\n padding = true,\n color = 'neutral',\n className = '',\n icon,\n large = false,\n title,\n titleHtmlMarkup = 'span',\n expanded = false,\n testId,\n handleExpanderClick,\n onExpand,\n renderChildrenWhenClosed,\n variant = 'line',\n zIndex = 0,\n } = props;\n const [isExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLLIElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n const isFill = variant === 'fill';\n const isFillNegative = variant === 'fill-negative';\n const isOutline = variant === 'outline';\n const isLine = variant === 'line';\n\n const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n [expanderListStyles[`expander-list__item--fill`]]: isFill,\n [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n [expanderListStyles['expander-list__item--outline']]: isOutline,\n [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n [expanderListStyles['expander-list__item--line']]: isLine,\n [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n });\n\n const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n [expanderListStyles[`expander-list-link--fill`]]: isFill,\n [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n [expanderListStyles['expander-list-link--outline']]: isOutline,\n [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n [expanderListStyles['expander-list-link--open']]: isExpanded,\n [expanderListStyles['expander-list-link--large']]: large,\n });\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const mainContentClasses = classNames(\n expanderListStyles['expander-list-link__main-content'],\n isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n );\n\n return <div className={mainContentClasses}>{children}</div>;\n };\n\n return (\n <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n <button\n type=\"button\"\n id={id}\n onClick={handleExpanderClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.ExpanderListExpander}\n className={expanderClasses}\n ref={triggerRef}\n aria-expanded={isExpanded}\n style={{\n zIndex: isFocused ? zIndex + 1 : zIndex,\n }}\n >\n {renderListHeader(\n title,\n titleHtmlMarkup,\n isHovered || isFocused,\n large ? 'large' : 'medium',\n isExpanded ? ChevronUp : ChevronDown,\n icon\n )}\n </button>\n {renderContent()}\n </li>\n );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n const {\n children,\n childPadding = true,\n large,\n renderChildrenWhenClosed = false,\n color,\n className = '',\n accordion = false,\n testId,\n variant,\n zIndex,\n } = props;\n const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n const uuid = useUuid();\n const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n setLatestExpander(event.currentTarget);\n }\n\n const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n useEffect(() => {\n if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n latestExpander.scrollIntoView();\n }\n }, [accordion, latestExpander]);\n\n useEffect(() => {\n const newActiveExpander = React.Children.map(children, child => {\n if (isExpanderComponent(child)) {\n return child;\n }\n })?.reduce((acc, child, index) => {\n // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n if (typeof child.props.expanded !== 'undefined') {\n acc[getExpanderId(index)] = child.props.expanded;\n }\n return acc;\n }, {} as ActiveExpander);\n\n setActiveExpander({ ...activeExpander, ...newActiveExpander });\n }, [children]);\n\n return (\n <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n {React.Children.map(children, (child, index) => {\n if (isExpanderComponent(child)) {\n const id = getExpanderId(index);\n const expanded = activeExpander?.[id];\n\n return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n id,\n key: index,\n expanded,\n padding: childPadding,\n color,\n large,\n 'aria-expanded': expanded,\n className: expanderListStyles['expander-list__item'],\n handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n renderChildrenWhenClosed,\n variant,\n zIndex: zIndex,\n });\n }\n return child;\n })}\n </ul>\n );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["React"],"mappings":"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"}
|
package/hooks/useBreakpoint.js
CHANGED
|
@@ -20,7 +20,9 @@ function getCurrentBreakpoint() {
|
|
|
20
20
|
return (matched == null ? void 0 : matched.breakpoint) ?? Breakpoint.xxs;
|
|
21
21
|
}
|
|
22
22
|
const useBreakpoint = () => {
|
|
23
|
-
const [breakpoint, setBreakpoint] = useState(
|
|
23
|
+
const [breakpoint, setBreakpoint] = useState(
|
|
24
|
+
typeof window.matchMedia !== "undefined" ? getCurrentBreakpoint() : Breakpoint.xxs
|
|
25
|
+
);
|
|
24
26
|
useEffect(() => {
|
|
25
27
|
const handleMediaQueryEvent = (event) => {
|
|
26
28
|
switch (event.media) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n xxs = breakpoints.xxs,\n xs = breakpoints.xs,\n sm = breakpoints.sm,\n md = breakpoints.md,\n lg = breakpoints.lg,\n xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n // We read from largest -> smallest or vice versa\n // so that the first match is the \"highest\" one that applies\n const mediaQueryList = Object.entries(screen)\n .reverse() // e.g. check xl, lg, md, etc. in descending order\n .map(([size, mediaQuery]) => {\n return {\n breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n mq: window.matchMedia(mediaQuery),\n };\n });\n\n const matched = mediaQueryList.find(entry => entry.mq.matches);\n return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n const [breakpoint, setBreakpoint] = useState<Breakpoint>(
|
|
1
|
+
{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n xxs = breakpoints.xxs,\n xs = breakpoints.xs,\n sm = breakpoints.sm,\n md = breakpoints.md,\n lg = breakpoints.lg,\n xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n // We read from largest -> smallest or vice versa\n // so that the first match is the \"highest\" one that applies\n const mediaQueryList = Object.entries(screen)\n .reverse() // e.g. check xl, lg, md, etc. in descending order\n .map(([size, mediaQuery]) => {\n return {\n breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n mq: window.matchMedia(mediaQuery),\n };\n });\n\n const matched = mediaQueryList.find(entry => entry.mq.matches);\n return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n const [breakpoint, setBreakpoint] = useState<Breakpoint>(\n typeof window.matchMedia !== 'undefined' ? getCurrentBreakpoint() : Breakpoint.xxs\n );\n\n useEffect(() => {\n const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n switch (event.media) {\n case screen.xl:\n setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n return;\n case screen.lg:\n setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n return;\n case screen.md:\n setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n return;\n case screen.sm:\n setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n return;\n case screen.xs:\n setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n return;\n default:\n setBreakpoint(Breakpoint.xxs);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n const mq = window.matchMedia(mediaQuery);\n // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n // men har støtte for addListener\n if (mq.addEventListener) {\n mq.addEventListener('change', handleMediaQueryEvent);\n } else if (mq.addListener) {\n mq.addListener(handleMediaQueryEvent);\n }\n return mq;\n });\n\n return (): void => {\n mediaQueryList.forEach(mq => {\n if (mq.removeEventListener) {\n mq.removeEventListener('change', handleMediaQueryEvent);\n } else if (mq.removeListener) {\n mq.removeListener(handleMediaQueryEvent);\n }\n });\n };\n }, []);\n\n return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AACvC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,OAAO,OAAO,eAAe,cAAc,qBAAA,IAAyB,WAAW;AAAA,EACjF;AAEA,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
|