@fremtind/jokul 5.2.3 → 6.0.0-next.0
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/README.md +1 -1
- package/build/build-stats.html +1 -1
- package/build/cjs/components/file/File.cjs +1 -1
- package/build/cjs/components/file/File.cjs.map +1 -1
- package/build/cjs/components/file/types.d.cts +10 -1
- package/build/cjs/hooks/index.cjs +1 -1
- package/build/cjs/hooks/index.d.cts +0 -1
- package/build/cjs/utilities/formatters/index.cjs +1 -1
- package/build/cjs/utilities/formatters/index.d.cts +1 -1
- package/build/cjs/utilities/formatters/util/registerWithMask.cjs +1 -1
- package/build/cjs/utilities/formatters/util/registerWithMask.cjs.map +1 -1
- package/build/cjs/utilities/formatters/util/registerWithMask.d.cts +0 -8
- package/build/cjs/utilities/index.cjs +1 -1
- package/build/cjs/utilities/validators/index.cjs +1 -1
- package/build/cjs/utilities/validators/index.d.cts +0 -1
- package/build/es/components/file/File.js +1 -1
- package/build/es/components/file/File.js.map +1 -1
- package/build/es/components/file/types.d.ts +10 -1
- package/build/es/hooks/index.d.ts +0 -1
- package/build/es/hooks/index.js +1 -1
- package/build/es/utilities/formatters/index.d.ts +1 -1
- package/build/es/utilities/formatters/index.js +1 -1
- package/build/es/utilities/formatters/util/registerWithMask.d.ts +0 -8
- package/build/es/utilities/formatters/util/registerWithMask.js +1 -1
- package/build/es/utilities/formatters/util/registerWithMask.js.map +1 -1
- package/build/es/utilities/index.js +1 -1
- package/build/es/utilities/validators/index.d.ts +0 -1
- package/build/es/utilities/validators/index.js +1 -1
- package/codemods/CODEMODS.md +16 -0
- package/codemods/__tests__/import-paths.test.mjs +43 -0
- package/codemods/import-paths.mjs +8 -2
- package/codemods/transforms/register-with-mask.mjs +267 -0
- package/package.json +1 -1
- package/src/fonts/Jokul-Icons.woff2 +0 -0
- package/src/fonts/brands/fremtind/Jokul-Icons.woff2 +0 -0
- package/styles/base.css +1 -1
- package/styles/base.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file/file.css +50 -61
- package/styles/components/file/file.min.css +1 -1
- package/styles/components/file/file.scss +66 -79
- package/styles/components/file-input/file-input.css +59 -70
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +2 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components.css +74 -85
- package/styles/components.min.css +1 -1
- package/styles/jkl/_shadows.scss +0 -12
- package/styles/theme/_fonts.scss +1 -1
- package/build/cjs/hooks/useAnimatedDetails/index.cjs +0 -2
- package/build/cjs/hooks/useAnimatedDetails/index.cjs.map +0 -1
- package/build/cjs/hooks/useAnimatedDetails/index.d.cts +0 -1
- package/build/cjs/hooks/useAnimatedDetails/useAnimatedDetails.cjs +0 -2
- package/build/cjs/hooks/useAnimatedDetails/useAnimatedDetails.cjs.map +0 -1
- package/build/cjs/hooks/useAnimatedDetails/useAnimatedDetails.d.cts +0 -21
- package/build/cjs/utilities/validators/isValidDogId/isValidDogId.cjs +0 -2
- package/build/cjs/utilities/validators/isValidDogId/isValidDogId.cjs.map +0 -1
- package/build/cjs/utilities/validators/isValidDogId/isValidDogId.d.cts +0 -7
- package/build/es/hooks/useAnimatedDetails/index.d.ts +0 -1
- package/build/es/hooks/useAnimatedDetails/index.js +0 -2
- package/build/es/hooks/useAnimatedDetails/index.js.map +0 -1
- package/build/es/hooks/useAnimatedDetails/useAnimatedDetails.d.ts +0 -21
- package/build/es/hooks/useAnimatedDetails/useAnimatedDetails.js +0 -2
- package/build/es/hooks/useAnimatedDetails/useAnimatedDetails.js.map +0 -1
- package/build/es/utilities/validators/isValidDogId/isValidDogId.d.ts +0 -7
- package/build/es/utilities/validators/isValidDogId/isValidDogId.js +0 -2
- package/build/es/utilities/validators/isValidDogId/isValidDogId.js.map +0 -1
- package/src/fonts/Fremtind-Material-Symbols.woff2 +0 -0
- package/src/fonts/brands/fremtind/Fremtind-Material-Symbols.woff2 +0 -0
package/styles/jkl/_shadows.scss
CHANGED
|
@@ -11,15 +11,3 @@ $shadow-navigation--hover: 0 ru.rem(6px) ru.rem(25px) rgb(37 42 49 / 12%);
|
|
|
11
11
|
/// Skygge som indikerer at noe er klikkbart og at klikk vil gjøre en endring på nåværende side
|
|
12
12
|
/// @type List
|
|
13
13
|
$shadow-task-card: 0 ru.rem(4px) ru.rem(12px) rgb(37 42 49 / 3%);
|
|
14
|
-
|
|
15
|
-
/// @type List
|
|
16
|
-
/// @deprecated Se tilgjengelige skygger i _shadows.scss
|
|
17
|
-
$drop-shadow--small: 0 ru.rem(4px) ru.rem(8px) rgb(0 0 0 / 8%);
|
|
18
|
-
|
|
19
|
-
/// @type List
|
|
20
|
-
/// @deprecated Se tilgjengelige skygger i _shadows.scss
|
|
21
|
-
$drop-shadow--medium: ru.rem(4px) ru.rem(4px) ru.rem(8px) rgb(0 0 0 / 8%);
|
|
22
|
-
|
|
23
|
-
/// @type List
|
|
24
|
-
/// @deprecated Se tilgjengelige skygger i _shadows.scss
|
|
25
|
-
$drop-shadow--large: ru.rem(4px) ru.rem(6px) ru.rem(16px) rgb(0 0 0 / 15%);
|
package/styles/theme/_fonts.scss
CHANGED
|
@@ -23,7 +23,7 @@ $webfonts-dir: "/fonts" !default;
|
|
|
23
23
|
font-family: "Jokul Icons";
|
|
24
24
|
font-weight: 300 400;
|
|
25
25
|
font-style: normal;
|
|
26
|
-
src: url("#{$webfonts-dir}/
|
|
26
|
+
src: url("#{$webfonts-dir}/Jokul-Icons.woff2") format("woff2");
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
@font-face {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useAnimatedDetails } from './useAnimatedDetails.cjs';
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useAnimatedDetails=({onOpenChange:r,isExpanded:t})=>{const n=e.useRef(null),u=e.useRef(null),c=e.useRef(null),s=e.useRef(null),[i,o]=e.useState(!1),[a,f]=e.useState(!1);e.useEffect(()=>{l(t)},[t]);const l=e=>{n.current&&u.current&&(n.current.open=e,s.current=null,o(!1),f(!1),n.current.style.overflow="",n.current.style.height="")};return{detailsRef:n,summaryRef:u,contentRef:c,onSummaryClick:e=>{e.preventDefault(),n.current&&u.current&&(n.current.style.overflow="hidden",i||!n.current.open?(e=>{n.current&&u.current&&(n.current.style.height=`${n.current.offsetHeight}px`,n.current.open=!0,requestAnimationFrame(()=>{if(n.current&&u.current&&c.current){f(!0),r(!0,e);const t=n.current.offsetHeight,i=u.current.offsetHeight+c.current.offsetHeight;s.current&&s.current.cancel(),n.current.animate&&(s.current=n.current.animate({height:[`${t}px`,`${i}px`]},{duration:150,easing:"ease"}),s.current.onfinish=()=>l(!0),s.current.oncancel=()=>f(!1))}}))})(e):(a||n.current.open)&&(e=>{if(n.current&&u.current){o(!0),r(!1,e);const t=n.current.offsetHeight,c=u.current.offsetHeight;s.current&&s.current.cancel(),n.current.animate&&(s.current=n.current.animate({height:[`${t}px`,`${c}px`]},{duration:150,easing:"ease"}),s.current.onfinish=()=>l(!1),s.current.oncancel=()=>o(!1))}})(e))}}};
|
|
2
|
-
//# sourceMappingURL=useAnimatedDetails.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedDetails.cjs","sources":["../../../../src/hooks/useAnimatedDetails/useAnimatedDetails.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * Lar deg animere et HTML details element med en summary trigger og noe innhold.\n * HTML strukturen din bør se ut som omtrent\n * <details ref={detailsRef}>\n * <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>\n * <div ref={contentRef}>Ekspanderbart innhold</div>\n * </details>\n *\n * @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.\n * @param isExpanded Styr åpning/lukking utenfra.\n * @deprecated Bruk heller `useAnimatedHeightBetween` eller lignende på selve innholdet\n */\nexport const useAnimatedDetails = ({\n onOpenChange,\n isExpanded,\n}: {\n onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;\n isExpanded: boolean;\n}): {\n detailsRef: React.RefObject<HTMLDetailsElement>;\n summaryRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<HTMLDivElement>;\n onSummaryClick: React.MouseEventHandler<HTMLElement>;\n} => {\n const detailsRef = useRef<HTMLDetailsElement>(null);\n const summaryRef = useRef<HTMLButtonElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const animation = useRef<Animation | null>(null);\n\n const [isClosing, setIsClosing] = useState(false);\n const [isExpanding, setIsExpanding] = useState(false);\n\n useEffect(() => {\n onAnimationFinish(isExpanded);\n }, [isExpanded]);\n\n const onAnimationFinish = (open: boolean) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.open = open;\n animation.current = null;\n setIsClosing(false);\n setIsExpanding(false);\n detailsRef.current.style.overflow = \"\";\n detailsRef.current.style.height = \"\";\n }\n };\n\n const open = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.height = `${detailsRef.current.offsetHeight}px`;\n detailsRef.current.open = true;\n requestAnimationFrame(() => {\n if (\n detailsRef.current &&\n summaryRef.current &&\n contentRef.current\n ) {\n setIsExpanding(true);\n onOpenChange(true, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight =\n summaryRef.current.offsetHeight +\n contentRef.current.offsetHeight;\n\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () =>\n onAnimationFinish(true);\n animation.current.oncancel = () =>\n setIsExpanding(false);\n }\n }\n });\n }\n };\n\n const close = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n setIsClosing(true);\n onOpenChange(false, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight = summaryRef.current.offsetHeight;\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () => onAnimationFinish(false);\n animation.current.oncancel = () => setIsClosing(false);\n }\n }\n };\n\n const onSummaryClick = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.overflow = \"hidden\";\n if (isClosing || !detailsRef.current.open) {\n open(e);\n } else if (isExpanding || detailsRef.current.open) {\n close(e);\n }\n }\n };\n\n return { detailsRef, summaryRef, contentRef, onSummaryClick };\n};\n"],"names":["onOpenChange","isExpanded","detailsRef","useRef","summaryRef","contentRef","animation","isClosing","setIsClosing","useState","isExpanding","setIsExpanding","useEffect","onAnimationFinish","open","current","style","overflow","height","onSummaryClick","e","preventDefault","offsetHeight","requestAnimationFrame","startHeight","endHeight","cancel","animate","duration","easing","onfinish","oncancel","close"],"mappings":"oIAckC,EAC9BA,aAAAA,EACAC,WAAAA,MAUA,MAAMC,EAAaC,EAAAA,OAA2B,MACxCC,EAAaD,EAAAA,OAA0B,MACvCE,EAAaF,EAAAA,OAAuB,MACpCG,EAAYH,EAAAA,OAAyB,OAEpCI,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAaC,GAAkBF,EAAAA,UAAS,GAE/CG,EAAAA,UAAU,KACNC,EAAkBZ,IACnB,CAACA,IAEJ,MAAMY,EAAqBC,IACnBZ,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQD,KAAOA,EAC1BR,EAAUS,QAAU,KACpBP,GAAa,GACbG,GAAe,GACfT,EAAWa,QAAQC,MAAMC,SAAW,GACpCf,EAAWa,QAAQC,MAAME,OAAS,KAmF1C,MAAO,CAAEhB,WAAAA,EAAYE,WAAAA,EAAYC,WAAAA,EAAYc,eAZrBC,IACpBA,EAAEC,iBACEnB,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQC,MAAMC,SAAW,SAChCV,IAAcL,EAAWa,QAAQD,KAvE/BM,KACNlB,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQC,MAAME,OAAS,GAAGhB,EAAWa,QAAQO,iBACxDpB,EAAWa,QAAQD,MAAO,EAC1BS,sBAAsB,KAClB,GACIrB,EAAWa,SACXX,EAAWW,SACXV,EAAWU,QACb,CACEJ,GAAe,GACfX,GAAa,EAAMoB,GACnB,MAAMI,EAActB,EAAWa,QAAQO,aACjCG,EACFrB,EAAWW,QAAQO,aACnBjB,EAAWU,QAAQO,aAEnBhB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACnBrB,EAAUS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IACzBjB,GAAkB,GACtBP,EAAUS,QAAQgB,SAAW,IACzBpB,GAAe,GAE3B,MAoCAG,CAAKM,IACEV,GAAeR,EAAWa,QAAQD,OAhCtCM,KACX,GAAIlB,EAAWa,SAAWX,EAAWW,QAAS,CAC1CP,GAAa,GACbR,GAAa,EAAOoB,GACpB,MAAMI,EAActB,EAAWa,QAAQO,aACjCG,EAAYrB,EAAWW,QAAQO,aACjChB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACnBrB,EAAUS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IAAMjB,GAAkB,GACrDP,EAAUS,QAAQgB,SAAW,IAAMvB,GAAa,GAExD,GAUQwB,CAAMZ"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Lar deg animere et HTML details element med en summary trigger og noe innhold.
|
|
3
|
-
* HTML strukturen din bør se ut som omtrent
|
|
4
|
-
* <details ref={detailsRef}>
|
|
5
|
-
* <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>
|
|
6
|
-
* <div ref={contentRef}>Ekspanderbart innhold</div>
|
|
7
|
-
* </details>
|
|
8
|
-
*
|
|
9
|
-
* @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.
|
|
10
|
-
* @param isExpanded Styr åpning/lukking utenfra.
|
|
11
|
-
* @deprecated Bruk heller `useAnimatedHeightBetween` eller lignende på selve innholdet
|
|
12
|
-
*/
|
|
13
|
-
export declare const useAnimatedDetails: ({ onOpenChange, isExpanded, }: {
|
|
14
|
-
onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;
|
|
15
|
-
isExpanded: boolean;
|
|
16
|
-
}) => {
|
|
17
|
-
detailsRef: React.RefObject<HTMLDetailsElement>;
|
|
18
|
-
summaryRef: React.RefObject<HTMLButtonElement>;
|
|
19
|
-
contentRef: React.RefObject<HTMLDivElement>;
|
|
20
|
-
onSummaryClick: React.MouseEventHandler<HTMLElement>;
|
|
21
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isValidDogId.cjs","sources":["../../../../../src/utilities/validators/isValidDogId/isValidDogId.ts"],"sourcesContent":["export const DOGID_REGEX = /^5780[0-9]{11}$/;\n\n/**\n * Validerer at verdien er et gyldig norsk ID-nummer for hund.\n * @deprecated This only validates norwegian id-tags, that is probably more restrictive than you want\n * expect this function to change, use carefully\n */\nexport const isValidDogId = (value: string): boolean => DOGID_REGEX.test(value);\n"],"names":["DOGID_REGEX","value","test"],"mappings":"gFAAO,MAAMA,EAAc,6DAOEC,GAA2BD,EAAYE,KAAKD"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export declare const DOGID_REGEX: RegExp;
|
|
2
|
-
/**
|
|
3
|
-
* Validerer at verdien er et gyldig norsk ID-nummer for hund.
|
|
4
|
-
* @deprecated This only validates norwegian id-tags, that is probably more restrictive than you want
|
|
5
|
-
* expect this function to change, use carefully
|
|
6
|
-
*/
|
|
7
|
-
export declare const isValidDogId: (value: string) => boolean;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useAnimatedDetails } from './useAnimatedDetails.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Lar deg animere et HTML details element med en summary trigger og noe innhold.
|
|
3
|
-
* HTML strukturen din bør se ut som omtrent
|
|
4
|
-
* <details ref={detailsRef}>
|
|
5
|
-
* <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>
|
|
6
|
-
* <div ref={contentRef}>Ekspanderbart innhold</div>
|
|
7
|
-
* </details>
|
|
8
|
-
*
|
|
9
|
-
* @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.
|
|
10
|
-
* @param isExpanded Styr åpning/lukking utenfra.
|
|
11
|
-
* @deprecated Bruk heller `useAnimatedHeightBetween` eller lignende på selve innholdet
|
|
12
|
-
*/
|
|
13
|
-
export declare const useAnimatedDetails: ({ onOpenChange, isExpanded, }: {
|
|
14
|
-
onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;
|
|
15
|
-
isExpanded: boolean;
|
|
16
|
-
}) => {
|
|
17
|
-
detailsRef: React.RefObject<HTMLDetailsElement>;
|
|
18
|
-
summaryRef: React.RefObject<HTMLButtonElement>;
|
|
19
|
-
contentRef: React.RefObject<HTMLDivElement>;
|
|
20
|
-
onSummaryClick: React.MouseEventHandler<HTMLElement>;
|
|
21
|
-
};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{useRef as e,useState as r,useEffect as t}from"react";const n=({onOpenChange:n,isExpanded:c})=>{const u=e(null),a=e(null),s=e(null),i=e(null),[o,f]=r(!1),[l,h]=r(!1);t(()=>{p(c)},[c]);const p=e=>{u.current&&a.current&&(u.current.open=e,i.current=null,f(!1),h(!1),u.current.style.overflow="",u.current.style.height="")};return{detailsRef:u,summaryRef:a,contentRef:s,onSummaryClick:e=>{e.preventDefault(),u.current&&a.current&&(u.current.style.overflow="hidden",o||!u.current.open?(e=>{u.current&&a.current&&(u.current.style.height=`${u.current.offsetHeight}px`,u.current.open=!0,requestAnimationFrame(()=>{if(u.current&&a.current&&s.current){h(!0),n(!0,e);const r=u.current.offsetHeight,t=a.current.offsetHeight+s.current.offsetHeight;i.current&&i.current.cancel(),u.current.animate&&(i.current=u.current.animate({height:[`${r}px`,`${t}px`]},{duration:150,easing:"ease"}),i.current.onfinish=()=>p(!0),i.current.oncancel=()=>h(!1))}}))})(e):(l||u.current.open)&&(e=>{if(u.current&&a.current){f(!0),n(!1,e);const r=u.current.offsetHeight,t=a.current.offsetHeight;i.current&&i.current.cancel(),u.current.animate&&(i.current=u.current.animate({height:[`${r}px`,`${t}px`]},{duration:150,easing:"ease"}),i.current.onfinish=()=>p(!1),i.current.oncancel=()=>f(!1))}})(e))}}};export{n as useAnimatedDetails};
|
|
2
|
-
//# sourceMappingURL=useAnimatedDetails.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedDetails.js","sources":["../../../../src/hooks/useAnimatedDetails/useAnimatedDetails.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * Lar deg animere et HTML details element med en summary trigger og noe innhold.\n * HTML strukturen din bør se ut som omtrent\n * <details ref={detailsRef}>\n * <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>\n * <div ref={contentRef}>Ekspanderbart innhold</div>\n * </details>\n *\n * @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.\n * @param isExpanded Styr åpning/lukking utenfra.\n * @deprecated Bruk heller `useAnimatedHeightBetween` eller lignende på selve innholdet\n */\nexport const useAnimatedDetails = ({\n onOpenChange,\n isExpanded,\n}: {\n onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;\n isExpanded: boolean;\n}): {\n detailsRef: React.RefObject<HTMLDetailsElement>;\n summaryRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<HTMLDivElement>;\n onSummaryClick: React.MouseEventHandler<HTMLElement>;\n} => {\n const detailsRef = useRef<HTMLDetailsElement>(null);\n const summaryRef = useRef<HTMLButtonElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const animation = useRef<Animation | null>(null);\n\n const [isClosing, setIsClosing] = useState(false);\n const [isExpanding, setIsExpanding] = useState(false);\n\n useEffect(() => {\n onAnimationFinish(isExpanded);\n }, [isExpanded]);\n\n const onAnimationFinish = (open: boolean) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.open = open;\n animation.current = null;\n setIsClosing(false);\n setIsExpanding(false);\n detailsRef.current.style.overflow = \"\";\n detailsRef.current.style.height = \"\";\n }\n };\n\n const open = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.height = `${detailsRef.current.offsetHeight}px`;\n detailsRef.current.open = true;\n requestAnimationFrame(() => {\n if (\n detailsRef.current &&\n summaryRef.current &&\n contentRef.current\n ) {\n setIsExpanding(true);\n onOpenChange(true, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight =\n summaryRef.current.offsetHeight +\n contentRef.current.offsetHeight;\n\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () =>\n onAnimationFinish(true);\n animation.current.oncancel = () =>\n setIsExpanding(false);\n }\n }\n });\n }\n };\n\n const close = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n setIsClosing(true);\n onOpenChange(false, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight = summaryRef.current.offsetHeight;\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () => onAnimationFinish(false);\n animation.current.oncancel = () => setIsClosing(false);\n }\n }\n };\n\n const onSummaryClick = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.overflow = \"hidden\";\n if (isClosing || !detailsRef.current.open) {\n open(e);\n } else if (isExpanding || detailsRef.current.open) {\n close(e);\n }\n }\n };\n\n return { detailsRef, summaryRef, contentRef, onSummaryClick };\n};\n"],"names":["useAnimatedDetails","onOpenChange","isExpanded","detailsRef","useRef","summaryRef","contentRef","animation","isClosing","setIsClosing","useState","isExpanding","setIsExpanding","useEffect","onAnimationFinish","open","current","style","overflow","height","onSummaryClick","e","preventDefault","offsetHeight","requestAnimationFrame","startHeight","endHeight","cancel","animate","duration","easing","onfinish","oncancel","close"],"mappings":"4DAcO,MAAMA,EAAqB,EAC9BC,aAAAA,EACAC,WAAAA,MAUA,MAAMC,EAAaC,EAA2B,MACxCC,EAAaD,EAA0B,MACvCE,EAAaF,EAAuB,MACpCG,EAAYH,EAAyB,OAEpCI,EAAWC,GAAgBC,GAAS,IACpCC,EAAaC,GAAkBF,GAAS,GAE/CG,EAAU,KACNC,EAAkBZ,IACnB,CAACA,IAEJ,MAAMY,EAAqBC,IACnBZ,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQD,KAAOA,EAC1BR,EAAUS,QAAU,KACpBP,GAAa,GACbG,GAAe,GACfT,EAAWa,QAAQC,MAAMC,SAAW,GACpCf,EAAWa,QAAQC,MAAME,OAAS,KAmF1C,MAAO,CAAEhB,WAAAA,EAAYE,WAAAA,EAAYC,WAAAA,EAAYc,eAZrBC,IACpBA,EAAEC,iBACEnB,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQC,MAAMC,SAAW,SAChCV,IAAcL,EAAWa,QAAQD,KAvEhC,CAACM,IACNlB,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQC,MAAME,OAAS,GAAGhB,EAAWa,QAAQO,iBACxDpB,EAAWa,QAAQD,MAAO,EAC1BS,sBAAsB,KAClB,GACIrB,EAAWa,SACXX,EAAWW,SACXV,EAAWU,QACb,CACEJ,GAAe,GACfX,GAAa,EAAMoB,GACnB,MAAMI,EAActB,EAAWa,QAAQO,aACjCG,EACFrB,EAAWW,QAAQO,aACnBjB,EAAWU,QAAQO,aAEnBhB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACnBrB,EAAUS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IACzBjB,GAAkB,GACtBP,EAAUS,QAAQgB,SAAW,IACzBpB,GAAe,GAE3B,MAoCAG,CAAKM,IACEV,GAAeR,EAAWa,QAAQD,OAhCvC,CAACM,IACX,GAAIlB,EAAWa,SAAWX,EAAWW,QAAS,CAC1CP,GAAa,GACbR,GAAa,EAAOoB,GACpB,MAAMI,EAActB,EAAWa,QAAQO,aACjCG,EAAYrB,EAAWW,QAAQO,aACjChB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACnBrB,EAAUS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IAAMjB,GAAkB,GACrDP,EAAUS,QAAQgB,SAAW,IAAMvB,GAAa,GAExD,GAUQwB,CAAMZ"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export declare const DOGID_REGEX: RegExp;
|
|
2
|
-
/**
|
|
3
|
-
* Validerer at verdien er et gyldig norsk ID-nummer for hund.
|
|
4
|
-
* @deprecated This only validates norwegian id-tags, that is probably more restrictive than you want
|
|
5
|
-
* expect this function to change, use carefully
|
|
6
|
-
*/
|
|
7
|
-
export declare const isValidDogId: (value: string) => boolean;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isValidDogId.js","sources":["../../../../../src/utilities/validators/isValidDogId/isValidDogId.ts"],"sourcesContent":["export const DOGID_REGEX = /^5780[0-9]{11}$/;\n\n/**\n * Validerer at verdien er et gyldig norsk ID-nummer for hund.\n * @deprecated This only validates norwegian id-tags, that is probably more restrictive than you want\n * expect this function to change, use carefully\n */\nexport const isValidDogId = (value: string): boolean => DOGID_REGEX.test(value);\n"],"names":["DOGID_REGEX","isValidDogId","value","test"],"mappings":"AAAO,MAAMA,EAAc,kBAOdC,EAAgBC,GAA2BF,EAAYG,KAAKD"}
|
|
Binary file
|
|
Binary file
|